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 (
-
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}
- >
-
-
- ))}
-
-
- navigate("/")}>취소
- 저장
-
-
- >
+
+
+
+
+
+
+
+
+
+ 랜덤 이미지 생성
+
+
+ {images.map((image, index) => (
+ selectImage(index)}
+ selected={selectedImage === 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;
`;