[팀 설정 페이지] 팀 멤버 프로필 UI

client/src/App.tsx

@@ -4,7 +4,6 @@ import { Redirect, Route, Switch } from "react-router";
 import reset from "./util/reset";
 import MainPage from "./Page/MainPage";
 import MyPage from "./Page/MyPage";
-import TeamCreatePage from "./Page/TeamCreatePage";
 import Page from "./Page/Page";
 
 function App() {
@@ -15,7 +14,6 @@ function App() {
         <Route path="/main" component={MainPage} />
         <Route path="/sub" component={Page} />
         <Route path="/mypage" component={MyPage} />
-        <Route path="/teamCreate" component={TeamCreatePage} />
         <Redirect path="*" to="/main" />
       </Switch>
     </>

client/src/Molecules/MainBodyLeftButtonContainer.tsx

@@ -28,7 +28,7 @@ function MainBodyLeftButtonContainer() {
       <Link to="/sub/CowDogPage?person=3">
         <Button type="Medium">3:3 미팅</Button>
       </Link>
-      <Link to="/teamCreate">
+      <Link to="/sub/teamSetting">
         <Button type="Medium">팀 설정</Button>
       </Link>
     </div>

client/src/Organism/TeamInfoContainer.tsx

@@ -6,8 +6,8 @@ import { ChildrenType } from "../util/type";
 
 const TeamInfoContainerStyle = css`
   display: flex;
-  width: 50vw;
-  height: 50vh;
+  width: 60vw;
+  height: 60vh;
   border: 1px solid #b0c2ff;
 `;
 const ImageContainerStyle = css`

client/src/Organism/TeamSettingMemberContainer.tsx

@@ -1,22 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import React from "react";
+import { ChildrenType } from "../util/type";
 
 const TeamSettingMemberContainerStyle = css`
   display: flex;
   width: 90%;
-  height: 20%;
+  height: fit-content;
   margin: 2vh auto;
   align-items: center;
   justify-content: space-around;
 `;
-function TeamSettingMemberContainer() {
-  return (
-    <div css={TeamSettingMemberContainerStyle}>
-      <div>김영진</div>
-      <div>홍한솔</div>
-    </div>
-  );
+function TeamSettingMemberContainer({ children }: ChildrenType) {
+  return <div css={TeamSettingMemberContainerStyle}>{children}</div>;
 }
 
 export default TeamSettingMemberContainer;

client/src/Page/Page.tsx

@@ -4,6 +4,8 @@ import Header from "../Organism/Header";
 import CowDogPage from "./CowDogPage";
 import LogInPage from "./LogInPage";
 import RegisterPage from "./RegisterPage";
+import TeamCreatePage from "./TeamCreatePage";
+import TeamSettingPage from "./TeamSettingPage";
 
 function App() {
   return (
@@ -13,6 +15,8 @@ function App() {
         <Route path="/sub/Login" component={LogInPage} />
         <Route path="/sub/Register" component={RegisterPage} />
         <Route path="/sub/CowDogPage" component={CowDogPage} />
+        <Route path="/sub/teamCreate" component={TeamCreatePage} />
+        <Route path="/sub/teamSetting" component={TeamSettingPage} />
       </Switch>
     </>
   );

client/src/Page/TeamCreatePage.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 import { css } from "@emotion/react";
 import { Link } from "react-router-dom";
-import Header from "../Organism/Header";
 import TeamCreateButtonContainer from "../Organism/TeamButtonContainer";
 import TeamInfoContainer from "../Organism/TeamInfoContainer";
 import InputLabel from "../Molecules/InputLabel";
@@ -19,25 +18,22 @@ const TeamCreatePageStyle = css`
 
 function TeamCreatePage() {
   return (
-    <>
-      <Header />
-      <div css={TeamCreatePageStyle}>
-        <TeamInfoContainer>
-          <InputLabel label="팀명" />
-          <InputLabel label="소개" />
-          <InputLabel label="가능시간" />
-          <InputLabel label="지역" />
-        </TeamInfoContainer>
-        <TeamCreateButtonContainer>
-          <Link to="/teamSetting">
-            <Button type="Medium">생성</Button>
-          </Link>
-          <Link to="/teamSetting">
-            <Button type="Medium">삭제</Button>
-          </Link>
-        </TeamCreateButtonContainer>
-      </div>
-    </>
+    <div css={TeamCreatePageStyle}>
+      <TeamInfoContainer>
+        <InputLabel label="팀명" />
+        <InputLabel label="소개" />
+        <InputLabel label="가능시간" />
+        <InputLabel label="지역" />
+      </TeamInfoContainer>
+      <TeamCreateButtonContainer>
+        <Link to="/sub/teamSetting">
+          <Button type="Medium">생성</Button>
+        </Link>
+        <Link to="/sub/teamSetting">
+          <Button type="Medium">삭제</Button>
+        </Link>
+      </TeamCreateButtonContainer>
+    </div>
   );
 }
 

client/src/Page/TeamSettingPage.tsx

@@ -1,17 +1,11 @@
 import React from "react";
 import TeamCreateIcon from "../Atom/TeamCreateIcon";
-import Header from "../Organism/Header";
 import TeamSettingTemplate from "../Template/TeamSettingTemplate";
 
 function TeamSettingPage() {
   const teamState = true;
 
-  return (
-    <>
-      <Header />
-      {teamState ? <TeamSettingTemplate /> : <TeamCreateIcon />}
-    </>
-  );
+  return <>{teamState ? <TeamSettingTemplate /> : <TeamCreateIcon />}</>;
 }
 
 export default TeamSettingPage;

client/src/Template/TeamSettingTemplate.tsx

@@ -1,12 +1,19 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Button } from "../Atom/Button";
+import ProfileCard from "../Atom/ProfileCard";
+import ProfileInfo from "../Atom/ProfileInfo";
 import InputLabel from "../Molecules/InputLabel";
 import TeamButtonContainer from "../Organism/TeamButtonContainer";
 import TeamInfoContainer from "../Organism/TeamInfoContainer";
 import TeamSettingMemberContainer from "../Organism/TeamSettingMemberContainer";
+import { getTeamPeople } from "../util/dummyData";
+import { PersonInfoType, TeamInfoType } from "../util/type";
 
+const ProfileStyle = css`
+  margin: 30px 0px;
+`;
 const TeamSettingTemPlateStyle = css`
   display: flex;
   height: 100vh;
@@ -16,15 +23,34 @@ const TeamSettingTemPlateStyle = css`
   align-items: center;
 `;
 function TeamSettingTemplate() {
+  const [teamInfo, setTeamInfo] = useState<TeamInfoType | null>(null);
+  const getTeamInfo = async () => {
+    const data = await getTeamPeople("태홍");
+    setTeamInfo(data);
+  };
+  useEffect(() => {
+    getTeamInfo();
+  }, []);
   return (
     <div css={TeamSettingTemPlateStyle}>
       <TeamInfoContainer>
-        <InputLabel label="팀명" placeholder="민태홍 남친구함" />
-        <InputLabel label="소개" placeholder="운동 잘하는 사람" />
-        <InputLabel label="가능시간" placeholder="2023/02/11" />
-        <InputLabel label="지역" placeholder="경기/수원" />
+        <InputLabel label="팀명" placeholder={teamInfo?.teamID} />
+        <InputLabel label="소개" placeholder={teamInfo?.info} />
+        <InputLabel label="가능시간" placeholder={teamInfo?.time} />
+        <InputLabel label="지역" placeholder={teamInfo?.location} />
       </TeamInfoContainer>
-      <TeamSettingMemberContainer />
+      <TeamSettingMemberContainer>
+        {teamInfo?.member?.map((data: PersonInfoType, idx) => {
+          const { sex } = data;
+          return (
+            <div css={ProfileStyle}>
+              <ProfileCard type={sex} idx={idx}>
+                <ProfileInfo data={data} idx={idx} />
+              </ProfileCard>
+            </div>
+          );
+        })}
+      </TeamSettingMemberContainer>
       <TeamButtonContainer>
         <Button type="Medium">초대하기</Button>
         <Button type="Medium">수정하기</Button>

client/src/util/type.tsx

@@ -34,7 +34,7 @@ export type TeamInfoType = {
   location: string;
   age: number;
   sex: string;
-  member: PersonInfoType[];
+  member?: PersonInfoType[] | null;
 };
 
 export type ProfileType = {
@@ -53,7 +53,7 @@ export type ProfileInfoDataType = {
 };
 
 export type ProfileListType = {
-  datas: ProfileType[] | null;
+  datas?: PersonInfoType[] | null | ProfileType[];
   person: number;
   setOpenModal: (prev: any) => void;
 };