v0.1.54 - 통계 그래프 반응형 폭 조정

2026-04-23 15:55:09 +09:00
parent e9839d85e2
commit cb309cf0fa
3 changed files with 135 additions and 11 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -218,6 +218,7 @@
 - READ NEXT는 내일 첫 작업과 오늘 미처리 할 일 개수만 보여주도록 줄였고, 오늘 코멘트 반복 노출은 제거했다.
 - 플래너 본문 시간 라벨은 `총 시간`에서 `FOCUSED TIME`으로 바꿨다. 인쇄 CSS에서 COMMENT/FOCUSED TIME 라벨이 잘리지 않도록 부모 overflow를 열고, COMMENT는 남는 폭을 채우며 FOCUSED TIME은 오른쪽 210px 칸에 붙도록 조정했다.
 - Docker 배포용 루트 `.env`와 개발용 `.env.dev`를 분리했다. `docker-compose.yml`은 운영 `.env`, `docker-compose.dev.yml`은 기존 dev Postgres 볼륨과 맞는 `.env.dev`를 읽는다.
+- STATS의 `RANGE FLOW`는 항목 수에 따라 막대 폭과 간격을 조정한다. 1주일 내외는 넓은 막대로 카드 폭을 채우고, 1달 내외는 좁은 막대와 요약 라벨로 한 화면에서 흐름을 보며, 세부 날짜와 집중 시간은 막대 hover 팝업으로 확인한다.
 - `5173` 포트가 직접 `npm run dev` 없이 열려 있으면 대부분 `ten-minute-frontend-dev` 컨테이너가 떠 있는 상태다. 개발용 Docker를 끄려면 `docker compose -f docker-compose.dev.yml down`을 사용한다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
