dev -> main (#35)

* Feat/member api (#28) * feat: group_id propType 추가 * feat: excel key 사용 --------- Co-authored-by: 조준호 <[email protected]> * feat: eventListPage 생성 (#31) Co-authored-by: 조준호 <[email protected]> * [chore] 모임 생성 버튼 추가 * feat: upload Members (#33) Co-authored-by: 조준호 <[email protected]> * refact: addMember API 수정 (#34) Co-authored-by: 조준호 <[email protected]> --------- Co-authored-by: dassasa <[email protected]> Co-authored-by: 조준호 <[email protected]>
bo-an-bo · May 7, 2024 · 76cc14a · 76cc14a
1 parent 7320593
commit 76cc14a
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 53 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,6 +10,8 @@ import NavBar from './Components/NavBar/NavBar'
 import MainPage from './Pages/MainPage'
 import SideBar from './Components/SideBar/SideBar'
 import GroupMainPage from './Pages/GroupMainPage'
+import ShowEventList from './Pages/ShowEventList'
+import UploadMember from './Pages/UploadMember'
 
 const StyledLayout = styled.div`
     // background-color: gray;
@@ -19,21 +21,23 @@ const StyledLayout = styled.div`
 `
 
 function App() {
-    const group_id = "662a83742c217fe65efaeab6";
+    const group_id = '662a83742c217fe65efaeab6'
     return (
         <BrowserRouter>
             <div className="App">
                 <NavBar />
 
                 <StyledLayout>
-                    <SideBar group_id={group_id}/>
+                    <SideBar group_id={group_id} />
                     <Routes>
                         <Route path="/" element={<MainPage />} />
                         <Route path="/createGroup" element={<CreateGroup />} />
                         <Route path="/group" element={<ShowGroupList />} />
                         <Route path="/group/:id/ShowGroupDetails" element={<ShowGroupDetails />} />
                         <Route path="/group/:id/createEvent" element={<CreateEventPage />} />
                         <Route path="/group/:id" element={<GroupMainPage />} />
+                        <Route path="/group/:id/showEvent" element={<ShowEventList />} />
+                        <Route path="/group/:id/uploadMember" element={<UploadMember />} />
                     </Routes>
                 </StyledLayout>
             </div>

diff --git a/src/Components/Card/EventCard.js b/src/Components/Card/EventCard.js
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react'
+import { Collapse } from 'antd'
+import { getEvent } from '../../apis/event'
+import styled from 'styled-components'
+
+const { Panel } = Collapse
+
+const EventCard = ({ groupId }) => {
+    const [events, setEvents] = useState([])
+    useEffect(() => {
+        getEvent(groupId).then((data) => {
+            setEvents(data)
+        })
+    }, [groupId])
+
+    return (
+        <StyledCollapse accordion bordered={false}>
+            {events.map((event) => (
+                <Panel header={event.name} key={event._id}>
+                    <p>
+                        <strong>설명: </strong> {event.description}
+                    </p>
+                    <p>
+                        <strong>회비: </strong> {event.fee}
+                    </p>
+                </Panel>
+            ))}
+        </StyledCollapse>
+    )
+}
+
+const StyledCollapse = styled(Collapse)`
+    width: 60%;
+    margin-top: 100px;
+    padding: 10px;
+    background-color: rgba(0, 62.67, 151.94, 0.08);
+`
+
+export default EventCard
diff --git a/src/Components/GroupCard/GroupCard.js → src/Components/Card/GroupCard.js b/src/Components/GroupCard/GroupCard.js → src/Components/Card/GroupCard.js
@@ -13,20 +13,20 @@ const StyledBox = styled.div`
 
 const StyledRow = styled(Row)`
     width: 100%;
-    margin: 10px;
+    margin: 0 10px 10px 10px;
     padding: 10px;
 `
 
 const StyledCol = styled(Col)`
     width: 100%;
-    margin: 10px;
+    margin: 0 10px 10px 10px;
     padding: 10px;
 `
 
 const StyledCard = styled(Card)`
     width: 100%;
     background-color: #f9fbff;
-    margin: 20px;
+    margin: 0 20px 20px 20px;
     transition-duration: 0.3s, 0.3s;
     border: 2px solid #f0f0f0;
     &:hover {

diff --git a/src/Components/Forms/CreateForm.js b/src/Components/Forms/CreateForm.js
@@ -78,6 +78,7 @@ export default CreateForm
 // 전체 폼을 감싸는 스타일드 컴포넌트
 const StyledForm = styled(Form)`
     margin: 30px;
+    width: 100%;
 `
 // 폼을 감싸는 스타일드 컴포넌트
 const StyledFormWrapper = styled.div`
@@ -116,5 +117,6 @@ const StyledFormItems = styled(Form.Item)`
         height: 50px;
         width: 100px;
         font-size: 24px;
+        margin: 5% 0 0 40%;
     }
 `
diff --git a/src/Components/Tables/Tables.js b/src/Components/Tables/Tables.js
@@ -4,8 +4,26 @@ 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: '순',
@@ -15,18 +33,10 @@ const Tables = ({ members, groupId }) => {
             title: '이름',
             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,
         })
     }
 
