refactor(member): 모달 훅 API 변경

kgu-clab · Sep 20, 2024 · 199c9c9 · 199c9c9
1 parent 60dcfa9
commit 199c9c9
Show file tree

Hide file tree

Showing 32 changed files with 226 additions and 221 deletions.
diff --git a/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx b/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx
@@ -8,7 +8,7 @@ import { Section } from '@components/common/Section';
 import Select from '@components/common/Select/Select';
 
 import { TABLE_HEAD } from '@constants/head';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { usePagination } from '@hooks/common/usePagination';
 import {
   useApplicationAllMemberMutation,
@@ -36,8 +36,8 @@ const ApplicationListSection = ({
   recruitmentList,
 }: ApplicationListSectionProps) => {
   const navigate = useNavigate();
-  const { openModal } = useModal();
-  const [selectRecruitment, setSelectRecruitment] = useState<number>(
+  const { open } = useModal();
+  const [selectRecruitment, setSelectRecruitment] = useState(
     recruitmentList.length, // 가장 최신의 모집공고
   );
   const { page, size, handlePageChange } = usePagination();
@@ -53,28 +53,34 @@ const ApplicationListSection = ({
 
   useEffect(() => {
     navigate('');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectRecruitment]);
 
   const handleRecruitmentChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectRecruitment(+e.target.value);
   };
+
   const handlePassButtonClick = (recruitmentId: number, studentId: string) => {
     applicationPassMutate({ recruitmentId, studentId });
   };
+
   const handleNonePassButton = (recruitmentId: number, studentId: string) => {
     applicationNonePassMutate({ recruitmentId, studentId });
   };
+
   const handleCreateMemberButton = (
     recruitmentId: number,
     studentId: string,
   ) => {
     applicationMemberMutate({ recruitmentId, studentId });
   };
+
   const handleCreateAllMemberButton = () => {
     applicationAllMemberMutate(selectRecruitment);
   };
+
   const handleViewButtonClick = (info: ApplicationMemberType) => {
-    return openModal({
+    return open({
       title: '지원서',
       content: <ApplicationInfoModal applicationInfo={info} />,
     });

diff --git a/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx b/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx
@@ -1,8 +1,6 @@
-import { useCallback } from 'react';
-
 import { cn } from '@clab-platforms/utils';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { formattedDatePeriod, now } from '@utils/date';
 import dayjs from 'dayjs';
 
@@ -21,19 +19,20 @@ const CalendarSchedule = ({
   startDateTime,
   endDateTime,
 }: CalendarScheduleProps) => {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const isDateDiff = dayjs(startDateTime).diff(endDateTime, 'd');
   const isBeforeToday = day.isBefore(today, 'day');
 
-  const handleScheduleClick = useCallback(
-    (detail: string, startDateTime: string, endDateTime: string) => {
-      openModal({
-        title: '📆 일정',
-        content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
-      });
-    },
-    [openModal],
-  );
+  const handleScheduleClick = (
+    detail: string,
+    startDateTime: string,
+    endDateTime: string,
+  ) => {
+    open({
+      title: '📆 일정',
+      content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
+    });
+  };
 
   return (
     <button

diff --git a/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx b/apps/member/src/components/calendar/CalendarTableSection/CalendarTableSection.tsx
@@ -1,27 +1,26 @@
-import { useCallback } from 'react';
-
 import { Table } from '@clab-platforms/design-system';
 
 import { Section } from '@components/common/Section';
 
 import { TABLE_HEAD } from '@constants/head';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useSchedule } from '@hooks/queries';
 import { formattedDate, formattedDatePeriod } from '@utils/date';
 
 const CalendarTableSection = () => {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { data } = useSchedule();
 
-  const handleScheduleClick = useCallback(
-    (detail: string, startDateTime: string, endDateTime: string) => {
-      openModal({
-        title: '📆 일정',
-        content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
-      });
-    },
-    [openModal],
-  );
+  const handleScheduleClick = (
+    detail: string,
+    startDateTime: string,
+    endDateTime: string,
+  ) => {
+    open({
+      title: '📆 일정',
+      content: `일시: ${formattedDatePeriod(startDateTime, endDateTime)}\n내용: ${detail}`,
+    });
+  };
 
   return (
     <Section>

diff --git a/apps/member/src/components/common/Comment/Comment.tsx b/apps/member/src/components/common/Comment/Comment.tsx
@@ -1,9 +1,7 @@
-import { useCallback } from 'react';
-
 import { cn, toDecodeHTMLEntities } from '@clab-platforms/utils';
 
 import { MODAL_ACCEPT, MODAL_CONTENT, MODAL_TITLE } from '@constants/modal';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useAccusesMutation, useCommentDeleteMutation } from '@hooks/queries';
 import { formattedDate } from '@utils/date';
 import { formatMemberName } from '@utils/string';
@@ -13,7 +11,7 @@ import type { CommentListItem } from '@type/comment';
 import ActionButton from '../ActionButton/ActionButton';
 import Avatar from '../Avatar/Avatar';
 
-interface CommentProps extends Omit<CommentListItem, 'content' | 'children'> {
+interface Props extends Omit<CommentListItem, 'content' | 'children'> {
   children: string;
   onClickReply: () => void;
   isReply?: boolean;
@@ -31,44 +29,38 @@ const Comment = ({
   isDeleted,
   isReply,
   onClickReply,
-}: CommentProps) => {
-  const { openModal } = useModal();
+}: Props) => {
+  const { open } = useModal();
   const { commentDeleteMutate } = useCommentDeleteMutation();
   const { accusesMutate } = useAccusesMutation();
 
-  const handleDeleteClick = useCallback(
-    (id: number) => {
-      return openModal({
-        title: MODAL_TITLE.DELETE,
-        content: MODAL_CONTENT.DELETE,
-        accept: {
-          text: MODAL_ACCEPT.DELETE,
-          onClick: () => commentDeleteMutate(id),
-        },
-      });
-    },
-    [commentDeleteMutate, openModal],
-  );
+  const handleDeleteClick = (id: number) => {
+    return open({
+      title: MODAL_TITLE.DELETE,
+      content: MODAL_CONTENT.DELETE,
+      accept: {
+        text: MODAL_ACCEPT.DELETE,
+        onClick: () => commentDeleteMutate(id),
+      },
+    });
+  };
 
-  const handleReportClick = useCallback(
-    (id: number) => {
-      return openModal({
-        title: MODAL_TITLE.REPORT,
-        content: MODAL_CONTENT.REPORT,
-        accept: {
-          text: MODAL_ACCEPT.REPORT,
-          onClick: () => {
-            accusesMutate({
-              targetType: 'COMMENT',
-              targetId: id,
-              reason: '부적절한 댓글입니다.',
-            });
-          },
+  const handleReportClick = (id: number) => {
+    return open({
+      title: MODAL_TITLE.REPORT,
+      content: MODAL_CONTENT.REPORT,
+      accept: {
+        text: MODAL_ACCEPT.REPORT,
+        onClick: () => {
+          accusesMutate({
+            targetType: 'COMMENT',
+            targetId: id,
+            reason: '부적절한 댓글입니다.',
+          });
         },
-      });
-    },
-    [accusesMutate, openModal],
-  );
+      },
+    });
+  };
 
   return (
     <div

diff --git a/apps/member/src/components/common/LogoutButton/LogoutButton.tsx b/apps/member/src/components/common/LogoutButton/LogoutButton.tsx
@@ -1,20 +1,23 @@
-import { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 
 import { Button } from '@clab-platforms/design-system';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useSetIsLoggedInStore } from '@store/auth';
 import { removeTokens } from '@utils/api';
 
-interface LogoutButtonProps
-  extends Omit<ComponentPropsWithRef<'button'>, 'color' | 'size' | 'onClick'> {}
+interface Props
+  extends Omit<
+    ComponentPropsWithoutRef<typeof Button>,
+    'color' | 'size' | 'onClick'
+  > {}
 
-const LogoutButton = ({ children, ...rest }: LogoutButtonProps) => {
+const LogoutButton = ({ children, ...props }: Props) => {
   const setIsLoggedIn = useSetIsLoggedInStore();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
-  const onClickLogout = () => {
-    openModal({
+  const handleLogoutClick = () => {
+    open({
       title: '로그아웃',
       content: '정말 로그아웃 하시겠습니까?',
       accept: {
@@ -28,7 +31,7 @@ const LogoutButton = ({ children, ...rest }: LogoutButtonProps) => {
   };
 
   return (
-    <Button color="red" size="sm" onClick={onClickLogout} {...rest}>
+    <Button color="red" size="sm" onClick={handleLogoutClick} {...props}>
       {children || '로그아웃'}
     </Button>
   );

diff --git a/apps/member/src/components/common/Modal/Modal.tsx b/apps/member/src/components/common/Modal/Modal.tsx
@@ -1,8 +1,9 @@
 import { PropsWithChildren } from 'react';
 
+import { CloseOutline } from '@clab-platforms/icon';
 import { cn } from '@clab-platforms/utils';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 
 interface ModalProps extends PropsWithChildren {
   disabled?: boolean;
@@ -16,7 +17,7 @@ interface ModalButtonProps extends ModalProps {
 }
 
 const Modal = ({ children }: PropsWithChildren) => {
-  const { closeModal } = useModal();
+  const { close } = useModal();
 
   return (
     <div
@@ -27,10 +28,7 @@ const Modal = ({ children }: PropsWithChildren) => {
     >
       <div className="flex min-h-screen items-center justify-center px-5">
         <div className="fixed inset-0">
-          <div
-            className="absolute inset-0 bg-gray-600/50"
-            onClick={closeModal}
-          />
+          <div className="absolute inset-0 bg-gray-600/50" onClick={close} />
         </div>
         <div className="z-50 inline-block w-full space-y-4 overflow-hidden rounded-lg bg-white p-4 text-center shadow-lg sm:max-w-lg sm:text-left">
           {children}
@@ -41,11 +39,16 @@ const Modal = ({ children }: PropsWithChildren) => {
 };
 
 const Header = ({ className, children }: ModalProps) => {
+  const { close } = useModal();
+
   return (
-    <header>
+    <header className="flex items-center justify-between">
       <h3 className={cn('text-xl font-semibold leading-6', className)}>
         {children}
       </h3>
+      <button>
+        <CloseOutline onClick={close} />
+      </button>
     </header>
   );
 };

diff --git a/apps/member/src/components/common/Modal/ModalContainer.tsx b/apps/member/src/components/common/Modal/ModalContainer.tsx
@@ -1,31 +1,31 @@
 import { Suspense, useCallback, useLayoutEffect } from 'react';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useGetModalStore } from '@store/modal';
 
 import Modal from './Modal';
 
 const ModalContainer = () => {
   const { isOpen, title, content, custom, accept, cancel } = useGetModalStore();
-  const { closeModal } = useModal();
+  const { close } = useModal();
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        closeModal();
+        close();
       }
     },
-    [closeModal],
+    [close],
   );
 
-  const onClickAccept = () => {
+  const handleAcceptClick = () => {
     accept?.onClick();
-    closeModal();
+    close();
   };
 
-  const onClickCancel = () => {
+  const handleCancelClick = () => {
     cancel?.onClick();
-    closeModal();
+    close();
   };
 
   useLayoutEffect(() => {
@@ -50,12 +50,12 @@ const ModalContainer = () => {
               <Modal.Body>{content}</Modal.Body>
               <Modal.Footer>
                 {accept && (
-                  <Modal.Button color="orange" onClick={onClickAccept}>
+                  <Modal.Button color="orange" onClick={handleAcceptClick}>
                     {accept.text}
                   </Modal.Button>
                 )}
                 {cancel && (
-                  <Modal.Button color="gray" onClick={onClickCancel}>
+                  <Modal.Button color="gray" onClick={handleCancelClick}>
                     {cancel.text}
                   </Modal.Button>
                 )}