From 0a812a743d3d5ee3e846eaf929400196d8571909 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Wed, 21 Aug 2024 19:38:03 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor(Modal):=20Modal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CategoryEditModal/CategoryEditModal.tsx | 6 +-- frontend/src/components/Modal/Modal.style.ts | 37 ++++++++++--------- frontend/src/components/Modal/Modal.tsx | 37 ++++++++++--------- 3 files changed, 41 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx b/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx index cc22b94d0..aea130713 100644 --- a/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx +++ b/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Heading, Text, Modal, Input, Flex, Button } from '@/components'; +import { Text, Modal, Input, Flex, Button } from '@/components'; import { useCategoryNameValidation } from '@/hooks/category'; import { useCategoryDeleteMutation, useCategoryEditMutation, useCategoryUploadMutation } from '@/queries/category'; import type { Category, CustomError } from '@/types'; @@ -116,9 +116,7 @@ const CategoryEditModal = ({ isOpen, toggleModal, categories, handleCancelEdit } return ( - - 카테고리 편집 - + {'카테고리 편집'} ` +export const ModalContainer = styled.div<{ size: ModalSize }>` position: relative; z-index: 202; + display: flex; + flex-direction: column; + gap: 1rem; + + max-height: 90vh; padding: 1.5rem; background-color: white; @@ -61,9 +71,7 @@ export const Base = styled.div<{ size: ModalSize }>` @media (min-width: 48rem) { position: fixed; - padding: 1.5rem; - background-color: white; - + width: 90%; ${({ size }) => size && sizes[size]}; } @@ -74,7 +82,6 @@ export const Base = styled.div<{ size: ModalSize }>` overflow-y: auto; width: 100%; - max-height: 90vh; border-radius: 1.5rem 1.5rem 0 0; } @@ -82,22 +89,18 @@ export const Base = styled.div<{ size: ModalSize }>` const sizes = { xsmall: css` - width: 90%; max-width: 17.5rem; min-height: 11.25rem; `, small: css` - width: 90%; max-width: 25rem; min-height: 18.75rem; `, medium: css` - width: 90%; max-width: 37.5rem; min-height: 28.125rem; `, large: css` - width: 90%; max-width: 50rem; min-height: 37.5rem; `, diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx index 967d34360..04519c5c7 100644 --- a/frontend/src/components/Modal/Modal.tsx +++ b/frontend/src/components/Modal/Modal.tsx @@ -1,6 +1,8 @@ -import { HTMLAttributes, PropsWithChildren } from 'react'; +import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; import { createPortal } from 'react-dom'; +import { theme } from '../../style/theme'; +import Heading from '../Heading/Heading'; import * as S from './Modal.style'; export type ModalSize = 'xsmall' | 'small' | 'medium' | 'large'; @@ -11,43 +13,42 @@ export interface BaseProps extends HTMLAttributes { size?: ModalSize; } -const Base = ({ - isOpen, - toggleModal, - size = 'small', - - children, - ...rests -}: PropsWithChildren) => { +const Base = ({ isOpen, toggleModal, size = 'small', children, ...props }: PropsWithChildren) => { if (!isOpen) { return null; } return createPortal( - + - + {children} - - , + + , document.body, ); }; -const Header = ({ children, ...props }: PropsWithChildren>) => ( - {children} +const Title = ({ children }: { children: ReactNode }) => ( + + {typeof children === 'string' ? ( + {children} + ) : ( + children + )} + ); const Body = ({ children, ...props }: PropsWithChildren>) => ( - {children} + {children} ); const Footer = ({ children, ...props }: PropsWithChildren>) => ( - {children} + {children} ); const Modal = Object.assign(Base, { - Header, + Title, Body, Footer, }); From e9a02406318d232c7c6d49c2e0434c44c4a3d9c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Wed, 21 Aug 2024 19:50:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor(Modal):=20=EC=84=9C=EB=B8=8C?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(Title=20>=20Header)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Modal/Modal.style.ts | 2 +- frontend/src/components/Modal/Modal.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Modal/Modal.style.ts b/frontend/src/components/Modal/Modal.style.ts index d2492413f..a9558ada4 100644 --- a/frontend/src/components/Modal/Modal.style.ts +++ b/frontend/src/components/Modal/Modal.style.ts @@ -33,7 +33,7 @@ export const Backdrop = styled.div` background-color: rgba(0, 0, 0, 0.3); `; -export const TitleWrapper = styled.div` +export const HeaderWrapper = styled.div` display: flex; flex-shrink: 0; align-items: center; diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx index 04519c5c7..6d6f74f53 100644 --- a/frontend/src/components/Modal/Modal.tsx +++ b/frontend/src/components/Modal/Modal.tsx @@ -29,14 +29,14 @@ const Base = ({ isOpen, toggleModal, size = 'small', children, ...props }: Props ); }; -const Title = ({ children }: { children: ReactNode }) => ( - +const Header = ({ children }: { children: ReactNode }) => ( + {typeof children === 'string' ? ( {children} ) : ( children )} - + ); const Body = ({ children, ...props }: PropsWithChildren>) => ( @@ -48,7 +48,7 @@ const Footer = ({ children, ...props }: PropsWithChildren Date: Wed, 21 Aug 2024 19:56:57 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor(Modal):=20=EC=84=9C=EB=B8=8C?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=98=EC=98=81=20(Title=20>=20Header)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/CategoryEditModal/CategoryEditModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx b/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx index aea130713..d4418a6d6 100644 --- a/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx +++ b/frontend/src/components/CategoryEditModal/CategoryEditModal.tsx @@ -116,7 +116,7 @@ const CategoryEditModal = ({ isOpen, toggleModal, categories, handleCancelEdit } return ( - {'카테고리 편집'} + {'카테고리 편집'}