Integrate API for search and recent wiki updates

src/components/SearchBar.jsx

@@ -1,4 +1,4 @@
-import { useNavigate, Link } from "react-router-dom";
+import { useNavigate, Link, useSearchParams } from "react-router-dom"; // ✅ useSearchParams 추가
 import "./SearchBar.css";
 import BackButton from "./BackButton";
 import Delete from "../assets/delete.svg";
@@ -7,11 +7,18 @@
 
 export default function SearchBar({ value, onChange }) {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const searchQuery = searchParams.get("name") || ""; // ✅ 기존 검색어 유지
+
+  const handleSearch = () => {
+    if (!value.trim()) return;
+    navigate(`/search?name=${encodeURIComponent(value)}`); // ✅ 항상 `?name=검색어` 유지
+  };
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      navigate(`/search/${value}`);
+      handleSearch();
     }
   };
 
@@ -23,7 +30,7 @@
         type="text"
         value={value}
         onChange={onChange}
-        onKeyDown={handleKeyDown}
+        onKeyDown={handleKeyDown} // ✅ 엔터 키 입력 시 검색 실행
         placeholder="검색어를 입력하세요"
       />
       {value && (
@@ -34,9 +41,11 @@
           onClick={() => onChange({ target: { value: "" } })}
         />
       )}
-      <Link className="search-bar-right-botton" to={`/search/${value}`}>
+      {/* ✅ 검색 버튼 클릭 시 `?name=검색어` 형식 유지 */}
+      <button className="search-bar-right-botton" onClick={handleSearch}>
         <img width={24} src={SearchIcon} alt="검색" />
-      </Link>
+      </button>
+
       <Link className="search-bar-right-botton" to="/random">
         <img width={24} src={Random} alt="랜덤" />
       </Link>

src/pages/BoothHome.jsx

@@ -1,24 +1,79 @@
-import { isMobile } from "react-device-detect";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import Home from "./Home";
-import "/src/pages/BoothHome.css";
-import "./Home.css";
+import axios from "axios"; // ✅ API 요청을 위한 axios 추가
 import searchIcon from "../assets/search.svg";
 import capsCircle from "../assets/caps-circle_3x.png";
 import instagram from "../assets/instagram_3x.png";
 import github from "../assets/github_3x.png";
 import apply from "../assets/apply.svg";
 import WikiMiniButton from "../components/WikiMiniButton";
+import Home from "./Home"; // ✅ PC 화면에서는 기존 Home 사용
+import "./BoothHome.css";
 
 export default function BoothHome() {
-  return isMobile ? <BoothMobileView /> : <Home />;
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [recentPeople, setRecentPeople] = useState([]); // ✅ 최근 수정된 위키 목록 상태 추가
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+
+  return isMobile ? <BoothMobileView recentPeople={recentPeople} /> : <Home />;
 }
 
-function BoothMobileView() {
+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)}`);
+  };
 
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+
+  //오류메세지 추가
+  useEffect(() => {
+    const fetchRecentWikis = async () => {
+      try {
+        console.log("🚀 API 요청 시작: 최근 수정된 위키 목록 가져오기...");
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/api/wiki/history`
+        );
+        console.log("✅ API 응답:", response.data);
+
+        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">
@@ -29,18 +84,20 @@
           </Link>
         </header>
 
+
         <div className="booth-search-box">
-          <img src={searchIcon} alt="search" className="booth-search-icon" />
+          <img
+            src={searchIcon}
+            alt="search"
+            className="booth-search-icon"
+            onClick={handleSearch}
+            style={{ cursor: "pointer" }}
+          />
           <input
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                navigate(`/search/${query}`);
-              }
-            }}
+            onKeyDown={handleKeyDown}
             placeholder="찾고 싶은 인물의 이름을 검색해주세요!"
           />
         </div>
@@ -52,14 +109,15 @@
           </Link>
         </div>
 
