MatchItem 공통 컴포넌트 구현

[dlwl98]

⚙️ PR 타입

• Feature
• Hotfix

✨ 기능 설명 or 🚨 문제 상황

feat: WEEKDAY 상수 추가
feat: MatchItem 공통 컴포넌트 구현
feat: MatchItem 컴포넌트 클릭 핸들러 추가

👨‍💻 구현 내용 or 👍 해결 내용

<MatchItem
  matchId="1"
  startTime={new Date()}
  timeMinutes={60}
  mainAddress="서울특별시 송파구 송파나루길 206"
  memberCount={6}
  maxMemberCount={10}
  membersProfileImageUrls={[
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
  ]}
>
  <MatchItem.ManageBtn onClick={() => {}} /> // 매치관리 버튼 필요할 시
</MatchItem>

// 또는

<MatchItem
  matchId="1"
  startTime={new Date()}
  timeMinutes={60}
  mainAddress="서울특별시 송파구 송파나루길 206"
  memberCount={6}
  maxMemberCount={10}
  membersProfileImageUrls={[
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
    'https://picsum.photos/500',
  ]}
/>

🎯 PR 포인트

📝 참고 사항

아직 프로필 이미지들을 보여주는 기능은 없습니다.
AvatarGroup 컴포넌트가 머지되면 추가 예정입니다.

글로벌 스타일을 조금 수정했습니다.
design: body 태그 margin 제거

Layout 컴포넌트를 조금 수정했습니다.
design: Layout 컴포넌트 높이 100%로 지정

❓ 궁금한 점

#29 close

[1eecan]

🎉 @dlwl98 님 랜덤 리뷰어로 당첨되셨습니다! 리뷰를 부탁드립니다. 🙏

[imb96]

LGTM 👍

[imb96]

theme provider를 적용했기때문에 import 없이 사용하실 수 있습니다.

[imb96]

theme사용해서 변경할 수 있습니다.

Suggested change

	export const MatchStatus = styled.div`
	${STYLES.FLEX_CENTER}
	flex-direction: column;
	background-color: ${PALETTE.GRAY_100};
	padding: 10px;
	width: 82px;
	height: 82px;
	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;
	`;