From b3b66f51f7537003496fc6f7328e01e92ccb905d Mon Sep 17 00:00:00 2001
From: lgrin-byte <lgrin02@naver.com>
Date: Tue, 19 Nov 2024 23:49:15 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=EB=85=B8=EC=B6=9C?=
 =?UTF-8?q?=20=EC=9C=A0=EB=AC=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin-new/(components)/Sidebar.tsx        | 51 ++++++++++++++++---
 .../ThemeDrawer/hooks/useEditHint.ts          | 26 +++++++++-
 .../(components)/ThemeInfo/Container.tsx      | 15 +++---
 .../(components)/ThemeInfo/ThemeInfoHint.tsx  | 32 ++++++++++--
 app/components/atoms/drawer.atom.ts           | 21 ++++++++
 .../common/Hint-Dialog-new/Dialog.tsx         |  5 ++
 app/utils/localStorage.ts                     |  4 ++
 7 files changed, 133 insertions(+), 21 deletions(-)
 create mode 100644 app/components/atoms/drawer.atom.ts

diff --git a/app/admin-new/(components)/Sidebar.tsx b/app/admin-new/(components)/Sidebar.tsx
index 7b777a9..2b6749d 100644
--- a/app/admin-new/(components)/Sidebar.tsx
+++ b/app/admin-new/(components)/Sidebar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
+import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
 
 import {
   logoProps,
@@ -9,8 +10,15 @@ import {
   plusProps,
   subscribeLinkURL,
 } from "@/admin-new/(consts)/sidebar";
-import { getSelectedThemeId, getStatus } from "@/utils/localStorage";
+import {
+  getSelectedThemeId,
+  getStatus,
+  removeAccessToken,
+} from "@/utils/localStorage";
 import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom";
+import { useIsLoggedInWrite } from "@/components/atoms/account.atom";
+import { useDrawerState } from "@/components/atoms/drawer.atom";
+import useModal from "@/hooks/useModal";
 
 interface Theme {
   id: number;
@@ -30,6 +38,10 @@ interface Props {
 export default function Sidebar(props: Props) {
   const router = useRouter();
   const resetSelectedTheme = useSelectedThemeReset();
+  // const setIsLoggedIn = useIsLoggedInWrite();
+  const [drawer, setDrawer] = useDrawerState();
+  const { open } = useModal();
+
   const status = getStatus();
   const searchParams = useSearchParams();
   const selectedThemeId = getSelectedThemeId();
@@ -40,6 +52,34 @@ export default function Sidebar(props: Props) {
     categories,
     handleClickSelected,
   } = props;
+
+  // const handleLogout = () => {
+  //   removeAccessToken();
+  //   setIsLoggedIn(false);
+  // };
+
+  const navigateToNewTheme = () => {
+    resetSelectedTheme();
+    router.push("/admin-new");
+  };
+  const handleSelectTheme = (theme: Theme) => {
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, { type: "put", fn: () => handleClickSelected(theme) });
+    } else {
+      setDrawer({ ...drawer, isOpen: false });
+      handleClickSelected(theme);
+    }
+  };
+
+  const handleCreateTheme = () => {
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, { type: "put", fn: navigateToNewTheme });
+    } else {
+      setDrawer({ ...drawer, isOpen: false });
+      navigateToNewTheme();
+    }
+  };
+
   return (
     <div className="sidebar">
       <div className="sidebar__top">
@@ -51,7 +91,6 @@ export default function Sidebar(props: Props) {
         </div>
         <div className="sidebar__theme-title">우리 지점 테마</div>
       </div>
-
       <div className="sidebar__scroll">
         <ul className="sidebar__theme-list">
           {[...categories].reverse().map((theme) => (
@@ -65,7 +104,7 @@ export default function Sidebar(props: Props) {
                 className={classNames("sidebar__theme-button", {
                   selected: selectedThemeId === theme.id?.toString() && params,
                 })}
-                onClick={() => handleClickSelected(theme)}
+                onClick={() => handleSelectTheme(theme)}
               >
                 {theme.title}
               </button>
@@ -80,11 +119,7 @@ export default function Sidebar(props: Props) {
                   selected: !params,
                 }
               )}
-              onClick={() => {
-                resetSelectedTheme();
-
-                router.push("/admin-new");
-              }}
+              onClick={handleCreateTheme}
             >
               <Image {...(params ? plusDisableProps : plusProps)} />새 테마
               추가하기
diff --git a/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts b/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
index 445414e..c8ecea1 100644
--- a/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
+++ b/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
@@ -13,7 +13,7 @@ import useHintUpload from "@/queries/getPreSignedUrl";
 import useModal from "@/hooks/useModal";
 import extractFilename from "@/utils/helper";
 import { getHintList } from "@/queries/getHintList";
-
+import { useDrawerState } from "@/components/atoms/drawer.atom";
 import { DrawerType } from "../types/themeDrawerTypes";
 
 const useEditHint = ({
@@ -34,6 +34,8 @@ const useEditHint = ({
 
   const drawerRef = useRef<HTMLFormElement>(null);
 
+  const [drawer, setDrawer] = useDrawerState();
+
   useEffect(() => {
     setCreateHint((prev) => ({
       ...prev,
@@ -63,9 +65,29 @@ const useEditHint = ({
     Boolean(!answerImages.length);
 
   useEffect(() => {
-    if (hintType === "Add") {
+    const isSameHint =
+      String(createHint.hintCode) === String(selectedHint.hintCode) &&
+      Number(createHint.progress) === Number(selectedHint.progress) &&
+      String(createHint.contents) === String(selectedHint.contents) &&
+      String(createHint.answer) === String(selectedHint.answer) &&
+      // 서버에 올라간 사진 삭제 여부를 비교
+      createHint.hintImageUrlList === selectedHint.hintImageUrlList &&
+      createHint.answerImageUrlList === selectedHint.answerImageUrlList &&
+      // 로컬 업로드 사진 하나라도 있으면 변경된 것
+      Boolean(!hintImages.length) &&
+      Boolean(!answerImages.length);
+
+    setDrawer((prevDrawer) => ({
+      ...prevDrawer,
+      isSameHint,
+    }));
+  }, [isSameHint, setDrawer]);
+
+  useEffect(() => {
+    if (drawer.hintType === "Add") {
       return;
     }
+
     if (isSameHint || isImcomplete) {
       setIsDisabled(true);
     } else {
diff --git a/app/admin-new/(components)/ThemeInfo/Container.tsx b/app/admin-new/(components)/ThemeInfo/Container.tsx
index 28aa696..7fde495 100644
--- a/app/admin-new/(components)/ThemeInfo/Container.tsx
+++ b/app/admin-new/(components)/ThemeInfo/Container.tsx
@@ -5,6 +5,7 @@ import classNames from "classnames";
 import useModal from "@/hooks/useModal";
 import Dialog from "@/components/common/Dialog-new/Dialog";
 import { useSelectedHintReset } from "@/components/atoms/selectedHint.atom";
+import { useDrawerState } from "@/components/atoms/drawer.atom";
 
 import ThemeDrawer from "../ThemeDrawer/Container";
 
@@ -16,8 +17,7 @@ export default function ThemeInfo() {
   const { open } = useModal();
   const resetSelectedHint = useSelectedHintReset();
 
-  const [openHintDrawer, setOpenHintDrawer] = useState(false);
-  const [hintType, setHintType] = useState<string>("Add");
+  const [drawer, setDrawerState] = useDrawerState();
 
   const handleOpenModal = () => {
     open(Dialog, { type: "put" });
@@ -25,12 +25,11 @@ export default function ThemeInfo() {
 
   const handleCloseDrawer = () => {
     resetSelectedHint();
-    setOpenHintDrawer(false);
+    setDrawerState({ ...drawer, isOpen: false, hintType: "" });
   };
 
   const handleHintCreate = (type: string) => {
-    setOpenHintDrawer(true);
-    setHintType(type);
+    setDrawerState({ ...drawer, isOpen: true, hintType: type });
   };
 
   useEffect(() => {
@@ -49,17 +48,17 @@ export default function ThemeInfo() {
   return (
     <div
       className={classNames("theme-infomation", {
-        "drawer-open": openHintDrawer,
+        "drawer-open": drawer.isOpen,
       })}
     >
       <ThemeInfoTitle handleOpenModal={handleOpenModal} />
       <ThemeInfoBody handleOpenModal={handleOpenModal} />
       <ThemeInfoHint handleHintCreate={handleHintCreate} />
-      {openHintDrawer && (
+      {drawer.isOpen && (
         <ThemeDrawer
           handleHintCreate={handleHintCreate}
           onCloseDrawer={handleCloseDrawer}
-          hintType={hintType}
+          hintType={drawer.hintType}
         />
       )}
     </div>
diff --git a/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx b/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
index 777fcaa..bc1af25 100644
--- a/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
+++ b/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
@@ -3,12 +3,15 @@ import classNames from "classnames";
 
 import { useGetHintList } from "@/queries/getHintList";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
+import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
 import {
   SelectedHintType,
   useSelectedHint,
   useSelectedHintReset,
 } from "@/components/atoms/selectedHint.atom";
 import { useCreateHintReset } from "@/components/atoms/createHint.atom";
+import { useDrawerState } from "@/components/atoms/drawer.atom";
+import useModal from "@/hooks/useModal";
 
 interface ThemeDrawerProps {
   handleHintCreate: (type: string) => void;
@@ -21,18 +24,41 @@ const ThemeInfoHint: React.FC<ThemeDrawerProps> = ({ handleHintCreate }) => {
   const [selectedHint, setSelectedHint] = useSelectedHint();
   const resetSelectedHint = useSelectedHintReset();
   const resetCreateHint = useCreateHintReset();
+  const [drawer, setDrawer] = useDrawerState();
+  const { open } = useModal();
 
-  const handleAddHintBtn = () => {
+  const handleResetCreateHint = () => {
     resetSelectedHint();
     resetCreateHint();
     handleHintCreate("Add");
   };
+
+  const handleAddHintBtn = () => {
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, {
+        type: "",
+        fn: handleResetCreateHint,
+      });
+    } else handleResetCreateHint();
+  };
+
   const handleEditHintBtn = (
     e: React.MouseEvent<HTMLLIElement, globalThis.MouseEvent>,
     hintElement: SelectedHintType
   ) => {
-    setSelectedHint(hintElement);
-    handleHintCreate("Edit");
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, {
+        type: "put",
+        fn: () => {
+          setSelectedHint(hintElement);
+          handleHintCreate("Edit");
+          setDrawer({ ...drawer, isOpen: true, hintType: "put" });
+        },
+      });
+    } else {
+      setSelectedHint(hintElement);
+      handleHintCreate("Edit");
+    }
   };
 
   return (
diff --git a/app/components/atoms/drawer.atom.ts b/app/components/atoms/drawer.atom.ts
new file mode 100644
index 0000000..9c0558b
--- /dev/null
+++ b/app/components/atoms/drawer.atom.ts
@@ -0,0 +1,21 @@
+import {
+  atom,
+  useRecoilValue,
+  useRecoilState,
+  useSetRecoilState,
+} from "recoil";
+
+interface DrawerType {
+  isOpen: boolean;
+  hintType: string;
+  isSameHint: boolean;
+}
+
+const drawerState = atom<DrawerType>({
+  key: "drawer",
+  default: { isOpen: false, hintType: "", isSameHint: false },
+});
+
+export const useDrawerState = () => useRecoilState(drawerState);
+export const useDrawerStateValue = () => useRecoilValue(drawerState);
+export const useDrawerStateWrite = () => useSetRecoilState(drawerState);
diff --git a/app/components/common/Hint-Dialog-new/Dialog.tsx b/app/components/common/Hint-Dialog-new/Dialog.tsx
index 1ccb787..f8c167a 100644
--- a/app/components/common/Hint-Dialog-new/Dialog.tsx
+++ b/app/components/common/Hint-Dialog-new/Dialog.tsx
@@ -11,6 +11,9 @@ import { useDeleteHint } from "@/mutations/deleteHint";
 import { useSelectedHint } from "@/components/atoms/selectedHint.atom";
 
 import ModalPortal from "./ModalPortal";
+import {
+  useDrawerState,
+} from "@/components/atoms/drawer.atom";
 
 interface DialogProps {
   type?: string | "";
@@ -38,6 +41,7 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   const [selectedHint] = useSelectedHint();
 
   const { mutateAsync: deleteHint } = useDeleteHint();
+  const [drawer, setDrawer] = useDrawerState();
 
   const onSubmit: SubmitHandler<FormValues> = () => {
     const { id } = selectedHint;
@@ -45,6 +49,7 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
     if (type === "put") {
       fn();
       close();
+      setDrawer({ ...drawer, isOpen: false });
     } else if (type === "delete") {
       deleteHint({ id });
       close();
diff --git a/app/utils/localStorage.ts b/app/utils/localStorage.ts
index a189d36..7cac798 100644
--- a/app/utils/localStorage.ts
+++ b/app/utils/localStorage.ts
@@ -75,3 +75,7 @@ export const getSelectedThemeId = () => getLocalStorage(THEME_ID);
 export const removeAccessToken = () => {
   removeLocalStorageItem(ACCESS_TOKEN);
 };
+
+export const removeLocalStorageAll = () => {
+  localStorage.clear();
+};
\ No newline at end of file

From ec086b74420989f2fc86796565f5a82b7c262bf7 Mon Sep 17 00:00:00 2001
From: lgrin-byte <lgrin02@naver.com>
Date: Wed, 20 Nov 2024 22:56:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20url=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B9=84=EA=B5=90=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin-new/(components)/Sidebar.tsx                     | 2 +-
 .../(components)/ThemeDrawer/hooks/useEditHint.ts          | 7 +++++--
 app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx     | 3 ++-
 app/components/common/Hint-Dialog-new/Dialog.tsx           | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/admin-new/(components)/Sidebar.tsx b/app/admin-new/(components)/Sidebar.tsx
index 2b6749d..bf91840 100644
--- a/app/admin-new/(components)/Sidebar.tsx
+++ b/app/admin-new/(components)/Sidebar.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
-import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
 
+import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
 import {
   logoProps,
   plusDisableProps,
diff --git a/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts b/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
index c8ecea1..6493037 100644
--- a/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
+++ b/app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts
@@ -14,6 +14,7 @@ import useModal from "@/hooks/useModal";
 import extractFilename from "@/utils/helper";
 import { getHintList } from "@/queries/getHintList";
 import { useDrawerState } from "@/components/atoms/drawer.atom";
+
 import { DrawerType } from "../types/themeDrawerTypes";
 
 const useEditHint = ({
@@ -81,7 +82,7 @@ const useEditHint = ({
       ...prevDrawer,
       isSameHint,
     }));
-  }, [isSameHint, setDrawer]);
+  }, [createHint, selectedHint]);
 
   useEffect(() => {
     if (drawer.hintType === "Add") {
@@ -111,8 +112,10 @@ const useEditHint = ({
       ...prev,
       contents: selectedHint.contents,
       answer: selectedHint.answer,
+      answerImageUrlList: selectedHint.answerImageUrlList,
+      hintImageUrlList: selectedHint.hintImageUrlList,
     }));
-  }, [hintType, selectedHint, setCreateHint]);
+  }, [hintType, selectedHint]);
 
   const { handleProcess } = useHintUpload();
   const handleSubmit = async (e: FormEvent) => {
diff --git a/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx b/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
index bc1af25..5d9c744 100644
--- a/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
+++ b/app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx
@@ -31,12 +31,13 @@ const ThemeInfoHint: React.FC<ThemeDrawerProps> = ({ handleHintCreate }) => {
     resetSelectedHint();
     resetCreateHint();
     handleHintCreate("Add");
+    setDrawer({ ...drawer, isOpen: true, hintType: "add" });
   };
 
   const handleAddHintBtn = () => {
     if (drawer.isOpen && !drawer.isSameHint) {
       open(HintDialog, {
-        type: "",
+        type: "put",
         fn: handleResetCreateHint,
       });
     } else handleResetCreateHint();
diff --git a/app/components/common/Hint-Dialog-new/Dialog.tsx b/app/components/common/Hint-Dialog-new/Dialog.tsx
index f8c167a..a58f7e2 100644
--- a/app/components/common/Hint-Dialog-new/Dialog.tsx
+++ b/app/components/common/Hint-Dialog-new/Dialog.tsx
@@ -9,12 +9,12 @@ import DialogBody from "@/components/common/Hint-Dialog-new/DialogBody";
 import "@/components/common/Dialog-new/dialog.sass";
 import { useDeleteHint } from "@/mutations/deleteHint";
 import { useSelectedHint } from "@/components/atoms/selectedHint.atom";
-
-import ModalPortal from "./ModalPortal";
 import {
   useDrawerState,
 } from "@/components/atoms/drawer.atom";
 
+import ModalPortal from "./ModalPortal";
+
 interface DialogProps {
   type?: string | "";
   fn?: () => void;