From 77add1468ebef30e1a1e71e809c1998704b995ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=84=EC=9A=B1?= <ff981113@hanyang.ac.kr>
Date: Tue, 28 Nov 2023 02:00:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Crew,=20MatchItem=20ui=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95=20(#361)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CrewItem/CrewItem.styles.ts      |  1 +
 src/components/MatchItem/MatchItem.styles.ts    |  1 +
 src/components/MatchItem/MatchItem.tsx          | 17 +++++++++--------
 .../ChatRoomListPage/ChatRoomListPage.style.ts  |  1 +
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/CrewItem/CrewItem.styles.ts b/src/components/CrewItem/CrewItem.styles.ts
index ca1f381c..c7dc042b 100644
--- a/src/components/CrewItem/CrewItem.styles.ts
+++ b/src/components/CrewItem/CrewItem.styles.ts
@@ -10,6 +10,7 @@ export const CrewItemWrapper = styled(Flex)`
 `;
 
 export const CrewProfileImage = styled(Image)`
+  min-width: 82px;
   border-radius: 8px;
 `;
 
diff --git a/src/components/MatchItem/MatchItem.styles.ts b/src/components/MatchItem/MatchItem.styles.ts
index fbdaf1bd..1a5c81ca 100644
--- a/src/components/MatchItem/MatchItem.styles.ts
+++ b/src/components/MatchItem/MatchItem.styles.ts
@@ -21,6 +21,7 @@ export const MatchStatus = styled.div`
   flex-direction: column;
   background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
   padding: 10px;
+  min-width: 82px;
   width: 82px;
   height: 82px;
   border-radius: 8px;
diff --git a/src/components/MatchItem/MatchItem.tsx b/src/components/MatchItem/MatchItem.tsx
index 6f49e61f..64744734 100644
--- a/src/components/MatchItem/MatchItem.tsx
+++ b/src/components/MatchItem/MatchItem.tsx
@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { Text } from '@components/shared/Text';
+
 import { theme } from '@styles/theme';
 
 import { PATH_NAME } from '@consts/pathName';
@@ -12,14 +14,12 @@ import { Avatar } from '../Avatar';
 import { AvatarGroup } from '../AvatarGroup';
 import {
   MatchAddress,
-  MatchDate,
   MatchDescription,
   MatchDuration,
   MatchItemInnerWrapper,
   MatchItemWrapper,
   MatchPlayerInfo,
   MatchRecruitmentStatus,
-  MatchStartTime,
   MatchStatus,
 } from './MatchItem.styles';
 import { BottomButton } from './components/BottomButton';
@@ -34,7 +34,6 @@ type MatchItemProps = {
   membersProfileImageUrls: string[];
 } & PropsWithChildren;
 
-/** TODO: Text 컴포넌트로 대체해야함 */
 const MatchItem = ({
   children,
   matchId,
@@ -54,22 +53,24 @@ const MatchItem = ({
       >
         <MatchStatus>
           {isGameEnded(startTime, timeMinutes) ? (
-            <MatchStartTime>종료</MatchStartTime>
+            <Text size={20} weight={700} nowrap>
+              종료
+            </Text>
           ) : (
             <>
-              <MatchStartTime>
+              <Text size={20} weight={700} nowrap>
                 {`${startTime.toTimeString().slice(0, 5)}`}
-              </MatchStartTime>
+              </Text>
               <MatchDuration>{`${timeMinutes / 60}h`}</MatchDuration>
             </>
           )}
         </MatchStatus>
         <MatchDescription>
-          <MatchDate>
+          <Text size={20} nowrap>
             {`${startTime.toLocaleDateString()} ${
               WEEKDAY[startTime.getDay()]
             }요일`}
-          </MatchDate>
+          </Text>
           <MatchAddress>{mainAddress}</MatchAddress>
           <MatchPlayerInfo>
             <AvatarGroup
diff --git a/src/pages/ChatRoomListPage/ChatRoomListPage.style.ts b/src/pages/ChatRoomListPage/ChatRoomListPage.style.ts
index fd5eb236..4ea01704 100644
--- a/src/pages/ChatRoomListPage/ChatRoomListPage.style.ts
+++ b/src/pages/ChatRoomListPage/ChatRoomListPage.style.ts
@@ -47,6 +47,7 @@ export const DateText = styled(Text)`
 `;
 
 export const ChatMatchStatus = styled(MatchStatus)`
+  min-width: 40px;
   width: 40px;
   height: 40px;
 `;