feat(todo): 모바일 반응형 — 스와이프 칸반 + FAB + 바텀시트 입력
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user