diff --git a/AGENTS.md b/AGENTS.md index df3d7fa..6a8c2c0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,37 +1,38 @@ -# Codex Working Rules +# Codex 작업 규칙 -This file defines repo-specific rules that CODEX AI and future helpers should follow. +이 문서는 이 저장소에서 CODEX AI와 이후 작업자가 따라야 할 프로젝트 전용 규칙을 정리한다. -## Product Rules +## 제품 규칙 -- Preserve the planner identity as a `10-minute planner diary`. -- Keep the default primary experience as `1 page + right-side information panel`. -- Keep `2 page spread` mode available unless the user explicitly removes it. -- Prefer calm paper-like layouts over generic dashboard styling. +- 이 프로젝트의 핵심 정체성은 `10분 플래너 다이어리`다. +- 기본 사용 흐름은 `1페이지 + 우측 정보 패널`을 유지한다. +- `2페이지 펼침 보기`는 사용자가 명시적으로 제거하라고 하기 전까지 유지한다. +- 일반적인 대시보드 느낌보다 차분한 종이 다이어리 인상을 우선한다. -## Technical Rules +## 기술 규칙 -- Use Vue for implementation. -- Use TailwindCSS for styling. -- Prefer reusable Vue components over large monolithic templates. -- Keep mock data easy to replace with real data sources later. -- Preserve responsive behavior for desktop and mobile. +- 구현은 Vue를 사용한다. +- 스타일링은 TailwindCSS를 사용한다. +- 큰 템플릿 하나보다 재사용 가능한 Vue 컴포넌트 구조를 우선한다. +- 현재 목업 데이터는 나중에 실제 데이터 소스로 교체하기 쉽게 유지한다. +- 타입스크립트는 사용하지 않고, Vue + JavaScript 기준으로 유지한다. +- 데스크톱과 모바일 모두에서 레이아웃이 무너지지 않도록 반응형 동작을 유지한다. -## Workflow Rules +## 작업 규칙 -- Use local Git versioning continuously during development. -- Record meaningful product or technical notes in `HANDOFF.md`. -- Do not remove user-authored notes from `HANDOFF.md` unless they are outdated and replaced. -- When a major change is made, update both code and handoff context together. +- 개발 중에는 로컬 Git 버전 관리를 계속 유지한다. +- 중요한 제품/기술 메모는 `HANDOFF.md`에 기록한다. +- 구현 대기열과 진행 상황 관리는 `TODO.md`를 기준으로 한다. +- 사용자가 직접 남긴 메모는, 더 최신 정보로 대체되는 경우가 아니면 함부로 삭제하지 않는다. +- 큰 변경이 있을 때는 코드만 바꾸지 말고 인수인계 문서도 함께 갱신한다. -## Commit Rules +## 커밋 규칙 -- Use semantic version style commits starting from `v0.0.1` when the user asks for versioned checkpoints. -- Prefer small, understandable checkpoints over large ambiguous commits. +- 사용자가 버전형 체크포인트를 원할 경우 `v0.0.1` 같은 형식으로 커밋을 남긴다. +- 의미를 알기 어려운 큰 커밋보다, 이해 가능한 작은 단위의 커밋을 선호한다. -## Design Implementation Rules - -- Use the provided Figma files as the visual source of truth. -- Match the overall proportions, line rhythm, and typography feel of the diary layout. -- Add new UI around the planner only when it clearly supports navigation, planning, or review. +## 디자인 구현 규칙 +- 제공된 Figma 파일을 시각적 기준점으로 사용한다. +- 다이어리 레이아웃의 비율감, 선의 리듬, 타이포그래피 분위기를 최대한 유지한다. +- 플래너 주변의 추가 UI는 이동, 계획, 회고에 실제로 도움이 되는 경우에만 늘린다. diff --git a/HANDOFF.md b/HANDOFF.md index a88bca8..508ebf6 100644 --- a/HANDOFF.md +++ b/HANDOFF.md @@ -1,46 +1,53 @@ -# Handoff Notes +# 인수인계 메모 -## Project Summary +## 프로젝트 개요 -- Project: 10 Minute Planner web UI -- Stack: Vue 3 + Vite + TailwindCSS + TypeScript -- Current version baseline: `v0.0.1` +- 프로젝트명: 10 Minute Planner 웹 UI +- 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript +- 현재 기준 버전: `v0.0.2` -## Source Design +## 기준 디자인 -- Figma spread view: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-36&m=dev` -- Figma focus view with side info: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-2472&m=dev` +- Figma 펼침형 보기: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-36&m=dev` +- Figma 집중형 보기 + 사이드 정보: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-2472&m=dev` -## Current Product Direction +## 현재 제품 방향 -- Default UX direction is `1 page + extra information panel`. -- `2 page spread` view is still implemented as an alternate mode for comparison. -- The UI should feel like a paper diary, but interactions should still feel like an app. +- 기본 UX 방향은 `1페이지 + 추가 정보 패널`이다. +- `2페이지 펼침 보기`는 비교용 보조 모드로 함께 유지한다. +- 화면 인상은 종이 다이어리 같아야 하지만, 상호작용은 웹앱처럼 빠르고 자연스러워야 한다. -## Current Implementation +## 현재 구현 상태 -- Main shell: `src/App.vue` -- Planner paper layout: `src/components/PlannerPage.vue` -- Right-side calendar: `src/components/MiniCalendar.vue` -- Tailwind setup is in place and should remain the styling system for this project. +- 메인 화면 셸: `src/App.vue` +- 플래너 종이 레이아웃: `src/components/PlannerPage.vue` +- 우측 달력 컴포넌트: `src/components/MiniCalendar.vue` +- Tailwind 설정은 완료되어 있으며, 이 프로젝트의 스타일링 기준으로 유지한다. +- 현재 선택 날짜는 시스템 날짜 기준으로 시작한다. +- `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다. +- TASKS 체크박스는 토글 가능하지만, `TOTAL TIME`과 타임테이블 계산은 아직 미구현이다. -## Decisions Made +## 확정된 결정사항 -- Vue was chosen over static HTML because the planner needs stateful interactions: - date switching, mode toggling, sidebar summaries, and future data persistence. -- TailwindCSS is the required styling approach even when using Vue. -- The current data is mock data for layout and interaction verification. +- 정적인 HTML보다 Vue가 적합하다. + 날짜 전환, 모드 토글, 사이드 패널 요약, 이후 저장 기능 등 상태 기반 상호작용이 많기 때문이다. +- TailwindCSS는 Vue를 사용하더라도 반드시 유지해야 하는 스타일링 방식이다. +- 현재 데이터는 레이아웃과 상호작용 검증을 위한 목업 데이터다. +- 상단 날짜는 시스템 날짜 또는 현재 선택된 플래너 날짜 기준으로 자동 표시되어야 한다. +- `D-DAY`는 지금은 보류이며, 이후 별도의 목표 관리 패널과 연결해서 계산한다. +- `COMMENT`, `TASKS`, `MEMO`는 모두 입력 가능한 필드가 되어야 한다. +- `TOTAL TIME`은 타임테이블 선택 상태를 기반으로 자동 계산되어야 한다. +- 타임테이블은 마우스 드래그로 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 해석해야 한다. +- 달력에는 연/월 이동 기능이 필요하다. +- 내용이 저장된 날짜에는 달력에 빨간 점 표시가 필요하다. -## Next Recommended Steps +## 다음 권장 작업 -- Connect planner data to persistent storage or local state management. -- Make task checkbox state editable. -- Add timetable interaction for selecting or painting focused time blocks. -- Decide whether the right panel should prioritize calendar, stats, or next-day planning on mobile. -- Add print/export styling if the diary-like output needs physical printing. +- `TODO.md` 기준으로 작은 단위씩 구현을 진행한다. +- 목표나 통계 기능보다 먼저, 플래너 본문의 입력과 상호작용을 우선 구현한다. +- 달력 표시와 통계 기능을 본격화하기 전에 저장 구조를 먼저 정리하는 것이 좋다. -## Update Rule - -- When an important decision, constraint, bug, or workflow change happens, append it here. -- Keep this file concise and practical so the next helper can continue without re-discovery. +## 갱신 규칙 +- 중요한 결정, 제약, 버그, 작업 방식 변경이 생기면 이 문서에 이어서 반영한다. +- 다음 작업자가 다시 탐색하지 않아도 되도록 짧고 실무적으로 유지한다. diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..2838eb0 --- /dev/null +++ b/TODO.md @@ -0,0 +1,53 @@ +# 할 일 목록 + +10 Minute Planner를 단계적으로 구현하기 위한 작업 체크리스트다. + +## 현재 방향 + +- 기본 레이아웃은 `1페이지 + 우측 정보 패널`을 유지한다. +- `2페이지 펼침 보기`는 비교용 보조 모드로 유지한다. +- 스타일은 Vue + TailwindCSS 기준으로 구현한다. +- D-DAY는 목표 관리 패널과 연결되는 기능으로 추후 구현한다. + +## 1단계: 플래너 핵심 상호작용 + +- [x] 상단 날짜를 시스템 날짜 기준으로 자동 표시한다. +- [x] `COMMENT`를 자유 입력 가능한 입력 필드로 바꾼다. +- [x] `TASKS` 각 줄을 텍스트 입력 + 체크박스 토글 가능하게 만든다. +- [x] `MEMO` 각 줄을 텍스트 입력 가능하게 만든다. +- [ ] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다. +- [ ] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다. +- [ ] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다. + +## 2단계: 달력과 이동 기능 + +- [ ] 달력에 연/월 이동 기능을 추가한다. +- [ ] 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다. +- [ ] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다. +- [ ] `PREV DAY` / `NEXT DAY` 이동 시 현재 편집 중 데이터와 연결되도록 정리한다. + +## 3단계: 목표와 회고 기능 + +- [ ] 목표 관리 패널을 설계한다. +- [ ] 선택한 목표 기준으로 `D-DAY`가 자동 계산되게 한다. +- [ ] 우측 요약 패널의 `PREV SNAPSHOT`, `READ NEXT`를 실제 데이터 기반으로 연결한다. +- [ ] 다음날 할 일 자동 제안 규칙을 정리한다. + +## 4단계: 데이터 구조와 저장 + +- [ ] 플래너 데이터 구조를 날짜별 상태 중심으로 정리한다. +- [ ] 입력 데이터의 저장 위치를 결정한다. +- [ ] 로컬 저장 또는 외부 저장 방식 중 우선 구현 방식을 정한다. +- [ ] 입력 상태가 새로고침 후에도 유지되도록 만든다. + +## 5단계: 확장 화면 + +- [ ] 통계 페이지 요구사항을 정리한다. +- [ ] 통계 페이지 라우팅 또는 화면 전환 구조를 설계한다. +- [ ] 집중 시간, 완료율, 연속 기록 같은 핵심 지표를 정의한다. + +## 메모 + +- D-DAY는 현재 보류 상태다. 목표 패널 설계 후 연결한다. +- `TIME TABLE` 드래그는 단순 사각형 선택이 아니라 시간 셀 단위의 연속 선택으로 해석한다. +- 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다. diff --git a/index.html b/index.html index a018eee..2e0d268 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@
- +