MARA-52 토스트메시지 전역 객체로 변경

.storybook/main.ts

@@ -1,19 +1,22 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+const path = require('path');
 
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config) => {
+    config.resolve.alias['@'] = path.resolve(__dirname, '../src');
+    return config;
   },
 };
-export default config;

src/assets/icons/ExclamationIcon.tsx

@@ -10,8 +10,8 @@ const ExclamationIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M14 7.5C14 11.3657 10.866 14.5 7 14.5C3.13402 14.5 0 11.3657 0 7.5C0 3.63428 3.13402 0.5 7 0.5C10.866 0.5 14 3.63428 14 7.5ZM7 3.55293C7.32283 3.55293 7.58452 3.81475 7.58452 4.1374V7.85615C7.58452 8.17881 7.32283 8.44062 7 8.44062C6.67717 8.44062 6.41548 8.17881 6.41548 7.85615V4.1374C6.41548 3.81475 6.67717 3.55293 7 3.55293ZM7 10.8626C7.32278 10.8626 7.58447 10.6008 7.58447 10.2781C7.58447 9.95547 7.32278 9.69365 7 9.69365C6.67717 9.69365 6.41548 9.95547 6.41548 10.2781C6.41548 10.6008 6.67717 10.8626 7 10.8626Z"
       fill={props.fill ? 'current' : '#FB2414'}
     />

src/assets/icons/FriendsIcon.tsx

@@ -10,8 +10,8 @@ const FriendsIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     {...props}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M21.0833 11.0003C21.0833 16.5692 16.5689 21.0837 11 21.0837C5.43112 21.0837 0.916656 16.5692 0.916656 11.0003C0.916656 5.43145 5.43112 0.916992 11 0.916992C16.5689 0.916992 21.0833 5.43145 21.0833 11.0003ZM9.04045 11.0821C10.377 11.0821 11.4605 9.99862 11.4605 8.66209C11.4605 7.32556 10.377 6.24209 9.04045 6.24209C7.70392 6.24209 6.62045 7.32556 6.62045 8.66209C6.62045 9.99862 7.70392 11.0821 9.04045 11.0821ZM5.0388 14.9243C5.42317 13.0971 7.04424 11.7254 8.9857 11.7254C10.9272 11.7254 12.5482 13.0971 12.9326 14.9243C13.0281 15.3784 12.6428 15.7587 12.1788 15.7587H5.79265C5.32857 15.7587 4.94326 15.3784 5.0388 14.9243ZM16.3913 9.4519C16.3913 10.3371 15.6737 11.0546 14.7886 11.0546C13.9034 11.0546 13.1859 10.3371 13.1859 9.4519C13.1859 8.56676 13.9034 7.8492 14.7886 7.8492C15.6737 7.8492 16.3913 8.56676 16.3913 9.4519ZM12.5833 12.5929C13.0137 13.0348 13.3548 13.5642 13.5774 14.1518H16.5835C17.0475 14.1518 17.4368 13.7664 17.2933 13.3251C16.9452 12.2545 15.9393 11.4807 14.7526 11.4807C13.8592 11.4807 13.0682 11.9192 12.5833 12.5929Z"
       fill={props.fill ? 'current' : '#9299AA'}
     />

src/assets/icons/InfoIcon.tsx

