Todo Build

1. 투두 CRUD — 생성(모달), 인라인 제목 편집, 소프트 딜리트, 복구, 영구 삭제
2. 상세항목 — textarea 기반, Cmd/Ctrl+Enter 저장, 번호+점선 구분, 카드 제목행 클릭으로 펼침/접힘
3. 그룹 — 생성/수정/삭제, 카드 내 그룹 라벨 클릭 시 드롭다운으로 그룹 변경, 전체 그룹일 때 그룹별 섹션 구분
4. 5개 탭 — 전체, 미완료, 완료, 즐겨찾기, 휴지통
5. 검색 — 제목+상세항목 검색, 노란색 하이라이트, debounce 300ms, 휴지통에선 검색/그룹필터 숨김
6. 즐겨찾기 — 별 토글
7. 상단 고정(pinned) — 북마크 아이콘, 고정 시 상단 정렬, 주황색 표시
8. 확인 모달 — 모든 삭제/복구/영구삭제에 확인 모달, Enter=확인 Esc=취소
9. 백업 — JSON 내보내기/가져오기 (pinned 포함)
10. URL 자동 링크 — 텍스트 내 URL을 클릭 가능한 링크로 변환
11. 완료 카드 구분 — bg-gray-50 + border-gray-100 배경
12. 카드 호버 — 제목행 호버 시 카드 bg-blue-50 + border-blue-200
13. 텍스트 오버플로 방지 — break-all + overflow-wrap-anywhere

.gitignore

node_modules/
dist/
*.db
*.db-shm
*.db-wal
*.db-journal
.env

서버 코드

server/package.json

{
  "name": "todo-server",
  "version": "1.0.0",
  "description": "Todo App Backend - Express + SQLite",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node index.js"
  },
  "dependencies": {
    "better-sqlite3": "^11.7.0",
    "cors": "^2.8.5",
    "express": "^4.21.0"
  }
}

server/index.js

const express = require('express');
const cors = require('cors');

const todosRouter = require('./routes/todos');
const detailsRouter = require('./routes/details');
const groupsRouter = require('./routes/groups');
const backupRouter = require('./routes/backup');

const app = express();
const PORT = 3001;

app.use(cors());
app.use(express.json());

app.use('/api/todos', todosRouter);
app.use('/api', detailsRouter);
app.use('/api/groups', groupsRouter);
app.use('/api/backup', backupRouter);

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

server/db.js

const Database = require('better-sqlite3');
const path = require('path');

const db = new Database(path.join(__dirname, 'todo.db'));

db.pragma('journal_mode = WAL');
db.pragma('foreign_keys = ON');

db.exec(`
  CREATE TABLE IF NOT EXISTS groups (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    createdAt TEXT DEFAULT (datetime('now'))
  );

  INSERT OR IGNORE INTO groups (id, name) VALUES (1, '미지정');

  CREATE TABLE IF NOT EXISTS todos (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    groupId INTEGER DEFAULT 1,
    completed INTEGER DEFAULT 0,
    favorited INTEGER DEFAULT 0,
    pinned INTEGER DEFAULT 0,
    deleted INTEGER DEFAULT 0,
    deletedAt TEXT,
    createdAt TEXT DEFAULT (datetime('now')),
    FOREIGN KEY (groupId) REFERENCES groups(id)
  );

  CREATE TABLE IF NOT EXISTS details (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    todoId INTEGER NOT NULL,
    content TEXT NOT NULL,
    createdAt TEXT DEFAULT (datetime('now')),
    updatedAt TEXT DEFAULT (datetime('now')),
    FOREIGN KEY (todoId) REFERENCES todos(id) ON DELETE CASCADE
  );
`);

// Migration: add pinned column if missing
try {
  db.prepare("SELECT pinned FROM todos LIMIT 1").get();
} catch {
  db.exec("ALTER TABLE todos ADD COLUMN pinned INTEGER DEFAULT 0");
}

module.exports = db;

server/routes/todos.js

정렬: ORDER BY t.pinned DESC, t.createdAt DESC PATCH 허용 필드: title, groupId, completed, favorited, pinned

전체 코드는 references/server-todos.js를 참조. 핵심 포인트:

• GET / : tab(all/active/completed/favorited/trash), groupId, search 쿼리
• POST / : 투두 생성 (groupId 기본값 1)
• PATCH /:id : 부분 업데이트
• DELETE /:id : 소프트 딜리트 (deleted=1, deletedAt=now)
• PATCH /:id/restore : 복구 (그룹 존재 확인 → 없으면 groupId=1)
• DELETE /:id/permanent : 영구 삭제
• DELETE /trash/all : 휴지통 전체 영구 삭제
• POST /purge : 7일 경과 항목 물리 삭제

server/routes/details.js

• GET /todos/:todoId/details : 상세항목 목록 (createdAt ASC)
• POST /todos/:todoId/details : 상세항목 추가
• PATCH /details/:id : 상세항목 수정 (updatedAt 자동 갱신)
• DELETE /details/:id : 상세항목 삭제

server/routes/groups.js

• GET / : 그룹 목록 (id ASC)
• POST / : 그룹 생성
• PATCH /:id : 그룹 수정 (id=1 불가)
• DELETE /:id : 그룹 삭제 (id=1 불가, 소속 투두 → groupId=1)

