Merge pull request #98 from LikeLionHGU/yeji-feat/#94

feat : 캘린더 기능 구현 및 api 연결
LikeLionHGU · Feb 23, 2024 · e4c3e0f · e4c3e0f
2 parents 5309b2e + b60c547
commit e4c3e0f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/src/calendarMento/MentoCalendar.jsx b/src/calendarMento/MentoCalendar.jsx
@@ -42,24 +42,28 @@ function MentoCalendar() {
     // setIsSelected(true);
   };
 
-  const datepick = (date) => {
+  const formatDate = (date) => {
     const year = date.getFullYear();
     const month = ("0" + (date.getMonth() + 1)).slice(-2);
     const day = ("0" + date.getDate()).slice(-2);
-    const dateString = year + "-" + month + "-" + day;
-    fetch("https://api.zionhann.shop/app/makeup/posts/calendar/{memberId}", {
-      // fetch("https://api.zionhann.shop/app/makeup/reservation/mento", {
+    return year + "-" + month + "-" + day;
+  };
+
+  const datepick = () => {
+    const formattedDate = selectedDate.map((date) => formatDate(date));
+    const memberId = localStorage.getItem("member_id");
+
+    fetch(`https://api.zionhann.shop/app/makeup/posts/calendar/${memberId}`, {
       method: "POST",
       headers: {
         "Content-Type": `application/json`,
       },
       body: JSON.stringify({
-        memberId: localStorage.getItem("member_id"),
-        mentoDate: dateString,
+        availableDates: formattedDate,
       }),
     })
       .then((response) => response.json())
-      .then((result) => console.log("결과: ", result));
+      .then((result) => console.log("결과: ", availableDates));
   };
 
   return (
@@ -85,17 +89,15 @@ function MentoCalendar() {
               highlightDates={selectedDate}
               // className={styles.dateinput}
               onChange={(date) => {
-                datepick(date);
+                // datepick(date);
 
                 setselectedDate((prev) => {
                   if (prev.find((d) => d.getTime() === date.getTime())) {
                     return [
                       ...prev.filter((d) => d.getTime() !== date.getTime()),
                     ];
-                  } else {
-                    setmentoDate(date);
-                    return [...prev, date];
                   }
+                  return [...prev, date];
                 });
               }}
               renderCustomHeader={({

diff --git a/src/header/search/Search.js b/src/header/search/Search.js
@@ -1,9 +1,11 @@
 import { useState } from "react";
 import dummy from "./dummydata.json";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function Search() {
   const [search, setSearch] = useState("");
   const [member] = useState(dummy.data);
+  const navigate = useNavigate();
 
   const onChange = (e) => {
     setSearch(e.target.value);
@@ -30,20 +32,22 @@ export default function Search() {
     );
   });
 
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      console.log({ search });
+      navigate("/searchboard", { state: { search } });
+    }
+  };
+
   return (
     <div>
       <div className="content">
-        <input type="text" value={search} onChange={onChange}></input>
-        {search !== "" &&
-          filterResult
-            .filter((member) => member !== null)
-            .map((member) => (
-              <div>
-                <span>{member.title} </span>
-                <span> {member.body} </span>
-                <span> {member.nickname}</span>
-              </div>
-            ))}
+        <input
+          type="text"
+          value={search}
+          onChange={onChange}
+          onKeyDown={handleKeyPress}
+        ></input>
       </div>
     </div>
   );

diff --git a/src/search/SearchBoard.jsx b/src/search/SearchBoard.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import heart from "./heart.png";
 
@@ -10,10 +10,12 @@ import styles from "./searchboard.module.css";
 export default function SearchBoard() {
   const navigate = useNavigate();
   const [data, setData] = useState([]);
+  const { state } = useLocation();
+  // const {search} = state;
 
   useEffect(() => {
     // API 호출
-    fetch("https://api.zionhann.shop/app/makeup/posts/images")
+    fetch("https://api.zionhann.shop/app/makeup/posts/search?keyword=")
       .then((response) => response.json())
       .then((data) => setData(data.data));
   }, []);
@@ -26,6 +28,21 @@ export default function SearchBoard() {
     return str?.length > n ? str.substr(0, n - 1) + "..." : str;
   };
 
+  // const search = ({ state }) => {
+  //   {
+  //     state !== "" &&
+  //       filterResult
+  //         .filter((state) => state !== null)
+  //         .map((state) => (
+
+  //             {state.postID}
+  //              {state.imageUrl}
+  //            {state.title}
+
+  //         ));
+  //   }
+  // };
+
   if (data.length === 0) return <>loading...</>;
 
   return (