Fix(#254): home 페이지 강의 생성/조회 API 수정

[LellowMellow]

작업 개요

• close Fix: home 페이지 강의 생성/조회 API 수정 #254

작업 사항

• 로그인 시에 유저 정보 localStorage 저장
• header Guest일 경우 modal 정보 표시 처리
• useAuth 커스텀 훅 분리
• home 페이지 강의 생성 로직 수정
• home 페이지 강의 생성 API 수정

고민한 점들(필수 X)

로그인 시에 수정된 API를 통해 token과 함께 전달받는 email과 username을 local storage에 저장하도록 하였습니다.

home 페이지의 경우, guest도 접근이 가능해야 했기 때문에 이를 위해 header에서 accessToken과 username, email이 local storage에 존재하는지의 여부에 따라 다르게 보이도록 하였습니다.

강의 생성 버튼을 클릭했을 때, token이 존재하는지, 유효한지를 판단합니다. 유효하다면 username과 email이 존재하는지를 판단하여 없다면 이를 요청하여 local storage에 저장합니다. 반대로 accessToken이 유효하지 않다면 로그인 페이지로 이동하도록 하였습니다.

이를 useAuth 커스텀 훅을 작성하여 활용하였습니다.

import { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { useToast } from "@/components/Toast/useToast";

const useAuth = () => {
  const navigate = useNavigate();
  const showToast = useToast();

  const checkAuth = useCallback(() => {
    const accessToken = localStorage.getItem("token");
    if (!accessToken) {
      showToast({ message: "로그인이 필요해요.", type: "alert" });
      navigate("/userauth");
    } else {
      const username = localStorage.getItem("username");
      const email = localStorage.getItem("email");
      if (!username || !email) {
        axios
          .get(`${import.meta.env.VITE_API_SERVER_URL}/profile`, {
            headers: {
              Authorization: accessToken
            }
          })
          .then((response) => {
            localStorage.setItem("username", response.data.username);
            localStorage.setItem("email", response.data.email);
          })
          .catch((error) => {
            if (error.response?.status === 401) {
              showToast({ message: "로그인이 만료되었어요.", type: "alert" });
              navigate("/userauth");
            } else showToast({ message: "프로필을 불러오는데 문제가 발생했어요", type: "alert" });
          });
      }
    }
  }, [navigate, showToast]);

  return { checkAuth };
};

export default useAuth;

스크린샷(필수 X)

Guest일 경우

2023-12-11.18-25-00.mp4

User일 경우

2023-12-11.18-26-12.mp4

유효하지 않은 token일 경우

2023-12-11.18-29-43.mp4

[netlify]

✅ Deploy Preview for boarlog ready!

Name	Link
🔨 Latest commit	3c4a64d
🔍 Latest deploy log	https://app.netlify.com/sites/boarlog/deploys/6576d6f559bef40008770d64
😎 Deploy Preview	https://deploy-preview-258--boarlog.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.

[Jw705]

고생 많으셨습니다👍👍

[Jw705]

이제 이런 방법으로 로그인 여부를 판단하면 되겠군요!

[Jw705]

toast 활용하기 너무 좋은 것 같아요!

[Byeonjin]

useCallback 처음 보는데 한 수 배웠습니다.
써야한다고 생각은 하지만 쓰지는 않게 되더라구요... ㅎㅎ

[LellowMellow]

이 부분은 아직 많이 부족한 것 같습니다 ㅠㅠ 많이 공부해봐야 할 것 같습니다. 더 정갈한 코드로 시간이 된다면 고쳐보겠습니다 :)

[Byeonjin]

고생하셨습니다.