[#121] Feat: toast 컴포넌트 구현 (#126)

Co-authored-by: HoberMin <102784200+HoberMin@users.noreply.github.com>

package.json

@@ -21,6 +21,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",
+    "react-toastify": "^10.0.5",
     "swiper": "^11.1.1",
     "tailwind-merge": "^2.2.1",
     "vaul": "^0.9.0",

src/app/(post)/createPost/_component/ImageUploader.tsx

@@ -34,7 +34,7 @@ const ImageUploader = ({ imageSrcUrl, onChange }: ImageUploaderProps) => {
 
   return (
     <>
-      <div className='bg-gray-accent7 flex w-full justify-center p-10'>
+      <div className='flex w-full justify-center p-10'>
         <div className='relative '>
           {previewImageUrl ? (
             <>

src/app/(post)/createPost/_component/PostForm/index.tsx

@@ -3,6 +3,7 @@
 import { Controller, useForm } from 'react-hook-form';
 
 import { PostValue, createPost } from '@/src/apis/postDetail';
+import Toast from '@/src/app/_components/Toast';
 import Button from '@/src/components/Button/Button';
 import FormField from '@/src/components/FormField';
 import Selector from '@/src/components/Selector';
@@ -26,6 +27,7 @@ const PostForm = () => {
 
   const onSubmitPost = (data: PostValue) => {
     createPost(data);
+    Toast.default('등록되었습니다.');
   };
 
   return (
@@ -53,7 +55,6 @@ const PostForm = () => {
             {...register('title')}
           />
         </FormField>
-
         <FormField
           labelText='투표 설명'
           isRequired
@@ -67,7 +68,6 @@ const PostForm = () => {
             {...register('content')}
           />
         </FormField>
-
         <FormField labelText='투표 항목' isRequired>
           <Controller
             name='voteOptions'
@@ -80,7 +80,6 @@ const PostForm = () => {
             )}
           />
         </FormField>
-
         <FormField
           labelText='채널 선택'
           isRequired

src/app/(post)/createPost/page.tsx

@@ -3,12 +3,12 @@ import PostForm from './_component/PostForm';
 
 const CreatePostPage = () => {
   return (
-    <div className='flex h-full flex-col'>
+    <>
       <TopBar.Container>
         <TopBar.BackButton href='/' />
       </TopBar.Container>
       <PostForm />
-    </div>
+    </>
   );
 };
 

src/app/_components/Toast.tsx

@@ -0,0 +1,33 @@
+import { ToastOptions, toast } from 'react-toastify';
+
+import { cn } from '@/src/utils/cn';
+
+const defaultToastOption: ToastOptions = {
+  position: 'bottom-center',
+  autoClose: 4000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  draggable: true,
+  pauseOnHover: false,
+  closeButton: false,
+  icon: false,
+};
+
+const Toast = {
+  default: (
+    message: string,
+    options: ToastOptions = {},
+    className?: string,
+  ) => {
+    toast.info(message, {
+      ...defaultToastOption,
+      ...options,
+      className: cn(
+        'font-text-1-rg h-[44px] w-[358px] rounded-lg bg-[#2D3033] text-white',
+        className,
+      ),
+    });
+  },
+};
+
+export default Toast;

src/app/layout.tsx

@@ -1,4 +1,6 @@
 import type { Metadata, Viewport } from 'next';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import Introduction from '../components/Introduction';
 import { MSWComponent } from '../mocks/MSWComponent';
@@ -43,6 +45,7 @@ const RootLayout = ({
                 {children}
               </div>
             </div>
+            <ToastContainer className='bottom-[103px] flex flex-col items-center justify-center' />
           </MSWComponent>
         </Providers>
       </body>