[Refactor] 스토리지 변경 & 중복 호출 방지 제거

package.json

@@ -19,8 +19,7 @@
     "imagemin-webp": "^8.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.7.0",
-    "tailwindcss": "^4.1.11"
+    "react-router-dom": "^7.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -29,10 +28,13 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.12",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",

src/api/PostOAuth.tsx

@@ -36,7 +36,7 @@ export default function PostOAuth() {
 
             const data: { accessToken: string; isOnboarded: boolean } = await res.json();
 
-            localStorage.setItem('accessToken', data.accessToken);
+            sessionStorage.setItem('accessToken', data.accessToken);
 
             if (data.isOnboarded) {
                 navigate('/main', { replace: true });

src/api/fetchChapters.ts

@@ -3,7 +3,7 @@ import type { Chapter } from '../types/@common/chapter';
 import { transformChapters } from '../utils/transformChapter';
 
 export default async function fetchChapters(): Promise<Chapter[]> {
-    const accessToken = localStorage.getItem('accessToken');
+    const accessToken = sessionStorage.getItem('accessToken');
     try {
         const response = await fetch(`https://grav-it.inuappcenter.kr/api/v1/learning/chapters`, {
             method: 'GET',

src/api/fetchMainInfo.ts

@@ -3,7 +3,7 @@ import { ApiError } from '../types/@common/api';
 import type MainPageResponse from '../types/api/main';
 
 export default async function fetchMainInfo(): Promise<MainPageResponse> {
-    const accessToken = localStorage.getItem('accessToken');
+    const accessToken = sessionStorage.getItem('accessToken');
 
     try {
         const response = await fetch(API_ENDPOINTS.main.base, {

src/api/getMypage.ts

@@ -0,0 +1,28 @@
+import { API_ENDPOINTS } from '../constants/api';
+
+export const getMypage = async () => {
+  const accessToken = sessionStorage.getItem('accessToken');
+
+  try {
+    const response = await fetch(`${API_ENDPOINTS.users.base}/my-page`, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', 
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error('Error response:', response.status, errorData);
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Fetch error:', error);
+    throw error;
+  }
+};

src/api/getTierLeagues.ts

@@ -0,0 +1,29 @@
+import { API_ENDPOINTS } from '../constants/api';
+
+export const getTierLeagues = async (id: number, num: number) => {
+  const accessToken = sessionStorage.getItem('accessToken');
+
+  try {
+    const response = await fetch(API_ENDPOINTS.leagues.tier(id, num), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', 
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error('Error response:', response.status, errorData);
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error('Fetch error:', error);
+    throw error;
+  }
+};

src/api/getUserLeagues.ts

@@ -0,0 +1,29 @@
+import { API_ENDPOINTS } from '../constants/api';
+
+export const getUserLeagues = async (num: number) => {
+  const accessToken = sessionStorage.getItem('accessToken');
+
+  try {
+    const response = await fetch(API_ENDPOINTS.leagues.user(num), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error('Error response:', response.status, errorData);
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error('Fetch error:', error);
+    throw error;
+  }
+};

src/api/patchOnBoarding.tsx

@@ -3,7 +3,7 @@ import type { AxiosResponse } from 'axios';
 import { API_ENDPOINTS } from '../constants/api';
 
 export const PatchOnBoarding = async (nickname: string, profilePhotoNumber: number) => {
-    const accessToken = localStorage.getItem('accessToken');
+    const accessToken = sessionStorage.getItem('accessToken');
 
     try {
         const response: AxiosResponse = await axios.patch(