MatchItem 공통 컴포넌트 구현 (#30)

* design: body 태그 margin 제거

* design: Layout 컴포넌트 높이 100%로 지정

* feat: WEEKDAY 상수 추가

* feat: MatchItem 공통 컴포넌트 구현

* feat: MatchItem 컴포넌트 클릭 핸들러 추가

* feat: MatchItem 컴포넌트에 매치관리 버튼 추가

* refactor: MatchItem컴포넌트 theme provider를 이용하도록 수정

* feat: MatchItem 컴포넌트 경기종료 보여주는 기능 추가

src/components/shared/MatchItem/MatchItem.styles.ts

@@ -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;
+`;

src/components/shared/MatchItem/MatchItem.tsx

@@ -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 };

src/components/shared/MatchItem/index.ts

@@ -0,0 +1 @@
+export * from './MatchItem';

src/consts/weekday.ts

@@ -0,0 +1 @@
+export const WEEKDAY = ['일', '월', '와', '수', '목', '금', '토'];

src/pages/Layout.tsx

@@ -17,4 +17,5 @@ export const Layout = () => {
 
 const LayoutWrapper = styled.div`
   margin: 50px 16px 0 16px;
+  height: 100%;
 `;

src/styles/globalStyle.tsx

@@ -6,6 +6,7 @@ const style = css`
   }
 
   body {
+    margin: 0;
     width: 100vw;
     height: 100vh;
   }