Merge pull request #152 from JNU-econovation/FE

feat: AI이미지 선택 후 사용 기능 추가

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}
       >
-        <ProfileImage src="seed0838.png" alt="Profile" />
+        <ProfileImage src={`/${profileImage}`} alt="Profile" />
+        {/* <ProfileImage src={`/Profile.png`} alt="Profile" /> */}
         {isHovered && (
           <EditIconOverlay>
             <HiPencil />
@@ -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;

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;

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 <div>Loading...</div>;
-  }
+  const handleSave = () => {
+    if (selectedImage !== null) {
+      localStorage.setItem("profileImage", images[selectedImage]);
+    }
+    navigate("/"); // MainPage로 이동
+  };
 
   return (
     <>
@@ -53,8 +50,8 @@ const ProfilePage = () => {
         <ProfilePicture
           src={
             selectedImage !== null
-              ? images[selectedImage]
-              : "https://via.placeholder.com/200"
+              ? `/${images[selectedImage]}`
+              : "/Profile.png"
           }
           alt="Profile"
         />
@@ -71,13 +68,13 @@ const ProfilePage = () => {
               onClick={() => selectImage(index)}
               selected={selectedImage === index}
             >
-              {image && <Image src={image} alt={`option-${index}`} />}
+              <Image src={`/${image}`} alt={`option-${index}`} />
             </ImageContainer>
           ))}
         </ImageGrid>
         <ButtonContainer>
-          <CancleButton>취소</CancleButton>
-          <SaveButton>저장</SaveButton>
+          <CancleButton onClick={() => navigate("/")}>취소</CancleButton>
+          <SaveButton onClick={handleSave}>저장</SaveButton>
         </ButtonContainer>
       </Container>
     </>
@@ -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`