fix: step의 멤버 수가 많을 때 member ChipGroup 레이아웃 깨지던 문제 해결

woowacourse-teams · Sep 25, 2024 · 629458e · 629458e
1 parent e163b1b
commit 629458e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/client/src/components/Design/components/ChipGroup/ChipGroup.style.ts b/client/src/components/Design/components/ChipGroup/ChipGroup.style.ts
@@ -4,4 +4,5 @@ export const chipGroupStyle = css({
   display: 'flex',
   gap: '0.25rem',
   flexWrap: 'wrap',
+  overflow: 'hidden',
 });
diff --git a/client/src/components/StepList/Step.tsx b/client/src/components/StepList/Step.tsx
@@ -9,6 +9,7 @@ import {Bill, Step as StepType} from 'types/serviceType';
 import {Text} from '@components/Design';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
+import {css} from '@emotion/react';
 
 interface Prop {
   step: StepType;
@@ -25,7 +26,17 @@ const Step = ({step}: Prop) => {
     <ListItem>
       <ListItem.Row>
         <ChipGroup color="gray" texts={step.members.map(member => member.name)} />
-        <Text size="caption" textColor="gray">
+
+        <Text
+          size="caption"
+          textColor="gray"
+          css={css`
+            flex-shrink: 0;
+            width: 2rem;
+            text-align: end;
+            margin-left: 0.5rem;
+          `}
+        >
           {step.members.length}명
         </Text>
       </ListItem.Row>