diff --git a/frontend/src/components/GameResultItem/GameResultItem.styled.ts b/frontend/src/components/GameResultItem/GameResultItem.styled.ts index 7ec5d3d9..f2a75f46 100644 --- 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 index 75b49359..d65913f9 100644 --- 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( {`${rank}위`}
- - {nickname} +
+ + {nickname} +