Skip to content

Commit 44ad5c1

Browse files
1eecan1eecan
authored
메인 페이지 구현 (#70)
* feat: 메인페이지 구현 * 임시 데이터를 사용 * refactor: 하단 navbar, 헤더 리팩터링 * 헤더,navbar max-width 삭제 * 헤더 title 위치 중간으로 수정 * 헤더 우측 아이콘 styledComponent 통일 * feat: 헤더 수정 * 글로벌스타일 변경 * 헤더 로고 변경 * 헤더 타이틀 일립시스 * feat: navbar 수정 * feat: 레이아웃수정 * fix: layout 적용
1 parent 4dda1e4 commit 44ad5c1

File tree

4 files changed

+140
-2
lines changed

4 files changed

+140
-2
lines changed

‎src/pages/MainPage/MainPage.style.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from '@emotion/styled';
2+
3+
export const MainPageContainer = styled.div`
4+
width: 100vw;
5+
margin-top: 0.6rem;
6+
${({ theme }) => theme.STYLES.LAYOUT}
7+
background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
8+
`;
9+
10+
export const MainPageSubContainer = styled.div`
11+
width: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
gap: 10px;
15+
margin-bottom: 1.25rem;
16+
`;

‎src/pages/MainPage/MainPage.tsx

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { Button } from '@components/shared/Button';
2+
import { Header } from '@components/shared/Header';
3+
import { MatchItem } from '@components/shared/MatchItem';
4+
import { Text } from '@components/shared/Text';
5+
6+
import { theme } from '@styles/theme';
7+
8+
import { MainPageContainer, MainPageSubContainer } from './MainPage.style';
9+
10+
export const MainPage = () => {
11+
return (
12+
<MainPageContainer>
13+
<Header isLogo={true} />
14+
<MainPageSubContainer>
15+
<Text children={'내 근처의 경기'} weight={700} size={'1.25rem'} />
16+
{serverMatchItemList.map(
17+
({
18+
matchId,
19+
startTime,
20+
timeMinutes,
21+
mainAddress,
22+
memberCount,
23+
maxMemberCount,
24+
membersProfileImageUrls,
25+
}) => (
26+
<MatchItem
27+
key={matchId}
28+
matchId={matchId}
29+
startTime={startTime}
30+
timeMinutes={timeMinutes}
31+
mainAddress={mainAddress}
32+
memberCount={memberCount}
33+
maxMemberCount={maxMemberCount}
34+
membersProfileImageUrls={membersProfileImageUrls}
35+
/>
36+
)
37+
)}
38+
<Button {...MAIN_PAGE_BUTTON_PROP}></Button>
39+
</MainPageSubContainer>
40+
<MainPageSubContainer>
41+
<Text children={'추천 크루'} weight={700} size={'1.25rem'} />
42+
{serverMatchItemList.map(
43+
({
44+
matchId,
45+
startTime,
46+
timeMinutes,
47+
mainAddress,
48+
memberCount,
49+
maxMemberCount,
50+
membersProfileImageUrls,
51+
}) => (
52+
<MatchItem
53+
key={matchId}
54+
matchId={matchId}
55+
startTime={startTime}
56+
timeMinutes={timeMinutes}
57+
mainAddress={mainAddress}
58+
memberCount={memberCount}
59+
maxMemberCount={maxMemberCount}
60+
membersProfileImageUrls={membersProfileImageUrls}
61+
/>
62+
)
63+
)}
64+
<Button {...MAIN_PAGE_BUTTON_PROP}></Button>
65+
</MainPageSubContainer>
66+
</MainPageContainer>
67+
);
68+
};
69+
70+
const serverMatchItemList = [
71+
{
72+
matchId: '1',
73+
startTime: new Date(),
74+
timeMinutes: 60,
75+
mainAddress: '',
76+
memberCount: 2,
77+
maxMemberCount: 8,
78+
membersProfileImageUrls: [
79+
'https://picsum.photos/500',
80+
'https://picsum.photos/500',
81+
],
82+
},
83+
{
84+
matchId: '2',
85+
startTime: new Date(),
86+
timeMinutes: 60,
87+
mainAddress: '',
88+
memberCount: 2,
89+
maxMemberCount: 8,
90+
membersProfileImageUrls: [
91+
'https://picsum.photos/500',
92+
'https://picsum.photos/500',
93+
],
94+
},
95+
{
96+
matchId: '3',
97+
startTime: new Date(),
98+
timeMinutes: 60,
99+
mainAddress: '',
100+
memberCount: 2,
101+
maxMemberCount: 8,
102+
membersProfileImageUrls: [
103+
'https://picsum.photos/500',
104+
'https://picsum.photos/500',
105+
],
106+
},
107+
];
108+
109+
const MAIN_PAGE_BUTTON_PROP = {
110+
width: '100%',
111+
height: '3.5rem',
112+
text: '더보기',
113+
fontSize: `${theme.FONT_SIZE.LG}`,
114+
fontWeight: theme.FONT_WEIGHT.BOLD,
115+
lineHeight: 0,
116+
textColor: `${theme.PALETTE.RED_400}`,
117+
borderColor: `${theme.PALETTE.RED_400}`,
118+
backgroundColor: 'white',
119+
handleClick: () => console.log('hi'),
120+
};

‎src/pages/MainPage/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { MainPage } from './MainPage';

‎src/routes/router.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Suspense } from 'react';
22
import { createBrowserRouter } from 'react-router-dom';
33

4+
import { Layout } from '@pages/Layout';
5+
import { MainPage } from '@pages/MainPage';
46
import { CreateGamePage } from '@pages/CreateGamePage';
57
import { GamesDetailPage } from '@pages/GamesDetailPage';
68
import { GamesNearPage } from '@pages/GamesNearPage';
7-
import { HomePage } from '@pages/HomePage';
89
import { Layout } from '@pages/Layout';
910
import { LoginPage } from '@pages/LoginPage';
1011
import { RegisterPage } from '@pages/RegisterPage';
@@ -14,7 +15,7 @@ export const router = createBrowserRouter([
1415
path: '/',
1516
element: <Layout />,
1617
children: [
17-
{ path: '', element: <HomePage /> },
18+
{ path: '', element: <MainPage /> },
1819
{ path: 'login', element: <LoginPage /> },
1920
{ path: 'register', element: <RegisterPage /> },
2021
{ path: 'all-services', element: <h1>all-services</h1> },

0 commit comments

Comments
 (0)