Skip to content

Commit a8ad3be

Browse files
youngminssclaude
youngminss
and
claude
authored
feat: Toast 컴포넌트 추가 (#21)
* chore: sonner 라이브러리 설치 Toast 알림 기능 구현을 위한 sonner 라이브러리 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: AlertCircleIcon 컴포넌트 추가 Toast warning 타입에서 사용할 경고 아이콘 컴포넌트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: Toast 컴포넌트 및 유틸 함수 추가 - Toaster 컴포넌트: sonner Toaster 래퍼 (offset, mobileOffset, gap 지원) - toast.warning() 유틸 함수: className 방식으로 Figma 디자인 적용 - layout.tsx에 Toaster 추가 - ToastTest 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: sonner 라이브러리 설치 Toast 알림 기능 구현을 위한 sonner 라이브러리 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: AlertCircleIcon 컴포넌트 추가 Toast warning 타입에서 사용할 경고 아이콘 컴포넌트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: Toast 컴포넌트 및 유틸 함수 추가 - Toaster 컴포넌트: sonner Toaster 래퍼 (offset, mobileOffset, gap 지원) - toast.warning() 유틸 함수: className 방식으로 Figma 디자인 적용 - layout.tsx에 Toaster 추가 - ToastTest 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: format 스크립트에 app 디렉터리 추가 및 코드 포맷팅 적용 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: 테스트용 코드 정리 - ToastTest 컴포넌트 제거 - layout.tsx에서 Toaster 컴포넌트 제거 - page.tsx 테스트용 UI 코드 정리 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: 불필요한 import 제거 * chore: formatting * chore: ESLint를 통한 Prettier 포맷팅 설정 추가 - eslint-config-prettier, eslint-plugin-prettier 설치 - ESLint 설정에 Prettier 플러그인 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: eslint prettier error rule 제거 --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 3c3cc16 commit a8ad3be

File tree

9 files changed

+181
-70
lines changed

9 files changed

+181
-70
lines changed

‎app/page.tsx‎

Lines changed: 3 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,7 @@
1-
import { BackwardButton } from "#/components/backwardButton";
2-
import { Layout } from "#/components/layout";
3-
import { StepHeader } from "#/components/stepHeader";
4-
import { colors } from "#/constants/color";
5-
61
export default function Home() {
72
return (
8-
<Layout.Root>
9-
<Layout.Header>
10-
<BackwardButton />
11-
<div className="ygi:flex ygi:h-layout-header-height ygi:w-full ygi:items-center ygi:justify-center ygi:bg-surface-gray">
12-
Header
13-
</div>
14-
<StepHeader.Root>
15-
<StepHeader.Title>스텝 헤더 제목</StepHeader.Title>
16-
<StepHeader.Description>
17-
스텝 헤더 설명 문구가 여기에 들어갑니다.
18-
</StepHeader.Description>
19-
</StepHeader.Root>
20-
</Layout.Header>
21-
<Layout.Content>
22-
<div className="ygi:flex ygi:h-80 ygi:w-full ygi:items-center ygi:justify-center ygi:bg-surface-primary">
23-
<h1 className="ygi:display-28-bd ygi:text-text-primary">
24-
section 1
25-
</h1>
26-
</div>
27-
<div className="ygi:flex ygi:h-80 ygi:w-full ygi:items-center ygi:justify-center ygi:bg-surface-secondary">
28-
<h1 className="ygi:display-28-bd ygi:text-text-primary">
29-
section 2
30-
</h1>
31-
</div>
32-
<div className="ygi:flex ygi:h-80 ygi:w-full ygi:items-center ygi:justify-center ygi:bg-button-secondary">
33-
<h1 className="ygi:display-28-bd ygi:text-text-inverse">
34-
section 3
35-
</h1>
36-
</div>
37-
<div className="ygi:flex ygi:h-80 ygi:w-full ygi:items-center ygi:justify-center ygi:bg-button-secondary-hover">
38-
<h1 className="ygi:display-28-bd ygi:text-text-inverse">
39-
section 4
40-
</h1>
41-
</div>
42-
43-
{/* color 변수 기반 예시 */}
44-
<div
45-
className="ygi:flex ygi:h-80 ygi:w-full ygi:items-center ygi:justify-center"
46-
style={{ backgroundColor: colors.palette.primary[500] }}
47-
>
48-
<h1
49-
className="ygi:display-28-bd"
50-
style={{ color: colors.text.inverse }}
51-
>
52-
section 5 (colors 변수 사용)
53-
</h1>
54-
</div>
55-
</Layout.Content>
56-
<Layout.Footer>
57-
<div className="ygi:flex ygi:h-layout-footer-height ygi:w-full ygi:items-center ygi:justify-center ygi:bg-surface-gray">
58-
Footer
59-
</div>
60-
</Layout.Footer>
61-
</Layout.Root>
3+
<div className="ygi:flex ygi:h-screen ygi:flex-col ygi:items-center ygi:justify-center">
4+
<h1>Hello World</h1>
5+
</div>
626
);
637
}

‎eslint.config.mjs‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import { defineConfig, globalIgnores } from "eslint/config";
22
import nextVitals from "eslint-config-next/core-web-vitals";
33
import nextTs from "eslint-config-next/typescript";
4+
import prettier from "eslint-plugin-prettier";
5+
import prettierConfig from "eslint-config-prettier";
46

57
const eslintConfig = defineConfig([
6-
...nextVitals,
7-
...nextTs,
8-
// Override default ignores of eslint-config-next.
9-
globalIgnores([
10-
// Default ignores of eslint-config-next:
11-
".next/**",
12-
"out/**",
13-
"build/**",
14-
"next-env.d.ts",
15-
]),
8+
...nextVitals,
9+
...nextTs,
10+
prettierConfig,
11+
{
12+
plugins: {
13+
prettier,
14+
},
15+
},
16+
// Override default ignores of eslint-config-next.
17+
globalIgnores([
18+
// Default ignores of eslint-config-next:
19+
".next/**",
20+
"out/**",
21+
"build/**",
22+
"next-env.d.ts",
23+
]),
1624
]);
1725

1826
export default eslintConfig;

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"build": "next build",
88
"start": "next start",
99
"lint": "eslint",
10-
"format": "prettier --write \"src/**/*.{ts,tsx}\" --ignore-unknown",
10+
"format": "prettier --write \"src/**/*.{ts,tsx}\" \"app/**/*.{ts,tsx}\" --ignore-unknown",
1111
"generate:colors": "node scripts/colors/generate.js"
1212
},
1313
"dependencies": {
@@ -21,6 +21,7 @@
2121
"react": "19.2.3",
2222
"react-dom": "19.2.3",
2323
"react-hook-form": "^7.71.0",
24+
"sonner": "^2.0.7",
2425
"tailwind-merge": "^3.4.0"
2526
},
2627
"devDependencies": {
@@ -30,6 +31,8 @@
3031
"@types/react-dom": "^19",
3132
"eslint": "^9",
3233
"eslint-config-next": "16.1.1",
34+
"eslint-config-prettier": "^10.1.8",
35+
"eslint-plugin-prettier": "^5.5.5",
3336
"prettier": "^3.8.0",
3437
"prettier-plugin-tailwindcss": "^0.7.2",
3538
"tailwindcss": "^4",

‎pnpm-lock.yaml‎

Lines changed: 80 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/toast/Toaster.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
3+
import {
4+
Toaster as SonnerToaster,
5+
type ToasterProps as SonnerToasterProps,
6+
} from "sonner";
7+
8+
export type ToasterProps = Pick<
9+
SonnerToasterProps,
10+
"offset" | "mobileOffset" | "gap" | "toastOptions"
11+
>;
12+
13+
export const Toaster = ({
14+
offset,
15+
mobileOffset,
16+
gap,
17+
toastOptions = { duration: 3000 },
18+
}: ToasterProps) => {
19+
return (
20+
<SonnerToaster
21+
position="bottom-center"
22+
offset={offset}
23+
mobileOffset={mobileOffset}
24+
gap={gap}
25+
toastOptions={toastOptions}
26+
/>
27+
);
28+
};

‎src/components/toast/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Toaster, type ToasterProps } from "./Toaster";

‎src/icons/alertCircleIcon/AlertCircleIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { IconBase, type IconBaseProps } from "../iconBase";
2+
3+
export type AlertCircleIconProps = Omit<IconBaseProps, "children">;
4+
5+
export const AlertCircleIcon = ({
6+
size = 20,
7+
...props
8+
}: AlertCircleIconProps) => {
9+
return (
10+
<IconBase size={size} viewBox="-1 -1 20 20" {...props}>
11+
<path
12+
d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z"
13+
fill="currentColor"
14+
/>
15+
<path
16+
d="M9 5V9"
17+
stroke="#E5E7EB"
18+
strokeWidth="2"
19+
strokeLinecap="round"
20+
/>
21+
<circle cx="9" cy="13" r="1.5" fill="#E5E7EB" />
22+
</IconBase>
23+
);
24+
};

‎src/icons/alertCircleIcon/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { AlertCircleIcon, type AlertCircleIconProps } from "./AlertCircleIcon";

0 commit comments

Comments
 (0)