feat: 준비중 토스트 구현 (#87)

* style: 토스트 info type 추가

* feat: pdf 프린트로 임시 기능 추가

* feat: 미리보기 준비중 토스트 연결

* feat: 슬랙 이동 버튼 준비중 토스트 연결

src/components/Header/index.tsx

@@ -92,7 +92,16 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
                   <Dropdown.Item onClick={() => navigate('/profile')}>
                     마이페이지
                   </Dropdown.Item>
-                  <Dropdown.Item>슬랙 알림 보기</Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={() =>
+                      addToast({
+                        message: '아직 준비중인 기능이에요 😥',
+                        type: 'info',
+                      })
+                    }
+                  >
+                    슬랙 알림 보기
+                  </Dropdown.Item>
                   <Dropdown.Item>
                     <label htmlFor="logout" className="cursor-pointer">
                       로그아웃

src/components/Toast/constants.ts

@@ -2,15 +2,18 @@ export const TYPE_STYLES = {
   BACKGROUND_COLOR: {
     success: 'bg-success-lighten dark:bg-success-darken',
     error: 'bg-error-lighten dark:bg-error-darken',
+    info: 'bg-info-lighten dark:bg-info-darken',
   },
   PROGRESS_BAR: {
     success:
       'bg-sub-green before:bg-success-lighten dark:before:bg-success-darken',
     error: 'bg-sub-red-200 before:bg-error-lighten dark:before:bg-error-darken',
+    info: 'bg-active-orange before:bg-info-lighten dark:before:bg-info-darken',
   },
 }
 
 export const TYPE_IMOJI = {
   success: '✅',
   error: '🚨',
+  info: '📜',
 }

src/components/Toast/types/index.ts

@@ -1,4 +1,4 @@
-export type ToastType = 'error' | 'success'
+export type ToastType = 'error' | 'success' | 'info'
 
 export interface Toast {
   id: string

src/contexts/ToastContext.tsx

@@ -6,7 +6,7 @@ interface ToastContextType {
     type,
   }: {
     message: string
-    type: 'success' | 'error'
+    type: 'success' | 'error' | 'info'
   }) => void
   removeToast: ({ id }: { id: string }) => void
 }

src/pages/ReviewCreatePage/components/ReviewQuestionAdder/index.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react'
 import { SubmitHandler, useFormContext, useFieldArray } from 'react-hook-form'
+import { useToast } from '@/hooks'
 import { PlusIcon } from '@/assets/icons'
 import { QuestionItem, QuestionTypeModal } from '..'
 import { Review } from '../../types'
@@ -26,6 +27,8 @@ const ReviewQuestionAdder = ({ setReviewStep }: ReviewQuestionAdderProps) => {
     name: 'questions',
   })
 
+  const { addToast } = useToast()
+
   const onSubmit: SubmitHandler<Review> = () => {
     if (!questions.length) {
       setError('questions', {
@@ -94,6 +97,9 @@ const ReviewQuestionAdder = ({ setReviewStep }: ReviewQuestionAdderProps) => {
         <button
           className="h-10 w-24 rounded-md bg-active-orange text-lg text-white dark:text-black"
           type="button"
+          onClick={() => {
+            addToast({ message: '아직 준비중인 기능이에요 😥', type: 'info' })
+          }}
         >
           미리보기
         </button>

src/pages/ReviewResultPage/index.tsx

@@ -104,7 +104,10 @@ const ReviewResultPage = () => {
             ),
           )}
         </ul>
-        <button className="btn mt-5 self-end rounded-md border border-gray-200 bg-main-hover-yellow text-base dark:border-gray-200 dark:bg-gray-300 dark:text-white md:text-lg">
+        <button
+          className="btn mt-5 self-end rounded-md border border-gray-200 bg-main-hover-yellow text-base dark:border-gray-200 dark:bg-gray-300 dark:text-white md:text-lg"
+          onClick={() => window.print()}
+        >
           pdf로 저장
         </button>
       </div>

tailwind.config.js

@@ -62,6 +62,10 @@ export default {
           lighten: '#DDF3E4',
           darken: '#113123',
         },
+        info: {
+          lighten: '#F8DEC7',
+          darken: '#3F2C26',
+        },
       },
       fontSize: {
         xs: '0.625rem',