1. 코드 리뷰 과정

: feature 별로 PR 후 팀원들과 코드 리뷰를 진행 🔥

2. 코드 리뷰 요약

모상빈님

• 1. getErrorMessage 유틸 함수로 request 에러 타입 핸들링을 처리

  export const getErrorMessage = (error) => {
    if (axios.isAxiosError(error)) {
      return error.response.data.message;
    }
  
    if (error instanceof Error) {
      return error.message;
    }
  
    return String(error);
  };
  

• 2. authHeader : request 헤더의 token을 자동으로 설정해주는 함수

  export const authHeader = () => {
    const token = getTokenFromLocalStorage();
    return {
      headers: {
        authorization: `Bearer ${token}`,
      },
    };
  };
  
  export const getTokenFromLocalStorage = () => {
    const result = localStorage.getItem("access_token");
    const token = result ? JSON.parse(result) : null;
    return token;
  };
  

조성호님

• 1. axiosPublic & axiosPrivate 로 인스턴스 타입 분리

import axios from "axios";

const BASE_URL = "<https://pre-onboarding-selection-task.shop>";
const JSON_TYPE = "application/json";

export const axiosPublic = axios.create({
  baseURL: BASE_URL,
});
axiosPublic.defaults.headers.post["Content-Type"] = JSON_TYPE;

export const axiosPrivate = axios.create({
  baseURL: BASE_URL,
});
axiosPrivate.defaults.headers.post["Content-Type"] = JSON_TYPE;
axiosPrivate.defaults.headers.put["Content-Type"] = JSON_TYPE;

export const setPrivateHeaders = (token) => {
  axiosPrivate.defaults.headers.common["Authorization"] = `Bearer ${token}`;
};

• 2. Public & Protected 으로 라우팅을 분리해 로그인 여부에 따른 리다이렉팅 역할을 컴포넌트에서 분리

import { Navigate, Outlet } from "react-router-dom";

const Public = () => {
  const token = localStorage.getItem("token");

  return token ? <Navigate to="/todo" /> : <Outlet />;
};

export default Public;

이의연님

• 1. formData map 패턴

// formData.js

export const SIGNUP_INFO = {
  status: '회원가입',
  engStatus: 'signup',
  idx: 0,
  bottomText: '로그인',
  inputLists: [
    {
      text: '이메일',
      type: 'text',
      value: 'email',
      placeholder: `'@' 를 포함한 이메일을 입력해주세요`,
    },
    {
      text: '비밀번호',
      type: 'password',
      value: 'password',
      placeholder: '8자리 이상의 비밀번호를 입력해주세요',
    },
  ],
  btnLists: [
    {
      id: 0,
      text: '회원가입',
      bg: '#8C3FDB',
      blackFont: false,
      name: 'signup',
    },
  ],
};

export const LOGIN_INFO = {
  status: '로그인',
  engStatus: 'login',
  idx: 1,
  bottomText: '회원가입하기',
  inputLists: [
    {
      text: '이메일',
      type: 'text',
      value: 'email',
      placeholder: '이메일을 입력해주세요',
    },
    {
      text: '비밀번호',
      type: 'password',
      value: 'password',
      placeholder: '비밀번호을 입력해주세요',
    },
  ],
  btnLists: [
    {
      id: 0,
      text: '로그인',
      bg: '#8C3FDB',
      blackFont: false,
      name: 'email',
    },
  ],
};

• 2. theme 을 활용한 justify 자동화