From bf001e4dc762ed6e54b6fe8df03cc50c17bb90c8 Mon Sep 17 00:00:00 2001 From: chysis Date: Wed, 31 Jul 2024 18:08:10 +0900 Subject: [PATCH 01/13] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EA=B0=80=20children=EA=B3=BC=20style=EC=9D=84=20=EB=B0=9B?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Button/index.tsx | 12 ++++-------- frontend/src/components/common/Button/styles.ts | 10 +++++++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/common/Button/index.tsx b/frontend/src/components/common/Button/index.tsx index c15ec2c1f..93998e803 100644 --- a/frontend/src/components/common/Button/index.tsx +++ b/frontend/src/components/common/Button/index.tsx @@ -1,19 +1,15 @@ -import { ButtonType } from '@/types'; +import { ButtonType, EssentialPropsWithChildren } from '@/types'; import * as S from './styles'; interface ButtonProps extends React.ButtonHTMLAttributes { buttonType: ButtonType; - text: string; - image?: string; - imageDescription?: string; } -const Button = ({ buttonType, text, image, imageDescription, onClick }: ButtonProps) => { +const Button = ({ buttonType, style, children, onClick }: EssentialPropsWithChildren) => { return ( - - {image && } - {text} + + {children} ); }; diff --git a/frontend/src/components/common/Button/styles.ts b/frontend/src/components/common/Button/styles.ts index 462483c1d..640c7219f 100644 --- a/frontend/src/components/common/Button/styles.ts +++ b/frontend/src/components/common/Button/styles.ts @@ -46,18 +46,22 @@ const getButtonStyle = (buttonType: ButtonType, theme: Theme) => { } }; -export const Button = styled.button<{ buttonType: ButtonType }>` +interface ButtonProps { + buttonType: ButtonType; + $style?: React.CSSProperties; +} + +export const Button = styled.button` display: flex; align-items: center; justify-content: center; - width: 10rem; - height: 4rem; padding: 1rem 2rem; border: 0.1rem solid ${({ theme }) => theme.colors.primary}; border-radius: 0.8rem; + ${({ $style }) => $style && { ...$style }}; ${({ buttonType, theme }) => getButtonStyle(buttonType, theme)}; `; From ff6c62f0ea440d862f1e1c4a623c1220e3fdbd7f Mon Sep 17 00:00:00 2001 From: chysis Date: Wed, 31 Jul 2024 23:54:18 +0900 Subject: [PATCH 02/13] =?UTF-8?q?chore:=20error=20alert=20modal=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=A0=20primary=20=EC=83=89?= =?UTF-8?q?=EC=83=81=EC=9D=98=20=EA=B2=BD=EA=B3=A0=20=EC=82=BC=EA=B0=81?= =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/alertTrianglePrimary.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/alertTrianglePrimary.svg diff --git a/frontend/src/assets/alertTrianglePrimary.svg b/frontend/src/assets/alertTrianglePrimary.svg new file mode 100644 index 000000000..260126a78 --- /dev/null +++ b/frontend/src/assets/alertTrianglePrimary.svg @@ -0,0 +1,3 @@ + + + From 271fc9e99c3af1ab1967d8f0b29cc8db4b7fdbba Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 00:08:11 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20ErrorAlertModal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modals/ErrorAlertModal/index.tsx | 42 +++++++++++++++++++ .../common/modals/ErrorAlertModal/styles.ts | 34 +++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 frontend/src/components/common/modals/ErrorAlertModal/index.tsx create mode 100644 frontend/src/components/common/modals/ErrorAlertModal/styles.ts diff --git a/frontend/src/components/common/modals/ErrorAlertModal/index.tsx b/frontend/src/components/common/modals/ErrorAlertModal/index.tsx new file mode 100644 index 000000000..1570ec7d1 --- /dev/null +++ b/frontend/src/components/common/modals/ErrorAlertModal/index.tsx @@ -0,0 +1,42 @@ +import AlertTrianglePrimaryIcon from '@/assets/alertTrianglePrimary.svg'; +import { ButtonType } from '@/types'; + +import Button from '../../Button'; +import ModalBackground from '../ModalBackground'; +import ModalPortal from '../ModalPortal'; + +import * as S from './styles'; + +interface CloseButton { + type: ButtonType; + handleClick: () => void; +} + +interface ErrorAlertModalProps { + closeButton: CloseButton; + text: string; +} + +const ErrorAlertModal = ({ closeButton, text }: ErrorAlertModalProps) => { + return ( + + + + + + {text} + + + + + + ); +}; + +export default ErrorAlertModal; diff --git a/frontend/src/components/common/modals/ErrorAlertModal/styles.ts b/frontend/src/components/common/modals/ErrorAlertModal/styles.ts new file mode 100644 index 000000000..833da03d8 --- /dev/null +++ b/frontend/src/components/common/modals/ErrorAlertModal/styles.ts @@ -0,0 +1,34 @@ +import styled from '@emotion/styled'; + +export const ErrorAlertModalContainer = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + gap: 3.2rem; + align-items: center; + justify-content: space-between; + + max-width: 40vw; + max-height: 80vh; + padding: 3.2rem; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: ${({ theme }) => theme.borderRadius.basic}; +`; + +export const Contents = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const AlertTriangle = styled.img` + width: 6rem; + height: 6rem; +`; + +export const AlertMessage = styled.p``; From 25017752d623bcaf99e64530c6bc5203835f9da9 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 00:08:30 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20AlertModal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modals/AlertModal/index.tsx | 37 +++++++++++++++++++ .../common/modals/AlertModal/styles.ts | 24 ++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 frontend/src/components/common/modals/AlertModal/index.tsx create mode 100644 frontend/src/components/common/modals/AlertModal/styles.ts diff --git a/frontend/src/components/common/modals/AlertModal/index.tsx b/frontend/src/components/common/modals/AlertModal/index.tsx new file mode 100644 index 000000000..9af173580 --- /dev/null +++ b/frontend/src/components/common/modals/AlertModal/index.tsx @@ -0,0 +1,37 @@ +import { ButtonType, EssentialPropsWithChildren } from '@/types'; + +import Button from '../../Button'; +import ModalBackground from '../ModalBackground'; +import ModalPortal from '../ModalPortal'; + +import * as S from './styles'; + +interface CloseButton { + type: ButtonType; + handleClick: () => void; +} + +interface AlertModalProps { + closeButton: CloseButton; +} + +const AlertModal = ({ closeButton, children }: EssentialPropsWithChildren) => { + return ( + + + + {children} + + + + + ); +}; + +export default AlertModal; diff --git a/frontend/src/components/common/modals/AlertModal/styles.ts b/frontend/src/components/common/modals/AlertModal/styles.ts new file mode 100644 index 000000000..f65e06b18 --- /dev/null +++ b/frontend/src/components/common/modals/AlertModal/styles.ts @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; + +export const AlertModalContainer = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + gap: 3.2rem; + align-items: center; + justify-content: space-between; + + max-height: 80vh; + padding: 3.2rem; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: ${({ theme }) => theme.borderRadius.basic}; +`; + +export const Contents = styled.div` + display: flex; +`; From c30fb62d7f1319cdb21709c0f998998cd2a6acf6 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 00:09:10 +0900 Subject: [PATCH 05/13] =?UTF-8?q?chore:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20Bu?= =?UTF-8?q?tton=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ReviewWriting/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/ReviewWriting/index.tsx b/frontend/src/pages/ReviewWriting/index.tsx index 382dd2167..c1f107e66 100644 --- a/frontend/src/pages/ReviewWriting/index.tsx +++ b/frontend/src/pages/ReviewWriting/index.tsx @@ -129,7 +129,7 @@ const ReviewWritingPage = () => { {/* From 281d6504e61a31cd47e5c8bd5e72a61dd6e6763e Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 00:15:35 +0900 Subject: [PATCH 06/13] =?UTF-8?q?fix:=20AlertModal=EC=9D=B4=20Esc=20?= =?UTF-8?q?=EB=98=90=EB=8A=94=20background=EC=9D=98=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8B=AB=ED=9E=88=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/modals/AlertModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/modals/AlertModal/index.tsx b/frontend/src/components/common/modals/AlertModal/index.tsx index 9af173580..29ca71ef5 100644 --- a/frontend/src/components/common/modals/AlertModal/index.tsx +++ b/frontend/src/components/common/modals/AlertModal/index.tsx @@ -18,7 +18,7 @@ interface AlertModalProps { const AlertModal = ({ closeButton, children }: EssentialPropsWithChildren) => { return ( - + {}}> {children} + diff --git a/frontend/src/types/styles.ts b/frontend/src/types/styles.ts index 14b6ee60d..b2924777a 100644 --- a/frontend/src/types/styles.ts +++ b/frontend/src/types/styles.ts @@ -1 +1 @@ -export type ButtonType = 'primary' | 'secondary' | 'disabled'; +export type ButtonStyleType = 'primary' | 'secondary' | 'disabled'; From c20d25dff9000085827e9ab320fab3cf611482c6 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 14:39:48 +0900 Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20background=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EB=98=90=EB=8A=94=20Esc=20=ED=82=A4=EB=A5=BC=20?= =?UTF-8?q?=ED=86=B5=ED=95=B4=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20=EB=8B=AB?= =?UTF-8?q?=EB=8A=94=20=EA=B2=83=EC=9D=84=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modals/ModalBackground/index.tsx | 11 ++++++++--- frontend/src/hooks/useModalClose.ts | 14 ++++++++++---- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/common/modals/ModalBackground/index.tsx b/frontend/src/components/common/modals/ModalBackground/index.tsx index 399859995..0ea38d300 100644 --- a/frontend/src/components/common/modals/ModalBackground/index.tsx +++ b/frontend/src/components/common/modals/ModalBackground/index.tsx @@ -5,12 +5,17 @@ import { useModalClose } from '@/hooks'; import * as S from './styles'; interface ModalBackgroundProps { - closeModal: () => void; + closeModalOnBackground: () => void; + closeModalOnEsc: () => void; } -const ModalBackground: React.FC> = ({ children, closeModal }) => { +const ModalBackground: React.FC> = ({ + children, + closeModalOnBackground, + closeModalOnEsc, +}) => { const modalBackgroundRef = useRef(null); - useModalClose(closeModal, modalBackgroundRef); + useModalClose({ closeModalOnBackground, closeModalOnEsc, modalBackgroundRef }); return {children}; }; diff --git a/frontend/src/hooks/useModalClose.ts b/frontend/src/hooks/useModalClose.ts index 96b465531..b779c8c61 100644 --- a/frontend/src/hooks/useModalClose.ts +++ b/frontend/src/hooks/useModalClose.ts @@ -1,6 +1,12 @@ import { useEffect, RefObject } from 'react'; -const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject) => { +interface UseModalCloseProps { + closeModalOnBackground: () => void; + closeModalOnEsc: () => void; + modalBackgroundRef: RefObject; +} + +const useModalClose = ({ closeModalOnBackground, closeModalOnEsc, modalBackgroundRef }: UseModalCloseProps) => { const isNodeElement = (element: EventTarget | null): element is Node => { return element instanceof Node; }; @@ -23,7 +29,7 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject { if (isNodeElement(event.target) && isModalBackground(event.target)) { - closeModal(); + closeModalOnBackground(); } }; @@ -32,7 +38,7 @@ const useModalClose = (closeModal: () => void, modalBackgroundRef: RefObject void, modalBackgroundRef: RefObject Date: Thu, 1 Aug 2024 14:40:36 +0900 Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20AlertModal=EC=9D=98=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=EB=8A=94=20=EC=A0=95=EC=B1=85?= =?UTF-8?q?=EC=9D=84=20props=EB=A1=9C=20=EC=84=A0=ED=83=9D=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modals/AlertModal/index.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/modals/AlertModal/index.tsx b/frontend/src/components/common/modals/AlertModal/index.tsx index 41c1fc4d6..55d65b7f5 100644 --- a/frontend/src/components/common/modals/AlertModal/index.tsx +++ b/frontend/src/components/common/modals/AlertModal/index.tsx @@ -9,16 +9,29 @@ import * as S from './styles'; interface CloseButton { type: ButtonStyleType; handleClick: () => void; + content: React.ReactNode; } interface AlertModalProps { closeButton: CloseButton; + isCloseOnBackground?: boolean; + isCloseOnEsc?: boolean; + handleClose?: () => void; } -const AlertModal = ({ closeButton, children }: EssentialPropsWithChildren) => { +const AlertModal = ({ + closeButton, + isCloseOnBackground = true, + isCloseOnEsc = true, + handleClose = closeButton.handleClick, + children, +}: EssentialPropsWithChildren) => { return ( - {}}> + {}} + closeModalOnEsc={isCloseOnEsc ? handleClose : () => {}} + > {children} From 2374c3768328b9d036dafb7e6850020da4bd9c2f Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 14:41:30 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20ErrorAlertModal=EC=9D=84=20Al?= =?UTF-8?q?ertModal=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=B4=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modals/ErrorAlertModal/index.tsx | 32 ++++++------------- .../common/modals/ErrorAlertModal/styles.ts | 20 ------------ 2 files changed, 10 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/common/modals/ErrorAlertModal/index.tsx b/frontend/src/components/common/modals/ErrorAlertModal/index.tsx index d543cfe5f..a81524bfc 100644 --- a/frontend/src/components/common/modals/ErrorAlertModal/index.tsx +++ b/frontend/src/components/common/modals/ErrorAlertModal/index.tsx @@ -1,41 +1,29 @@ import AlertTrianglePrimaryIcon from '@/assets/alertTrianglePrimary.svg'; import { ButtonStyleType } from '@/types'; -import Button from '../../Button'; -import ModalBackground from '../ModalBackground'; -import ModalPortal from '../ModalPortal'; +import AlertModal from '../AlertModal'; import * as S from './styles'; interface CloseButton { type: ButtonStyleType; handleClick: () => void; + content: React.ReactNode; } interface ErrorAlertModalProps { closeButton: CloseButton; - text: string; + errorText: string; } -const ErrorAlertModal = ({ closeButton, text }: ErrorAlertModalProps) => { +const ErrorAlertModal = ({ closeButton, errorText }: ErrorAlertModalProps) => { return ( - - - - - - {text} - - - - - + + + + {errorText} + + ); }; diff --git a/frontend/src/components/common/modals/ErrorAlertModal/styles.ts b/frontend/src/components/common/modals/ErrorAlertModal/styles.ts index 833da03d8..354fbeed8 100644 --- a/frontend/src/components/common/modals/ErrorAlertModal/styles.ts +++ b/frontend/src/components/common/modals/ErrorAlertModal/styles.ts @@ -1,25 +1,5 @@ import styled from '@emotion/styled'; -export const ErrorAlertModalContainer = styled.div` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - display: flex; - flex-direction: column; - gap: 3.2rem; - align-items: center; - justify-content: space-between; - - max-width: 40vw; - max-height: 80vh; - padding: 3.2rem; - - background-color: ${({ theme }) => theme.colors.white}; - border-radius: ${({ theme }) => theme.borderRadius.basic}; -`; - export const Contents = styled.div` display: flex; flex-direction: column; From c8d3867dec2d8e7f697ef4df34e941b87fdac532 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 1 Aug 2024 15:53:44 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EB=8B=AB=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EC=99=B8=EC=9D=98=20=EB=B0=A9?= =?UTF-8?q?=EB=B2=95=EC=9C=BC=EB=A1=9C=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20?= =?UTF-8?q?=EB=8B=AB=EC=9D=84=20=EC=88=98=20=EC=9E=88=EB=8A=94=EC=A7=80=20?= =?UTF-8?q?=EC=97=AC=EB=B6=80=EC=99=80=20handler=EB=A5=BC=20props=EB=A1=9C?= =?UTF-8?q?=20=EC=A0=84=EB=8B=AC=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/modals/AlertModal/index.tsx | 15 +++++---------- .../common/modals/ErrorAlertModal/index.tsx | 5 +++-- .../common/modals/ModalBackground/index.tsx | 11 +++-------- frontend/src/hooks/useModalClose.ts | 14 ++++++++------ 4 files changed, 19 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/common/modals/AlertModal/index.tsx b/frontend/src/components/common/modals/AlertModal/index.tsx index 55d65b7f5..6f9ea23fb 100644 --- a/frontend/src/components/common/modals/AlertModal/index.tsx +++ b/frontend/src/components/common/modals/AlertModal/index.tsx @@ -14,24 +14,19 @@ interface CloseButton { interface AlertModalProps { closeButton: CloseButton; - isCloseOnBackground?: boolean; - isCloseOnEsc?: boolean; - handleClose?: () => void; + isClosableOnBackground: boolean; + handleClose: (() => void) | null; } const AlertModal = ({ closeButton, - isCloseOnBackground = true, - isCloseOnEsc = true, - handleClose = closeButton.handleClick, + isClosableOnBackground, + handleClose, children, }: EssentialPropsWithChildren) => { return ( - {}} - closeModalOnEsc={isCloseOnEsc ? handleClose : () => {}} - > + {children}