🎯 HTML5 기반의 Trello 클론 칸반 보드 앱입니다! 🚫 외부 라이브러리 없이 순수 TypeScript/HTML5/CSS로 동작하며, 💾 모든 데이터는 브라우저의 IndexedDB에 저장되어 작업 이어하기가 가능합니다. 🔄
| 기능 | 설명 |
|---|---|
| 📌 보드 / 리스트 / 카드 | 추가 ➕ · 수정 ✏️ (카드·리스트는 보관 🗄️ 후 복원 가능) |
| 🔍 카드 상세 보기 | 카드를 열어 제목·설명·색상을 편집하고 삭제 (설명이 있으면 📝 배지 표시) |
| 💬 코멘트 | 카드에 코멘트 작성·수정·삭제 (최신순, 카드 앞면에 💬 개수 배지) |
| 📎 첨부파일 / 커버 | 이미지를 base64로 내장 저장 (첫 이미지는 카드 커버, 최대 1.5MB) |
| 📑 카드 복사 / 📤 이동 | 카드 상세에서 카드를 복제하거나 원하는 리스트·위치로 이동 |
| ⋯ 리스트 메뉴 | 카드 정렬(이름·생성일·마감일순) · 리스트 복사 · 카드 모두 이동 · 리스트 보관 (헤더에 카드 수 표시) |
| ☑️ 체크리스트 | 카드당 여러 개의 이름 있는 체크리스트, 항목 추가·완료·재정렬 (진행률 바 + 합산 배지), ☑️ 배지 클릭으로 카드 앞면에서 바로 펼치고 접기 |
| 🏷️ 라벨 | 보드별 색상 라벨을 카드에 지정·해제, 이름·색상 변경·추가·삭제 (카드 앞면에 색 칩 표시) |
| 🕒 시작일 / 마감일 | 시작·마감일시 지정, 완료 표시 (지남🔴·임박🟡·완료🟢, 기간 배지 🕒 시작 ~ 마감) |
| 🎨 보드 배경색 | 보드마다 Trello 스타일 팔레트로 배경색 지정 (PNG 저장에도 반영) |
| 🔎 검색 / 필터 | 키워드 검색 + 라벨·마감 상태로 필터링 (리스트별 일치 카드 수 표시) |
| 📅 달력 보기 | 모든 보드의 시작일🚩·마감일⏰ 카드를 달력 하나에 모아 보기 (월간·주간 전환, 시작일~마감일은 이어진 기간 바로 표시, 지남🔴·완료✅ 구분, 일정 클릭 시 해당 보드로 전환 후 카드 상세 열기, 날짜 클릭으로 새 카드 생성, 일정을 드래그해 날짜 이동·기간 조절, 완료 숨기기 토글(설정 저장)) |
| 🗄️ 보관함(아카이브) | 카드·리스트를 보관 후 복원하거나 영구 삭제 (실수 삭제 방지) |
| 🖱️ 드래그 앤 드롭 | 카드와 리스트를 마우스/터치로 자유롭게 이동 |
| ✍️ 인라인 편집 | 카드·리스트 제목을 클릭하여 바로 수정 |
| ↶↷ 실행 취소 / 다시 실행 | 최대 8단계 되돌리기 · Ctrl/⌘+Z, Ctrl/⌘+Shift+Z(또는 Ctrl+Y) |
| 🎨 카드 색상 | 버튼 하나로 강조 색상 순환 🔴🟡🟢🔵🟣 |
| 📂 여러 보드 관리 | 🆕 생성 · ✏️ 이름 변경 · 📑 복사 · 🗑️ 삭제 · 🔀 전환 · ⭐ 즐겨찾기(맨 앞 정렬) |
| 📋 카드 템플릿 | 카드를 템플릿으로 지정하고, 템플릿에서 새 카드를 한 번에 생성 |
| 📜 활동 로그 | 보드별 최근 활동 50건 기록 (언어 전환 시 과거 기록도 번역 표시) |
| 💾 자동 저장 / 이어하기 | IndexedDB에 자동 저장, 새로고침해도 복원 ♻️ (마지막에 보던 보드 포함) |
| 📤📥 JSON 내보내기 / 가져오기 | 전체 데이터 또는 보드 하나만 JSON으로 백업·복원 |
| 🖋️ 마크다운 설명 | 카드 설명을 마크다운으로 렌더링 (제목·목록·코드·굵게·링크, XSS 안전) |
| 🖼️ PNG 저장 | 현재 보드를 고해상도 이미지로 저장 (Canvas 직접 렌더링) |
| 🔍 확대 / 축소 | 버튼 · Ctrl/⌘ + 마우스 휠 · 📱 두 손가락 핀치 줌 |
| 🌐 다국어 | 🇰🇷 한국어 / 🇺🇸 English 전환 |
| 🌓 다크 모드 | 시스템/라이트/다크 테마 (OS 설정 자동 추적) |
| 📝 여러 카드 추가 | 여러 줄 텍스트를 붙여넣으면 한 줄이 카드 하나로 생성 |
| ⌨️ 키보드 내비게이션 | Tab/화살표로 카드 이동, Enter로 상세 열기 |
| 📱 반응형 | PC 🖥️ · 모바일 📱 · 폴더블 📲 펼침 화면 지원 |
| 🛡️ 손상 복원력 | DB·파일이 손상되어도 기본값으로 복구하여 동작 |
python -m http.server 8001🌐 브라우저에서 http://localhost:8001/index.html 접속!
💡 컴파일된 JS(
js/)가 저장소에 포함되어 있어 별도 빌드 없이 바로 실행됩니다. 🔧 TypeScript 소스를 수정했다면npx tsc로 다시 컴파일하세요.
모든 CSS·JS를 하나의 index.html로 인라인하여 release/ 폴더에 산출합니다.
# 🍎 macOS / 🐧 Linux
./build.sh
# 🪟 Windows
build.bat🎉 산출물 실행:
cd release
python -m http.server 8001npm test # ✅ 단위 테스트 (순수 로직 114개)
npm run smoke # 🎭 브라우저 스모크 테스트 (Playwright)- ✅ 단위 테스트: 외부 프레임워크 없는 자체 하니스 (
test/) - 🎭 스모크 테스트: 렌더링 · 카드/리스트 조작 · 실행 취소 · 언어/테마 전환 · 달력 보기 · 영속성 · 드래그 앤 드롭 · 터치 · 키보드 · 릴리스 번들 부팅까지 검증
📁 src/ 🔤 TypeScript 소스
├─ types.ts 📐 데이터 모델
├─ id.ts 🆔 고유 ID 생성
├─ model.ts ⚙️ 순수 보드 연산 (테스트 대상)
├─ history.ts ↩️ 실행 취소/다시 실행 스택 (테스트 대상)
├─ normalize.ts 🔧 손상/임포트 데이터 정규화
├─ store.ts 💾 IndexedDB + localStorage 폴백 저장소
├─ i18n.ts 🌐 한/영 다국어
├─ modal.ts 🪟 커스텀 모달 다이얼로그
├─ calendar.ts 📅 전체 보드 달력 보기 (테스트 대상)
├─ render.ts 🖥️ DOM 렌더링
├─ dnd.ts 🖱️ 드래그 앤 드롭
├─ zoom.ts 🔍 핀치/휠/버튼 줌
├─ png.ts 🖼️ Canvas PNG 내보내기
├─ jsonio.ts 📤 JSON 가져오기/내보내기
├─ app.ts 🎮 앱 컨트롤러
└─ main.ts 🚪 진입점
📁 js/ 📦 tsc 컴파일 산출물 (브라우저 실행용)
📁 test/ 🧪 단위 + 스모크 테스트
📁 tools/ 🔨 단일 파일 번들러
📄 index.html 🏠 앱 진입 HTML
📄 styles.css 🎨 스타일 (브라우저 기본 폰트만 사용)
| 항목 | 내용 |
|---|---|
| 🔤 언어 | TypeScript (런타임 의존성 0️⃣) |
| 💾 저장 | IndexedDB (localStorage · 메모리 폴백) |
| 🖥️ 렌더링 | 표준 DOM API, Canvas 2D |
| ✏️ 폰트 | 브라우저 기본 폰트만 사용 |
| 📦 빌드 | 외부 의존성 없는 자체 번들러 |
🖥️ PC · 📱 모바일 · 📲 폴더블 — 어디서든 동작합니다!
🆓 MIT
⭐ 즐거운 칸반 보드 사용 되세요! 🎉🚀