Skip to content

feat(kanban): 칸반보드 UI 개선 - #50

Merged
lnu8926-web merged 7 commits into
mainfrom
feat/kanban-ui-improvement
May 12, 2026
Merged

feat(kanban): 칸반보드 UI 개선#50
lnu8926-web merged 7 commits into
mainfrom
feat/kanban-ui-improvement

Conversation

@lnu8926-web

@lnu8926-web lnu8926-web commented May 12, 2026

Copy link
Copy Markdown
Owner

Summary

  • console.log 제거 — 프로덕션 노출 차단
  • KanbanHeader 틸 배경 제거, 앱 전체 스타일과 통일
  • 디자인 시스템 토큰 전면 적용 (bg-card, border-border, text-foreground)
  • TaskCard 아코디언 제거 → 마감일 항상 표시, 서브태스크 진행률 바 추가
  • KanbanColumn 드롭 시 "여기에 놓기" 레이아웃 밀림 제거

Test plan

  • 칸반보드 진입 시 콘솔 로그 없는지 확인
  • 헤더 배경이 bg-card(흰/다크)로 표시되는지 확인
  • 라이트/다크 모드 모두 컬럼/카드 색상 정상 확인
  • TaskCard 마감일 항상 노출, 서브태스크 있을 때 진행률 바 표시 확인
  • 드래그 앤 드롭 시 컬럼 하이라이트만 표시되고 레이아웃 밀림 없는지 확인

Closes #45
Closes #46
Closes #47
Closes #48
Closes #49

🤖 Generated with Claude Code

- console.log 제거 (#46)
- KanbanHeader: 틸 배경 → bg-card, SVG → lucide-react 아이콘 (#49)
- KanbanColumn: 디자인 토큰 적용, '여기에 놓기' 레이아웃 밀림 제거 (#47)
- KanbanBoard: 컨테이너 디자인 토큰 적용 (#48)
- TaskCard: 아코디언 제거, 항상 마감일 표시, 서브태스크 진행률 바 추가, 디자인 토큰 적용 (#45, #48)

Closes #45
Closes #46
Closes #47
Closes #48
Closes #49

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
next_taskry Error Error May 12, 2026 6:18am

- 헤더: bg-main-500/5 (연한 틸 tint)
- 컬럼 영역: bg-muted/40 (회색 배경)
- 컬럼: bg-card (흰색, 회색 위에서 부각)
- 컬럼 헤더: bg-muted/40 (컬럼 본문과 구분)
- 카드: shadow-sm 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
lnu8926-web and others added 5 commits May 12, 2026 14:06
- 전체 컨테이너 rounded-[12px] 및 shadow 수치 스펙 적용
- 컬럼 영역 배경 #F0F4F5, padding/gap 16px 통일
- 컬럼 헤더 배경 #F0F4F5, 상태 dot 6px, 상태명 14px 고정
- 드래그 하이라이트 ring 색상 스펙 정확히 반영 (main-500 / emerald-500)
- TaskCard shadow 0 1px 3px rgba(0,0,0,0.08)
- 상태 컬러 gray-500 / blue-500 / emerald-500 로 정비
- KanbanHeader min-h-[60px], 프로젝트명 text-lg 고정

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
closes #57, #62, #63

- [#57] 컬럼 하단 "+ 작업 추가" 버튼 추가, 클릭 시 해당 컬럼 상태가
  기본 선택된 채로 모달 열림 (TaskAdd initialStatus prop 추가)
- [#62] 카드 제목 더블클릭 → textarea 인라인 편집, Enter 저장 / Esc 취소,
  편집 중 드래그 비활성화
- [#63] 태스크 상세를 풀 모달 → 우측 SidePanel로 교체,
  보드를 유지한 채 상세 확인·편집 가능 (Notion Side Peek 방식)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
closes #51, #52, #53, #54, #55, #56

- [#51][#52] KanbanLegend 상태 dot gray-500/blue-500/emerald-500 통일,
  배경·보더·텍스트·진행률 바를 design token(bg-muted, border-border 등)으로 교체
- [#53] Legend 우선순위 범례를 텍스트 ▲에서 PriorityBadge 컴포넌트로 교체
- [#52] KanbanFilter 배경·보더·텍스트·버튼을 design token으로 통일
- [#54] 필터 패널 토글 시 animate-in slide-in-from-top-2 애니메이션 추가
- [#55] 필터 활성 시 헤더 슬라이더 아이콘에 main-500 dot 뱃지 표시
- [#56] 필터 결과 0개일 때 안내 문구 + "초기화" 버튼 노출

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
closes #58, #59, #60, #61

- [#58] 컬럼 헤더 정렬 버튼 — 기본 → 마감일순 → 우선순위순 순환,
  활성 시 main-500 색상으로 표시
- [#59] Done 컬럼 ChevronDown/Right 접기 토글 추가,
  접힌 상태에서 카드 영역 완전히 숨김
- [#60] 헤더 검색 아이콘 클릭 시 인라인 인풋 전환,
  제목 실시간 필터링, Esc로 닫기 + 초기화
- [#61] TaskCard 하단 우측 담당자 아바타(이미지 or 이니셜) 표시

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
closes #64

- 활성 필터가 있을 때 헤더 바로 아래에 "우선순위: 높음 ×" 형태의
  태그 칩 자동 노출 (Notion 방식)
- 칩 × 버튼으로 개별 필터 해제, "전체 초기화" 버튼으로 일괄 해제
- 필터 패널 열고 닫기와 무관하게 항상 표시

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web
lnu8926-web merged commit 4c9a920 into main May 12, 2026
1 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment