diff --git a/src/components/pages/my/edit/editPage.tsx b/src/components/pages/my/edit/editPage.tsx index 4b2b2ee..ae4aaaa 100644 --- a/src/components/pages/my/edit/editPage.tsx +++ b/src/components/pages/my/edit/editPage.tsx @@ -68,26 +68,36 @@ const EditPage = () => { const debouncedNickname = useDebounce(nickname || '', 500) useEffect(() => { - if (debouncedNickname && debouncedNickname.length > 0) { - async function validateNickname() { - try { - const res = await checkNickname(debouncedNickname) - if (!res.isAvailable) { - setNickNameMessage('이미 사용 중인 닉네임입니다.') - } else if (!res.isMeaningful) { - setNickNameMessage('의미 있는 닉네임을 입력해주세요.') - } else if (!res.isClean) { - setNickNameMessage('욕설을 포함한 닉네임은 사용할 수 없습니다.') - } else { - setNickNameMessage(null) - } - } catch { - setNickNameMessage('닉네임 체크 중 오류가 발생했습니다.') + // 닉네임을 입력하지 않았거나 빈 문자열이라면 초기화 후 리턴 + if (!debouncedNickname) { + setNickNameMessage(null) + return + } + + // 현재 내 닉네임과 같다면 중복 체크를 하지 않음 + if (debouncedNickname === myPageData?.nickname) { + setNickNameMessage(null) + return + } + + async function validateNickname() { + try { + const res = await checkNickname(debouncedNickname) + if (!res.isAvailable) { + setNickNameMessage('이미 사용 중인 닉네임입니다.') + } else if (!res.isMeaningful) { + setNickNameMessage('의미 있는 닉네임을 입력해주세요.') + } else if (!res.isClean) { + setNickNameMessage('욕설을 포함한 닉네임은 사용할 수 없습니다.') + } else { + setNickNameMessage(null) } + } catch { + setNickNameMessage('닉네임 체크 중 오류가 발생했습니다.') } - validateNickname() } - }, [debouncedNickname]) + validateNickname() + }, [debouncedNickname, myPageData]) useEffect(() => { console.log('전역 상태 nickname', myPageData?.nickname) @@ -258,6 +268,7 @@ const EditPage = () => { setMbtiBottomSheetOpen(false)} setMbti={setMbti} + mbti={mbti as MBTI} /> )} diff --git a/src/components/pages/onboarding/mbtiBottomSheet.tsx b/src/components/pages/onboarding/mbtiBottomSheet.tsx index 29cd15d..3d830e2 100644 --- a/src/components/pages/onboarding/mbtiBottomSheet.tsx +++ b/src/components/pages/onboarding/mbtiBottomSheet.tsx @@ -7,13 +7,15 @@ import { MBTI } from '@/types/member' interface MBTIBottomSheetProps { onClose: () => void setMbti: (mbti: MBTI) => void + mbti?: MBTI } -const MBTIBottomSheet = ({ onClose, setMbti }: MBTIBottomSheetProps) => { - const [selectedEI, setSelectedEI] = useState('') - const [selectedNS, setSelectedNS] = useState('') - const [selectedTF, setSelectedTF] = useState('') - const [selectedPJ, setSelectedPJ] = useState('') +const MBTIBottomSheet = ({ onClose, setMbti, mbti }: MBTIBottomSheetProps) => { + console.log('[MBTIBottomSheet] ', mbti?.[0]) + const [selectedEI, setSelectedEI] = useState(mbti?.[0] ?? '') + const [selectedNS, setSelectedNS] = useState(mbti?.[1] ?? '') + const [selectedTF, setSelectedTF] = useState(mbti?.[2] ?? '') + const [selectedPJ, setSelectedPJ] = useState(mbti?.[3] ?? '') const handleSelectMBTI = () => { onClose()