refactor: 코드 정리

- 불필요한 로직 제거
- 올바르지 못한 url 수정

Author: yechan-kim

src/pages/MyPage.jsx

@@ -5,26 +5,29 @@ import {useNavigate} from 'react-router-dom';
 import styles from '../styles/MyPage.module.css';
 
 function HomePage() {
-    const [user, setUser] = useState(null);
-    const [character, setCharacter] = useState(null);
-    const [name, setName] = useState('');
-    const {username} = useAuth();
-    const navigate = useNavigate();
+    const [user, setUser] = useState(null); // 사용자 정보
+    const [character, setCharacter] = useState(null);// 캐릭터 정보
+    const [name, setName] = useState(''); // 캐릭터 이름
+    const {username} = useAuth(); // 사용자 이름
+    const navigate = useNavigate(); // 페이지 이동
 
+    // 사용자의 이름이 없으면 홈으로 이동
     useEffect(() => {
         if (!username) {
             navigate('/');
             return;
         }
 
+        // 사용자 정보를 호출
         const fetchUserData = async () => {
             try {
-                const token = localStorage.getItem('accessToken');
+                const token = localStorage.getItem('accessToken'); // 토큰을 로컬 스토리지에서 가져옴
+                // 사용자 정보를 가져옴
                 const response = await axios.get(`${import.meta.env.VITE_DEFAULT_API_URI}/v1/user/profile`, {
                     headers: {Authorization: `Bearer ${token}`},
                 });
-                setUser(response.data.result);
-                setCharacter(response.data.result.info);
+                setUser(response.data.result); // 사용자 정보를 상태에 저장
+                setCharacter(response.data.result.info); // 캐릭터 정보를 상태에 저장
             } catch (error) {
                 console.error('Error fetching user data:', error);
             }
@@ -33,19 +36,22 @@ function HomePage() {
         fetchUserData();
     }, [username, navigate]);
 
+    // 캐릭터 정보 저장
     const handleSubmit = async (e) => {
         e.preventDefault();
         try {
-            const token = localStorage.getItem('accessToken');
+            const token = localStorage.getItem('accessToken'); // 토큰을 로컬 스토리지에서 가져옴
+            // 캐릭터 정보 저장
             await axios.post(
                 `${import.meta.env.VITE_DEFAULT_API_URI}/v1/user/save-character`,
                 {name},
                 {headers: {Authorization: `Bearer ${token}`}}
             );
+            // 사용자 정보를 다시 불러옴
             const response = await axios.get(`${import.meta.env.VITE_DEFAULT_API_URI}/v1/user/profile`, {
                 headers: {Authorization: `Bearer ${token}`},
             });
-            setCharacter(response.data.result.info);
+            window.location.reload(); // 페이지 새로고침
         } catch (error) {
             console.error('Error saving character:', error);
         }

src/pages/RankingPage.jsx

@@ -2,25 +2,24 @@ import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 const RankingPage = () => {
-    const { rankingName } = useParams();
-    const [rankingData, setRankingData] = useState([]);
-    const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
-    const [error, setError] = useState(null); // 에러 상태 추가
+    const { rankingName } = useParams(); // URL 파라미터 값 가져오기
+    const [rankingData, setRankingData] = useState([]); // 랭킹 데이터
+    const [isLoading, setIsLoading] = useState(true); // 로딩 상태
+    const [error, setError] = useState(null); // 에러 상태
 
+    // 랭킹 데이터 가져오기
     useEffect(() => {
         const fetchRankingData = async () => {
-            setIsLoading(true);
-            setError(null);
+            setIsLoading(true); // 로딩 시작
+            setError(null); // 에러 초기화
             try {
-                console.log(rankingName);
+                // 랭킹 데이터 가져오기
                 const response = await fetch(`${import.meta.env.VITE_DEFAULT_API_URI}/v1/character/ranking/${rankingName}`);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
+
+                // 응답이 성공적이면 데이터를 상태에 저장
                 const data = await response.json();
                 setRankingData(data.result);
             } catch (error) {
-                console.error('Error fetching ranking data:', error);
                 setError('데이터를 가져오는 데 실패했습니다.'); // 에러 메시지 설정
             } finally {
                 setIsLoading(false); // 로딩 종료
@@ -30,13 +29,11 @@ const RankingPage = () => {
         fetchRankingData();
     }, [rankingName]);
 
-    const sortedRankingData = rankingData.sort((a, b) => a.ranking - b.ranking);
-
     return (
         <div>
             {isLoading && <p>로딩 중입니다...</p>} {/* 로딩 상태 표시 */}
             {error && <p style={{ color: 'red' }}>{error}</p>} {/* 에러 메시지 표시 */}
-            {!isLoading && !error && sortedRankingData.length > 0 && (
+            {!isLoading && !error && rankingData.length > 0 && (
                 <table style={{ width: '100%' }}>
                     <thead>
                     <tr>
@@ -50,7 +47,7 @@ const RankingPage = () => {
                     </tr>
                     </thead>
                     <tbody>
-                    {sortedRankingData.map((item, index) => (
+                    {rankingData.map((item, index) => (
                         <tr key={index} onClick={() => window.location.href = `http://localhost:3000/character/${item.info.name}`}>
                             <td>{item.ranking}</td>
                             <td><img src={item.info.characterImage} alt={`${item.info.name} 이미지`}/></td>