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 && {`option-${index}`}} + {`option-${index}`} ))} - 취소 - 저장 + 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`