refactor: 투두 박스 컴포넌트 코드 개선

Author: shinjigu

package.json

@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.81.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "axios": "^1.10.0",
+    "clsx": "^2.1.1",
     "openapi-typescript": "^7.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

pnpm-lock.yaml

@@ -43,10 +43,8 @@ export const todoItemContainer = styleVariants({
 
 export const todoText = styleVariants({
   recommend: {
-    display: '-webkit-box',
     width: '33.3rem',
-    WebkitBoxOrient: 'vertical',
-    WebkitLineClamp: 1,
+    whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     color: colors.white01,
@@ -65,7 +63,6 @@ export const checkboxButton = style({
   justifyContent: 'center',
   width: '2.4rem',
   height: '2.4rem',
-  aspectRatio: '1/1',
   background: 'none',
   border: 'none',
   padding: 0,
@@ -75,5 +72,4 @@ export const checkboxButton = style({
 export const checkboxIcon = style({
   width: '2.4rem',
   height: '2.4rem',
-  aspectRatio: '1/1',
 });

src/page/todo/myTodo/component/TodoBox/TodoBox.css.ts

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import {
   todoBoxContainer,
   todoItemContainer,
@@ -22,7 +24,7 @@ interface TodoItemProps {
 }
 
 const TodoBox = ({ type, items, onItemClick, className }: TodoBoxProps) => (
-  <div className={`${todoBoxContainer[type]}${className ? ` ${className}` : ''}`}>
+  <div className={clsx(todoBoxContainer[type], className)}>
     {items.map((item) => (
       <TodoItem key={item.id} item={item} type={type} onItemClick={onItemClick} />
     ))}
@@ -49,11 +51,10 @@ const TodoItem = ({
         onClick={handleClick}
         aria-label={item.completed ? '완료 취소하기' : '완료하기'}
       >
-        {item.completed ? (
-          <IcCheckboxChecked className={checkboxIcon} />
-        ) : (
-          <IcCheckboxDefault className={checkboxIcon} />
-        )}
+        {(() => {
+          const CheckIcon = item.completed ? IcCheckboxChecked : IcCheckboxDefault;
+          return <CheckIcon className={checkboxIcon} />;
+        })()}
       </button>
     </div>
   );