refactor: 생년월일 입력 - 변경된 디자인 적용 및 리팩터링

src/constants/date.ts

@@ -0,0 +1 @@
+export const DATE_SEPARATOR = '.';

src/constants/index.ts

@@ -1,4 +1,5 @@
 export { blueDataURL } from './blurDataURL';
+export * from './date';
 export * from './input';
 export { META } from './metadata';
 export * from './ogImage.size';

src/features/goal/components/new/DateForm.tsx

@@ -4,10 +4,10 @@ import { useController, useFormContext } from 'react-hook-form';
 import Link from 'next/link';
 
 import { Button, Span, Typography } from '@/components';
-import { MAX_DATE_LENGTH_UNTIL_MONTH } from '@/constants';
 import type { GoalFormValues } from '@/features/goal/types';
 
 import { NEW_GOAL_FORM_ORDERS } from '../../constants';
+import { isValidDateFormat } from '../../utils/date';
 
 import { DateInput } from './DateInput';
 import FormHeader from './FormHeader';
@@ -29,12 +29,12 @@ export const DateForm = () => {
       }
       body={
         <div {...register('date')} className="pt-sm">
-          <DateInput maxLength={MAX_DATE_LENGTH_UNTIL_MONTH} onChange={onChange} />
+          <DateInput onChange={onChange} requireDateType={['YYYY', 'MM']} />
         </div>
       }
       footer={
         <Link href="/goal/new/tag">
-          <Button disabled={value ? value.length !== MAX_DATE_LENGTH_UNTIL_MONTH : true}>다음</Button>
+          <Button disabled={!isValidDateFormat(value, 'YYYY.MM')}>다음</Button>
         </Link>
       }
     />

src/features/goal/components/new/DateInput.tsx

@@ -1,63 +1,50 @@
 'use client';
 
-import type { ChangeEvent } from 'react';
-import { useState } from 'react';
+import { useEffect } from 'react';
 
 import { Input, Typography } from '@/components';
-import { MAX_DATE_LENGTH_UNTIL_MONTH } from '@/constants';
-
-import { formatDate, isValidDate } from '../../utils/date';
+import { useDateInput } from '@/hooks';
+import { type DateProps, type DateValueProps, typeToMaxLength } from '@/hooks/useDateInput';
+import { formatDate } from '@/utils/date';
 
 interface DateInputProps {
   labelName?: string;
-  intitalValue?: string;
-  maxLength?: number;
+  initialValue?: DateValueProps;
+  requireDateType?: DateProps[];
   onChange?: (value: string) => void;
 }
 
-export const DateInput = ({ labelName = '', intitalValue = '', maxLength, onChange }: DateInputProps) => {
-  const [formattedValue, setFormattedValue] = useState<string>(intitalValue);
-  const placeholder = maxLength === MAX_DATE_LENGTH_UNTIL_MONTH ? 'YYYY.MM' : 'YYYY.MM.DD';
-
-  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = event.target.value.replace(/\D/g, '');
-    let formatted = inputValue;
-    let year, month, day;
-
-    if (inputValue.length > 4 && inputValue.length <= 6) {
-      year = inputValue.slice(0, 4);
-      month = inputValue.slice(4, 6);
-      month = +month > 12 ? '12' : +month === 0 ? '0' : month;
-      formatted = formatDate([year, month], '.');
-    } else if (inputValue.length > 6) {
-      year = inputValue.slice(0, 4);
-      month = inputValue.slice(4, 6);
-      day = inputValue.slice(6, 8);
+export const DateInput = ({
+  labelName = '',
+  initialValue = { YYYY: '', MM: '', DD: '' },
+  requireDateType = ['YYYY', 'MM', 'DD'],
+  onChange,
+}: DateInputProps) => {
+  const { inputRefs, dateValues, handleInputChange, handleInputBlur } = useDateInput({ initialValue });
 
-      if (inputValue.length < 8) {
-        formatted = formatDate([year, month, day], '.');
-      } else {
-        formatted = isValidDate(year, month, day)
-          ? formatDate([year, month, day], '.')
-          : formatDate([year, month], '.');
-      }
-    }
-    setFormattedValue(formatted);
-    onChange && onChange(formatted);
-  };
+  useEffect(() => {
+    onChange && onChange(formatDate(requireDateType.map((type) => dateValues[type])));
+  }, [dateValues, onChange, requireDateType]);
 
   return (
     <div className="flex flex-col gap-5xs">
       <Typography type="title3" className="text-gray-50">
         {labelName}
       </Typography>
-      <Input
-        type="text"
-        placeholder={placeholder}
-        value={formattedValue}
-        maxLength={maxLength}
-        onChange={handleInputChange}
-      />
+      <div className="flex gap-5xs">
+        {requireDateType.map((type) => (
+          <Input
+            key={type}
+            ref={inputRefs[type]}
+            placeholder={type}
+            className="text-center"
+            maxLength={typeToMaxLength[type]}
+            value={dateValues[type]}
+            onChange={(e) => handleInputChange(e, type)}
+            onBlur={(e) => handleInputBlur(e, type)}
+          />
+        ))}
+      </div>
     </div>
   );
 };

