From aedc819ac5635c8cce98910313b1570ff098e5c4 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 18:36:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=81=AC=EB=A3=A8=20=EB=9E=AD=ED=82=B9?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ui=20=EA=B9=A8=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20(#389)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RankingModalContent/RankingModalContent.styles.ts |  5 +++++
 .../RankingModalContent/RankingModalContent.tsx       | 11 +++++++----
 .../components/RankingItem/RankingItem.styles.ts      |  5 +++++
 .../components/RankingItem/RankingItem.tsx            |  7 +++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/RankingModalContent/RankingModalContent.styles.ts b/src/components/RankingModalContent/RankingModalContent.styles.ts
index 5ce40993..bdefc031 100644
--- a/src/components/RankingModalContent/RankingModalContent.styles.ts
+++ b/src/components/RankingModalContent/RankingModalContent.styles.ts
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { Avatar } from '@components/Avatar';
 import { Flex } from '@components/shared/Flex';
 
 export const ContentWrapper = styled.div`
@@ -10,3 +11,7 @@ export const ContentWrapper = styled.div`
 export const InfoContainer = styled(Flex)`
   width: 100%;
 `;
+
+export const CrewAvatar = styled(Avatar)`
+  min-width: 60px;
+`;
diff --git a/src/components/RankingModalContent/RankingModalContent.tsx b/src/components/RankingModalContent/RankingModalContent.tsx
index c9b273e6..0860fca9 100644
--- a/src/components/RankingModalContent/RankingModalContent.tsx
+++ b/src/components/RankingModalContent/RankingModalContent.tsx
@@ -1,4 +1,3 @@
-import { Avatar } from '@components/Avatar';
 import { InfoItem } from '@components/InfoItem';
 import { Button } from '@components/shared/Button';
 import { Flex } from '@components/shared/Flex';
@@ -11,7 +10,11 @@ import CrewMember from '@assets/gameMember.svg?react';
 import Map from '@assets/map.svg?react';
 import Tooltip from '@assets/tooltip.svg?react';
 
-import { ContentWrapper, InfoContainer } from './RankingModalContent.styles';
+import {
+  ContentWrapper,
+  CrewAvatar,
+  InfoContainer,
+} from './RankingModalContent.styles';
 
 type RankingModalContentProps = {
   profileImageUrl: string;
@@ -46,9 +49,9 @@ export const RankingModalContent = ({
     <ContentWrapper>
       <Flex direction="column" gap={16}>
         <Flex gap={10}>
-          <Avatar src={profileImageUrl} size={60} radius="5px" />
+          <CrewAvatar src={profileImageUrl} size={60} radius="5px" />
           <Flex direction="column" justify="space-around">
-            <Text size={24} weight={700} nowrap>
+            <Text size={24} weight={700} ellipsis={1}>
               {name}
             </Text>
             <Text size={12} weight={500} nowrap>
diff --git a/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.styles.ts b/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.styles.ts
index ce3b8bca..cf927f4c 100644
--- a/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.styles.ts
+++ b/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.styles.ts
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { Avatar } from '@components/Avatar';
 import { Flex } from '@components/shared/Flex';
 import { Text } from '@components/shared/Text';
 
@@ -13,3 +14,7 @@ export const RankText = styled(Text)`
   width: 1.3rem;
   text-align: end;
 `;
+
+export const CrewAvatar = styled(Avatar)`
+  min-width: 40px;
+`;
diff --git a/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.tsx b/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.tsx
index 7c76b887..0e8ed688 100644
--- a/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.tsx
+++ b/src/pages/CrewsRankingPage/components/RankingItem/RankingItem.tsx
@@ -1,10 +1,9 @@
-import { Avatar } from '@components/Avatar';
 import { Flex } from '@components/shared/Flex';
 import { Text } from '@components/shared/Text';
 
 import { theme } from '@styles/theme';
 
-import { RankText, RankingItemWrapper } from './RankingItem.styles';
+import { CrewAvatar, RankText, RankingItemWrapper } from './RankingItem.styles';
 import { getRankingItemBackgroundColor } from './getRankingItemBackgroundColor';
 
 type RankingItemProps = {
@@ -33,8 +32,8 @@ export const RankingItem = ({
         <RankText size={14} nowrap>
           {rank}
         </RankText>
-        <Avatar size={40} src={profilImageUrl} radius="5px" />
-        <Text size={16} weight={700} nowrap>
+        <CrewAvatar size={40} src={profilImageUrl} radius="5px" />
+        <Text size={16} weight={700} ellipsis={1}>
           {name}
         </Text>
       </Flex>