From 773aeab149505309f471858cd45dbaa414a318cb Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Thu, 11 Jul 2024 16:52:47 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=82=A0=EC=A7=9C=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EA=B2=80=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/textbox/TextboxInput.tsx | 11 +++++++++-- src/utils/checkDateFormat.ts | 13 +++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 src/utils/checkDateFormat.ts diff --git a/src/components/common/textbox/TextboxInput.tsx b/src/components/common/textbox/TextboxInput.tsx index 38328463..3bf3aac4 100644 --- a/src/components/common/textbox/TextboxInput.tsx +++ b/src/components/common/textbox/TextboxInput.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; import { theme } from '@/styles/theme'; +import checkDateFormat from '@/utils/checkDateFormat'; import checkTimeFormat from '@/utils/checkTimeFormat'; import dotFormatDate from '@/utils/dotFormatDate'; import dotFormatTime from '@/utils/dotFormatTime'; @@ -19,9 +20,15 @@ function TextboxInput({ variant, dateValue, onChange, dateTextRef }: TextboxInpu if ((variant === 'date' || variant === 'smallDate') && onChange) { const formattedInput = dotFormatDate(e.target.value); e.target.value = formattedInput; + if (formattedInput && formattedInput.length > 9) { - const valueDate = new Date(formattedInput); - onChange(valueDate); + if (!checkDateFormat(formattedInput)) { + alert('유효한 날짜가 아님'); + e.target.value = ''; + } else { + const valueDate = new Date(formattedInput); + onChange(valueDate); + } } } diff --git a/src/utils/checkDateFormat.ts b/src/utils/checkDateFormat.ts new file mode 100644 index 00000000..feff1b4e --- /dev/null +++ b/src/utils/checkDateFormat.ts @@ -0,0 +1,13 @@ +/** 입력된 날짜가 2000년 - 9999년인지, 01.01 - 12.31 인지 검사 */ +const checkDateFormat = (date: string) => { + const [year, month, day] = date.split('.').map(Number); + + if (year >= 2000 && year <= 9999 && month >= 1 && month <= 12 && day >= 1 && day <= 31) { + const maxDays = new Date(year, month, 0).getDate(); + if (day <= maxDays) { + return true; + } + } + return false; +}; +export default checkDateFormat;