💄 참여자 수를 제목과 같은 줄에 표시

- 초대 코드 텍스트에 ellipsis 스타일 적용

app/frontend/src/components/Group/index.css.ts

@@ -19,21 +19,20 @@ export const code = style([
     alignItems: 'center',
     gap: '0.8rem',
     color: grayscale200,
+    whiteSpace: 'nowrap',
   },
 ]);
 
-export const codeString = style({
-  display: 'flex',
-  fontWeight: 'normal',
-  borderLeft: `2px solid ${grayscale100}`,
-  paddingLeft: `0.8rem`,
-
-  '@media': {
-    'screen and (max-width:320px)': {
-      display: 'none',
-    },
+export const codeString = style([
+  sansRegular16,
+  {
+    paddingLeft: `0.8rem`,
+    borderLeft: `2px solid ${grayscale100}`,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
   },
-});
+]);
 
 export const container = style({
   display: 'flex',
@@ -82,6 +81,7 @@ export const membersCount = style([
     alignItems: 'center',
     gap: '0.4rem',
     color: grayscale200,
+    marginLeft: '0.4rem',
   },
 ]);
 

app/frontend/src/components/Group/index.tsx

@@ -42,13 +42,13 @@ export function Group({
           {owned && <Crown />}
           <div className={styles.title}>{name}</div>
           {closed && <Lock width={24} height={24} fill={grayscale200} />}
+          <div className={styles.membersCount}>
+            <People width={16} height={16} fill={grayscale200} />
+            <span>{membersCount}</span>
+          </div>
         </div>
         <GroupButton id={id} closed={closed} joined={joined} owned={owned} />
       </div>
-      <div className={styles.membersCount}>
-        <People width={16} height={16} fill={grayscale200} />
-        <span>{membersCount}</span>
-      </div>
       {accessCode && (
         <div className={styles.code}>
           <span>초대 코드</span>