Merge pull request #79 from LikeLionHGU/hayoung_feat/#73

feat : 멘티 캘린더 블락 기능
LikeLionHGU · Feb 22, 2024 · db16f61 · db16f61
2 parents 50c9f09 + 105a503
commit db16f61
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 63 deletions.
diff --git a/src/calendar/Calendarr.jsx b/src/calendar/Calendarr.jsx
@@ -1,4 +1,5 @@
 import {
+  addDays,
   format,
   getMonth,
   getYear,
@@ -25,6 +26,7 @@ function Calendarr() {
   const [reservedDate, setreservedDate] = useState(new Date());
   const calendarRef = useRef(null);
   const [startTime, setStartTime] = useState(null);
+  const [data, setData] = useState([]);
   // const [isSelected, setIsSelected] = useState(false);
 
   useEffect(() => {
@@ -35,7 +37,14 @@ function Calendarr() {
     setStartTime(time);
     // setIsSelected(true);
   };
-
+  useEffect(() => {
+    // API 호출
+    fetch("http://localhost:8080/reservation/view/mento/18")
+      .then((response) => response.json())
+      .then((data) => setData(data));
+  }, []);
+  const availDate = data.map((item) => item.mentoDate);
+  console.log({ availDate });
   return (
     <div>
       {" "}
@@ -55,8 +64,10 @@ function Calendarr() {
               // dateFormat="yyyy/MM/dd"
               selected={reservedDate}
               onChange={(date) => setreservedDate(date)}
+              includeDates={availDate}
               minDate={subDays(new Date(), 0)}
               inline
+              disabledKeyboardNavigation
               // className={styles.dateinput}
               renderCustomHeader={({
                 date,

diff --git a/src/calendar/dummyData.json b/src/calendar/dummyData.json
@@ -0,0 +1,17 @@
+[
+  {
+    "date": "2024/03/15"
+  },
+  {
+    "date": "2024/03/30"
+  },
+  {
+    "date": "2024/03/12"
+  },
+  {
+    "date": "2024/03/25"
+  },
+  {
+    "date": "2024/03/08"
+  }
+]
diff --git a/src/modal/modal.js b/src/modal/modal.js
@@ -1,59 +1,24 @@
+import React, { useState } from "react";
 import styles from "./Modal.module.css";
 import subimg from "./Subtract.png";
 
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-
 const Modal = (props) => {
-  const navigate = useNavigate();
-  const { open } = props;
-
-  const [formData, setFormData] = useState(new FormData());
-  const [postTags, setPostTags] = useState({});
-  const [postText, setPostText] = useState("");
+  const { open, setOpen } = props;
 
-  const onChange = ({ target }) => {
-    const files = target.files;
-
-    Object.entries(files).forEach(([i, file]) => {
-      formData.append("images", file);
-    });
-  };
-
-  const registerPost = async () => {
-    formData.set("topic", postTags.topic);
-    formData.set("pet", postTags.pet);
-    formData.set("text", postText);
-    console.log(formData);
-
-    try {
-      const response = await fetch("http://localhost:8080/posts/", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (response.ok) {
-        navigate("/board");
-      } else {
-        throw new Error("게시물 저장에 실패했습니다.");
-      }
-    } catch (error) {
-      console.error(error);
-    }
+  const closeModal = () => {
+    setOpen(false);
   };
 
   return (
-    <div
-      className={open ? `${styles.openModal} ${styles.modal}` : styles.modal}
-    >
+    <div className={`${styles.modal} ${open ? styles.openModal : ""}`}>
       {open ? (
         <section>
           <header>
             <img src={subimg} alt="sub" />
           </header>
           <main>{props.children}</main>
           <footer>
-            <button className={styles.close} onClick={registerPost}>
+            <button className={styles.close} onClick={closeModal}>
               확인
             </button>
           </footer>
@@ -63,4 +28,17 @@ const Modal = (props) => {
   );
 };
 
-export default Modal;
+const ParentComponent = ({ open, setOpen }) => {
+  // const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      {/* <button onClick={() => setOpen(true)}>작성 완료</button> */}
+      <Modal open={open} setOpen={setOpen}>
+        피드 작성이 완료되었습니다!{" "}
+      </Modal>
+    </div>
+  );
+};
+
+export default ParentComponent;
diff --git a/src/write/BoardWrite.js b/src/write/BoardWrite.js
@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import styles from "./BoardWrite.module.css";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useParams } from "react-router-dom";
 import Header from "../header/Header";
 import photoimg from "./Group 9.png";
 import Modal from "../modal/modal";
@@ -13,32 +13,39 @@ const BoardWrite = () => {
 
   const [board, setBoard] = useState({
     title: "",
-    createdBy: "",
-    contents: "",
+    brandName: "",
+    cosName: "",
     image: null,
     additionalInfo: [],
   });
+  const [file, setFile] = useState(null);
+  const postId = localStorage.getItem("postId");
+  const params = useParams();
+  const id = params.happy;
 
-  const { title, createdBy, contents, image, additionalInfo } = board;
+  const { title, brandName, cosName, image, additionalInfo, list } = board;
 
   const onChange = (event) => {
-    const { value, name } = event.target;
     setBoard({
       ...board,
-      [name]: value,
+      [event.target.name]: event.target.value,
     });
   };
-
+  const saveFile = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setFile(e.target.files[0]);
+    }
+  };
   const onAddInfo = () => {
-    if (contents && createdBy) {
+    if (cosName && brandName) {
       setBoard((prevBoard) => ({
         ...prevBoard,
         additionalInfo: [
           ...prevBoard.additionalInfo,
-          { brand: createdBy, product: contents },
+          { brand: brandName, product: cosName },
         ],
-        contents: "",
-        createdBy: "",
+        cosName: "",
+        brandName: "",
       }));
     }
   };
@@ -64,6 +71,47 @@ const BoardWrite = () => {
     imageInput.current.click();
   };
 
+  const submitPost = (e) => {
+    e.preventDefault();
+    console.log("aaa");
+    openModal();
+    const formData = new FormData();
+    // console.log("Submit Post Called!");
+    // console.log({ file, title, list });
+    formData.append("file", board.image);
+    formData.append(
+      "json",
+      JSON.stringify({
+        title: board.title,
+        list: board.additionalInfo,
+      })
+    );
+
+    fetch("http://localhost:3000/posts/", {
+      method: "POST",
+      body: formData,
+      headers: {},
+    });
+    //   .then((response) => response.json())
+    //   .then((json) => {
+    //     console.log(json.ok);
+    //     if (!!json.ok) {
+    //       window.location.reload();
+    //     }
+    //   });
+  }; //폼 제출을 처리하는 submitPost 함수, 기본 제출 동작 막고 파일과 포스트 데이터 추가. 그리고 fetch사용하여 서버에 POST 요청
+  const [recapData, setRecapData] = useState({});
+  useEffect(() => {
+    //처음 한번만 실행하기 위해
+    fetch(`http://localhost:3000/posts/${postId}`, {
+      method: "POST",
+      headers: { "Content-type": "application/json" },
+      body: JSON.stringify({ qid: id }),
+    })
+      .then((data) => data.json())
+      .then((json) => setRecapData(json));
+  }, [postId, id]);
+
   const handleImageChange = (event) => {
     const file = event.target.files[0];
     if (file) {
@@ -88,7 +136,7 @@ const BoardWrite = () => {
   };
 
   const noFeedMessage =
-    additionalInfo.length === 0 && !contents ? (
+    additionalInfo.length === 0 && !cosName ? (
       <p>
         <div className={styles.feed}>
           <img src={Basket} alt="basketimg"></img>
@@ -136,18 +184,18 @@ const BoardWrite = () => {
                 placeholder="제목을 입력해주세요. "
               />
             </div>
-            <div className={styles.contents}>
+            <div className={styles.cosName}>
               <input
                 className={styles.brand}
-                name="createdBy"
-                value={createdBy}
+                name="brandName"
+                value={brandName}
                 onChange={onChange}
                 placeholder="브랜드명"
               />
               <input
                 className={styles.product}
-                name="contents"
-                value={contents}
+                name="cosName"
+                value={cosName}
                 onChange={onChange}
                 placeholder="화장품명"
               />
@@ -175,9 +223,11 @@ const BoardWrite = () => {
           <div className={styles.buttonContainer}>
             <div className={styles.save}>
               <React.Fragment>
-                <button onClick={openModal}>작성 완료</button>
+                <button type="submit" onClick={submitPost}>
+                  작성 완료
+                </button>
 
-                <Modal open={modalOpen} close={closeModal}>
+                <Modal open={modalOpen} setOpen={setModalOpen}>
                   피드 작성이 완료되었습니다!
                 </Modal>
               </React.Fragment>

diff --git a/src/write/BoardWrite.module.css b/src/write/BoardWrite.module.css
@@ -235,3 +235,100 @@ ul::-webkit-scrollbar {
   font-size: 14px;
   font-family: "Pretendard-Regular";
 }
+
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+    format("woff");
+}
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.modal button {
+  outline: none;
+  cursor: pointer;
+  border: 0;
+}
+
+.modal > section {
+  width: 90%;
+  max-width: 323px;
+  max-height: 221px;
+  margin: 0 auto;
+  border-radius: 20px;
+  background-color: #fff;
+  /* 팝업이 열릴때 스르륵 열리는 효과 */
+  animation: modal-show 0.3s;
+  overflow: hidden;
+}
+
+.modal > section > header {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  margin: auto;
+  padding-top: 30px;
+  padding-bottom: 23px;
+  font-weight: 700;
+}
+
+.modal > section > main {
+  text-align: center;
+  font-weight: 600;
+  font-size: 14px;
+  font-family: "Pretendard-Regular";
+}
+
+.modal > section > footer {
+  padding: 24px 23px;
+  text-align: right;
+}
+
+.modal > section > footer button {
+  padding: 6px 12px;
+  color: #fc389a;
+  background-color: white;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 50px;
+  border-color: #fc389a;
+  font-size: 12px;
+  margin: auto;
+  font-weight: 600;
+  font-family: "Pretendard-Regular";
+}
+
+.modal.openModal {
+  display: flex;
+  align-items: center;
+  /* 팝업이 열릴때 스르륵 열리는 효과 */
+  animation: modal-bg-show 0.3s;
+}
+
+@keyframes modal-show {
+  from {
+    opacity: 0;
+    margin-top: -50px;
+  }
+  to {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+@keyframes modal-bg-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}