[S1] 로그인 관련 예외 처리

[lydiacho]

🔥 Related Issues

• resolved [S1] 로그인 관련 에러 처리  #612

💜 작업 내용

• axios interceptors로 401에러 발생 시 만료페이지로 navigate
• 탭바 비로그인 시 예외 처리
• 상세페이지 비로그인 시 예외 처리

✅ PR Point

401 에러 처리

axios interceptors.response를 통해 401에러 발생 시 만료 페이지로 navigate 해주도록 구현했습니다.
api 파일이 별도로 존재하지만 해당 처리는
useNavigate을 쓰기 위해

• React Component 혹은 custom hook으로 만들어야 하고
• BrowserRouter 내부에 속해야 합니다

따라서 interceptors라는 컴포넌트를 생성하여 예외처리 로직을 구현하고 BroswerRouter 내부에 넣어주었습니다

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { api, removeAccessToken } from '../api';

const Interceptors = () => {
  const navigate = useNavigate();

  useEffect(() => {
    api.interceptors.response.use(
      (res) => res,
      (err) => {
        console.log(err);
        if (err.response.status === 401) {
          removeAccessToken();
          navigate('/expired');
          return new Promise(() => null);
        }
        return Promise.reject(err);
      },
    );
  }, []);

  return null;
};

export default Interceptors;

탭바 비로그인 시 예외 처리

🪫 기존 문제
로그인하지 않는 경우에도 내 타투, 장바구니 페이지로 이동이 가능하여 에러가 발생했습니다

🔋 해결
만들어두신 isLogin 값을 사용해 navigate을 다르게 처리해주었습니다

  const handleClickMyTattooButton = () => {
    isLogin ? navigate('/my-tattoo') : navigate('/login');
  };

  const handleClickCartButton = () => {
    isLogin ? navigate('/cart') : navigate('/login');
  };

상세페이지 비로그인 시 예외 처리

🪫 기존 문제
비로그인 시 상세페이지 조회까진 가능하나, 좋아요 및 구매하기가 불가능해야 합니다
해당 예외 처리가 잘 되어있지 않아 좋아요 및 구매하기 클릭 시 오류가 발생했습니다

🔋 해결
토큰 존재 여부(로그인 여부)를 체크하여 비로그인 시 '로그인이 필요해요' 토스트페이지를 띄우고, false를 반환하는 checkLogin 함수를 만들어
handleClickButton (구매하기 클릭 핸들러), handleClickLike (좋아요 클릭 핸들러) 상단에서 예외처리를 해주었습니다

  const checkLogin = () => {
    if (!getAccessToken()) {  // 로그인 상태가 아닌 경우
      setToast(true);  // '로그인이 필요해요' 토스트 메시지 띄우기 
      return false;
    }
  };

const handleClickButton = () => {
  if (!checkLogin()) return;
  ...
};

const handleClickLike = () => {
  if (!checkLogin()) return;
  ...
};

[netlify]

✅ Deploy Preview for tattour ready!

Name	Link
🔨 Latest commit	0a444d7
🔍 Latest deploy log	https://app.netlify.com/sites/tattour/deploys/65d6ce664609a10008ddb8fa
😎 Deploy Preview	https://deploy-preview-616--tattour.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Yeonseo-Jo]

굿굿