Merge pull request #28 from Ravende/feat/local

[FE] feat: 검색 기능 추가

frontend/src/App.jsx

@@ -9,7 +9,7 @@ export default function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Main />} />
-        <Route path="/cardInfo" element={<CardInfoContainer />} />
+        <Route path="/cardInfo/:cafeId" element={<CardInfoContainer />} />
       </Routes>
     </Router>
   );

frontend/src/card/Card.jsx

@@ -6,15 +6,16 @@ import './card.css';
 
 export function Card() {
   const movePage = useNavigate();
-  function gopage() {
-    movePage('/cardinfo');
-  }
+
+  const [searchQuery, setSearchQuery] = useState('');
   const [cafeDataList, setCafeDataList] = useState([]);
+
   const getToday = () => {
     const days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
-    const todayIndex = new Date().getDay(); // 0부터 일요일, 1부터 월요일, ..., 6부터 토요일
+    const todayIndex = new Date().getDay();
     return days[todayIndex];
   };
+
   const today = getToday();
 
   useEffect(() => {
@@ -30,11 +31,27 @@ export function Card() {
       });
   }, []);
 
+  const filteredCafeData = cafeDataList.filter(cafeData =>
+    cafeData.cafeName.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const gopage = (cafeId) => {
+    movePage(`/cardinfo/${cafeId}`);
+  };
+
   return (
     <div>
-      {cafeDataList.map(cafeData => (
+      <div className="cafe-search">
+      <input
+        type="text"
+        placeholder="카페 검색"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      </div>
+      {filteredCafeData.map(cafeData => (
         <div key={cafeData.cafeId} className="cafe-box">
-          <button className="cafe-name" onClick={gopage}>
+          <button className="cafe-name" onClick={() => gopage(cafeData.cafeId)}>
             {cafeData.cafeName}
           </button>
           <p className="operating-hours">{`영업시간: ${cafeData.businessHour[today] || '-'} `}</p>

frontend/src/card/card.css

@@ -2,6 +2,7 @@
 
 .cafe-box {
   position: relative;
+  top: -100px;
   background-color: #fff;
   width: 92%;
   height: fit-content;
@@ -75,3 +76,43 @@
   margin-top: 10px;
   margin-bottom: 60px;
 }
+
+.cafe-search{
+  position: relative;
+  width: 370px;
+  height: 40px;
+  padding: 8px;
+  padding-top: 15px;
+  margin-bottom: 20px;
+  margin-top: 12px;
+  background-color: #bddcb8;
+  border-radius: 10px;
+  box-shadow: 2px 5px 3px rgba(0, 0, 0, 0.5);
+  border: 0;
+  padding-left: 60px;
+  font-size: 23px;
+  top: -200px;
+
+}
+::placeholder{
+
+  font-size: 23px;
+  font-weight: 500;
+  color: #fff;
+  width: 200px;
+  height: 30px;
+}
+input{
+  position: relative;
+  left:-30px;
+  width: 300px;
+  height: 30px;
+  background-color:#bddcb8;
+font-size: 23px;
+}
+/* .icon-search {
+  position:relative;
+  top: 300px;
+  left: 10px;
+  font-size: 30px;
+} */

frontend/src/cardInfo/CardInfo.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from 'axios';
 import { Review } from '../review';
 import { Write } from '../write';
 import { Menu } from '../menu';
@@ -9,7 +10,8 @@ import './cardInfo.css';
 export function CardInfo() {
   const movePage = useNavigate();
   const [activeComponent, setActiveComponent] = useState('review');
-
+
+
   const goPage = () => {
     movePage('/');
   };
@@ -21,26 +23,48 @@ export function CardInfo() {
   const goWrite = () => {
     setActiveComponent('write');
   };
+  const { cafeId } = useParams();
+  const [cafeData, setCafeData] = useState([]);
+  const getToday = () => {
+    const days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
+    const todayIndex = new Date().getDay(); // 0부터 일요일, 1부터 월요일, ..., 6부터 토요일
+    return days[todayIndex];
+  };
+  const today = getToday();
+
+  useEffect(() => {
+    // Replace 'your-backend-url' with the actual URL of your backend service
+    axios
+      .get('https://echubserver.shop:8080/api/cafe/${cafeId}') // Updated endpoint
+      .then(response => {
+        console.log('Cafe Data:', response.data);
+        setCafeData(response.data); // Assuming the response is a list of cafes
+      })
+      .catch(error => {
+        console.error('Error fetching cafe data:', error);
+      });
+  }, []);
 
   return (
-    <div className="cafeinfo-box">
+
+      <div className="cafeinfo-box">
 
       <button className = "backbtn"  onClick={goPage}>
 
         <img id="back_icon" alt="back" src="./assets/back_icon.png" />
       </button>
 
       <div className="cafe-image-info">
-        <img id="cafeinfoimg" alt="cafeimg2" src="./assets/cafeinfoimage.jpg" />
-      </div>
-      <div id="cafe-name">카페명</div>
-      <div className="hash-warp">
-        <div className="hash_info">#포토존</div>
-        <div className="hash_info">#포토존</div>
-        <div className="hash_info">#포토존</div>
-        <div className="hash_info">#포토존</div>
+        <img id="cafeinfoimg" alt="cafeimg2" src={cafeData.imageUrl} />
       </div>
-      <div id="operating-hours">평일 12:0~22:00 / 주말 11:00~22:00</div>
+      <div id="cafe-name">{cafeData.cafeName}</div>
+      {/* <div className="hash-warp">
+            {cafeData.hashtag.map(tag => (
+              <div key={tag} className="hash_info">
+                {tag}
+              </div>
+            ))}</div>
+      <div id="operating-hours">{`영업시간: ${cafeData.businessHour[today] || '-'} `}</div> */}
 
       {activeComponent === 'review' && <Review />}
       {activeComponent === 'write' && <Write />}
@@ -58,6 +82,7 @@ export function CardInfo() {
 
       <Menu />
     </div>
+
   );
 }
 

frontend/src/header/header.css

@@ -35,6 +35,7 @@ header {
   top: -50px;
   left: -180px;
   width: 75px;
+
   margin-bottom: 10px;
 }
 

frontend/src/search/Search.jsx

@@ -1,13 +1,30 @@
+// search.js
+import React, { useState } from 'react';
 import './search.css';
 import './fontello-306b2794/css/fontello-embedded.css';
 
-export function Search() {
+export function Search({ onSearchChange }) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onSearchChange(query); // Notify the parent component about the search query change
+  };
+
   return (
     <form action method="GET">
       <label htmlFor="cafe-search" />
-      <div class="search-box">
-        <input type="search" id="cafe-search" name="ps" placeholder="카페명" />
-        <div class="icon-search"></div>
+      <div className="search-box">
+        <input
+          type="search"
+          id="cafe-search"
+          name="ps"
+          placeholder="카페명"
+          value={searchQuery}
+          onChange={handleSearchChange}
+        />
+        <div className="icon-search"></div>
       </div>
     </form>
   );

frontend/src/search/search.css

@@ -20,6 +20,9 @@ form {
   box-shadow: 2px 5px 3px rgba(0, 0, 0, 0.5);
   border: 0;
   padding-left: 60px;
+  font-size: 23px;
+  left: 1px;
+  top:15px;
 }
 
 #cafe-search::placeholder {
@@ -31,7 +34,7 @@ form {
 
 .icon-search {
   position: absolute;
-  top: 20px;
+  top: 24px;
   left: 10px;
   font-size: 30px;
 }

frontend/src/sideBar/SideBar.jsx

@@ -1,19 +1,25 @@
+// sideBar.js
+import React, { useState } from 'react';
 import '../App.css';
 import { Card } from '../card';
-// import { CardInfo } from '../cardInfo';
 import { Hashtags } from '../hashtags';
 import { Search } from '../search';
 import './sideBar.css';
 
 export function SideBar() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (query) => {
+    setSearchQuery(query);
+  };
+
   return (
     <aside>
       <div id="side">
-        <Search />
+        <Search onSearchChange={handleSearchChange} />
         <Hashtags />
         {[...Array(60)].map((_, index) => (
-          <Card key={index} />
-        ))}
+          <Card key={index} searchQuery={searchQuery} />  ))}
       </div>
     </aside>
   );