From fab200079cfab2d0c3469164cc3fef5ff742ca7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=A4=80=ED=98=B8?=
 <junho@jojunhoui-MacBookAir.local>
Date: Tue, 30 Apr 2024 22:24:09 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20group=5Fid=20propType=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/SideBar/SideBar.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Components/SideBar/SideBar.js b/src/Components/SideBar/SideBar.js
index 68a6c8d..3ff2087 100644
--- a/src/Components/SideBar/SideBar.js
+++ b/src/Components/SideBar/SideBar.js
@@ -4,6 +4,7 @@ import styled from 'styled-components' // eslint-disable-line no-unused-vars
 import { NavLink } from 'react-router-dom'
 import { useEffect } from 'react'
 import { getMember } from '../../apis/members'
+import propTypes from 'prop-types'
 
 const StyledSideBarBox = styled.div`
     width: 30%;
@@ -159,4 +160,8 @@ const SideBar = ({ group_id }) => {
     )
 }
 
+SideBar.propTypes = {
+    group_id: propTypes.string,
+}
+
 export default SideBar

From 1ea4455fefa131ec482c04d0e27b7a31c236ac64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=A4=80=ED=98=B8?=
 <junho@jojunhoui-MacBookAir.local>
Date: Wed, 1 May 2024 10:28:34 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20excel=20key=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Tables/Tables.js     | 55 ++++++++++++++---------------
 src/Pages/ShowGroupDetails/index.js | 11 ++----
 src/apis/groups.js                  |  5 +++
 3 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/Components/Tables/Tables.js b/src/Components/Tables/Tables.js
index 327b249..b80b2c8 100644
--- a/src/Components/Tables/Tables.js
+++ b/src/Components/Tables/Tables.js
@@ -4,29 +4,39 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import AddMemberButton from '../Buttons/AddMemberButton'
 import DeleteMemberButton from '../Buttons/DeleteMemberButton'
+//getGroupDetail로 변경
+import { getMember } from '../../apis/members'
+
+const Tables = ({ groupId }) => {
+    const [members, setMembers] = useState([])
+    const [memberKeys, setMemberKeys] = useState([])
+
+    useEffect(() => {
+        getMember(groupId).then((data) => {
+            setMembers(data)
+        })
+    }, [groupId])
+
+    useEffect(() => {
+        const keys = Object.keys(members[0]?.memberInfo || {})
+        setMemberKeys(keys)
+    }, [members])
+
+    console.log(memberKeys)
 
-const Tables = ({ members, groupId }) => {
     const columns = [
         {
-            title: '순',
+            title: 'No.',
             dataIndex: 'index',
         },
         {
-            title: '이름',
+            title: 'Name',
             dataIndex: 'name',
         },
-        {
-            title: '학번',
-            dataIndex: 'studentId',
-        },
-        {
-            title: '전화번호',
-            dataIndex: 'phoneNumber',
-        },
-        {
-            title: '비고',
-            dataIndex: 'remark',
-        },
+        ...memberKeys.map((key) => ({
+            title: key,
+            dataIndex: key,
+        })),
     ]
 
     const data = []
@@ -36,9 +46,7 @@ const Tables = ({ members, groupId }) => {
             key: i,
             index: i + 1,
             name: members[i].name,
-            studentId: members[i].memberInfo.studentId,
-            phoneNumber: members[i].memberInfo.phoneNumber,
-            remark: members[i].memberInfo.remark,
+            ...members[i].memberInfo,
         })
     }
 
@@ -110,17 +118,6 @@ const StyledTable = styled(Table)`
     }
 `
 Tables.propTypes = {
-    members: PropTypes.arrayOf(
-        PropTypes.shape({
-            _id: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired,
-            memberInfo: PropTypes.shape({
-                studentId: PropTypes.string.isRequired,
-                phoneNumber: PropTypes.string.isRequired,
-                remark: PropTypes.string,
-            }),
-        }),
-    ).isRequired,
     groupId: PropTypes.string.isRequired,
 }
 export default Tables
diff --git a/src/Pages/ShowGroupDetails/index.js b/src/Pages/ShowGroupDetails/index.js
index ea8e852..05696d4 100644
--- a/src/Pages/ShowGroupDetails/index.js
+++ b/src/Pages/ShowGroupDetails/index.js
@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { getMember } from '../../apis/members'
 import Tables from '../../Components/Tables/Tables'
 
 const Wrapper = styled.div`
@@ -12,18 +11,12 @@ const Wrapper = styled.div`
 `
 
 const ShowGroupDetails = () => {
-    const [members, setMembers] = useState([])
     const groupId = window.location.href.split('/')[4]
-    useEffect(() => {
-        getMember(groupId).then((data) => {
-            setMembers(data)
-        })
-    }, [groupId])
 
     return (
         <div>
             <Wrapper>
-                <Tables members={members || []} groupId={groupId} />
+                <Tables groupId={groupId} />
             </Wrapper>
         </div>
     )
diff --git a/src/apis/groups.js b/src/apis/groups.js
index e2e3745..80ca9ba 100644
--- a/src/apis/groups.js
+++ b/src/apis/groups.js
@@ -6,6 +6,11 @@ export const getGroups = async () => {
     return response.data
 }
 
+export const getGroupDetail = async (groupId) => {
+    const response = await api.get(`/group/${groupId}`)
+    return response.data
+}
+
 export const createGroup = async (groupInfo) => {
     const response = await formApi.post('/group', groupInfo)
     return response.data