🟢 작업 내용

<aside> 📌 - 로그인 페이지 레이아웃 구성 및 카카오 로그인 API를 통해 로그인 기능을 구현하였다.

• 상세정보 페이지 레이아웃 구성 및 Axios를 통해 DB에서 상세 정보를 가져와 출력하도록 구현하였다.

</aside>

1. 로그인 기능 구현
   1. 로그인 페이지 레이아웃 구성
   2. 카카오 서버에서 인가코드 수신
   3. 인가코드를 메인서버로 송신하고 로그인
   4. 로그인 상태 관리
2. 상세정보 페이지 구현
   1. 상세정보 페이지 레이아웃 구성
   2. axios를 통해 DB에서 상세 정보를 가져와 출력
   3. 로그인 상태에 따른 예매 버튼 활성화

✅ 작업 결과

로그인 페이지

로그인 로딩 페이지

import React, { useState, useContext, useMemo, createContext } from "react";

const userId = sessionStorage.getItem("id");
const token = sessionStorage.getItem("token");

export const LoginContext = createContext({
  isLogin: userId !== null ? true : false,
});
export function IsLoginProvider({ children }) {
  const [isLogin, setLogin] = useState(
    userId !== null && token !== null ? true : false
  );
  const value = useMemo(() => ({ isLogin, setLogin }), [isLogin, setLogin]);
  return (
    <LoginContext.Provider value={value}>{children}</LoginContext.Provider>
  );
}
export function useLoginState() {
  const context = useContext(LoginContext);
  if(!context) {
    throw new Error('Cannot find LoginProvider');
  }
  return context.isLogin;
}

상세정보 페이지