Merge pull request #66 from teamViNO/feature-058

feature-058: 카카오 아이콘 추가 및 닉네임 중복 현상 추가
teamViNO · Feb 13, 2024 · 8241e80 · 8241e80
2 parents 5d07803 + 61bb92e
commit 8241e80
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/assets/kakao-icon.png b/src/assets/kakao-icon.png
diff --git a/src/components/ProfilePage/Account/Account.tsx b/src/components/ProfilePage/Account/Account.tsx
@@ -1,16 +1,20 @@
+import { AxiosError } from 'axios';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { getMyInfoAPI, updateMyInfoAPI } from '@/apis/user';
 
 import NaverIconImage from '@/assets/naver-icon.png';
+import KakaoIconImage from '@/assets/kakao-icon.png';
 
 import { Tooltip } from '@/components/common';
 
 import { GENDER_TYPE_LIST } from '@/constants/user';
 
 import useFocus from '@/hooks/useFocus';
 
+import { APIBaseResponse } from '@/models/config/axios';
+
 import { userInfoState } from '@/stores/user';
 
 import theme from '@/styles/theme';
@@ -46,7 +50,7 @@ const Account = () => {
 
   const nicknameInputStyle = {
     border: `1.5px solid ${
-      isErrorNickname
+      isErrorNickname || isDuplicateNickname
         ? theme.color.red
         : isNicknameFocus
           ? theme.color.gray500
@@ -98,8 +102,14 @@ const Account = () => {
         showTooltip();
         refreshMyInfo();
       }
-    } catch (e) {
-      console.error(e);
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        const { code } = error.response?.data as APIBaseResponse;
+
+        if (code === 'DUPLICATE_NICKNAME') {
+          setIsDuplicateNickname(true);
+        }
+      }
     }
   };
 
@@ -227,7 +237,9 @@ const Account = () => {
         <div className="account-group">
           <span className="group-title">전화번호</span>
 
-          <div className="input-box disabled">{userInfo?.phone_number}</div>
+          <div className="input-box disabled">
+            {userInfo?.phone_number || '-'}
+          </div>
         </div>
 
         {isSocialAccount && (
@@ -238,7 +250,14 @@ const Account = () => {
               className="input-box disabled"
               style={{ display: 'flex', alignItems: 'center', gap: 10 }}
             >
-              <img src={NaverIconImage} width={40} />
+              <img
+                src={
+                  userInfo.platform === 'kakao'
+                    ? KakaoIconImage
+                    : NaverIconImage
+                }
+                width={40}
+              />
 
               <span>{userInfo?.email}</span>
             </div>