feat api추가 (#10)

Co-authored-by: 조준호 <junho@jojunhoui-MacBookAir.local>

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.16.1",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/Pages/ShowGroupList/index.js

@@ -1,56 +1,45 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 import { Card, Col, Row } from 'antd'
+import { Link } from 'react-router-dom'
+import { getGroups } from '../../apis/groups'
+const ShowGroupList = () => {
+    const [groups, setGroups] = useState([])
 
-const dummy = {
-    users: [{ userId: 1 }, { userId: 2 }, { userId: 3 }],
-
-    groups: [
-        {
-            id: 1,
-            name: '모임1',
-            descript: '모임1입니다.',
-        },
-        {
-            id: 2,
-            name: '모임2',
-            descript: '모임2입니다.',
-        },
-        {
-            id: 3,
-            name: '모임3',
-            descript: '모임3입니다.',
-        },
-    ],
-}
+    useEffect(() => {
+        getGroups().then((data) => {
+            setGroups(data)
+        })
+    }, [])
 
-console.log(dummy)
-const ShowGroupList = () => {
     return (
         <div>
             <div>나의 모임</div>
             <Row gutter={16}>
                 <Col span={8}>
-                    {dummy.groups.map((data) => (
-                        <Card title={data.name} bordered={false} key={data.id}>
-                            {data.descript}
-                        </Card>
+                    {groups.map((group) => (
+                        <GroupCard key={group._id} group={group} />
                     ))}
                 </Col>
             </Row>
-            {/* <Row gutter={16}>
-                <Col span={8}>
-                    <Card title="Card title" bordered={false}>
-                        Card content
-                    </Card>
-                </Col>
-                <Col span={8}>
-                    <Card title="Card title" bordered={false}>
-                        Card content
-                    </Card>
-                </Col>
-            </Row> */}
         </div>
     )
 }
 
+const GroupCard = ({ group }) => {
+    return (
+        <Link to={`/group/${group._id}/showGroupDetails`}>
+            <Card title={group.name} style={{ marginBottom: '16px' }}>
+                <p>{group.description}</p>
+            </Card>
+        </Link>
+    )
+}
+GroupCard.propTypes = {
+    group: PropTypes.shape({
+        _id: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+    }).isRequired,
+}
 export default ShowGroupList

src/apis/groups.js

@@ -0,0 +1,6 @@
+import api from './index'
+
+export const getGroups = async () => {
+    const response = await api.get('/group')
+    return response.data
+}

src/apis/index.js

@@ -0,0 +1,10 @@
+import axios from 'axios'
+
+const api = axios.create({
+    baseURL: 'https://sumtime-be.w8385.dev',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+})
+
+export default api

src/apis/members.js

@@ -0,0 +1,6 @@
+import api from './index'
+
+export const getMembers = async () => {
+    const response = await api.get('/members')
+    return response.data
+}