Merge pull request #38 from JNU-econovation/feat/21/schedule-inquiry

Feat/21/schedule inquiry

FE/error/.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.env
+
 node_modules
 dist
 dist-ssr

FE/error/package.json

@@ -14,17 +14,15 @@
     "@fullcalendar/daygrid": "^6.1.11",
     "@fullcalendar/interaction": "^6.1.11",
     "@fullcalendar/react": "^6.1.11",
-    "@tiptap/pm": "^2.2.4",
-    "@tiptap/react": "^2.2.4",
-    "@tiptap/starter-kit": "^2.2.4",
     "axios": "^1.6.8",
-    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-quill": "^2.0.0",
     "react-select": "^5.8.0",
+    "react-icons": "^5.0.1",
+    "react-tooltip": "^5.26.3",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

FE/error/src/components/CheckModal/CheckCalendar.css

@@ -0,0 +1,13 @@
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  z-index: 100;
+  width: auto;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3);
+  outline: none;
+}

FE/error/src/components/CheckModal/CheckCalendar.jsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react"; // useState 추가
+import Modal from "react-modal";
+import "./CheckCalendar.css";
+import styled from "styled-components";
+import { GoPencil } from "react-icons/go";
+import { IoClose } from "react-icons/io5";
+import axios from "axios";
+import { MdOutlineLocationOn } from "react-icons/md";
+import { MdOutlineAutoAwesomeMotion } from "react-icons/md";
+import DeletEvent from "./DeleteEvent";
+
+const CheckCalendar = ({
+  isOpen,
+  onRequestClose,
+  selectID,
+  events,
+  setEvents,
+}) => {
+  const [event, setEvent] = useState({});
+  const Calendarmodify = () => {};
+
+  function createDate(title, startDate, endDate, place, info) {
+    const specificEvent = {
+      title: title,
+      startDate: startDate,
+      endDate: endDate,
+      place: place,
+      info: info,
+    };
+    setEvent(specificEvent);
+  }
+  useEffect(() => {
+    const instance = axios.create({
+      baseURL: `${import.meta.env.VITE_ERROR_API}`,
+    });
+    instance.get("/api/calendar/" + selectID).then((res) => {
+      createDate(
+        res.data.data.eventName,
+        res.data.data.eventStartDate,
+        res.data.data.eventEndDate,
+        res.data.data.eventPlace,
+        res.data.data.eventInfo
+      );
+    });
+  }, [selectID]);
+
+  /*function date(startDate, endDate) {
+    if (startDate.split("T")[0] === endDate.split("T")[0]) return startDate;
+    else {
+      return `${startDate} - ${endDate}`;
+    }
+  }*/
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      className="modal"
+      overlayClassName="overlay"
+    >
+      <ModalBar>
+        <button onClick={onRequestClose}>
+          <IoClose size="1.2rem" />
+        </button>
+        <button onClick={Calendarmodify}>
+          <GoPencil size="1.2rem" />
+        </button>
+        <DeletEvent events={events} setEvents={setEvents} selectID={selectID} />
+      </ModalBar>
+
+      <ModalContent>
+        <Title>
+          <span></span>
+          <div>{event.title}</div>
+        </Title>
+        {/*<Date>
+          <p>{date(event.startDate, event.endDate)}</p>
+  </Date>*/}
+        <p>
+          <MdOutlineLocationOn style={{ marginRight: "0.5rem" }} />
+          {event.place}
+        </p>
+        <p>
+          <MdOutlineAutoAwesomeMotion style={{ marginRight: "0.5rem" }} />
+          {event.info}
+        </p>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default CheckCalendar;
+
+const ModalBar = styled.div`
+  margin-top: 0.5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  outline: none;
+
+  button {
+    width: 3rem;
+    background-color: #fff;
+    border: none;
+    svg {
+      size: 5rem;
+    }
+  }
+`;
+
+const ModalContent = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  span {
+    width: 1rem;
+    height: 1rem;
+    background-color: #beb9ff;
+    margin-right: 0.5rem;
+  }
+  div {
+    font-weight: bold;
+  }
+  p {
+    margin-top: 0.6rem;
+    margin-right: 0.6rem;
+  }
+`;
+
+const Title = styled.div`
+  display: flex;
+`;
+
+/*const Date = styled.div`
+  margin-left: 1.55rem;
+`;*/

FE/error/src/components/CheckModal/DeleteEvent.jsx

@@ -0,0 +1,28 @@
+import { RiDeleteBinLine } from "react-icons/ri";
+import axios from "axios";
+
+const DeletEvent = ({ events, setEvents, selectID }) => {
+  const calendarDelete = () => {
+    const instance = axios.create({
+      baseURL: `${import.meta.env.VITE_ERROR_API}`,
+    });
+    instance
+      .delete("/api/calendar/" + selectID)
+      .then(() => {
+        const updatedEvents = events.filter((event) => event.id !== selectID);
+        setEvents(updatedEvents);
+        window.location.reload();
+      })
+      .catch((error) => {
+        console.error("Error deleting event:", error);
+      });
+  };
+
+  return (
+    <button onClick={calendarDelete}>
+      <RiDeleteBinLine size="1.2rem" />
+    </button>
+  );
+};
+
+export default DeletEvent;

FE/error/src/components/EconoCalendar.jsx

@@ -4,28 +4,42 @@ import interactionPlugin from "@fullcalendar/interaction";
 import styled from "styled-components";
 import React, { useEffect } from "react";
 import { Calendar } from "@fullcalendar/core";
-import CreateModal from "./CreateModal";
+import CreateModal from "./CheckModal/CheckCalendar";
 import { useState } from "react";
 import axios from "axios";
+import CheckCalendar from "./CheckModal/CheckCalendar";
 
 const EconoCalendar = () => {
+  const [events, setEvents] = useState([]);
+  const [selectID, setSelectID] = useState("");
   const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [selectedDate, setSelectedDate] = useState("");
-
-  const instance = axios.create({
-    baseURL: `${import.meta.env.VITE_ERROR_API}`,
-  });
-
-  instance.get("/api/calendar/month/2025-05-05").then((res) => {
-    console.log(res.data);
-  });
-
-  const handleDateClick = (arg) => {
-    setSelectedDate(arg.dateStr);
 
+  const handleDateClick = (info) => {
+    setSelectID(info.event._def.publicId);
     setModalIsOpen(true);
   };
 
+  useEffect(() => {
+    const instance = axios.create({
+      baseURL: `${import.meta.env.VITE_ERROR_API}`,
+    });
+    instance
+      .get("/api/calendar/all/2024-04-05")
+      .then((res) => {
+        const fetchedEvents = res.data.data.map((event) => ({
+          title: event.eventName,
+          id: event.eventId,
+          start: event.eventStartDate.split("T")[0],
+          end: event.eventEndDate.split("T")[0],
+          color: "#beb9ff",
+        }));
+        setEvents(fetchedEvents);
+      })
+      .catch((error) => {
+        console.error("Error fetching events:", error);
+      });
+  }, []);
+
   return (
     <>
       <CalendarContainer>
@@ -38,7 +52,8 @@ const EconoCalendar = () => {
             center: "",
             right: "",
           }}
-          events={[]}
+          events={events}
+          eventDisplay={"block"}
           dayCellContent={function (info) {
             var number = document.createElement("a");
             number.classList.add("fc-daygrid-day-number");
@@ -61,13 +76,16 @@ const EconoCalendar = () => {
           buttonText={{
             today: "오늘",
           }}
+          eventClick={handleDateClick}
           dateClick={handleDateClick}
         />
       </CalendarContainer>
-      <CreateModal
+      <CheckCalendar
         isOpen={modalIsOpen}
         onRequestClose={() => setModalIsOpen(false)}
-        selectedDate={selectedDate}
+        selectID={selectID}
+        events={events}
+        setEvents={setEvents}
       />
     </>
   );
@@ -118,7 +136,10 @@ const CalendarContainer = styled.div`
     color: #595959;
     border: 1px solid #cbcbcb;
   }
-
+  .fc-day-sun a {
+    color: red;
+    text-decoration: none;
+  }
   .fc-daygrid-day-top {
     width: 2rem;
     margin-left: 0.3rem;
@@ -133,10 +154,6 @@ const CalendarContainer = styled.div`
     margin-left: 0.5rem;
     width: 1.7rem;
   }
-  .fc-day-sun {
-    color: red;
-    text-decoration: none;
-  }
   .fc-day-today .fc-daygrid-day-frame {
     margin-top: 0.2rem;
   }

FE/error/src/fonts/font.css

@@ -2,7 +2,8 @@
   font-family: "Pretendard";
   font-display: fallback;
 
-  src: url("./Pretendard-Regular.woff") format("woff");
+  src: url("./Pretendard-Regular.woff") format("woff"),
+    url("./Pretendard-Bold.woff") format("woff");
 
   /* 사용할 폰트의 기본 스타일 */
   font-weight: normal;

FE/error/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});