fix: 매칭 결과 ui 깨지는 문제 해결 #380

woowacourse-teams · Oct 24, 2024 · 6e71c18 · 6e71c18
1 parent 0922ac7
commit 6e71c18
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/frontend/src/components/GameResultItem/GameResultItem.styled.ts b/frontend/src/components/GameResultItem/GameResultItem.styled.ts
@@ -6,7 +6,9 @@ export const rankItem = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.4rem;
   width: 100%;
+
   ${Theme.typography.headline3};
 
   :focus {
@@ -34,15 +36,25 @@ export const rankNumber = css`
 export const nicknameContainer = (percent: number) => css`
   display: flex;
   overflow: visible;
+  position: relative;
   align-items: center;
   gap: 1rem;
-  width: ${percent > 5 ? percent - 5 : percent}%;
+
+  width: ${percent > 15 ? percent - 15 : percent}%;
   height: 100%;
-  padding: 1.2rem;
+  padding: 2rem 1.2rem;
   border-radius: ${Theme.borderRadius.radius20};
 
   background-color: ${Theme.color.peanut400};
-  transition: all 2s;
+  transition: all 1s;
+`;
+
+export const useInfoWrapper = css`
+  display: flex;
+  position: absolute;
+  align-items: center;
+  gap: 0.8rem;
+  width: 55vw;
 `;
 
 export const rankPercentWrapper = css`

diff --git a/frontend/src/components/GameResultItem/GameResultItem.tsx b/frontend/src/components/GameResultItem/GameResultItem.tsx
@@ -9,6 +9,7 @@ import {
   rankNumberContainer,
   rankPercent,
   rankPercentWrapper,
+  useInfoWrapper,
 } from './GameResultItem.styled';
 
 import SillyDdangkongMedium from '@/assets/images/sillyDdangkongMedium.webp';
@@ -34,8 +35,10 @@ const GameResultItem = forwardRef<HTMLLIElement, GameResultItemProps>(
             <span css={rankNumber}>{`${rank}위`}</span>
           </div>
           <div css={nicknameContainer(animatedRankPercent)}>
-            <img src={SillyDdangkongMedium} alt="" css={profileImage} />
-            <span css={nickname}>{nickname}</span>
+            <div css={useInfoWrapper}>
+              <img src={SillyDdangkongMedium} alt="" css={profileImage} />
+              <span css={nickname}>{nickname}</span>
+            </div>
           </div>
         </div>
         <div css={rankPercentWrapper}>