-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* design: body 태그 margin 제거 * design: Layout 컴포넌트 높이 100%로 지정 * feat: WEEKDAY 상수 추가 * feat: MatchItem 공통 컴포넌트 구현 * feat: MatchItem 컴포넌트 클릭 핸들러 추가 * feat: MatchItem 컴포넌트에 매치관리 버튼 추가 * refactor: MatchItem컴포넌트 theme provider를 이용하도록 수정 * feat: MatchItem 컴포넌트 경기종료 보여주는 기능 추가
- Loading branch information
Showing
6 changed files
with
174 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import styled from '@emotion/styled'; | ||
|
||
export const MatchItemWrapper = styled.div` | ||
background-color: white; | ||
display: flex; | ||
flex-direction: column; | ||
padding: 12px; | ||
gap: 10px; | ||
border-radius: 8px; | ||
`; | ||
|
||
export const MatchItemInnerWrapper = styled.div` | ||
background-color: white; | ||
display: flex; | ||
gap: 10px; | ||
border-radius: 8px; | ||
`; | ||
|
||
export const MatchStatus = styled.div` | ||
${({ theme }) => theme.STYLES.FLEX_CENTER} | ||
flex-direction: column; | ||
background-color: ${({ theme }) => theme.PALETTE.GRAY_100}; | ||
padding: 10px; | ||
width: 82px; | ||
height: 82px; | ||
border-radius: 8px; | ||
`; | ||
|
||
export const MatchStartTime = styled.span` | ||
font-size: 20px; | ||
font-weight: 700; | ||
line-height: 143%; | ||
`; | ||
|
||
export const MatchDuration = styled.span` | ||
color: ${({ theme }) => theme.PALETTE.GRAY_400}; | ||
font-size: 14px; | ||
font-weight: 700; | ||
line-height: 143%; | ||
`; | ||
|
||
export const MatchDate = styled.span` | ||
font-size: 20px; | ||
line-height: 143%; | ||
`; | ||
|
||
export const MatchAddress = styled.span` | ||
font-size: 12px; | ||
line-height: 143%; | ||
`; | ||
|
||
export const MatchPlayerInfo = styled.div` | ||
display: flex; | ||
align-items: center; | ||
`; | ||
|
||
export const AvatarGroupWrapper = styled.div` | ||
flex-grow: 1; | ||
height: 30px; | ||
`; | ||
|
||
export const MatchRecruitmentStatus = styled.span` | ||
font-size: 12px; | ||
`; | ||
|
||
export const MatchDescription = styled.div` | ||
flex-grow: 1; | ||
display: flex; | ||
flex-direction: column; | ||
gap: 3px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
import { ButtonHTMLAttributes, PropsWithChildren } from 'react'; | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import { PATH_NAME } from '@consts/pathName'; | ||
import { WEEKDAY } from '@consts/weekday'; | ||
|
||
import { | ||
AvatarGroupWrapper, | ||
MatchAddress, | ||
MatchDate, | ||
MatchDescription, | ||
MatchDuration, | ||
MatchItemInnerWrapper, | ||
MatchItemWrapper, | ||
MatchPlayerInfo, | ||
MatchRecruitmentStatus, | ||
MatchStartTime, | ||
MatchStatus, | ||
} from './MatchItem.styles'; | ||
|
||
type ManageBtnProps = { | ||
onClick: React.MouseEventHandler<HTMLButtonElement>; | ||
} & ButtonHTMLAttributes<HTMLButtonElement>; | ||
|
||
/** TODO: 버튼 컴포넌트로 대체 */ | ||
const ManageBtn = ({ onClick, ...props }: ManageBtnProps) => { | ||
return ( | ||
<button onClick={onClick} {...props}> | ||
매치 관리 | ||
</button> | ||
); | ||
}; | ||
|
||
type MatchItemProps = { | ||
matchId: string; | ||
startTime: Date; | ||
timeMinutes: number; | ||
mainAddress: string; | ||
memberCount: number; | ||
maxMemberCount: number; | ||
membersProfileImageUrls: string[]; | ||
} & PropsWithChildren; | ||
|
||
/** TODO: Text 컴포넌트로 대체해야함 */ | ||
const MatchItem = ({ | ||
children, | ||
matchId, | ||
startTime, | ||
timeMinutes, | ||
mainAddress, | ||
memberCount, | ||
maxMemberCount, | ||
membersProfileImageUrls, | ||
}: MatchItemProps) => { | ||
const navigate = useNavigate(); | ||
membersProfileImageUrls; | ||
|
||
const endTimeNumber = startTime.getTime() + timeMinutes * 60000; | ||
const isMatchEnd = endTimeNumber <= new Date().getTime(); | ||
|
||
return ( | ||
<MatchItemWrapper> | ||
<MatchItemInnerWrapper | ||
onClick={() => navigate(PATH_NAME.GET_GAMES_PATH(matchId))} | ||
> | ||
<MatchStatus> | ||
{isMatchEnd ? ( | ||
<MatchStartTime>종료</MatchStartTime> | ||
) : ( | ||
<> | ||
<MatchStartTime> | ||
{`${startTime.toTimeString().slice(0, 5)}`} | ||
</MatchStartTime> | ||
<MatchDuration>{`${timeMinutes / 60}h`}</MatchDuration> | ||
</> | ||
)} | ||
</MatchStatus> | ||
<MatchDescription> | ||
<MatchDate> | ||
{`${startTime.toLocaleDateString()} ${ | ||
WEEKDAY[startTime.getDay()] | ||
}요일`} | ||
</MatchDate> | ||
<MatchAddress>{mainAddress}</MatchAddress> | ||
<MatchPlayerInfo> | ||
<AvatarGroupWrapper />{' '} | ||
{/* TODO: 아바타그룹 컴포넌트로 대체해야함 */} | ||
<MatchRecruitmentStatus>{`${memberCount}/${maxMemberCount}`}</MatchRecruitmentStatus> | ||
</MatchPlayerInfo> | ||
</MatchDescription> | ||
</MatchItemInnerWrapper> | ||
{children} | ||
</MatchItemWrapper> | ||
); | ||
}; | ||
|
||
MatchItem.ManageBtn = ManageBtn; | ||
|
||
export { MatchItem }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './MatchItem'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export const WEEKDAY = ['일', '월', '와', '수', '목', '금', '토']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,4 +17,5 @@ export const Layout = () => { | |
|
||
const LayoutWrapper = styled.div` | ||
margin: 50px 16px 0 16px; | ||
height: 100%; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,6 +6,7 @@ const style = css` | |
} | ||
body { | ||
margin: 0; | ||
width: 100vw; | ||
height: 100vh; | ||
} | ||
|