Merge pull request #20 from collie-jun/main

Fix: 닉네임 조회

travelday-fe/src/pages/userPage/myPage.jsx

@@ -9,9 +9,10 @@ import axios from 'axios';
 
 const MyPage = () => {
   const navigate = useNavigate();
-  const [nickname, setNickname] = useState('collie');
+  const [nickname, setNickname] = useState(''); // 초기값을 빈 문자열로 설정
   const [showModal, setShowModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState(''); 
+  const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
 
   useEffect(() => {
     const token = localStorage.getItem('accessToken');
@@ -22,6 +23,8 @@ const MyPage = () => {
       return;
     }
 
+    fetchKakaoUserProfile(token); 
+
   }, [navigate]);
 
   const fetchKakaoUserProfile = async (token) => {
@@ -37,11 +40,14 @@ const MyPage = () => {
         const data = response.data;
         const nickname = data.nickname; 
         setNickname(nickname);
+        setIsLoading(false); // 닉네임을 받아온 후 로딩 상태를 false로 설정
+        console.log("Fetched Nickname:", nickname); // 닉네임이 제대로 들어오는지 확인
       } else {
         throw new Error('사용자 정보 요청 실패');
       }
     } catch (error) {
       setErrorMessage('사용자 정보를 불러오는 중 오류가 발생했습니다.');
+      setIsLoading(false); // 오류 발생 시에도 로딩 상태를 false로 설정
     }
   };
 
@@ -59,7 +65,7 @@ const MyPage = () => {
       navigate('/');
     } catch (error) {
       console.error('로그아웃 중 오류 발생:', error);
-      alert('로그아웃 중 오류가 발생했습니다.'); // 사용자에게 알림
+      alert('로그아웃 중 오류가 발생했습니다.'); 
     }
   };
 
@@ -87,30 +93,6 @@ const MyPage = () => {
     }
   };
 
-  // const handleNicknameCheck = async (nickname) => {
-  //   try {
-  //     const response = await axios.get(`https://api.thetravelday.co.kr/api/nickname/check`, {
-  //       params: { nickname },
-  //       withCredentials: true,
-  //     });
-
-  //     if (response.status === 200) {
-  //       const isAvailable = response.data.isAvailable;
-  //       if (!isAvailable) {
-  //         alert('이미 사용 중인 닉네임입니다.');
-  //       } else {
-  //         alert('사용 가능한 닉네임입니다.');
-  //       }
-  //     } else {
-  //       throw new Error('닉네임 중복 확인 실패');
-  //     }
-  //   } catch (error) {
-  //     console.error('닉네임 중복 확인 중 오류 발생:', error);
-  //     alert('닉네임 중복 확인 중 오류가 발생했습니다.'); // 사용자에게 알림
-  //   }
-  // };
-  //닉네임 설정 부분
-
   const handleRecommend = async () => {
     try {
       await navigator.clipboard.writeText('https://www.thetravelday.co.kr');
@@ -125,6 +107,10 @@ const MyPage = () => {
     navigate('/nickname');
   };
 
+  if (isLoading) {
+    return <div>로딩 중...</div>; // 로딩 상태일 때 표시할 내용
+  }
+
   return (
     <PageContainer>
       <SimpleHeader title="마이 페이지" showBackButton={true} />
@@ -141,7 +127,7 @@ const MyPage = () => {
           </NicknameContainer>
         </UserInfo>
 
-        <Separator /> {/* 회색 가로선 추가 */}
+        <Separator /> 
 
         <Button onClick={handleRecommend}>친구에게 추천하기</Button>
         <Button onClick={handleLogout}>로그아웃</Button>
@@ -171,6 +157,7 @@ export default MyPage;
 
 
 
+
 const PageContainer = styled.div`
   display: flex;
   flex-direction: column;

travelday-fe/src/pages/userPage/nicknamePage.jsx

@@ -39,9 +39,9 @@ const LoginPage = () => {
   const handleSubmit = async () => {
     const token = localStorage.getItem('accessToken');
 
-    // if (!token) {
-    //   return;
-    // }
+    if (!token) {
+      return;
+    }
 
     try {
       const response = await axios.put(
@@ -57,7 +57,6 @@ const LoginPage = () => {
 
       if (response.status === 200) {
         console.log('닉네임이 성공적으로 변경되었습니다:', response.data);
-        localStorage.setItem('nickname', nickname); 
       } else {
         console.error('닉네임 변경 실패:', response.statusText);
       }

travelday-fe/src/pages/userPage/oAuth2LoginSuccessPage.jsx

@@ -19,35 +19,7 @@ const OAuth2LoginSuccessPage = () => {
       console.log("로그인 성공");
     };
 
-    const fetchNickname = async () => {
-      try {
-        const response = await fetch('https://api.thetravelday.co.kr/api/user', { 
-          method: 'GET',
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-            'Content-Type': 'application/json',
-          },
-        });
-
-        if (response.ok) {
-          const data = await response.json();
-          const { nickname } = data;  // 닉네임만 가져오기
-
-          // 닉네임 로컬 스토리지에 저장
-          localStorage.setItem('nickname', nickname);
-
-          // 닉네임 확인
-          console.log("Nickname:", nickname);
-        } else {
-          console.error('사용자 정보 요청 실패:', response.statusText);
-        }
-      } catch (error) {
-        console.error('사용자 정보 요청 중 오류 발생:', error);
-      }
-    };
-
-    storeAccessToken();   
-    fetchNickname();     
+    storeAccessToken(); 
 
     // 로그인 성공 후 메인 페이지로 이동
     navigate('/');