diff --git a/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx b/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx
index 4bf79f63..2a62a5b8 100644
--- 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
index 4edd56b4..8fc9465a 100644
--- 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
index efc1c7e1..0728d0af 100644
--- 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
index 542a8718..46118e9e 100644
--- 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
index f2922322..69bb6f86 100644
--- 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
index 21c3a009..235751bc 100644
--- 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
index 3fb57ebb..28136e7d 100644
--- 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>
                 )}
diff --git a/apps/member/src/components/common/Nav/Nav.tsx b/apps/member/src/components/common/Nav/Nav.tsx
index 633159c6..c722766d 100644
--- a/apps/member/src/components/common/Nav/Nav.tsx
+++ b/apps/member/src/components/common/Nav/Nav.tsx
@@ -7,7 +7,7 @@ import { cn } from '@clab-platforms/utils';
 import { IS_DEVELOPMENT } from '@constants/environment';
 import { PATH } from '@constants/path';
 import { ROLE_LEVEL } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useMyProfile } from '@hooks/queries';
 
 import Sidebar from '../Sidebar/Sidebar';
@@ -15,7 +15,7 @@ import Sidebar from '../Sidebar/Sidebar';
 const Nav = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const { data } = useMyProfile();
 
@@ -24,7 +24,7 @@ const Nav = () => {
   const handleMenubarItemClick = (path: string) => navigate(path);
 
   const handleNotReadyClick = () => {
-    return openModal({
+    return open({
       content: '해당 기능은 준비중입니다.',
     });
   };
diff --git a/apps/member/src/components/common/Notice/Notice.tsx b/apps/member/src/components/common/Notice/Notice.tsx
index 917ff3c8..12a0134a 100644
--- a/apps/member/src/components/common/Notice/Notice.tsx
+++ b/apps/member/src/components/common/Notice/Notice.tsx
@@ -1,8 +1,7 @@
-import { useCallback } from 'react';
-
 import { cn } from '@clab-platforms/utils';
 
-import useModal from '@hooks/common/useModal';
+import { MODAL_TITLE } from '@constants/modal';
+import { useModal } from '@hooks/common/useModal';
 import { calculateDDay, formattedDate } from '@utils/date';
 
 interface Props {
@@ -20,14 +19,14 @@ const Notice = ({
   showDDay = false,
   className,
 }: Props) => {
-  const { openModal } = useModal();
+  const { open } = useModal();
 
-  const handleNoticeClick = useCallback(() => {
-    openModal({
-      title: '📆 공지',
+  const handleNoticeClick = () => {
+    open({
+      title: MODAL_TITLE.NOTICE,
       content,
     });
-  }, [content, openModal]);
+  };
 
   let renderDDay: React.ReactNode | null = null;
   if (showDDay) {
diff --git a/apps/member/src/components/community/CommunityDeleteButton/CommunityDeleteButton.tsx b/apps/member/src/components/community/CommunityDeleteButton/CommunityDeleteButton.tsx
index 5d4787f0..c9217607 100644
--- a/apps/member/src/components/community/CommunityDeleteButton/CommunityDeleteButton.tsx
+++ b/apps/member/src/components/community/CommunityDeleteButton/CommunityDeleteButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@clab-platforms/design-system';
 
 import { MODAL_ACCEPT, MODAL_CONTENT, MODAL_TITLE } from '@constants/modal';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useBoardDeleteMutation } from '@hooks/queries';
 
 interface Props {
@@ -9,11 +9,11 @@ interface Props {
 }
 
 const CommunityDeleteButton = ({ id }: Props) => {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { boardDeleteMutate } = useBoardDeleteMutation();
 
   const handleAccusesClick = () => {
-    return openModal({
+    return open({
       title: MODAL_TITLE.DELETE,
       content: MODAL_CONTENT.DELETE,
       accept: {
diff --git a/apps/member/src/components/community/CommunityReportButton/CommunityReportButton.tsx b/apps/member/src/components/community/CommunityReportButton/CommunityReportButton.tsx
index e4bc20bd..183b81db 100644
--- a/apps/member/src/components/community/CommunityReportButton/CommunityReportButton.tsx
+++ b/apps/member/src/components/community/CommunityReportButton/CommunityReportButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@clab-platforms/design-system';
 
 import { MODAL_ACCEPT, MODAL_CONTENT, MODAL_TITLE } from '@constants/modal';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useAccusesMutation } from '@hooks/queries';
 
 interface CommunityReportButtonProps {
@@ -10,10 +10,10 @@ interface CommunityReportButtonProps {
 
 const CommunityReportButton = ({ id }: CommunityReportButtonProps) => {
   const { accusesMutate } = useAccusesMutation();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const handleAccusesClick = () => {
-    openModal({
+    open({
       title: MODAL_TITLE.REPORT,
       content: MODAL_CONTENT.REPORT,
       accept: {
diff --git a/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx b/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx
index f3597203..d8266ff7 100644
--- a/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx
+++ b/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx
@@ -4,7 +4,7 @@ import { Section } from '@components/common/Section';
 import { ActivityBoardEditModal } from '@components/modal';
 
 import { TABLE_HEAD } from '@constants/head';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useActivityGroupBoardDeleteMutation } from '@hooks/queries';
 import { formattedDate, toKoreaISOString } from '@utils/date';
 
@@ -19,7 +19,7 @@ const ActivityConfigTableSection = ({
   tableList,
   groupId,
 }: ActivityConfigTableSectionProps) => {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { activityGroupBoardDeleteMutate } =
     useActivityGroupBoardDeleteMutation();
 
@@ -27,7 +27,7 @@ const ActivityConfigTableSection = ({
     activityGroupBoardDeleteMutate(activityGroupBoardId);
   };
   const handleEditNoticeClick = (prevData: ActivityBoardType) => {
-    return openModal({
+    return open({
       title: '수정하기',
       custom: <ActivityBoardEditModal groupId={groupId} prevData={prevData} />,
     });
diff --git a/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx b/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx
index 71df756a..0c070ea8 100644
--- a/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx
+++ b/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx
@@ -6,7 +6,7 @@ import { cn } from '@clab-platforms/utils';
 import DropdownButton from '@components/common/DropdownButton/DropdownButton';
 import Section from '@components/common/Section/Section';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { formattedDate, toKoreaISOString } from '@utils/date';
 import dayjs from 'dayjs';
 
@@ -15,11 +15,11 @@ import type { ResponseFile } from '@type/api';
 
 import { ActivityNoticeModal } from './ActivityNoticeModal';
 
-interface ActivityNoticeSectionProps {
+interface Props {
   data: Array<ActivityBoardType>;
 }
 
-interface ActivityNoticeSectionItemProps {
+interface ItemProps {
   className?: string;
   onClick: (
     content: string,
@@ -29,8 +29,8 @@ interface ActivityNoticeSectionItemProps {
   data: ActivityBoardType;
 }
 
-const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => {
-  const { openModal } = useModal();
+const ActivityNoticeSection = ({ data }: Props) => {
+  const { open: openModal } = useModal();
   const [open, setOpen] = useState(false);
 
   if (!data || data.length === 0) {
@@ -44,7 +44,7 @@ const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => {
   const latestNotice = sortedNotices[0];
   const otherNotices = sortedNotices.slice(1);
 
-  const onClickAlert = (
+  const handleNoticeClick = (
     content: string,
     title?: string,
     files?: Array<ResponseFile>,
@@ -60,7 +60,7 @@ const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => {
       <div className="flex items-center gap-2 divide-x">
         <ActivityNoticeSection.Item
           data={latestNotice}
-          onClick={onClickAlert}
+          onClick={handleNoticeClick}
         />
         {otherNotices.length > 0 && (
           <DropdownButton
@@ -82,7 +82,7 @@ const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => {
             <ActivityNoticeSection.Item
               key={notice.id}
               data={notice}
-              onClick={onClickAlert}
+              onClick={handleNoticeClick}
             />
           ))}
         </div>
@@ -91,11 +91,7 @@ const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => {
   );
 };
 
-ActivityNoticeSection.Item = ({
-  className,
-  data,
-  onClick,
-}: ActivityNoticeSectionItemProps) => {
+ActivityNoticeSection.Item = ({ className, data, onClick }: ItemProps) => {
   return (
     <div
       className={cn(
diff --git a/apps/member/src/components/group/ActivityParticipantEditor/ActivityParticipantEditor.tsx b/apps/member/src/components/group/ActivityParticipantEditor/ActivityParticipantEditor.tsx
index 5c61b142..5f540ce8 100644
--- a/apps/member/src/components/group/ActivityParticipantEditor/ActivityParticipantEditor.tsx
+++ b/apps/member/src/components/group/ActivityParticipantEditor/ActivityParticipantEditor.tsx
@@ -17,7 +17,7 @@ import { CheckConfirmModal } from '@components/modal';
 import { TABLE_HEAD } from '@constants/head';
 import { GROUP_MESSAGE } from '@constants/message';
 import { ACTIVITY_MEMBER_ROLE, ACTIVITY_MEMBER_STATE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { usePagination } from '@hooks/common/usePagination';
 import {
   useActivityGroupApplication,
@@ -64,7 +64,7 @@ const ActivityParticipantEditor = ({
 }: ActivityParticipantEditorProps) => {
   const [mode, setMode] = useState(false);
   const { page, size, handlePageChange } = usePagination({ defaultSize: 10 });
-  const { openModal, closeModal } = useModal();
+  const { open, close } = useModal();
   const { activityGroupApplicationMutate } =
     useActivityGroupApplicationMutation();
   const { data: applyMemberList } = useActivityGroupApplication({
@@ -82,7 +82,7 @@ const ActivityParticipantEditor = ({
       })),
   );
   const handleOpenModal = (name: string, content: string) => {
-    openModal({
+    open({
       title: '📝 ' + name,
       content: content,
     });
@@ -133,7 +133,7 @@ const ActivityParticipantEditor = ({
       .filter((member) => member.status === true)
       .map((member) => member.memberId);
 
-    openModal({
+    open({
       content: (
         <CheckConfirmModal
           message="변경하시겠습니까?"
@@ -144,7 +144,7 @@ const ActivityParticipantEditor = ({
               status: ACTIVITY_MEMBER_STATE.ACCEPTED,
             });
           }}
-          handleClose={closeModal}
+          handleClose={close}
         />
       ),
     });
diff --git a/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx b/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx
index 208414f8..bad5d815 100644
--- a/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx
+++ b/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx
@@ -9,7 +9,7 @@ import { ActivityBoardEditModal } from '@components/modal';
 
 import { FORM_DATA_KEY } from '@constants/api.ts';
 import { ACTIVITY_BOARD_CATEGORY_STATE } from '@constants/state.ts';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import useToast from '@hooks/common/useToast';
 import {
   useActivityGroupBoardDeleteMutation,
@@ -40,17 +40,13 @@ const ActivityPostEditor = ({
   assignments,
 }: ActivityPostEditorProps) => {
   const toast = useToast();
-  const { openModal } = useModal();
+  const { open } = useModal();
   const [post, setPost] = useState(defaultPost);
   const [editAssignment, setEditAssignment] = useState<boolean[]>(
     Array.from({ length: activities.length }, () => false),
   );
   const uploaderRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    setEditAssignment(Array.from({ length: activities.length }, () => false));
-  }, [activities]);
-
   const { data: myProfile } = useMyProfile();
 
   const { activityGroupBoardMutate, activityGroupBoardIsPending } =
@@ -58,6 +54,10 @@ const ActivityPostEditor = ({
   const { activityGroupBoardDeleteMutate } =
     useActivityGroupBoardDeleteMutation();
 
+  useEffect(() => {
+    setEditAssignment(Array.from({ length: activities.length }, () => false));
+  }, [activities]);
+
   const handlePostChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -98,7 +98,7 @@ const ActivityPostEditor = ({
     activityGroupBoardDeleteMutate(activityGroupBoardId);
   };
   const handleEditWeeklyClick = (prevData: ActivityBoardType) =>
-    openModal({
+    open({
       title: '수정하기',
       custom: <ActivityBoardEditModal groupId={groupId} prevData={prevData} />,
     });
diff --git a/apps/member/src/components/group/AssignmentListSection/AssignmentFeedbackModal.tsx b/apps/member/src/components/group/AssignmentListSection/AssignmentFeedbackModal.tsx
index dd0b131f..55feb457 100644
--- a/apps/member/src/components/group/AssignmentListSection/AssignmentFeedbackModal.tsx
+++ b/apps/member/src/components/group/AssignmentListSection/AssignmentFeedbackModal.tsx
@@ -4,7 +4,7 @@ import File from '@components/common/File/File';
 import Modal from '@components/common/Modal/Modal';
 import Textarea from '@components/common/Textarea/Textarea';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import useToast from '@hooks/common/useToast';
 import {
   useActivityGroupBoardMutation,
@@ -25,7 +25,7 @@ const AssignmentFeedbackModal = ({
   groupId,
   assignmentId,
 }: AssignmentFeedbackModalProps) => {
-  const { closeModal } = useModal();
+  const { close } = useModal();
   const toast = useToast();
   const [feedback, setFeedback] = useState('');
   const { data: myProfile } = useMyProfile();
@@ -65,7 +65,7 @@ const AssignmentFeedbackModal = ({
         },
       });
     }
-    closeModal();
+    close();
   };
 
   useEffect(() => {
@@ -108,7 +108,7 @@ const AssignmentFeedbackModal = ({
         >
           입력
         </Modal.Button>
-        <Modal.Button color="gray" onClick={closeModal}>
+        <Modal.Button color="gray" onClick={close}>
           취소
         </Modal.Button>
       </Modal.Footer>
diff --git a/apps/member/src/components/group/AssignmentListSection/AssignmentListSection.tsx b/apps/member/src/components/group/AssignmentListSection/AssignmentListSection.tsx
index 57cffc44..14605df1 100644
--- a/apps/member/src/components/group/AssignmentListSection/AssignmentListSection.tsx
+++ b/apps/member/src/components/group/AssignmentListSection/AssignmentListSection.tsx
@@ -8,7 +8,7 @@ import { Section } from '@components/common/Section';
 import { TABLE_HEAD } from '@constants/head';
 import { GROUP_MESSAGE } from '@constants/message';
 import { ACTIVITY_MEMBER_ROLE, ACTIVITY_MEMBER_STATE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import {
   useActivityGroupBoardByParent,
   useActivityGroupMemberList,
@@ -21,7 +21,7 @@ import AssignmentFeedbackModal from './AssignmentFeedbackModal';
 
 const AssignmentListSection = () => {
   const { id, assignmentId } = useParams();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   if (!assignmentId || !id) {
     throw new Error(GROUP_MESSAGE.NO_ACTIVITY);
@@ -50,7 +50,7 @@ const AssignmentListSection = () => {
     groupId: number,
     assignmentId: number,
   ) => {
-    return openModal({
+    return open({
       custom: (
         <AssignmentFeedbackModal
           post={post}
diff --git a/apps/member/src/components/manage/ManageActivitySection/ManageActivitySection.tsx b/apps/member/src/components/manage/ManageActivitySection/ManageActivitySection.tsx
index 20c49c2e..ce0a7dda 100644
--- a/apps/member/src/components/manage/ManageActivitySection/ManageActivitySection.tsx
+++ b/apps/member/src/components/manage/ManageActivitySection/ManageActivitySection.tsx
@@ -11,7 +11,7 @@ import { CheckConfirmModal } from '@components/modal';
 import { TABLE_HEAD } from '@constants/head';
 import { GROUP_MESSAGE } from '@constants/message';
 import { ACTIVITY_STATE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { usePagination } from '@hooks/common/usePagination';
 import {
   useActivityGroupDeleteMutation,
@@ -27,7 +27,7 @@ const ManageActivitySection = () => {
   const [mode, setMode] = useState<ActivityGroupStatusType>(
     ACTIVITY_STATE.WAITING,
   );
-  const { openModal, closeModal } = useModal();
+  const { open, close } = useModal();
   const { page, size, handlePageChange } = usePagination({
     defaultSize: 6,
     sectionName: 'activity',
@@ -41,19 +41,21 @@ const ManageActivitySection = () => {
   });
 
   const handleInfoButtonClick = (groupId: number) => {
-    return openModal({
+    return open({
       title: '그룹 정보',
       content: <ActivityInfoModal id={groupId} />,
     });
   };
+
   const handleMenubarItemClick = (mode: ActivityGroupStatusType) => {
     setMode(mode);
   };
+
   const handleApproveButtonClick = (
     id: number,
     status: ActivityGroupStatusType,
   ) => {
-    openModal({
+    open({
       content: (
         <CheckConfirmModal
           message="승인하시겠습니까?"
@@ -63,20 +65,21 @@ const ManageActivitySection = () => {
               activityGroupStatus: status,
             });
           }}
-          handleClose={closeModal}
+          handleClose={close}
         />
       ),
     });
   };
+
   const handleRejectButtonClick = (id: number) => {
-    openModal({
+    open({
       content: (
         <CheckConfirmModal
           message="거절하시겠습니까?"
           handleConfirmButton={() => {
             activityGroupDeleteMutate(id);
           }}
-          handleClose={closeModal}
+          handleClose={close}
         />
       ),
     });
diff --git a/apps/member/src/components/manage/ManageAlertSection/ManagerAlertSection.tsx b/apps/member/src/components/manage/ManageAlertSection/ManagerAlertSection.tsx
index 4bcffb7d..b7feda50 100644
--- a/apps/member/src/components/manage/ManageAlertSection/ManagerAlertSection.tsx
+++ b/apps/member/src/components/manage/ManageAlertSection/ManagerAlertSection.tsx
@@ -12,7 +12,7 @@ import CommunityBoardForm from '@components/community/CommunityBoardForm/Communi
 import { SERVICE_NAME } from '@constants/environment';
 import { TABLE_HEAD, TABLE_HEAD_ACTION } from '@constants/head';
 import { PATH_FINDER } from '@constants/path';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { usePagination } from '@hooks/common/usePagination';
 import { useBoardByCategory, useBoardDeleteMutation } from '@hooks/queries';
 import { getCategoryTitle } from '@utils/community';
@@ -28,7 +28,7 @@ type ModeState = 'view' | 'add';
 
 const ManagerAlertSection = ({ category }: ManagerAlertSectionProps) => {
   const navigate = useNavigate();
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { boardDeleteMutate } = useBoardDeleteMutation();
   const { data } = useBoardByCategory({
     hasPermission: true,
@@ -53,7 +53,7 @@ const ManagerAlertSection = ({ category }: ManagerAlertSectionProps) => {
     id: number,
   ) => {
     e.stopPropagation();
-    return openModal({
+    return open({
       title: `${title} 삭제`,
       content: `해당 ${title}을 정말 삭제하시겠습니까?\n삭제된 데이터는 복구할 수 없습니다.`,
       accept: {
diff --git a/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx b/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
index d77b739e..69047777 100644
--- a/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
+++ b/apps/member/src/components/manage/ManageCalendarSection/ManageCalendarSection.tsx
@@ -11,7 +11,7 @@ import { Section } from '@components/common/Section';
 
 import { TABLE_HEAD } from '@constants/head';
 import { PATH } from '@constants/path';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { usePagination } from '@hooks/common/usePagination';
 import { useSchedule, useScheduleDeleteMutation } from '@hooks/queries';
 import { formattedDate, now } from '@utils/date';
@@ -21,7 +21,7 @@ type Mode = 'view' | 'add';
 
 const ManageCalendarSection = () => {
   const navigate = useNavigate();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const [mode, setMode] = useState<Mode>('view');
   const { page, size, handlePageChange } = usePagination({
@@ -43,7 +43,7 @@ const ManageCalendarSection = () => {
     id: number,
   ) => {
     e.stopPropagation();
-    return openModal({
+    return open({
       title: '스케줄 삭제',
       content: `해당 스케줄을 정말 삭제하시겠습니까?\n삭제된 데이터는 복구할 수 없습니다.`,
       accept: {
diff --git a/apps/member/src/components/manage/ManageLibrarySection/ManageLibrarySection.tsx b/apps/member/src/components/manage/ManageLibrarySection/ManageLibrarySection.tsx
index 79f48dba..2199c867 100644
--- a/apps/member/src/components/manage/ManageLibrarySection/ManageLibrarySection.tsx
+++ b/apps/member/src/components/manage/ManageLibrarySection/ManageLibrarySection.tsx
@@ -9,7 +9,7 @@ import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionS
 import { MemberInfoModal } from '@components/modal';
 
 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 {
   useBookLoanRecordApproveMutation,
@@ -24,7 +24,7 @@ const ManageLibrarySection = () => {
   const { page, size, handlePageChange } = usePagination({
     sectionName: 'library',
   });
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const [mode, setMode] = useState<Mode>('condition');
 
@@ -49,7 +49,7 @@ const ManageLibrarySection = () => {
   };
 
   const handleContactButtonClick = (id: string) => {
-    return openModal({
+    return open({
       title: '멤버 정보',
       content: <MemberInfoModal id={id} />,
     });
diff --git a/apps/member/src/components/modal/ActivityBoardEditModal.tsx b/apps/member/src/components/modal/ActivityBoardEditModal.tsx
index a7684fc4..cc6050c3 100644
--- a/apps/member/src/components/modal/ActivityBoardEditModal.tsx
+++ b/apps/member/src/components/modal/ActivityBoardEditModal.tsx
@@ -9,7 +9,7 @@ import Textarea from '@components/common/Textarea/Textarea';
 
 import { FORM_DATA_KEY } from '@constants/api';
 import { ACTIVITY_BOARD_CATEGORY_STATE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import useToast from '@hooks/common/useToast';
 import { useActivityGroupBoardPatchMutation } from '@hooks/queries';
 
@@ -27,7 +27,7 @@ interface FileUploaderProps {
 }
 
 export const ActivityBoardEditModal = ({ prevData, groupId }: Props) => {
-  const { closeModal } = useModal();
+  const { close } = useModal();
   const toast = useToast();
   const [board, setBoard] = useState<ActivityBoardType>(prevData);
 
@@ -75,7 +75,7 @@ export const ActivityBoardEditModal = ({ prevData, groupId }: Props) => {
       },
       files: files?.length ? formData : undefined,
     });
-    closeModal();
+    close();
   };
 
   return (
@@ -122,7 +122,7 @@ export const ActivityBoardEditModal = ({ prevData, groupId }: Props) => {
         >
           변경
         </Modal.Button>
-        <Modal.Button color="gray" onClick={closeModal}>
+        <Modal.Button color="gray" onClick={close}>
           취소
         </Modal.Button>
       </Modal.Footer>
diff --git a/apps/member/src/components/panels/AlarmPanel/AlarmPanel.tsx b/apps/member/src/components/panels/AlarmPanel/AlarmPanel.tsx
index 34060bd5..d6dbad25 100644
--- a/apps/member/src/components/panels/AlarmPanel/AlarmPanel.tsx
+++ b/apps/member/src/components/panels/AlarmPanel/AlarmPanel.tsx
@@ -5,14 +5,14 @@ import { AboutColor } from '@clab-platforms/icon';
 import Panel from '@components/common/Panel/Panel';
 
 import { MODAL_TITLE } from '@constants/modal';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useMyNotifications } from '@hooks/queries';
 
 const AlarmPanel = () => {
   const { data } = useMyNotifications({ size: 5 });
 
   const [open, setOpen] = useState(true);
-  const { openModal } = useModal();
+  const { open: openModal } = useModal();
 
   const handleOpenClick = () => setOpen((prev) => !prev);
 
diff --git a/apps/member/src/components/panels/BookPanel/BookPanel.tsx b/apps/member/src/components/panels/BookPanel/BookPanel.tsx
index 8f66cbb8..84f2edb2 100644
--- a/apps/member/src/components/panels/BookPanel/BookPanel.tsx
+++ b/apps/member/src/components/panels/BookPanel/BookPanel.tsx
@@ -4,7 +4,7 @@ import Panel from '@components/common/Panel/Panel';
 import ProgressBar from '@components/common/ProgressBar/ProgressBar';
 import Select from '@components/common/Select/Select';
 
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import {
   useBookLoanExtendMutation,
   useBookLoanRecordConditions,
@@ -31,7 +31,7 @@ const ActionButton = ({
 );
 
 const BookPanel = () => {
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const { data: myProfile } = useMyProfile();
   const { data } = useBookLoanRecordConditions({
@@ -52,7 +52,7 @@ const BookPanel = () => {
   const handleActionClick = (action: Action) => {
     let selectedBookId = selectOptions[0].value; // 기본값으로 첫 번째 책 선택
 
-    openModal({
+    open({
       title: action,
       content: (
         <Select
diff --git a/apps/member/src/constants/modal.ts b/apps/member/src/constants/modal.ts
index f579454f..ca357fc4 100644
--- a/apps/member/src/constants/modal.ts
+++ b/apps/member/src/constants/modal.ts
@@ -1,4 +1,5 @@
 export const MODAL_TITLE = {
+  NOTICE: '📆 공지',
   ALARM: '🔔 알림',
   REPORT: '🚨 신고하기',
   DELETE: '🗑️ 삭제하기',
diff --git a/apps/member/src/hooks/common/useModal.ts b/apps/member/src/hooks/common/useModal.ts
index 56243682..62d61cd3 100644
--- a/apps/member/src/hooks/common/useModal.ts
+++ b/apps/member/src/hooks/common/useModal.ts
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { useSetModalStore } from '@store/modal';
 import { now } from '@utils/date';
 
@@ -16,14 +18,18 @@ interface OpenModalProps {
   };
 }
 
-const useModal = () => {
+export interface UseModalResult<T> {
+  open: (options: T) => void;
+}
+
+export function useModal() {
   const setModal = useSetModalStore();
   /**
-   * open modal
+   * 모달을 엽니다.
    */
-  const openModal = ({
+  const open = ({
     key = now().toString(),
-    title = 'C-Lab PLAY',
+    title = 'Members',
     content,
     custom,
     accept,
@@ -38,26 +44,24 @@ const useModal = () => {
       ...(accept && { accept }),
       cancel: {
         text: cancel?.text || '닫기',
-        onClick: cancel?.onClick || closeModal,
+        onClick: cancel?.onClick || close,
       },
     });
   };
+
   /**
-   * close modal
+   * 모달을 닫습니다.
    */
-  const closeModal = () => {
+  const close = useCallback(() => {
     setModal((prev) => ({ ...prev, isOpen: false }));
-  };
+  }, [setModal]);
+
   /**
-   * force update modal
-   * - when you need to update modal content
-   * - ex) when you need to update modal content after user input
+   * 모달을 강제 업데이트합니다.
    */
-  const forceUpdateModal = () => {
+  const update = useCallback(() => {
     setModal((prev) => ({ ...prev, key: now().toString() }));
-  };
+  }, [setModal]);
 
-  return { openModal, closeModal, forceUpdateModal };
-};
-
-export default useModal;
+  return { open, close, update } as const;
+}
diff --git a/apps/member/src/hooks/modal/useMembershipInfoModal.tsx b/apps/member/src/hooks/modal/useMembershipInfoModal.tsx
index 1ffb8b0a..db9e875b 100644
--- a/apps/member/src/hooks/modal/useMembershipInfoModal.tsx
+++ b/apps/member/src/hooks/modal/useMembershipInfoModal.tsx
@@ -8,7 +8,7 @@ import MembershipCategoryBadge from '@components/membership/MembershipCategoryBa
 import MembershipStatusBadge from '@components/membership/MembershipStatusBadge/MembershipStatusBadge';
 
 import { MODAL_TITLE } from '@constants/modal';
-import useModal, { UseModalResult } from '@hooks/common/useModal';
+import { UseModalResult, useModal } from '@hooks/common/useModal';
 import { useMembershipFeeModifyMutation } from '@hooks/queries/useMembershipFeeModifyMutation';
 import { createImageUrl } from '@utils/api';
 import { formattedDate } from '@utils/date';
@@ -27,13 +27,13 @@ interface Options {
  * 관리자 권한일 경우 승인과 반려처리를 할 수 있습니다.
  */
 export function useMembershipInfoModal(): UseModalResult<Options> {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { membershipFeeModifyMutate } = useMembershipFeeModifyMutation();
 
   return useMemo(
     () => ({
       open: (options: Options) =>
-        openModal({
+        open({
           title: MODAL_TITLE.SUPPORT_HISTORY,
           content: <MembershipInfoModal {...options} />,
           accept: options.hasPermission
@@ -64,7 +64,7 @@ export function useMembershipInfoModal(): UseModalResult<Options> {
             : undefined,
         }),
     }),
-    [membershipFeeModifyMutate, openModal],
+    [membershipFeeModifyMutate, open],
   );
 }
 
diff --git a/apps/member/src/pages/GroupAssignmentPage/GroupAssignmentPage.tsx b/apps/member/src/pages/GroupAssignmentPage/GroupAssignmentPage.tsx
index d55fb4cf..df666a33 100644
--- a/apps/member/src/pages/GroupAssignmentPage/GroupAssignmentPage.tsx
+++ b/apps/member/src/pages/GroupAssignmentPage/GroupAssignmentPage.tsx
@@ -14,7 +14,7 @@ import { ActivityBoardEditModal } from '@components/modal';
 import { GROUP_MESSAGE } from '@constants/message';
 import { PATH_FINDER } from '@constants/path';
 import { ACTIVITY_MEMBER_ROLE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import {
   useActivityGroup,
   useActivityGroupBoardMyAssignment,
@@ -25,7 +25,7 @@ import { isImageFile } from '@utils/api';
 import { formattedDate } from '@utils/date';
 
 const GroupAssignmentPage = () => {
-  const { openModal } = useModal();
+  const { open } = useModal();
   const { id, assignmentId } = useParams();
   const { state } = useLocation();
   const { data: myProfile } = useMyProfile();
@@ -46,7 +46,7 @@ const GroupAssignmentPage = () => {
   const feedback = myAssignment?.[0];
 
   const handleEditNoticeClick = () => {
-    return openModal({
+    return open({
       title: '수정하기',
       custom: <ActivityBoardEditModal groupId={+id} prevData={board} />,
     });
diff --git a/apps/member/src/pages/GroupDetailPage/GroupDetailPage.tsx b/apps/member/src/pages/GroupDetailPage/GroupDetailPage.tsx
index dde83029..98f0bd76 100644
--- a/apps/member/src/pages/GroupDetailPage/GroupDetailPage.tsx
+++ b/apps/member/src/pages/GroupDetailPage/GroupDetailPage.tsx
@@ -12,30 +12,30 @@ import { TABLE_HEAD } from '@constants/head';
 import { GROUP_MESSAGE } from '@constants/message';
 import { PATH, PATH_FINDER } from '@constants/path';
 import { ACTIVITY_MEMBER_STATE } from '@constants/state';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import { useMyProfile } from '@hooks/queries';
 import { useActivityGroup } from '@hooks/queries/activity/useActivityGroup';
 
 const GroupDetailPage = () => {
   const { id } = useParams();
   const navigate = useNavigate();
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   if (!id) throw new Error(GROUP_MESSAGE.NO_ACTIVITY);
 
   const { data: myProfile } = useMyProfile();
-  const { data } = useActivityGroup(+id);
+  const { data: activityGroup } = useActivityGroup(+id);
 
-  const isParticipant = data.groupMembers.some(
+  const isParticipant = activityGroup.groupMembers.some(
     (member) => member.memberId === myProfile.id,
   );
 
-  const acceptedParticipant = data.groupMembers.filter(
+  const acceptedParticipant = activityGroup.groupMembers.filter(
     (member) => member.status === ACTIVITY_MEMBER_STATE.ACCEPTED,
   );
 
   const handleApplicationClick = () => {
-    openModal({
+    open({
       title: '참여자 목록',
       content: (
         <Table head={TABLE_HEAD.ACTIVITY_GROUP_PARTICIPANTS} className="w-full">
@@ -53,11 +53,11 @@ const GroupDetailPage = () => {
 
   return (
     <Content>
-      <Header title={['활동', data.name]} path={PATH.ACTIVITY}>
+      <Header title={['활동', activityGroup.name]} path={PATH.ACTIVITY}>
         <Button size="sm" onClick={handleApplicationClick}>
           참여자 목록
         </Button>
-        {data.isOwner && (
+        {activityGroup.isOwner && (
           <Button
             size="sm"
             color="red"
@@ -67,10 +67,10 @@ const GroupDetailPage = () => {
           </Button>
         )}
       </Header>
-      <ActivityDetailSection data={data} />
-      <ActivityNoticeSection data={data.notices} />
+      <ActivityDetailSection data={activityGroup} />
+      <ActivityNoticeSection data={activityGroup.notices} />
       <WeeklyActivitySection
-        data={data.activities}
+        data={activityGroup.activities}
         isParticipant={isParticipant}
       />
     </Content>
diff --git a/apps/member/src/pages/MyPage/components/HistorySection.tsx b/apps/member/src/pages/MyPage/components/HistorySection.tsx
index ca27bfdb..0c5d380c 100644
--- a/apps/member/src/pages/MyPage/components/HistorySection.tsx
+++ b/apps/member/src/pages/MyPage/components/HistorySection.tsx
@@ -8,7 +8,7 @@ import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionS
 import { MY_MESSAGE } from '@constants/message';
 import { MODAL_TITLE } from '@constants/modal';
 import { PATH_FINDER } from '@constants/path';
-import useModal from '@hooks/common/useModal';
+import { useModal } from '@hooks/common/useModal';
 import {
   useBookLoanRecordConditions,
   useMyNotifications,
@@ -24,7 +24,7 @@ interface Props {
 }
 
 export function HistorySection({ category }: Props) {
-  const { openModal } = useModal();
+  const { open } = useModal();
 
   const { data: myProfile } = useMyProfile();
   const { data: myNotifications } = useMyNotifications({});
@@ -74,7 +74,7 @@ export function HistorySection({ category }: Props) {
           <ListButton
             key={`my-alarm-${id}`}
             onClick={() =>
-              openModal({
+              open({
                 title: MODAL_TITLE.ALARM,
                 content: content,
               })
@@ -101,7 +101,7 @@ export function HistorySection({ category }: Props) {
     myBookLoanRecord.items,
     myCommentsData.items,
     myNotifications.items,
-    openModal,
+    open,
   ]);
 
   return (
diff --git a/apps/member/src/pages/MyPage/hooks/useChangePasswordModal.tsx b/apps/member/src/pages/MyPage/hooks/useChangePasswordModal.tsx
index 11700d8c..75a695d2 100644
--- a/apps/member/src/pages/MyPage/hooks/useChangePasswordModal.tsx
+++ b/apps/member/src/pages/MyPage/hooks/useChangePasswordModal.tsx
@@ -5,7 +5,7 @@ import { cn } from '@clab-platforms/utils';
 
 import Modal from '@components/common/Modal/Modal';
 
-import useModal, { UseModalResult } from '@hooks/common/useModal';
+import { UseModalResult, useModal } from '@hooks/common/useModal';
 import useToast from '@hooks/common/useToast';
 import { useUserInfoMutation } from '@hooks/queries';
 
@@ -17,25 +17,25 @@ interface Options {
  * 비밀번호 변경 모달을 엽니다.
  */
 export function useChangePasswordModal(): UseModalResult<Options> {
-  const { openModal, closeModal } = useModal();
+  const { open, close } = useModal();
 
   return useMemo(
     () => ({
       open: (options: Options) =>
-        openModal({
+        open({
           title: '비밀번호 변경',
-          custom: <ChangePasswordModal closeModal={closeModal} {...options} />,
+          custom: <ChangePasswordModal close={close} {...options} />,
         }),
     }),
-    [closeModal, openModal],
+    [close, open],
   );
 }
 
 interface Props extends Options {
-  closeModal: () => void;
+  close: () => void;
 }
 
-function ChangePasswordModal({ closeModal, memberId }: Props) {
+function ChangePasswordModal({ close, memberId }: Props) {
   const toast = useToast();
   const { userInfoMutate } = useUserInfoMutation();
 
@@ -72,7 +72,7 @@ function ChangePasswordModal({ closeModal, memberId }: Props) {
       },
       {
         onSuccess: () => {
-          closeModal();
+          close();
         },
       },
     );
@@ -118,7 +118,7 @@ function ChangePasswordModal({ closeModal, memberId }: Props) {
         <Modal.Button color="orange" onClick={handledAcceptClick}>
           변경
         </Modal.Button>
-        <Modal.Button color="gray" onClick={closeModal}>
+        <Modal.Button color="gray" onClick={close}>
           취소
         </Modal.Button>
       </Modal.Footer>
diff --git a/apps/member/src/store/modal.ts b/apps/member/src/store/modal.ts
index fcb2ee4d..554b9144 100644
--- a/apps/member/src/store/modal.ts
+++ b/apps/member/src/store/modal.ts
@@ -7,7 +7,7 @@ import {
 
 import { ATOM_KEY } from '@constants/key';
 
-interface ModalState {
+type TModal = {
   key: string;
   isOpen: boolean;
   title: string;
@@ -21,9 +21,9 @@ interface ModalState {
     text: string;
     onClick: () => void;
   };
-}
+};
 
-export const modalState = atom<ModalState>({
+export const modalState = atom<TModal>({
   key: ATOM_KEY.MODAL,
   default: {
     key: '',