Merge branch 'FE' of https://github.com/JNU-econovation/econo-error i…

…nto FE
JNU-econovation · Jul 25, 2024 · e163347 · e163347
2 parents f1b7cc9 + 628494f
commit e163347
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 36 deletions.
diff --git a/FE/error/public/image 79.png b/FE/error/public/image 79.png
diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx
@@ -62,6 +62,14 @@ const EconoCalendar = ({
       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 {
       const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성
       localStorage.setItem("slackToken", newToken);

diff --git a/FE/error/src/components/SideBar/publicFilter/PublicFilter.jsx b/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={"#ff9898"} />
         공식행사
       </StyledSceduleType>
       <StyledSceduleType>
-        <ScheduleToggle color={"#63ABFF"} />
+        <ScheduleToggle color={"#98c8ff"} />
         주간발표
       </StyledSceduleType>
     </StyledPublicFilterFrame>

diff --git a/FE/error/src/components/scheduleCheck/CheckCalendar.jsx b/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>

diff --git a/FE/error/src/components/scheduleCreate/CreateModal.jsx b/FE/error/src/components/scheduleCreate/CreateModal.jsx
@@ -188,6 +188,7 @@ const CreateModal = ({
           eventEndDate
         );
         onRequestClose();
+        window.location.reload();
       });
   };
 
@@ -369,6 +370,9 @@ const SaveButton = styled.button`
   &:disabled {
     cursor: default;
   }
+  &:hover {
+    background-color: #f5f5f5;
+  }
 `;
 
 const EditorBox = styled.div`

diff --git a/FE/error/src/pages/LoginPage.jsx b/FE/error/src/pages/LoginPage.jsx
@@ -49,7 +49,11 @@ const LoginPage = () => {
   };
 
   if (isLoading) {
-    return <div>로그인 중...</div>;
+    return (
+      <LoadingContainer>
+        <LoadingImage src="/image79.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;
+`;
diff --git a/FE/error/src/pages/ProfilePage.jsx b/FE/error/src/pages/ProfilePage.jsx
@@ -40,7 +40,7 @@ const ProfilePage = () => {
     if (selectedImage !== null) {
       localStorage.setItem("profileImage", images[selectedImage]);
     }
-    navigate("/"); // MainPage로 이동
+    navigate("/");
   };
 
   return (

diff --git a/FE/error/src/utils/TimeSelect.jsx b/FE/error/src/utils/TimeSelect.jsx
@@ -1,8 +1,7 @@
-import { useState } from "react";
 import Select from "react-select";
 
 let hour = [];
-for (let i = 0; i < 24; i++) {
+for (let i = 0; i < 48; i++) {
   let op = {};
   let hourPart = i / 2;
   let minutePart = i % 2 === 0 ? "00" : "30";

diff --git a/FE/error/src/utils/filterUtils/FilterColorSelect.jsx b/FE/error/src/utils/filterUtils/FilterColorSelect.jsx
@@ -12,10 +12,10 @@ const FilterColorSelect = ({ setFilterColor }) => {
       "#CBAACB",
       "#FED7C3",
       "#789BDE",
-      "#55CBCD",
-      "#FFC0CB",
+      "#DEAC80",
+      "#D6EFD8",
       "#FF968A",
-      "#7367F0",
+      "#D4BDAC",
       "#FFC8A2",
       "#AAEF98",
     ];

diff --git a/FE/error/src/utils/filterUtils/ScheduleToggle.jsx b/FE/error/src/utils/filterUtils/ScheduleToggle.jsx
@@ -29,12 +29,10 @@ const StyledClickedBox = styled.input`
   width: 1.15rem;
   height: 1.15rem;
   border: 1.5px solid ${(props) => props.color};
-  opacity: 0.7;
   border-radius: 0.2rem;
   &:checked {
     background-image: url("data:image/svg+xml,%3Csvg viewBox='-2 -2 25 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 7.2C18 7.2 8.55 16.65 8.1 17.1C7.65 17.55 3.15 12.15 2.7 11.7C2.25 11.25 4.5 9.9 4.5 9.9L8.1 13.5L16.2 5.4C16.2 5.4 17.55 6.3 18 7.2Z' fill='white' stroke='white' stroke-width='0.63' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
     background-color: ${(props) => props.color};
-    opacity: 0.7;
   }
   margin-right: 0.5rem;
 `;