From f42a30e6953fb64453f9eccbbb2af7e6e0d66d9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Tue, 24 Sep 2024 02:07:11 +0900
Subject: [PATCH] fix: use dayjs for converting DateObj to Date

---
 src/entities/profile/api/__mock__/profile.mock.ts   |  3 ++-
 .../ui/MyProfile/components/PersonalInfoGrid.tsx    |  4 ++--
 .../PersonalInfoForm/components/BirthDateForm.tsx   | 13 ++++---------
 src/shared/vo/date.ts                               |  2 +-
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/entities/profile/api/__mock__/profile.mock.ts b/src/entities/profile/api/__mock__/profile.mock.ts
index 1b6b258..9a6a163 100644
--- a/src/entities/profile/api/__mock__/profile.mock.ts
+++ b/src/entities/profile/api/__mock__/profile.mock.ts
@@ -1,8 +1,9 @@
 import { ProfileSummary } from 'src/entities/profile/types/profileSummary';
+import dayjs from 'dayjs';
 
 export const profileMock: ProfileSummary = {
   name: '강이름',
-  birthDate: new Date('1996-05-15').toString(),
+  birthDate: dayjs('1996/05/15').toString(),
   gender: 'MALE',
   height: 160,
   hobbies: ['뜨개질'],
diff --git a/src/entities/profile/ui/MyProfile/components/PersonalInfoGrid.tsx b/src/entities/profile/ui/MyProfile/components/PersonalInfoGrid.tsx
index 3bbe165..9f0838e 100644
--- a/src/entities/profile/ui/MyProfile/components/PersonalInfoGrid.tsx
+++ b/src/entities/profile/ui/MyProfile/components/PersonalInfoGrid.tsx
@@ -4,13 +4,13 @@ import { getReligionText } from '../../../lib/getReligionText';
 import { AvatarList } from '../../../../../shared/ui/AvatarList/AvatarList';
 import { getJobText } from '../../../lib/getJobText';
 import { getLocationText } from '../../../lib/getLocationText';
-import { calculateAge } from '../../../../../shared/vo/date';
+import { calculateAge, convertDateObjectToDate } from '../../../../../shared/vo/date';
 import { useTranslation } from 'react-i18next';
 import { MyProfile } from '../../../model/myProfileStore';
 
 export const PersonalInfoGrid = ({ profile }: { profile: MyProfile }) => {
   const { t } = useTranslation();
-  const age = calculateAge(new Date(`${profile.birthDate.year}-${profile.birthDate.month}-${profile.birthDate.date}`));
+  const age = calculateAge(convertDateObjectToDate(profile.birthDate));
   return (
     <div className={styles.Grid}>
       <div className={styles.GridRow}>
diff --git a/src/processes/my_profile/PersonalInfoForm/components/BirthDateForm.tsx b/src/processes/my_profile/PersonalInfoForm/components/BirthDateForm.tsx
index dcf8e5e..863af97 100644
--- a/src/processes/my_profile/PersonalInfoForm/components/BirthDateForm.tsx
+++ b/src/processes/my_profile/PersonalInfoForm/components/BirthDateForm.tsx
@@ -1,8 +1,7 @@
 import styles from 'src/processes/my_profile/PersonalInfoForm/PersonalInfoForm.module.css';
 import { Select } from 'src/shared/ui/Select/Select';
-import { useMemo } from 'react';
 import { useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
-import { calculateAge } from 'src/shared/vo/date';
+import { useProfileAge } from 'src/entities/profile/lib/useProfileAge';
 
 const MINIMUM_YEAR = 1980;
 const YearOptionList = Array.from({ length: new Date().getFullYear() - MINIMUM_YEAR + 1 })
@@ -20,22 +19,18 @@ export const BirthDateForm = () => {
   const year = useMyProfileStore((state) => state.birthDate?.year)?.toString();
   const month = useMyProfileStore((state) => state.birthDate?.month)?.toString();
   const date = useMyProfileStore((state) => state.birthDate?.date)?.toString();
+  const age = useProfileAge();
   const setYear = useMyProfileStore((state) => state.setBirthYear);
   const setMonth = useMyProfileStore((state) => state.setBirthMonth);
   const setDate = useMyProfileStore((state) => state.setBirthDate);
-  const calculatedAge = useMemo(() => {
-    if (!year || !month || !date) {
-      return '--';
-    }
 
-    return calculateAge(new Date(`${year}-${month}-${date}`));
-  }, [year, month, date]);
+  const hasFullDate = year && month && date;
 
   return (
     <fieldset>
       <legend className={styles.Legend}>나이</legend>
       <div className={styles.InputGroup}>
-        <span className={styles.AgeInfo}>만 {calculatedAge}세</span>
+        <span className={styles.AgeInfo}>만 {hasFullDate ? age : '--'}세</span>
         <Select required value={year ?? ''} placeholder={'YYYY'} onValueChange={(value) => setYear(Number(value))}>
           {YearOptionList.map((year) => (
             <Select.Item key={year} value={year} text={year.toString()} />
diff --git a/src/shared/vo/date.ts b/src/shared/vo/date.ts
index 76c2137..e982cfe 100644
--- a/src/shared/vo/date.ts
+++ b/src/shared/vo/date.ts
@@ -13,7 +13,7 @@ export const isValidDate = (date: Partial<DateObj>) => {
 export const convertDateObjectToDate = ({ year, month, date }: Partial<DateObj>) => {
   if (!year || !month || !date) return new Date();
 
-  return new Date(`${year}-${month}-${date}`);
+  return dayjs(`${year}/${month}/${date}`).toDate();
 };
 
 export const convertDateToDateObject = (date: Date): DateObj => {