@@ -10,8 +10,8 @@ const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     {...props}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M10.9993 21.0827C16.5682 21.0827 21.0827 16.5682 21.0827 10.9993C21.0827 5.43048 16.5682 0.916016 10.9993 0.916016C5.43048 0.916016 0.916016 5.43048 0.916016 10.9993C0.916016 16.5682 5.43048 21.0827 10.9993 21.0827ZM11.2949 10.1038C10.4409 10.6498 9.95091 11.1818 9.92291 12.9318C9.92291 12.9937 9.97305 13.0438 10.0349 13.0438H11.4349C11.4968 13.0438 11.5469 12.9937 11.5469 12.9318C11.5469 11.8958 11.8829 11.4198 12.6669 10.9438C13.5629 10.4118 14.1089 9.68379 14.1229 8.5638C14.1089 6.95379 12.8489 5.9178 10.9869 5.9318C9.60555 5.92028 8.43243 6.55239 8.02787 7.7892C7.87447 8.25818 8.28715 8.67579 8.78058 8.67579C9.24755 8.67579 9.59652 8.27366 9.8644 7.89117C10.1219 7.52353 10.5457 7.3408 10.9869 7.33179C11.7289 7.3458 12.3309 7.83579 12.3309 8.59179C12.3309 9.27779 11.8829 9.73979 11.2949 10.1038ZM10.7629 13.9398C10.1889 13.9538 9.69891 14.4298 9.69891 15.0038C9.69891 15.5918 10.1889 16.0678 10.7629 16.0678C11.3369 16.0678 11.8269 15.5918 11.8269 15.0038C11.8269 14.4298 11.3369 13.9538 10.7629 13.9398Z"
       fill="#9299AA"
     />

src/assets/icons/NotificationIcon.tsx

@@ -4,8 +4,8 @@ const NotificationIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg width="22" height="22" viewBox="0 0 22 22" fill="none" {...props}>
     <g clip-path="url(#clip0_1100_16324)">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.9967 1.04762C11.9967 0.469035 11.5276 0 10.949 0C10.3705 0 9.90142 0.469035 9.90142 1.04762V2.16986C6.34749 2.6781 3.6155 5.73448 3.6155 9.42896V13.6191L3.61534 13.6193L3.6152 13.6194L2.38834 16.0731C1.9894 16.871 2.56959 17.8098 3.46165 17.8098H18.4355C19.3276 17.8098 19.9078 16.871 19.5088 16.0731L18.4089 13.8732C18.3255 13.7066 18.2822 13.5228 18.2822 13.3365V9.42896C18.2822 5.73463 15.5504 2.67834 11.9967 2.16992V1.04762Z"
         fill={props.fill ? 'current' : '#9299AA'}
       />

src/assets/icons/PolicyIcon.tsx

@@ -10,8 +10,8 @@ const PolicyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     {...props}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M7.98501 20.1523H17.9631C18.9772 20.1523 19.8 19.3813 19.8 18.4302V3.56983C19.8 2.6187 18.9772 1.84766 17.9631 1.84766H7.98501V20.1523ZM6.31501 1.84766H4.03693C3.02286 1.84766 2.20001 2.6187 2.20001 3.56983V18.4302C2.20001 19.3813 3.02286 20.1523 4.03693 20.1523H6.31501V1.84766Z"
       fill={props.fill ? 'current' : '#9299AA'}
     />

src/assets/icons/QuestionIcon.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 const QuestionIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg width="22" height="22" viewBox="0 0 22 22" fill="none" {...props}>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M3.67 2.29688C2.74768 2.29688 2 3.04456 2 3.96687V16.8754C2 17.7978 2.74768 18.5454 3.67 18.5454H17.3606L19.4909 20.6166C19.681 20.8015 20 20.6668 20 20.4015V3.96687C20 3.04456 19.2523 2.29688 18.33 2.29688H3.67ZM6.98293 11.2036C7.59913 11.2036 8.09866 10.7041 8.09866 10.0879C8.09866 9.4717 7.59913 8.97217 6.98293 8.97217C6.36672 8.97217 5.86719 9.4717 5.86719 10.0879C5.86719 10.7041 6.36672 11.2036 6.98293 11.2036ZM12.1153 10.0879C12.1153 10.7041 11.6158 11.2036 10.9996 11.2036C10.3834 11.2036 9.88385 10.7041 9.88385 10.0879C9.88385 9.4717 10.3834 8.97217 10.9996 8.97217C11.6158 8.97217 12.1153 9.4717 12.1153 10.0879ZM15.0162 11.2036C15.6324 11.2036 16.132 10.7041 16.132 10.0879C16.132 9.4717 15.6324 8.97217 15.0162 8.97217C14.4 8.97217 13.9005 9.4717 13.9005 10.0879C13.9005 10.7041 14.4 11.2036 15.0162 11.2036Z"
       fill={props.fill ? 'current' : '#9299AA'}
     />

