Merge pull request #94 from SOPT-36-NINEDOT/feat/#92/todoBox

[Feature]: TodoBox 컴포넌트 구현

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

@@ -1,31 +1,7 @@
-import { useState } from 'react';
-
-import { CycleChip } from '../todo/myTodo/component/CycleChip';
-import type { CycleType } from '../todo/myTodo/component/CycleChip';
-
-const CYCLE_LIST: CycleType[] = ['매일', '매주', '한번'];
-
 const Home = () => {
-  const [selectedCycle, setSelectedCycle] = useState<CycleType>('매일');
-
   return (
-    <div style={{ padding: '2rem' }}>
+    <div>
       <h1>홈</h1>
-      <h2>CycleChip 테스트</h2>
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '2rem' }}>
-        {CYCLE_LIST.map((cycle) => (
-          <CycleChip
-            key={cycle}
-            type="selector"
-            value={cycle}
-            selected={selectedCycle === cycle}
-            onClick={setSelectedCycle}
-          />
-        ))}
-      </div>
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <CycleChip type="display" value={selectedCycle} />
-      </div>
     </div>
   );
 };

src/page/home/Home.tsx

@@ -0,0 +1,75 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const todoBoxContainer = styleVariants({
+  recommend: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '1rem',
+    background: colors.grey4,
+    borderRadius: '10px',
+    width: '40.6rem',
+    padding: '2.4rem 2rem',
+  },
+  todo: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: colors.grey4,
+    borderRadius: '8px',
+    width: '43.6rem',
+    padding: '1.4rem 2rem',
+  },
+});
+
+export const todoItemContainer = styleVariants({
+  recommend: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  todo: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: '1 0 0',
+  },
+});
+
+export const todoText = styleVariants({
+  recommend: {
+    width: '33.3rem',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    color: colors.white01,
+    ...fonts.subtitle05,
+  },
+  todo: {
+    color: colors.grey10,
+    textAlign: 'center',
+    ...fonts.subtitle02,
+  },
+});
+
+export const checkboxButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '2.4rem',
+  height: '2.4rem',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  cursor: 'pointer',
+});
+
+export const checkboxIcon = style({
+  width: '2.4rem',
+  height: '2.4rem',
+});

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

@@ -0,0 +1,63 @@
+import clsx from 'clsx';
+
+import {
+  todoBoxContainer,
+  todoItemContainer,
+  todoText,
+  checkboxButton,
+  checkboxIcon,
+} from './TodoBox.css';
+
+import { IcCheckboxChecked, IcCheckboxDefault } from '@/assets/svg';
+
+interface TodoBoxProps {
+  type: 'recommend' | 'todo';
+  items: TodoItemProps[];
+  onItemClick?: (item: TodoItemProps) => void;
+  className?: string;
+}
+
+interface TodoItemProps {
+  id: string;
+  content: string;
+  completed?: boolean;
+}
+
+const TodoBox = ({ type, items, onItemClick, className }: TodoBoxProps) => (
+  <div className={clsx(todoBoxContainer[type], className)}>
+    {items.map((item) => (
+      <TodoItem key={item.id} item={item} type={type} onItemClick={onItemClick} />
+    ))}
+  </div>
+);
+
+const TodoItem = ({
+  item,
+  type,
+  onItemClick,
+}: {
+  item: TodoItemProps;
+  type: 'recommend' | 'todo';
+  onItemClick?: (item: TodoItemProps) => void;
+}) => {
+  const handleClick = () => {
+    onItemClick?.(item);
+  };
+  return (
+    <div className={todoItemContainer[type]}>
+      <span className={todoText[type]}>{item.content}</span>
+      <button
+        className={checkboxButton}
+        onClick={handleClick}
+        aria-label={item.completed ? '완료 취소하기' : '완료하기'}
+      >
+        {(() => {
+          const CheckIcon = item.completed ? IcCheckboxChecked : IcCheckboxDefault;
+          return <CheckIcon className={checkboxIcon} />;
+        })()}
+      </button>
+    </div>
+  );
+};
+
+export default TodoBox;

src/page/todo/myTodo/component/TodoBox/TodoBox.tsx

@@ -0,0 +1,21 @@
+export type TodoModeTypes = 'recommend' | 'todo';
+
+export interface TodoItemTypes {
+  id: string;
+  content: string;
+  completed?: boolean;
+  isRecommended?: boolean;
+}
+
+export interface TodoBoxProps {
+  type: 'recommend' | 'todo';
+  items: TodoItemTypes[];
+  onItemClick?: (item: TodoItemTypes) => void;
+  className?: string;
+}
+
+export interface TodoItemProps {
+  item: TodoItemTypes;
+  type: TodoModeTypes;
+  onItemClick?: (item: TodoItemTypes) => void;
+}

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

@@ -0,0 +1,2 @@
+export { default } from './TodoBox';
+export type { TodoBoxProps, TodoItemTypes } from './TodoBox.types';

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

@@ -0,0 +1,2 @@
+export { default as TodoBox } from './TodoBox';
+export type { TodoBoxProps, TodoItemTypes } from './TodoBox/TodoBox.types';