diff --git a/FITple-Frontend/data/ProfileBodyApi.jsx b/FITple-Frontend/data/ProfileBodyApi.jsx
new file mode 100644
index 0000000..f1bdb3e
--- /dev/null
+++ 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/src/components/ProfileMyBody/ProfileMyBody.jsx b/FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx
index fd6c277..c50b4d6 100644
--- 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 (
-
+
+ {/* */}
);
};
diff --git a/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.jsx b/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.jsx
new file mode 100644
index 0000000..91cbc2a
--- /dev/null
+++ 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 (
+
+ {/* 컴포넌트 작업을 위해서 div하나 추가 */}
+
+ 체형 정보
+ 수정
+
+
+
+
+ 키
+
+ {props.data.height}
+ cm
+
+
+
+ 몸무게
+
+ {props.data.weight}
+ kg
+
+
+
+ 어깨 너비
+
+ {props.data.shoulder_width}
+ cm
+
+
+
+ 가슴둘레
+
+ {props.data.chest_circumference}
+ cm
+
+
+
+ 팔 길이
+
+ {props.data.arm_length}
+ cm
+
+
+
+ 허리 둘레
+
+ {props.data.waist_circumference}
+ cm
+
+
+
+ 허벅지 둘레
+
+ {props.data.thigh_circumference}
+ cm
+
+
+
+ 엉덩이 둘레
+
+ {props.data.hip_circumference}
+ cm
+
+
+
+
+ );
+};
+
+export default UserInfoBody2;
diff --git a/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.style.js b/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.style.js
new file mode 100644
index 0000000..48e1617
--- /dev/null
+++ b/FITple-Frontend/src/components/UserInfoBody2/UserInfoBody2.style.js
@@ -0,0 +1,255 @@
+import { styled } from "styled-components";
+
+export const UserInfoPageWrapper = styled.div`
+ width: 100vw;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: start;
+ margin: 30px 0;
+`;
+// 컴포넌트 작업을 위해서 추가
+export const MainBox = styled.div`
+ display: flex;
+ align-items: center;
+ /* justify-content: space-between; */
+ justify-content: ${(props) => (props.$profile ? "space-between" : "center")};
+ width: 100%;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+ padding: 0 30px;
+`;
+
+export const ProfileImageWrapper = styled.div`
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ overflow: hidden;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // border: 2px solid #0276FE;
+ margin-bottom: 20px;
+`;
+
+export const ProfileImage = styled.img`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+`;
+
+export const MainText = styled.p`
+ font-size: 28px;
+ font-weight: bold;
+ text-align: center;
+`;
+
+export const EditBTN = styled.button`
+ height: fit-content;
+ display: ${(props) => (props.$profile ? "block" : "none")};
+ background-color: #0075ff;
+ color: white;
+ border-radius: 30px;
+ white-space: nowrap;
+ font-size: 16px;
+ font-weight: 500;
+ padding: 9px 36px;
+ border: none;
+ filter: drop-shadow(0px 16px 7px rgba(0, 0, 0, 0.01))
+ drop-shadow(0px 9px 6px rgba(0, 0, 0, 0.05))
+ drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09))
+ drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
+`;
+
+export const SubText = styled.p`
+ width: auto;
+ text-align: left;
+ font-size: 17px;
+ color: #0276fe;
+ font-weight: 550;
+ margin-top: 10px;
+`;
+
+export const Container = styled.div`
+ height: 135px;
+`;
+
+export const InfoContainer = styled.div`
+ width: 55%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ border: ${(props) => (props.$profile ? "none" : "1px solid #838383")};
+ border-radius: 20px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ padding: 40px 0px;
+ align-items: center;
+`;
+
+export const InfoWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-top: 40px;
+ margin-left: -30px;
+`;
+
+export const TextWrapper = styled.div`
+ width: 80px;
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+`;
+
+export const InputWrapper = styled.div`
+ width: 78%;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const InputBox = styled.input.attrs((props) => ({
+ type: props.type || "text", // 기본값을 'text'로 설정
+ id: props.id,
+}))`
+ width: 100%;
+ height: 30px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ border: 1px solid #838383;
+ border-radius: 8px;
+ background-color: white;
+ padding: 10px 15px;
+ font-size: 17px;
+ outline-color: #0075ff;
+`;
+
+export const GenderWrapper = styled.div`
+ width: 105%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+`;
+
+export const GenderButton = styled.button`
+ width: 100%;
+ padding: 15px 20px;
+ border: ${({ isSelected }) => (isSelected ? "none" : "1px solid #838383")};
+ border-radius: 10px;
+ background-color: ${({ isSelected }) => (isSelected ? "#0075FF" : "white")};
+ color: ${({ isSelected }) => (isSelected ? "white" : "black")};
+ cursor: pointer;
+ font-size: 15px;
+ &:focus {
+ outline: none;
+ }
+`;
+
+export const FitWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: start;
+ gap: 10px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+`;
+
+export const FitButton = styled.button`
+ width: auto;
+ padding: 10px 20px;
+ border: 1px solid #0276fe;
+ border-radius: 25px;
+ background-color: ${({ isSelected }) => (isSelected ? "#0075FF" : "white")};
+ color: ${({ isSelected }) => (isSelected ? "white" : "black")};
+ cursor: pointer;
+ font-size: 12px;
+ &:focus {
+ outline: none;
+ }
+`;
+
+export const StyleWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: start;
+ gap: 5px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ flex-wrap: wrap;
+`;
+
+export const StyleButton = styled.button`
+ width: auto;
+ padding: 10px 20px;
+ border: 1px solid #0276fe;
+ border-radius: 25px;
+ background-color: ${({ isSelected }) => (isSelected ? "#0075FF" : "white")};
+ color: ${({ isSelected }) => (isSelected ? "white" : "black")};
+ cursor: pointer;
+ margin: 5px;
+ font-size: 12px;
+ &:focus {
+ outline: none;
+ }
+`;
+
+export const BodyInfoContainer = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 30px;
+`;
+
+export const InputSet = styled.div`
+ width: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ margin-bottom: 10px;
+`;
+
+export const BodyInputWrapper = styled.div`
+ width: 350px;
+ height: 50px;
+ border: 1px solid #838383;
+ border-radius: 8px;
+ background-color: white;
+ padding: 0px 50px;
+ font-size: 17px;
+ outline-color: #0075ff;
+ box-sizing: border-box;
+ position: relative;
+ margin-top: 10px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+`;
+
+export const BodyInputBox = styled.div``;
+
+export const UnitText = styled.span`
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 17px;
+ pointer-events: none;
+`;
+
+export const SubmitButton = styled.button`
+ width: 150px;
+ height: 50px;
+ background-color: black;
+ border-radius: 10px;
+ font-size: 17px;
+ color: white;
+ margin-top: 25px;
+ cursor: pointer;
+`;