TwoButtonModal을 기존의 Modal 컴포넌트로 대체

frontend/src/components/PostForm/index.tsx

@@ -63,7 +63,7 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
   //기타 훅
   const navigate = useNavigate();
   const { addMessage } = useContext(ToastContext);
-  const { isOpen: isModalOpen, openComponent, closeComponent } = useToggle();
+  const { isOpen: isModalOpen, openComponent, closeComponent: closeModal } = useToggle();
 
   //게시글 정보 관련 훅
   const contentImageHook = useContentImage(serverImageUrl);
@@ -111,7 +111,7 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
     }
   };
 
-  const closeModal = () => {
+  const handleModalClose = () => {
     if (data && checkIrreplaceableTime(userSelectTime, data.createTime)) {
       addMessage('마감시간 지정 조건을 다시 확인해주세요.');
       const updatedTime = {
@@ -126,7 +126,7 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
     setSelectTimeOption(
       Object.values(userSelectTime).every(time => time === 0) ? null : '사용자지정'
     );
-    closeComponent();
+    closeModal();
   };
 
   const handlePostFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -181,6 +181,16 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
     }
   };
 
+  const primaryButton = {
+    text: '저장',
+    handleClick: closeModal,
+  };
+
+  const secondaryButton = {
+    text: '초기화',
+    handleClick: handleResetButton,
+  };
+
   return (
     <>
       <S.HeaderWrapper>
@@ -298,31 +308,20 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
           </S.RightSide>
         </ResponsiveFlex>
         {isModalOpen && (
-          <Modal size="sm" onModalClose={closeModal} aria-label="마감시간 설정 모달">
-            <>
-              <S.ModalHeader>
-                <h3>마감 시간 선택</h3>
-                <S.CloseButton onClick={closeModal} aria-label="마감시간 설정 모달 끄기">
-                  X
-                </S.CloseButton>
-              </S.ModalHeader>
-              <S.ModalBody>
-                <S.Description aria-label={POST_DEADLINE_POLICY.DEFAULT} tabIndex={0}>
-                  {POST_DEADLINE_POLICY.DEFAULT}
-                </S.Description>
-                <TimePickerOptionList time={userSelectTime} setTime={setUserSelectTime} />
-                <S.ResetButtonWrapper>
-                  <SquareButton
-                    aria-label="마감시간 초기화"
-                    onClick={handleResetButton}
-                    type="button"
-                    theme="blank"
-                  >
-                    초기화
-                  </SquareButton>
-                </S.ResetButtonWrapper>
-              </S.ModalBody>
-            </>
+          <Modal
+            size="sm"
+            primaryButton={primaryButton}
+            secondaryButton={secondaryButton}
+            aria-label="마감시간 설정 모달"
+            handleModalClose={handleModalClose}
+            title="마감 시간 선택"
+          >
+            <S.ModalBody>
+              <S.Description aria-label={POST_DEADLINE_POLICY.DEFAULT} tabIndex={0}>
+                {POST_DEADLINE_POLICY.DEFAULT}
+              </S.Description>
+              <TimePickerOptionList time={userSelectTime} setTime={setUserSelectTime} />
+            </S.ModalBody>
           </Modal>
         )}
       </form>

frontend/src/components/PostForm/style.ts

@@ -151,6 +151,20 @@ export const OptionListWrapper = styled.div`
   }
 `;
 
+export const ModalBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  gap: 7px;
+
+  min-height: 100%;
+
+  font: var(--text-body);
+
+  box-sizing: border-box;
+`;
+
 export const Deadline = styled.div`
   font: var(--text-body);
   font-weight: bold;
@@ -227,19 +241,6 @@ export const CloseButton = styled.button`
   cursor: pointer;
 `;
 
-export const ModalBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: start;
-  align-items: center;
-  gap: 10px;
-
-  padding: 10px 0;
-
-  font: var(--text-caption);
-`;
-
 export const ResetButtonWrapper = styled.div`
   display: flex;
 

frontend/src/components/ReportModal/ReportModal.stories.tsx

@@ -12,6 +12,7 @@ type Story = StoryObj<typeof ReportModal>;
 export const Nickname: Story = {
   render: () => (
     <ReportModal
+      handleModalClose={() => {}}
       reportType="NICKNAME"
       handleCancelClick={() => {}}
       handleReportClick={() => {}}
@@ -23,6 +24,7 @@ export const Nickname: Story = {
 export const Comment: Story = {
   render: () => (
     <ReportModal
+      handleModalClose={() => {}}
       reportType="COMMENT"
       handleCancelClick={() => {}}
       handleReportClick={() => {}}
@@ -34,6 +36,7 @@ export const Comment: Story = {
 export const Post: Story = {
   render: () => (
     <ReportModal
+      handleModalClose={() => {}}
       reportType="POST"
       handleCancelClick={() => {}}
       handleReportClick={() => {}}

frontend/src/components/ReportModal/index.tsx

@@ -2,19 +2,21 @@ import { ReportMessage, ReportType } from '@type/report';
 
 import { useSelect } from '@hooks';
 
+import Modal from '@components/common/Modal';
 import Select from '@components/common/Select';
-import TwoButtonModal from '@components/common/TwoButtonModal';
 
 import { REPORT_TYPE } from './constants';
-
+import * as S from './style';
 interface UserReportModalProps {
+  handleModalClose: () => void;
   reportType: ReportType;
   handleCancelClick: () => void;
   handleReportClick: (reason: ReportMessage) => void;
   isReportLoading: boolean;
 }
 
 export default function ReportModal({
+  handleModalClose,
   reportType,
   handleCancelClick,
   handleReportClick,
@@ -30,8 +32,9 @@ export default function ReportModal({
   };
 
   return (
-    <TwoButtonModal
+    <Modal
       title={name}
+      size="sm"
       primaryButton={{
         text: '신고',
         handleClick: handlePrimaryButtonClick,
@@ -40,13 +43,16 @@ export default function ReportModal({
         text: '취소',
         handleClick: handleCancelClick,
       }}
+      handleModalClose={handleModalClose}
     >
-      <Select
-        aria-label={`${name} 방법 선택`}
-        optionList={reportMessageList}
-        handleOptionChange={handleOptionChange}
-        selectedOption={reportMessageList[selectedOption]}
-      />
-    </TwoButtonModal>
+      <S.ModalBody>
+        <Select
+          aria-label={`${name} 방법 선택`}
+          optionList={reportMessageList}
+          handleOptionChange={handleOptionChange}
+          selectedOption={reportMessageList[selectedOption]}
+        />
+      </S.ModalBody>
+    </Modal>
   );
 }

frontend/src/components/ReportModal/style.ts

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const ModalBody = styled.p`
+  padding: 20px;
+`;

frontend/src/components/comment/CommentList/CommentItem/index.tsx

@@ -155,6 +155,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
       )}
       {action === COMMENT_ACTION.USER_REPORT && (
         <ReportModal
+          handleModalClose={handleCancelClick}
           reportType="NICKNAME"
           handleReportClick={handleNicknameReportClick}
           handleCancelClick={handleCancelClick}
@@ -163,6 +164,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
       )}
       {action === COMMENT_ACTION.COMMENT_REPORT && (
         <ReportModal
+          handleModalClose={handleCancelClick}
           reportType="COMMENT"
           handleReportClick={handleCommentReportClick}
           handleCancelClick={handleCancelClick}

frontend/src/components/common/Accordion/Accordion.stories.tsx

@@ -38,7 +38,20 @@ export const NicknameChange: Story = {
 };
 
 export const DeleteUserAccount = () => {
-  const { isOpen, openComponent, closeComponent } = useToggle();
+  const { isOpen, openComponent, closeComponent: closeModal } = useToggle();
+
+  const primaryButton = {
+    text: '탈퇴',
+    handleClick: () => {
+      alert('회원 탈퇴가 완료되었습니다.');
+    },
+  };
+
+  const secondaryButton = {
+    text: '취소',
+    handleClick: closeModal,
+  };
+
   return (
     <Accordion title="회원 탈퇴">
       <ButtonWrapper>
@@ -47,20 +60,17 @@ export const DeleteUserAccount = () => {
         </SquareButton>
       </ButtonWrapper>
       {isOpen && (
-        <Modal size="sm" onModalClose={closeComponent}>
+        <Modal
+          size="sm"
+          title="정말 탈퇴하시겠어요?"
+          primaryButton={primaryButton}
+          secondaryButton={secondaryButton}
+          handleModalClose={secondaryButton.handleClick}
+        >
           <ModalBody>
-            <ModalTitle>정말 탈퇴하시겠어요?</ModalTitle>
             <ModalDescription>
               탈퇴 버튼 클릭 시, <br></br>계정은 삭제되며 복구되지 않아요.
             </ModalDescription>
-            <ButtonListWrapper>
-              <SquareButton aria-label="회원 탈퇴" theme="fill">
-                탈퇴
-              </SquareButton>
-              <SquareButton onClick={closeComponent} aria-label="회원 탈퇴" theme="blank">
-                취소
-              </SquareButton>
-            </ButtonListWrapper>
           </ModalBody>
         </Modal>
       )}
@@ -92,21 +102,6 @@ const ModalBody = styled.div`
   font: var(--text-caption);
 `;
 
-const ModalTitle = styled.div`
-  font: var(--text-title);
-`;
-
 const ModalDescription = styled.div`
   font: var(--text-body);
 `;
-
-const ButtonListWrapper = styled.div`
-  display: flex;
-  justify-content: space-around;
-  gap: 20px;
-
-  width: 90%;
-  height: 50px;
-
-  margin-top: 20px;
-`;

frontend/src/components/common/DeleteModal/index.tsx

@@ -1,13 +1,15 @@
-import TwoButtonModal from '../../common/TwoButtonModal';
+import { useToggle } from '@hooks';
+
+import Modal from '../Modal';
 
 import * as S from './style';
 
 export type TargetForDelete = 'MEMBERSHIP' | 'POST' | 'COMMENT';
 
 const TARGET_FOR_DELETE: Record<TargetForDelete, string> = {
-  MEMBERSHIP: '계정을',
-  POST: '게시글을',
-  COMMENT: '댓글을',
+  MEMBERSHIP: '계정',
+  POST: '게시글',
+  COMMENT: '댓글',
 };
 
 interface DeleteModalProps {
@@ -23,26 +25,33 @@ export default function DeleteModal({
   handleDeleteClick,
   isDeleting,
 }: DeleteModalProps) {
+  const { isOpen: isModalOpen, closeComponent: closeModal } = useToggle(true);
+
   const handlePrimaryButtonClick = () => {
     !isDeleting && handleDeleteClick();
     handleCancelClick();
   };
 
   return (
-    <TwoButtonModal
-      title={`${TARGET_FOR_DELETE[target]} 삭제하기`}
-      primaryButton={{
-        text: '삭제',
-        handleClick: handlePrimaryButtonClick,
-      }}
-      secondaryButton={{
-        text: '취소',
-        handleClick: handleCancelClick,
-      }}
-    >
-      <S.Description
-        tabIndex={0}
-      >{`${TARGET_FOR_DELETE[target]} 삭제하시겠습니까?\n${TARGET_FOR_DELETE[target]} 삭제하면 취소할 수 없습니다.`}</S.Description>
-    </TwoButtonModal>
+    <>
+      {isModalOpen && (
+        <Modal
+          handleModalClose={closeModal}
+          title={`${TARGET_FOR_DELETE[target]} 삭제`}
+          primaryButton={{
+            text: '삭제',
+            handleClick: handlePrimaryButtonClick,
+          }}
+          secondaryButton={{
+            text: '취소',
+            handleClick: handleCancelClick,
+          }}
+        >
+          <S.Description
+            tabIndex={0}
+          >{`${TARGET_FOR_DELETE[target]}을 삭제하시겠습니까?\n삭제 버튼 클릭 시 취소할 수 없습니다.`}</S.Description>
+        </Modal>
+      )}
+    </>
   );
 }

frontend/src/components/common/DeleteModal/style.ts

@@ -1,14 +1,10 @@
 import { styled } from 'styled-components';
 
-import { theme } from '@styles/theme';
-
 export const Description = styled.p`
+  padding: 0 20px;
+
   color: #67727e;
 
-  font: var(--text-caption);
+  font-size: 14px;
   white-space: pre-wrap;
-
-  @media (min-width: ${theme.breakpoint.sm}) {
-    font: var(--text-body);
-  }
 `;