server/routes/backup.js

• GET /export : 전체 데이터 JSON
• POST /import : 트랜잭션으로 전체 교체. pinned 포함, groupId null → 1 대체

const insertTodo = db.prepare('INSERT INTO todos (id, title, groupId, completed, favorited, pinned, deleted, deletedAt, createdAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)');
for (const t of todos) {
  insertTodo.run(t.id, t.title, t.groupId || 1, t.completed, t.favorited, t.pinned || 0, t.deleted, t.deletedAt, t.createdAt);
}

클라이언트 코드

client/package.json

{
  "name": "todo-client",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "vite": "^6.0.0"
  }
}

client/vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
    },
  },
});

client/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: { extend: {} },
  plugins: [],
};

client/postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

client/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

client/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

body {
  @apply bg-gray-50 text-gray-900;
}

client/src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

UI 핵심 구현 사항

App.jsx

• 상태: tab, groupId, search, debouncedSearch, showGroupModal, showBackupModal, showClearTrashConfirm
• 그룹 필터 select + 검색 input을 같은 줄에 배치 (select 앞, input 뒤)
• 휴지통 탭에서는 그룹필터+검색 행 전체 숨김 (!isTrash &&)
• TodoForm은 !isTrash &&일 때만 표시
• 전체 그룹일 때 그룹별 섹션 구분 — useMemo로 groups 기반 Map 생성, 미지정(id=1) 포함
• 전체 영구 삭제 버튼에 ConfirmModal 사용
• renderTodoCard에 searchTerm={debouncedSearch} 전달

TodoForm.jsx — 모달 방식

• 점선 테두리 "+ 새 투두 추가" 버튼 → 클릭 시 모달 열림
• 모달: 제목 input + 그룹 select + 취소/추가 버튼

TodoCard.jsx

일반 카드:

• items-start 정렬, lineHeight: '20px'
• 체크박스: paddingTop: '3px' wrapper
• 즐겨찾기 ★: text-base leading-5
• 제목: text-sm leading-5, 클릭 시 인라인 편집, linkify(title, searchTerm)
• 그룹 라벨: 클릭 시 드롭다운 (groups 목록만, 하드코딩 미지정 없음)
• 상세항목추가/삭제/고정 아이콘: w-3.5 h-3.5, paddingTop: '3px'
• 고정: 북마크 아이콘, pinned 시 text-orange-400 + fill
• 삭제: ConfirmModal 사용 (메시지: "삭제하시겠습니까?")
• 카드 호버: [&:has(.todo-title-row:hover)]:bg-blue-50 [&:has(.todo-title-row:hover)]:border-blue-200
• 완료 카드: bg-gray-50 border-gray-100 (미완료: bg-white border-gray-200)
• 제목행 클릭으로 상세항목 토글 (버튼/input/textarea/a/[data-no-card-click] 제외)
• overflow-hidden 카드에 적용

휴지통 카드:

• 제목 + 삭제일 + 복구/영구삭제 버튼
• 버튼: min-w-[40px]/min-w-[70px] + whitespace-nowrap + shrink-0
• 복구/영구삭제 모두 ConfirmModal 사용

DetailList.jsx

• isOpen/addingMode를 부모(TodoCard)로부터 받아 동기화
• textarea로 추가 (자동 높이 조절)
• {navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl'}+Enter로 저장 안내

DetailItem.jsx

• 번호 표시: {index + 1}.
• 항목 간 점선 구분: border-t border-dashed border-gray-200 (index > 0)
• 편집: textarea (자동 높이 조절, Cmd/Ctrl+Enter 저장, Esc 취소)
• 삭제: ConfirmModal ("이 상세항목을 삭제하시겠습니까?")
• 검색어 하이라이트: linkify(content, searchTerm)

ConfirmModal.jsx

• Enter → 확인, Esc → 취소 (useEffect keydown 리스너)
• 메시지는 질문만 (내용 포함하지 않음)

GroupModal.jsx

• 그룹 목록 + 수정/삭제 (id=1은 "기본" 표시, 수정/삭제 불가)
• 삭제 시 ConfirmModal ("그룹을 삭제하시겠습니까?")

linkify.js

• URL → <a> 태그 변환
• searchTerm → <mark class="bg-yellow-200 rounded px-0.5"> 하이라이트 (HTML 태그 내부 건너뜀)

API (client/src/api/index.js)

모든 API 호출 함수: getTodos, createTodo, updateTodo, deleteTodo, restoreTodo, permanentDeleteTodo, emptyTrash, purgeTodos, getDetails, createDetail, updateDetail, deleteDetail, getGroups, createGroup, updateGroup, deleteGroup, exportBackup, importBackup

Hooks

• useTodos: fetchTodos, addTodo, toggleComplete, toggleFavorite, togglePin, editTitle, changeGroup, removeTodo, restore, permanentDelete, clearTrash
• useGroups: fetchGroups, addGroup, editGroup, removeGroup
• useDetails: fetchDetails, toggle, addDetail, editDetail, removeDetail (+ open, loaded 상태)

UI 언어

모든 UI 텍스트는 한국어로 작성한다.