Merge pull request #103 from UMC-FITple/feat/#100

Feat/#100 프로필 정보 API 연결
UMC-FITple · Aug 23, 2024 · f9697f2 · f9697f2
2 parents 30ca627 + 7a6e839
commit f9697f2
Show file tree

Hide file tree

Showing 13 changed files with 584 additions and 65 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/ProfileBodyApi.jsx b/FITple-Frontend/data/ProfileBodyApi.jsx
@@ -0,0 +1,21 @@
+const localhost = "http://localhost:3000";
+
+export const ProfileBodyApi = async () => {
+  try {
+    const url = new URL(`${localhost}/FITple/profile/body_info`);
+
+    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/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/ProfileMyBody/ProfileMyBody.jsx b/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx
@@ -1,11 +1,25 @@
 import React from "react";
 import UserBodyInfo from "../UserInfoBody/UserInfoBody";
 import { Container } from "./ProfileMyBody.style";
+import { ProfileBodyApi } from "../../../data/ProfileBodyApi";
+import { useState } from "react";
+import { useEffect } from "react";
+import UserInfoBody2 from "../UserInfoBody2/UserInfoBody2";
 
 const ProfileMyBody = () => {
+  const [bodyData, setBodyData] = useState({});
+  const getProfileBodyData = async () => {
+    const response = await ProfileBodyApi();
+    console.log("response", response.result);
+    setBodyData(response.result);
+  };
+  useEffect(() => {
+    getProfileBodyData();
+  }, []);
   return (
     <Container>
-      <UserBodyInfo $profile />
+      <UserInfoBody2 $profile data={bodyData} />
+      {/* <UserBodyInfo $profile /> */}
     </Container>
   );
 };

diff --git a/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.jsx b/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.jsx
@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  MainText,
+  InfoContainer,
+  BodyInfoContainer,
+  InputSet,
+  SubText,
+  BodyInputWrapper,
+  BodyInputBox,
+  UnitText,
+  MainBox,
+  EditBTN,
+} from "./UserInfoBody2.style";
+
+const UserInfoBody2 = ({ ...props }) => {
+  return (
+    <InfoContainer {...props}>
+      {/* 컴포넌트 작업을 위해서 div하나 추가 */}
+      <MainBox {...props}>
+        <MainText>체형 정보</MainText>
+        <EditBTN {...props}>수정</EditBTN>
+      </MainBox>
+
+      <BodyInfoContainer>
+        <InputSet>
+          <SubText>키</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.height}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>몸무게</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.weight}</BodyInputBox>
+            <UnitText>kg</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>어깨 너비</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.shoulder_width}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>가슴둘레</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.chest_circumference}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>팔 길이</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.arm_length}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>허리 둘레</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.waist_circumference}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>허벅지 둘레</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.thigh_circumference}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+        <InputSet>
+          <SubText>엉덩이 둘레</SubText>
+          <BodyInputWrapper>
+            <BodyInputBox>{props.data.hip_circumference}</BodyInputBox>
+            <UnitText>cm</UnitText>
+          </BodyInputWrapper>
+        </InputSet>
+      </BodyInfoContainer>
+    </InfoContainer>
+  );
+};
+
+export default UserInfoBody2;