src/components/atoms/ToastMessage.tsx

@@ -1,23 +1,29 @@
-import React, { useEffect } from 'react';
+import { toastState } from '@/stores/toastState';
+import type { ToastType } from '@/stores/toastState';
+import React from 'react';
+import { useRecoilValue } from 'recoil';
 
-interface ToastMessageProps {
-  text: string;
-  toggleHandler: () => void;
-}
-const ToastMessage: React.FC<ToastMessageProps> = ({ text, toggleHandler }) => {
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      toggleHandler();
-    }, 1000);
+const ToastMessage: React.FC = () => {
+  const toast = useRecoilValue(toastState);
 
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
+  const getBackgroundColor = (type: ToastType): string => {
+    switch (type) {
+      case 'info':
+        return 'bg-black bg-opacity-70';
+      case 'success':
+        return 'bg-black bg-opacity-70';
+      case 'error':
+        return 'bg-point4 bg-opacity-70';
+      default:
+        return 'bg-black bg-opacity-70';
+    }
+  };
 
   return (
-    <div className="fixed bottom-[90px] left-[20px] right-[20px] p-[16px] rounded-[12px] text-center text-white body1-regular bg-black bg-opacity-70">
-      {text}
+    <div
+      className={`fixed bottom-[90px] left-[20px] right-[20px] p-[16px] rounded-[12px] text-center text-white body1-regular ${getBackgroundColor(toast.type)}`}
+    >
+      {toast.message}
     </div>
   );
 };

src/components/organisms/FridgeInfoBox.tsx