src/features/goal/utils/date.ts

@@ -1,4 +1,8 @@
-export const formatDate = (splitedDate: string[], separator: string) => {
+import { DATE_SEPARATOR } from '@/constants';
+import type { DateProps } from '@/hooks/useDateInput';
+import { typeToMaxLength } from '@/hooks/useDateInput';
+
+export const formatDate = (splitedDate: string[], separator = DATE_SEPARATOR) => {
   return splitedDate.join(separator);
 };
 
@@ -11,3 +15,19 @@ export const isValidDate = (year: string, month: string, day: string) => {
 
   return date.getFullYear() === yearNum && date.getMonth() === monthNum && date.getDate() === dayNum;
 };
+
+/**
+ *
+ * @param string DATE_SEPARATOR를 기준으로 split했을 때, 모든 아이템이 number여야만, 길이를 만족해야만 true를 반환합니다.
+ * @param format ex. 'YYYY.MM.DD'
+ */
+export const isValidDateFormat = (formattedDate = '', format = 'YYYY.MM.DD') => {
+  const splittedFormat = format.split(DATE_SEPARATOR) as DateProps[];
+
+  return (
+    formattedDate
+      .split(DATE_SEPARATOR)
+      .every((date, index) => !isNaN(+date) && date.length === typeToMaxLength[splittedFormat[index]]) &&
+    formattedDate.split(DATE_SEPARATOR).length === splittedFormat.length
+  );
+};

src/features/member/components/new/BirthInputForm.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import BirthIcon from '@/assets/icons/birth-icon.svg';
 import { Button } from '@/components';
 import { DateInput } from '@/features/goal/components/new/DateInput';
+import { isValidDateFormat } from '@/features/goal/utils/date';
 
 import type { NewMemberFormValues } from '../../types';
 
@@ -36,7 +37,9 @@ export const BirthInputForm = () => {
           <div {...register('birth')}>
             <DateInput onChange={onChange} />
           </div>
-          <Button type="submit">{value?.length ? '완료' : '건너뛰기'}</Button>
+          <Button type="submit" disabled={value?.length ? !isValidDateFormat(value) : false}>
+            {value?.length ? '완료' : '건너뛰기'}
+          </Button>
         </div>
       </div>
     </FormLayout>

src/features/my/components/update/UpdateForm.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import { Button } from '@/components';
-import { MAX_DATE_LENGTH_UNTIL_DAY, MAX_NICKNAME_LENGTH, MAX_USERNAME_LENGTH } from '@/constants';
+import { MAX_NICKNAME_LENGTH, MAX_USERNAME_LENGTH } from '@/constants';
 import { DateInput } from '@/features/goal/components/new/DateInput';
 import { TextInput } from '@/features/goal/components/new/TextInput';
 import { useGetMemberData } from '@/hooks/reactQuery/auth';
@@ -26,6 +26,8 @@ export const UpdateForm = () => {
   const { field: usernameField } = useController({ name: 'username', control });
   const isValidBirth = useValidBirth(birthField.value);
 
+  const [defaultYYYY, defaultMM, defaultDD] = (memberData?.birth ?? '').split('-');
+
   const [isDisabledSubmit, setIsDisabledSubmit] = useState(true);
 
   useEffect(() => {
@@ -85,8 +87,7 @@ export const UpdateForm = () => {
               <div {...register('birth')}>
                 <DateInput
                   labelName="생년월일"
-                  intitalValue={memberData.birth?.replace(/\-/g, '.')}
-                  maxLength={MAX_DATE_LENGTH_UNTIL_DAY}
+                  initialValue={{ YYYY: defaultYYYY, MM: defaultMM, DD: defaultDD }}
                   onChange={birthField.onChange}
                 />
               </div>

src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useAuth } from './useAuth';
+export { useDateInput } from './useDateInput';
 export { useDebounceCall } from './useDebounceCall';
 export { useDownloadImage } from './useDownloadImage';
 export { useFocusInput } from './useFocusInput';

src/hooks/useDateInput.ts

@@ -0,0 +1,55 @@
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useRef, useState } from 'react';
+
+export type DateProps = 'YYYY' | 'MM' | 'DD';
+
+export type DateValueProps = Record<DateProps, string>;
+
+interface UseDateInputProps {
+  initialValue: DateValueProps;
+}
+
+export const typeToMaxLength: Record<DateProps, number> = {
+  YYYY: 4,
+  MM: 2,
+  DD: 2,
+} as const;
+
+export const useDateInput = ({ initialValue }: UseDateInputProps) => {
+  const [dateValues, setDateValues] = useState<DateValueProps>(initialValue);
+
+  const yearInputRef = useRef<HTMLInputElement>(null);
+  const monthInputRef = useRef<HTMLInputElement>(null);
+  const dayInputRef = useRef<HTMLInputElement>(null);
+
+  const inputRefs = {
+    YYYY: yearInputRef,
+    MM: monthInputRef,
+    DD: dayInputRef,
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>, type: DateProps) => {
+    let inputValue = event.target.value;
+
+    if (type === 'YYYY' && inputValue.length === typeToMaxLength[type]) {
+      monthInputRef.current?.focus();
+    }
+
+    if (type === 'MM') {
+      inputValue = +inputValue > 12 ? '12' : inputValue;
+      if (inputValue.length === typeToMaxLength.MM) dayInputRef.current?.focus();
+    }
+
+    setDateValues((prev) => ({ ...prev, [type]: inputValue }));
+  };
+
+  const handleInputBlur = (event: FocusEvent<HTMLInputElement>, type: DateProps) => {
+    const inputValue = event.target.value;
+
+    if ((type === 'MM' || type === 'DD') && inputValue.length === 1) {
+      setDateValues((prev) => ({ ...prev, [type]: `0${inputValue}` }));
+    }
+  };
+
+  return { dateValues, handleInputChange, handleInputBlur, inputRefs };
+};

src/utils/date.ts

@@ -1,7 +1,7 @@
-import { HOURS_PER_DAY, MINUTES_PER_HOUR, SECONDS_PER_MINUTE } from '@/constants';
+import { DATE_SEPARATOR, HOURS_PER_DAY, MINUTES_PER_HOUR, SECONDS_PER_MINUTE } from '@/constants';
 
-export const formatDate = (splitedDate: string[], separator: string) => {
-  return splitedDate.join(separator);
+export const formatDate = (splitedDate: string[], separator = DATE_SEPARATOR) => {
+  return splitedDate.filter((date) => date !== '').join(separator);
 };
 
 export const isValidDate = (year: string, month: string, day: string) => {