Merge pull request #241 from ttaerrim/sidebar-label

[Design] 모각코 사이드바 제목 디자인 조정
boostcampwm2023 · Nov 30, 2023 · 5b2b188 · 5b2b188
2 parents 4616a2d + a82e6f0
commit 5b2b188
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/app/frontend/src/components/Label/index.css.ts b/app/frontend/src/components/Label/index.css.ts
@@ -10,6 +10,7 @@ export const container = recipe({
     minWidth: '3.5rem',
     padding: '0.4rem 1.5rem',
     borderRadius: '100rem',
+    whiteSpace: 'pre',
   },
 
   variants: {

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx
@@ -1,7 +1,6 @@
 import { ResponseMogacoDto } from '@morak/apitype';
 
 import { Label } from '@/components';
-import { sansBold24 } from '@/styles/font.css';
 
 import * as styles from './index.css';
 
@@ -14,7 +13,7 @@ export function TitleWrapper({
       <Label theme="primary" shape="fill">
         {status}
       </Label>
-      <span className={sansBold24}>{title}</span>
+      <span className={styles.title}>{title}</span>
     </div>
   );
 }
diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/index.css.ts b/app/frontend/src/components/Sidebar/Contents/Mogaco/index.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/styles';
-import { sansRegular12 } from '@/styles/font.css';
+import { sansBold24, sansRegular12 } from '@/styles/font.css';
 
 export const container = style({
   display: 'flex',
@@ -42,9 +42,14 @@ export const infoWrapper = style({
   flexDirection: 'column',
   gap: '0.4rem',
 });
+export const title = style([
+  sansBold24,
+  { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' },
+]);
 export const titleWrapper = style({
   display: 'flex',
   gap: '0.4rem',
+  alignItems: 'center',
 });
 export const wrapper = style({
   display: 'flex',