fix: 크루 랭킹 페이지 ui 깨지는 버그 수정 (#389)

Java-and-Script · Nov 28, 2023 · aedc819 · aedc819
1 parent 1384623
commit aedc819
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>