5주차 미션 1,2,3

[2yunkind]

📚 주차 / 미션

• 5주차 1,2,3번째 미션

---

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약

---회원가입과 로그인, 구글 로그인까지 작업

✨ 상세 작업 내용

• protected route와 refresh token을 사용하여 새롭게 회원가입과 로그인 구
• social login google 까지 구현

---

📸 스크린샷

---

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

• GoogleLoginRedirectPage 파일과 회원가입과 로그인 부분에서 정상적인 토큰 부여가 되지 않음(백엔드와의 연결에서의 문제점으로 추정)

---

✅ 체크리스트

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

[yewon20804]

올려주신 미션1,2,3 완료 커밋을 기준으로 코드리뷰 진행하셨습니다 ! 미션 2를 진행하시면서 나타난 오류가 코멘트 내용에서 있을 수 있으니 꼭 확인해보세요 ☺️👍

---

useLocalStorage를 인터셉터 내부에서 호출

//  현재 
axiosInstance.interceptors.request.use((config) => {
    const { getItem } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken); 
    ...
});

React Hook은 React 안에서만 사용할 수 있습니다 ! axios 인터셉터는 React가 아니라 일반 함수라서 Hook을 쓰면 에러가 납니다. 그래서 여기서는 localStorage를 직접 사용하는 방식으로 바꿔주셔야 합니다 ☺️

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

---

accesssToken 오타

return data.data.accesssToken;

현재 Refresh 성공 후 새 토큰을 반환해야 하는데, 오타로 인해 undefined가 반환됩니다 ! 이 값으로 원래 요청을 재시도하면 Authorization: Bearer undefined가 설정되는 문제가 발생하기 때문에 수정해주세요 !

---

App.tsx에서 GoogleLoginRedirectPage import 누락

//  현재 
{path:"v1/auth/google/callback", element:<GoogleLoginRedirectPage/>}

현재 import 없이 페이지를 넣었기 때문에 인식을 못하는 에러가 발생합니다 ! import문으로 해당 페이지를 선언해주세요 !

import GoogleLoginRedirectPage from "../pages/GoogleLoginRedirectPage";

---

auth.ts의 import 잘못된 경로

//  현재 
import { axiosInstance } from "../types/axios.ts"

현재 경로가 types/ 즉 axios 타입을 선언한 경로에서 axiosInstance를 가져오고 있는데요,
실제 인스턴스가 아닌 타입 파일에서 import하고 있어 잘못된 경로로 보입니다 !

//  수정안
import { axiosInstance } from "./axios";

다음과 같이 경로를 수정해주세요 !

---

GoogleLoginRedirectPage.tsx에서 쿼리 파라미터 키 이름

//  현재 
const accessToken = urlParams.get("LOCAL_STORAGE_KEY.accessToken");

현재 URL에 실려 오는 쿼리 파라미터의 키 이름을 LOCAL_STORAGE_KEY.accessToken으로 꺼내려 하고 있어서 찾지 못하는 상황입니다. 서버에서 실제로 내려주는 파라미터명으로 변경해야 값을 얻어 올 수 있습니다 !

//  수정안
const accessToken = urlParams.get("accessToken");
const refreshToken = urlParams.get("refreshToken");