diff --git a/src/event/eventInfo/EventInfo.jsx b/src/event/eventInfo/EventInfo.jsx index d4e99ee..66dad99 100644 --- a/src/event/eventInfo/EventInfo.jsx +++ b/src/event/eventInfo/EventInfo.jsx @@ -20,13 +20,17 @@ const ButtonContainer = styled.div` `; function EventInfo() { + const isChongmu = sessionStorage.getItem('isChongmu') || 'false'; return ( - - - - + { + isChongmu === 'true' && + + + + + } ); diff --git a/src/event/eventMain/EventMain.jsx b/src/event/eventMain/EventMain.jsx index dacd76b..c9559ef 100644 --- a/src/event/eventMain/EventMain.jsx +++ b/src/event/eventMain/EventMain.jsx @@ -15,13 +15,17 @@ const Container = styled.div` function MainContainer() { const clubId = useParams().clubId; + const isChongmu = sessionStorage.getItem('isChongmu') || 'false'; return (
- + { + isChongmu === 'true' && + + } ); diff --git a/src/event/eventMain/components/Header.jsx b/src/event/eventMain/components/Header.jsx index 9812ac3..ce32d18 100644 --- a/src/event/eventMain/components/Header.jsx +++ b/src/event/eventMain/components/Header.jsx @@ -83,7 +83,7 @@ function Header({clubId}) { 입장코드 - 113501 + {clubInfo.entryCode} diff --git a/src/event/eventMain/components/UnpaidFee.jsx b/src/event/eventMain/components/UnpaidFee.jsx index 2a36921..dfe1249 100644 --- a/src/event/eventMain/components/UnpaidFee.jsx +++ b/src/event/eventMain/components/UnpaidFee.jsx @@ -102,18 +102,26 @@ function UnpaidFee() { ! - {unpaidFeeList.map((event, index) => ( - - - {event.name} - {event.eventId} - - - {event.totalPaymentAmount}원 - 납부 대기중 - - - ))} + {unpaidFeeList.map((event, index) => { + const diffTime = Math.abs(new Date((new Date()).getTime() + 9 * 60 * 60 * 1000) - new Date(event.paymentDeadline)); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + const eventDate = diffDays === 0 ? '오늘' : `${diffDays}일 전`; + return ( + <> + + + {event.name} + {eventDate} + + + {event.totalPaymentAmount}원 + 납부 대기중 + + + + ) + } + )} ); diff --git a/src/event/eventPage/EventPage.jsx b/src/event/eventPage/EventPage.jsx index 6b0a4af..66d718e 100644 --- a/src/event/eventPage/EventPage.jsx +++ b/src/event/eventPage/EventPage.jsx @@ -20,13 +20,17 @@ const ButtonContainer = styled.div` `; function EventPage() { + const isChongmu = sessionStorage.getItem('isChongmu') || 'false'; return ( - - - - + { + isChongmu === 'true' && + + + + + } ); diff --git a/src/event/eventTotal/FeeSummary.jsx b/src/event/eventTotal/FeeSummary.jsx index 18b519d..0a634b0 100644 --- a/src/event/eventTotal/FeeSummary.jsx +++ b/src/event/eventTotal/FeeSummary.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { getAllBillList, getTotalInfo } from '../../server/bills'; import { useParams } from 'react-router-dom'; import { getExcelFile } from '../../server/excel'; +import ModalForExcel from './ModalForExcel'; const SummaryWrapper = styled.div` padding: 20px 0px; @@ -96,7 +96,7 @@ function FeeSummary({totalInfo}) { return ( - { isFileDownloading &&

파일 다운로드 중...

} + { isFileDownloading && }
입출 총액 diff --git a/src/event/eventTotal/ModalForExcel.jsx b/src/event/eventTotal/ModalForExcel.jsx new file mode 100644 index 0000000..66ceed6 --- /dev/null +++ b/src/event/eventTotal/ModalForExcel.jsx @@ -0,0 +1,72 @@ +import React from 'react'; +import styled, { keyframes } from 'styled-components'; + +// 배경 오버레이 스타일 +const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +`; + +// 모달 창 스타일 +const ModalContainer = styled.div` + background-color: #fff; + padding: 30px; + border-radius: 10px; + width: 300px; + text-align: center; + position: relative; +`; + +// 로딩 스피너 애니메이션 +const rotate = keyframes` + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +`; + +// 스피너 스타일 +const Spinner = styled.div` + border: 8px solid #f3f3f3; + border-top: 8px solid #9747FF; + border-radius: 50%; + width: 60px; + height: 60px; + animation: ${rotate} 1s linear infinite; + margin: 0 auto 20px auto; +`; + +// 닫기 버튼 스타일 +const CloseButton = styled.button` + position: absolute; + top: 10px; + right: 15px; + background: transparent; + border: none; + font-size: 20px; + cursor: pointer; +`; + +const ModalForExcel = ({ setIsModalOpen }) => { + return ( + + + {/* setIsModalOpen(false)}>× */} + +

엑셀 파일을 다운로드 중입니다...

+ + + ); +}; + +export default ModalForExcel; \ No newline at end of file