v0.0.4

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.3`
+- 현재 기준 버전: `v0.0.4`
 
 ## 기준 디자인
 
@@ -27,6 +27,7 @@
 - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다.
 - TASKS 체크박스는 토글 가능하며, 체크 상태는 바로 시각적으로 반영된다.
 - `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다.
+- `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
 
 ## 확정된 결정사항
@@ -40,6 +41,7 @@
 - `COMMENT`, `TASKS`, `MEMO`는 모두 입력 가능한 필드가 되어야 한다.
 - `TOTAL TIME`은 타임테이블 선택 상태를 기반으로 자동 계산되어야 한다.
 - 타임테이블은 마우스 드래그로 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 해석해야 한다.
+- 타임테이블 편집은 좌클릭 드래그로 칠하기, 우클릭 드래그로 지우기 방식이 더 자연스럽다.
 - 달력에는 연/월 이동 기능이 필요하다.
 - 내용이 저장된 날짜에는 달력에 빨간 점 표시가 필요하다.
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.0.3",
+      "version": "0.0.4",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/PlannerPage.vue

@@ -62,11 +62,17 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
   return nextTimetable
 }
 
-function startTimetableDrag(index) {
+function startTimetableDrag(index, event) {
+  if (event.button !== 0 && event.button !== 2) {
+    return
+  }
+
+  const shouldFill = event.button === 2 ? false : !props.timetable[index]
+
   dragState = {
     startIndex: index,
     baseTimetable: [...props.timetable],
-    nextValue: !props.timetable[index],
+    nextValue: shouldFill,
   }
 
   emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
@@ -204,7 +210,8 @@ onBeforeUnmount(() => {
               :key="quarter"
               :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
               class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
-              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1)"
+              @contextmenu.prevent
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
               @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>