Skip to content

Commit cc81cd7

Browse files
박은우박은우
박은우
authored and
박은우
committed
style(site): Graphite Ink 편집 표면 적용
1 parent 7206874 commit cc81cd7

16 files changed

Lines changed: 309 additions & 392 deletions

‎app/api/og/route.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export async function GET(req: NextRequest) {
4040
flexDirection: 'column',
4141
alignItems: 'flex-start',
4242
justifyContent: 'center',
43-
backgroundImage: 'linear-gradient(to bottom right, #E0F2FF, #fff)',
43+
backgroundImage: 'linear-gradient(to bottom right, #EAEBEA, #E0E1E3)',
4444
padding: '80px',
4545
}}
4646
>
@@ -56,7 +56,7 @@ export async function GET(req: NextRequest) {
5656
<div
5757
style={{
5858
fontSize: '30px',
59-
color: '#6b7684',
59+
color: '#52525B',
6060
}}
6161
>
6262
{date}
@@ -66,7 +66,7 @@ export async function GET(req: NextRequest) {
6666
style={{
6767
fontSize: '60px',
6868
fontWeight: 700,
69-
color: '#191f28',
69+
color: '#252525',
7070
lineHeight: 1.2,
7171
wordBreak: 'keep-all',
7272
}}
@@ -86,8 +86,8 @@ export async function GET(req: NextRequest) {
8686
key={tag}
8787
style={{
8888
display: 'flex',
89-
backgroundColor: 'rgba(49, 130, 246, 0.1)',
90-
color: '#3182f6',
89+
backgroundColor: '#E0E1E3',
90+
color: '#3F3F46',
9191
padding: '8px 24px',
9292
borderRadius: '50px',
9393
fontSize: '24px',
@@ -114,7 +114,7 @@ export async function GET(req: NextRequest) {
114114
style={{
115115
fontSize: '32px',
116116
fontWeight: 700,
117-
color: '#3182f6',
117+
color: '#3F3F46',
118118
fontFamily: 'Pretendard',
119119
}}
120120
>

‎app/not-found.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function NotFound() {
1717
</p>
1818
<Link
1919
href="/"
20-
className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-toss-blue)] px-5 text-sm font-semibold text-white transition-colors hover:bg-[var(--color-toss-blue-dark)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
20+
className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-toss-blue)] px-5 text-sm font-semibold text-[var(--color-accent-foreground)] transition-colors hover:bg-[var(--color-toss-blue-dark)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
2121
>
2222
홈으로 돌아가기
2323
</Link>

‎blog/ui/components/GiscusComments.test.tsx‎

Lines changed: 3 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import { act, render, screen } from '@testing-library/react';
1+
import { render, screen } from '@testing-library/react';
22
import { beforeEach, describe, expect, it, vi } from 'vitest';
3-
import { useTheme } from 'next-themes';
43
import { GiscusComments } from './GiscusComments';
54

65
const mockGiscus = vi.fn((_props: Record<string, unknown>) => (
76
<div data-testid="giscus-embed" />
87
));
98

10-
vi.mock('next-themes', () => ({
11-
useTheme: vi.fn(),
12-
}));
13-
149
vi.mock('@giscus/react', () => ({
1510
default: (props: unknown) => mockGiscus(props),
1611
}));
@@ -20,30 +15,9 @@ describe('GiscusComments', () => {
2015
mockGiscus.mockClear();
2116
});
2217

23-
it('renders section and applies dark theme to iframe when present', async () => {
24-
const postMessage = vi.fn();
25-
26-
const iframe = document.createElement('iframe');
27-
iframe.className = 'giscus-frame';
28-
Object.defineProperty(iframe, 'contentWindow', {
29-
value: {
30-
postMessage,
31-
},
32-
configurable: true,
33-
});
34-
document.body.appendChild(iframe);
35-
36-
vi.mocked(useTheme).mockReturnValue({
37-
theme: 'light',
38-
resolvedTheme: 'dark',
39-
} as ReturnType<typeof useTheme>);
40-
18+
it('renders the comment embed with the fixed paper theme', () => {
4119
render(<GiscusComments slug="redis" />);
4220

43-
await act(async () => {
44-
await Promise.resolve();
45-
});
46-
4721
expect(
4822
screen.getByRole('heading', { level: 2, name: '댓글' })
4923
).toBeInTheDocument();
@@ -52,38 +26,8 @@ describe('GiscusComments', () => {
5226
expect.objectContaining({
5327
mapping: 'specific',
5428
term: 'redis',
55-
theme: 'dark',
29+
theme: 'light',
5630
})
5731
);
58-
expect(postMessage).toHaveBeenCalledWith(
59-
{
60-
giscus: {
61-
setConfig: {
62-
theme: 'dark',
63-
},
64-
},
65-
},
66-
'https://giscus.app'
67-
);
68-
69-
document.body.removeChild(iframe);
70-
});
71-
72-
it('keeps the comment embed mounted when the theme changes', () => {
73-
vi.mocked(useTheme).mockReturnValue({
74-
theme: 'light',
75-
resolvedTheme: 'light',
76-
} as ReturnType<typeof useTheme>);
77-
78-
const { rerender } = render(<GiscusComments slug="redis" />);
79-
const initialEmbed = screen.getByTestId('giscus-embed');
80-
81-
vi.mocked(useTheme).mockReturnValue({
82-
theme: 'dark',
83-
resolvedTheme: 'dark',
84-
} as ReturnType<typeof useTheme>);
85-
rerender(<GiscusComments slug="redis" />);
86-
87-
expect(screen.getByTestId('giscus-embed')).toBe(initialEmbed);
8832
});
8933
});

‎blog/ui/components/GiscusComments.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
'use client';
22

33
import Giscus from '@giscus/react';
4-
import { useEffect } from 'react';
5-
import { useTheme } from 'next-themes';
64

75
interface GiscusCommentsProps {
86
slug: string;
@@ -16,27 +14,6 @@ interface GiscusCommentsProps {
1614
* https://giscus.app 에서 설정 후 값을 확인하세요.
1715
*/
1816
export function GiscusComments({ slug }: GiscusCommentsProps) {
19-
const { resolvedTheme } = useTheme();
20-
const giscusTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
21-
22-
useEffect(() => {
23-
const iframe = document.querySelector<HTMLIFrameElement>(
24-
'iframe.giscus-frame'
25-
);
26-
if (!iframe) return;
27-
28-
iframe.contentWindow?.postMessage(
29-
{
30-
giscus: {
31-
setConfig: {
32-
theme: giscusTheme,
33-
},
34-
},
35-
},
36-
'https://giscus.app'
37-
);
38-
}, [giscusTheme]);
39-
4017
return (
4118
<section className="mt-16 pt-8 border-t border-[var(--color-grey-200)]">
4219
<h2 className="text-xl font-bold text-[var(--color-grey-900)] mb-6">
@@ -56,7 +33,7 @@ export function GiscusComments({ slug }: GiscusCommentsProps) {
5633
reactionsEnabled="1"
5734
emitMetadata="0"
5835
inputPosition="top"
59-
theme={giscusTheme}
36+
theme="light"
6037
lang="ko"
6138
loading="lazy"
6239
/>

‎blog/ui/components/MermaidDiagram.test.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,6 @@ import {
88
import { describe, expect, it, vi } from 'vitest';
99
import { MermaidDiagram } from './MermaidDiagram';
1010

11-
vi.mock('next-themes', () => ({
12-
useTheme: () => ({
13-
resolvedTheme: 'light',
14-
}),
15-
}));
16-
1711
const mockMermaidRender = vi.fn(async () => ({
1812
svg: '<svg width="500" height="250"><text>diagram</text></svg>',
1913
}));
@@ -37,6 +31,7 @@ describe('MermaidDiagram', () => {
3731
expect(mockMermaidInitialize).toHaveBeenCalledWith(
3832
expect.objectContaining({
3933
securityLevel: 'strict',
34+
theme: 'neutral',
4035
})
4136
);
4237

‎blog/ui/components/MermaidDiagram.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use client';
22

33
import { useId, useEffect, useRef, useState, type MouseEvent } from 'react';
4-
import { useTheme } from 'next-themes';
54

65
interface MermaidDiagramProps {
76
chart: string;
@@ -13,7 +12,6 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
1312
const [inlineScale, setInlineScale] = useState(1);
1413
const [fullscreenScale, setFullscreenScale] = useState(1);
1514
const [isFullscreen, setIsFullscreen] = useState(false);
16-
const { resolvedTheme } = useTheme();
1715
const uniqueId = useId().replace(/:/g, '');
1816
const inlineHostRef = useRef<HTMLDivElement>(null);
1917
const fullscreenHostRef = useRef<HTMLDivElement>(null);
@@ -100,7 +98,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
10098
mermaid.initialize({
10199
startOnLoad: false,
102100
securityLevel: 'strict',
103-
theme: resolvedTheme === 'dark' ? 'dark' : 'default',
101+
theme: 'neutral',
104102
});
105103

106104
const { svg: renderedSvg } = await mermaid.render(
@@ -123,7 +121,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
123121
return () => {
124122
isActive = false;
125123
};
126-
}, [chart, resolvedTheme, uniqueId]);
124+
}, [chart, uniqueId]);
127125

128126
useEffect(() => {
129127
applyScale(inlineHostRef.current, inlineScale);

0 commit comments

Comments
 (0)