Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Oct 19, 2023
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a3237c3
refactor: (#686) Modal 컴포넌트 props 수정
inyeong-kang Oct 6, 2023
4e366b7
refactor: (#686) TwoButtonModal을 Modal 컴포넌트로 대체
inyeong-kang Oct 6, 2023
7d8ecde
design: (#686) Modal 스타일링 수정, size를 optional props로 수정
inyeong-kang Oct 6, 2023
647eb7a
design: (#686) DeleteModal, ReportModal 스타일링 수정, size를 optional props…
inyeong-kang Oct 6, 2023
6e5e413
Merge branch 'dev' into refactor/#686
inyeong-kang Oct 18, 2023
8c12936
refactor: (#686) 모달의 div 태그를 dialog 태그로 변경
inyeong-kang Oct 18, 2023
72e69dc
refactor: (#686) Modal에 handleModalClose props 추가
inyeong-kang Oct 18, 2023
3edbc94
refactor: (#686) Modal의 children 이 없는 경우 반영
inyeong-kang Oct 18, 2023
cdb44d7
chore: (#686) 충돌 해결 중 삭제된 코드 복구, size가 있는 경우 width 값을 size로 고정
inyeong-kang Oct 18, 2023
1d6e46a
design: (#686) 회원 탈퇴 모달 스타일링 수정
inyeong-kang Oct 18, 2023
00c2dae
design: (#686) margin 인라인으로 작성, padding 제거
inyeong-kang Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 23 additions & 25 deletions frontend/src/components/PostForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,16 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
}
};

const primaryButton = {
text: '저장',
handleClick: closeModal,
};

const secondaryButton = {
text: '초기화',
handleClick: handleResetButton,
};

const handleInsertContentLink = () => {
addContent('[[이 괄호 안에 링크를 작성해주세요]] ');
};
Expand Down Expand Up @@ -299,31 +309,19 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
</S.RightSide>
</S.Wrapper>
{isOpen && (
<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={time} setTime={setTime} />
<S.ResetButtonWrapper>
<SquareButton
aria-label="마감시간 초기화"
onClick={handleResetButton}
type="button"
theme="blank"
>
초기화
</SquareButton>
</S.ResetButtonWrapper>
</S.ModalBody>
</>
<Modal
title="마감 시간 선택"
size="sm"
primaryButton={primaryButton}
secondaryButton={secondaryButton}
aria-label="마감시간 설정 모달"
>
<S.ModalBody>
<S.Description aria-label={POST_DEADLINE_POLICY.DEFAULT} tabIndex={0}>
{POST_DEADLINE_POLICY.DEFAULT}
</S.Description>
<TimePickerOptionList time={time} setTime={setTime} />
</S.ModalBody>
</Modal>
)}
</form>
Expand Down
27 changes: 14 additions & 13 deletions frontend/src/components/PostForm/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,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;
Expand Down Expand Up @@ -257,19 +271,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;

Expand Down
23 changes: 13 additions & 10 deletions frontend/src/components/ReportModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { 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 {
reportType: ReportType;
handleCancelClick: () => void;
Expand All @@ -30,8 +30,9 @@ export default function ReportModal({
};

return (
<TwoButtonModal
<Modal
title={name}
size="sm"
primaryButton={{
text: '신고',
handleClick: handlePrimaryButtonClick,
Expand All @@ -41,12 +42,14 @@ export default function ReportModal({
handleClick: handleCancelClick,
}}
>
<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>
);
}
5 changes: 5 additions & 0 deletions frontend/src/components/ReportModal/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { styled } from 'styled-components';

export const ModalBody = styled.p`
padding: 20px;
`;
44 changes: 19 additions & 25 deletions frontend/src/components/common/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,19 @@ export const NicknameChange: Story = {

export const DeleteUserAccount = () => {
const { isOpen, openComponent, closeComponent } = useToggle();

const primaryButton = {
text: '탈퇴',
handleClick: () => {
alert('회원 탈퇴가 완료되었습니다.');
},
};

const secondaryButton = {
text: '취소',
handleClick: closeComponent,
};

return (
<Accordion title="회원 탈퇴">
<ButtonWrapper>
Expand All @@ -47,20 +60,16 @@ export const DeleteUserAccount = () => {
</SquareButton>
</ButtonWrapper>
{isOpen && (
<Modal size="sm" onModalClose={closeComponent}>
<Modal
size="sm"
title="정말 탈퇴하시겠어요?"
primaryButton={primaryButton}
secondaryButton={secondaryButton}
>
<ModalBody>
<ModalTitle>정말 탈퇴하시겠어요?</ModalTitle>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

훨씬 깔끔해졌어요!

<ModalDescription>
탈퇴 버튼 클릭 시, <br></br>계정은 삭제되며 복구되지 않아요.
</ModalDescription>
<ButtonListWrapper>
<SquareButton aria-label="회원 탈퇴" theme="fill">
탈퇴
</SquareButton>
<SquareButton onClick={closeComponent} aria-label="회원 탈퇴" theme="blank">
취소
</SquareButton>
</ButtonListWrapper>
</ModalBody>
</Modal>
)}
Expand Down Expand Up @@ -92,21 +101,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;
`;
16 changes: 8 additions & 8 deletions frontend/src/components/common/DeleteModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import TwoButtonModal from '../../common/TwoButtonModal';
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 {
Expand All @@ -29,8 +29,8 @@ export default function DeleteModal({
};

return (
<TwoButtonModal
title={`${TARGET_FOR_DELETE[target]} 삭제하기`}
<Modal
title={`${TARGET_FOR_DELETE[target]} 삭제`}
primaryButton={{
text: '삭제',
handleClick: handlePrimaryButtonClick,
Expand All @@ -42,7 +42,7 @@ export default function DeleteModal({
>
<S.Description
tabIndex={0}
>{`${TARGET_FOR_DELETE[target]} 삭제하시겠습니까?\n${TARGET_FOR_DELETE[target]} 삭제하면 취소할 수 없습니다.`}</S.Description>
</TwoButtonModal>
>{`${TARGET_FOR_DELETE[target]} 삭제하시겠습니까?\n삭제 버튼 클릭 시 취소할 수 없습니다.`}</S.Description>
</Modal>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 이렇게 되면 계정 삭제하시겠습니까? 이렇게 나오나요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 맞습니다~

);
}
10 changes: 3 additions & 7 deletions frontend/src/components/common/DeleteModal/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--text-caption을 바꾸신 이유가 궁금해요

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--text-caption: 400 1.6rem/2rem san-serif; 에서 font-size 가 원하는 크기보다는 살짝 커서 14px 로 수정했어요..!

white-space: pre-wrap;

@media (min-width: ${theme.breakpoint.sm}) {
font: var(--text-body);
}
`;
Loading
Loading