feat : 할 일 및 일정 버튼 구현

Author: moo1677

app/(with-sidebar)/(home)/page.tsx

@@ -20,7 +20,6 @@ const Page = () => {
       <BottomSection className="grid grid-cols-1 gap-6 md:grid-cols-2" />
 
       {/* 3. ButtonSection */}
-      {/* 버튼 두개 만드쇼 */}
       <ButtonSection />
     </div>
   );

components/home/BottomSection.tsx

@@ -1,16 +1,57 @@
+'use client';
+
+import { useState } from 'react';
 import Card from './Card';
+import CheckList, { ChecklistItem } from './CheckList';
 
 interface BottomSectionProps {
   className?: string;
 }
 
-const BottomSection = ({ className }: BottomSectionProps) => {
+const TODAY_DUMMY = [
+  { id: 't1', text: 'React Hooks 정리', checked: false },
+  { id: 't2', text: 'GSAP ScrollTrigger 복습', checked: true },
+  { id: 't3', text: '알고리즘 1문제 풀기', checked: false },
+];
+
+const UPCOMING_DUMMY = [
+  { id: 'u1', text: 'Next.js App Router 정리', checked: false },
+  { id: 'u2', text: '포트폴리오 리팩토링', checked: false },
+];
+
+export default function BottomSection({ className }: BottomSectionProps) {
+  const [today, setToday] = useState<ChecklistItem[]>(TODAY_DUMMY);
+  const [upcoming, setUpcoming] = useState<ChecklistItem[]>(UPCOMING_DUMMY);
+
+  const toggleToday = (id: string) => {
+    setToday((prev) =>
+      prev.map((it) => (it.id === id ? { ...it, checked: !it.checked } : it))
+    );
+  };
+
+  const toggleUpcoming = (id: string) => {
+    setUpcoming((prev) =>
+      prev.map((it) => (it.id === id ? { ...it, checked: !it.checked } : it))
+    );
+  };
+
   return (
     <div className={className}>
-      <Card title="오늘 할 일">대충 할 일</Card>
-      <Card title="다가오는 일정">대충 일정</Card>
+      <Card title="오늘 할 일">
+        <CheckList
+          items={today}
+          onToggle={toggleToday}
+          emptyText="오늘 할 일이 없습니다"
+        />
+      </Card>
+
+      <Card title="다가오는 일정">
+        <CheckList
+          items={upcoming}
+          onToggle={toggleUpcoming}
+          emptyText="다가오는 일정이 없습니다"
+        />
+      </Card>
     </div>
   );
-};
-
-export default BottomSection;
+}

components/home/CheckItem.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Check } from 'lucide-react';
+
+type CheckItemProps = {
+  checked: boolean;
+  text: string;
+  onToggle: () => void;
+};
+
+export function CheckItem({ checked, text, onToggle }: CheckItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={[
+        'flex w-full items-center gap-4 rounded-2xl border px-5 py-2 text-left transition',
+        'bg-gray-50 hover:bg-gray-100',
+        'border-gray-300',
+      ].join(' ')}
+    >
+      <div
+        className={[
+          'flex h-6 w-6 items-center justify-center rounded-full border-2 transition',
+          checked ? 'border-green-500' : 'border-gray-400',
+        ].join(' ')}
+      >
+        <Check
+          className={[
+            'transition-all',
+            checked
+              ? 'scale-100 text-green-500 opacity-100'
+              : 'scale-50 opacity-0',
+          ].join(' ')}
+          size={16}
+          strokeWidth={4}
+        />
+      </div>
+      <span
+        className={[
+          'text-sm',
+          checked ? 'text-gray-400 line-through' : 'text-gray-800',
+        ].join(' ')}
+      >
+        {text}
+      </span>
+    </button>
+  );
+}

components/home/CheckList.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { CheckItem } from './CheckItem';
+
+export type ChecklistItem = {
+  id: string;
+  text: string;
+  checked: boolean;
+};
+
+interface CheckListProps {
+  items: ChecklistItem[];
+  onToggle: (id: string) => void;
+  emptyText?: string;
+}
+
+export default function CheckList({
+  items,
+  onToggle,
+  emptyText = '아직 항목이 없습니다',
+}: CheckListProps) {
+  if (items.length === 0) {
+    return <p className="text-sm text-gray-400">{emptyText}</p>;
+  }
+
+  return (
+    <div className="space-y-3">
+      {items.map((item) => (
+        <CheckItem
+          key={item.id}
+          checked={item.checked}
+          text={item.text}
+          onToggle={() => onToggle(item.id)}
+        />
+      ))}
+    </div>
+  );
+}