diff --git a/FE/error/public/image 79.png b/FE/error/public/image 79.png new file mode 100644 index 00000000..a14c83cf Binary files /dev/null and b/FE/error/public/image 79.png differ diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx index 2320cacb..bf712236 100644 --- a/FE/error/src/components/EconoCalendar.jsx +++ b/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); diff --git a/FE/error/src/components/SideBar/publicFilter/PublicFilter.jsx b/FE/error/src/components/SideBar/publicFilter/PublicFilter.jsx index cc8797b3..eb686520 100644 --- a/FE/error/src/components/SideBar/publicFilter/PublicFilter.jsx +++ b/FE/error/src/components/SideBar/publicFilter/PublicFilter.jsx @@ -13,11 +13,11 @@ const PublicFilter = () => {
에코노 캘린더
- + 공식행사 - + 주간발표 diff --git a/FE/error/src/components/scheduleCheck/CheckCalendar.jsx b/FE/error/src/components/scheduleCheck/CheckCalendar.jsx index 2424f0b8..0610dac0 100644 --- 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 ( - @@ -97,7 +100,7 @@ const CheckCalendar = ({ events={events} selectID={selectID} handleDelete={handleDelete} - onRequestClose={onRequestClose} + onRequestClose={handleRequestClose} handleUpdateDeleteData={handleUpdateDeleteData} /> diff --git a/FE/error/src/components/scheduleCreate/CreateModal.jsx b/FE/error/src/components/scheduleCreate/CreateModal.jsx index 7c15f6ce..e0b306ad 100644 --- 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 index e9e0cf0b..d438aa7a 100644 --- a/FE/error/src/pages/LoginPage.jsx +++ b/FE/error/src/pages/LoginPage.jsx @@ -49,7 +49,11 @@ const LoginPage = () => { }; if (isLoading) { - return
로그인 중...
; + return ( + + + + ); } 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 index d6b6d803..39133a1e 100644 --- a/FE/error/src/pages/ProfilePage.jsx +++ b/FE/error/src/pages/ProfilePage.jsx @@ -40,130 +40,173 @@ const ProfilePage = () => { if (selectedImage !== null) { localStorage.setItem("profileImage", images[selectedImage]); } - navigate("/"); // MainPage로 이동 + navigate("/"); }; return ( - <> -
- 프로필 선택 - -
- - - - 랜덤 이미지 생성 - - - {images.map((image, index) => ( - selectImage(index)} - selected={selectedImage === index} - > - {`option-${index}`} - - ))} - - - navigate("/")}>취소 - 저장 - - - + + +
+ 프로필 선택 +
+ + + + + + + 랜덤 이미지 생성 + + + {images.map((image, index) => ( + selectImage(index)} + selected={selectedImage === index} + > + {`option-${index}`} + + ))} + + + navigate("/")}>취소 + 저장 + + +
+
); }; 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; + } `; diff --git a/FE/error/src/utils/TimeSelect.jsx b/FE/error/src/utils/TimeSelect.jsx index 19199495..e9fd49dd 100644 --- 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 index 3f2a3ed4..56f995b4 100644 --- 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 index 3e4fa3af..4c31c270 100644 --- 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; `;