Feat/design

src/Components/Buttons/AddMemberButton.js

@@ -28,6 +28,7 @@ const AddMember = ({ groupId }) => {
     const [formData, setFormData] = useState({})
     const [propNames, setPropNames] = useState([])
     const [name, setName] = useState('')
+    const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false)
 
     useEffect(() => {
         const fetchMemberData = async () => {
@@ -65,7 +66,11 @@ const AddMember = ({ groupId }) => {
         await addMember(groupId, name, formData)
         setLoading(false)
         setIsModalOpen(false)
-        alert('회원 추가가 완료되었습니다.')
+        setIsConfirmationModalVisible(true)
+    }
+
+    const handleConfirmationOk = () => {
+        setIsConfirmationModalVisible(false)
         window.location.reload()
     }
 
@@ -92,6 +97,18 @@ const AddMember = ({ groupId }) => {
                     />
                 ))}
             </Modal>
+            <Modal
+                title="알림"
+                open={isConfirmationModalVisible}
+                onOk={handleConfirmationOk}
+                footer={[
+                    <Button key="ok" type="primary" onClick={handleConfirmationOk}>
+                        확인
+                    </Button>,
+                ]}
+            >
+                <p>회원 추가가 완료되었습니다.</p>
+            </Modal>
         </>
     )
 }

src/Components/Buttons/DeleteMemberButton.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import { Button, Popconfirm, message } from 'antd'
+import React, { useState } from 'react'
+import { Button, Modal, message } from 'antd'
 import PropTypes from 'prop-types'
 import { deleteMember } from '../../apis/members'
 import styled from 'styled-components'
