diff --git a/FE/error/public/seed0011.png b/FE/error/public/seed0011.png
new file mode 100644
index 0000000..94559c1
Binary files /dev/null and b/FE/error/public/seed0011.png differ
diff --git a/FE/error/public/seed0014.png b/FE/error/public/seed0014.png
new file mode 100644
index 0000000..0ccc309
Binary files /dev/null and b/FE/error/public/seed0014.png differ
diff --git a/FE/error/public/seed0065.png b/FE/error/public/seed0065.png
new file mode 100644
index 0000000..42a9be0
Binary files /dev/null and b/FE/error/public/seed0065.png differ
diff --git a/FE/error/public/seed0141.png b/FE/error/public/seed0141.png
new file mode 100644
index 0000000..d7f7e6d
Binary files /dev/null and b/FE/error/public/seed0141.png differ
diff --git a/FE/error/public/seed0154.png b/FE/error/public/seed0154.png
new file mode 100644
index 0000000..f4d6552
Binary files /dev/null and b/FE/error/public/seed0154.png differ
diff --git a/FE/error/public/seed0182.png b/FE/error/public/seed0182.png
new file mode 100644
index 0000000..f34bdd3
Binary files /dev/null and b/FE/error/public/seed0182.png differ
diff --git a/FE/error/public/seed0256.png b/FE/error/public/seed0256.png
new file mode 100644
index 0000000..62c90eb
Binary files /dev/null and b/FE/error/public/seed0256.png differ
diff --git a/FE/error/public/seed0291.png b/FE/error/public/seed0291.png
new file mode 100644
index 0000000..7e18029
Binary files /dev/null and b/FE/error/public/seed0291.png differ
diff --git a/FE/error/public/seed0298.png b/FE/error/public/seed0298.png
new file mode 100644
index 0000000..6aa0519
Binary files /dev/null and b/FE/error/public/seed0298.png differ
diff --git a/FE/error/public/seed0301.png b/FE/error/public/seed0301.png
new file mode 100644
index 0000000..a6ddcac
Binary files /dev/null and b/FE/error/public/seed0301.png differ
diff --git a/FE/error/public/seed0365.png b/FE/error/public/seed0365.png
new file mode 100644
index 0000000..9c7ba2a
Binary files /dev/null and b/FE/error/public/seed0365.png differ
diff --git a/FE/error/public/seed0419.png b/FE/error/public/seed0419.png
new file mode 100644
index 0000000..6ee8bd1
Binary files /dev/null and b/FE/error/public/seed0419.png differ
diff --git a/FE/error/public/seed0460.png b/FE/error/public/seed0460.png
new file mode 100644
index 0000000..005b1d8
Binary files /dev/null and b/FE/error/public/seed0460.png differ
diff --git a/FE/error/public/seed0461.png b/FE/error/public/seed0461.png
new file mode 100644
index 0000000..305c355
Binary files /dev/null and b/FE/error/public/seed0461.png differ
diff --git a/FE/error/public/seed0838.png b/FE/error/public/seed0838.png
deleted file mode 100644
index a319405..0000000
Binary files a/FE/error/public/seed0838.png and /dev/null differ
diff --git a/FE/error/public/seed0877.png b/FE/error/public/seed0877.png
new file mode 100644
index 0000000..01d7e0a
Binary files /dev/null and b/FE/error/public/seed0877.png differ
diff --git a/FE/error/public/seed0882.png b/FE/error/public/seed0882.png
new file mode 100644
index 0000000..3852644
Binary files /dev/null and b/FE/error/public/seed0882.png differ
diff --git a/FE/error/src/components/SideBar/ProfileBar.jsx b/FE/error/src/components/SideBar/ProfileBar.jsx
index c6d11be..d8f459c 100644
--- a/FE/error/src/components/SideBar/ProfileBar.jsx
+++ b/FE/error/src/components/SideBar/ProfileBar.jsx
@@ -1,12 +1,20 @@
import styled from "styled-components";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { HiPencil } from "react-icons/hi2";
import { useNavigate } from "react-router-dom";
const ProfileBar = () => {
const [isHovered, setIsHovered] = useState(false);
+ const [profileImage, setProfileImage] = useState("Profile.png");
const navigate = useNavigate();
+ useEffect(() => {
+ const savedImage = localStorage.getItem("profileImage");
+ if (savedImage) {
+ setProfileImage(savedImage);
+ }
+ }, []);
+
const handleProfileClick = () => {
navigate("/profile");
};
@@ -18,7 +26,8 @@ const ProfileBar = () => {
onMouseLeave={() => setIsHovered(false)}
onClick={handleProfileClick}
>
-
+
+ {/* */}
{isHovered && (
@@ -48,11 +57,12 @@ const ProfileImageContainer = styled.div`
const ProfileImage = styled.img`
margin-top: 1.25rem;
width: 13rem;
+ height: 13rem;
`;
const EditIconOverlay = styled.div`
position: absolute;
- top: 1rem;
+ top: 1.5rem;
left: 0;
right: 0;
bottom: 0;
diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx
index 69da177..5fa8b0d 100644
--- a/FE/error/src/pages/MainPage.jsx
+++ b/FE/error/src/pages/MainPage.jsx
@@ -97,7 +97,7 @@ const CalendarPage = styled.div`
const LineBox = styled.div`
width: 100%;
- height: 1.25rem;
+ height: 1.5rem;
border: 1px solid #ddd;
border-right: none;
margin-top: 0.65rem;
diff --git a/FE/error/src/pages/ProfilePage.jsx b/FE/error/src/pages/ProfilePage.jsx
index d1f7253..d6b6d80 100644
--- a/FE/error/src/pages/ProfilePage.jsx
+++ b/FE/error/src/pages/ProfilePage.jsx
@@ -1,50 +1,47 @@
import { useState, useEffect } from "react";
import styled from "styled-components";
import { FaRandom } from "react-icons/fa";
-import axios from "axios"; // axios를 import 합니다.
+import { useNavigate } from "react-router-dom";
const ProfilePage = () => {
const [selectedImage, setSelectedImage] = useState(null);
- const [images, setImages] = useState([]);
- const [isLoading, setIsLoading] = useState(true);
- const storedToken = localStorage.getItem("slackToken");
+ const navigate = useNavigate();
+ const images = [
+ "seed0011.png",
+ "seed0014.png",
+ "seed0065.png",
+ "seed0141.png",
+ "seed0154.png",
+ "seed0182.png",
+ "seed0256.png",
+ "seed0291.png",
+ "seed0298.png",
+ "seed0365.png",
+ "seed0419.png",
+ "seed0460.png",
+ "seed0301.png",
+ "seed0461.png",
+ "seed0877.png",
+ "seed0882.png",
+ ];
useEffect(() => {
- const fetchImages = async () => {
- try {
- const response = await axios.get("http://localhost:8080/api/images", {
- headers: { Authorization: `Bearer ${storedToken}` },
- });
- setImages(response.data);
- setIsLoading(false);
- } catch (error) {
- console.error("Failed to fetch images:", error);
- if (error.response) {
- // 서버 응답이 2xx 범위를 벗어난 상태 코드를 반환한 경우
- console.error(error.response.data);
- console.error(error.response.status);
- console.error(error.response.headers);
- } else if (error.request) {
- // 요청이 이루어졌으나 응답을 받지 못한 경우
- console.error(error.request);
- } else {
- // 요청을 설정하는 중에 오류가 발생한 경우
- console.error("Error", error.message);
- }
- setIsLoading(false);
- }
- };
-
- fetchImages();
+ const savedImage = localStorage.getItem("profileImage");
+ if (savedImage) {
+ setSelectedImage(images.indexOf(savedImage));
+ }
}, []);
const selectImage = (index) => {
setSelectedImage(index);
};
- if (isLoading) {
- return Loading...
;
- }
+ const handleSave = () => {
+ if (selectedImage !== null) {
+ localStorage.setItem("profileImage", images[selectedImage]);
+ }
+ navigate("/"); // MainPage로 이동
+ };
return (
<>
@@ -53,8 +50,8 @@ const ProfilePage = () => {
@@ -71,13 +68,13 @@ const ProfilePage = () => {
onClick={() => selectImage(index)}
selected={selectedImage === index}
>
- {image && }
+
))}
- 취소
- 저장
+ navigate("/")}>취소
+ 저장
>
@@ -161,6 +158,7 @@ const ButtonContainer = styled.div`
display: flex;
align-self: flex-end;
gap: 0.8rem;
+ margin-top: 0.5rem;
`;
const CancleButton = styled.button`