Feat: #5 TeamSettingPage 기능구성_3

src/pages/setting/TeamSettingPage.tsx

@@ -1,76 +1,40 @@
 /* eslint-disable react/destructuring-assignment */
 import { useState } from 'react';
 
-const user = {
-  id: 1,
-  name: 'mococo',
-  password: '1234',
-  email: 'mococo@com',
-  phone: '010-1234-7777',
-  img: '',
-  comment: "Hi, I'm Mococo!",
-  link1: '[email protected]',
-  link2: null,
-  link3: null,
-  team: [
-    { id: 1, name: 'GU-99', status: 'Y', admin: 1 },
-    { id: 2, name: '김찌와 쏘주', status: 'Y', admin: 3 },
-    { id: 3, name: '모코코', status: 'N', admin: 3 },
-  ],
-};
-
 // mode가 Y일때, admin(생성자)가 본인이면 설정하기, 삭제하기 버튼 노출
 // -> 설정하기 클릭 시 팀 설정 팝업 / 삭제하기 버튼 클릭 시 team[index] 삭제
 // mode가 Y일때, admin(생성자)가 본인이 아니면 탈퇴하기 버튼 노출하고 클릭 시 status N으로 변경
 // mode가 N이면, 가입하기, 거부하기 버튼 노출
 // -> 가입하기 클릭 시 status Y로 변경 / 거부하기 클릭 시 user.team에서 삭제 및 team[index].coworker에서 삭제
-
-function ButtonList(props: { status: string; id: number; admin: number }) {
-  const [mode, setMode] = useState(props.status);
-  const [teamList, setTeamList] = useState([
-    { id: 1, name: 'GU-99', admin: 1, coworker: [2, 3], desc: '' },
-    { id: 2, name: '김찌와 쏘주', admin: 3, coworker: [1], desc: '' },
-    { id: 3, name: '모코코', admin: 3, coworker: [1, 2], desc: '' },
-  ]);
-
-  const [coworker, setCoworker] = useState(teamList[Number(props.id)]);
-  const [status, setStatus] = useState(props.status);
-  const newTeam = {
-    id: props.id,
-    name: teamList[Number(props.id)].name,
-    admin: props.admin,
-    coworker: teamList[Number(props.id)].coworker,
-    desc: teamList[Number(props.id)].desc,
-  };
-  const newTeamList = [...teamList];
-  newTeamList.push(newTeam);
-  setTeamList(newTeamList);
-
-  if (props.status === 'Y') {
-    if (props.id === props.admin) {
+// props.team(user가 속한 팀), props.teamList(전체 팀 리스트 목록)
+function ButtonList(props) {
+  if (props.team.status === 'Y') {
+    if (props.team.id === props.team.admin) {
       return (
         <div>
           <button type="button">설정하기</button>
-          <button type="button">삭제하기</button>
+          <button type="button" value={props.team.id} onClick={(event) => props.onDelete(event.currentTarget.value)}>
+            삭제하기
+          </button>
         </div>
       );
     }
-    if (props.id !== props.admin) {
+    if (props.team.id !== props.team.admin) {
       return (
         <div>
           <button type="button">탈퇴하기</button>
         </div>
       );
     }
   }
-  if (props.status === 'N') {
+  if (props.team.status === 'N') {
     return (
       <div>
         <button
           type="button"
           value="Y"
-          onClick={(event) => setMode(event.currentTarget.value)}
-          onChange={(event) => setStatus(event.currentTarget.value)}
+          onClick={(event) => event.currentTarget.value}
+          onChange={(event) => event.currentTarget.value}
         >
           가입하기
         </button>
@@ -80,36 +44,64 @@ function ButtonList(props: { status: string; id: number; admin: number }) {
   }
 }
 
-function TeamList(props: { status: string }) {
+// mode가 Y이면, status가 Y인 데이터 노출
+// mode가 N이면, status가 N인 데이터 노출
+function TeamSettingPage() {
+  const [status, setStatus] = useState('Y');
+  const [userid, setUserId] = useState(1);
+  const [teamId, setTeamId] = useState(1);
+  const [user, setUser] = useState({
+    id: 1,
+    name: 'mococo',
+    password: '1234',
+    email: 'mococo@com',
+    phone: '010-1234-7777',
+    img: '',
+    comment: "Hi, I'm Mococo!",
+    link1: '[email protected]',
+    link2: null,
+    link3: null,
+    team: [
+      { id: 1, name: 'GU-99', status: 'Y', admin: 1 },
+      { id: 2, name: '김찌와 쏘주', status: 'Y', admin: 3 },
+      { id: 3, name: '모코코', status: 'N', admin: 3 },
+    ],
+  });
+  const [teamList, setTeamList] = useState([
+    { id: 1, name: 'GU-99', admin: 1, coworker: [2, 3], desc: '' },
+    { id: 2, name: '김찌와 쏘주', admin: 3, coworker: [1], desc: '' },
+    { id: 3, name: '모코코', admin: 3, coworker: [1, 2], desc: '' },
+  ]);
+
   const list = [];
   for (let i = 0; i < user.team.length; i += 1) {
-    if (user.team[i].status === props.status) {
+    if (user.team[i].status === status) {
       list.push(
-        <div className="flex">
+        <div key={user.team[i].id} className="flex">
           <div>{user.team[i].name}</div>
-          <ButtonList status={props.status} id={user.id} admin={user.team[i].admin} />
+          <ButtonList
+            team={user.team[i]}
+            teamList={teamList}
+            onDelete={(id) => {
+              setTeamId(id);
+            }}
+          />
         </div>,
       );
     }
   }
-  return list;
-}
 
-// mode가 Y이면, status가 Y인 데이터 노출
-// mode가 N이면, status가 N인 데이터 노출
-function TeamSettingPage() {
-  const [mode, setMode] = useState('Y');
   return (
     <>
       <nav>
-        <button type="button" value="Y" onClick={(event) => setMode(event.currentTarget.value)}>
+        <button type="button" value="Y" onClick={(event) => setStatus(event.currentTarget.value)}>
           가입현황
         </button>
-        <button type="button" value="N" onClick={(event) => setMode(event.currentTarget.value)}>
+        <button type="button" value="N" onClick={(event) => setStatus(event.currentTarget.value)}>
           대기현황
         </button>
       </nav>
-      <TeamList status={mode} />
+      {list}
     </>
   );
 }

src/pages/setting/UserSettingPage.tsx

@@ -14,7 +14,6 @@ const user = {
     { id: 2, name: '김찌와 쏘주' },
   ],
 };
-const newUser = { ...user };
 
 function UserSettingPage() {
   return (
@@ -29,7 +28,7 @@ function UserSettingPage() {
         <button type="submit">번호 변경</button>
       </div>
       <div>
-        <input type="textarea" value={user.comment} />
+        <textarea name="introduce" value={user.comment} />
         <button type="submit">소개 변경</button>
       </div>
       <div>
@@ -42,13 +41,13 @@ function UserSettingPage() {
       </div>
       <div>
         <input type="text" placeholder="인증번호를 입력해주세요." />
-        <button type="submit" onChange={(event) => console.log(event.target)}>
+        <button type="submit" onChange={(event) => event.target}>
           확인
         </button>
       </div>
       <div>
         <input type="text" placeholder="개인정보 변경을 위한 비밀번호를 입력하세요." />
-        <button type="button" onChange={(event) => console.log(event.target)}>
+        <button type="button" onChange={(event) => event.target}>
           변경
         </button>
       </div>