+
 const StyledAddButton = styled(Button)`
     font-family: 'Dotum Light';
     font-size: 18px;
@@ -18,27 +19,60 @@ const StyledAddButton = styled(Button)`
 `
 
 const DeleteMember = ({ groupId, memberIds }) => {
+    const [isModalVisible, setIsModalVisible] = useState(false)
+    const [isDeleting, setIsDeleting] = useState(false)
+    const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false)
+
     const handleDelete = async () => {
+        setIsDeleting(true)
         await deleteMember(groupId, memberIds)
-        window.location.reload()
+        setIsDeleting(false)
+        setIsModalVisible(false)
+        setIsConfirmationModalVisible(true)
     }
-    const confirmDelete = () => {
+
+    const showDeleteConfirm = () => {
         if (memberIds.length === 0) {
             message.error('선택한 회원이 없습니다.')
             return
         }
-        handleDelete()
+        setIsModalVisible(true)
     }
+
+    const handleConfirmationOk = () => {
+        setIsConfirmationModalVisible(false)
+        window.location.reload()
+    }
+
     return (
-        <Popconfirm
-            title="정말 삭제하시겠습니까?"
-            onConfirm={confirmDelete}
-            okText="삭제"
-            cancelText="아니요"
-            disabled={memberIds.length === 0}
-        >
-            <StyledAddButton type="primary">회원 삭제</StyledAddButton>
-        </Popconfirm>
+        <>
+            <StyledAddButton type="primary" onClick={showDeleteConfirm} disabled={memberIds.length === 0}>
+                회원 삭제
+            </StyledAddButton>
+            <Modal
+                title="정말 삭제하시겠습니까?"
+                open={isModalVisible}
+                onOk={handleDelete}
+                onCancel={() => setIsModalVisible(false)}
+                confirmLoading={isDeleting}
+                okText="삭제"
+                cancelText="아니요"
+            >
+                <p>선택한 회원을 삭제하시겠습니까?</p>
+            </Modal>
+            <Modal
+                title="알림"
+                open={isConfirmationModalVisible}
+                onOk={handleConfirmationOk}
+                footer={[
+                    <Button key="ok" type="primary" onClick={handleConfirmationOk}>
+                        확인
+                    </Button>,
+                ]}
+            >
+                <p>회원 삭제가 완료되었습니다.</p>
+            </Modal>
+        </>
     )
 }
 

src/Components/Card/EventCard.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { Button, Collapse, Descriptions, Popconfirm } from 'antd'
+import { Button, Collapse, Descriptions, Modal } from 'antd'
 import { deleteEvent, getEvent } from '../../apis/event'
 import styled from 'styled-components'
 
+const { Panel } = Collapse
+
 const EventCard = ({ groupId }) => {
     const [events, setEvents] = useState([])
+    const [deleteEventId, setDeleteEventId] = useState(null)
 
     useEffect(() => {
         getEvent(groupId).then((data) => {
@@ -16,81 +19,76 @@ const EventCard = ({ groupId }) => {
         return new Date(date).toLocaleDateString()
     }
 
-    const handleDelete = async (eventId) => {
+    const handleDelete = async () => {
         try {
-            await deleteEvent(groupId, eventId)
-            setEvents(events.filter((event) => event._id !== eventId))
+            if (deleteEventId) {
+                await deleteEvent(groupId, deleteEventId)
+                setEvents(events.filter((event) => event._id !== deleteEventId))
+                setDeleteEventId(null)
+            }
         } catch (error) {
             console.error('Failed to delete event:', error)
         }
     }
 
     const confirmDelete = (eventId) => {
-        handleDelete(eventId)
+        setDeleteEventId(eventId)
     }
 
-    const items = events
-        .map((event, i) => {
-            const currentEvent = events[i] || {}
-            if (currentEvent.label === null) {
-                return null
-            }
+    const cancelDelete = () => {
+        setDeleteEventId(null)
+    }
 
-            return {
-                key: i,
-                label: currentEvent.name || '',
-                children: (
-                    <StyledDescriptions bordered column={2}>
-                        <Descriptions.Item label="설명">{currentEvent.description || ''}</Descriptions.Item>
-                        <Descriptions.Item label="회비">
-                            {typeof currentEvent.fee === 'number'
-                                ? currentEvent.fee.toLocaleString() + '원'
-                                : currentEvent.fee || ''}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="이벤트 기간">
-                            {formatDate(currentEvent.startDate) || ''} ~ {formatDate(currentEvent.endDate) || ''}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="입금 기간">
-                            {formatDate(currentEvent.transactionStartDate) || ''} ~ {formatDate(currentEvent.transactionEndDate) || ''}
-                        </Descriptions.Item>
-                    </StyledDescriptions>
-                ),
-                Button: (
-                    <Popconfirm
-                        title="정말 삭제하시겠습니까?"
-                        onConfirm={() => confirmDelete(currentEvent._id)}
-                        okText="삭제"
-                        cancelText="아니요"
-                    >
-                        <ButtonWrapper>
-                            <StyledButton type="primary" danger>
-                                삭제
-                            </StyledButton>
-                        </ButtonWrapper>
-                    </Popconfirm>
-                ),
-            }
-        })
-        .filter((item) => item !== null)
+    const items = events.map((event, i) => {
+        const currentEvent = events[i] || {}
+        if (currentEvent.label === null) {
+            return null
+        }
+
+        return (
+            <Panel key={i} header={currentEvent.name || ''}>
+                <StyledDescriptions bordered column={{ xs: 1, xl: 2 }}>
+                    <Descriptions.Item label="설명">{currentEvent.description || ''}</Descriptions.Item>
+                    <Descriptions.Item label="회비">
+                        {typeof currentEvent.fee === 'number'
+                            ? currentEvent.fee.toLocaleString() + '원'
+                            : currentEvent.fee || ''}
+                    </Descriptions.Item>
+                    <Descriptions.Item label="이벤트 기간">
+                        {formatDate(currentEvent.startDate) || ''} ~ {formatDate(currentEvent.endDate) || ''}
+                    </Descriptions.Item>
+                    <Descriptions.Item label="입금 기간">
+                        {formatDate(currentEvent.transactionStartDate) || ''} ~{' '}
+                        {formatDate(currentEvent.transactionEndDate) || ''}
+                    </Descriptions.Item>
+                </StyledDescriptions>
+                <ButtonWrapper>
+                    <StyledButton type="primary" danger onClick={() => confirmDelete(currentEvent._id)}>
+                        삭제
+                    </StyledButton>
+                </ButtonWrapper>
+            </Panel>
+        )
+    })
 
     return (
         <>
-            <StyledCollapse bordered={false}>
-                {items.map((item, index) => (
-                    <StyledPanel key={index} header={item.label}>
-                        <FlexContainer>
-                            {item.children}
-                            {item.Button}
-                        </FlexContainer>
-                    </StyledPanel>
-                ))}
-            </StyledCollapse>
+            <StyledCollapse bordered={false}>{items}</StyledCollapse>
+            <Modal
+                title="이벤트 삭제 확인"
+                open={deleteEventId !== null}
+                onOk={handleDelete}
+                onCancel={cancelDelete}
+                okText="삭제"
+                cancelText="취소"
+            >
+                <p>정말 삭제하시겠습니까?</p>
+            </Modal>
         </>
     )
 }
 
 const StyledCollapse = styled(Collapse)`
