From 58c78c32969951a005f7e66cbe19cf3df953b760 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 02:57:06 +0900 Subject: [PATCH 01/13] =?UTF-8?q?style:=20clock=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=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/icn_clock.svg | 3 +++ src/assets/svg/index.ts | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 src/assets/svg/icn_clock.svg diff --git a/src/assets/svg/icn_clock.svg b/src/assets/svg/icn_clock.svg new file mode 100644 index 00000000..30717cb5 --- /dev/null +++ b/src/assets/svg/icn_clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index e69de29b..f648a948 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -0,0 +1,7 @@ +import Icn_clock from '@/assets/svg/icn_clock.svg?react'; + +const Icons = { + Icn_clock, +}; + +export default Icons; From de19334d248c89bc0360e5a3e959bdae7d256403 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 02:59:12 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20TextboxInput=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 --- .../common/textbox/TextboxInput.tsx | 55 +++++++++++++++++++ src/pages/Today.tsx | 10 +++- 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/components/common/textbox/TextboxInput.tsx diff --git a/src/components/common/textbox/TextboxInput.tsx b/src/components/common/textbox/TextboxInput.tsx new file mode 100644 index 00000000..8176f898 --- /dev/null +++ b/src/components/common/textbox/TextboxInput.tsx @@ -0,0 +1,55 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +interface TextboxInputType { + type: 'date' | 'time'; +} +const TextboxInput = ({ type }: TextboxInputType) => { + return ( + <> + {type === 'date' ? ( + + + + ) : ( + + + + + )} + + ); +}; +const TextboxInputStyle = styled.div` + display: flex; + gap: 0.5rem; + align-items: center; + width: 15.4rem; + height: 2.6rem; + padding: 0.3rem 1rem; + + background-color: ${({ theme }) => theme.palette.GRAY_DISABLED}; + border-radius: 8px; + + &:focus-within { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } +`; +const TextboxInputClock = styled(Icons.Icn_clock)` + width: 1.4rem; + height: 1.4rem; +`; +const BoxTextInput = styled.input` + width: 100%; + height: 100%; + + background-color: transparent; + border: none; + border-radius: 8px; + + &:focus { + outline: none; + } +`; +export default TextboxInput; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index 703cb184..43a5571c 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,7 +1,15 @@ +import TextboxInput from '@/components/common/textbox/TextboxInput'; + type Props = {}; const Today = (props: Props) => { - return
Today
; + return ( +
+ Today + + +
+ ); }; export default Today; From 64184e851bc41311250849119894d11d0631bf98 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 03:12:48 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20TextInputTitle=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- .../common/textbox/TextInputTitle.tsx | 24 +++++++++++++++++++ src/pages/Today.tsx | 3 +++ 2 files changed, 27 insertions(+) create mode 100644 src/components/common/textbox/TextInputTitle.tsx diff --git a/src/components/common/textbox/TextInputTitle.tsx b/src/components/common/textbox/TextInputTitle.tsx new file mode 100644 index 00000000..955c0a07 --- /dev/null +++ b/src/components/common/textbox/TextInputTitle.tsx @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; + +type Props = { + type: 'long' | 'short'; +}; + +const TextInputTitle = ({ type }: Props) => { + return ; +}; +const TextInputTitleLayout = styled.input<{ type: string }>` + ${({ theme }) => theme.fontTheme.BODY_02}; + display: flex; + width: ${({ type }) => (type === 'long' ? '34.8rem' : '30.4rem')}; + height: 4.8rem; + padding: 1.2rem; + + border: 1px solid ${({ theme }) => theme.palette.GREY_01}; + border-radius: 5px; + + &:focus { + outline: none; + } +`; +export default TextInputTitle; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index 43a5571c..d6219088 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,3 +1,4 @@ +import TextInputTitle from '@/components/common/textbox/TextInputTitle'; import TextboxInput from '@/components/common/textbox/TextboxInput'; type Props = {}; @@ -8,6 +9,8 @@ const Today = (props: Props) => { Today + + ); }; From fb7a077d0bb73fa4fede25b28a1c2a14fff66c6d Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 03:22:06 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20TextInputDesc=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- .../common/textbox/TextInputDesc.tsx | 19 +++++++++++++++++++ src/pages/Today.tsx | 3 +++ 2 files changed, 22 insertions(+) create mode 100644 src/components/common/textbox/TextInputDesc.tsx diff --git a/src/components/common/textbox/TextInputDesc.tsx b/src/components/common/textbox/TextInputDesc.tsx new file mode 100644 index 00000000..5f1ca453 --- /dev/null +++ b/src/components/common/textbox/TextInputDesc.tsx @@ -0,0 +1,19 @@ +import styled from '@emotion/styled'; + +type Props = { + type: 'long' | 'short'; +}; + +const TextInputDesc = ({ type }: Props) => { + return ; +}; + +const TextInputDescLayout = styled.textarea<{ type: string }>` + width: ${({ type }) => (type === 'long' ? '34.8rem' : '30.4rem')}; + height: ${({ type }) => (type === 'long' ? '14.5rem' : '18rem')}; + + ${({ theme }) => theme.fontTheme.BODY_02}; + border: solid 1px ${({ theme }) => theme.palette.GREY_01}; + border-radius: 5px; +`; +export default TextInputDesc; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index d6219088..c4a48c6d 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,3 +1,4 @@ +import TextInputDesc from '@/components/common/textbox/TextInputDesc'; import TextInputTitle from '@/components/common/textbox/TextInputTitle'; import TextboxInput from '@/components/common/textbox/TextboxInput'; @@ -11,6 +12,8 @@ const Today = (props: Props) => { + + ); }; From 5c5722fb89da8300d8179cb11c0bc7bfc5e72265 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 03:45:25 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=200-6=20number=EB=A5=BC=20=EC=9A=94?= =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EB=B3=80=ED=99=98=20=ED=95=A8=EC=88=98=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/utils/getNameOfDay.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/utils/getNameOfDay.ts diff --git a/src/utils/getNameOfDay.ts b/src/utils/getNameOfDay.ts new file mode 100644 index 00000000..292159c7 --- /dev/null +++ b/src/utils/getNameOfDay.ts @@ -0,0 +1,24 @@ +//0:일, 1:월, 2:화, 3:수, 4:목, 5:금, 6:토 +/** 0-6 number를 요일로 변환 */ +const getNameOfDay = (dayOfTheWeek: number) => { + switch (dayOfTheWeek) { + case 0: + return 'SUNDAY'; + case 1: + return 'MONDAY'; + case 2: + return 'TUESDAY'; + case 3: + return 'WEDNESDAY'; + case 4: + return 'THURSDAY'; + case 5: + return 'FRIDAY'; + case 6: + return 'SATURDAY'; + default: + return 'UNKNOWN'; + } +}; + +export default getNameOfDay; From 144485dc4ed7cd37391c97331548487baf2367ca Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 03:45:38 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20TextboxDailydate=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- .../common/textbox/TextboxDailydate.tsx | 45 +++++++++++++++++++ src/pages/Today.tsx | 3 ++ 2 files changed, 48 insertions(+) create mode 100644 src/components/common/textbox/TextboxDailydate.tsx diff --git a/src/components/common/textbox/TextboxDailydate.tsx b/src/components/common/textbox/TextboxDailydate.tsx new file mode 100644 index 00000000..22c0963f --- /dev/null +++ b/src/components/common/textbox/TextboxDailydate.tsx @@ -0,0 +1,45 @@ +import styled from '@emotion/styled'; + +import getNameOfDay from '@/utils/getNameOfDay'; + +type Props = { + day: 'weekday' | 'weekend'; + type: 'long' | 'short'; +}; + +const TextboxDailydate = ({ day, type }: Props) => { + const today = new Date(); + const date = today.getDate(); + const dayOfTheWeek = today.getDay(); + + return ( + + + {date}일 + {/* CAPTION_02 추가 후 수정 필요 */} + {getNameOfDay(dayOfTheWeek)} + + + ); +}; + +const DailydateLayout = styled.div<{ type: string }>` + display: flex; + align-items: center; + width: ${({ type }) => (type === 'long' ? '84rem' : '53.2rem')}; + height: 5.6rem; + padding: 4px 8px; +`; +const DailydateContainer = styled.div` + display: flex; + gap: 1.2rem; + align-items: baseline; +`; +const DateText = styled.h1` + ${({ theme }) => theme.fontTheme.HEADLINE_01}; +`; +const DayText = styled.p` + ${({ theme }) => theme.fontTheme.CAPTION_01}; + color: ${({ theme }) => theme.palette.GREY_04}; +`; +export default TextboxDailydate; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index c4a48c6d..bec32bbf 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,5 +1,6 @@ import TextInputDesc from '@/components/common/textbox/TextInputDesc'; import TextInputTitle from '@/components/common/textbox/TextInputTitle'; +import TextboxDailydate from '@/components/common/textbox/TextboxDailydate'; import TextboxInput from '@/components/common/textbox/TextboxInput'; type Props = {}; @@ -14,6 +15,8 @@ const Today = (props: Props) => { + + ); }; From e497772a42076989d236b1d0a3a2c8f13f54cac1 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 04:13:05 +0900 Subject: [PATCH 07/13] =?UTF-8?q?style:=20arrow=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=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/arrow-narrow-right.svg | 3 +++ src/assets/svg/index.ts | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 src/assets/svg/arrow-narrow-right.svg diff --git a/src/assets/svg/arrow-narrow-right.svg b/src/assets/svg/arrow-narrow-right.svg new file mode 100644 index 00000000..5ff170ff --- /dev/null +++ b/src/assets/svg/arrow-narrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index f648a948..c7a67232 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,7 +1,9 @@ +import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react'; import Icn_clock from '@/assets/svg/icn_clock.svg?react'; const Icons = { Icn_clock, + Icn_arrow_narrow_right, }; export default Icons; From 6af04fbf131f9ce4657428cc57b8df9b99332505 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 04:13:28 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20TextInputTime=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- .../common/textbox/TextInputTime.tsx | 50 +++++++++++++++++++ src/pages/Today.tsx | 4 ++ 2 files changed, 54 insertions(+) create mode 100644 src/components/common/textbox/TextInputTime.tsx diff --git a/src/components/common/textbox/TextInputTime.tsx b/src/components/common/textbox/TextInputTime.tsx new file mode 100644 index 00000000..6cc0c24c --- /dev/null +++ b/src/components/common/textbox/TextInputTime.tsx @@ -0,0 +1,50 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = { + time: 'start' | 'end' | 'total'; +}; + +const TextInputTime = ({ time }: Props) => { + const isTotalTime = time === 'total'; + return ( + + {time === 'end' && } + + {isTotalTime && 분} + + ); +}; +const InputTimeLayout = styled.div<{ time: string }>` + display: flex; + align-items: center; + width: ${({ time }) => (time === 'total' ? '3.6rem' : '11.5rem')}; + height: 3.2rem; + padding: 0.4rem 1rem; + + ${({ theme }) => theme.fontTheme.BODY_02}; + background-color: ${({ theme, time }) => (time !== 'total' ? theme.palette.GRAY_DISABLED : theme.palette.WITHE)}; + border-radius: 8px; +`; +const ArrowIcon = styled(Icons.Icn_arrow_narrow_right)` + width: 1.4rem; + height: 1.4rem; +`; +const MinuteTxt = styled.p` + ${({ theme }) => theme.fontTheme.BODY_02}; + padding-left: 0.4rem; +`; +const InputTimeStyle = styled.input<{ time: string }>` + width: ${({ time }) => (time === 'total' ? '3.6rem' : '100%')}; + height: 100%; + + background-color: ${({ theme, time }) => (time === 'total' ? theme.palette.GRAY_DISABLED : 'transparent')}; + border: none; + border-radius: 8px; + + &:focus { + outline: none; + } +`; +export default TextInputTime; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index bec32bbf..7eec96e5 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -1,4 +1,5 @@ import TextInputDesc from '@/components/common/textbox/TextInputDesc'; +import TextInputTime from '@/components/common/textbox/TextInputTime'; import TextInputTitle from '@/components/common/textbox/TextInputTitle'; import TextboxDailydate from '@/components/common/textbox/TextboxDailydate'; import TextboxInput from '@/components/common/textbox/TextboxInput'; @@ -17,6 +18,9 @@ const Today = (props: Props) => { + + + ); }; From 9ce1ab385318f6b6bda741af1928b2e72d12cea1 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 11:10:59 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20TextboxInput=20smallDate=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 --- .../common/textbox/TextboxInput.tsx | 60 ++++++++++++------- src/pages/Today.tsx | 5 +- 2 files changed, 43 insertions(+), 22 deletions(-) diff --git a/src/components/common/textbox/TextboxInput.tsx b/src/components/common/textbox/TextboxInput.tsx index 8176f898..9c644a48 100644 --- a/src/components/common/textbox/TextboxInput.tsx +++ b/src/components/common/textbox/TextboxInput.tsx @@ -1,27 +1,40 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; +import { theme } from '@/styles/theme'; + interface TextboxInputType { - type: 'date' | 'time'; + variant: 'date' | 'time' | 'smallDate'; } -const TextboxInput = ({ type }: TextboxInputType) => { +const TextboxInput = ({ variant }: TextboxInputType) => { return ( - <> - {type === 'date' ? ( - - - - ) : ( - - - - - )} - + + {variant === 'time' && } + + ); }; -const TextboxInputStyle = styled.div` +const smallDateStyle = css` + width: 7.5rem; + padding: 0; +`; +const smallDateInputStyle = css` + padding: 0; + + text-align: center; + + &:focus { + outline: solid 1px ${theme.palette.BLUE_DEFAULT}; + } +`; +const InputContainer = styled.div<{ variant: 'date' | 'time' | 'smallDate' }>` display: flex; gap: 0.5rem; align-items: center; @@ -35,15 +48,14 @@ const TextboxInputStyle = styled.div` &:focus-within { background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; } + + ${({ variant }) => variant === 'smallDate' && smallDateStyle} `; -const TextboxInputClock = styled(Icons.Icn_clock)` - width: 1.4rem; - height: 1.4rem; -`; -const BoxTextInput = styled.input` +const StyledInput = styled.input<{ variant: 'date' | 'time' | 'smallDate' }>` width: 100%; height: 100%; + ${({ theme }) => theme.fontTheme.CAPTION_01}; background-color: transparent; border: none; border-radius: 8px; @@ -51,5 +63,13 @@ const BoxTextInput = styled.input` &:focus { outline: none; } + + ${({ variant }) => variant === 'smallDate' && smallDateInputStyle} +`; + +const ClockIcon = styled(Icons.Icn_clock)` + width: 1.4rem; + height: 1.4rem; `; + export default TextboxInput; diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index 7eec96e5..391ea367 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -10,8 +10,9 @@ const Today = (props: Props) => { return (
Today - - + + + From 8a136e01b828680694599544ddc940532cfa6317 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sat, 6 Jul 2024 11:31:55 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20TextInputStaging=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- .../common/textbox/TextInputStaging.tsx | 56 +++++++++++++++++++ src/pages/Today.tsx | 2 + 2 files changed, 58 insertions(+) create mode 100644 src/components/common/textbox/TextInputStaging.tsx diff --git a/src/components/common/textbox/TextInputStaging.tsx b/src/components/common/textbox/TextInputStaging.tsx new file mode 100644 index 00000000..1cdee118 --- /dev/null +++ b/src/components/common/textbox/TextInputStaging.tsx @@ -0,0 +1,56 @@ +import styled from '@emotion/styled'; + +type Props = {}; + +const TextInputStaging = (props: Props) => { + return ( + +