Week5/sori m1

[soyun0318]

📚 주차 / 미션

• 5주차 1번째 미션

---

📌 작업 내용

Protected Route를 활용하여 페이지 안전하게 보호하기

---

✨ 상세 작업 내용

---

📸 스크린샷

---

❓ 리뷰어가 알아야 할 사항 / 질문

---

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

5주차 미션 1 수고하셨습니다 ! Protected Route 구현하셨고, ProtectedLayout에서 accessToken 유무로 분기하는 로직이 깔끔하게 잘하신 것 같아요 👍
몇 가지 수정이 필요한 부분들을 코멘트로 남기겠습니다 :)

---

미사용 import 제거 필요

SignupPage.tsx

//  사용되지 않는 import들
import { data } from "react-router-dom";
import { is } from "zod/locales";

Login.tsx

import { use } from 'react';

import 모두 코드 내에서 실제로 사용되지 않고 있습니다 ! 특히 import { is }는 존재하지 않는 경로라 런타임 에러가 발생할 수 있어서 삭제해 주시면 좋을 것 같아요 !

---

axios 헤더 정적 초기화

//  현재 코드
export const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_SERVER_API_URL,
    headers: {
        Authorization: `Bearer ${localStorage.getItem(LOCAL_STORAGE_KEY.accessToken)}`,
    }
});

axios.create() 가 호출되는 최초 실행 시점에서 토큰을 헤더에 고정시키기 때문에,
로그인 후 토큰이 localStorage에 저장되더라도 업데이트가 되지 않습니다 ! 이러면 로그인 이후 API 요청이 항상 Authorization: Bearer null 로 나가게 되어 오류가 날 수 있습니다.

//  권장 코드
export const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_SERVER_API_URL,
});

axiosInstance.interceptors.request.use((config) => {
    const token = localStorage.getItem(LOCAL_STORAGE_KEY.accessToken);
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

---

오타

src/pages/myPage.tsx

//  오타
const navigae = useNavigate();

// ...
navigae("/");  

가독성이 떨어질 수 있어서 수정해주시면 좋을 것 같아요 👍

---

.env 파일 포함

week4/UMC-FE/.env

env 파일이 원격에 올라와 있어서 .gitignore에 .env 추가해주시고, 이미 올라온 .env 를 지우기 위해 git rm --cached .env도 진행해주세요 !