-
     width: 80%;
     padding: 10px;
     background-color: rgba(0, 62.67, 151.94, 0.08);
@@ -114,10 +112,6 @@ const StyledCollapse = styled(Collapse)`
     }
 `
 
-const StyledPanel = styled(Collapse.Panel)`
-    //margin-bottom: 10px;
-`
-
 const StyledDescriptions = styled(Descriptions)`
     .ant-descriptions-item-label {
         width: auto;
@@ -129,20 +123,7 @@ const StyledDescriptions = styled(Descriptions)`
     }
 `
 
-const FlexContainer = styled.div`
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-
-    @media (min-width: 768px) {
-        flex-direction: row;
-        justify-content: space-between;
-    }
-`
-
-
 const StyledButton = styled(Button)`
-
     width: 100%;
     font-family: 'Dotum Bold', serif;
 
@@ -155,7 +136,6 @@ const ButtonWrapper = styled.div`
     justify-content: center;
     align-items: center;
     margin-top: 10px;
-
 `
 
 export default EventCard

src/Components/Chart/TotalChart.js

@@ -8,35 +8,39 @@ import * as XLSX from 'xlsx'
 import { saveAs } from 'file-saver'
 import { Button } from 'antd'
 
-const StyledDiv = styled('div')(({ isopen }) => ({
-    width: '100%',
-    marginTop: isopen ? '150px' : '10px',
-    '& .paid': {
-        paddingLeft: '10px',
-        backgroundColor: '#003F98',
-        color: '#fff',
-        border: '1px solid #fff',
-        borderRadius: '2px',
-        fontFamily: 'Dotum Bold',
-    },
-    '& .unpaid': {
-        paddingLeft: '10px',
-        backgroundColor: '#FF5B14',
-        border: '1px solid #fff',
-        color: '#fff',
-        fontFamily: 'Dotum Light',
-    },
-    '& .noRecord': {
-        paddingLeft: '10px',
-        backgroundColor: '#B4B4B4',
-        border: '1px solid #fff',
-        color: '#fff',
-        fontFamily: 'Dotum Bold',
-    },
-    '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
-        fontFamily: 'Dotum Medium',
-    },
-}))
+const StyledDiv = styled.div`
+    width: 100%;
+    margin-top: 50px;
+    @media (max-width: 768px) {
+        margin-top: 20px;
+    }
+    & .paid {
+        padding-left: 10px;
+        background-color: #003f98;
+        color: #fff;
+        border: 1px solid #fff;
+        border-radius: 2px;
+        font-family: 'Dotum Bold';
+    }
+    & .unpaid {
+        padding-left: 10px;
+        background-color: #ff5b14;
+        border: 1px solid #fff;
+        color: #fff;
+        font-family: 'Dotum Light';
+    }
+    & .noRecord {
+        padding-left: 10px;
+        background-color: #b4b4b4;
+        border: 1px solid #fff;
+        color: #fff;
+        font-family: 'Dotum Bold';
+    }
+    & .MuiDataGrid-cell,
+    & .MuiDataGrid-columnHeader {
+        font-family: 'Dotum Medium';
+    }
+`
 
 const TotalChart = ({ groupMemberName, eventName, eventTransactions }) => {
     const [rows, setRows] = useState([])

src/Components/Forms/CreateEvent.js

@@ -277,7 +277,6 @@ const StyledForm = styled(Form)`
 `
 
 const StyledFormWrapper = styled.div`
-
     padding: 10px;
     border-radius: 10px;
     background-color: rgba(0, 62.67, 151.94, 0.08);
@@ -293,7 +292,7 @@ const StyledFormWrapper = styled.div`
     }
 
     @media (max-width: 480px) {
-        width: 100%;
+        width: 93%;
         padding: 4px;
     }
 `