From 179048fb4add360879319f2d401f4a6987892768 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:49:15 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feature:=20ExitIcon=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ExitIcon.tsx | 97 +++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 src/assets/icons/ExitIcon.tsx diff --git a/src/assets/icons/ExitIcon.tsx b/src/assets/icons/ExitIcon.tsx new file mode 100644 index 00000000..6cae9ab6 --- /dev/null +++ b/src/assets/icons/ExitIcon.tsx @@ -0,0 +1,97 @@ +import { palette } from '@/styles/palette' + +export type IconProps = { + isDarkMode?: boolean + onClick?: () => void +} + +const ExitIcon = ({ isDarkMode, onClick }: IconProps) => ( + + {isDarkMode ? ( + + + + + + + ) : ( + + + + + + + )} + +) + +export default ExitIcon From 768174f15e01fe2c0013526fca77a186d0ad5ea6 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:49:35 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feature:=20BackChevron=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/BackChevron/index.tsx | 61 +++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/common/BackChevron/index.tsx diff --git a/src/components/common/BackChevron/index.tsx b/src/components/common/BackChevron/index.tsx new file mode 100644 index 00000000..3003f205 --- /dev/null +++ b/src/components/common/BackChevron/index.tsx @@ -0,0 +1,61 @@ +import styled from '@emotion/styled' +import { BsChevronLeft } from 'react-icons/bs' + +import { palette } from '@/styles/palette' + +const StyleBackChevron = styled.div` + width: 38px; + height: 38px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ hasBackground, isDarkMode }) => + isDarkMode + ? hasBackground + ? `${palette.GRAY600}` + : 'transparent' + : hasBackground + ? `${palette.WHITE}` + : 'transparent'}; + border: ${({ hasBackground, isDarkMode }) => + isDarkMode + ? hasBackground + ? `1px solid ${palette.GRAY500}` + : `1px solid ${palette.DARK_TERTIARY}` + : hasBackground + ? `1px solid ${palette.GRAY300}` + : `1px solid ${palette.TERTIARY}`}; +` + +type BackChevronProps = { + hasBackground?: boolean + isDarkMode?: boolean + prevClick?: () => void +} + +/** + * @param hasBackground - (Optional) 배경색 여부 + * @param isDarkMode - (Optional) 다크모드 여부 + */ + +const BackChevron = ({ hasBackground, isDarkMode, prevClick }: BackChevronProps) => { + return ( + + + + ) +} + +export default BackChevron From 74ee69e8d73d7b144e4ffec811518ffd230aacd0 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:49:47 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feature:=20PageHeader=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/PageHeader/index.tsx | 79 ++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/components/common/PageHeader/index.tsx diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx new file mode 100644 index 00000000..edffad0e --- /dev/null +++ b/src/components/common/PageHeader/index.tsx @@ -0,0 +1,79 @@ +import styled from '@emotion/styled' + +import { Text } from '@/components/common/Text' +import { palette } from '@/styles/palette' + +const StylePageHeader = styled.div<{ + isDarkMode?: boolean + hasBackground?: boolean +}>` + width: 100%; + height: 72px; + padding: 0 18px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 20px 20px 0 0; + border-bottom: 1px solid ${({ isDarkMode }) => (isDarkMode ? palette.GRAY500 : palette.GRAY300)}; + background-color: ${({ hasBackground, isDarkMode }) => + isDarkMode + ? hasBackground + ? `${palette.DARK_BLUE}` + : 'transparent' + : hasBackground + ? `${palette.GRAY100}` + : 'transparent'}; +` + +const StyleIcon = styled.div` + width: 38px; + height: 38px; + display: flex; + justify-content: center; + align-items: center; +` + +type PageHeaderProps = { + title: string + leftIcon?: React.ReactNode + rightIcon?: React.ReactNode + isDarkMode?: boolean + hasBackground?: boolean + onClick?: () => void +} + +/** + * @param title - 타이틀 + * @param leftIcon - (Optional) 왼쪽 아이콘 + * @param rightIcon - (Optional) 오른쪽 아이콘 + * @param isDarkMode - (Optional) 다크모드 여부 + * @param hasBackground - (Optional) 배경색 여부 + * @param onClick - (Optional) 클릭 이벤트 + */ + +const PageHeader = ({ leftIcon, rightIcon, title, isDarkMode, hasBackground }: PageHeaderProps) => { + return ( + + {leftIcon} + + {title} + + {rightIcon} + + ) +} + +export default PageHeader From 64aca9986d7c8752c099f522f8de056f97d5e461 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:54:09 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ExitIcon.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/assets/icons/ExitIcon.tsx b/src/assets/icons/ExitIcon.tsx index 6cae9ab6..0b09e1de 100644 --- a/src/assets/icons/ExitIcon.tsx +++ b/src/assets/icons/ExitIcon.tsx @@ -1,5 +1,3 @@ -import { palette } from '@/styles/palette' - export type IconProps = { isDarkMode?: boolean onClick?: () => void From 497e863b02a8141e17bd34bf7844258b1c92ab46 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:58:26 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20tsdoc=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/BackChevron/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/BackChevron/index.tsx b/src/components/common/BackChevron/index.tsx index 3003f205..0e9f69cc 100644 --- a/src/components/common/BackChevron/index.tsx +++ b/src/components/common/BackChevron/index.tsx @@ -37,6 +37,7 @@ type BackChevronProps = { /** * @param hasBackground - (Optional) 배경색 여부 * @param isDarkMode - (Optional) 다크모드 여부 + * @param prevClick - (Optional) 뒤로가기 클릭 이벤트 */ const BackChevron = ({ hasBackground, isDarkMode, prevClick }: BackChevronProps) => { From 2aa4b91fff3017d0bf3f654baa8ee20e5bf52ba0 Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Tue, 31 Oct 2023 16:00:44 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20tsdoc=20=EC=B6=94=EA=B0=80=20+?= =?UTF-8?q?=20exitClick=EC=9C=BC=EB=A1=9C=20props=EB=AA=85=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 --- src/assets/icons/ExitIcon.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/assets/icons/ExitIcon.tsx b/src/assets/icons/ExitIcon.tsx index 0b09e1de..2979315a 100644 --- a/src/assets/icons/ExitIcon.tsx +++ b/src/assets/icons/ExitIcon.tsx @@ -1,16 +1,21 @@ export type IconProps = { isDarkMode?: boolean - onClick?: () => void + exitClick?: () => void } -const ExitIcon = ({ isDarkMode, onClick }: IconProps) => ( +/** + * @param isDarkMode - (Optional) 다크모드 여부 + * @param exitClick - (Optional) 나가기 클릭 이벤트 + */ + +const ExitIcon = ({ isDarkMode, exitClick }: IconProps) => ( {isDarkMode ? ( Date: Tue, 31 Oct 2023 16:05:12 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20PageHeader=20border-bottom=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/PageHeader/index.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx index edffad0e..dd0fece2 100644 --- a/src/components/common/PageHeader/index.tsx +++ b/src/components/common/PageHeader/index.tsx @@ -14,8 +14,16 @@ const StylePageHeader = styled.div<{ justify-content: space-between; align-items: center; border-radius: 20px 20px 0 0; - border-bottom: 1px solid ${({ isDarkMode }) => (isDarkMode ? palette.GRAY500 : palette.GRAY300)}; - background-color: ${({ hasBackground, isDarkMode }) => + border-bottom: 1px solid + ${({ isDarkMode, hasBackground }) => + isDarkMode + ? hasBackground + ? palette.GRAY500 + : 'none' + : hasBackground + ? palette.GRAY300 + : 'none'}; + background-color: ${({ isDarkMode, hasBackground }) => isDarkMode ? hasBackground ? `${palette.DARK_BLUE}`