feat: #26 추가 기능 구현

- 납부 진행 중인 이벤트 날짜도 주기
- 클럽 단일 조회시 입장 코드 보여주기
- 엑셀 다운로드시 모달창으로 보여주기
- isChngmu에 따라 버튼 보임 여부 확인

src/event/eventInfo/EventInfo.jsx

@@ -20,13 +20,17 @@ const ButtonContainer = styled.div`
 `;
 
 function EventInfo() {
+  const isChongmu = sessionStorage.getItem('isChongmu') || 'false';
   return (
     <PageWrapper>
       <EventHeader />
-      <ButtonContainer>
-        <BillDepositCreateButton />
-        <BillWithDrawCreateButton />
-      </ButtonContainer>
+      {
+        isChongmu === 'true' &&
+        <ButtonContainer>
+          <BillDepositCreateButton />
+          <BillWithDrawCreateButton />
+        </ButtonContainer>
+      }
       <BillList />
     </PageWrapper>
   );

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 (
     <Container>
         <Header clubId={clubId}/>
         <UnpaidFee clubId={clubId}/>
         <Summary clubId={clubId}/>
-        <UnClassifiedList clubId={clubId}/>
+        {
+          isChongmu === 'true' &&
+          <UnClassifiedList clubId={clubId}/>
+        }
         <RecentEvents clubId={clubId}/>
     </Container>
   );

src/event/eventMain/components/Header.jsx

@@ -83,7 +83,7 @@ function Header({clubId}) {
         </TitleSection>
         <CodeBox>
           <CodeText>입장코드</CodeText>
-          <CodeNumber>113501</CodeNumber>
+          <CodeNumber>{clubInfo.entryCode}</CodeNumber>
         </CodeBox>
       </ClubContainer>
     </HeaderWrapper>

src/event/eventMain/components/UnpaidFee.jsx

@@ -102,18 +102,26 @@ function UnpaidFee() {
         <AlertIcon>!</AlertIcon>
       </SectionTitle>
       <ItemList>
-        {unpaidFeeList.map((event, index) => (
-          <Item key={index}>
-            <ItemInfo>
-              <ItemName>{event.name}</ItemName>
-              <ItemDate>{event.eventId}</ItemDate>
-            </ItemInfo>
-            <AmountAndStatus>
-              <Amount>{event.totalPaymentAmount}원</Amount>
-              <Status>납부 대기중</Status>
-            </AmountAndStatus>
-          </Item>
-        ))}
+        {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 (
+            <>
+              <Item key={index}>
+                <ItemInfo>
+                  <ItemName>{event.name}</ItemName>
+                  <ItemDate>{eventDate}</ItemDate>
+                </ItemInfo>
+                <AmountAndStatus>
+                  <Amount>{event.totalPaymentAmount}원</Amount>
+                  <Status>납부 대기중</Status>
+                </AmountAndStatus>
+              </Item>
+            </>
+          )
+          }
+        )}
       </ItemList>
     </Wrapper>
   );

src/event/eventPage/EventPage.jsx

@@ -20,13 +20,17 @@ const ButtonContainer = styled.div`
 `;
 
 function EventPage() {
+  const isChongmu = sessionStorage.getItem('isChongmu') || 'false';
   return (
     <PageWrapper>
       <EventHeader />
-      <ButtonContainer>
-        <EventCreateButton />
-        <EventUnClassified />
-      </ButtonContainer>
+      {
+        isChongmu === 'true' &&
+        <ButtonContainer>
+          <EventCreateButton />
+          <EventUnClassified />
+        </ButtonContainer>
+      }
       <EventList />
     </PageWrapper>
   );

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 (
     <SummaryWrapper>
-      { isFileDownloading && <p>파일 다운로드 중...</p> }
+      { isFileDownloading && <ModalForExcel setIsModalOpen={setIsFileDownloading}/> }
       <TotalSummary>
         <div>
           <Title>입출 총액</Title>

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 (
+    <Overlay>
+      <ModalContainer>
+        {/* <CloseButton onClick={() => setIsModalOpen(false)}>&times;</CloseButton> */}
+        <Spinner />
+        <p>엑셀 파일을 다운로드 중입니다...</p>
+      </ModalContainer>
+    </Overlay>
+  );
+};
+
+export default ModalForExcel;