From 00f8e004363554e0eea925078afc8a4aee943faa Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:55:05 +0900
Subject: [PATCH] =?UTF-8?q?feat(todo):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=E2=80=94=20=EC=8A=A4=EC=99=80?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=20=EC=B9=B8=EB=B0=98=20+=20FAB=20+=20?=
 =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=9E=85=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/todo/Todo.css |  12 +-
 src/pages/todo/Todo.jsx | 285 ++++++++++++++++++++++++----------------
 2 files changed, 186 insertions(+), 111 deletions(-)

diff --git a/src/pages/todo/Todo.css b/src/pages/todo/Todo.css
index 54f6f31..d1f7155 100644
--- a/src/pages/todo/Todo.css
+++ b/src/pages/todo/Todo.css
@@ -370,11 +370,21 @@
     text-decoration-color: rgba(244, 114, 182, 0.4);
 }
 
+/* ── 스와이프 보드 (모바일 전용) ──────────────────────────────────────── */
+
+.todo-swipe-board {
+    display: none;
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {
     .todo-board {
-        grid-template-columns: 1fr;
+        display: none;
+    }
+
+    .todo-swipe-board {
+        display: block;
     }
 
     .todo-col {
diff --git a/src/pages/todo/Todo.jsx b/src/pages/todo/Todo.jsx
index 62ba2a8..1a0b65b 100644
--- a/src/pages/todo/Todo.jsx
+++ b/src/pages/todo/Todo.jsx
@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { getTodos, addTodo, updateTodo, deleteTodo, clearTodos } from '../../api';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import SwipeableView from '../../components/SwipeableView';
+import FAB from '../../components/FAB';
+import MobileSheet from '../../components/MobileSheet';
+import PullToRefresh from '../../components/PullToRefresh';
 import './Todo.css';
 
 const ACTIVE_COLUMNS = [
@@ -19,11 +24,13 @@ const toDateStr = (iso) => {
 };
 
 const Todo = () => {
+    const isMobile = useIsMobile();
     const [todos, setTodos] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState('');
     const [form, setForm] = useState(emptyForm);
     const [formOpen, setFormOpen] = useState(false);
+    const [addSheetOpen, setAddSheetOpen] = useState(false);
     const [saving, setSaving] = useState(false);
     const [dragging, setDragging] = useState(null);
     const [dragOver, setDragOver] = useState(null);
@@ -185,7 +192,66 @@ const Todo = () => {
         </div>
     );
 
+    /* ── 칸반 컬럼 렌더러 (재사용) ── */
+    const renderColumn = (col) => {
+        const items = byStatus(col.id);
+        return (
+            <div
+                key={col.id}
+                className={`todo-col${dragOver === col.id ? ' is-drag-over' : ''}`}
+                onDragOver={(e) => onDragOver(e, col.id)}
+                onDrop={(e) => onDrop(e, col.id)}
+            >
+                <div className="todo-col__head">
+                    <span className="todo-col__title">{col.label}</span>
+                    <span className="todo-col__count">{items.length}</span>
+                </div>
+                <div className="todo-col__body">
+                    {items.length === 0 && (
+                        <p className="todo-col__empty">드래그하여 이동</p>
+                    )}
+                    {items.map((todo) => renderCard(todo, col.id))}
+                </div>
+            </div>
+        );
+    };
+
+    /* ── 추가 폼 (공통) ── */
+    const addForm = (
+        <form className="todo-form" onSubmit={async (e) => { await handleAdd(e); setAddSheetOpen(false); }}>
+            <label className="todo-form__field">
+                <span>제목 *</span>
+                <input
+                    type="text"
+                    placeholder="태스크 제목을 입력하세요"
+                    value={form.title}
+                    onChange={(e) => setForm((v) => ({ ...v, title: e.target.value }))}
+                    required
+                />
+            </label>
+            <label className="todo-form__field">
+                <span>설명</span>
+                <textarea
+                    placeholder="설명 (선택)"
+                    value={form.description}
+                    rows={3}
+                    onChange={(e) => setForm((v) => ({ ...v, description: e.target.value }))}
+                />
+            </label>
+            <div className="todo-form__actions">
+                <button
+                    type="submit"
+                    className="button primary"
+                    disabled={saving || !form.title.trim()}
+                >
+                    {saving ? '저장 중...' : '추가'}
+                </button>
+            </div>
+        </form>
+    );
+
     return (
+        <PullToRefresh onRefresh={load}>
         <div className="todo-page">
             {/* 툴바 */}
             <div className="todo-toolbar">
@@ -205,127 +271,126 @@ const Todo = () => {
                 </button>
             </div>
 
-            {/* 추가 폼 */}
-            {formOpen && (
-                <form className="todo-form" onSubmit={handleAdd}>
-                    <label className="todo-form__field">
-                        <span>제목 *</span>
-                        <input
-                            type="text"
-                            placeholder="태스크 제목을 입력하세요"
-                            value={form.title}
-                            onChange={(e) => setForm((v) => ({ ...v, title: e.target.value }))}
-                            required
-                        />
-                    </label>
-                    <label className="todo-form__field">
-                        <span>설명</span>
-                        <textarea
-                            placeholder="설명 (선택)"
-                            value={form.description}
-                            rows={3}
-                            onChange={(e) => setForm((v) => ({ ...v, description: e.target.value }))}
-                        />
-                    </label>
-                    <div className="todo-form__actions">
-                        <button
-                            type="submit"
-                            className="button primary"
-                            disabled={saving || !form.title.trim()}
-                        >
-                            {saving ? '저장 중...' : '추가'}
-                        </button>
-                    </div>
-                </form>
-            )}
+            {/* 추가 폼 (데스크탑) */}
+            {formOpen && !isMobile && addForm}
 
             {error && <p className="todo-error">{error}</p>}
             {loading && todos.length === 0 && <p className="todo-loading">불러오는 중...</p>}
 
-            {/* 활성 보드 (할 일 + 진행 중) */}
-            <div className="todo-board">
-                {ACTIVE_COLUMNS.map((col) => {
-                    const items = byStatus(col.id);
-                    return (
-                        <div
-                            key={col.id}
-                            className={`todo-col${dragOver === col.id ? ' is-drag-over' : ''}`}
-                            onDragOver={(e) => onDragOver(e, col.id)}
-                            onDrop={(e) => onDrop(e, col.id)}
-                        >
-                            <div className="todo-col__head">
-                                <span className="todo-col__title">{col.label}</span>
-                                <span className="todo-col__count">{items.length}</span>
-                            </div>
-                            <div className="todo-col__body">
-                                {items.length === 0 && (
-                                    <p className="todo-col__empty">드래그하여 이동</p>
+            {/* 모바일: SwipeableView 칸반 */}
+            {isMobile ? (
+                <div className="todo-swipe-board">
+                    <SwipeableView
+                        tabs={[
+                            { key: 'todo',        label: '할 일',  content: renderColumn({ id: 'todo', label: '할 일' }) },
+                            { key: 'in_progress', label: '진행 중', content: renderColumn({ id: 'in_progress', label: '진행 중' }) },
+                            { key: 'done',        label: '완료',   content: (
+                                <div
+                                    className={`todo-done-panel${dragOver === 'done' ? ' is-drag-over' : ''}`}
+                                    onDragOver={(e) => onDragOver(e, 'done')}
+                                    onDrop={(e) => onDrop(e, 'done')}
+                                >
+                                    <div className="todo-done-panel__head">
+                                        <div className="todo-done-panel__title-row">
+                                            <span className="todo-col__title">완료</span>
+                                            <span className="todo-col__count">{doneTodos.length}</span>
+                                        </div>
+                                        <div className="todo-done-panel__filter">
+                                            <button type="button" className={`todo-date-btn${doneDate === '' ? ' is-active' : ''}`} onClick={() => setDoneDate('')}>전체</button>
+                                            {doneDates.map((d) => (
+                                                <button key={d} type="button" className={`todo-date-btn${doneDate === d ? ' is-active' : ''}`} onClick={() => setDoneDate(d)}>
+                                                    {new Date(d + 'T00:00:00').toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })}
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <div className="todo-done-panel__body">
+                                        {doneTodos.length === 0 ? (
+                                            <p className="todo-col__empty">{doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '드래그하여 이동'}</p>
+                                        ) : (
+                                            doneTodos.map((todo) => renderCard(todo, 'done'))
+                                        )}
+                                    </div>
+                                </div>
+                            )},
+                        ]}
+                    />
+                </div>
+            ) : (
+                <>
+                    {/* 데스크탑: 활성 보드 (할 일 + 진행 중) */}
+                    <div className="todo-board">
+                        {ACTIVE_COLUMNS.map((col) => renderColumn(col))}
+                    </div>
+
+                    {/* 완료 패널 */}
+                    <div
+                        className={`todo-done-panel${dragOver === 'done' ? ' is-drag-over' : ''}`}
+                        onDragOver={(e) => onDragOver(e, 'done')}
+                        onDrop={(e) => onDrop(e, 'done')}
+                    >
+                        <div className="todo-done-panel__head">
+                            <div className="todo-done-panel__title-row">
+                                <span className="todo-col__title">완료</span>
+                                <span className="todo-col__count">{doneTodos.length}</span>
+                                {doneDates.length > 0 && doneDate === '' && (
+                                    <span className="todo-done-panel__total-hint">
+                                        전체 {todos.filter(t => t.status === 'done').length}건
+                                    </span>
                                 )}
-                                {items.map((todo) => renderCard(todo, col.id))}
+                            </div>
+                            <div className="todo-done-panel__filter">
+                                <button
+                                    type="button"
+                                    className={`todo-date-btn${doneDate === '' ? ' is-active' : ''}`}
+                                    onClick={() => setDoneDate('')}
+                                >
+                                    전체
+                                </button>
+                                {doneDates.map((d) => (
+                                    <button
+                                        key={d}
+                                        type="button"
+                                        className={`todo-date-btn${doneDate === d ? ' is-active' : ''}`}
+                                        onClick={() => setDoneDate(d)}
+                                    >
+                                        {new Date(d + 'T00:00:00').toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })}
+                                    </button>
+                                ))}
+                                <input
+                                    type="date"
+                                    className="todo-date-input"
+                                    value={doneDate}
+                                    onChange={(e) => setDoneDate(e.target.value)}
+                                    title="날짜 직접 선택"
+                                />
                             </div>
                         </div>
-                    );
-                })}
-            </div>
+                        <div className="todo-done-panel__body">
+                            {doneTodos.length === 0 ? (
+                                <p className="todo-col__empty">
+                                    {doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '드래그하여 이동'}
+                                </p>
+                            ) : (
+                                doneTodos.map((todo) => renderCard(todo, 'done'))
+                            )}
+                        </div>
+                    </div>
+                </>
+            )}
 
-            {/* 완료 패널 */}
-            <div
-                className={`todo-done-panel${dragOver === 'done' ? ' is-drag-over' : ''}`}
-                onDragOver={(e) => onDragOver(e, 'done')}
-                onDrop={(e) => onDrop(e, 'done')}
+            {/* 모바일: 추가 바텀시트 */}
+            <MobileSheet
+                open={addSheetOpen}
+                onClose={() => { setAddSheetOpen(false); setForm(emptyForm); }}
+                title="태스크 추가"
             >
-                {/* 완료 패널 헤더 */}
-                <div className="todo-done-panel__head">
-                    <div className="todo-done-panel__title-row">
-                        <span className="todo-col__title">완료</span>
-                        <span className="todo-col__count">{doneTodos.length}</span>
-                        {doneDates.length > 0 && doneDate === '' && (
-                            <span className="todo-done-panel__total-hint">
-                                전체 {todos.filter(t => t.status === 'done').length}건
-                            </span>
-                        )}
-                    </div>
-                    {/* 날짜 필터 */}
-                    <div className="todo-done-panel__filter">
-                        <button
-                            type="button"
-                            className={`todo-date-btn${doneDate === '' ? ' is-active' : ''}`}
-                            onClick={() => setDoneDate('')}
-                        >
-                            전체
-                        </button>
-                        {doneDates.map((d) => (
-                            <button
-                                key={d}
-                                type="button"
-                                className={`todo-date-btn${doneDate === d ? ' is-active' : ''}`}
-                                onClick={() => setDoneDate(d)}
-                            >
-                                {new Date(d + 'T00:00:00').toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })}
-                            </button>
-                        ))}
-                        <input
-                            type="date"
-                            className="todo-date-input"
-                            value={doneDate}
-                            onChange={(e) => setDoneDate(e.target.value)}
-                            title="날짜 직접 선택"
-                        />
-                    </div>
-                </div>
+                {addForm}
+            </MobileSheet>
 
-                {/* 완료 카드 그리드 */}
-                <div className="todo-done-panel__body">
-                    {doneTodos.length === 0 ? (
-                        <p className="todo-col__empty">
-                            {doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '드래그하여 이동'}
-                        </p>
-                    ) : (
-                        doneTodos.map((todo) => renderCard(todo, 'done'))
-                    )}
-                </div>
-            </div>
+            <FAB onClick={() => setAddSheetOpen(true)} label="태스크 추가" />
         </div>
+        </PullToRefresh>
     );
 };