TwoButtonModal을 기존의 Modal 컴포넌트로 대체 (#721)

* refactor: (#686) Modal 컴포넌트 props 수정 title, primaryButton, secondaryButton 추가 onModalClose 삭제 * refactor: (#686) TwoButtonModal을 Modal 컴포넌트로 대체 * design: (#686) Modal 스타일링 수정, size를 optional props로 수정 * design: (#686) DeleteModal, ReportModal 스타일링 수정, size를 optional props로 수정 * refactor: (#686) 모달의 div 태그를 dialog 태그로 변경 * refactor: (#686) Modal에 handleModalClose props 추가 * refactor: (#686) Modal의 children 이 없는 경우 반영 * chore: (#686) 충돌 해결 중 삭제된 코드 복구, size가 있는 경우 width 값을 size로 고정 * design: (#686) 회원 탈퇴 모달 스타일링 수정 * design: (#686) margin 인라인으로 작성, padding 제거
woowacourse-teams · Oct 19, 2023 · abf6674 · abf6674
1 parent be76414
commit abf6674
Show file tree

Hide file tree

Showing 19 changed files with 335 additions and 329 deletions.
diff --git a/frontend/src/components/PostForm/index.tsx b/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>

diff --git a/frontend/src/components/PostForm/style.ts b/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;
 

diff --git a/frontend/src/components/ReportModal/ReportModal.stories.tsx b/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={() => {}}

diff --git a/frontend/src/components/ReportModal/index.tsx b/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,
@@ -32,8 +34,9 @@ export default function ReportModal({
  };
 
  return (
- <TwoButtonModal
+ <Modal
  title={name}
+ size="sm"
  primaryButton={{
  text: '신고',
  handleClick: handlePrimaryButtonClick,
@@ -42,13 +45,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>
  );
 }
diff --git a/frontend/src/components/ReportModal/style.ts b/frontend/src/components/ReportModal/style.ts
@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const ModalBody = styled.p`
+ padding: 20px;
+`;
diff --git a/frontend/src/components/comment/CommentList/CommentItem/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/index.tsx
@@ -118,6 +118,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
  )}
  {action === COMMENT_ACTION.USER_REPORT && (
  <ReportModal
+ handleModalClose={handleCancelClick}
  reportType="NICKNAME"
  handleReportClick={handleNicknameReportClick}
  handleCancelClick={handleCancelClick}
@@ -126,6 +127,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
  )}
  {action === COMMENT_ACTION.COMMENT_REPORT && (
  <ReportModal
+ handleModalClose={handleCancelClick}
  reportType="COMMENT"
  handleReportClick={handleCommentReportClick}
  handleCancelClick={handleCancelClick}

diff --git a/frontend/src/components/common/Accordion/Accordion.stories.tsx b/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;
-`;
diff --git a/frontend/src/components/common/DeleteModal/index.tsx b/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>
+ )}
+ </>
  );
 }
diff --git a/frontend/src/components/common/DeleteModal/style.ts b/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);
- }
 `;