Skip to content

[#5] 메인페이지 매치메뉴바 구현 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
park-daeun wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

[#5] 메인페이지 매치메뉴바 구현 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
341f71f
✨ [#5] 스포츠 상수 추가
Sep 12, 2022
1299853
✨ [#5] 매치메뉴바 ui 구현
Sep 12, 2022
c9f9f51
🤡 [#5] 목데이터 수정
Sep 12, 2022
d5540e3
✨ [#5] 선택된 매치메뉴에 따라 매치아이템 보이도록 구현
Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/match/MatchList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ import MatchItem from './MatchItem'
import { MatchData } from './mock/index'
import styles from './MatchList.module.scss'
import classNames from 'classnames/bind'
import { observer } from 'mobx-react-lite'
import { useMatchStore } from '../../contexts'

const cx = classNames.bind(styles)

const MatchList = () => {
const MatchList = observer(() => {
const { selectedMenu } = useMatchStore()
const matchData = MatchData.filter((data) => data.sports === selectedMenu)

return (
<div className={cx('container')}>
{MatchData.map((data) => (
{matchData.map((data) => (
<MatchItem key={data.id} item={data} />
))}
</div>
)
}
})

export default MatchList
48 changes: 42 additions & 6 deletions src/components/match/MatchMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,54 @@
import React from 'react'
import styles from './MatchMenu.module.scss'
import classNames from 'classnames/bind'
import { observer } from 'mobx-react-lite'
import { useMatchStore } from '../../contexts'
import { SPORTS } from '../../constants/match'

const MatchMenu = () => {
const MatchMenu = observer(() => {
const cx = classNames.bind(styles)
const { selectedMenu, setSelectedMenu } = useMatchStore()

const handleClickMenu = (sports: string) => {
setSelectedMenu(sports)
}

return (
<div className={cx('container')}>
<div className={cx('menu-item', 'selected')}>풋살</div>
<div className={cx('menu-item')}>축구</div>
<div className={cx('menu-item')}>농구</div>
<div className={cx('menu-item')}>테니스</div>
<div
className={cx('menu-item', {
selected: selectedMenu === SPORTS.FUTSAL,
})}
onClick={() => handleClickMenu(SPORTS.FUTSAL)}
>
풋살
</div>
<div
className={cx('menu-item', {
selected: selectedMenu === SPORTS.SOCCER,
})}
onClick={() => handleClickMenu(SPORTS.SOCCER)}
>
축구
</div>
<div
className={cx('menu-item', {
selected: selectedMenu === SPORTS.BASKETBALL,
})}
onClick={() => handleClickMenu(SPORTS.BASKETBALL)}
>
농구
</div>
<div
className={cx('menu-item', {
selected: selectedMenu === SPORTS.TENNIS,
})}
onClick={() => handleClickMenu(SPORTS.TENNIS)}
>
테니스
</div>
</div>
)
}
})

export default MatchMenu
40 changes: 20 additions & 20 deletions src/components/match/mock/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const MatchData = [
*/
{
id: 0,
sports: 'football',
sports: 'FUTSAL',
maxNumberOfParticipants: 10,
place: '풋살경기장',
title: '같이 풋살해요~~',
Expand Down Expand Up @@ -78,7 +78,7 @@ export const MatchData = [
},
{
id: 2,
sports: 'football',
sports: 'FUTSAL',
maxNumberOfParticipants: 10,
place: '풋살경기장',
title: '같이 풋살해요~~',
Expand Down Expand Up @@ -114,7 +114,7 @@ export const MatchData = [
},
{
id: 3,
sports: 'football',
sports: 'FUTSAL',
maxNumberOfParticipants: 10,
place: '풋살경기장',
title: '같이 풋살해요~~',
Expand Down Expand Up @@ -150,7 +150,7 @@ export const MatchData = [
},
{
id: 4,
sports: 'football',
sports: 'FUTSAL',
maxNumberOfParticipants: 10,
place: '풋살경기장',
title: '같이 풋살해요~~',
Expand Down Expand Up @@ -186,7 +186,7 @@ export const MatchData = [
},
{
id: 1,
sports: 'football',
sports: 'FUTSAL',
maxNumberOfParticipants: 10,
place: '풋살경기장',
title: '같이 풋살해요~~',
Expand Down Expand Up @@ -228,7 +228,7 @@ export const MatchData = [
*/
{
id: 5,
sports: 'soccer',
sports: 'SOCCER',
maxNumberOfParticipants: 22,
place: '축구경기장',
title: '같이 축구해요~~',
Expand Down Expand Up @@ -300,7 +300,7 @@ export const MatchData = [
},
{
id: 6,
sports: 'soccer',
sports: 'SOCCER',
maxNumberOfParticipants: 22,
place: '축구경기장',
title: '같이 축구해요~~',
Expand Down Expand Up @@ -336,7 +336,7 @@ export const MatchData = [
},
{
id: 7,
sports: 'soccer',
sports: 'SOCCER',
maxNumberOfParticipants: 22,
place: '축구경기장',
title: '같이 축구해요~~',
Expand Down Expand Up @@ -372,7 +372,7 @@ export const MatchData = [
},
{
id: 8,
sports: 'soccer',
sports: 'SOCCER',
maxNumberOfParticipants: 22,
place: '축구경기장',
title: '같이 축구해요~~',
Expand Down Expand Up @@ -408,7 +408,7 @@ export const MatchData = [
},
{
id: 9,
sports: 'soccer',
sports: 'SOCCER',
maxNumberOfParticipants: 22,
place: '축구경기장',
title: '같이 축구해요~~',
Expand Down Expand Up @@ -450,7 +450,7 @@ export const MatchData = [
*/
{
id: 11,
sports: 'basketball',
sports: 'BASKETBALL',
maxNumberOfParticipants: 10,
place: '농구경기장',
title: '같이 농구해요~~',
Expand Down Expand Up @@ -522,7 +522,7 @@ export const MatchData = [
},
{
id: 12,
sports: 'basketball',
sports: 'BASKETBALL',
maxNumberOfParticipants: 10,
place: '농구경기장',
title: '같이 농구해요~~',
Expand Down Expand Up @@ -558,7 +558,7 @@ export const MatchData = [
},
{
id: 13,
sports: 'basketball',
sports: 'BASKETBALL',
maxNumberOfParticipants: 10,
place: '농구경기장',
title: '같이 농구해요~~',
Expand Down Expand Up @@ -594,7 +594,7 @@ export const MatchData = [
},
{
id: 14,
sports: 'basketball',
sports: 'BASKETBALL',
maxNumberOfParticipants: 10,
place: '농구경기장',
title: '같이 농구해요~~',
Expand Down Expand Up @@ -630,7 +630,7 @@ export const MatchData = [
},
{
id: 15,
sports: 'basketball',
sports: 'BASKETBALL',
maxNumberOfParticipants: 10,
place: '농구경기장',
title: '같이 농구해요~~',
Expand Down Expand Up @@ -672,7 +672,7 @@ export const MatchData = [
*/
{
id: 16,
sports: 'tennis',
sports: 'TENNIS',
maxNumberOfParticipants: 4,
place: '테니스경기장',
title: '같이 테니스해요~~',
Expand Down Expand Up @@ -744,7 +744,7 @@ export const MatchData = [
},
{
id: 17,
sports: 'tennis',
sports: 'TENNIS',
maxNumberOfParticipants: 4,
place: '테니스경기장',
title: '같이 테니스해요~~',
Expand Down Expand Up @@ -780,7 +780,7 @@ export const MatchData = [
},
{
id: 18,
sports: 'tennis',
sports: 'TENNIS',
maxNumberOfParticipants: 4,
place: '테니스경기장',
title: '같이 테니스해요~~',
Expand Down Expand Up @@ -816,7 +816,7 @@ export const MatchData = [
},
{
id: 19,
sports: 'tennis',
sports: 'TENNIS',
maxNumberOfParticipants: 4,
place: '테니스경기장',
title: '같이 테니스해요~~',
Expand Down Expand Up @@ -852,7 +852,7 @@ export const MatchData = [
},
{
id: 20,
sports: 'tennis',
sports: 'TENNIS',
maxNumberOfParticipants: 4,
place: '테니스경기장',
title: '같이 테니스해요~~',
Expand Down
6 changes: 6 additions & 0 deletions src/constants/match.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const SPORTS = {
FUTSAL: 'FUTSAL',
SOCCER: 'SOCCER',
BASKETBALL: 'BASKETBALL',
TENNIS: 'TENNIS',
}
7 changes: 6 additions & 1 deletion src/stores/match/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { SPORTS } from '../../constants/match'

export const createMatchStore = () => {
return {
matchMenu: 'FUTSAL',
selectedMenu: SPORTS.FUTSAL,
setSelectedMenu(menu: string) {
this.selectedMenu = menu
},
}
}