Feat/176/swagger

BE/error/Dockerfile

@@ -1,4 +1,5 @@
-FROM openjdk:17-oracle
+#FROM openjdk:17-oracle
+FROM --platform=linux/amd64 openjdk:17-oracle
 RUN mkdir -p /logs
 
 ENV	PROFILE defaultgi
@@ -11,4 +12,4 @@ ENV DD_VERSION=${RELEASE_VERSION}
 
 ARG JAR_FILE="./build/libs/*.jar"
 COPY ${JAR_FILE} app.jar
-ENTRYPOINT ["java", "-jar", "/app.jar"]
+ENTRYPOINT ["java", "-jar", "/app.jar"]

BE/error/src/main/java/com/example/demo/config/SwaggerConfig.java

@@ -0,0 +1,21 @@
+package com.example.demo.config;
+
+
+import io.swagger.v3.oas.models.Components;
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class SwaggerConfig {
+
+    @Bean
+    public OpenAPI openAPI() {
+        return new OpenAPI().components(new Components()).info(apiInfo());
+    }
+
+    private Info apiInfo() {
+        return new Info().title("ERROR API").description("ERROR Swagger").version("2.0.0");
+    }
+}

FE/error/src/components/EconoCalendar.jsx

@@ -1,48 +1,23 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import styled from "styled-components";
 import interactionPlugin from "@fullcalendar/interaction";
-import axios from "axios";
 import CreateModal from "./scheduleCreate/CreateModal";
 import CheckCalendar from "./scheduleCheck/CheckCalendar";
 
