[feat] toast 구현

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",

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

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

src/shared/components/ModalPop/ModalLayout.tsx

@@ -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"

src/shared/components/button/Button.tsx

@@ -20,13 +20,13 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 export const ButtonClass = cva(
   `
-  py-1 px-2 rounded-lg text-base font-bold flex-center text-bold text-navy duration-300 disabled:bg-gray disabled:cursor-not-allowed disabled:text-primary
+  py-1 px-2 rounded-lg text-base flex-center text-primary duration-300 disabled:bg-gray disabled:cursor-not-allowed disabled:text-primary enabled:hover:inset-shadow-black
   `,
   {
     variants: {
       color: {
-        default: 'bg-secondary text-navy enabled:hover:inset-shadow-black',
-        purple: 'bg-tertiary text-secondary enabled:hover:inset-shadow-white',
+        default: 'bg-secondary text-primary',
+        purple: 'bg-tertiary text-secondary',
       },
       size: {
         default: 'h-10, min-w-25',

src/shared/components/toast/CustomToast.tsx

@@ -0,0 +1,34 @@
+import Close from '@/shared/assets/icons/close_20.svg';
+import InfoSvg from '@/shared/assets/icons/info_toast_32.svg';
+import SuccesSvg from '@/shared/assets/icons/success_toast_32.svg';
+import ErrorSvg from '@/shared/assets/icons/error_toast_32.svg';
+
+interface Props {
+  type: 'success' | 'error' | 'info';
+  message: string;
+  onClose?: () => void;
+}
+
+function CustomToast({ type, message, onClose }: Props) {
+  return (
+    <div className="relative flex items-center w-full gap-4 px-4 py-3 rounded-xl bg-bg-pop shadow-[0_0_12px_0_rgba(255,255,255,0.8)]">
+      <div>
+        {type === 'info' && <InfoSvg />}
+        {type === 'success' && <SuccesSvg />}
+        {type === 'error' && <ErrorSvg />}
+      </div>
+
+      <p className="text-sm text-white pr-4">{message}</p>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="toast 닫기"
+        className="absolute top-1 right-2"
+      >
+        <Close aria-hidden />
+      </button>
+    </div>
+  );
+}
+
+export default CustomToast;

src/shared/components/toast/CustomToastUtils.tsx

@@ -0,0 +1,17 @@
+import toast from 'react-hot-toast';
+import CustomToast from './CustomToast';
+
+export const customToast = {
+  success: (message: string) => {
+    toast.dismiss();
+    toast(<CustomToast type="success" message={message} onClose={() => toast.dismiss()} />);
+  },
+  info: (message: string) => {
+    toast.dismiss();
+    toast(<CustomToast type="info" message={message} onClose={() => toast.dismiss()} />);
+  },
+  error: (message: string) => {
+    toast.dismiss();
+    toast(<CustomToast type="error" message={message} onClose={() => toast.dismiss()} />);
+  },
+};

src/shared/styles/_theme.css

@@ -13,10 +13,8 @@
   --color-white: #ffffff;
   --color-black: #0f172a;
   --color-bg-pop: #3d3d3d;
-  --color-navy:#1f2544;
+  --color-navy: #1f2544;
   --font-serif: 'Hahmlet', serif;
 
---inset-shadow-black: inset 0 2px 6px rgba(0, 0, 0, 0.3);
---inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.4);
-
+  --inset-shadow-black: inset 0 0px 6px rgba(0, 0, 0, 0.6);
 }

src/shared/styles/global.css

@@ -1,18 +1,16 @@
 @import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');
 @import url('https://fonts.googleapis.com/css2?family=Hahmlet:[email protected]&display=swap');
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @import './_base.css';
 @import './_theme.css';
 @import './_utilities.css';
 @import './_components.css';
 
 :root {
-  font-family: 
-  'NanumSquareNeo',sans-serif;
+  font-family: 'NanumSquareNeo', sans-serif;
   line-height: 1.5;
   font-weight: 500;
   color:#fff;
   background-color: var(--color-primary)
 }
-