fix: sidebar 수정, groupId 수정

bo-an-bo · May 7, 2024 · e363b92 · e363b92
1 parent 466407b
commit e363b92
Show file tree

Hide file tree

Showing 19 changed files with 284 additions and 192 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4",

diff --git a/public/img/main.jpg b/public/img/main.jpg
diff --git a/src/App.js b/src/App.js
@@ -21,28 +21,45 @@ const StyledLayout = styled.div`
 `
 
 function App() {
-    const group_id = '662a83742c217fe65efaeab6'
     return (
         <BrowserRouter>
             <div className="App">
                 <NavBar />
 
-                <StyledLayout>
-                    <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>
+                <Routes>
+                    <Route path="/" element={<MainPage />} />
+                    <Route path="/createGroup" element={<CreateGroup />} />
+                    <Route path="/group/*" element={<GroupRoutes />} />
+                </Routes>
             </div>
         </BrowserRouter>
     )
 }
 
+function GroupRoutes() {
+    return (
+        <StyledLayout>
+            <Routes>
+                <Route path="/" element={<ShowGroupList />} />
+                <Route path="/:id/*" element={<GroupRoutesWithSidebar />} />
+            </Routes>
+        </StyledLayout>
+    )
+}
+
+function GroupRoutesWithSidebar() {
+    return (
+        <StyledLayout>
+            <SideBar />
+            <Routes>
+                <Route path="/" element={<GroupMainPage />} />
+                <Route path="/showGroupDetails" element={<ShowGroupDetails />} />
+                <Route path="/createEvent" element={<CreateEventPage />} />
+                <Route path="/showEventList" element={<ShowEventList />} />
+                <Route path="/uploadMember" element={<UploadMember />} />
+            </Routes>
+        </StyledLayout>
+    )
+}
+
 export default App
diff --git a/src/Components/Buttons/AddMemberButton.js b/src/Components/Buttons/AddMemberButton.js
@@ -15,17 +15,17 @@ const AddMember = ({ groupId }) => {
     const [email, setEmail] = useState('')
     const [phoneNumber, setPhoneNumber] = useState('')
     const [loading, setLoading] = useState(false)
-    const memberInfo = {
-        studentId,
-        email,
-        phoneNumber,
+
+    const isAnyFieldEmpty = () => {
+        return !name || !studentId || !email || !phoneNumber
     }
 
     const handleAddMember = async () => {
         setLoading(true)
-        await addMember(groupId, name, memberInfo)
+        await addMember(groupId, name, { studentId, email, phoneNumber })
         setLoading(false)
         setIsModalOpen(false)
+        alert('회원 추가가 완료되었습니다.')
         window.location.reload()
     }
 
@@ -40,6 +40,7 @@ const AddMember = ({ groupId }) => {
                 onOk={handleAddMember}
                 onCancel={() => setIsModalOpen(false)}
                 confirmLoading={loading}
+                okButtonProps={{ disabled: isAnyFieldEmpty() }}
             >
                 <StyledInput placeholder="이름" value={name} onChange={(e) => setName(e.target.value)} />
                 <StyledInput placeholder="학번" value={studentId} onChange={(e) => setStudentId(e.target.value)} />

diff --git a/src/Components/Card/EventCard.js b/src/Components/Card/EventCard.js
@@ -3,8 +3,6 @@ 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(() => {
@@ -13,27 +11,44 @@ const EventCard = ({ groupId }) => {
         })
     }, [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 formatDate = (date) => {
+        return new Date(date).toLocaleDateString()
+    }
+
+    const items = events.map((event, i) => ({
+        key: i,
+        label: events[i].name,
+        children: (
+            <div>
+                <p>
+                    <strong>설명</strong>: {events[i].description}
+                </p>
+                <p>
+                    <strong>요금</strong>:{' '}
+                    {typeof events[i].fee === 'number' ? events[i].fee.toLocaleString() + '원' : events[i].fee}
+                </p>
+
+                <p>
+                    <strong>이벤트 기한</strong>: {formatDate(events[i].endDate)}
+                </p>
+                <p>
+                    <strong>결제 기한</strong>: {formatDate(events[i].transactionEndDate)}
+                </p>
+            </div>
+        ),
+    }))
+
+    return <StyledCollapse accordion bordered={false} items={items}></StyledCollapse>
 }
 
 const StyledCollapse = styled(Collapse)`
     width: 60%;
-    margin-top: 100px;
+    margin-left: 100px;
+    margin-top: 50px;
     padding: 10px;
     background-color: rgba(0, 62.67, 151.94, 0.08);
+    overflow: auto;
+    max-height: 450px;
 `
 
 export default EventCard
diff --git a/src/Components/Card/GroupCard.js b/src/Components/Card/GroupCard.js
@@ -1,38 +1,9 @@
-// GroupCard.js
-
 import React, { useEffect, useState } from 'react'
 import { Card, Col, Row } from 'antd'
 import { Link } from 'react-router-dom'
 import { getGroups } from '../../apis/groups'
 import styled from 'styled-components'
-import SideBar from '../SideBar/SideBar'
-const StyledBox = styled.div`
-    display: flex;
-    width: 100%;
-`
 
-const StyledRow = styled(Row)`
-    width: 100%;
-    margin: 0 10px 10px 10px;
-    padding: 10px;
-`
-
-const StyledCol = styled(Col)`
-    width: 100%;
-    margin: 0 10px 10px 10px;
-    padding: 10px;
-`
-
-const StyledCard = styled(Card)`
-    width: 100%;
-    background-color: #f9fbff;
-    margin: 0 20px 20px 20px;
-    transition-duration: 0.3s, 0.3s;
-    border: 2px solid #f0f0f0;
-    &:hover {
-        background-color: #ecf4ff;
-    }
-`
 const GroupCard = () => {
     const [groups, setGroups] = useState([])
 
@@ -41,22 +12,43 @@ const GroupCard = () => {
             setGroups(data)
         })
     }, [])
+
+    const renderGroupCards = () => {
+        return groups.map((group) => (
+            <Col key={group._id} span={12}>
+                <Link to={`/group/${group._id}`}>
+                    <StyledCard title={group.name} bordered={false}>
+                        {group.description}
+                    </StyledCard>
+                </Link>
+            </Col>
+        ))
+    }
+
     return (
         <StyledBox>
-            <StyledRow gutter={16}>
-                <StyledCol span={8}>
-                    {groups.map((group) => (
-                        <Link to={`/group/${group._id}`} key={group._id}>
-                            <SideBar group_id={group._id} />
-                            <StyledCard title={group.name} bordered={false}>
-                                {group.description}
-                            </StyledCard>
-                        </Link>
-                    ))}
-                </StyledCol>
-            </StyledRow>
+            <StyledRow gutter={[16, 16]}>{renderGroupCards()}</StyledRow>
         </StyledBox>
     )
 }
 
 export default GroupCard
+
+const StyledBox = styled.div`
+    display: flex;
+    width: 100%;
+`
+
+const StyledRow = styled(Row)`
+    width: 90%;
+`
+
+const StyledCard = styled(Card)`
+    background-color: #f9fbff;
+    margin-left: 100px;
+    transition-duration: 0.3s, 0.3s;
+    border: 2px solid #f0f0f0;
+    &:hover {
+        background-color: #ecf4ff;
+    }
+`