Merge pull request Next-Room#82 from Next-Room/fix/outside-click

feat: 버튼 클릭 시 모달 노출 유무 수정

Author: lgrin-byte

app/admin-new/(components)/Sidebar.tsx

@@ -3,14 +3,22 @@ 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,
   plusDisableProps,
   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)} />새 테마
               추가하기

app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts

@@ -13,6 +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";
 
@@ -34,6 +35,8 @@ const useEditHint = ({
 
   const drawerRef = useRef<HTMLFormElement>(null);
 
+  const [drawer, setDrawer] = useDrawerState();
+
   useEffect(() => {
     setCreateHint((prev) => ({
       ...prev,
@@ -63,9 +66,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,
+    }));
+  }, [createHint, selectedHint]);
+
+  useEffect(() => {
+    if (drawer.hintType === "Add") {
       return;
     }
+
     if (isSameHint || isImcomplete) {
       setIsDisabled(true);
     } else {
@@ -89,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) => {

app/admin-new/(components)/ThemeInfo/Container.tsx

@@ -6,6 +6,7 @@ import "../../(style)/themeInfo.modules.sass";
 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";
 
@@ -17,21 +18,19 @@ 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" });
   };
 
   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(() => {
@@ -50,17 +49,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>

app/admin-new/(components)/ThemeInfo/ThemeInfoHint.tsx

@@ -3,6 +3,7 @@ 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,
@@ -12,6 +13,8 @@ import {
   useCreateHint,
   useCreateHintReset,
 } from "@/components/atoms/createHint.atom";
+import { useDrawerState } from "@/components/atoms/drawer.atom";
+import useModal from "@/hooks/useModal";
 
 interface ThemeDrawerProps {
   handleHintCreate: (type: string) => void;
@@ -25,23 +28,48 @@ const ThemeInfoHint: React.FC<ThemeDrawerProps> = ({ handleHintCreate }) => {
   const [_, setCreateHint] = useCreateHint();
   const resetSelectedHint = useSelectedHintReset();
   const resetCreateHint = useCreateHintReset();
+  const [drawer, setDrawer] = useDrawerState();
+  const { open } = useModal();
 
-  const handleAddHintBtn = () => {
+  const handleResetCreateHint = () => {
     resetSelectedHint();
     resetCreateHint();
     handleHintCreate("Add");
+    setDrawer({ ...drawer, isOpen: true, hintType: "add" });
+  };
+
+  const handleAddHintBtn = () => {
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, {
+        type: "put",
+        fn: handleResetCreateHint,
+      });
+    } else handleResetCreateHint();
   };
+
   const handleEditHintBtn = (
     e: React.MouseEvent<HTMLLIElement, globalThis.MouseEvent>,
     hintElement: SelectedHintType
   ) => {
+    if (drawer.isOpen && !drawer.isSameHint) {
+      open(HintDialog, {
+        type: "put",
+        fn: () => {
+          setSelectedHint(hintElement);
+          setCreateHint(hintElement);
+          handleHintCreate("Edit");
+          setDrawer({ ...drawer, isOpen: true, hintType: "put" });
+        },
+      });
+    } else {
+      setSelectedHint(hintElement);
+      setCreateHint(hintElement);
+
+      handleHintCreate("Edit");
+    }
     if (hintElement.id === selectedHint.id) {
       return;
     }
-
-    setCreateHint(hintElement);
-    setSelectedHint(hintElement);
-    handleHintCreate("Edit");
   };
 
   return (

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);

app/components/common/Hint-Dialog-new/Dialog.tsx

@@ -9,6 +9,9 @@ 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 {
+  useDrawerState,
+} from "@/components/atoms/drawer.atom";
 
 import ModalPortal from "./ModalPortal";
 
@@ -38,13 +41,15 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   const [selectedHint] = useSelectedHint();
 
   const { mutateAsync: deleteHint } = useDeleteHint();
+  const [drawer, setDrawer] = useDrawerState();
 
   const onSubmit: SubmitHandler<FormValues> = () => {
     const { id } = selectedHint;
 
     if (type === "put") {
       fn();
       close();
+      setDrawer({ ...drawer, isOpen: false });
     } else if (type === "delete") {
       deleteHint({ id });
       close();

app/utils/localStorage.ts

@@ -96,3 +96,7 @@ export const getSelectedThemeId = () => getLocalStorage(THEME_ID);
 export const removeAccessToken = () => {
   removeLocalStorageItem(ACCESS_TOKEN);
 };
+
+export const removeLocalStorageAll = () => {
+  localStorage.clear();
+};