Merge pull request #55 from JNU-econovation/FE

feat: 1-2차 스프린트

FE/error/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   settings: { react: { version: "18.2" } },
   plugins: ["react-refresh"],
   rules: {
+    "react/prop-types": "off",
     "react/jsx-no-target-blank": "off",
     "react-refresh/only-export-components": [
       "warn",

FE/error/src/App.jsx

@@ -2,6 +2,7 @@ import { Routes, Route } from "react-router-dom";
 import MainPage from "./pages/MainPage";
 import LoginPage from "./pages/LoginPage";
 import CalendarModify from "./pages/CalendarModify";
+import "./axiosConfig";
 
 function App() {
   return (

FE/error/src/axiosConfig.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+// Axios 기본 설정
+axios.defaults.baseURL = import.meta.env.VITE_ERROR_API;
+axios.defaults.headers.common["Content-Type"] = "application/json";
+axios.defaults.withCredentials = true;

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

@@ -9,13 +9,13 @@ import { MdOutlineLocationOn } from "react-icons/md";
 import { MdOutlineAutoAwesomeMotion } from "react-icons/md";
 import DeleteEvent from "./DeleteEvent";
 import { Link } from "react-router-dom";
-
 const CheckCalendar = ({
   isOpen,
   onRequestClose,
   selectID,
   events,
   handleDelete,
+  handleUpdateDeleteData,
 }) => {
   const [event, setEvent] = useState({});
 
@@ -37,10 +37,7 @@ const CheckCalendar = ({
       return;
     }
 
-    const instance = axios.create({
-      baseURL: `${import.meta.env.VITE_ERROR_API}`,
-    });
-    instance.get("/api/calendar/" + selectID).then((res) => {
+    axios.get("/api/calendar/" + selectID).then((res) => {
       createDate(
         res.data.data.eventName,
         res.data.data.eventStartDate,
@@ -87,6 +84,7 @@ const CheckCalendar = ({
           selectID={selectID}
           handleDelete={handleDelete}
           onRequestClose={onRequestClose}
+          handleUpdateDeleteData={handleUpdateDeleteData}
         />
       </ModalBar>
 

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

@@ -1,15 +1,17 @@
 import { RiDeleteBinLine } from "react-icons/ri";
 import axios from "axios";
 
-const DeleteEvent = ({ events, selectID, handleDelete, onRequestClose }) => {
+const DeleteEvent = ({
+  selectID,
+  handleDelete,
+  onRequestClose,
+  handleUpdateDeleteData,
+}) => {
   const calendarDelete = () => {
-    const instance = axios.create({
-      baseURL: `${import.meta.env.VITE_ERROR_API}`,
-      withCredentials: true,
-    });
-    instance
+    axios
       .delete("/api/calendar/" + selectID)
       .then(() => {
+        handleUpdateDeleteData(selectID);
         handleDelete();
         onRequestClose();
       })

FE/error/src/components/CreateModal.jsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import TimeSelect from "./TimeSelect";
 import ReactQuill from "react-quill";
 import { format, addDays, compareAsc, parseISO } from "date-fns";
+import axios from "axios";
 
 const CreateModal = ({
   isOpen,
@@ -89,37 +90,34 @@ const CreateModal = ({
 
   const handlePlaceChange = (e) => {
     setEventPlace(e.target.value);
-    console.log(e.target.value);
   };
-
+  function createDate(title, id, startDate, endDate) {
+    const specificEvent = {
+      title: title,
+      id: id,
+      start: startDate.split("T")[0],
+      end: endDate.split("T")[0],
+      color: "#ffc5bf",
+    };
+    handleUpdateData(specificEvent);
+  }
   const saveData = () => {
-    const url = `${import.meta.env.VITE_ERROR_API}/api/calendar`;
     const data = {
-      eventName,
-      eventStartDate,
-      eventEndDate,
+      eventName: eventName,
+      eventStartDate: eventStartDate,
+      eventEndDate: eventEndDate,
+      eventPlace: eventPlace,
       eventInfo: eventMemo,
-      eventPlace,
     };
-    console.log(JSON.stringify(data));
-    fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-      credentials: "include",
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
-        onRequestClose();
-        handleUpdateData(data);
-        //window.location.reload();
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+    axios.post("/api/calendar", data).then((res) => {
+      createDate(
+        eventName,
+        res.data.data.eventId,
+        eventStartDate,
+        eventEndDate
+      );
+      onRequestClose();
+    });
   };
 
   return (

FE/error/src/components/EconoCalendar.jsx

@@ -42,11 +42,7 @@ const EconoCalendar = () => {
   };
 
   useEffect(() => {
-    const instance = axios.create({
-      baseURL: `${import.meta.env.VITE_ERROR_API}`,
-      withCredentials: true,
-    });
-    instance
+    axios
       .get("/api/calendar/all/2024-04-05")
       .then((res) => {
         const fetchedEvents = res.data.data.map((event) => ({
@@ -64,10 +60,12 @@ const EconoCalendar = () => {
   }, []);
 
   const handleUpdateData = (newData) => {
-    console.log(newData);
-    setEvents([...events, newData]);
+    setEvents((preEvents) => [...preEvents, newData]);
   };
 
+  const handleUpdateDeleteData = (newData) => {
+    setEvents(events.filter((event) => event.id !== parseInt(newData)));
+  };
   return (
     <>
       <CalendarContainer>
@@ -131,8 +129,8 @@ const EconoCalendar = () => {
         isOpen={checkModalIsOpen}
         onRequestClose={() => setCheckModalIsOpen(false)}
         selectID={selectID}
-        events={events}
         handleDelete={handleDelete}
+        handleUpdateDeleteData={handleUpdateDeleteData}
       />
       <CreateModal
         isOpen={createModalIsOpen}
@@ -179,8 +177,8 @@ const CalendarContainer = styled.div`
   }
   .fc-prev-button:focus,
   .fc-next-button:focus {
-    outline: none; /* 기본 아웃라인을 제거합니다. */
-    box-shadow: none; /* 추가적인 그림자가 있다면 제거합니다. */
+    outline: none;
+    box-shadow: none;
   }
 
   .fc-today-button {
@@ -215,6 +213,8 @@ const CalendarContainer = styled.div`
     color: #fff;
     margin-left: 0.5rem;
     width: 1.53rem;
+    display: flex;
+    justify-content: center;
   }
   .fc-day-today .fc-daygrid-day-frame {
     margin-top: 0.2rem;
@@ -225,6 +225,7 @@ const CalendarContainer = styled.div`
   }
   .fc-daygrid-day-number {
     margin-top: 0.3rem;
+    margin-left: -0.1rem;
   }
   .fc-toolbar-title {
     margin-top: 0.2em;

FE/error/src/components/SideBar/GroupFilter.jsx

@@ -0,0 +1,42 @@
+import { FaPlus } from "react-icons/fa6";
+import { SlArrowDown } from "react-icons/sl";
+import styled from "styled-components";
+
+const GroupFilter = () => {
+  const createGroupFilter = () => {};
+  return (
+    <GroupFilterFrame>
+      <TextContainer>
+        <span style={{ color: "rgb(60, 64, 67)", marginBottom: "0.5rem" }}>
+          그룹 캘린더
+        </span>
+      </TextContainer>
+      <IconContainer>
+        <GroupFilterPlusBtn onClick={createGroupFilter}>
+          <FaPlus />
+          <SlArrowDown style={{ fontWeight: "bold", marginLeft: "0.5rem" }} />
+        </GroupFilterPlusBtn>
+      </IconContainer>
+    </GroupFilterFrame>
+  );
+};
+
+export default GroupFilter;
+
+const GroupFilterFrame = styled.div`
+  margin: 1.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const TextContainer = styled.div`
+  /* 필요한 스타일이 있다면 여기에 추가 */
+`;
+
+const IconContainer = styled.div`
+  /* 필요한 스타일이 있다면 여기에 추가 */
+`;
+const GroupFilterPlusBtn = styled.button`
+  background: none;
+  border: none;
+`;

FE/error/src/components/SideBar/IndividualFilter.jsx

@@ -0,0 +1,42 @@
+import { FaPlus } from "react-icons/fa6";
+import { SlArrowDown } from "react-icons/sl";
+import styled from "styled-components";
+
+const IndividualFilter = () => {
+  const createIndividualFilter = () => {};
+  return (
+    <IndividualFilterFrame>
+      <TextContainer>
+        <span style={{ color: "rgb(60, 64, 67)", marginBottom: "0.5rem" }}>
+          개인 캘린더
+        </span>
+      </TextContainer>
+      <IconContainer>
+        <IndividualFilterPlusBtn onClick={createIndividualFilter}>
+          <FaPlus />
+          <SlArrowDown style={{ fontWeight: "bold", marginLeft: "0.5rem" }} />
+        </IndividualFilterPlusBtn>
+      </IconContainer>
+    </IndividualFilterFrame>
+  );
+};
+
+export default IndividualFilter;
+
+const IndividualFilterFrame = styled.div`
+  margin: 1.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const TextContainer = styled.div`
+  /* 필요한 스타일이 있다면 여기에 추가 */
+`;
+
+const IconContainer = styled.div`
+  /* 필요한 스타일이 있다면 여기에 추가 */
+`;
+const IndividualFilterPlusBtn = styled.button`
+  background: none;
+  border: none;
+`;

FE/error/src/components/SideBar/ProfileBar.jsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const ProfileBar = () => {
+  return <ProfileFrame></ProfileFrame>;
+};
+
+export default ProfileBar;
+
+const ProfileFrame = styled.div`
+  width: 20rem;
+  height: 18.4375rem;
+`;

FE/error/src/components/SideBar/PublicFilter.jsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import ScheduleToggle from "./ScheduleToggle";
+
+const PublicFilter = () => {
+  return (
+    <PublicFilterFrame>
+      <div
+        style={{
+          color: "rgb(60, 64, 67)",
+          marginBottom: "0.5rem",
+        }}
+      >
+        에코노 캘린더
+      </div>
+      <SceduleType>
+        <ScheduleToggle color={"#ff5b5b"} />
+        공식행사
+      </SceduleType>
+      <SceduleType>
+        <ScheduleToggle color={"#63ABFF"} />
+        주간발표
+      </SceduleType>
+    </PublicFilterFrame>
+  );
+};
+
+export default PublicFilter;
+
+const PublicFilterFrame = styled.div`
+  margin: 1.3rem;
+`;
+
+const SceduleType = styled.div`
+  display: flex;
+  align-items: center;
+`;

FE/error/src/components/SideBar/ScheduleToggle.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { useState } from "react";
+
+const ScheduleToggle = ({ color }) => {
+  const [clicked, setClicked] = useState(true);
+
+  const handleOnClick = () => {
+    setClicked(!clicked);
+  };
+
+  return (
+    <>
+      <ClickedBox
+        type="checkbox"
+        onClick={handleOnClick}
+        color={color}
+        defaultChecked={clicked}
+      />
+    </>
+  );
+};
+
+export default ScheduleToggle;
+
+const ClickedBox = styled.input`
+  appearance: none;
+  width: 1.4rem;
+  height: 1.4rem;
+  border: 1.5px solid gainsboro;
+  opacity: 0.7;
+  border-radius: 0.35rem;
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+    background-color: ${(props) => props.color};
+    opacity: 0.7;
+  }
+`;