@@ -48,6 +56,7 @@ const Tables = ({ members, groupId }) => {
 
     useEffect(() => {
         const ids = selectedRows.map((row) => row._id)
+
         setDeleteMemberIds(ids)
     }, [selectedRows])
 
@@ -110,17 +119,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/Components/Upload/UploadMember.js b/src/Components/Upload/UploadMember.js
@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { uploadMember } from '../../apis/members'
+import { InboxOutlined } from '@ant-design/icons'
+import { Upload, Button } from 'antd'
+import styled from 'styled-components'
+
+const { Dragger } = Upload
+
+const UploadMember = ({ groupId }) => {
+    const [file, setFile] = useState(null)
+    const [isFileUploaded, setIsFileUploaded] = useState(false)
+
+    const props = {
+        name: 'file',
+        accept: '.xlsx, .xls, .csv',
+        multiple: false,
+        showUploadList: false,
+        beforeUpload: (file) => {
+            setFile(file)
+            setIsFileUploaded(true)
+            return false
+        },
+    }
+
+    const handleUpload = async () => {
+        await uploadMember(groupId, file).then((res) => {
+            console.log(res)
+        })
+        alert('파일이 업로드되었습니다.')
+        window.location.reload()
+    }
+
+    return (
+        <Wrapper>
+            <StyledButton onClick={handleUpload} type="primary" disabled={!isFileUploaded}>
+                확인
+            </StyledButton>
+
+            <StyledDragger {...props}>
+                {file ? (
+                    <FileIconWrapper>
+                        <img
+                            src="https://img.icons8.com/ios/452/file.png"
+                            style={{ width: '64px', height: '64px' }}
+                            alt="file"
+                        />
+                        <p>{file.name}</p>
+                    </FileIconWrapper>
+                ) : (
+                    <div>
+                        <p className="ant-upload-drag-icon">
+                            <InboxOutlined style={{ fontSize: '64px', color: '#1890ff' }} />
+                        </p>
+                        <p className="ant-upload-text">클릭 또는 파일을 드래그하여 업로드하세요</p>
+                        <p className="ant-upload-hint">xlsx, csv 파일만 첨부 가능</p>
+                    </div>
+                )}
+            </StyledDragger>
+        </Wrapper>
+    )
+}
+
+export const StyledButton = styled(Button)`
+    margin-top: 20px;
+    margin-bottom: 10px;
+    width: 100px;
+    height: 50px;
+    font-size: 20px;
+    font-weight: 500;
+
+    //글씨 수직 맞추기
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #003e97;
+`
+export const StyledDragger = styled(Dragger)`
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    background-color: rgba(0, 62.67, 151.94, 0.08);
+    border-radius: 10px;
+`
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    width: 50%;
+`
+const FileIconWrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
+
+export default UploadMember
diff --git a/src/Pages/CreateGroupPage/index.js b/src/Pages/CreateGroupPage/index.js
@@ -1,12 +1,15 @@
 import React from 'react'
 import CreateForm from '../../Components/Forms/CreateForm'
 //import CreateForm from '../../Components/Forms/CreateForm'
-
+import styled from 'styled-components'
+const StyledBack = styled.div`
+    width: 100%;
+`
 const CreateGroup = () => {
     return (
-        <div>
+        <StyledBack>
             <CreateForm />
-        </div>
+        </StyledBack>
     )
 }
 

diff --git a/src/Pages/MainPage/index.js b/src/Pages/MainPage/index.js
@@ -9,12 +9,14 @@ const MainPage = () => {
         navigate('/group')
     }
 
+
     return (
         <div>
             환영합니다... 로그인하기...<br></br>
             <button type="button" onClick={onClickHandler}>
                 일단 로그인없이 테스트
             </button>
+
         </div>
     )
 }

diff --git a/src/Pages/ShowEventList/index.js b/src/Pages/ShowEventList/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import EventCard from '../../Components/Card/EventCard'
+
+const ShowEventList = () => {
+    const groupId = window.location.href.split('/')[4]
+
+    return <EventCard groupId={groupId} />
+}
+
+export default ShowEventList
diff --git 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>
     )