--- a/src/App.vue
+++ b/src/App.vue
@@ -976,6 +976,8 @@ const weeklyRecords = computed(() => {
    const date = toDateValue(key)
    const weekdayShort = ['일', '월', '화', '수', '목', '금', '토'][date.getDay()]
    const focusedMinutes = getFocusedMinutes(record)
+    const activeTasks = record.tasks.filter((task) => task.title.trim())
+    const doneTasks = activeTasks.filter((task) => task.checked)

    return {
      key,
@@ -983,6 +985,8 @@ const weeklyRecords = computed(() => {
      dateLabel: `${`${date.getMonth() + 1}`.padStart(2, '0')}.${`${date.getDate()}`.padStart(2, '0')}`,
      focusedMinutes,
      focusedTime: formatMinutesKorean(focusedMinutes),
+      completedTasks: doneTasks.length,
+      totalTasks: activeTasks.length,
    }
  })

--- a/src/components/StatsDashboard.vue
+++ b/src/components/StatsDashboard.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import GuideTooltip from './GuideTooltip.vue'

-defineProps({
+const props = defineProps({
  overviewCards: {
    type: Array,
    required: true,
@@ -37,6 +37,98 @@ const emit = defineEmits(['update:range-start', 'update:range-end', 'quick-range

 const flowScrollerRef = ref(null)
 const flowDragState = ref(null)
+const hoveredFlowRecord = ref(null)
+const flowTooltipPosition = ref({ x: 0, y: 0 })
+
+const flowGapClass = computed(() => {
+  if (props.weeklyRecords.length > 14) {
+    return 'gap-1'
+  }
+
+  return 'gap-3'
+})
+
+const flowItemStyle = computed(() => {
+  const count = props.weeklyRecords.length
+
+  if (count <= 0) {
+    return {}
+  }
+
+  const gap = count > 14 ? 4 : 12
+  const minWidth = count <= 7 ? 76 : count <= 14 ? 46 : 18
+
+  if (count <= 31) {
+    return {
+      flex: '0 0 auto',
+      width: `max(${minWidth}px, calc((100% - ${(count - 1) * gap}px) / ${count}))`,
+    }
+  }
+
+  return {
+    flex: '0 0 auto',
+    width: '18px',
+  }
+})
+
+const flowBarWidth = computed(() => {
+  if (props.weeklyRecords.length <= 7) {
+    return '48px'
+  }
+
+  if (props.weeklyRecords.length <= 14) {
+    return '30px'
+  }
+
+  return '12px'
+})
+
+const shouldShowFlowTime = computed(() => props.weeklyRecords.length <= 14)
+
+function shouldShowFlowLabel(index) {
+  const count = props.weeklyRecords.length
+
+  if (count <= 14) {
+    return true
+  }
+
+  const interval = Math.ceil(count / 8)
+  return index === 0 || index === count - 1 || index % interval === 0
+}
+
+function updateFlowTooltipPosition(event) {
+  const tooltipWidth = 176
+  const tooltipHeight = 86
+  const margin = 12
+  const viewportWidth = window.innerWidth || tooltipWidth
+  const safeX = Math.min(
+    Math.max(event.clientX, margin + tooltipWidth / 2),
+    viewportWidth - margin - tooltipWidth / 2,
+  )
+  const safeY = Math.max(event.clientY - 18, margin + tooltipHeight)
+
+  flowTooltipPosition.value = {
+    x: safeX,
+    y: safeY,
+  }
+}
+
+function showFlowTooltip(record, event) {
+  hoveredFlowRecord.value = record
+  updateFlowTooltipPosition(event)
+}
+
+function moveFlowTooltip(event) {
+  if (!hoveredFlowRecord.value) {
+    return
+  }
+
+  updateFlowTooltipPosition(event)
+}
+
+function hideFlowTooltip() {
+  hoveredFlowRecord.value = null
+}

 function startFlowDrag(event) {
  if (!flowScrollerRef.value || event.button !== 0) {
@@ -151,7 +243,8 @@ function stopFlowDrag(event) {

        <div
          ref="flowScrollerRef"
-          class="mt-8 flex h-[260px] select-none items-stretch gap-3 overflow-x-auto overscroll-x-contain border-b border-stone-200 pb-4 cursor-grab active:cursor-grabbing"
+          class="mt-8 flex h-[268px] select-none items-stretch overflow-x-auto overscroll-x-contain border-b border-stone-200 pb-4 cursor-grab active:cursor-grabbing"
+          :class="flowGapClass"
          @pointerdown="startFlowDrag"
          @pointermove="moveFlowDrag"
          @pointerup="stopFlowDrag"
@@ -159,20 +252,31 @@ function stopFlowDrag(event) {
          @pointerleave="stopFlowDrag"
        >
          <div
-            v-for="record in weeklyRecords"
+            v-for="(record, index) in weeklyRecords"
            :key="record.key"
-            class="flex min-w-[64px] flex-col items-center justify-end gap-3"
+            class="relative flex flex-col items-center justify-end gap-3"
+            :style="flowItemStyle"
+            @mouseenter="showFlowTooltip(record, $event)"
+            @mousemove="moveFlowTooltip"
+            @mouseleave="hideFlowTooltip"
          >
            <div class="flex h-44 items-end">
              <div
-                class="w-11 rounded-t-full bg-stone-900/90 transition-all"
-                :style="{ height: `${record.barHeight}%` }"
+                class="rounded-t-full bg-stone-900/90 transition-all"
+                :style="{ width: flowBarWidth, height: `${record.barHeight}%` }"
              />
            </div>
-            <div class="text-center">
-              <p class="select-none text-[11px] font-bold tracking-[0.12em] text-stone-500">{{ record.dateLabel }}</p>
-              <p class="mt-1 select-none text-[10px] font-bold tracking-[0.12em] text-stone-400">{{ record.weekday }}</p>
-              <p class="mt-1 select-none text-[11px] font-semibold text-stone-800">{{ record.focusedTime }}</p>
+            <div class="h-14 text-center">
+              <template v-if="shouldShowFlowLabel(index)">
+                <p class="select-none text-[11px] font-bold tracking-[0.12em] text-stone-500">{{ record.dateLabel }}</p>
+                <p class="mt-1 select-none text-[10px] font-bold tracking-[0.12em] text-stone-400">{{ record.weekday }}</p>
+              </template>
+              <p
+                v-if="shouldShowFlowTime"
+                class="mt-1 select-none text-[11px] font-semibold text-stone-800"
+              >
+                {{ record.focusedTime }}
+              </p>
            </div>
          </div>
          <p
@@ -182,6 +286,21 @@ function stopFlowDrag(event) {
            선택 기간에 기록이 없습니다.
          </p>
        </div>
+        <div
+          v-if="hoveredFlowRecord"
+          class="pointer-events-none fixed z-[80] w-44 -translate-x-1/2 -translate-y-full rounded-2xl border border-stone-200 bg-white px-3 py-2 text-left shadow-[0_16px_40px_rgba(28,25,23,0.14)]"
+          :style="{ left: `${flowTooltipPosition.x}px`, top: `${flowTooltipPosition.y}px` }"
+        >
+          <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">
+            {{ hoveredFlowRecord.dateLabel }} {{ hoveredFlowRecord.weekday }}
+          </p>
+          <p class="mt-1 text-[11px] font-semibold text-stone-900">
+            FOCUSED {{ hoveredFlowRecord.focusedTime }}
+          </p>
+          <p class="mt-1 text-[10px] font-semibold tracking-[0.04em] text-stone-500">
+            TASKS {{ hoveredFlowRecord.completedTasks }} / {{ hoveredFlowRecord.totalTasks }}
+          </p>
+        </div>
      </article>

      <div class="grid gap-6">