diff --git a/src/assets/kakao-icon.png b/src/assets/kakao-icon.png new file mode 100644 index 0000000..7b4ed7a Binary files /dev/null and b/src/assets/kakao-icon.png differ 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 = () => {