Merge pull request #36 from prgrms-web-devcourse-final-project/feat/toast#26

[feat] toast 구현

Author: ahk0413

package-lock.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",

package.json

@@ -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 (
-    <div className="p-6 space-y-6">
+    <div className="p-6 space-y-6 bg-primary">
       {/* 페이지 제목 */}
       <h1 className="text-2xl font-bold border-b pb-2">Design System</h1>
 
@@ -21,29 +22,29 @@ function Page() {
 
         {/* Input */}
         <div className="flex flex-col gap-2 space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">Input</h3>
+          <h3 className="text-lg font-medium border-b pb-1">Input</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
 
         {/* checkbox */}
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">checkbox</h3>
+          <h3 className="text-lg font-medium border-b pb-1">checkbox</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
 
         {/* select */}
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">select</h3>
+          <h3 className="text-lg font-medium border-b pb-1">select</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
       </div>
 
       {/* Button */}
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold border-b pb-1">Button</h2>
+        <h2 className="text-2xl font-semibold pb-1">Button</h2>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">Button</h3>
+          <h3 className="text-lg font-medium border-b pb-1">Button</h3>
           <Button type="button">버튼</Button>
           <Button color="purple" type="button">
             Button
@@ -66,15 +67,36 @@ function Page() {
 
       {/* popup */}
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold border-b pb-1">popup</h2>
+        <h2 className="text-2xl font-semibold pb-1">popup</h2>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">toast</h3>
-          {/* 여기 컴포넌트 삽입 */}
+          <h3 className="text-lg font-medium border-b pb-1">toast</h3>
+          <div className="flex gap-2">
+            <button
+              className="px-4 py-2 bg-green-300 text-black rounded"
+              onClick={() => customToast.success('성공 메시지')}
+            >
+              Success Toast
+            </button>
+
+            <button
+              className="px-4 py-2 bg-yellow-100 text-black rounded"
+              onClick={() => customToast.info('정보 메시지')}
+            >
+              Info Toast
+            </button>
+
+            <button
+              className="px-4 py-2 bg-red-200 text-black rounded"
+              onClick={() => customToast.error('오류 메시지')}
+            >
+              Error Toast
+            </button>
+          </div>
         </div>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">popup</h3>
+          <h3 className="text-lg font-medium border-b pb-1">popup</h3>
           {/* 모달 열기 버튼 */}
           <button
             onClick={() => setModalOpen(true)}
@@ -94,7 +116,11 @@ function Page() {
             onClose={() => setModalOpen(false)}
             title="제목"
             description="설명"
-            buttons={<>{/* 여기다가 버튼 컴포넌트 넣으면 됨 */}</>}
+            buttons={
+              <>
+                <Button type="button">버튼</Button>
+              </>
+            }
           >
             <div>모달팝업 내용</div>
           </ModalLayout>

src/app/design-system/page.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({
       <body>
         {children}
         <div id="modal-root"></div>
+        <Toaster
+          position="top-center"
+          toastOptions={{
+            duration: 2000,
+            style: {
+              minWidth: '340px',
+              background: 'transparent',
+            },
+          }}
+        />
       </body>
     </html>
   );

src/app/layout.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={
         <>
-          <button>취소</button>
-          <button>확인</button>
+          <Button type="button" size="sm">
+            취소
+          </Button>
+          <Button type="button" size="sm" color="purple">
+            확인
+          </Button>
         </>
       }
     >

src/shared/assets/icons/close_20.svg

@@ -46,9 +46,9 @@ function ModalLayout({
       <div className="fixed inset-0 bg-black/80 flex-center " onClick={onClose} aria-hidden="true">
         <div
           className={tw(
-            'relative p-8 rounded-lg bg-bg-pop shadow-[0_4px_9px_0_rgba(255,255,255,0.25)]',
-            size === 'sm' && 'p-5 w-[18.75rem]',
-            size === 'md' && 'w-[31.25rem]'
+            'relative w-[calc(100%-1.5rem)] p-8 rounded-lg bg-bg-pop shadow-[0_4px_9px_0_rgba(255,255,255,0.25)]',
+            size === 'sm' && 'p-5 max-w-[18.75rem]',
+            size === 'md' && 'max-w-[31.25rem]'
           )}
           ref={ref}
           aria-modal="true"