fix: Crew, MatchItem ui 버그 수정 (#361)

Java-and-Script · Nov 27, 2023 · 77add14 · 77add14
1 parent 7fb20c8
commit 77add14
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -47,6 +47,7 @@ export const DateText = styled(Text)`
 `;
 
 export const ChatMatchStatus = styled(MatchStatus)`
+  min-width: 40px;
   width: 40px;
   height: 40px;
 `;