From 3396eccc19cbbad02a199799a8156d110cc766d0 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 13:57:37 +0900 Subject: [PATCH 01/10] =?UTF-8?q?fix:=20arrowPrev,=20arrowNext,=20Calendar?= =?UTF-8?q?=20svg=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Icon/assets/ArrowNext.tsx | 4 ++-- src/components/common/Icon/assets/ArrowPrev.tsx | 13 +++++++------ src/components/common/Icon/assets/Calendar.tsx | 4 ++-- src/components/common/Icon/assets/index.ts | 2 +- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/common/Icon/assets/ArrowNext.tsx b/src/components/common/Icon/assets/ArrowNext.tsx index fa3601f9..504370e2 100644 --- a/src/components/common/Icon/assets/ArrowNext.tsx +++ b/src/components/common/Icon/assets/ArrowNext.tsx @@ -10,13 +10,13 @@ const ArrowNext = ({ ); diff --git a/src/components/common/Icon/assets/Calendar.tsx b/src/components/common/Icon/assets/Calendar.tsx index dacc56e8..9ebd1125 100644 --- a/src/components/common/Icon/assets/Calendar.tsx +++ b/src/components/common/Icon/assets/Calendar.tsx @@ -10,13 +10,13 @@ const Calendar = ({ = { plus: { type: 'stroke', file: Plus }, arrowUp: { type: 'fill', file: Arrowup }, arrowDown: { type: 'fill', file: ArrowDown }, - arrowPrev: { type: 'fill', file: ArrowPrev }, + arrowPrev: { type: 'stroke', file: ArrowPrev }, arrowNext: { type: 'stroke', file: ArrowNext }, arrowPrevBlock: { type: 'fill', file: ArrowPrevBlock }, arrowNextBlock: { type: 'fill', file: ArrowNextBlock }, From da8015d5e7b6fca7035d2c410ae59f5356e191f1 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 13:58:58 +0900 Subject: [PATCH 02/10] =?UTF-8?q?remove:=20datepicker=20custom=20style=20f?= =?UTF-8?q?eature=EB=8B=A8=EC=9C=84=EC=97=90=EC=84=9C=EA=B0=80=20=EC=95=84?= =?UTF-8?q?=EB=8B=8C=20common=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90?= =?UTF-8?q?=EC=84=9C=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/feature/Survey/Create/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/feature/Survey/Create/index.tsx b/src/components/feature/Survey/Create/index.tsx index 3315a6ff..5f0f2cda 100644 --- a/src/components/feature/Survey/Create/index.tsx +++ b/src/components/feature/Survey/Create/index.tsx @@ -20,8 +20,6 @@ import { surveyKeys } from '@/hooks/survey/queryKey'; import { usePostSurvey } from '@/hooks/survey/usePostSurvey'; import { usePostSurveyQrCode } from '@/hooks/survey/usePostSurveyQrCode'; import { useToastStore } from '@/stores/useToastStore'; -import 'react-datepicker/dist/react-datepicker.css'; -import '@/styles/datepicker-custom.css'; const TWO_WEEK_DAYS = 14; const { now: twoWeeksLater } = getCurrentYearMonthNow(); From 15b1d300142299d41f61fc6f3afae17c81cf91a1 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 13:59:35 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20dropShadow=20tailwind=20config?= =?UTF-8?q?=EC=97=90=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tailwind.config.ts b/tailwind.config.ts index d0e27630..60d6ff56 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -18,6 +18,9 @@ const config: Config = { translate: { '-1/2': '-50%', }, + boxShadow: { + dropShadow: '0px 8px 16px rgba(0, 0, 0, 0.12)', + }, }, }, plugins: [], From 25409641590db3fb059a384d364dc2fa9aba8745 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 14:01:40 +0900 Subject: [PATCH 04/10] =?UTF-8?q?fix:=20DatepickerCalendar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9=20(calendar=EB=8A=94=20=EC=95=84?= =?UTF-8?q?=EC=A7=81=20=EB=AF=B8=EC=A7=84=ED=96=89)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/DatepickerCalendar/index.tsx | 75 +++++++++++++++++++ src/components/common/Typography/index.tsx | 5 ++ .../shared/Survey/Controls/index.tsx | 55 ++------------ 3 files changed, 86 insertions(+), 49 deletions(-) create mode 100644 src/components/common/DatepickerCalendar/index.tsx diff --git a/src/components/common/DatepickerCalendar/index.tsx b/src/components/common/DatepickerCalendar/index.tsx new file mode 100644 index 00000000..65fcb95f --- /dev/null +++ b/src/components/common/DatepickerCalendar/index.tsx @@ -0,0 +1,75 @@ +'use client'; + +import React, { useRef } from 'react'; +import { ko } from 'date-fns/locale'; +import DatePicker from 'react-datepicker'; +import { getCurrentYearMonthNow } from '@/utils/calendar'; +import Button from '@/components/common/Button/Button'; +import Icon from '@/components/common/Icon'; +import { Subtitle2Black } from '@/components/common/Typography'; +import CustomDatePickerHeader from '@/components/shared/Survey/CustomDatePickerHeader'; +import 'react-datepicker/dist/react-datepicker.css'; +import '@/styles/datepicker-custom.css'; + +interface Props { + type: 'create' | 'edit'; + deadLine: Date | null; + setDeadLine: React.Dispatch>; +} + +const TWO_WEEK_DAYS = 14; +const { now: twoWeeksLater } = getCurrentYearMonthNow(); +twoWeeksLater.setDate(twoWeeksLater.getDate() + TWO_WEEK_DAYS); +const { now } = getCurrentYearMonthNow(); + +const DatepickerCalendar = ({ type, deadLine, setDeadLine }: Props) => { + const isChangeable = type === 'create'; + const deadLineDatePickerRef = useRef(null); + + const handleChangeDate = (date: Date | null) => { + if (date) { + setDeadLine!(date); + } + }; + + return ( +
+ 'custom-day'} + enableTabLoop={false} + renderCustomHeader={CustomDatePickerHeader} + customInput={ + + } + /> +
+ ); +}; + +export default DatepickerCalendar; diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx index 0fa85a2d..c80e39bc 100644 --- a/src/components/common/Typography/index.tsx +++ b/src/components/common/Typography/index.tsx @@ -38,6 +38,11 @@ export const Body2Black = customTypography('span', { color: 'black', }); +export const SubTitle1Black = customTypography('span', { + type: 'Subtitle1', + color: 'black', +}); + export const Subtitle2Black = customTypography('span', { type: 'Subtitle2', color: 'black', diff --git a/src/components/shared/Survey/Controls/index.tsx b/src/components/shared/Survey/Controls/index.tsx index f667288c..9c517c9f 100644 --- a/src/components/shared/Survey/Controls/index.tsx +++ b/src/components/shared/Survey/Controls/index.tsx @@ -1,11 +1,5 @@ -import { useRef } from 'react'; -import { ko } from 'date-fns/locale'; -import DatePicker from 'react-datepicker'; -import { getCurrentYearMonthNow } from '@/utils/calendar'; -import Icon from '@/components/common/Icon'; +import DatepickerCalendar from '@/components/common/DatepickerCalendar'; import { Input } from '@/components/common/Input'; -import { Label } from '@/components/common/Typography'; -import CustomDatePickerHeader from '@/components/shared/Survey/CustomDatePickerHeader'; interface Props { type: 'create' | 'edit'; @@ -26,16 +20,8 @@ const SurveyControls = ({ deadLine, setDeadLine, }: Props) => { - const { now } = getCurrentYearMonthNow(); - const deadLineDatePickerRef = useRef(null); const isChangeable = type === 'create'; - const handleChangeDate = (date: Date | null) => { - if (date) { - setDeadLine!(date); - } - }; - const handleChangeSurveyName = (e: React.ChangeEvent) => { if (e.target.value.length <= EXTRA_SURVEYNAME_LIMIT && !isChangeable) { setEditSurveyName!(e.target.value); @@ -45,10 +31,6 @@ const SurveyControls = ({ } }; - const handleOpenDatePicker = () => { - deadLineDatePickerRef.current!.setFocus(); - }; - return (
@@ -61,36 +43,11 @@ const SurveyControls = ({ height='basic' />
-
- - 'custom-day'} - placeholderText='마감날짜 선택' - renderCustomHeader={CustomDatePickerHeader} - /> - -
+
); }; From f752de968a984a6f291a0a645c963c4bfa15cdb4 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 15:32:31 +0900 Subject: [PATCH 05/10] =?UTF-8?q?style:=20datepicker=20custom=20=EB=A6=AC?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/datepicker-custom.css | 41 ++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/src/styles/datepicker-custom.css b/src/styles/datepicker-custom.css index 4fa6942f..579afe05 100644 --- a/src/styles/datepicker-custom.css +++ b/src/styles/datepicker-custom.css @@ -1,5 +1,5 @@ .custom-calendar { - @apply left-10 rounded-lg border border-green-500 bg-white-100 p-2 shadow-2xl; + @apply shadow-dropShadow left-[30px] w-[280px] rounded-lg border border-grey-100 bg-white-100 p-4; } .react-datepicker__triangle { @@ -7,35 +7,42 @@ } .react-datepicker__header { - @apply border-b border-green-500 bg-transparent; + @apply border-b-2 border-grey-100 bg-transparent pb-3 pt-0; - & .react-datepicker__current-month { - @apply py-1 text-dark-200; + & .react-datepicker__day-names { + @apply flex items-center justify-around; } - & .react-datepicker__day-name { - @apply text-green-800; + @apply m-0 flex h-8 w-8 items-center justify-center text-base font-bold leading-[1.44] tracking-[-0.008em] text-grey-700; + } +} + +.react-datepicker__month { + @apply mx-0 mb-0 mt-1 flex flex-col gap-1; + + & .react-datepicker__week { + @apply flex gap-[2px]; + + & .react-datepicker__day { + @apply flex items-center justify-center; + } } } .custom-day { - @apply text-sm text-dark-100 hover:bg-green-800 hover:text-white-100; + @apply m-0 h-8 w-8 text-base font-bold text-black-100 hover:bg-grey-100; &.react-datepicker__day--selected, &.react-datepicker__day--in-selecting-range, &.react-datepicker__day--in-range { - @apply border border-green-800 bg-transparent font-semibold text-green-800; + @apply bg-green-50 text-green-500; } &.react-datepicker__day:not([aria-disabled='true']) { - @apply hover:bg-green-800 hover:text-white-100; - } - - &.react-datepicker__day--today { - @apply bg-inherit font-bold; + @apply hover:bg-grey-100; } &.react-datepicker__day--disabled { - @apply text-gray-400 hover:bg-inherit; + @apply cursor-default text-opacity-[24%] hover:bg-transparent; } &.react-datepicker__day--keyboard-selected { @@ -43,6 +50,10 @@ } &.react-datepicker__day--outside-month { - @apply text-gray-400; + @apply text-opacity-[24%] hover:text-opacity-100; + } + + &.react-datepicker__day--disabled.react-datepicker__day--outside-month { + @apply text-opacity-[24%]; } } From 835cce73c44e18c9d0305cce839cdd217b244e05 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 15:33:32 +0900 Subject: [PATCH 06/10] =?UTF-8?q?style:=20datepicker=20header=20=EB=A6=AC?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Survey/CustomDatePickerHeader/index.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/shared/Survey/CustomDatePickerHeader/index.tsx b/src/components/shared/Survey/CustomDatePickerHeader/index.tsx index a28cc0d7..e5cf5705 100644 --- a/src/components/shared/Survey/CustomDatePickerHeader/index.tsx +++ b/src/components/shared/Survey/CustomDatePickerHeader/index.tsx @@ -1,10 +1,11 @@ +import Button from '@/components/common/Button/Button'; import Icon from '@/components/common/Icon'; +import { SubTitle1Black } from '@/components/common/Typography'; interface Props { date: Date | null; decreaseMonth: () => void; increaseMonth: () => void; - prevMonthButtonDisabled: boolean; nextMonthButtonDisabled: boolean; } @@ -12,24 +13,23 @@ const CustomDatePickerHeader = ({ date, decreaseMonth, increaseMonth, - prevMonthButtonDisabled, nextMonthButtonDisabled, }: Props) => ( -
- -
+
+ + {date instanceof Date && !isNaN(date.getTime()) - ? `${date.getFullYear()}년 ${date.toLocaleString('default', { month: 'long' })}` + ? `${date.getFullYear()}년 ${date.toLocaleString('ko-KR', { month: 'long' })}` : '날짜 정보 없음'} -
-
); From 4ac84c5086a0ef0e8de189b28ec21d28f16f6741 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 15:34:39 +0900 Subject: [PATCH 07/10] =?UTF-8?q?Fix:=20=EB=A7=88=EA=B0=90=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=EC=88=98=EC=A0=95=20=EA=B0=80=EB=8A=A5=20/=20?= =?UTF-8?q?=EB=B6=88=EA=B0=80=EB=8A=A5=20type=EB=8C=80=EC=8B=A0=20isChange?= =?UTF-8?q?able=20props=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/DatepickerCalendar/index.tsx | 15 ++++++++++----- src/components/feature/Survey/Create/index.tsx | 2 +- src/components/feature/Survey/Edit/index.tsx | 2 +- src/components/shared/Survey/Controls/index.tsx | 8 +++----- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/common/DatepickerCalendar/index.tsx b/src/components/common/DatepickerCalendar/index.tsx index 65fcb95f..2dbac346 100644 --- a/src/components/common/DatepickerCalendar/index.tsx +++ b/src/components/common/DatepickerCalendar/index.tsx @@ -12,7 +12,7 @@ import 'react-datepicker/dist/react-datepicker.css'; import '@/styles/datepicker-custom.css'; interface Props { - type: 'create' | 'edit'; + isChangeable: boolean; deadLine: Date | null; setDeadLine: React.Dispatch>; } @@ -22,8 +22,7 @@ const { now: twoWeeksLater } = getCurrentYearMonthNow(); twoWeeksLater.setDate(twoWeeksLater.getDate() + TWO_WEEK_DAYS); const { now } = getCurrentYearMonthNow(); -const DatepickerCalendar = ({ type, deadLine, setDeadLine }: Props) => { - const isChangeable = type === 'create'; +const DatepickerCalendar = ({ isChangeable, deadLine, setDeadLine }: Props) => { const deadLineDatePickerRef = useRef(null); const handleChangeDate = (date: Date | null) => { @@ -35,7 +34,9 @@ const DatepickerCalendar = ({ type, deadLine, setDeadLine }: Props) => { return (
{ className='relative gap-1 rounded-lg bg-white-100 py-3 pl-4 pr-[46px]' disabled={!isChangeable} > - 마감 일자 + + 마감 일자 + {deadLine!.toISOString().split('T')[0]} @@ -62,7 +67,7 @@ const DatepickerCalendar = ({ type, deadLine, setDeadLine }: Props) => { name='calendar' width={20} height={20} - color='black' + color={!isChangeable ? 'grey500' : 'black'} className='absolute right-[14px]' /> diff --git a/src/components/feature/Survey/Create/index.tsx b/src/components/feature/Survey/Create/index.tsx index 5f0f2cda..9cc1b7a1 100644 --- a/src/components/feature/Survey/Create/index.tsx +++ b/src/components/feature/Survey/Create/index.tsx @@ -94,7 +94,7 @@ const SurveyCreate = ({ id }: { id: string }) => { accessHandler={submitSurvey} /> { accessHandler={submitSurvey} /> >; setSurveyName?: React.Dispatch>; @@ -13,15 +13,13 @@ interface Props { const EXTRA_SURVEYNAME_LIMIT = 30; const SurveyControls = ({ - type, + isChangeable, surveyName, setEditSurveyName, setSurveyName, deadLine, setDeadLine, }: Props) => { - const isChangeable = type === 'create'; - const handleChangeSurveyName = (e: React.ChangeEvent) => { if (e.target.value.length <= EXTRA_SURVEYNAME_LIMIT && !isChangeable) { setEditSurveyName!(e.target.value); @@ -44,7 +42,7 @@ const SurveyControls = ({ />
From 39fbf36f50757d7e6b0dcd61a19697c24de399dc Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 15:43:37 +0900 Subject: [PATCH 08/10] =?UTF-8?q?style:=20datepicker=20calendar=20?= =?UTF-8?q?=EC=A4=91=EC=95=99=EC=A0=95=EB=A0=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/datepicker-custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/datepicker-custom.css b/src/styles/datepicker-custom.css index 579afe05..e16fc11e 100644 --- a/src/styles/datepicker-custom.css +++ b/src/styles/datepicker-custom.css @@ -1,5 +1,5 @@ .custom-calendar { - @apply shadow-dropShadow left-[30px] w-[280px] rounded-lg border border-grey-100 bg-white-100 p-4; + @apply shadow-dropShadow left-[30px] flex w-[280px] justify-center rounded-lg border border-grey-100 bg-white-100 p-4; } .react-datepicker__triangle { From 393aded77f6cf1fe3c8458546dd57339515ed521 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 15:49:44 +0900 Subject: [PATCH 09/10] =?UTF-8?q?fix:=20button=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=20Button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/Survey/CustomDatePickerHeader/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/shared/Survey/CustomDatePickerHeader/index.tsx b/src/components/shared/Survey/CustomDatePickerHeader/index.tsx index e5cf5705..9e7e8fce 100644 --- a/src/components/shared/Survey/CustomDatePickerHeader/index.tsx +++ b/src/components/shared/Survey/CustomDatePickerHeader/index.tsx @@ -6,14 +6,12 @@ interface Props { date: Date | null; decreaseMonth: () => void; increaseMonth: () => void; - nextMonthButtonDisabled: boolean; } const CustomDatePickerHeader = ({ date, decreaseMonth, increaseMonth, - nextMonthButtonDisabled, }: Props) => (
+
); From 4e86cede6902da19de367a5b2d7bfc137a16f482 Mon Sep 17 00:00:00 2001 From: plla2 Date: Thu, 23 Jan 2025 16:52:54 +0900 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20pr=20comment=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/DatepickerCalendar/index.tsx | 3 ++- src/components/feature/Survey/Create/index.tsx | 2 +- src/components/feature/Survey/Edit/index.tsx | 2 +- src/components/shared/Survey/CustomDatePickerHeader/index.tsx | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/common/DatepickerCalendar/index.tsx b/src/components/common/DatepickerCalendar/index.tsx index 2dbac346..ae0b1f68 100644 --- a/src/components/common/DatepickerCalendar/index.tsx +++ b/src/components/common/DatepickerCalendar/index.tsx @@ -4,6 +4,7 @@ import React, { useRef } from 'react'; import { ko } from 'date-fns/locale'; import DatePicker from 'react-datepicker'; import { getCurrentYearMonthNow } from '@/utils/calendar'; +import { cn } from '@/utils/core'; import Button from '@/components/common/Button/Button'; import Icon from '@/components/common/Icon'; import { Subtitle2Black } from '@/components/common/Typography'; @@ -56,7 +57,7 @@ const DatepickerCalendar = ({ isChangeable, deadLine, setDeadLine }: Props) => { disabled={!isChangeable} > 마감 일자 diff --git a/src/components/feature/Survey/Create/index.tsx b/src/components/feature/Survey/Create/index.tsx index 9cc1b7a1..ada00104 100644 --- a/src/components/feature/Survey/Create/index.tsx +++ b/src/components/feature/Survey/Create/index.tsx @@ -94,7 +94,7 @@ const SurveyCreate = ({ id }: { id: string }) => { accessHandler={submitSurvey} /> { accessHandler={submitSurvey} /> ( -
+