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;