✨ feat: 작성 페이지 토스트, 모달 추가

grass-diary/src/components/modal/Modal.tsx

@@ -61,7 +61,10 @@ const Modal = () => {
             {button1.active && (
               <CustomButton
                 text={button1.text}
-                onClick={() => setActive(false)}
+                onClick={() => {
+                  if (button1.clickHandler) button1.clickHandler();
+                  setActive(false);
+                }}
                 color={button1.color}
                 interaction={button1.interaction}
               />

grass-diary/src/constants/message.ts

@@ -158,6 +158,7 @@ export const CREATE_MESSAGES = {
   toast: {
     temp_save: '작성 중인 일기 내용을 임시저장했어요.',
     already_written: '오늘 이미 작성한 일기가 있어요.',
+    write_diary: '일기 내용을 작성해주세요.',
   },
 
   hashtag: {

grass-diary/src/pages/CreateDiary/CreateDiary.tsx

@@ -30,7 +30,7 @@ const CreateDiary = () => {
   const { mutate: createDiary } = useCreateDiary(memberId);
   const { mutate: postImage } = usePostImage();
   const { date } = useTodayDate();
-  const { toast } = useToast();
+  const { toast, redToast } = useToast();
   const [diaryInfo, setDiaryInfo] = useState<IDiaryInfo>({
     hashArr: [],
     moodValue: 5,
@@ -70,29 +70,59 @@ const CreateDiary = () => {
     size: '',
   });
 
-  // 모달
+  // 임시 저장 모달
 
-  // useEffect(() => {
-  //   const setting = {
-  //     title: MODAL.create_diary.load_temporary,
-  //     content: MODAL.create_diary.load_temporary_description,
-  //   };
+  const temporarySaveModal = () => {
+    const setting = {
+      title: MODAL.create_diary.load_temporary,
+      content: MODAL.create_diary.load_temporary_description,
+    };
+
+    const button1 = {
+      active: true,
+      text: MODAL.create_diary.continue_entry,
+      color: semantic.light.accent.solid.hero,
+      interaction: INTERACTION.accent.subtle(),
+    };
 
-  //   const button1 = {
-  //     active: true,
-  //     text: MODAL.cancel,
-  //   };
+    const button2 = {
+      active: true,
+      text: MODAL.create_diary.new_entry,
+      clickHandler: () => {
+        localStorage.removeItem('diary_draft');
+
+        setDiaryInfo({
+          hashArr: [],
+          moodValue: 5,
+          quillContent: '',
+          isPrivate: true,
+          year: null,
+          month: null,
+          date: null,
+          day: null,
+        });
+
+        setImage({
+          imageId: 0,
+          imageURL: '',
+        });
+
+        setImageInfo({
+          name: '',
+          size: '',
+        });
+      },
+    };
 
-  //   const button2 = {
-  //     active: true,
-  //     text: MODAL.create_diary.continue_entry,
-  //     clickHandler: undefined,
-  //     color: semantic.light.accent.solid.hero,
-  //     interaction: INTERACTION.accent.subtle(),
-  //   };
+    modal(setting, button2, button1);
+  };
 
-  //   modal(setting, button1, button2);
-  // }, []);
+  useEffect(() => {
+    const savedDraft = localStorage.getItem('diary_draft');
+    if (savedDraft) {
+      temporarySaveModal();
+    }
+  }, []);
 
   // 상태 업데이트 함수
   const setDiaryField = (field: Partial<IDiaryInfo>) => {
@@ -212,6 +242,7 @@ const CreateDiary = () => {
       toast(CREATE_MESSAGES.toast.already_written);
       return;
     }
+
     // 사용자가 이미지를 첨부할 경우 postImage -> createDiary 실행
     if (file) {
       postImage(file, {
@@ -308,7 +339,11 @@ const CreateDiary = () => {
   }, []);
 
   const handleSaveDraft = () => {
-    if (isContentEmpty) return; // 일기 내용이 비어 있으면 저장 요청 불가
+    if (isContentEmpty) {
+      redToast(CREATE_MESSAGES.toast.write_diary);
+      return; // 일기 내용이 비어 있으면 저장 요청 불가
+    }
+
     const draftData = {
       ...diaryInfo,
       imageBase64: imageBase64,

grass-diary/src/state/modal/ModalButtonStore.ts

@@ -1,35 +1,26 @@
 import { create } from 'zustand';
 
-type Button1Props = {
-  active: boolean;
-  text: string;
-  color?: string;
-  interaction?: string;
-};
-
-type Button2Props = {
-  active: boolean;
-  text: string;
-  color?: string;
-  interaction?: string;
-  clickHandler: () => void;
-};
-
 type Actions = {
-  setButton1: ({ active, text, color, interaction }: Button1Props) => void;
+  setButton1: ({
+    active,
+    text,
+    color,
+    interaction,
+    clickHandler,
+  }: Button1) => void;
   setButton2: ({
     active,
     text,
     color,
     interaction,
     clickHandler,
-  }: Button2Props) => void;
+  }: Button2) => void;
   setResetActive: () => void;
 };
 
 interface ModalButtonState {
-  button1: Button1Props;
-  button2: Button2Props;
+  button1: Button1;
+  button2: Button2;
   actions: Actions;
 }
 
@@ -39,6 +30,7 @@ const useModalButtonStore = create<ModalButtonState>(set => ({
     text: '',
     color: '',
     interaction: '',
+    clickHandler: () => console.log('button1 default'),
   },
   button2: {
     active: false,
@@ -47,16 +39,22 @@ const useModalButtonStore = create<ModalButtonState>(set => ({
     interaction: '',
     clickHandler: () => console.log('button2 default'),
   },
-
   actions: {
     setResetActive: () =>
       set(state => ({
         button1: { ...state.button1, active: false },
         button2: { ...state.button2, active: false },
       })),
-    setButton1: ({ active, text, color, interaction }) =>
+    setButton1: ({ active, text, color, interaction, clickHandler }) =>
       set(state => ({
-        button1: { ...state.button1, active, text, color, interaction },
+        button1: {
+          ...state.button1,
+          active,
+          text,
+          color,
+          interaction,
+          clickHandler,
+        },
       })),
     setButton2: ({ active, text, color, interaction, clickHandler }) =>
       set(state => ({
@@ -71,7 +69,6 @@ const useModalButtonStore = create<ModalButtonState>(set => ({
       })),
   },
 }));
-
 export const useModalButton1 = () =>
   useModalButtonStore(state => state.button1);
 export const useModalButton2 = () =>

grass-diary/src/state/modal/ModalStore.ts

@@ -1,23 +1,16 @@
 import { create } from 'zustand';
 
-type Setting = {
-  title: string;
-  content: string;
-};
-
 type Actions = {
   setLogin: (login: boolean) => void;
   setActive: (active: boolean) => void;
   setSetting: ({ title, content }: Setting) => void;
 };
-
 type ModalState = {
   login: boolean;
   active: boolean;
   setting: Setting;
   actions: Actions;
 };
-
 const useModalStore = create<ModalState>(set => ({
   login: false,
   active: false,
@@ -31,7 +24,6 @@ const useModalStore = create<ModalState>(set => ({
     setSetting: setting => set({ setting }),
   },
 }));
-
 export const useModalLogin = () => useModalStore(state => state.login);
 export const useModalActive = () => useModalStore(state => state.active);
 export const useModalSetting = () => useModalStore(state => state.setting);

grass-diary/src/state/modal/useModal.ts

@@ -1,43 +1,24 @@
 import { useModalButtonActions } from './ModalButtonStore';
 import { useModalActions } from './ModalStore';
 
-type Setting = {
-  title: string;
-  content: string;
-};
-
-type Button2 = {
-  active: boolean;
-  text: string;
-  color?: string;
-  interaction?: string;
-  clickHandler: () => void;
-};
-
-type Button1 = Pick<Button2, 'active' | 'text' | 'color' | 'interaction'>;
-
 export const useModal = () => {
   const { setLogin, setActive, setSetting } = useModalActions();
   const { setResetActive, setButton1, setButton2 } = useModalButtonActions();
-
   const modal = (setting: Setting, button1?: Button1, button2?: Button2) => {
     setResetActive();
     setSetting(setting);
     if (button1) setButton1(button1);
     if (button2) setButton2(button2);
     setActive(true);
   };
-
   const loginModal = () => {
     const setting = {
       title: '회원가입 및 로그인',
       content: '',
     };
-
     setActive(true);
     setLogin(true);
     setSetting(setting);
   };
-
   return { modal, loginModal };
 };

grass-diary/src/types/modal.ts

@@ -18,3 +18,26 @@ type ImageModalProps = {
   img: string;
   setImageModal: React.Dispatch<React.SetStateAction<boolean>>;
 };
+
+// Modal 전역 state props
+type Setting = {
+  title: string;
+  content: string;
+};
+
+type Button = {
+  active: boolean;
+  text: string;
+  color?: string;
+  interaction?: string;
+};
+
+// Button1은 clickHandler가 선택적
+type Button1 = Button & {
+  clickHandler?: () => void;
+};
+
+// Button2는 clickHandler가 필수
+type Button2 = Button & {
+  clickHandler: () => void;
+};