Repository navigation
FrontEnd‐Components
본 프로젝트의 컴포넌트는 기능(Core)과 표현(UI)을 분리한 구조로 설계된다.
하나의 컴포넌트는 항상 Core + UI 조합으로 구성되며,
Core는 동일하게 유지한 채 여러 UI 구현체와 결합하여 사용할 수 있다.
- 비즈니스 로직과 UI의 명확한 분리
- Core 재사용성을 높이고 UI 변경에 대한 영향 최소화
- 동일한 기능을 서로 다른 UI 스타일로 확장 가능
- core
- 컴포넌트의 핵심 기능과 비즈니스 로직을 담당
- UI와 무관한 순수 로직
- 클래스 기반으로 구현
- ui
- 사용자에게 보여지는 인터페이스
- core를 의존하여 동작
ToDo 컴포넌트는 할 일 관리 기능을 제공하는 독립적인 컴포넌트이다.
Todo 클래스는 ToDo 컴포넌트의 코어 베이스 클래스이다. 모든 ToDo 관련 동작은 이 클래스의 메서드를 통해 수행된다.
- 데이터 조작에 대한 단일 진입점
- UI 또는 외부 로직은 Todo 클래스의 메서드만 호출
- 파생 기능은 기존 CRUD 메서드를 조합하여 구현
Todo 클래스는 다음과 같은 기본 CRUD 메서드를 가진다.
| Method | Description |
|---|---|
| create() | 새로운 Todo 생성 |
| read() | Todo 조회 |
| update() | Todo 정보 수정 |
| delete() | Todo 삭제 |
Core CRUD를 기반으로 자주 사용하는 확장 함수들을 제작한다.
update()
├─ changeState() 상태만 변경
├─ toggleDone() 완료 ↔ 대기 토글 (changeState 조합)
└─ changeDeadline() 마감일만 변경 (null 전달 시 마감일 제거)
create()
└─ addChild() 현재 Todo를 부모로 하는 하위 Todo 생성
update()는 인스턴스에 값이 채워진 필드만 모아 부분 업데이트하기 때문에, 마감일처럼 "지우는" 동작은
의도를 구분할 수 없다. 그래서 changeDeadline() 같은 파생 함수는 payload를 직접 조립해 호출한다.
Todo 인스턴스 메서드는 아니지만, 여러 UI가 공통으로 참조하는 순수 함수와 상태 테이블도 _core가
단일 출처로 제공한다 — 상태별 라벨·색이나 정렬 기준이 UI마다 제각각 정의되지 않도록 하기 위함이다.
| Function | Description |
|---|---|
TODO_STATE_META |
상태별 라벨 · 색상 테이블 (배지 · 점 · 보더 등에서 공통 참조) |
getDeadlineMeta() |
마감일 → 남은 일수 · D-day 라벨 · 색상 톤(D-2, D-DAY, D+3 등) |
getChildrenProgress() |
하위 Todo 완료 비율 (진행률 바에서 사용) |
filterTodos() / sortTodos()
|
상태 필터링, 미완료 우선 + 마감 임박 순 정렬 |
getUpcomingTodos() / getUpcomingSidebarItems()
|
마감 임박 할일 추출 (하위 작업 포함, 사이드바용) |
getTodoStats() |
전체 · 완료 · 긴급 건수 집계 |
같은 Core에 밀도·형태만 다른 여러 UI를 붙여, "Core는 유지하고 UI만 확장"하는 구조를 그대로 보여준다.
| UI | Description |
|---|---|
TodoUI |
가장 단순한 한 줄 표현 |
TodoCardUI |
메인 목록의 카드형 (상태 체크박스 · 진행률 바 · 마감 배지 포함) |
TodoBriefUI |
사이드바 '마감 임박 순'용 축약 요약 (하위 작업이면 상위 제목도 함께 표시) |
TodoProgressUI |
하위 Todo 진행률 바 |
TodoStateBadgeUI |
상태 배지/점 (TODO_STATE_META 단일 출처 참조) |
TodoDeadlineBadgeUI |
D-day 배지 (getDeadlineMeta() 색상 톤 반영) |
할일 상세 보기/수정을 담당하는 컴포넌트. 하위 작업을 클릭하면 같은 모달이 그 하위 작업 데이터로 전환되고, 뒤로가기를 누르면 바로 위 작업으로 돌아간다 — depth 제한 없이 계속 파고들 수 있다.
useTodoDetail(rootId)가 모달의 상태/행위를 전부 들고 있는 컨트롤러를 반환한다.
- 현재 보고 있는 Todo id를 스택으로 관리한다. 하위 작업 진입은 push, 뒤로가기는 pop — 스택 깊이가 곧 depth이므로 중첩 횟수에 제한이 없다.
- 상세 조회 · 상태 변경 · 내용 저장 · 마감일 변경 · 하위 작업 추가/삭제는 모두
ToDo코어의 메서드를 그대로 호출한다. 모달은 별도 쓰기 로직을 갖지 않는다.
-
TodoModalUI— 상세/수정 모달 본체 -
TodoDeadlineFieldUI— 평소엔 배지처럼 보이다 클릭하면 날짜 입력으로 바뀌는 마감일 필드
새 할일을 생성하는 컴포넌트.
useTodoForm({ parentId })가 폼 값 · 검증 · 저장을 담당한다. parentId를 넘기면 하위 작업으로,
생략하면 최상위 작업으로 생성된다 — 모달 폼과 한 줄 추가 UI가 같은 코어를 공유한다.
-
TodoFormModalUI— 상태 · 마감일까지 입력하는 생성 모달 -
TodoQuickAddUI— 제목만 입력받는 한 줄 추가 UI
비회원은 할일을 브라우저 localStorage에 저장하고, 로그인하면 계정(DB)으로 마이그레이션할 수 있다.
ToDo 코어와 UI는 로그인 여부를 직접 신경 쓰지 않고 todoGateway 한 곳만 바라본다.
-
todoGateway— 로그인 여부에 따라 DB 구현(lib/api/todo)과 localStorage 구현 (lib/storage/localTodo)을 동일한 함수 시그니처로 감싸 위임하는 게이트웨이 -
useSyncLocalTodos— 로컬 할일을/api/todo/sync로 전송해 계정으로 옮기는 공통 훅 -
SyncModal— 사이드바에서 수동으로 동기화를 트리거하는 확인 모달 -
PostLoginSyncPrompt— 로그인 직후 기기에 남은 할일이 있으면 자동으로 띄우는 동기화 제안