Skip to content

Commit

Permalink
Merge pull request #35 from crolvlee/web_develop
Browse files Browse the repository at this point in the history 
feat: GNB3 공지, 회비 페이지 레이아웃 구현
  • Loading branch information
@leve68
leve68 authored Jul 13, 2024
2 parents 7afb97d + d2988a1 commit 7fa9f6c
Show file tree
Hide file tree
Showing 12 changed files with 306 additions and 98 deletions.
12 changes: 6 additions & 6 deletions src/components/MainLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@ import React from 'react';
import MainNavigationBar from './MainNavigationBar';
import styled from 'styled-components';

const Content = styled.div`
flex: 1;
overflow: auto;
`;

const LayoutContainer = styled.div`
display: flex;
flex-direction: column;
Expand All @@ -15,6 +10,11 @@ const LayoutContainer = styled.div`
background-color: white;
`;

const Content = styled.div`
flex: 1;
overflow: auto;
`;

const MainLayout = ({ children, showMainNav }) => {
return (
<LayoutContainer>
Expand All @@ -26,4 +26,4 @@ const MainLayout = ({ children, showMainNav }) => {
);
};

export default MainLayout;
export default MainLayout;
6 changes: 2 additions & 4 deletions src/pages/group/BasicInfo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React from 'react';

function BasicInfo() {
const BasicInfo = () => {
return (
<div>
<h1>기본 정보</h1>
<h1>기본정보</h1>
</div>
);
}
Expand Down
83 changes: 79 additions & 4 deletions src/pages/group/Fee.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,85 @@
import React from 'react';
import styled from 'styled-components';
import FeeInfoCard from './group_components/FeeInfoCard';
import ExpenseItem from './group_components/ExpenseItem';

function Fee() {
const Container = styled.div`
padding: 20px;
background-color: ${({ theme }) => theme.colors.neutral[100]};
height: 100vh;
`;

const CardContainer = styled.div`
padding: 16px;
background-color: ${({ theme }) => theme.colors.main[500]};
border-radius: 20px 20px 0 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const FeeText = styled.div`
color: white;
padding: 72px 28px 40px;
text-align: center;
font-size: 32px;
font-weight: bold;
border-radius: 20px 20px 0 0;
`;

const RegisterButton = styled.button`
width: 100%;
padding: 12px;
color: white;
border: none;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
background-color: ${({ theme }) => theme.colors.main[500]};
color: ${({ theme }) => theme.colors.main[200]};
cursor: pointer;
margin: 12px 0;
`;

const ExpenseContainer = styled.div`
background-color: white;
padding: 16px;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const ExpenseContainerTitle = styled.h3`
color: ${({ theme }) => theme.colors.neutral[400]};;
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
`;

const Fee = () => {
return (
<div>
<h1>회비</h1>
</div>
<Container>
<CardContainer>
<FeeText>1,023,130원</FeeText>
<FeeInfoCard
label="1학기 회비"
amount="3만원"
dueDate="~06.30"
onClick={() => {}}
/>
<FeeInfoCard
label="대회참여비용"
amount="2만원"
dueDate="~07.10"
onClick={() => {}}
/>
<RegisterButton>회비 등록하기 +</RegisterButton>
</CardContainer>
<ExpenseContainer>
<ExpenseContainerTitle>회비 사용 내역</ExpenseContainerTitle>
<ExpenseItem date="06.30" description="체육관 사용료" amount="120,000원" />
<ExpenseItem date="06.28" description="대회 뒷풀이" amount="310,000원" />
<ExpenseItem date="06.28" description="대회 뒷풀이" amount="310,000원" />
<ExpenseItem date="06.28" description="대회 뒷풀이" amount="310,000원" />
</ExpenseContainer>
</Container>
);
}

Expand Down
28 changes: 17 additions & 11 deletions src/pages/group/Group.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,36 @@
import styled from 'styled-components';
import { Outlet } from 'react-router-dom';
import GroupHeader from '../../components/group/GroupHeader';
import GroupTabBar from '../../components/group/GroupTabBar';

const GroupContainer = styled.div`
padding-top: 92px; // 헤더와 탭바의 높이를 고려한 여백
`;
import GroupHeader from './group_components/GroupHeader';
import GroupTabBar from './group_components/GroupTabBar';

const FixedContainer = styled.div`
position: fixed;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: white;
z-index: 1000;
`;

const ContentContainer = styled.div`
overflow: hidden;
display: flex;
flex-direction: column;
height: 100vh;
`;

function GroupLayout() {
const Group = () => {
return (
<>
<FixedContainer>
<GroupHeader />
<GroupTabBar />
</FixedContainer>
<GroupContainer>
<ContentContainer>
<Outlet />
</GroupContainer>
</ContentContainer>
</>
);
}

export default GroupLayout;
export default Group;
107 changes: 44 additions & 63 deletions src/pages/group/Notice.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,50 @@
import React from 'react';
import styled from 'styled-components';
import NoticeItem from './group_components/NoticeItem';

function Notice() {
return (
<div>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
<h1>공지</h1>
const Container = styled.div`
background-color: ${({ theme }) => theme.colors.neutral[100]};
width: 100%;
margin; 0 auto;
height: 100vh;
position: relative;
`;

// TODO: 플로팅버튼 위치 조정해줘야 함
const FloatingButton = styled.button`
position: fixed;
bottom: 84px;
right: 20px;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: white;
color: black;
font-size: 32px;
border: none;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
`;

</div>
const Notice = () => {
return (
<Container>
<NoticeItem title="6월 정기 모임 관련 공지1" date="2024.05.30" isNew={true} /> {/* TODO: API 연결 필요 */}
<NoticeItem title="6월 정기 모임 관련 공지2" date="2024.05.30" isNew={true} />
<NoticeItem title="6월 정기 모임 관련 공지3" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
<FloatingButton>+</FloatingButton>
</Container>
);
}

Expand Down
4 changes: 1 addition & 3 deletions src/pages/group/Schedule.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from 'react';

function Schedule() {
const Schedule = () => {
return (
<div>
<h1>일정</h1>
Expand Down
40 changes: 40 additions & 0 deletions src/pages/group/group_components/ExpenseItem.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import styled from 'styled-components';

const Container = styled.div`
display: flex;
padding: 12px 0;
// border-bottom: 1px solid #ddd;
align-items: center;
&:last-child {
border-bottom: none;
}
`;

const ExpenseDate = styled.div`
font-size: 16px;
color: ${({ theme }) => theme.colors.neutral[800]};
`;

const ExpenseDescription = styled.div`
font-size: 16px;
margin-left: 16px;
color: ${({ theme }) => theme.colors.neutral[800]};
flex: 1;
`;

const ExpenseAmount = styled.div`
font-size: 18px;
font-weight: 600;
color: ${({ theme }) => theme.colors.main[500]};
margin-left: auto;
`;

const ExpenseItem = ({ date, description, amount }) => (
<Container>
<ExpenseDate>{date}</ExpenseDate>
<ExpenseDescription>{description}</ExpenseDescription>
<ExpenseAmount>{amount}</ExpenseAmount>
</Container>
);

export default ExpenseItem;
Loading

0 comments on commit 7fa9f6c

Please sign in to comment.