feat #18 공지 수정 alert 추가

jigume · Feb 29, 2024 · 58fa2a2 · 58fa2a2
1 parent 2bfccd0
commit 58fa2a2
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 38 deletions.
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -1,5 +1,5 @@
 import { PreViewerMarker } from '@src/pages/Map/index.d';
-import { getToken, stringLatLng2Arr } from '@src/utils';
+import { stringLatLng2Arr } from '@src/utils';
 import {
   BoardDTO,
   GetCommentsDTO,

diff --git a/src/pages/Goods/components/ConfirmAlert.tsx b/src/pages/Goods/components/ConfirmAlert.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function ConfirmAlert({
+  setIsConfirm,
+}: {
+  setIsConfirm: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const navigate = useNavigate();
+  return (
+    <div
+      className="absolute top-0 z-50 flex size-full items-center justify-center bg-black/30 px-4"
+      onClick={() => setIsConfirm(false)}
+    >
+      <div className="flex w-full flex-col gap-6 rounded-[20px] bg-white py-4">
+        <div className="flex flex-col gap-1 pt-4">
+          <div className="text-center text-lg font-bold">
+            변경 사항을 취소 하시겠어요?
+          </div>
+          <div className="text-center text-sm">
+            수정하신 내용이 반영되지 않아요.
+          </div>
+        </div>
+        <div className="flex gap-4 px-4 text-sm">
+          <div
+            className="w-1/2 rounded-lg bg-gray-200 py-3 text-center active:opacity-80"
+            onClick={() => navigate(-1)}
+          >
+            수정 취소
+          </div>
+          <div
+            className="w-1/2 rounded-lg bg-success py-3 text-center text-white"
+            onClick={() => setIsConfirm(false)}
+          >
+            계속 편집
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Goods/components/GoodsModify/index.tsx b/src/pages/Goods/components/GoodsModify/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router-dom';
 import { useMutation } from 'react-query';
 import RegistMarker from '@src/asset/icon/RegistMarker.svg';
 import camera from '@src/asset/icon/mdi_camera.svg';
@@ -25,6 +25,7 @@ import PostCodeModify from './components/PostCodeModify';
 import { GoodsContextType, GoodsModifyType } from '../../index.d';
 import ModifyHeader from './components/ModifyHeader';
 import ModifyCategory from './components/ModifyCategory';
+import ConfirmAlert from '../ConfirmAlert';
 
 const initModifyData: GoodsModifyType = {
   images: [],
@@ -40,7 +41,6 @@ const initModifyData: GoodsModifyType = {
 };
 
 export default function GoodsModify() {
-  const navigate = useNavigate();
   const { goods, isSuccess } = useOutletContext<GoodsContextType>();
   const [modify, setModify] = useState<GoodsModifyType>(initModifyData);
   const [prevData, setPrevData] = useState<GoodsModifyType>(initModifyData);
@@ -400,37 +400,7 @@ export default function GoodsModify() {
         </div>
       </div>
 
-      {isConfirm && (
-        <div
-          className="absolute top-0 z-50 flex size-full items-center justify-center bg-black/30 px-4"
-          onClick={() => setIsConfirm(false)}
-        >
-          <div className="flex w-full flex-col gap-6 rounded-[20px] bg-white py-4">
-            <div className="flex flex-col gap-1 pt-4">
-              <div className="text-center text-lg font-bold">
-                변경 사항을 취소 하시겠어요?
-              </div>
-              <div className="text-center text-sm">
-                수정하신 내용이 반영되지 않아요.
-              </div>
-            </div>
-            <div className="flex gap-4 px-4 text-sm">
-              <div
-                className="w-1/2 rounded-lg bg-gray-200 py-3 text-center active:opacity-80"
-                onClick={() => navigate(-1)}
-              >
-                수정 취소
-              </div>
-              <div
-                className="w-1/2 rounded-lg bg-success py-3 text-center text-white"
-                onClick={() => setIsConfirm(false)}
-              >
-                계속 편집
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      {isConfirm && <ConfirmAlert setIsConfirm={setIsConfirm} />}
     </div>
   );
 }
diff --git a/src/pages/Goods/components/GoodsNoticeModify/components/NoticeModifyHeader.tsx b/src/pages/Goods/components/GoodsNoticeModify/components/NoticeModifyHeader.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import ChevronLeft from '@src/asset/icon/chevronLeft.svg';
+import { useNavigate } from 'react-router-dom';
+
+export default function NoticeModifyHeader({
+  curr,
+  prev,
+  setIsConfirm,
+  rightMenu,
+}: {
+  curr: string;
+  prev: string;
+  setIsConfirm: React.Dispatch<React.SetStateAction<boolean>>;
+  rightMenu: JSX.Element;
+}) {
+  const navigate = useNavigate();
+
+  const handleGoingBack = () => {
+    if (curr === prev) {
+      // console.log('변동사항 없음');
+      navigate(-1);
+    } else {
+      // console.log('변동사항 있음');
+      setIsConfirm(true);
+    }
+  };
+  return (
+    <div className="absolute left-1/2 top-0 z-50 flex h-[48px] w-full max-w-screen-sm -translate-x-1/2 items-center justify-between bg-white px-4">
+      <button onClick={handleGoingBack}>
+        <img
+          className="h-12 w-10 cursor-pointer px-1 py-2"
+          src={ChevronLeft}
+          alt="뒤로가기"
+        />
+      </button>
+      {rightMenu}
+    </div>
+  );
+}
diff --git a/src/pages/Goods/components/GoodsNoticeModify/index.tsx b/src/pages/Goods/components/GoodsNoticeModify/index.tsx
@@ -4,13 +4,15 @@ import Loading from '@src/pages/Map/components/Loading';
 import StyledTextarea from '@src/components/StyledTextarea';
 import { useMutation } from 'react-query';
 import { postModifyNotice } from '@src/api/goods';
-import DetailHeader from '../DetailHeader';
 import { GoodsNoticeContextType } from '../../index.d';
+import ConfirmAlert from '../ConfirmAlert';
+import NoticeModifyHeader from './components/NoticeModifyHeader';
 
 export default function GoodsNoticeModify() {
   const { isSuccess, isNoticeSuccess, notice } =
     useOutletContext<GoodsNoticeContextType>();
   const [newNotice, setNewNotice] = useState('');
+  const [isConfirm, setIsConfirm] = useState(false);
 
   const handleNotice = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setNewNotice(e.target.value);
@@ -33,11 +35,16 @@ export default function GoodsNoticeModify() {
     );
 
   return (
-    <div className="container mx-auto h-svh w-full max-w-screen-sm overflow-y-scroll p-28 px-4 pt-14">
-      <DetailHeader rightMenu={<button>완료</button>} />
+    <div className="container mx-auto h-svh w-full max-w-screen-sm overflow-y-scroll px-0 py-14">
+      <NoticeModifyHeader
+        rightMenu={<button className="text-sm">완료</button>}
+        curr={newNotice}
+        prev={notice.content}
+        setIsConfirm={setIsConfirm}
+      />
 
       {/* content */}
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-4">
         <div className="pt-20 text-xl font-bold">
           더 나은 안내가 필요하신가요?
           <br />
@@ -54,6 +61,7 @@ export default function GoodsNoticeModify() {
           />
         </div>
       </div>
+      {isConfirm && <ConfirmAlert setIsConfirm={setIsConfirm} />}
     </div>
   );
 }