From 29c238f17df3f25065daf8ef200e66554d0a18d8 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 15:10:24 +0900 Subject: [PATCH 1/7] =?UTF-8?q?style:=20Icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/calendar-minus-01.svg | 5 +++++ src/assets/svg/clock.svg | 5 +++++ src/assets/svg/index.ts | 9 +++++++++ src/assets/svg/line164.svg | 3 +++ src/assets/svg/x-circle.svg | 10 ++++++++++ 5 files changed, 32 insertions(+) create mode 100644 src/assets/svg/calendar-minus-01.svg create mode 100644 src/assets/svg/clock.svg create mode 100644 src/assets/svg/line164.svg create mode 100644 src/assets/svg/x-circle.svg diff --git a/src/assets/svg/calendar-minus-01.svg b/src/assets/svg/calendar-minus-01.svg new file mode 100644 index 00000000..83d2b236 --- /dev/null +++ b/src/assets/svg/calendar-minus-01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/clock.svg b/src/assets/svg/clock.svg new file mode 100644 index 00000000..58dfc083 --- /dev/null +++ b/src/assets/svg/clock.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 1e23873a..63d0d3bc 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -5,9 +5,18 @@ import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import Icn_calander from '../../assets/svg/calendar-minus-01.svg?react'; +import Icn_date_clock from '../../assets/svg/clock.svg?react'; +import Icn_line from '../../assets/svg/line164.svg?react'; +import Icn_xCricle from '../../assets/svg/x-circle.svg?react'; + const Icons = { Icn_clock, Icn_arrow_narrow_right, + Icn_calander, + Icn_date_clock, + Icn_line, + Icn_xCricle, Navbar: { Icn_nav_calendar, Icn_nav_dashboard, diff --git a/src/assets/svg/line164.svg b/src/assets/svg/line164.svg new file mode 100644 index 00000000..6dafb3d3 --- /dev/null +++ b/src/assets/svg/line164.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/x-circle.svg b/src/assets/svg/x-circle.svg new file mode 100644 index 00000000..417c9860 --- /dev/null +++ b/src/assets/svg/x-circle.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 9be9fe168b0f7518372da27c728d4c7eb817fb76 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 15:12:42 +0900 Subject: [PATCH 2/7] =?UTF-8?q?style:=20theme=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index c6dbc4d7..f1aa3199 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -29,6 +29,15 @@ const palette = { GREY_04: '#626273', GREY_05: '#464656', GREY_06: '#34343C', + + // 지원 임시색상 + grey3: '#E9E9EE', + grey4: '#C6C6D0', + grey5: '#9090A0', + grey6: '#626273', + black: '#212121', + primary: '#3876F6', + white: '#FFFFFF', }; const fonts = { From 90c096bb8df97d9a6c076f72d05a8b3b4438b34c Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 15:47:32 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20develop=20=EB=A8=B8=EC=A7=80=20?= =?UTF-8?q?=ED=9B=84=20=EC=B6=A9=EB=8F=8C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 118 +++++++++++++++++++++++++-------------------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 8c1eeddb..61c3cd24 100644 --- a/package.json +++ b/package.json @@ -1,61 +1,61 @@ { - "name": "client", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc -b && vite build", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview", - "stylelint": "stylelint './src/**/*.{ts,tsx}' --fix", - "svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg", - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" - }, - "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", - "@svgr/cli": "^8.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-router-dom": "^6.24.1", - "vite-plugin-svgr": "^4.2.0" - }, - "devDependencies": { - "@chromatic-com/storybook": "^1.6.1", - "@storybook/addon-essentials": "^8.1.11", - "@storybook/addon-interactions": "^8.1.11", - "@storybook/addon-links": "^8.1.11", - "@storybook/addon-onboarding": "^8.1.11", - "@storybook/blocks": "^8.1.11", - "@storybook/react": "^8.1.11", - "@storybook/react-vite": "^8.1.11", - "@storybook/test": "^8.1.11", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", - "@typescript-eslint/eslint-plugin": "^7.13.1", - "@typescript-eslint/parser": "^7.13.1", - "@vitejs/plugin-react": "^4.3.1", - "eslint": "^8.57.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-import": "^2.25.3", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.6.2", - "eslint-plugin-react-refresh": "^0.4.7", - "eslint-plugin-storybook": "^0.8.0", - "postcss": "^8.4.21", - "postcss-styled-syntax": "^0.6.4", - "prettier": "^3.3.2", - "storybook": "^8.1.11", - "stylelint": "^16.6.1", - "stylelint-config-standard": "^36.0.1", - "stylelint-order": "^6.0.4", - "typescript": "^5.2.2", - "vite": "^5.3.1" - } + "name": "client", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview", + "stylelint": "stylelint './src/**/*.{ts,tsx}' --fix", + "svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "@svgr/cli": "^8.1.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.24.1", + "vite-plugin-svgr": "^4.2.0" + }, + "devDependencies": { + "@chromatic-com/storybook": "^1.6.1", + "@storybook/addon-essentials": "^8.1.11", + "@storybook/addon-interactions": "^8.1.11", + "@storybook/addon-links": "^8.1.11", + "@storybook/addon-onboarding": "^8.1.11", + "@storybook/blocks": "^8.1.11", + "@storybook/react": "^8.1.11", + "@storybook/react-vite": "^8.1.11", + "@storybook/test": "^8.1.11", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@typescript-eslint/eslint-plugin": "^7.13.1", + "@typescript-eslint/parser": "^7.13.1", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.57.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-typescript": "^18.0.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-import": "^2.25.3", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.7", + "eslint-plugin-storybook": "^0.8.0", + "postcss": "^8.4.21", + "postcss-styled-syntax": "^0.6.4", + "prettier": "^3.3.2", + "storybook": "^8.1.11", + "stylelint": "^16.6.1", + "stylelint-config-standard": "^36.0.1", + "stylelint-order": "^6.0.4", + "typescript": "^5.2.2", + "vite": "^5.3.1" + } } From 10918013705ca35063bc6bc7e94c4400e67ff557 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 15:50:06 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=A7=88=EA=B0=90=EA=B8=B0?= =?UTF-8?q?=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/BtnDate.tsx | 166 ++++++++++++++++++++++ src/components/commons/BtnStagingDate.tsx | 46 ++++++ src/pages/Today.tsx | 4 + 3 files changed, 216 insertions(+) create mode 100644 src/components/commons/BtnDate.tsx create mode 100644 src/components/commons/BtnStagingDate.tsx diff --git a/src/components/commons/BtnDate.tsx b/src/components/commons/BtnDate.tsx new file mode 100644 index 00000000..2a8264ab --- /dev/null +++ b/src/components/commons/BtnDate.tsx @@ -0,0 +1,166 @@ +import styled from '@emotion/styled'; +import { useState } from 'react'; + +import Icons from '@/assets/svg/index'; + +interface BtnDateProps { + date?: string; + time?: string; + size?: string; +} + +const BtnDate = (props: BtnDateProps) => { + const { date = '마감 기한', time = '마감 시간', size = 'big' } = props; + const [isPressed, setIsPressed] = useState(false); + const [isClicked, setIsClicked] = useState(false); + + const handleMouseDown = () => { + setIsPressed(true); + }; + + const handleMouseUp = () => { + setIsPressed(false); + setIsClicked((prev) => !prev); + }; + + const isDefaultDate = date === '마감 기한'; + const isDefaultTime = time === '마감 시간'; + + return ( + + + + + {date} + + + + + + + {time} + + + + + ); +}; + +export default BtnDate; + +const XIcon = styled((props: React.SVGProps & { isClicked: boolean }) => { + const { isClicked, ...rest } = props; + return ; +})<{ isClicked: boolean }>` + width: 2rem; + height: 2rem; + display: ${({ isClicked }) => (isClicked ? 'flex' : 'none')}; +`; + +const CalanderIcon = styled(Icons.Icn_calander, { target: 'CalanderIcon' })` + display: flex; + width: 1.4rem; + height: 1.4rem; + justify-content: center;s + align-items: center; +`; + +const ClockIcon = styled(Icons.Icn_date_clock, { target: 'ClockIcon' })` + display: flex; + width: 1.4rem; + height: 1.4rem; + justify-content: center; + align-items: center; +`; + +const LineIcon = styled(Icons.Icn_line, { target: 'LineIcon' })<{ size: string }>` + display: flex; + width: 0.1rem; + height: ${({ size }) => (size === 'big' ? '2.2rem' : '1.2rem')}; + justify-content: center; + align-items: center; +`; + +const TextWrapper = styled('div', { target: 'TextWrapper' })<{ isDefault: boolean; size: string }>` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + color: ${({ isDefault, theme }) => (isDefault ? theme.palette.grey5 : theme.palette.black)}; + font-size: ${({ size }) => (size === 'big' ? '1.4rem' : '1.2rem')}; +`; + +const BtnDateContainer = styled.div` + display: flex; + align-items: center; + gap: 0.4rem; +`; + +const BtnDateLayout = styled('div', { target: 'BtnDateLayout' })<{ + isPressed: boolean; + isClicked: boolean; + size: string; + isDefaultDate: boolean; + isDefaultTime: boolean; +}>` + display: flex; + width: fit-content; + padding: ${({ size }) => (size === 'big' ? '0.5rem 1rem' : '0.5rem 1rem')}; + gap: 1rem; + align-items: center; + border-radius: 0.8rem; + border: 0.1rem solid ${({ theme }) => theme.palette.grey3}; + background: ${({ theme }) => theme.palette.white}; + cursor: pointer; + border-color: ${({ isClicked, theme }) => (isClicked ? theme.palette.primary : theme.palette.grey3)}; + + ${({ isPressed }) => + isPressed && + ` + border-width: 0rem; + `} + + ${({ isClicked, size, theme }) => + isClicked && + ` + padding-right: ${size === 'big' ? '0.6rem' : '0.2rem'}; + border-width: 0.1rem; + border-color: ${theme.palette.primary}; + `} + + &:hover { + background: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey5 : theme.palette.grey4)}; + color: ${({ isPressed, theme }) => (isPressed ? theme.palette.white : theme.palette.grey6)}; + border-width: 0rem; + + ${TextWrapper} { + color: ${({ isDefaultDate, isDefaultTime, theme }) => + isDefaultDate || isDefaultTime ? theme.palette.grey6 : theme.palette.black}; + } + } + + ${({ isPressed, theme }) => + isPressed && + ` + ${TextWrapper} { + color: ${theme.palette.white}; + } + `} + + &:hover ${CalanderIcon}, &:hover ${ClockIcon}, &:hover ${LineIcon} { + path { + stroke: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey4 : theme.palette.grey5)}; + } + line { + stroke: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey4 : theme.palette.grey5)}; + } + } +`; diff --git a/src/components/commons/BtnStagingDate.tsx b/src/components/commons/BtnStagingDate.tsx new file mode 100644 index 00000000..cbe8b8dc --- /dev/null +++ b/src/components/commons/BtnStagingDate.tsx @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; + +const BtnStagingDate = () => { + return ( + + ⇥ 마감 기한 설정 + + ); +}; + +export default BtnStagingDate; + +const BtnStagingDateText = styled('p', { target: 'BtnStagingDateText' })` + color: ${({ theme }) => theme.palette.grey5}; + text-align: center; + font-size: 1.2rem; +`; + +const BtnStagingDateLayout = styled('div', { target: 'BtnStagingDateLayout' })` + display: flex; + width: fit-content; + height: 2.2rem; + padding: 0.3rem 1.2rem; + justify-content: center; + align-items: center; + gap: 0.8rem; + border-radius: 0.8rem; + background: ${({ theme }) => theme.palette.grey3}; + cursor: pointer; + + &:hover { + background: ${({ theme }) => theme.palette.grey4}; + + ${BtnStagingDateText} { + color: ${({ theme }) => theme.palette.grey6}; + } + } + + &:active { + background: ${({ theme }) => theme.palette.grey5}; + + ${BtnStagingDateText} { + color: ${({ theme }) => theme.palette.white}; + } + } +`; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index c72b5f25..6d7e201a 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -5,6 +5,8 @@ import TextInputDesc from '@/components/common/textbox/TextInputDesc'; import TextInputStaging from '@/components/common/textbox/TextInputStaging'; import TextInputTime from '@/components/common/textbox/TextInputTime'; import TextInputTitle from '@/components/common/textbox/TextInputTitle'; +import BtnDate from '@/components/commons/BtnDate'; +import BtnStagingDate from '@/components/commons/BtnStagingDate'; function Today() { return ( @@ -23,6 +25,8 @@ function Today() { + + ); } From d55fa1157fe33a20d5984838c04528966f8b1003 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 21:33:43 +0900 Subject: [PATCH 5/7] =?UTF-8?q?style:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/BtnDate.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/commons/BtnDate.tsx b/src/components/commons/BtnDate.tsx index 2a8264ab..443d9c28 100644 --- a/src/components/commons/BtnDate.tsx +++ b/src/components/commons/BtnDate.tsx @@ -69,7 +69,7 @@ const CalanderIcon = styled(Icons.Icn_calander, { target: 'CalanderIcon' })` display: flex; width: 1.4rem; height: 1.4rem; - justify-content: center;s + justify-content: center; align-items: center; `; @@ -113,7 +113,8 @@ const BtnDateLayout = styled('div', { target: 'BtnDateLayout' })<{ }>` display: flex; width: fit-content; - padding: ${({ size }) => (size === 'big' ? '0.5rem 1rem' : '0.5rem 1rem')}; + min-width: 1.8rem; + padding: 0.5rem 1rem; gap: 1rem; align-items: center; border-radius: 0.8rem; @@ -132,7 +133,7 @@ const BtnDateLayout = styled('div', { target: 'BtnDateLayout' })<{ isClicked && ` padding-right: ${size === 'big' ? '0.6rem' : '0.2rem'}; - border-width: 0.1rem; + border-width: 0.2rem; border-color: ${theme.palette.primary}; `} From 5e60c84e1c05762690617e3a558bb0cc431b75ee Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 21:54:50 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20stylelint=20=EC=98=A4=EB=A5=98=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/assets/svg/index.ts | 4 ++-- src/components/commons/BtnDate.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 63d0d3bc..33f03d5e 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -8,7 +8,7 @@ import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; import Icn_calander from '../../assets/svg/calendar-minus-01.svg?react'; import Icn_date_clock from '../../assets/svg/clock.svg?react'; import Icn_line from '../../assets/svg/line164.svg?react'; -import Icn_xCricle from '../../assets/svg/x-circle.svg?react'; +import IcnXCricle from '../../assets/svg/x-circle.svg?react'; const Icons = { Icn_clock, @@ -16,7 +16,7 @@ const Icons = { Icn_calander, Icn_date_clock, Icn_line, - Icn_xCricle, + IcnXCricle, Navbar: { Icn_nav_calendar, Icn_nav_dashboard, diff --git a/src/components/commons/BtnDate.tsx b/src/components/commons/BtnDate.tsx index 443d9c28..264336c4 100644 --- a/src/components/commons/BtnDate.tsx +++ b/src/components/commons/BtnDate.tsx @@ -58,7 +58,7 @@ export default BtnDate; const XIcon = styled((props: React.SVGProps & { isClicked: boolean }) => { const { isClicked, ...rest } = props; - return ; + return ; })<{ isClicked: boolean }>` width: 2rem; height: 2rem; @@ -104,7 +104,7 @@ const BtnDateContainer = styled.div` gap: 0.4rem; `; -const BtnDateLayout = styled('div', { target: 'BtnDateLayout' })<{ +const BtnDateLayout = styled.div<{ isPressed: boolean; isClicked: boolean; size: string; From d49a8120e7c9fa9986acc7f20ab52eda1728f775 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 23:55:32 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20stylelint=20=EC=9E=AC=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=A4=91=EB=B3=B5=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B0=84=EC=86=8C=ED=99=94=20=EC=A7=84?= =?UTF-8?q?=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/index.ts | 9 +- .../{commons => common/BtnDate}/BtnDate.tsx | 100 +++++++----------- src/components/common/BtnDate/BtnDateText.tsx | 38 +++++++ .../BtnDate}/BtnStagingDate.tsx | 15 +-- src/pages/Today.tsx | 4 +- 5 files changed, 91 insertions(+), 75 deletions(-) rename src/components/{commons => common/BtnDate}/BtnDate.tsx (72%) create mode 100644 src/components/common/BtnDate/BtnDateText.tsx rename src/components/{commons => common/BtnDate}/BtnStagingDate.tsx (94%) diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 33f03d5e..85e6a7e4 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,14 +1,13 @@ import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react'; +import Icn_calander from '@/assets/svg/calendar-minus-01.svg?react'; +import Icn_date_clock from '@/assets/svg/clock.svg?react'; import Icn_clock from '@/assets/svg/icn_clock.svg?react'; import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; - -import Icn_calander from '../../assets/svg/calendar-minus-01.svg?react'; -import Icn_date_clock from '../../assets/svg/clock.svg?react'; -import Icn_line from '../../assets/svg/line164.svg?react'; -import IcnXCricle from '../../assets/svg/x-circle.svg?react'; +import Icn_line from '@/assets/svg/line164.svg?react'; +import IcnXCricle from '@/assets/svg/x-circle.svg?react'; const Icons = { Icn_clock, diff --git a/src/components/commons/BtnDate.tsx b/src/components/common/BtnDate/BtnDate.tsx similarity index 72% rename from src/components/commons/BtnDate.tsx rename to src/components/common/BtnDate/BtnDate.tsx index 264336c4..e6fba4ce 100644 --- a/src/components/commons/BtnDate.tsx +++ b/src/components/common/BtnDate/BtnDate.tsx @@ -1,6 +1,9 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; +import BtnDateText, { TextWrapper } from './BtnDateText'; + import Icons from '@/assets/svg/index'; interface BtnDateProps { @@ -9,7 +12,7 @@ interface BtnDateProps { size?: string; } -const BtnDate = (props: BtnDateProps) => { +function BtnDate(props: BtnDateProps) { const { date = '마감 기한', time = '마감 시간', size = 'big' } = props; const [isPressed, setIsPressed] = useState(false); const [isClicked, setIsClicked] = useState(false); @@ -36,23 +39,13 @@ const BtnDate = (props: BtnDateProps) => { onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} > - - - - {date} - - + } text={date} isDefault={isDefaultDate} size={size} /> - - - - {time} - - + } text={time} isDefault={isDefaultTime} size={size} /> ); -}; +} export default BtnDate; @@ -60,48 +53,33 @@ const XIcon = styled((props: React.SVGProps & { isClicked: boolea const { isClicked, ...rest } = props; return ; })<{ isClicked: boolean }>` + display: ${({ isClicked }) => (isClicked ? 'flex' : 'none')}; width: 2rem; height: 2rem; - display: ${({ isClicked }) => (isClicked ? 'flex' : 'none')}; `; const CalanderIcon = styled(Icons.Icn_calander, { target: 'CalanderIcon' })` display: flex; + align-items: center; + justify-content: center; width: 1.4rem; height: 1.4rem; - justify-content: center; - align-items: center; `; const ClockIcon = styled(Icons.Icn_date_clock, { target: 'ClockIcon' })` display: flex; + align-items: center; + justify-content: center; width: 1.4rem; height: 1.4rem; - justify-content: center; - align-items: center; `; const LineIcon = styled(Icons.Icn_line, { target: 'LineIcon' })<{ size: string }>` display: flex; + align-items: center; + justify-content: center; width: 0.1rem; height: ${({ size }) => (size === 'big' ? '2.2rem' : '1.2rem')}; - justify-content: center; - align-items: center; -`; - -const TextWrapper = styled('div', { target: 'TextWrapper' })<{ isDefault: boolean; size: string }>` - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1rem; - color: ${({ isDefault, theme }) => (isDefault ? theme.palette.grey5 : theme.palette.black)}; - font-size: ${({ size }) => (size === 'big' ? '1.4rem' : '1.2rem')}; -`; - -const BtnDateContainer = styled.div` - display: flex; - align-items: center; - gap: 0.4rem; `; const BtnDateLayout = styled.div<{ @@ -112,35 +90,42 @@ const BtnDateLayout = styled.div<{ isDefaultTime: boolean; }>` display: flex; + gap: 1rem; + align-items: center; width: fit-content; min-width: 1.8rem; padding: 0.5rem 1rem; - gap: 1rem; - align-items: center; - border-radius: 0.8rem; - border: 0.1rem solid ${({ theme }) => theme.palette.grey3}; + background: ${({ theme }) => theme.palette.white}; cursor: pointer; + border: 1px solid ${({ theme }) => theme.palette.grey3}; border-color: ${({ isClicked, theme }) => (isClicked ? theme.palette.primary : theme.palette.grey3)}; - - ${({ isPressed }) => - isPressed && - ` - border-width: 0rem; - `} + border-radius: 8px; ${({ isClicked, size, theme }) => isClicked && - ` - padding-right: ${size === 'big' ? '0.6rem' : '0.2rem'}; - border-width: 0.2rem; - border-color: ${theme.palette.primary}; - `} + css` + padding-right: ${size === 'big' ? '0.6rem' : '0.2rem'}; + + border-color: ${theme.palette.primary}; + border-width: 2px; + `} + + ${({ isPressed, theme }) => + isPressed && + css` + border-width: 0; + + ${TextWrapper} { + color: ${theme.palette.white}; + } + `} &:hover { - background: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey5 : theme.palette.grey4)}; color: ${({ isPressed, theme }) => (isPressed ? theme.palette.white : theme.palette.grey6)}; - border-width: 0rem; + + background: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey5 : theme.palette.grey4)}; + border-width: 0; ${TextWrapper} { color: ${({ isDefaultDate, isDefaultTime, theme }) => @@ -148,18 +133,11 @@ const BtnDateLayout = styled.div<{ } } - ${({ isPressed, theme }) => - isPressed && - ` - ${TextWrapper} { - color: ${theme.palette.white}; - } - `} - &:hover ${CalanderIcon}, &:hover ${ClockIcon}, &:hover ${LineIcon} { path { stroke: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey4 : theme.palette.grey5)}; } + line { stroke: ${({ isPressed, theme }) => (isPressed ? theme.palette.grey4 : theme.palette.grey5)}; } diff --git a/src/components/common/BtnDate/BtnDateText.tsx b/src/components/common/BtnDate/BtnDateText.tsx new file mode 100644 index 00000000..fb2c215d --- /dev/null +++ b/src/components/common/BtnDate/BtnDateText.tsx @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; + +interface BtnDateTextProps { + icon: React.ReactNode; + text: string; + isDefault: boolean; + size: string; +} + +function BtnDateText(props: BtnDateTextProps) { + const { icon, text, isDefault, size } = props; + return ( + + {icon} + + {text} + + + ); +} + +export default BtnDateText; + +export const TextWrapper = styled('div', { target: 'TextWrapper' })<{ isDefault: boolean; size: string }>` + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-start; + + color: ${({ isDefault, theme }) => (isDefault ? theme.palette.grey5 : theme.palette.black)}; + font-size: ${({ size }) => (size === 'big' ? '1.4rem' : '1.2rem')}; +`; + +const BtnDateContainer = styled.div` + display: flex; + gap: 0.4rem; + align-items: center; +`; diff --git a/src/components/commons/BtnStagingDate.tsx b/src/components/common/BtnDate/BtnStagingDate.tsx similarity index 94% rename from src/components/commons/BtnStagingDate.tsx rename to src/components/common/BtnDate/BtnStagingDate.tsx index cbe8b8dc..38f8fbdd 100644 --- a/src/components/commons/BtnStagingDate.tsx +++ b/src/components/common/BtnDate/BtnStagingDate.tsx @@ -1,32 +1,33 @@ import styled from '@emotion/styled'; -const BtnStagingDate = () => { +function BtnStagingDate() { return ( ⇥ 마감 기한 설정 ); -}; +} export default BtnStagingDate; const BtnStagingDateText = styled('p', { target: 'BtnStagingDateText' })` color: ${({ theme }) => theme.palette.grey5}; - text-align: center; font-size: 1.2rem; + text-align: center; `; const BtnStagingDateLayout = styled('div', { target: 'BtnStagingDateLayout' })` display: flex; + gap: 0.8rem; + align-items: center; + justify-content: center; width: fit-content; height: 2.2rem; padding: 0.3rem 1.2rem; - justify-content: center; - align-items: center; - gap: 0.8rem; - border-radius: 0.8rem; + background: ${({ theme }) => theme.palette.grey3}; cursor: pointer; + border-radius: 8px; &:hover { background: ${({ theme }) => theme.palette.grey4}; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index 6d7e201a..101c7bad 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,3 +1,5 @@ +import BtnDate from '@/components/common/BtnDate/BtnDate'; +import BtnStagingDate from '@/components/common/BtnDate/BtnStagingDate'; import NavBar from '@/components/common/NavBar'; import TextboxDailydate from '@/components/common/textbox/TextboxDailydate'; import TextboxInput from '@/components/common/textbox/TextboxInput'; @@ -5,8 +7,6 @@ import TextInputDesc from '@/components/common/textbox/TextInputDesc'; import TextInputStaging from '@/components/common/textbox/TextInputStaging'; import TextInputTime from '@/components/common/textbox/TextInputTime'; import TextInputTitle from '@/components/common/textbox/TextInputTitle'; -import BtnDate from '@/components/commons/BtnDate'; -import BtnStagingDate from '@/components/commons/BtnStagingDate'; function Today() { return (