From 61bb92e92c2ebe1589790d31b98082b56e01a1bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=B1?= <whistle_js@naver.com>
Date: Wed, 14 Feb 2024 00:30:26 +0900
Subject: [PATCH] =?UTF-8?q?feature-058:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=A4=91=EB=B3=B5=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/kakao-icon.png                     | Bin 0 -> 643 bytes
 .../ProfilePage/Account/Account.tsx           |  29 +++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/kakao-icon.png

diff --git a/src/assets/kakao-icon.png b/src/assets/kakao-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b4ed7ac4429813ceb75820199f8b618fd2bc1f1
GIT binary patch
literal 643
zcmV-}0(||6P)<h;3K|Lk000e1NJLTq001Ze001Tk1^@s6w)EK@00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0vJg|K~#7F?U=nU
zLs1xqf9Ljg#VR2xVPU9I7ax;N4XhScLd>F=eKb}UBL=lqB$y1A8dyvC1Il7Rj`Q|t
zd)rFf_uSh$5>L|PoZfS9pZlKAz5+G8Jz@kBN$FrhNW{<_azY>%iC|T<<KBBglnOGB
zw)Y5D)He(GO(eG64<*`-0#!v>&c(SZ4!{m_?mI?F(xF;0a`wm(17A)MuX)5=7kSvp
zs1uE9Q%jj}q_nDQt57pLDb%teVKELY$3=+TKUK=H4unD=!NLo$e*m1E0ynq1?qxUu
zOiuwr33FlNF}Sk_tZmjyeMeghFh2_{FM<tQkc1}Hk6m7YO>zv_-PFQ<VNa5!l$jin
z$?E$#umtxH^(P2)Kj#J6f?=?}<-aXUkY;KaaGt{w^fP0_ehy18)`?Jv_xo?l5~M{p
z4B~zM+p^X{>YCm}u&(Y>JIdLi|DA;uL0VvGp$)=Dinr~t7i!uKj&}LukzVfXK;O^7
zcrSiXCzqbY&+SNTZbt9LoGq?|@oA>;j5?8VPjo24LxXz8nuwJ!7QDHul<8PSV>7HX
zpciAoldO&m9igcE8ilc7tCG9UHYRFb{{J)u#eP94s?%MTk#kfIFat}WoS`TtEKy9o
zS%*q$bvw~cT&Qvy_K~J+>)%LVQh~mJ9g$3z<ftNQuTnx&C9_j%fX30Jh!$6p4`hUc
d<F6rC<`WHMoz%U~n=SwV002ovPDHLkV1oAP6#@VN

literal 0
HcmV?d00001

diff --git a/src/components/ProfilePage/Account/Account.tsx b/src/components/ProfilePage/Account/Account.tsx
index 4175d1a..29b45d3 100644
--- a/src/components/ProfilePage/Account/Account.tsx
+++ b/src/components/ProfilePage/Account/Account.tsx
@@ -1,9 +1,11 @@
+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';
 
@@ -11,6 +13,8 @@ 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>