feat: [#100] 프로필페이지 좋아하는 옷, 관심있는 옷 API 구현

UMC-FITple · Aug 23, 2024 · 83b5f93 · 83b5f93
1 parent acb5ba8
commit 83b5f93
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 64 deletions.
diff --git a/FITple-Frontend/data/GetProfileApi.jsx b/FITple-Frontend/data/GetProfileApi.jsx
@@ -1,13 +1,8 @@
 const localhost = "http://localhost:3000";
 
-export const getProfile = async (category, cursorId, size) => {
+export const getProfile = async () => {
   try {
-    const url = new URL(`${localhost}/FITple/my/closet/main`);
-
-    // 쿼리 파라미터 추가
-    if (category !== undefined) url.searchParams.append("category", category);
-    if (cursorId !== undefined) url.searchParams.append("cursorId", cursorId);
-    if (size !== undefined) url.searchParams.append("size", size);
+    const url = new URL(`${localhost}/FITple/profile`);
 
     const response = await fetch(url, {
       method: "GET",

diff --git a/FITple-Frontend/data/ProfileFavorApi.jsx b/FITple-Frontend/data/ProfileFavorApi.jsx
@@ -0,0 +1,21 @@
+const localhost = "http://localhost:3000";
+
+export const ProfileFavorApi = async (category) => {
+  try {
+    const url = new URL(`${localhost}/FITple/profile/wish`);
+    if (category) url.searchParams.append("category", category);
+    const response = await fetch(url, {
+      method: "GET",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error(`서버 오류: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("검색 요청 중 오류가 발생했습니다.", error);
+    throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+  }
+};
diff --git a/FITple-Frontend/data/ProfileLoveApi.jsx b/FITple-Frontend/data/ProfileLoveApi.jsx
@@ -0,0 +1,21 @@
+const localhost = "http://localhost:3000";
+
+export const ProfileLoveApi = async (category) => {
+  try {
+    const url = new URL(`${localhost}/FITple/profile/likes`);
+    if (category) url.searchParams.append("category", category);
+    const response = await fetch(url, {
+      method: "GET",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error(`서버 오류: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("검색 요청 중 오류가 발생했습니다.", error);
+    throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+  }
+};
diff --git a/FITple-Frontend/src/components/Infom/Infom.jsx b/FITple-Frontend/src/components/Infom/Infom.jsx
@@ -1,4 +1,16 @@
-import { Container, Wrap, SubWrap, UserImg, UserName } from "./Infom.style";
+import {
+  Container,
+  Wrap,
+  SubWrap,
+  UserImg,
+  UserName,
+  InformContainer,
+  Items,
+  SubItems,
+  FollowContainer,
+  FollowerNum,
+  Text,
+} from "./Infom.style";
 import SetUserImg from "/assets/UserImg.svg";
 
 import Profile from "../../components/Profile/Profile";
@@ -7,20 +19,45 @@ import Follower from "../../components/Follower/Follower";
 import OneLine from "../../components/OneLine/OneLine";
 import FollowButton from "../../components/FollowButton/FollowButton";
 
-function Infom({ showFollowButton = true }) {
+function Infom({ showFollowButton = true, data }) {
   return (
     <Container>
       <Wrap>
         <SubWrap>
-          <UserImg src={SetUserImg}></UserImg>
+          <UserImg
+            src={data?.userData?.length > 0 && data.userData[0].user_image}
+          ></UserImg>
         </SubWrap>
-        <UserName>핏플3</UserName>
+        <UserName>
+          {data?.userData?.length > 0 && data.userData[0].nickname}
+        </UserName>
         <SubWrap>
-          <Profile />
+          <InformContainer>
+            <Items>
+              {data?.userData?.length > 0 && data.userData[0].height}cm{" "}
+              {data?.userData?.length > 0 && data.userData[0].weight}kg
+            </Items>
+            <SubItems>
+              <img src="/assets/HeartGray.svg" height={16} />
+              {data?.fit?.length > 0 && data.fit[0]},{" "}
+              {data?.fit?.length > 0 && data.fit[1]}
+            </SubItems>
+            <SubItems>
+              <img src="/assets/HangerGray.svg" height={16} />
+              {data?.style?.length > 0 && data.style[0]},{" "}
+              {data?.style?.length > 0 && data.style[1]}
+            </SubItems>
+          </InformContainer>
         </SubWrap>
         <SubWrap>
-          <Follower />
-          <Followcom />
+          <FollowContainer>
+            <FollowerNum>{data?.follower}</FollowerNum>
+            <Text>팔로워</Text>
+          </FollowContainer>
+          <FollowContainer>
+            <FollowerNum>{data?.following}</FollowerNum>
+            <Text>팔로잉</Text>
+          </FollowContainer>
         </SubWrap>
       </Wrap>
       <Wrap>

diff --git a/FITple-Frontend/src/components/Infom/Infom.style.js b/FITple-Frontend/src/components/Infom/Infom.style.js
@@ -23,6 +23,40 @@ export const SubWrap = styled.div`
   gap: 28px;
 `;
 
+export const InformContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`;
+export const FollowContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+`;
+
+export const FollowerNum = styled.div`
+  font-size: 32px;
+  font-weight: 600;
+  color: #0276fe;
+`;
+
+export const Text = styled.div`
+  font-size: 23px;
+  font-weight: 600;
+`;
+
+export const Items = styled.div`
+  font-size: 24px;
+`;
+export const SubItems = styled.div`
+  font-size: 16px;
+  color: #838383;
+`;
 export const UserImg = styled.img`
   width: 140px;
   height: 140px;

diff --git a/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx b/FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx
@@ -7,16 +7,28 @@ import {
 } from "./ProfileFavor.style";
 import SideBar from "../SideBar/SideBar";
 import ItemList from "../ItemList/ItemList";
-
+import { useState } from "react";
+import { ProfileFavorApi } from "../../../data/ProfileFavorApi";
+import { useEffect } from "react";
 const ProfileFavor = () => {
+  const [category, setCategory] = useState(undefined);
+  const [profileFavorData, setProfileFavorData] = useState([]);
+  const getProfileClothFavorData = async () => {
+    const response = await ProfileFavorApi(category);
+    setProfileFavorData(response.result.clothData);
+    console.log(response.result.clothData);
+  };
+  useEffect(() => {
+    getProfileClothFavorData();
+  }, [category]);
   return (
     <Container>
       <Wrap>
         <SideBarWrap>
-          <SideBar />
+          <SideBar setCategory={setCategory} />
         </SideBarWrap>
         <ItemListWrap>
-          <ItemList $user />
+          <ItemList $user data={profileFavorData} />
         </ItemListWrap>
       </Wrap>
     </Container>

diff --git a/FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx b/FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx
@@ -7,16 +7,28 @@ import {
 } from "./ProfileLove.style";
 import SideBar from "../SideBar/SideBar";
 import ItemList from "../ItemList/ItemList";
+import { useState } from "react";
+import { ProfileLoveApi } from "../../../data/ProfileLoveApi";
+import { useEffect } from "react";
 
 const ProfileLove = () => {
+  const [category, setCategory] = useState(undefined);
+  const [profileLoveData, setProfileLoveData] = useState([]);
+  const getProfileClothLoveData = async () => {
+    const response = await ProfileLoveApi(category);
+    setProfileLoveData(response.result.clothData);
+  };
+  useEffect(() => {
+    getProfileClothLoveData();
+  }, [category]);
   return (
     <Container>
       <Wrap>
         <SideBarWrap>
-          <SideBar />
+          <SideBar setCategory={setCategory} />
         </SideBarWrap>
         <ItemListWrap>
-          <ItemList />
+          <ItemList data={profileLoveData} />
         </ItemListWrap>
       </Wrap>
     </Container>

diff --git a/FITple-Frontend/src/components/UserItem/UserItem.jsx b/FITple-Frontend/src/components/UserItem/UserItem.jsx
@@ -41,47 +41,53 @@ const UserItem = ({ ...props }) => {
     console.log(isOpen);
   };
   return (
-    <Container>
-      {/* 아이템 이미지 */}
-      <ImgWrap>
-        <ItemImg
-          src={
-            item.cloth_image ||
-            "https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
-          }
-        />
-        {item.likes == 1 && <HeartImg src={HeartIcon} />}
-      </ImgWrap>
+    <>
+      {props.data[0] !== "해당 제품은 등록되어 있지 않아요." ? (
+        <Container>
+          {/* 아이템 이미지 */}
+          <ImgWrap>
+            <ItemImg
+              src={
+                item.cloth_image ||
+                "https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
+              }
+            />
+            {item.likes == 1 && props.$main && <HeartImg src={HeartIcon} />}
+          </ImgWrap>
 
-      {/* 유저정보 */}
-      <UserInfo {...props}>
-        {/* 유저 프로필 */}
-        <UserImg
-          src={
-            item.user_image ||
-            "https://blog.kakaocdn.net/dn/mmiWC/btszy4hoVjM/JAHukeXLibgX76VaWsAqp1/img.jpg"
-          }
-        />
-        <p>{item.nickname}</p>
-      </UserInfo>
-      <ItemWrap>
-        <BrandWrap>
-          <Brand>{item.brand}</Brand>
-          <OptionBTN {...props} onClick={() => showOptionBox()}>
-            <OptionImg src={OptionIcon} />
-          </OptionBTN>
-          <OptionBox $active={isOpen}>
-            <OptionItem $first>옷 정보 수정하기</OptionItem>
-            <OptionItem $last>옷 정보 삭제하기</OptionItem>
-          </OptionBox>
-        </BrandWrap>
-        <ItemName>{item.cloth_name}</ItemName>
-        <SizeWrap>
-          <Size>{item.size} ㆍ</Size>
-          <Size> {item.fit}</Size>
-        </SizeWrap>
-      </ItemWrap>
-    </Container>
+          {/* 유저정보 */}
+          <UserInfo {...props}>
+            {/* 유저 프로필 */}
+            <UserImg
+              src={
+                item.user_image ||
+                "https://blog.kakaocdn.net/dn/mmiWC/btszy4hoVjM/JAHukeXLibgX76VaWsAqp1/img.jpg"
+              }
+            />
+            <p>{item.nickname}</p>
+          </UserInfo>
+          <ItemWrap>
+            <BrandWrap>
+              <Brand>{item.brand}</Brand>
+              <OptionBTN {...props} onClick={() => showOptionBox()}>
+                <OptionImg src={OptionIcon} />
+              </OptionBTN>
+              <OptionBox $active={isOpen}>
+                <OptionItem $first>옷 정보 수정하기</OptionItem>
+                <OptionItem $last>옷 정보 삭제하기</OptionItem>
+              </OptionBox>
+            </BrandWrap>
+            <ItemName>{item.cloth_name}</ItemName>
+            <SizeWrap>
+              <Size>{item.size} ㆍ</Size>
+              <Size> {item.fit}</Size>
+            </SizeWrap>
+          </ItemWrap>
+        </Container>
+      ) : (
+        <div>상품이 없습니다</div>
+      )}
+    </>
   );
 };
 

diff --git a/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx b/FITple-Frontend/src/pages/ProfilePage/ProfilePage.jsx
@@ -17,11 +17,15 @@ import Infom from "../../components/Infom/Infom";
 import { useNavigate } from "react-router-dom";
 import { getProfile } from "../../../data/GetProfileApi";
 import useAuthStore from "../../../data/store/userAuthStore";
+import { useEffect } from "react";
 
 const ProfilePage = () => {
   const navigate = useNavigate();
   const [selectItem, setSelectItem] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
+  const [profileData, setProfileData] = useState({});
+  const [profileLoveData, setProfileLoveData] = useState([]);
+
   const { token } = useAuthStore();
 
   // render
@@ -30,7 +34,7 @@ const ProfilePage = () => {
       case 0:
         return <ProfileLove />;
       case 1:
-        return <ProfileFavor />;
+        return <ProfileFavor data={profileLoveData} />;
       case 2:
         return <ProfileMyBody />;
     }
@@ -46,19 +50,20 @@ const ProfilePage = () => {
   };
 
   const getProfileData = async () => {
-    console.log("토큰확인", token);
     const response = await getProfile();
-    console.log(response);
+    setProfileData(response.result);
   };
-  getProfileData();
+  useEffect(() => {
+    getProfileData();
+  }, []);
 
   return (
     <>
       {/* 위에 box */}
       <ProfileContainer>
         <ProfileBox>
           {/* 컴포넌트 사용 */}
-          <Infom showFollowButton={false} />
+          <Infom showFollowButton={false} data={profileData} />
           {/* 옵션 버튼 */}
           <OptionBtn onClick={() => showOptionBox()}>
             <img src={OptionIcon} />