From 7b1e890965a50ea39845c79017cdf603e15f49b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:25:41 +0900 Subject: [PATCH 01/12] =?UTF-8?q?chore:=20sonner=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toast 알림 기능 구현을 위한 sonner 라이브러리 추가 Co-Authored-By: Claude Opus 4.5 --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index eb6f909c..a979351c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "19.2.3", "react-dom": "19.2.3", "react-hook-form": "^7.71.0", + "sonner": "^2.0.7", "tailwind-merge": "^3.4.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef8e24e9..aa5bcf5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: react-hook-form: specifier: ^7.71.0 version: 7.71.0(react@19.2.3) + sonner: + specifier: ^2.0.7 + version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3) tailwind-merge: specifier: ^3.4.0 version: 3.4.0 @@ -1892,6 +1895,12 @@ packages: resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==} engines: {node: '>= 0.4'} + sonner@2.0.7: + resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc + react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -3991,6 +4000,11 @@ snapshots: side-channel-map: 1.0.1 side-channel-weakmap: 1.0.2 + sonner@2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + dependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + source-map-js@1.2.1: {} stable-hash@0.0.5: {} From e2fb54ce235a0264e5a46e61f2a73e4874441f76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:25:59 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20AlertCircleIcon=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toast warning 타입에서 사용할 경고 아이콘 컴포넌트 Co-Authored-By: Claude Opus 4.5 --- src/icons/alertCircleIcon/AlertCircleIcon.tsx | 24 +++++++++++++++++++ src/icons/alertCircleIcon/index.ts | 1 + 2 files changed, 25 insertions(+) create mode 100644 src/icons/alertCircleIcon/AlertCircleIcon.tsx create mode 100644 src/icons/alertCircleIcon/index.ts diff --git a/src/icons/alertCircleIcon/AlertCircleIcon.tsx b/src/icons/alertCircleIcon/AlertCircleIcon.tsx new file mode 100644 index 00000000..d326ee12 --- /dev/null +++ b/src/icons/alertCircleIcon/AlertCircleIcon.tsx @@ -0,0 +1,24 @@ +import { IconBase, type IconBaseProps } from "../iconBase"; + +export type AlertCircleIconProps = Omit; + +export const AlertCircleIcon = ({ + size = 20, + ...props +}: AlertCircleIconProps) => { + return ( + + + + + + ); +}; diff --git a/src/icons/alertCircleIcon/index.ts b/src/icons/alertCircleIcon/index.ts new file mode 100644 index 00000000..672b3907 --- /dev/null +++ b/src/icons/alertCircleIcon/index.ts @@ -0,0 +1 @@ +export { AlertCircleIcon, type AlertCircleIconProps } from "./AlertCircleIcon"; From f342de4e22f89c036868ba171537d3599cffb74f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:26:14 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20Toast=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20=EC=9C=A0=ED=8B=B8=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Toaster 컴포넌트: sonner Toaster 래퍼 (offset, mobileOffset, gap 지원) - toast.warning() 유틸 함수: className 방식으로 Figma 디자인 적용 - layout.tsx에 Toaster 추가 - ToastTest 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 --- app/_test/ToastTest.tsx | 16 ++++++++++++++++ app/layout.tsx | 2 ++ app/page.tsx | 5 +++-- src/components/toast/Toaster.tsx | 23 +++++++++++++++++++++++ src/components/toast/index.ts | 1 + src/utils/toast.ts | 22 ++++++++++++++++++++++ 6 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 app/_test/ToastTest.tsx create mode 100644 src/components/toast/Toaster.tsx create mode 100644 src/components/toast/index.ts create mode 100644 src/utils/toast.ts diff --git a/app/_test/ToastTest.tsx b/app/_test/ToastTest.tsx new file mode 100644 index 00000000..25618651 --- /dev/null +++ b/app/_test/ToastTest.tsx @@ -0,0 +1,16 @@ +"use client"; + +import { Button } from "#/components/button"; +import { toast } from "#/utils/toast"; + +export const ToastTest = () => { + return ( + + ); +}; diff --git a/app/layout.tsx b/app/layout.tsx index 774f0e24..2585deff 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata, Viewport } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import { Toaster } from "#/components/toast"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -34,6 +35,7 @@ export default function RootLayout({ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {children} + ); diff --git a/app/page.tsx b/app/page.tsx index 85d202e7..2b30a508 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,6 +2,7 @@ import { BackwardButton } from "#/components/backwardButton"; import { Layout } from "#/components/layout"; import { StepHeader } from "#/components/stepHeader"; import { colors } from "#/constants/color"; +import { ToastTest } from "./_test/ToastTest"; export default function Home() { return ( @@ -54,8 +55,8 @@ export default function Home() { -
- Footer +
+
diff --git a/src/components/toast/Toaster.tsx b/src/components/toast/Toaster.tsx new file mode 100644 index 00000000..332723cf --- /dev/null +++ b/src/components/toast/Toaster.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { + Toaster as SonnerToaster, + type ToasterProps as SonnerToasterProps, +} from "sonner"; + +export type ToasterProps = Pick< + SonnerToasterProps, + "offset" | "mobileOffset" | "gap" | "toastOptions" +>; + +export const Toaster = ({ offset, mobileOffset, gap, toastOptions = { duration: 3000 } }: ToasterProps) => { + return ( + + ); +}; diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts new file mode 100644 index 00000000..59ad5ca2 --- /dev/null +++ b/src/components/toast/index.ts @@ -0,0 +1 @@ +export { Toaster, type ToasterProps } from "./Toaster"; diff --git a/src/utils/toast.ts b/src/utils/toast.ts new file mode 100644 index 00000000..317f8456 --- /dev/null +++ b/src/utils/toast.ts @@ -0,0 +1,22 @@ +import { toast as sonnerToast } from "sonner"; +import { AlertCircleIcon } from "#/icons/alertCircleIcon"; + +interface ToastOptions { + duration?: number; + className?: string; +} + +export const toast = { + warning: (message: string, options?: ToastOptions) => { + sonnerToast(message, { + icon: AlertCircleIcon({ + size: 20, + className: "ygi:text-palette-primary-500 ygi:mx-auto!", + }), + classNames: { + toast: "ygi:bg-button-primary! ygi:text-text-inverse! ygi:body-14-md! ygi:rounded-sm! ygi:py-3! ygi:pl-4! ygi:pr-5! ygi:gap-2! ygi:flex! ygi:items-center! ygi:border-none!", + }, + duration: options?.duration, + }); + }, +}; From 91d55e5aa0fef2f096a78ef1c4cf31cf0a32caa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:25:41 +0900 Subject: [PATCH 04/12] =?UTF-8?q?chore:=20sonner=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toast 알림 기능 구현을 위한 sonner 라이브러리 추가 Co-Authored-By: Claude Opus 4.5 --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index eb6f909c..a979351c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "19.2.3", "react-dom": "19.2.3", "react-hook-form": "^7.71.0", + "sonner": "^2.0.7", "tailwind-merge": "^3.4.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef8e24e9..aa5bcf5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: react-hook-form: specifier: ^7.71.0 version: 7.71.0(react@19.2.3) + sonner: + specifier: ^2.0.7 + version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3) tailwind-merge: specifier: ^3.4.0 version: 3.4.0 @@ -1892,6 +1895,12 @@ packages: resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==} engines: {node: '>= 0.4'} + sonner@2.0.7: + resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc + react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -3991,6 +4000,11 @@ snapshots: side-channel-map: 1.0.1 side-channel-weakmap: 1.0.2 + sonner@2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + dependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + source-map-js@1.2.1: {} stable-hash@0.0.5: {} From 786e9f6a645e8c10dc547ab22607a1c6887a7323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:25:59 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20AlertCircleIcon=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toast warning 타입에서 사용할 경고 아이콘 컴포넌트 Co-Authored-By: Claude Opus 4.5 --- src/icons/alertCircleIcon/AlertCircleIcon.tsx | 24 +++++++++++++++++++ src/icons/alertCircleIcon/index.ts | 1 + 2 files changed, 25 insertions(+) create mode 100644 src/icons/alertCircleIcon/AlertCircleIcon.tsx create mode 100644 src/icons/alertCircleIcon/index.ts diff --git a/src/icons/alertCircleIcon/AlertCircleIcon.tsx b/src/icons/alertCircleIcon/AlertCircleIcon.tsx new file mode 100644 index 00000000..d326ee12 --- /dev/null +++ b/src/icons/alertCircleIcon/AlertCircleIcon.tsx @@ -0,0 +1,24 @@ +import { IconBase, type IconBaseProps } from "../iconBase"; + +export type AlertCircleIconProps = Omit; + +export const AlertCircleIcon = ({ + size = 20, + ...props +}: AlertCircleIconProps) => { + return ( + + + + + + ); +}; diff --git a/src/icons/alertCircleIcon/index.ts b/src/icons/alertCircleIcon/index.ts new file mode 100644 index 00000000..672b3907 --- /dev/null +++ b/src/icons/alertCircleIcon/index.ts @@ -0,0 +1 @@ +export { AlertCircleIcon, type AlertCircleIconProps } from "./AlertCircleIcon"; From a6c79d2059817296d0cd4d6c9998349b2daab21d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Fri, 23 Jan 2026 02:26:14 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20Toast=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20=EC=9C=A0=ED=8B=B8=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Toaster 컴포넌트: sonner Toaster 래퍼 (offset, mobileOffset, gap 지원) - toast.warning() 유틸 함수: className 방식으로 Figma 디자인 적용 - layout.tsx에 Toaster 추가 - ToastTest 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 --- app/_test/ToastTest.tsx | 16 ++++++++++++++++ app/layout.tsx | 1 + app/page.tsx | 5 +++-- src/components/toast/Toaster.tsx | 23 +++++++++++++++++++++++ src/components/toast/index.ts | 1 + src/utils/toast.ts | 22 ++++++++++++++++++++++ 6 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 app/_test/ToastTest.tsx create mode 100644 src/components/toast/Toaster.tsx create mode 100644 src/components/toast/index.ts create mode 100644 src/utils/toast.ts diff --git a/app/_test/ToastTest.tsx b/app/_test/ToastTest.tsx new file mode 100644 index 00000000..25618651 --- /dev/null +++ b/app/_test/ToastTest.tsx @@ -0,0 +1,16 @@ +"use client"; + +import { Button } from "#/components/button"; +import { toast } from "#/utils/toast"; + +export const ToastTest = () => { + return ( + + ); +}; diff --git a/app/layout.tsx b/app/layout.tsx index 9bc65503..a061c0e5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata, Viewport } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import { Toaster } from "#/components/toast"; const geistSans = Geist({ variable: "--font-geist-sans", diff --git a/app/page.tsx b/app/page.tsx index 85d202e7..2b30a508 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,6 +2,7 @@ import { BackwardButton } from "#/components/backwardButton"; import { Layout } from "#/components/layout"; import { StepHeader } from "#/components/stepHeader"; import { colors } from "#/constants/color"; +import { ToastTest } from "./_test/ToastTest"; export default function Home() { return ( @@ -54,8 +55,8 @@ export default function Home() {
-
- Footer +
+
diff --git a/src/components/toast/Toaster.tsx b/src/components/toast/Toaster.tsx new file mode 100644 index 00000000..332723cf --- /dev/null +++ b/src/components/toast/Toaster.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { + Toaster as SonnerToaster, + type ToasterProps as SonnerToasterProps, +} from "sonner"; + +export type ToasterProps = Pick< + SonnerToasterProps, + "offset" | "mobileOffset" | "gap" | "toastOptions" +>; + +export const Toaster = ({ offset, mobileOffset, gap, toastOptions = { duration: 3000 } }: ToasterProps) => { + return ( + + ); +}; diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts new file mode 100644 index 00000000..59ad5ca2 --- /dev/null +++ b/src/components/toast/index.ts @@ -0,0 +1 @@ +export { Toaster, type ToasterProps } from "./Toaster"; diff --git a/src/utils/toast.ts b/src/utils/toast.ts new file mode 100644 index 00000000..317f8456 --- /dev/null +++ b/src/utils/toast.ts @@ -0,0 +1,22 @@ +import { toast as sonnerToast } from "sonner"; +import { AlertCircleIcon } from "#/icons/alertCircleIcon"; + +interface ToastOptions { + duration?: number; + className?: string; +} + +export const toast = { + warning: (message: string, options?: ToastOptions) => { + sonnerToast(message, { + icon: AlertCircleIcon({ + size: 20, + className: "ygi:text-palette-primary-500 ygi:mx-auto!", + }), + classNames: { + toast: "ygi:bg-button-primary! ygi:text-text-inverse! ygi:body-14-md! ygi:rounded-sm! ygi:py-3! ygi:pl-4! ygi:pr-5! ygi:gap-2! ygi:flex! ygi:items-center! ygi:border-none!", + }, + duration: options?.duration, + }); + }, +}; From efa6a9a90e549949a06355adeea7e136ddee576b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Sat, 24 Jan 2026 01:03:03 +0900 Subject: [PATCH 07/12] =?UTF-8?q?chore:=20format=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=BD=ED=8A=B8=EC=97=90=20app=20=EB=94=94=EB=A0=89=ED=84=B0?= =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.5 --- app/layout.tsx | 23 +++++++++++++---------- package.json | 2 +- src/components/toast/Toaster.tsx | 7 ++++++- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 2ae00eec..1c86d1bb 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -29,14 +29,17 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - return ( - - - {children} - - - - ); + return ( + + + {children} + + + + ); } diff --git a/package.json b/package.json index a979351c..2f4cf39f 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "next build", "start": "next start", "lint": "eslint", - "format": "prettier --write \"src/**/*.{ts,tsx}\" --ignore-unknown", + "format": "prettier --write \"src/**/*.{ts,tsx}\" \"app/**/*.{ts,tsx}\" --ignore-unknown", "generate:colors": "node scripts/colors/generate.js" }, "dependencies": { diff --git a/src/components/toast/Toaster.tsx b/src/components/toast/Toaster.tsx index 332723cf..2a1b3ec7 100644 --- a/src/components/toast/Toaster.tsx +++ b/src/components/toast/Toaster.tsx @@ -10,7 +10,12 @@ export type ToasterProps = Pick< "offset" | "mobileOffset" | "gap" | "toastOptions" >; -export const Toaster = ({ offset, mobileOffset, gap, toastOptions = { duration: 3000 } }: ToasterProps) => { +export const Toaster = ({ + offset, + mobileOffset, + gap, + toastOptions = { duration: 3000 }, +}: ToasterProps) => { return ( Date: Sat, 24 Jan 2026 01:07:30 +0900 Subject: [PATCH 08/12] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EC=9A=A9=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ToastTest 컴포넌트 제거 - layout.tsx에서 Toaster 컴포넌트 제거 - page.tsx 테스트용 UI 코드 정리 Co-Authored-By: Claude Opus 4.5 --- app/_test/ToastTest.tsx | 16 ----------- app/layout.tsx | 4 --- app/page.tsx | 63 ++--------------------------------------- 3 files changed, 3 insertions(+), 80 deletions(-) delete mode 100644 app/_test/ToastTest.tsx diff --git a/app/_test/ToastTest.tsx b/app/_test/ToastTest.tsx deleted file mode 100644 index 25618651..00000000 --- a/app/_test/ToastTest.tsx +++ /dev/null @@ -1,16 +0,0 @@ -"use client"; - -import { Button } from "#/components/button"; -import { toast } from "#/utils/toast"; - -export const ToastTest = () => { - return ( - - ); -}; diff --git a/app/layout.tsx b/app/layout.tsx index 1c86d1bb..a061c0e5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -35,10 +35,6 @@ export default function RootLayout({ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {children} - ); diff --git a/app/page.tsx b/app/page.tsx index 2b30a508..800f3a40 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,64 +1,7 @@ -import { BackwardButton } from "#/components/backwardButton"; -import { Layout } from "#/components/layout"; -import { StepHeader } from "#/components/stepHeader"; -import { colors } from "#/constants/color"; -import { ToastTest } from "./_test/ToastTest"; - export default function Home() { return ( - - - -
- Header -
- - 스텝 헤더 제목 - - 스텝 헤더 설명 문구가 여기에 들어갑니다. - - - - -
-

- section 1 -

-
-
-

- section 2 -

-
-
-

- section 3 -

-
-
-

- section 4 -

-
- - {/* color 변수 기반 예시 */} -
-

- section 5 (colors 변수 사용) -

-
- - -
- -
- - +
+

Hello World

+
); } From 8625d97d5e2b43e3fcf4e2e17e83eda28fe15986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Sat, 24 Jan 2026 01:08:02 +0900 Subject: [PATCH 09/12] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20import=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/layout.tsx b/app/layout.tsx index a061c0e5..9bc65503 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,6 @@ import type { Metadata, Viewport } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import { Toaster } from "#/components/toast"; const geistSans = Geist({ variable: "--font-geist-sans", From f79d9a1f2d4a9a624aee03f9bf29b6d5d3b8b6e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Sat, 24 Jan 2026 01:08:30 +0900 Subject: [PATCH 10/12] chore: formatting --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 800f3a40..f3a20615 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,6 @@ export default function Home() { return ( -
+

Hello World

); From d11720ed7491e7e9ae829a89d1ee7df2a690f097 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Sat, 24 Jan 2026 01:34:03 +0900 Subject: [PATCH 11/12] =?UTF-8?q?chore:=20ESLint=EB=A5=BC=20=ED=86=B5?= =?UTF-8?q?=ED=95=9C=20Prettier=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - eslint-config-prettier, eslint-plugin-prettier 설치 - ESLint 설정에 Prettier 플러그인 추가 Co-Authored-By: Claude Opus 4.5 --- eslint.config.mjs | 31 +++++++++++++++------- package.json | 2 ++ pnpm-lock.yaml | 66 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+), 10 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 05e726d1..ba0403f4 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,18 +1,29 @@ import { defineConfig, globalIgnores } from "eslint/config"; import nextVitals from "eslint-config-next/core-web-vitals"; import nextTs from "eslint-config-next/typescript"; +import prettier from "eslint-plugin-prettier"; +import prettierConfig from "eslint-config-prettier"; const eslintConfig = defineConfig([ - ...nextVitals, - ...nextTs, - // Override default ignores of eslint-config-next. - globalIgnores([ - // Default ignores of eslint-config-next: - ".next/**", - "out/**", - "build/**", - "next-env.d.ts", - ]), + ...nextVitals, + ...nextTs, + prettierConfig, + { + plugins: { + prettier, + }, + rules: { + "prettier/prettier": "error", + }, + }, + // Override default ignores of eslint-config-next. + globalIgnores([ + // Default ignores of eslint-config-next: + ".next/**", + "out/**", + "build/**", + "next-env.d.ts", + ]), ]); export default eslintConfig; diff --git a/package.json b/package.json index 2f4cf39f..8e72017f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.1.1", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-prettier": "^5.5.5", "prettier": "^3.8.0", "prettier-plugin-tailwindcss": "^0.7.2", "tailwindcss": "^4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa5bcf5e..60865e79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,6 +63,12 @@ importers: eslint-config-next: specifier: 16.1.1 version: 16.1.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) + eslint-config-prettier: + specifier: ^10.1.8 + version: 10.1.8(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-prettier: + specifier: ^5.5.5 + version: 5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.0) prettier: specifier: ^3.8.0 version: 3.8.0 @@ -438,6 +444,10 @@ packages: resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==} engines: {node: '>=12.4.0'} + '@pkgr/core@0.2.9': + resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==} + engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + '@radix-ui/react-compose-refs@1.1.2': resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==} peerDependencies: @@ -1002,6 +1012,12 @@ packages: typescript: optional: true + eslint-config-prettier@10.1.8: + resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==} + hasBin: true + peerDependencies: + eslint: '>=7.0.0' + eslint-import-resolver-node@0.3.9: resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} @@ -1055,6 +1071,20 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9 + eslint-plugin-prettier@5.5.5: + resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + '@types/eslint': '>=8.0.0' + eslint: '>=8.0.0' + eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0' + prettier: '>=3.0.0' + peerDependenciesMeta: + '@types/eslint': + optional: true + eslint-config-prettier: + optional: true + eslint-plugin-react-hooks@7.0.1: resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==} engines: {node: '>=18'} @@ -1112,6 +1142,9 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-diff@1.3.0: + resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} + fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -1712,6 +1745,10 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + prettier-linter-helpers@1.0.1: + resolution: {integrity: sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==} + engines: {node: '>=6.0.0'} + prettier-plugin-tailwindcss@0.7.2: resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==} engines: {node: '>=20.19'} @@ -1964,6 +2001,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + synckit@0.11.12: + resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==} + engines: {node: ^14.18.0 || >=16.0.0} + tailwind-merge@3.4.0: resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==} @@ -2430,6 +2471,8 @@ snapshots: '@nolyfill/is-core-module@1.0.39': {} + '@pkgr/core@0.2.9': {} + '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.8)(react@19.2.3)': dependencies: react: 19.2.3 @@ -3065,6 +3108,10 @@ snapshots: - eslint-plugin-import-x - supports-color + eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)): + dependencies: + eslint: 9.39.2(jiti@2.6.1) + eslint-import-resolver-node@0.3.9: dependencies: debug: 3.2.7 @@ -3147,6 +3194,15 @@ snapshots: safe-regex-test: 1.1.0 string.prototype.includes: 2.0.1 + eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.0): + dependencies: + eslint: 9.39.2(jiti@2.6.1) + prettier: 3.8.0 + prettier-linter-helpers: 1.0.1 + synckit: 0.11.12 + optionalDependencies: + eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)): dependencies: '@babel/core': 7.28.6 @@ -3250,6 +3306,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-diff@1.3.0: {} + fast-glob@3.3.1: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -3816,6 +3874,10 @@ snapshots: prelude-ls@1.2.1: {} + prettier-linter-helpers@1.0.1: + dependencies: + fast-diff: 1.3.0 + prettier-plugin-tailwindcss@0.7.2(prettier@3.8.0): dependencies: prettier: 3.8.0 @@ -4081,6 +4143,10 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + synckit@0.11.12: + dependencies: + '@pkgr/core': 0.2.9 + tailwind-merge@3.4.0: {} tailwindcss@4.1.18: {} From d796b0a3985b7d296492272f2c981f0fc052156a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= Date: Sat, 24 Jan 2026 01:39:11 +0900 Subject: [PATCH 12/12] =?UTF-8?q?chore:=20eslint=20prettier=20error=20rule?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- eslint.config.mjs | 3 --- 1 file changed, 3 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index ba0403f4..d7c37821 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -12,9 +12,6 @@ const eslintConfig = defineConfig([ plugins: { prettier, }, - rules: { - "prettier/prettier": "error", - }, }, // Override default ignores of eslint-config-next. globalIgnores([