diff --git a/package-lock.json b/package-lock.json index 08727f3..2742b87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "gsap": "^3.13.0", "next": "15.5.3", "react": "19.1.0", - "react-dom": "19.1.0" + "react-dom": "19.1.0", + "react-hot-toast": "^2.6.0" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -4798,7 +4799,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -6077,6 +6077,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/goober": { + "version": "2.1.16", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz", + "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==", + "license": "MIT", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -8042,6 +8051,23 @@ "react": "^19.1.0" } }, + "node_modules/react-hot-toast": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz", + "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==", + "license": "MIT", + "dependencies": { + "csstype": "^3.1.3", + "goober": "^2.1.16" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index a436a5a..4a04f15 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "gsap": "^3.13.0", "next": "15.5.3", "react": "19.1.0", - "react-dom": "19.1.0" + "react-dom": "19.1.0", + "react-hot-toast": "^2.6.0" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx index 4720dc2..b9997d3 100644 --- a/src/app/design-system/page.tsx +++ b/src/app/design-system/page.tsx @@ -2,16 +2,17 @@ import Button from '@/shared/components/button/Button'; import TextButton from '@/shared/components/button/TextButton'; -import ConfirmPop from '@/shared/components/ModalPop/ConfirmPop'; -import ModalLayout from '@/shared/components/ModalPop/ModalLayout'; +import ConfirmPop from '@/shared/components/modalPop/ConfirmPop'; +import ModalLayout from '@/shared/components/modalPop/ModalLayout'; import { useState } from 'react'; +import { customToast } from '@/shared/components/toast/CustomToastUtils'; function Page() { const [isModalOpen, setModalOpen] = useState(false); const [isConfirmOpen, setConfirmOpen] = useState(false); return ( -
+
{/* 페이지 제목 */}

Design System

@@ -21,29 +22,29 @@ function Page() { {/* Input */}
-

Input

+

Input

{/* 여기 컴포넌트 삽입 */}
{/* checkbox */}
-

checkbox

+

checkbox

{/* 여기 컴포넌트 삽입 */}
{/* select */}
-

select

+

select

{/* 여기 컴포넌트 삽입 */}
{/* Button */}
-

Button

+

Button

-

Button

+

Button

+ + + + +
-

popup

+

popup

{/* 모달 열기 버튼 */} + + } >
모달팝업 내용
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5c1116a..116800d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next'; import '@/shared/styles/global.css'; +import { Toaster } from 'react-hot-toast'; export const metadata: Metadata = { title: 'SSOUL', description: '칵테일을 좋아하는 사람들을 위한 서비스', @@ -15,6 +16,16 @@ export default function RootLayout({ {children} + ); diff --git a/src/shared/assets/icons/close_20.svg b/src/shared/assets/icons/close_20.svg new file mode 100644 index 0000000..fced93f --- /dev/null +++ b/src/shared/assets/icons/close_20.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/icons/error_toast_32.svg b/src/shared/assets/icons/error_toast_32.svg new file mode 100644 index 0000000..c02f4da --- /dev/null +++ b/src/shared/assets/icons/error_toast_32.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/assets/icons/info_toast_32.svg b/src/shared/assets/icons/info_toast_32.svg new file mode 100644 index 0000000..127540a --- /dev/null +++ b/src/shared/assets/icons/info_toast_32.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/assets/icons/success_toast_32.svg b/src/shared/assets/icons/success_toast_32.svg new file mode 100644 index 0000000..d0d718c --- /dev/null +++ b/src/shared/assets/icons/success_toast_32.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/components/ModalPop/ConfirmPop.tsx b/src/shared/components/ModalPop/ConfirmPop.tsx index 50ac0dc..faf011d 100644 --- a/src/shared/components/ModalPop/ConfirmPop.tsx +++ b/src/shared/components/ModalPop/ConfirmPop.tsx @@ -1,3 +1,4 @@ +import Button from '../button/Button'; import ModalLayout from './ModalLayout'; interface Props { @@ -19,8 +20,12 @@ function ConfirmPop({ ref, open, onClose, title, description, children }: Props) description={description} buttons={ <> - - + + } > diff --git a/src/shared/components/ModalPop/ModalLayout.tsx b/src/shared/components/ModalPop/ModalLayout.tsx index 1a9ea8bf..b2d63ea 100644 --- a/src/shared/components/ModalPop/ModalLayout.tsx +++ b/src/shared/components/ModalPop/ModalLayout.tsx @@ -46,9 +46,9 @@ function ModalLayout({