Merge pull request #123 from Myongji-Graduate/drawer-issue/#122

Drawer issue
Myongji-Graduate · Jun 30, 2024 · c2ac546 · c2ac546
2 parents 60aa990 + 37195bc
commit c2ac546
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/app/hooks/useDialog.tsx b/app/hooks/useDialog.tsx
@@ -12,8 +12,10 @@ export default function useDialog(key: DialogKey, onClose?: () => void) {
   };
 
   const close = () => {
+    const prevState = isOpenDialogList[key];
     setOpenDialogList([key, false]);
-    onClose?.();
+
+    if (prevState) onClose?.();
   };
 
   const toggle = () => {

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
@@ -7,7 +7,7 @@ import useDialog from '@/app/hooks/useDialog';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 
 export default function TakenLectureLabel() {
-  const { toggle } = useDialog(DIALOG_KEY.LECTURE_SEARCH);
+  const { open } = useDialog(DIALOG_KEY.LECTURE_SEARCH);
 
   return (
     <LabelContainer
@@ -20,7 +20,7 @@ export default function TakenLectureLabel() {
             variant="secondary"
             size="xs"
             data-testid="toggle-lecture-search"
-            onClick={toggle}
+            onClick={open}
           />
           <Link href="/grade-upload">
             <Button label="성적표 재업로드" variant="secondary" size="xs" />

diff --git a/app/ui/result/result-category-card/result-category-card.tsx b/app/ui/result/result-category-card/result-category-card.tsx
@@ -57,13 +57,13 @@ const displaySeveralMajor = (category: ResultCategoryKey) => {
 };
 
 function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCategoryCardProps) {
-  const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
+  const { open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
   const setIsOpenDialog = useSetAtom(isDialogOpenAtom);
 
   const percentage = getPercentage(takenCredit, totalCredit);
 
   const handleClickButton = () => {
-    toggle();
+    open();
     setIsOpenDialog(true);
   };
 

diff --git a/app/ui/view/molecule/drawer/drawer.tsx b/app/ui/view/molecule/drawer/drawer.tsx
@@ -13,13 +13,13 @@ interface DrawerProps extends React.PropsWithChildren {
 }
 
 const Drawer = ({ children, drawerKey, onClose, className }: DrawerProps) => {
-  const { isOpen, toggle } = useDialog(drawerKey, onClose);
+  const { isOpen, close } = useDialog(drawerKey, onClose);
 
   return (
-    <DrawerPrimitive.Root open={isOpen} onRelease={toggle}>
+    <DrawerPrimitive.Root open={isOpen} onClose={close}>
       <DrawerPrimitive.Portal>
         <DrawerPrimitive.Overlay
-          onClick={toggle}
+          onClick={close}
           className="fixed inset-0 z-2 bg-black/60"
           data-testid="drawer-overlay"
         />