@@ -25,7 +25,7 @@ const FridgeInfoBox: React.FC<{
       </div>
       {toggleIsOpenIngredientAddModal && (
         <Button
-          className="rounded-6 w-[100px] p-[10px] body1-semibold bg-primary2"
+          className="rounded-6 w-[100px] p-[10px] body1-semibold bg-primary2 text-white"
           text="식자재 추가"
           onClick={toggleIsOpenIngredientAddModal}
         />

src/components/organisms/FridgeListModal.tsx

@@ -39,7 +39,7 @@ const FridgeListModal: React.FC<{
         <button className="p-[13px] border-2 rounded-[12px]">
           <TrashcanIcon />
         </button>
-        <Button className="flex-grow bg-primary2" text="이동하기" />
+        <Button className="flex-grow bg-primary2 text-white" text="이동하기" />
       </div>
     </ModalBottom>
   );

src/components/organisms/IngredientAddModal.tsx

@@ -5,11 +5,13 @@ import React, { useState } from 'react';
 
 import { AppleIcon } from '../atoms/IngredientIcons';
 import useCount from '@/hooks/useCount';
+import useToast from '@/hooks/useToast';
 
 const IngredientAddModal: React.FC<{
   toggleIsOpenIngredientAddModal: () => void;
-  toggleIsOppenToastMessage: () => void;
-}> = ({ toggleIsOpenIngredientAddModal, toggleIsOppenToastMessage }) => {
+}> = ({ toggleIsOpenIngredientAddModal }) => {
+  const { showToast } = useToast();
+
   const [isInFreezer, setIsInFreezer] = useState(false);
   const [memoContent, setMemoContent] = useState('');
   const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount();
@@ -21,7 +23,7 @@ const IngredientAddModal: React.FC<{
   const handleSubmit: () => void = () => {
     console.log({ currentCount, isInFreezer, memoContent });
     toggleIsOpenIngredientAddModal();
-    toggleIsOppenToastMessage();
+    showToast('식자재 추가가 완료되었습니다.', 'success');
   };
 
   return (
@@ -81,7 +83,7 @@ const IngredientAddModal: React.FC<{
           </IngredientAddItemContainer>
         </div>
         <Button
-          className="w-full bg-primary2"
+          className="w-full bg-primary2 text-white"
           text="추가완료"
           onClick={handleSubmit}
         />

src/components/templates/Layout.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import BottomNavigation from '../organisms/BottomNavigation';
 import { usePathname } from 'next/navigation';
+import { ToastMessage } from '../atoms';
+import { useRecoilValue } from 'recoil';
+import { toastState } from '@/stores/toastState';
 
 const MAIN_PAGE_PATHS = ['/home', '/fridge', '/share', '/mypage'];
 
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { isOpen } = useRecoilValue(toastState);
+
   const pathname = usePathname();
 
   return (
     <div className="flex justify-center items-center bg-gray2">
       <div className="flex-col w-[100vw] max-w-[480px] min-h-[100vh] bg-gray1 ">
         {children}
+        {isOpen && <ToastMessage />}
         {MAIN_PAGE_PATHS.includes(pathname) ? <BottomNavigation /> : null}
       </div>
     </div>

src/hooks/useToast.ts

@@ -0,0 +1,40 @@
+import type { ToastType } from '@/stores/toastState';
+import { toastState } from '@/stores/toastState';
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { v4 as uuid } from 'uuid';
+
+const useToast: () => {
+  showToast: (message: string, type: ToastType) => void;
+  hideToast: (id: string) => void;
+} = () => {
+  const [, setToast] = useRecoilState(toastState);
+
+  const showToast: (message: string, type: ToastType) => void = useCallback(
+    (message, type) => {
+      const id = uuid();
+      setToast({
+        id,
+        message,
+        isOpen: true,
+        type,
+      });
+
+      setTimeout(() => {
+        hideToast(id);
+      }, 2000);
+    },
+    [],
+  );
+
+  const hideToast: (id: string) => void = useCallback((id) => {
+    setToast((prev) => (prev.id === id ? { ...prev, isOpen: false } : prev));
+  }, []);
+
+  return {
+    showToast,
+    hideToast,
+  };
+};
+
+export default useToast;

src/pages/fridge/index.tsx

@@ -7,17 +7,11 @@ import {
 } from '@/components/organisms';
 import { type NextPage } from 'next';
 import { useState } from 'react';
-import { ToastMessage } from '@/components/atoms';
 
 const FridgePage: NextPage = () => {
   const [isOpenIngredientAddModal, setIsOpenIngredientAddModal] =
     useState(false);
   const [isOpenFridgeListModal, setIsOpenFridgeListModal] = useState(false);
-  const [isOpenToastMessage, setIsOpenToastMessage] = useState(false);
-
-  const toggleIsOppenToastMessage: () => void = () => {
-    setIsOpenToastMessage((prev) => !prev);
-  };
 
   const toggleIsOpenIngredientAddModal: () => void = () => {
     setIsOpenIngredientAddModal((prev) => !prev);
@@ -34,15 +28,9 @@ const FridgePage: NextPage = () => {
           toggleIsOpenFridgeListModal={toggleIsOpenFridgeListModal}
         />
       )}
-      {isOpenToastMessage && (
-        <ToastMessage
-          text="식자재 추가가 완료되었습니다."
-          toggleHandler={toggleIsOppenToastMessage}
-        />
-      )}
+
       {isOpenIngredientAddModal && (
         <IngredientAddModal
-          toggleIsOppenToastMessage={toggleIsOppenToastMessage}
           toggleIsOpenIngredientAddModal={toggleIsOpenIngredientAddModal}
         />
       )}

src/stores/toastState.ts

@@ -0,0 +1,20 @@
+import { atom } from 'recoil';
+
+export type ToastType = 'info' | 'success' | 'error';
+
+export interface ToastState {
+  message: string;
+  isOpen: boolean;
+  type: ToastType;
+  id: string;
+}
+
+export const toastState = atom<ToastState>({
+  key: 'toastState',
+  default: {
+    id: '',
+    message: '',
+    isOpen: false,
+    type: 'success',
+  },
+});

src/stores/userState.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+export const tokenState = atom({
+  key: 'tokenState',
+  default: '',
+});
+
+export const emailState = atom({
+  key: 'emailState',
+  default: '',
+});