Merge pull request #30 from UMC-FITple/feat/#16

Feat/#16 프로필페이지 구현

FITple-Frontend/src/App.jsx

@@ -6,6 +6,10 @@ import LoginPage from "./pages/LoginPage/LoginPage";
 import SignupPage from "./pages/SignupPage/SignupPage";
 import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage";
 import ClothmainPage from "./pages/ClothmainPage/ClothmainPage";
+import ProfilePage from "./pages/ProfilePage/ProfilePage";
+import UserInfoPage from "./pages/UserInfoPage/UserInfoPage";
+import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage";
+import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage";
 
 function App() {
   return (
@@ -22,6 +26,11 @@ function App() {
         <Route path="/product" element={<ClothdetailPage />} />
         {/* 이게 메인페이지? */}
         <Route path="/" element={<ClothmainPage />} />
+        {/* 프로필페이지 */}
+        <Route path="/profile" element={<ProfilePage />} />
+        <Route path="/user" element={<UserInfoPage />} />
+        <Route path="/change" element={<ChangepwdPage />} />
+        <Route path="/check" element={<RecomUserFeedPage />} />
       </Routes>
     </>
   );

FITple-Frontend/src/components/FollowButton/FollowButton.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Container } from "./FollowButton.style"
+import { useState } from "react";
+import { Container } from "./FollowButton.style";
 
 function FollowButton() {
   const [isClicked, setIsClicked] = useState(false);

FITple-Frontend/src/components/FollowButton/FollowButton.style.js

@@ -1,18 +1,19 @@
 import styled from "styled-components";
 
+// margin-left : auto-> 54px로 수정
 export const Container = styled.button`
   font-size: 20px;
   font-weight: 700;
-  margin-left:auto;
-  width:222px;
+  margin-left: 54px;
+  width: 222px;
   padding: 9px 0;
   border-radius: 10px;
-  background-color: ${props => (props.isClicked ? '#0276FE' : 'black')};
+  background-color: ${(props) => (props.isClicked ? "#0276FE" : "black")};
   color: white;
   border: none;
-  text-align:center;
+  text-align: center;
   cursor: pointer;
-  
+
   &:focus {
     outline: none;
   }

FITple-Frontend/src/components/Infom/Infom.jsx

@@ -7,7 +7,7 @@ import Follower from "../../components/Follower/Follower";
 import OneLine from "../../components/OneLine/OneLine";
 import FollowButton from "../../components/FollowButton/FollowButton";
 
-function Infom() {
+function Infom({ showFollowButton = true }) {
   return (
     <Container>
       <Wrap>
@@ -16,16 +16,25 @@ function Infom() {
         </SubWrap>
         <UserName>핏플3</UserName>
         <SubWrap>
-          <Profile></Profile>
+          <Profile />
         </SubWrap>
         <SubWrap>
-          <Follower></Follower>
-          <Followcom></Followcom>
+          <Follower />
+          <Followcom />
         </SubWrap>
       </Wrap>
       <Wrap>
-        <OneLine></OneLine>
-        <FollowButton></FollowButton>
+        {/* showFollowButton이 True면 기본 값유지 False면 FollowButton제거하고  OneLine 크기증가*/}
+        {showFollowButton ? (
+          <>
+            <OneLine />
+            <FollowButton />
+          </>
+        ) : (
+          <>
+            <OneLine width={"100%"} />
+          </>
+        )}
       </Wrap>
     </Container>
   );

FITple-Frontend/src/components/Infom/Infom.style.js

@@ -1,35 +1,34 @@
 import styled from "styled-components";
 
+// 수영 : width 100% -> width 717px으로 수정하고 padding제거했습니다!
+// 컴포넌트에서 margin삭제하고 informWarp에 마진추가하였습니다
 export const Container = styled.div`
-    margin-top:42px;
-    position:relative;
-    box-sizing:border-box;
-    width:100%;
-    display:flex;
-    flex-direction:column;
-    justify-content:center;
-    gap:20px;
-    padding: 0 25%;
-`
+  position: relative;
+  box-sizing: border-box;
+  width: 717px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+`;
 
 export const Wrap = styled.div`
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    
-`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
 export const SubWrap = styled.div`
-    display:flex;
-    align-items:center;
-    gap:28px;
-`
+  display: flex;
+  align-items: center;
+  gap: 28px;
+`;
 
 export const UserImg = styled.img`
-    width:140px;
-    height:140px;
-`
+  width: 140px;
+  height: 140px;
+`;
 
 export const UserName = styled.h3`
-    font-size:32px;
-    font-weight:bold;
-`
+  font-size: 32px;
+  font-weight: bold;
+`;

FITple-Frontend/src/components/OneLine/OneLine.jsx

@@ -1,11 +1,8 @@
-import { Container } from "./OneLine.style"
+import { Container } from "./OneLine.style";
 
-function OneLine() {
-  return (
-    <Container>
-        페미닌 무드의 옷들을 좋아해요!
-    </Container>
-  )
+function OneLine({ width }) {
+  // width를 props로 주면 그에 따라 변경
+  return <Container width={width}>페미닌 무드의 옷들을 좋아해요!</Container>;
 }
 
-export default OneLine
+export default OneLine;

FITple-Frontend/src/components/OneLine/OneLine.style.js

@@ -1,13 +1,14 @@
 import styled from "styled-components";
 
+// width props가 없으면 기본 437px
+// margin followButton으로 이동
 export const Container = styled.div`
-    box-sizing:border-box;
-    max-width:100%;
-    width:437px;
-    padding:12px 24px;
-    border-radius:50px;
-    border: solid 1px #D9D9D9;
-    font-size:16px;
-    font-weight:bold;
-    margin-right:54px;
-    `
+  box-sizing: border-box;
+  max-width: 100%;
+  width: ${(props) => props.width || "437px"};
+  padding: 12px 24px;
+  border-radius: 50px;
+  border: solid 1px #d9d9d9;
+  font-size: 16px;
+  font-weight: bold;
+`;

FITple-Frontend/src/components/ProfileFavor/ProfileFavor.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ProfileFavor = () => {
+  return <div>두번째 화면</div>;
+};
+
+export default ProfileFavor;

FITple-Frontend/src/components/ProfileLove/ProfileLove.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ProfileLove = () => {
+  return <div>첫번째 화면</div>;
+};
+
+export default ProfileLove;

FITple-Frontend/src/components/ProfileMyBody/ProfileMyBody.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ProfileMyBody = () => {
+  return <div>3번째 페이지</div>;
+};
+
+export default ProfileMyBody;

FITple-Frontend/src/components/TabBox/TabBox.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Container, TabItem, TabMenu, TabText } from "./TabBox.style";
+import LoveClothBlue from "/assets/LoveCloth-blue.svg";
+import LoveClothBlack from "/assets/LoveCloth-black.svg";
+import FavorClothBlue from "/assets/FavorCloth-blue.svg";
+import FavorClothBlack from "/assets/FavorCloth-black.svg";
+import MyBodyBlue from "/assets/MyBody-blue.svg";
+import MyBodyBlack from "/assets/MyBody-black.svg";
+
+const TabBox = ({ selectItem, setSelectItem }) => {
+  const tabData = [
+    {
+      id: 0,
+      content: "좋아하는 옷",
+      selectImg: LoveClothBlue,
+      deSelectImg: LoveClothBlack,
+    },
+    {
+      id: 1,
+      content: "관심있는 옷",
+      selectImg: FavorClothBlue,
+      deSelectImg: FavorClothBlack,
+    },
+    {
+      id: 2,
+      content: "내 체형정보",
+      selectImg: MyBodyBlue,
+      deSelectImg: MyBodyBlack,
+    },
+  ];
+
+  const handleItem = (e, idx) => {
+    setSelectItem(idx);
+  };
+  return (
+    <Container>
+      {tabData.map((item) => (
+        // 가운데 이거나 선택된 버튼 css수정
+        <TabMenu
+          onClick={(e) => handleItem(e, item.id)}
+          key={item.id}
+          $isCenter={item.id === 1}
+          selected={selectItem === item.id}
+        >
+          <TabItem>
+            {selectItem === item.id ? (
+              <img src={item.selectImg} />
+            ) : (
+              <img src={item.deSelectImg} />
+            )}
+
+            <TabText selected={selectItem === item.id}>{item.content}</TabText>
+          </TabItem>
+        </TabMenu>
+      ))}
+    </Container>
+  );
+};
+
+export default TabBox;

FITple-Frontend/src/components/TabBox/TabBox.style.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+export const Container = styled.div`
+  display: flex;
+  /* 드레그 막기 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+export const TabMenu = styled.div`
+  cursor: pointer;
+  height: 96px;
+  width: 33.3%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-left: ${(props) => (props.$isCenter ? "1px solid #D9D9D9" : "none")};
+  border-right: ${(props) => (props.$isCenter ? "1px solid #D9D9D9" : "none")};
+  border-bottom: ${(props) => (props.selected ? "none" : "1px solid #D9D9D9")};
+`;
+export const TabItem = styled.div`
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+export const TabText = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  color: ${(props) => (props.selected ? "#0276FE" : "#838383")};
+`;