auth context 추가

frontend/src/auth/RequireAuth.tsx

+import React, { FC } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "./auth.context";
+
+export const RequireAuth: FC<{ children: JSX.Element }> = ({ children }) => {
+  const { user } = useAuth();
+  const location = useLocation();
+
+  if (!user.isLoggedIn) {
+    return (
+      <Navigate to={"/login"} state={{ from: location.pathname }} replace />
+    );
+  }
+  return children;
+};

frontend/src/auth/auth.context.tsx

+import React, {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useState,
+} from "react";
+import { IUser } from "../types";
+import { getLocalUser, handleLogin, handleLogout } from "./auth.helper";
+
+interface IAuthContext {
+  login: (email: string, password: string, cb?: VoidFunction) => Promise<void>;
+  logout: (cb?: VoidFunction) => Promise<void>;
+  user: IUser;
+}
+
+const AuthContext = createContext<IAuthContext>({
+  login: async () => {},
+  logout: async () => {},
+  user: { isLoggedIn: false },
+});
+
+export const AuthProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState(getLocalUser());
+
+  const login = async (
+    email: string,
+    password: string,
+    cb: VoidFunction = () => {}
+  ) => {
+    const user = await handleLogin(email, password);
+    setUser(user);
+    cb();
+  };
+
+  const logout = async (cb: VoidFunction = () => {}) => {
+    await handleLogout();
+    setUser({ ...user, isLoggedIn: false });
+    cb();
+  };
+
+  return (
+    <AuthContext.Provider value={{ login, logout, user }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

frontend/src/auth/auth.helper.ts

+import { authApi } from "../apis";
+import { IUser } from "../types";
+
+const LOCAL_USER_INFO = "survey-user-info";
+
+/**
+ * 1. 백엔드 로그인을 호출하여 로그인 정보를 얻습니다.
+ * 2. 로컬 저장소에 저장합니다.
+ * 3. 사용자 정보를 반환합니다.
+ * @param email 이메일
+ * @param password 비밀번호
+ * @returns 사용자 정보
+ */
+export const handleLogin = async (email: string, password: string) => {
+  const user: IUser = await authApi.login(email, password);
+  // 로컬 저장소에는 로그인 여부만 저장
+  localStorage.setItem(
+    LOCAL_USER_INFO,
+    JSON.stringify({
+      isLoggedIn: user.isLoggedIn,
+    })
+  );
+  return user;
+};
+
+/**
+ * 로컬 저장소의 정보를 삭제합니다.
+ * 백엔드 로그아웃을 호출하여 쿠키를 제거합니다.
+ */
+export const handleLogout = async () => {
+  console.log("handle logout called");
+  localStorage.removeItem(LOCAL_USER_INFO);
+  try {
+    await authApi.logout();
+  } catch (error) {
+    console.log("logout 중에 에러 발생:", error);
+  }
+};
+
+/**
+ * 1. 로컬 저장소에 저장된 사용자 로그인 정보를 반환합니다.
+ * 2. 로컬 저장소에 정보가 없으면 { isLoggedIn: false }를 반환합니다.
+ * @returns 로컬 저장소에 저장된 사용자 정보
+ */
+export const getLocalUser = () => {
+  console.log("get local user called");
+  const userInfo = localStorage.getItem(LOCAL_USER_INFO);
+  const user: IUser = { isLoggedIn: false };
+  if (!userInfo) {
+    return user;
+  }
+
+  const userData = JSON.parse(userInfo);
+  if (userData.isLoggedIn) {
+    user.isLoggedIn = true;
+  } else {
+    user.isLoggedIn = false;
+  }
+  return user;
+};

frontend/src/types/index.tsx

+export interface IUser {
+  email?: string;
+  isLoggedIn: boolean;
+  _id?: string;
+}
+
 export interface PostType {
   id: string;
   title: string;