fix: MainLayout 문제 수정 / 공지, 회비 페이지 구현

src/components/MainLayout.jsx

@@ -2,9 +2,9 @@ import MainNavigationBar from './MainNavigationBar';
 import styled from 'styled-components';
 
 const LayoutContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  // min-height: 100%;
   flex-grow: 1;
   background-color: white;
 `;

src/pages/group/Fee.jsx → src/pages/group/fee/Fee.jsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
-import FeeInfoCard from './group_components/FeeInfoCard';
-import ExpenseItem from './group_components/ExpenseItem';
-import { useNavigate } from 'react-router-dom';
+import FeeInfoCard from './fee_components/FeeInfoCard';
+import ExpenseItem from './fee_components/ExpenseItem';
+import FeeStatus from './FeeStatus';
+import { useState } from 'react';
 
 const Container = styled.div`
   padding: 20px;
@@ -53,7 +54,7 @@ const ExpenseContainerTitle = styled.h3`
 `;
 
 const Fee = () => {
-  const navigate = useNavigate();  // useNavigate 훅을 사용하여 navigate 함수 정의
+  const [showFeeStatus, setShowFeeStatus] = useState(false);
 
   return (
     <Container>
@@ -63,19 +64,28 @@ const Fee = () => {
           label="1학기 회비"
           amount="3만원"
           dueDate="~06.30"
-          onClick={() => navigate('/group/fee-status')}
+          onClick={() => {
+            setShowFeeStatus(true);
+          }}
+
         />
         <FeeInfoCard
           label="대회참여비용"
           amount="2만원"
           dueDate="~07.10"
-          onClick={() => navigate('/group/fee-status')}
+          onClick={() => {
+            setShowFeeStatus(true);
+          }}
+
         />
         <FeeInfoCard
           label="대회참여비용"
           amount="2만원"
           dueDate="~07.10"
-          onClick={() => navigate('/group/fee-status')}
+          onClick={() => {
+            setShowFeeStatus(true);
+          }}
+
         />
         <RegisterButton>회비 등록하기 +</RegisterButton>
       </CardContainer>
@@ -94,6 +104,31 @@ const Fee = () => {
         <ExpenseItem date="06.28" description="대회 뒷풀이" amount="310,000원" />
 
       </ExpenseContainer>
+      {
+        showFeeStatus &&
+        <div
+          style={{
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: 10000,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <div
+            style={{
+              width: '100%',
+              maxWidth: '649px',
+              height: '100%',
+              backgroundColor: 'white',
+            }}>
+            <FeeStatus closeFeeStatus={() => setShowFeeStatus(false)} />
+          </div>
+        </div>
+      }
     </Container>
   );
 }

src/pages/group/fee/FeeStatus.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import FeeMemberItem from './fee_components/FeeMemberItem';
+
+const Container = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000; // 다른 요소 위에 위치하도록
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between; // 왼쪽과 오른쪽 컨텐츠 사이의 공간을 균등하게 분배
+  align-items: center; // 세로 중앙 정렬
+  padding: 20px; // 헤더 패딩
+  border-bottom: 1px solid #dcdcdc;  // 임시
+`;
+
+const CloseButton = styled.button`
+  width: 24px;
+  height: 24px;
+  background-color: blue;
+  border: none;
+  cursor: pointer;
+`;
+
+const HeaderTitle = styled.div`
+  flex-grow: 1;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.neutral[600]};
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+const ContentContainer = styled.div`
+  height: 100vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+`;
+
+const PreviewContainer = styled.div`
+  text-align: center;
+  margin: 36px 0;
+`;
+
+const Title = styled.div`
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.neutral[500]};
+`;
+
+const Amount = styled.div`
+  margin-bottom: 12px;
+  font-size: 32px;
+  font-weight: bold;
+  color: ${({ theme }) => theme.colors.neutral[700]};
+`;
+
+const Description = styled.div`
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.neutral[400]};
+`;
+
+const FilterContainer = styled.div`
+  display: flex;
+  padding: 12px 0;
+`;
+
+const FilterButton = styled.button`
+  padding: 8px 12px;
+  border: none;
+  border-radius: 16px;
+  background-color: ${({ theme, $active }) => ($active ? theme.colors.neutral[700] : theme.colors.neutral[50])};
+  color: ${({ theme, $active }) => ($active ? theme.colors.neutral[50] : theme.colors.neutral[500])};
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const FeeStatus = ({ closeFeeStatus }) => {
+  const members = [
+    { name: '이름(본인)', isPaid: true },
+    { name: '이름', isPaid: false },
+    { name: '이름', isPaid: false },
+    { name: '이름', isPaid: false },
+    { name: '이름', isPaid: true },
+    { name: '이름', isPaid: true },
+    { name: '이름', isPaid: true },
+    { name: '이름', isPaid: true },
+    { name: '이름', isPaid: true },
+    { name: '다인', isPaid: true }
+  ];
+
+  const [filter, setFilter] = useState('전체');
+
+  const handleFilterChange = (newFilter) => {
+    setFilter(newFilter);
+  };
+
+  const filteredMembers = members.filter(member => {
+    if (filter === '납부') return member.isPaid;
+    if (filter === '미납부') return !member.isPaid;
+    return true;
+  });
+
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <CloseButton onClick={closeFeeStatus} />
+        <HeaderTitle>회비 입금 현황</HeaderTitle>
+      </HeaderContainer>
+      <ContentContainer>
+        <PreviewContainer>
+          <Title>정기대회</Title>
+          <Amount>140,000원</Amount>
+          <Description>6.30일까지, 3만원씩</Description>
+        </PreviewContainer>
+        <FilterContainer>
+          <FilterButton $active={filter === '전체'} onClick={() => handleFilterChange('전체')}>전체</FilterButton>
+          <FilterButton $active={filter === '납부'} onClick={() => handleFilterChange('납부')}>납부</FilterButton>
+          <FilterButton $active={filter === '미납부'} onClick={() => handleFilterChange('미납부')}>미납부</FilterButton>
+        </FilterContainer>
+        {filteredMembers.map((member, index) => (
+        <FeeMemberItem key={index} name={member.name} isPaid={member.isPaid} />
+      ))}
+      </ContentContainer>
+    </Container>
+  );
+};
+
+export default FeeStatus;