feature-057: 내 정보 페이지 > 생년월일 null 처리

teamViNO · Feb 17, 2024 · 1df2991 · 1df2991
1 parent adec7a4
commit 1df2991
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 22 deletions.
diff --git a/src/components/ProfilePage/Account/Account.tsx b/src/components/ProfilePage/Account/Account.tsx
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { getMyInfoAPI, updateMyInfoAPI } from '@/apis/user';
 
@@ -14,21 +14,24 @@ import { GENDER_TYPE_LIST } from '@/constants/user';
 import useFocus from '@/hooks/useFocus';
 
 import { APIBaseResponse } from '@/models/config/axios';
+import { MyInfoResponse } from '@/models/user';
 
 import { userInfoState } from '@/stores/user';
 
 import theme from '@/styles/theme';
 import { Box } from '@/styles/ProfilePage';
 
+import { getDate } from '@/utils/date';
 import { validateNickname } from '@/utils/validation';
 
 import { ChangePassword } from './ChangePassword';
 
 const Account = () => {
   const timerRef = useRef<NodeJS.Timeout>();
-  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
-  const [nickname, setNickname] = useState(userInfo?.nick_name || '');
-  const [gender, setGender] = useState(userInfo?.gender || '');
+  const userInfo = useRecoilValue(userInfoState) as MyInfoResponse;
+  const setUserInfo = useSetRecoilState(userInfoState);
+  const [nickname, setNickname] = useState(userInfo.nick_name || '-');
+  const [gender, setGender] = useState(userInfo.gender);
 
   const [isDuplicateNickname, setIsDuplicateNickname] = useState(false);
   const [isErrorNickname, setIsErrorNickname] = useState(
@@ -39,13 +42,13 @@ const Account = () => {
   const [nicknameInputRef, focusNicknameInput, isNicknameFocus] =
     useFocus<HTMLInputElement>();
 
-  const isSocialAccount = !!userInfo?.platform;
-  const birthDate = new Date(userInfo?.birth_date || '');
+  const isSocialAccount = !!userInfo.platform;
+  const birthDate = getDate(userInfo.birth_date);
 
   const isDisabled = useMemo(() => {
     if (isErrorNickname) return true;
 
-    return !(nickname !== userInfo?.nick_name || gender !== userInfo?.gender);
+    return !(nickname !== userInfo.nick_name || gender !== userInfo.gender);
   }, [userInfo, nickname, gender, isErrorNickname]);
 
   const nicknameInputStyle = {
@@ -196,11 +199,11 @@ const Account = () => {
 
           <div className="input-box disabled">
             <div style={{ display: 'flex', flex: '1 1 auto' }}>
-              {userInfo?.name}
+              {userInfo.name}
             </div>
 
             <span className="input-guide">
-              {userInfo?.name.length}/7 (공백포함)
+              {userInfo.name.length}/7 (공백포함)
             </span>
           </div>
         </div>
@@ -225,21 +228,17 @@ const Account = () => {
           <span className="group-title">생년월일</span>
 
           <div style={{ display: 'flex', gap: 12 }}>
-            <div className="input-box disabled">{birthDate.getFullYear()}</div>
-            <div className="input-box disabled">
-              {String(birthDate.getMonth() + 1).padStart(2, '0')}
-            </div>
-            <div className="input-box disabled">
-              {String(birthDate.getDate()).padStart(2, '0')}
-            </div>
+            <div className="input-box disabled">{birthDate.year}</div>
+            <div className="input-box disabled">{birthDate.month}</div>
+            <div className="input-box disabled">{birthDate.date}</div>
           </div>
         </div>
 
         <div className="account-group">
           <span className="group-title">전화번호</span>
 
           <div className="input-box disabled">
-            {userInfo?.phone_number || '-'}
+            {userInfo.phone_number || '-'}
           </div>
         </div>
 
@@ -260,7 +259,7 @@ const Account = () => {
                 width={40}
               />
 
-              <span>{userInfo?.email}</span>
+              <span>{userInfo.email}</span>
             </div>
           </div>
         )}
@@ -271,7 +270,7 @@ const Account = () => {
           <div className="account-group">
             <span className="group-title">계정</span>
 
-            <div className="input-box disabled">{userInfo?.email}</div>
+            <div className="input-box disabled">{userInfo.email}</div>
           </div>
 
           <ChangePassword onRefresh={refreshMyInfo} />

diff --git a/src/models/user.ts b/src/models/user.ts
@@ -26,18 +26,18 @@ export interface JoinRequest {
 export interface JoinResponse {}
 
 export interface MyInfoResponse {
-  birth_date: string;
+  birth_date?: string;
   email: string;
   gender: string;
   name: string;
-  nick_name: string;
+  nick_name?: string;
   phone_number: string;
   platform?: 'kakao' | 'naver';
 }
 
 export interface UpdateMyInfoRequest {
   nick_name: string;
-  gender: string;
+  gender?: string;
 }
 
 export interface UpdatePasswordRequest {

diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -23,3 +23,20 @@ export const formatDate = (date?: string) => {
 
   return `${year}년 ${month}월 ${day}일`;
 };
+
+export const getDate = (dateString?: string) => {
+  const result = {
+    year: '-',
+    month: '-',
+    date: '-',
+  };
+
+  if (dateString) {
+    const date = new Date(dateString);
+    result.year = String(date.getFullYear());
+    result.month = String(date.getMonth() + 1).padStart(2, '0');
+    result.date = String(date.getDate()).padStart(2, '0');
+  }
+
+  return result;
+};