style: 필터 색상 변경 및 로딩 화면 변경

FE/error/src/components/EconoCalendar.jsx

@@ -61,6 +61,7 @@ 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);

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>

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

@@ -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`

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;
+`;

FE/error/src/pages/ProfilePage.jsx

@@ -40,130 +40,173 @@ const ProfilePage = () => {
     if (selectedImage !== null) {
       localStorage.setItem("profileImage", images[selectedImage]);
     }
-    navigate("/"); // MainPage로 이동
+    navigate("/");
   };
 
   return (
-    <>
-      <Header>
-        <Title>프로필 선택</Title>
-        <ProfilePicture
-          src={
-            selectedImage !== null
-              ? `/${images[selectedImage]}`
-              : "/Profile.png"
-          }
-          alt="Profile"
-        />
-      </Header>
-      <Container>
-        <ImageShuffle>
-          <FaRandom />
-          <RandomButton>랜덤 이미지 생성</RandomButton>
-        </ImageShuffle>
-        <ImageGrid>
-          {images.map((image, index) => (
-            <ImageContainer
-              key={index}
-              onClick={() => selectImage(index)}
-              selected={selectedImage === index}
-            >
-              <Image src={`/${image}`} alt={`option-${index}`} />
-            </ImageContainer>
-          ))}
-        </ImageGrid>
-        <ButtonContainer>
-          <CancleButton onClick={() => navigate("/")}>취소</CancleButton>
-          <SaveButton onClick={handleSave}>저장</SaveButton>
-        </ButtonContainer>
-      </Container>
-    </>
+    <PageContainer>
+      <ContentWrapper>
+        <Header>
+          <Title>프로필 선택</Title>
+        </Header>
+        <ProfilePictureContainer>
+          <ProfilePicture
+            src={
+              selectedImage !== null
+                ? `/${images[selectedImage]}`
+                : "/Profile.png"
+            }
+            alt="Profile"
+          />
+        </ProfilePictureContainer>
+        <MainContent>
+          <ImageShuffle>
+            <FaRandom />
+            <RandomButton>랜덤 이미지 생성</RandomButton>
+          </ImageShuffle>
+          <ImageGrid>
+            {images.map((image, index) => (
+              <ImageContainer
+                key={index}
+                onClick={() => selectImage(index)}
+                selected={selectedImage === index}
+              >
+                <Image src={`/${image}`} alt={`option-${index}`} />
+              </ImageContainer>
+            ))}
+          </ImageGrid>
+          <ButtonContainer>
+            <CancelButton onClick={() => navigate("/")}>취소</CancelButton>
+            <SaveButton onClick={handleSave}>저장</SaveButton>
+          </ButtonContainer>
+        </MainContent>
+      </ContentWrapper>
+    </PageContainer>
   );
 };
 
 export default ProfilePage;
 
-const Container = styled.div`
+const PageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 2rem;
+  box-sizing: border-box;
+`;
+
+const ContentWrapper = styled.div`
+  width: 100%;
+  max-width: 1200px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 4rem;
 `;
 
 const Header = styled.div`
-  display: flex;
-  width: 52%;
-  padding: 2rem 4rem 0 4rem;
-  justify-content: space-between;
+  width: 100%;
+  text-align: left;
 `;
 
 const Title = styled.h1`
   font-size: 2rem;
-  margin-right: 2rem; /* Space between title and profile picture */
 `;
 
-const ProfilePicture = styled.img`
+const ProfilePictureContainer = styled.div`
   display: flex;
   justify-content: center;
+  width: 100%;
+  margin-bottom: 1rem;
+`;
+
+const ProfilePicture = styled.img`
   width: 13rem;
   height: 13rem;
   border-radius: 50%;
+`;
+
+const MainContent = styled.div`
+  width: 100%;
+`;
+
+const ImageShuffle = styled.div`
+  display: flex;
+  align-items: center;
   margin-bottom: 1rem;
 `;
 
 const RandomButton = styled.div`
   padding: 0 0.5rem;
   cursor: pointer;
-  align-self: flex-start;
 `;
 
 const ImageGrid = styled.div`
   display: grid;
   grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 0.5rem;
   margin-bottom: 1rem;
 `;
 
 const ImageContainer = styled.div`
-  width: 9.8rem;
-  height: 9.8rem;
+  aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  transition: all 0.3s ease;
+  border: ${(props) =>
+    props.selected ? "2px solid #007bff" : "2px solid transparent"};
+  border-radius: 50%;
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
 `;
 
 const Image = styled.img`
   max-width: 100%;
   max-height: 100%;
-`;
-
-const SaveButton = styled.button`
-  padding: 0.5rem 4rem;
-  align-self: flex-end;
-  background-color: white;
-  border: 1px solid #cbcbcb;
-  border-radius: 4px;
-`;
-
-const ImageShuffle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  align-self: flex-start;
+  object-fit: cover;
+  /* border-radius: 6px; */
+  border-radius: 50%;
 `;
 
 const ButtonContainer = styled.div`
   display: flex;
-  align-self: flex-end;
+  justify-content: flex-end;
   gap: 0.8rem;
   margin-top: 0.5rem;
 `;
 
-const CancleButton = styled.button`
+const Button = styled.button`
   padding: 0.5rem 4rem;
   background-color: white;
+  color: #333;
   border: 1px solid #cbcbcb;
   border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: #007bff;
+    color: white;
+    border-color: #007bff;
+  }
+`;
+
+const CancelButton = styled(Button)`
+  &:hover {
+    background-color: #dc3545;
+    border-color: #dc3545;
+  }
+`;
+
+const SaveButton = styled(Button)`
+  &:hover {
+    background-color: #28a745;
+    border-color: #28a745;
+  }
 `;