Feature/login

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "axios": "^1.7.9",
     "react": "^19.0.0",
+    "react-cookie": "^7.2.2",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.0",

src/App.jsx

@@ -8,6 +8,7 @@
 import Wiki from "./pages/Wiki";
 import Register from "./pages/RegisterForm.jsx";
 import Edit from "./pages/EditForm.jsx";
+import Login from "./pages/Login.jsx";
 
 function App() {
   return (
@@ -22,8 +23,9 @@
         <Route path=":query" element={<Search />} />
       </Route>
       <Route path="/wiki">
-        <Route path=":title" element={<Wiki />} />
+        <Route path=":id" element={<Wiki />} />
       </Route>
+      <Route path="/login" element={<Login/>}/>
     </Routes>
   );
 }

src/components/WikiCard.jsx

@@ -3,7 +3,7 @@ import "./WikiCard.css";
 
 export default function WikiCard({ title, enteredIn, college, department }) {
   return (
-    <Link to={`/wiki/${title}-${enteredIn}-${college}-${department}`}>
+    <Link to={`/wiki/${title}`}>
       <div className="wiki-card">
         <div className="wiki-card-header">
           <div className="wiki-card-title">{title}</div>

src/main.jsx

@@ -2,12 +2,15 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import { BrowserRouter } from 'react-router'
+import { CookiesProvider } from "react-cookie";
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <CookiesProvider >
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </CookiesProvider>
   </StrictMode>,
 )

src/pages/AboutUs.css

@@ -20,7 +20,7 @@
     min-height: 120px;
     align-items: center;
     text-align: left;
-    padding: 5px;    
+    padding: 10px;    
     font-size: 14px;
 }
 

src/pages/BoothHome.jsx

@@ -7,12 +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 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 = () => {
@@ -32,13 +33,20 @@
 function BoothMobileView({ recentPeople }) {
   const [query, setQuery] = useState("");
   const navigate = useNavigate();
   const [errorMessage, setErrorMessage] = useState(""); 
 
   const handleSearch = () => {
     if (query.trim() === "") return;
     navigate(`/search?name=${encodeURIComponent(query)}`);
   };
 
+
+  useEffect(() => {
+    if (CheckLogin) {
+      navigate('/login');  // 로그인 페이지로 리다이렉트
+    }
+  }, [navigate]);
+
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -59,21 +67,22 @@
         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("최근 수정된 위키를 불러오는 중 오류가 발생했습니다."); // 네트워크 오류 메시지
       }
     };
 
     fetchRecentWikis();
   }, []);
+
   return (
     <div className="booth-container">
       <div className="booth-black">

src/pages/Login.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import axios from "axios";
+
+export default function Login() {
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("id", username);
+    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);
+        }
+      } catch (error) {
+        console.error("로그인 오류:", error);
+        alert("로그인 중 오류가 발생했습니다.");
+      }
+  };
+
+  return (
+    <div style={styles.container}>
+      <h2>로그인</h2>
+      <form onSubmit={handleLogin} style={styles.form}>
+        <input
+          type="text"
+          placeholder="아이디"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          style={styles.input}
+        />
+        <input
+          type="password"
+          placeholder="비밀번호"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={styles.input}
+        />
+        <button type="submit" style={styles.button}>로그인</button>
+      </form>
+    </div>
+  );
+};
+
+const styles = {
+  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" }
+};
+

src/pages/Wiki.jsx

@@ -92,10 +92,10 @@ hello()
     <>
       <SearchBar value={search} onChange={(e) => setSearch(e.target.value)} />
       <div className="wiki-container">
-        <div className="wiki-title">{post.name}</div>
+        {/* <div className="wiki-title">{post.name}</div> */}
+        <div className="wiki-title">{id}</div>
         <div className="wiki-markdown">
           <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
-            {post.content}
             {description_markdown}
           </Markdown>
         </div>

src/stores/PostStore.js

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import * as axios from "axios";
+import axios from "axios";
 
 const usePostStore = create((set) => ({
   post: {

src/utils/cookie.js

@@ -0,0 +1,24 @@
+import {Cookies} from 'react-cookie'
+
+const cookies = new Cookies();
+
+export const setCookie = (name, value, options)=>{
+
+	return cookies.set(name, value, {...options})
+}
+
+export const getCookie = (name)=>{
+	return cookies.get(name)
+}
+
+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;
+    }
+}

yarn.lock

@@ -25,6 +25,7 @@ __metadata:
     lint-staged: "npm:^15.4.3"
     prettier: "npm:^3.5.0"
     react: "npm:^19.0.0"
+    react-cookie: "npm:^7.2.2"
     react-device-detect: "npm:^2.2.3"
     react-dom: "npm:^19.0.0"
     react-markdown: "npm:^10.0.0"
@@ -984,6 +985,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hoist-non-react-statics@npm:^3.3.5":
+  version: 3.3.6
+  resolution: "@types/hoist-non-react-statics@npm:3.3.6"
+  dependencies:
+    "@types/react": "npm:*"
+    hoist-non-react-statics: "npm:^3.3.0"
+  checksum: 10c0/149a4c217d81f21f8a1e152160a59d5b99b6a9aa6d354385d5f5bc02760cbf1e170a8442ba92eb653befff44b0c5bc2234bb77ce33e0d11a65f779e8bab5c321
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.15":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -1032,7 +1043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.0.8":
+"@types/react@npm:*, @types/react@npm:^19.0.8":
   version: 19.0.10
   resolution: "@types/react@npm:19.0.10"
   dependencies:
@@ -1537,6 +1548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "cookie@npm:0.7.2"
+  checksum: 10c0/9596e8ccdbf1a3a88ae02cf5ee80c1c50959423e1022e4e60b91dd87c622af1da309253d8abdb258fb5e3eacb4f08e579dc58b4897b8087574eee0fd35dfa5d2
+  languageName: node
+  linkType: hard
+
 "cookie@npm:^1.0.1":
   version: 1.0.2
   resolution: "cookie@npm:1.0.2"
@@ -2724,7 +2742,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -4551,6 +4569,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cookie@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "react-cookie@npm:7.2.2"
+  dependencies:
+    "@types/hoist-non-react-statics": "npm:^3.3.5"
+    hoist-non-react-statics: "npm:^3.3.2"
+    universal-cookie: "npm:^7.0.0"
+  peerDependencies:
+    react: ">= 16.3.0"
+  checksum: 10c0/22948a42b986e22dad0817ffbad72fe52c907a9cd09c82e683807e21eb85ec82adb7b5121f9869bae418d589a05570a1e1043b3c930c293e3d94ddeaa98602e0
+  languageName: node
+  linkType: hard
+
 "react-device-detect@npm:^2.2.3":
   version: 2.2.3
   resolution: "react-device-detect@npm:2.2.3"
@@ -5613,6 +5644,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universal-cookie@npm:^7.0.0":
+  version: 7.2.2
+  resolution: "universal-cookie@npm:7.2.2"
+  dependencies:
+    "@types/cookie": "npm:^0.6.0"
+    cookie: "npm:^0.7.2"
+  checksum: 10c0/214c5cf72b12b6d98a72e11a10adb3f1d06dbeadbd9a2d46ded8c288d86387e9ff25499f85d2f85728809484d678c02028ac674cb8747257b38d2c17fb93e896
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"