diff --git a/HANDOFF.md b/HANDOFF.md index e0f5eaa..05026fd 100644 --- a/HANDOFF.md +++ b/HANDOFF.md @@ -4,7 +4,7 @@ - 프로젝트명: 10 Minute Planner 웹 UI - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript -- 현재 기준 버전: `v0.0.5` +- 현재 기준 버전: `v0.0.6` ## 기준 디자인 @@ -25,11 +25,13 @@ - Tailwind 설정은 완료되어 있으며, 이 프로젝트의 스타일링 기준으로 유지한다. - 현재 선택 날짜는 시스템 날짜 기준으로 시작한다. - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다. +- TASKS 왼쪽 라벨은 순번 고정이 아니라 자유 입력 가능하다. - TASKS 체크박스는 토글 가능하며, 체크 상태는 바로 시각적으로 반영된다. - `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다. - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다. - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다. - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다. +- 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다. - 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다. ## 확정된 결정사항 @@ -41,6 +43,8 @@ - 상단 날짜는 시스템 날짜 또는 현재 선택된 플래너 날짜 기준으로 자동 표시되어야 한다. - `D-DAY`는 지금은 보류이며, 이후 별도의 목표 관리 패널과 연결해서 계산한다. - `COMMENT`, `TASKS`, `MEMO`는 모두 입력 가능한 필드가 되어야 한다. +- TASKS 라벨은 번호만 고정하지 말고 자유 입력이 가능해야 한다. +- 번호 사용이 필요한 경우를 위해 우측 패널에서 TASKS 라벨을 순번으로 한 번에 채울 수 있어야 한다. - `TOTAL TIME`은 타임테이블 선택 상태를 기반으로 자동 계산되어야 한다. - 타임테이블은 마우스 드래그로 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 해석해야 한다. - 타임테이블 편집은 좌클릭 드래그로 칠하기, 우클릭 드래그로 지우기 방식이 더 자연스럽다. diff --git a/TODO.md b/TODO.md index 2b45e42..afb6d38 100644 --- a/TODO.md +++ b/TODO.md @@ -26,6 +26,14 @@ - [x] 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다. - [ ] `PREV DAY` / `NEXT DAY` 이동 시 현재 편집 중 데이터와 연결되도록 정리한다. +## 추가 반영 메모 + +- [x] TASKS 왼쪽 라벨은 자유 입력 가능해야 한다. +- [x] 우측 패널에서 TASKS 번호를 한 번에 채우는 빠른 액션이 있어야 한다. +- [x] 달력 상단은 좌우 화살표로 월 이동하는 구조가 더 적합하다. +- [x] 연도 클릭 시 연도 선택 UI가 열려야 한다. +- [x] 오늘 날짜로 즉시 돌아가는 버튼이 필요하다. + ## 3단계: 목표와 회고 기능 - [ ] 목표 관리 패널을 설계한다. diff --git a/package-lock.json b/package-lock.json index b0706a4..76329ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ten-minute-planner", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ten-minute-planner", - "version": "0.0.5", + "version": "0.0.6", "dependencies": { "vue": "^3.5.13" }, diff --git a/package.json b/package.json index 4dde499..3c24546 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ten-minute-planner", "private": true, - "version": "0.0.5", + "version": "0.0.6", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.vue b/src/App.vue index 695a20c..aa01664 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,6 +20,10 @@ function createEmptyTimetable() { return Array.from({ length: timetableCellCount }, () => false) } +function createTaskLabel(index) { + return `${index + 1}`.padStart(2, '0') +} + function createTimetableFromRanges(ranges) { const timetable = createEmptyTimetable() @@ -37,21 +41,21 @@ const plannerSeed = { dday: 'D-12 LAUNCH', comment: '집중 작업 3개만 남기고, 10분 단위로 흐름을 끊지 않기.', tasks: [ - { id: '01', title: '홈 화면 정보 구조 정리', checked: true }, - { id: '02', title: '플래너 페이지 헤더 상태 연결', checked: true }, - { id: '03', title: '타임테이블 액티브 블록 설계' }, - { id: '04', title: '우측 캘린더 빠른 이동 구현' }, - { id: '05', title: '전날 요약 영역 문구 다듬기' }, - { id: '06', title: '다음날 할 일 자동 제안 시나리오' }, - { id: '07', title: '통계 카드 레이아웃 정리' }, - { id: '08', title: '모바일 스택 레이아웃 점검' }, - { id: '09', title: '체크박스 인터랙션 연결' }, - { id: '10', title: '페이지 넘김 애니메이션 방향 검토' }, - { id: '11', title: 'Tailwind 토큰 정리' }, - { id: '12', title: 'Vue 컴포넌트 분리 기준 정하기' }, - { id: '13', title: '빈 상태 문구 작성' }, - { id: '14', title: '주간 리듬 회고 메모 추가' }, - { id: '15', title: '디자인 QA 체크리스트 정리' }, + { label: '01', title: '홈 화면 정보 구조 정리', checked: true }, + { label: '02', title: '플래너 페이지 헤더 상태 연결', checked: true }, + { label: '03', title: '타임테이블 액티브 블록 설계' }, + { label: '04', title: '우측 캘린더 빠른 이동 구현' }, + { label: '05', title: '전날 요약 영역 문구 다듬기' }, + { label: '06', title: '다음날 할 일 자동 제안 시나리오' }, + { label: '07', title: '통계 카드 레이아웃 정리' }, + { label: '08', title: '모바일 스택 레이아웃 점검' }, + { label: '09', title: '체크박스 인터랙션 연결' }, + { label: '10', title: '페이지 넘김 애니메이션 방향 검토' }, + { label: '11', title: 'Tailwind 토큰 정리' }, + { label: '12', title: 'Vue 컴포넌트 분리 기준 정하기' }, + { label: '13', title: '빈 상태 문구 작성' }, + { label: '14', title: '주간 리듬 회고 메모 추가' }, + { label: '15', title: '디자인 QA 체크리스트 정리' }, ], memo: [ '오른쪽 패널은 정보 확인과 이동이 한 번에 되도록 유지.', @@ -78,21 +82,21 @@ const plannerSeed = { dday: 'D-11 LAUNCH', comment: '초반 90분은 구현, 후반은 문장과 사용성 정리에 사용.', tasks: [ - { id: '01', title: '통계 섹션 수치 실제 계산 연결', checked: true }, - { id: '02', title: '날짜 선택 시 상태 동기화' }, - { id: '03', title: '다음날 할 일 템플릿 개선' }, - { id: '04', title: '2페이지 보기 비교 카피 작성' }, - { id: '05', title: '주간 흐름 카드 추가' }, - { id: '06', title: '메모 영역 편집 UX 개선' }, - { id: '07', title: '프린트 스타일 초안 점검' }, - { id: '08', title: '색 대비 보정' }, - { id: '09', title: '우측 패널 축약 버전 검토' }, - { id: '10', title: '마감용 체크리스트 분리' }, - { id: '11', title: '키보드 탐색 흐름 다듬기' }, - { id: '12', title: '데이터 구조 문서화' }, - { id: '13', title: '테스트 날짜 더미 세트 늘리기' }, - { id: '14', title: '브랜드 푸터 위치 확정' }, - { id: '15', title: '빈 상태 일러스트 여부 결정' }, + { label: '01', title: '통계 섹션 수치 실제 계산 연결', checked: true }, + { label: '02', title: '날짜 선택 시 상태 동기화' }, + { label: '03', title: '다음날 할 일 템플릿 개선' }, + { label: '04', title: '2페이지 보기 비교 카피 작성' }, + { label: '05', title: '주간 흐름 카드 추가' }, + { label: '06', title: '메모 영역 편집 UX 개선' }, + { label: '07', title: '프린트 스타일 초안 점검' }, + { label: '08', title: '색 대비 보정' }, + { label: '09', title: '우측 패널 축약 버전 검토' }, + { label: '10', title: '마감용 체크리스트 분리' }, + { label: '11', title: '키보드 탐색 흐름 다듬기' }, + { label: '12', title: '데이터 구조 문서화' }, + { label: '13', title: '테스트 날짜 더미 세트 늘리기' }, + { label: '14', title: '브랜드 푸터 위치 확정' }, + { label: '15', title: '빈 상태 일러스트 여부 결정' }, ], memo: [ '한 화면에 모든 정보를 모으되 시선 이동은 짧게.', @@ -136,7 +140,7 @@ function buildFallbackRecord(date) { dday: 'D-00 FOCUS', comment: '', tasks: Array.from({ length: 15 }, (_, index) => ({ - id: `${index + 1}`.padStart(2, '0'), + label: createTaskLabel(index), title: '', checked: false, })), @@ -150,6 +154,11 @@ function buildFallbackRecord(date) { function normalizeRecord(record) { return { ...record, + tasks: record.tasks.map((task, index) => ({ + label: task.label ?? task.id ?? createTaskLabel(index), + title: task.title ?? '', + checked: Boolean(task.checked), + })), timetable: Array.isArray(record.timetable) && record.timetable.length === timetableCellCount ? [...record.timetable] : createEmptyTimetable(), @@ -252,6 +261,10 @@ function updateComment(record, value) { record.comment = value } +function updateTaskLabel(record, { index, value }) { + record.tasks[index].label = value +} + function updateTaskTitle(record, { index, value }) { record.tasks[index].title = value } @@ -276,6 +289,18 @@ function hasPlannerContent(record) { record.timetable.some(Boolean), ) } + +function fillTaskLabelsWithNumbers(record) { + record.tasks.forEach((task, index) => { + task.label = createTaskLabel(index) + }) +} + +function clearTaskLabels(record) { + record.tasks.forEach((task) => { + task.label = '' + }) +}