Fix: 아이템 타이틀 양 사이드 아이콘 가려짐 오류 수정

8-Sprinters · Feb 6, 2024 · 45fc940 · 45fc940
1 parent 3f4a6cf
commit 45fc940
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/public/icons/dnd.svg b/public/icons/dnd.svg
diff --git a/src/app/create/_components/item/ItemLayout.css.ts b/src/app/create/_components/item/ItemLayout.css.ts
@@ -3,15 +3,21 @@ import { style } from '@vanilla-extract/css';
 export const itemHeader = style({
   width: '100%',
 
+  flexGrow: 0,
+
   display: 'flex',
   alignItems: 'center',
   gap: '12px',
 
   overflow: 'hidden',
 });
 
+export const headerIcon = style({
+  flexShrink: '0',
+});
+
 export const rankAndTitle = style({
-  width: '100%',
+  flexGrow: 1,
 
   display: 'flex',
   gap: '8px',

diff --git a/src/app/create/_components/item/ItemLayout.tsx b/src/app/create/_components/item/ItemLayout.tsx
@@ -34,14 +34,14 @@ export default function ItemLayout({
   return (
     <>
       <div className={styles.itemHeader}>
-        <DndIcon alt="드래그앤드롭" />
+        <DndIcon width="18" height="18" alt="드래그앤드롭" className={styles.headerIcon} />
         <div className={styles.rankAndTitle}>
           <Label colorType={index === 0 ? 'blue' : 'skyblue'}>{`${index + 1}위`}</Label>
           {titleInput}
         </div>
         {itemLength > 3 && (
           <button onClick={handleDeleteItem}>
-            <ClearGrayIcon alt="아이템 삭제" />
+            <ClearGrayIcon alt="아이템 삭제" className={styles.headerIcon} />
           </button>
         )}
       </div>

diff --git a/src/app/create/_components/item/Items.css.ts b/src/app/create/_components/item/Items.css.ts
@@ -33,6 +33,8 @@ export const draggingItem = style([
 ]);
 
 export const title = style({
+  flexGrow: 1,
+
   //body1
   fontSize: '1.6rem',
   fontWeight: '400',
@@ -57,7 +59,7 @@ export const comment = style({
   width: '100%',
   resize: 'none',
 
-  flexGrow: '1',
+  flexGrow: 1,
 
   //body2
   fontSize: '1.5rem',