Merge pull request #132 from YAPP-Github/feature/FE-093

Feature/fe-093 : 생성/수정 페이지 QA 반영

package.json

@@ -41,6 +41,7 @@
     "ky": "^0.33.3",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
+    "nanoid": "^4.0.2",
     "next": "13.4.12",
     "postcss": "^8.4.23",
     "prop-types": "^15.8.1",
@@ -50,6 +51,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "typescript": "^5.1.3",
+    "vitest-canvas-mock": "^0.3.2",
     "zod": "^3.21.4",
     "zustand": "^4.3.8"
   },

src/app/layout.tsx

@@ -4,6 +4,7 @@ import Script from 'next/script';
 import { OverlayProvider, QueryProvider } from '@/providers';
 import { ProfileProvider } from '@/providers/server';
 import Head from 'next/head';
+import { RouteChangesProvider } from '@/app/write/contexts/RouteChangeProvider';
 
 const pretendardFont = localFont({
   src: [
@@ -98,7 +99,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </noscript>
         <QueryProvider>
           <ProfileProvider>
-            <OverlayProvider>{children}</OverlayProvider>
+            <RouteChangesProvider>
+              <OverlayProvider>{children}</OverlayProvider>
+            </RouteChangesProvider>
           </ProfileProvider>
         </QueryProvider>
       </body>

src/app/write/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import { InputLoading } from '../components';
 import { Suspense } from 'react';
-import BoardForm from '../components/Form/BoardForm';
+import { BoardForm } from '@/app/write/components';
 
 const BoardEditPage = async ({
   params: { id },

src/app/write/components/Form/BoardForm.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import FirstStep from './FirstStep';
-import SecondStep from './SecondStep';
-import { wrapper } from '../../style.css';
+import { useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 import { useFunnel } from '@/hooks';
 import { useProfile } from '@/api/hooks';
-import { useParams, useRouter } from 'next/navigation';
-import WriteTitle from '../WriteTitle/WriteTitle';
-import useSetFormData from '../../hooks/useSetFormData';
-import useFormStore from '../../store/useFormStore';
-import { useEffect } from 'react';
+import { FirstStep, SecondStep, WriteTitle } from '@/app/write/components';
+import { useSetFormData, useLeaveModal } from '@/app/write/hooks';
+import { wrapper } from '../../style.css';
+import useFormStore from '@/app/write/store/useFormStore';
 
 export default function BoardForm() {
   const { data } = useProfile();
@@ -35,6 +33,7 @@ export default function BoardForm() {
   if (!data) {
     router.push('/login');
   }
+  useLeaveModal(true);
 
   return (
     <div className={wrapper}>

src/app/write/components/Form/FirstStep.tsx

@@ -5,7 +5,7 @@ import { FormProvider } from 'react-hook-form';
 import { Button, Input, InputSection, Typography } from '@/components';
 import { InputDate, Counter, AgeModal, AgeBottomSheet, MapModal, TimeDropDown } from '@/app/write/components';
 import { StepOneData } from '@/app/write/types';
-import { useWriteForm } from '@/app/write/hooks/useWriteForm';
+import { useWriteForm } from '@/app/write/hooks';
 import { formWrapper, sectionGap, inputGap, submitButton, flexBetween, ageError } from './Form.css';
 import { useIsMobile } from '@/hooks';
 

src/app/write/components/Form/SecondStep.tsx

@@ -6,9 +6,10 @@ import { Button, Input, InputSection, TextArea, Toast, Typography } from '@/comp
 import { formWrapper, inputGap } from './Form.css';
 import parseData from './util/parseData';
 import { useRouter } from 'next/navigation';
-import { useWriteForm } from '@/app/write/hooks/useWriteForm';
+import { useWriteForm } from '@/app/write/hooks/';
 import { useOverlay } from '@/hooks';
 import { usePostBoard, usePatchBoard } from '@/api/write';
+import { FreezeModal } from '@/app/write/components';
 
 type StepProps = {
   reset: () => void;
@@ -21,6 +22,7 @@ const SecondStep = ({ reset, boardId, isPatch = false }: StepProps) => {
   const { mutate: patch } = usePatchBoard(boardId);
   const { stepTwoMethod } = useWriteForm();
   const [openToast, closeToast] = useOverlay();
+  const [openModal, closeModal] = useOverlay();
   const router = useRouter();
 
   const onSubmit: SubmitHandler<BoardData> = async (data: BoardData) => {
@@ -46,21 +48,33 @@ const SecondStep = ({ reset, boardId, isPatch = false }: StepProps) => {
       );
     }
     if (isPatch && boardId) {
-      patch(
-        { boardId: boardId, data: { ...parseData(data) } },
-        {
-          onSuccess: () => {
-            openToast(<Toast type="success" message="먹팟 수정이 완료되었어요!" onClose={closeToast} />);
-            router.push(`/board/${boardId}`);
-            reset();
+      const freezeSubmit = () => {
+        closeModal();
+        patch(
+          { boardId: boardId, data: { ...parseData(data) } },
+          {
+            onSuccess: () => {
+              openToast(<Toast type="success" message="먹팟 수정이 완료되었어요!" onClose={closeToast} />);
+              router.push(`/board/${boardId}`);
+              reset();
+            },
+            onError: (error) => {
+              openToast(<Toast type="warn" message={error.message} onClose={closeToast} />);
+              if (error.response.status === 403) {
+                router.push('/login');
+              }
+            },
           },
-          onError: (error) => {
-            openToast(<Toast type="warn" message={error.message} onClose={closeToast} />);
-            if (error.response.status === 403) {
-              router.push('/login');
-            }
-          },
-        },
+        );
+        return;
+      };
+      openModal(
+        <FreezeModal
+          content={`게시글 수정 시 참여 멤버들에게 \n 알림 메일이 전송됩니다.`}
+          footer={['취소', '수정하기']}
+          onClick={closeModal}
+          onClose={freezeSubmit}
+        />,
       );
     }
   };

src/app/write/components/FreezeModal/FreezeModal.tsx

@@ -0,0 +1,36 @@
+import { Button, Modal, Typography } from '@/components';
+
+interface Props {
+  onClose: () => void;
+  onClick?: () => void;
+  content?: string;
+  footer?: string | string[];
+}
+
+const FreezeModal = ({
+  content = '페이지를 나가면 작성 중인 먹팟이 삭제돼요.',
+  footer = ['나가기', '계속 작성하기'],
+  onClose,
+  onClick,
+}: Props) => {
+  return (
+    <Modal onClose={onClose} size="small">
+      <Modal.Header type="info" title="안내" />
+      <Modal.Content size="small">
+        <Typography style={{ whiteSpace: 'pre-line' }} variant="body3" color="secondary">
+          {content}
+        </Typography>
+      </Modal.Content>
+      <Modal.Footer type="horizontal">
+        <Button onClick={onClick} color="text" size="micro">
+          {footer[0]}
+        </Button>
+        <Button onClick={onClose} color="primary" size="micro">
+          {footer[1]}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default FreezeModal;

src/app/write/components/index.ts

@@ -4,7 +4,9 @@ export { default as Counter } from './Counter/Counter';
 export { default as InputDate } from './InputDate/InputDate';
 export { default as FirstStep } from './Form/FirstStep';
 export { default as SecondStep } from './Form/SecondStep';
+export { default as BoardForm } from './Form/BoardForm';
 export { default as MapModal } from './MapModal/MapModal';
 export { default as WriteTitle } from './WriteTitle/WriteTitle';
 export { default as TimeDropDown } from './TimeDropDown/TimeDropDown';
 export { default as InputLoading } from './InputLoading/InputLoading';
+export { default as FreezeModal } from './FreezeModal/FreezeModal';