feat: Add login check and redirect

src/pages/BoothHome.jsx

@@ -7,13 +7,13 @@
 import github from "../assets/github_3x.png";
 import apply from "../assets/apply.svg";
 import WikiMiniButton from "../components/WikiMiniButton";
-import { CheckLogin } from "../utils/cookie";
+import { getCookie } from "../utils/cookie";
 import Home from "./Home"; // ✅ PC 화면에서는 기존 Home 사용
 import "./BoothHome.css";
 
 export default function BoothHome() {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
   const [recentPeople, setRecentPeople] = useState([]); // ✅ 최근 수정된 위키 목록 상태 추가
 
   useEffect(() => {
     const handleResize = () => {
@@ -33,7 +33,7 @@
 function BoothMobileView({ recentPeople }) {
   const [query, setQuery] = useState("");
   const navigate = useNavigate();
   const [errorMessage, setErrorMessage] = useState(""); 
 
   const handleSearch = () => {
     if (query.trim() === "") return;
@@ -42,10 +42,10 @@
 
 
   useEffect(() => {
-    if (CheckLogin) {
-      navigate('/login');  // 로그인 페이지로 리다이렉트
+    if (getCookie("access_token") === undefined) {
+      navigate("/login");
     }
-  }, [navigate]);
+  }, []);
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -67,15 +67,15 @@
         if (response.data.errorCode) {
 
           console.warn("최근 수정된 목록 불러오기 실패:", response.data.message);
           setRecentPeople([]); // 최근 목록 초기화
           setErrorMessage(response.data.message); // 오류 메시지 저장
         } else {
           setRecentPeople(response.data.result.modifiedWikiList || []); // 정상 데이터 저장
           setErrorMessage("");
         }
       } catch (error) {
         console.error("최근 수정된 위키 불러오기 실패:", error);
         setRecentPeople([]);
         setErrorMessage("최근 수정된 위키를 불러오는 중 오류가 발생했습니다."); // 네트워크 오류 메시지
       }
     };

src/pages/Login.jsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 export default function Login() {
-
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const navigate = useNavigate();
 
   const handleLogin = async (e) => {
     e.preventDefault();
@@ -13,22 +14,27 @@ export default function Login() {
     formData.append("password", password);
 
     try {
-        const response = await axios.post(`${import.meta.env.VITE_API_URL}/api/auth/sign-in`,formData, {
-            headers: { "Content-Type": "multipart/form-data" },
-            withCredentials: true
-        });
-
-        console.log(response);
-
-        if (response.ok) {
-          alert("로그인 성공!");
-        } else {
-          alert("로그인 실패: " + response.data.message);
+      const response = await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/sign-in`,
+        formData,
+        {
+          headers: { "Content-Type": "multipart/form-data" },
+          withCredentials: true,
         }
-      } catch (error) {
-        console.error("로그인 오류:", error);
-        alert("로그인 중 오류가 발생했습니다.");
+      );
+
+      console.log(response);
+
+      if (response.status >= 200 && response.status < 300) {
+        alert("로그인 성공!");
+        navigate("/booth");
+      } else {
+        alert("로그인 실패: " + response.data.message);
       }
+    } catch (error) {
+      console.error("로그인 오류:", error);
+      alert("로그인 중 오류가 발생했습니다.");
+    }
   };
 
   return (
@@ -49,16 +55,29 @@ export default function Login() {
           onChange={(e) => setPassword(e.target.value)}
           style={styles.input}
         />
-        <button type="submit" style={styles.button}>로그인</button>
+        <button type="submit" style={styles.button}>
+          로그인
+        </button>
       </form>
     </div>
   );
-};
+}
 
 const styles = {
-  container: { display: "flex", flexDirection: "column", alignItems: "center", marginTop: "50px" },
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    marginTop: "50px",
+  },
   form: { display: "flex", flexDirection: "column", width: "250px" },
   input: { marginBottom: "10px", padding: "10px", fontSize: "16px" },
-  button: { padding: "10px", fontSize: "16px", backgroundColor: "#007bff", color: "#fff", border: "none", cursor: "pointer" }
+  button: {
+    padding: "10px",
+    fontSize: "16px",
+    backgroundColor: "#007bff",
+    color: "#fff",
+    border: "none",
+    cursor: "pointer",
+  },
 };
-

src/utils/cookie.js

@@ -1,24 +1,24 @@
-import {Cookies} from 'react-cookie'
+import { Cookies } from "react-cookie";
 
 const cookies = new Cookies();
 
-export const setCookie = (name, value, options)=>{
+export const setCookie = (name, value, options) => {
+  return cookies.set(name, value, { ...options });
+};
 
-	return cookies.set(name, value, {...options})
-}
+export const getCookie = (name) => {
+  return cookies.get(name);
+};
 
-export const getCookie = (name)=>{
-	return cookies.get(name)
-}
-
-export const removeCookie = (name)=>{
-	return cookies.remove(name, { path: '/'})
-}
+export const removeCookie = (name) => {
+  return cookies.remove(name, { path: "/" });
+};
 
 export const CheckLogin = () => {
-    if(getCookie('access_token') && getCookie('access_token') !== "undefined"){
-      return true;
-    }else{
-      return false;
-    }
-}
+  console.log(getCookie("access_token"));
+  if (getCookie("access_token") !== "undefined") {
+    return true;
+  } else {
+    return false;
+  }
+};