+        {/* 최근 수정된 인물 리스트 */}
         <div className="recent-people">
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
-          <WikiMiniButton name="윤진수" />
+          {recentPeople.length > 0 ? (
+            recentPeople.map((wiki) => (
+              <WikiMiniButton key={wiki.id} name={wiki.name} />
+            ))
+          ) : (
+            <p>최근 수정된 인물이 없습니다.</p> // ✅ API 응답이 없을 때 대비
+          )}
         </div>
       </div>
 

src/pages/Home.jsx

@@ -28,6 +28,21 @@
 }
 
 function PcView() {
+  const [query, setQuery] = useState(""); // ✅ 검색어 상태 추가
+  const navigate = useNavigate(); // ✅ 페이지 이동 함수 추가
+
+  const handleSearch = () => {
+    if (query.trim() === "") return; // ✅ 빈 검색어 방지
+    navigate(`/search?name=${query}`); // ✅ 검색 페이지로 이동
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") { // ✅ Enter 키 입력 시 검색 실행
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+
+
   return (
     <div className="home-container">
       <header className="home-header"></header>
@@ -40,12 +55,19 @@
           캡스위키를 동아리 박람회 용도에 맞게 배포했습니다.
         </p>
         <div className="home-search-box">
-          <a>
-            <img src={searchIcon} alt="search" className="home-search-icon" />
-          </a>
+          <img
+            src={searchIcon}
+            alt="search"
+            className="home-search-icon"
+            onClick={handleSearch} // ✅ 아이콘 클릭 시 검색 실행
+            style={{ cursor: "pointer" }} // 버튼처럼 동작하도록 변경
+            />          
           <input
             type="text"
             placeholder="찾고싶은 인물의 이름을 검색해주세요!"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)} // ✅ 입력 상태 업데이트
+            onKeyDown={handleKeyDown}
           />
         </div>
       </main>
@@ -64,12 +86,47 @@
 
 function PublicMobileView() {
   const [query, setQuery] = useState("");
+  const [recentPeople, setRecentPeople] = useState([]);
   const navigate = useNavigate();
+
+
+  useEffect(() => {
+    const fetchRecentWikis = async () => {
+      try {
+        console.log("API 요청 시작: 최근 수정된 위키 목록 가져오기...");
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/api/wiki/history`
+        );
+        console.log("API 응답:", response.data);
+
+        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();
+  }, []);
+
+  const handleSearch = () => {
+    if (query.trim() === "") return;
+    navigate(`/search?name=${encodeURIComponent(query)}`);
+  };
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      navigate(`/search/${query}`);
+      handleSearch();
     }
   };
 
@@ -90,8 +147,15 @@
         <br /> 동박위키는 실제 캡스에서 사용하는 캡스위키를 동아리 박람회 용도에
         맞게 변형했습니다.
       </p>
+
       <div className="home-search-box">
-        <img src={searchIcon} alt="search" className="home-search-icon" />
+        <img
+          src={searchIcon}
+          alt="search"
+          className="home-search-icon"
+          onClick={handleSearch}
+          style={{ cursor: "pointer" }}
+        />
         <input
           onKeyDown={handleKeyDown}
           value={query}
@@ -107,16 +171,20 @@
           <p>리스트 &#8594;</p>
         </Link>
       </div>
+
+      {/* ✅ 최근 수정된 인물 리스트 */}
       <div className="recent-people">
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
-        <WikiMiniButton name="윤진수" />
+        {recentPeople.length > 0 ? (
+          recentPeople.map((wiki) => (
+            <WikiMiniButton key={wiki.id} name={wiki.name} />
+          ))
+        ) : (
+          <p>최근 수정된 인물이 없습니다.</p>
+        )}
       </div>
+
       <div className="recruitment">신입부원 모집 3월 5일 마감!</div>
+
       <footer className="mobile-footer">
         <a href="https://dgucaps.kr" target="_blank">
           <img className="footer-icon" src={capsCircle} alt="Caps" />