-const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
-  const [events, setEvents] = useState([]);
+const EconoCalendar = ({
+  isLoggedIn,
+  setIsLoggedIn,
+  setEvents,
+  events,
+  setToken,
+}) => {
   const [selectID, setSelectID] = useState("");
   const [checkModalIsOpen, setCheckModalIsOpen] = useState(false);
   const [createModalIsOpen, setCreateModalIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState("");
-  const [token, setToken] = useState(null);
-
-  useEffect(() => {
-    const storedToken = localStorage.getItem("slackToken");
-    setToken(storedToken);
-
-    const isUserLoggedIn = !!storedToken;
-    setIsLoggedIn(isUserLoggedIn);
-
-    const uri = isUserLoggedIn
-      ? "/api/calendar/all"
-      : "/api/calendar/all/public";
-
-    axios
-      .get(uri, { headers: { Authorization: `Bearer ${storedToken}` } })
-      .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: "#FFC0CB",
-        }));
-        setEvents(fetchedEvents);
-      })
-      .catch((error) => {
-        console.error("Error fetching events:", error);
-      });
-  }, []);
 
   const handleDelete = () => {
     toast("일정이 삭제되었습니다", {
@@ -86,13 +61,15 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
       localStorage.removeItem("slackToken");
       setIsLoggedIn(false);
       setToken(null);
+      window.location.reload();
       // } else {
       //   const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성
       //   localStorage.setItem("slackToken", newToken);
       //   setToken(newToken);
       //   setIsLoggedIn(true);
       // }
       //TODO: 추후 아래 코드로 변경
+      //}
     } else {
       window.location.href = "/login";
     }

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

@@ -10,6 +10,7 @@ const IndividualFilter = ({
   filterLists,
   addNewFilter,
   updateDeleteFilter,
+  onFilterChange,
 }) => {
   const [individualFilterIsOpen, setindividualFilterIsOpen] = useState(false);
   const [filterListsIsOpen, setFilterListsIsOpen] = useState(true);
@@ -69,6 +70,7 @@ const IndividualFilter = ({
         <FilterList
           filterLists={filterLists}
           updateDeleteFilter={updateDeleteFilter}
+          onFilterChange={onFilterChange}
         />
       )}
     </>

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

@@ -13,11 +13,11 @@ const PublicFilter = () => {
         <div style={{ fontSize: "1.1rem" }}>에코노 캘린더</div>
       </div>
       <StyledSceduleType>
-        <ScheduleToggle color={"#ff5b5b"} />
+        <ScheduleToggle color={"#FF968A"} />
         공식행사
       </StyledSceduleType>
       <StyledSceduleType>
-        <ScheduleToggle color={"#63ABFF"} />
+        <ScheduleToggle color={"#ffd4b5"} />
         주간발표
       </StyledSceduleType>
     </StyledPublicFilterFrame>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { GoPencil } from "react-icons/go";
 import { IoClose } from "react-icons/io5";
 import { MdOutlineLocationOn } from "react-icons/md";
@@ -36,29 +36,27 @@ const CheckCalendar = ({
     setEvent(specificEvent);
   }
 
-  const isMount = useRef(false);
   useEffect(() => {
-    if (!isMount.current) {
-      isMount.current = true;
-      return;
-    }
+    if (isOpen && selectID) {
+      setEvent({}); // 새로운 데이터 로딩 전에 event 상태 초기화
 
-    axios
-      .get("/api/calendar/" + selectID, {
-        headers: { Authorization: `Bearer ${storedToken}` },
-      })
-      .then((res) => {
-        createDate(
-          res.data.data.eventName,
-          res.data.data.eventStartDate,
-          res.data.data.eventEndDate,
-          res.data.data.eventPlace,
-          res.data.data.eventInfo,
-          res.data.data.eventType,
-          res.data.data.filterColor
-        );
-      });
-  }, [selectID]);
+      axios
+        .get("/api/calendar/" + selectID, {
+          headers: { Authorization: `Bearer ${storedToken}` },
+        })
+        .then((res) => {
+          createDate(
+            res.data.data.eventName,
+            res.data.data.eventStartDate,
+            res.data.data.eventEndDate,
+            res.data.data.eventPlace,
+            res.data.data.eventInfo,
+            res.data.data.eventType,
+            res.data.data.filterColor
+          );
+        });
+    }
+  }, [selectID, isOpen, storedToken]);
 
   function date(startDate, endDate) {
     if (!startDate && !endDate) return "날짜 정보 없음";
@@ -75,15 +73,20 @@ const CheckCalendar = ({
       } ${endDate.split("T")[1]}`;
   }
 
+  const handleRequestClose = () => {
+    setEvent({});
+    onRequestClose();
+  };
+
   return (
     <Modal
       isOpen={isOpen}
-      onRequestClose={onRequestClose}
+      onRequestClose={handleRequestClose}
       className="CheckModal"
       overlayClassName="overlay"
     >
       <ModalBar>
-        <button onClick={onRequestClose}>
+        <button onClick={handleRequestClose}>
           <IoClose size="2rem" color="rgb(95, 99, 104)" />
         </button>
         <StyledModifyIcon>
@@ -97,7 +100,7 @@ const CheckCalendar = ({
           events={events}
           selectID={selectID}
           handleDelete={handleDelete}
-          onRequestClose={onRequestClose}
+          onRequestClose={handleRequestClose}
           handleUpdateDeleteData={handleUpdateDeleteData}
         />
       </ModalBar>

FE/error/src/components/scheduleCreate/CreateModal.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { format, addDays, compareAsc, parseISO } from "date-fns";
+import { format, addDays } from "date-fns";
 import axios from "axios";
 import Modal from "react-modal";
 import styled from "styled-components";
@@ -66,7 +66,7 @@ const CreateModal = ({
   };
 
   const isFilterSelected = () => {
-    return selectedFilter && selectedFilter.category && selectedFilter.filter;
+    return selectedFilter && selectedFilter.category && selectedFilter.filterId;
   };
 
   const handleTitleChange = (event) => {
@@ -128,13 +128,13 @@ const CreateModal = ({
   };
 
   const handleFilterSelect = (category, filter) => {
-    setSelectedFilter({ category, filter });
+    setSelectedFilter({ category, ...filter });
     setActiveDropdown(null);
   };
 
   const getButtonContent = (category) => {
     if (selectedFilter && selectedFilter.category === category) {
-      return selectedFilter.filter;
+      return selectedFilter.filterName;
     }
     switch (category) {
       case "public":
@@ -170,18 +170,16 @@ const CreateModal = ({
       eventEndDate: eventEndDate,
       eventPlace: eventPlace,
       eventInfo: eventMemo,
-      scheduleType: selectedFilter.category,
-      filterName: selectedFilter.filter,
+      scheduleType: selectedFilter.category.toUpperCase(),
+      filter: {
+        filterId: selectedFilter.filterId,
+      },
     };
 
     axios
-      .post(
-        "/api/calendar",
-        {
-          headers: { Authorization: `Bearer ${storedToken}` },
-        },
-        data
-      )
+      .post("/api/calendar", data, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
       .then((res) => {
         createDate(
           eventName,
@@ -190,6 +188,7 @@ const CreateModal = ({
           eventEndDate
         );
         onRequestClose();
+        window.location.reload();
       });
   };
 
@@ -227,12 +226,22 @@ const CreateModal = ({
                   {category === "public" && (
                     <>
                       <DropdownItem
-                        onClick={() => handleFilterSelect(category, "공식행사")}
+                        onClick={() =>
+                          handleFilterSelect(category, {
+                            filterId: "public1",
+                            filterName: "공식행사",
+                          })
+                        }
                       >
                         공식행사
                       </DropdownItem>
                       <DropdownItem
-                        onClick={() => handleFilterSelect(category, "주간발표")}
+                        onClick={() =>
+                          handleFilterSelect(category, {
+                            filterId: "public2",
+                            filterName: "주간발표",
+                          })
+                        }
                       >
                         주간발표
                       </DropdownItem>
@@ -242,13 +251,21 @@ const CreateModal = ({
                     <>
                       <DropdownItem
                         onClick={() =>
-                          handleFilterSelect(category, "28기 신입모집 TF")
+                          handleFilterSelect(category, {
+                            filterId: "group1",
+                            filterName: "28기 신입모집 TF",
+                          })
                         }
                       >
                         28기 신입모집 TF
                       </DropdownItem>
                       <DropdownItem
-                        onClick={() => handleFilterSelect(category, "행사부")}
+                        onClick={() =>
+                          handleFilterSelect(category, {
+                            filterId: "group2",
+                            filterName: "행사부",
+                          })
+                        }
                       >
                         행사부
                       </DropdownItem>
@@ -258,9 +275,7 @@ const CreateModal = ({
                     privateFilters.map((filter) => (
                       <DropdownItem
                         key={filter.filterId}
-                        onClick={() =>
-                          handleFilterSelect(category, filter.filterName)
-                        }
+                        onClick={() => handleFilterSelect(category, filter)}
                       >
                         {filter.filterName}
                       </DropdownItem>
@@ -355,6 +370,9 @@ const SaveButton = styled.button`
   &:disabled {
     cursor: default;
   }
+  &:hover {
+    background-color: #f5f5f5;
+  }
 `;
 
 const EditorBox = styled.div`

FE/error/src/pages/LoginPage.jsx

@@ -49,7 +49,11 @@ const LoginPage = () => {
   };
 
   if (isLoading) {
-    return <div>로그인 중...</div>;
+    return (
+      <LoadingContainer>
+        <LoadingImage src="/image80.png" alt="Loading" />
+      </LoadingContainer>
+    );
   }
 
   return (
@@ -128,3 +132,20 @@ const StyledCharacter = styled.img`
   top: 25%;
   left: 60%;
 `;
+
+const LoadingContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.8);
+`;
+
+const LoadingImage = styled.img`
+  width: 100px;
+  height: auto;
+`;