v0.1.54 - 타임테이블 날짜 복사와 모바일 폭 보정

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.52` 준비 중
+- 현재 기준 버전: `v0.1.54` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -49,6 +49,8 @@
 - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
 - `TIME TABLE` 숫자 영역은 선택/드래그로 텍스트가 잡히지 않도록 막아두었다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
+- 오른쪽 패널에는 특정 날짜의 `TIME TABLE`을 다른 날짜로 그대로 복사하는 카드가 추가되었다.
+- 모바일과 태블릿처럼 `TIME TABLE`이 아래로 내려가는 구간에서는 6칸 그리드가 남는 폭을 더 넓게 채우도록 조정했다.
 - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
 - 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.
 - 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다.
@@ -121,7 +123,6 @@
 
 ## 다음 권장 작업
 
-- 관리자 페이지에 사용자 검색, 상태 필터, 최근 접속/문서 수 기준 정렬 UX를 추가한다.
 - 목표 화면에 완료 처리와 보관 상태를 분리해서, 진행 중 목표와 지난 목표를 더 명확하게 나눈다.
 - `READ NEXT`의 자동 제안 규칙을 더 자연스럽게 다듬고, 빈 상태 문구도 상황별로 정리한다.
 - 공유용 이미지 저장 기능을 인쇄 레이아웃과 같은 기준으로 설계하고 구현한다.

TODO.md

@@ -18,6 +18,7 @@
 - [x] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다.
 - [x] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
 - [x] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다.
+- [x] 원하는 날짜의 `TIME TABLE`을 다른 날짜로 복사할 수 있게 한다.
 
 ## 2단계: 달력과 이동 기능
 
@@ -103,4 +104,4 @@
 - [x] 메일 발송 인프라와 발신 도메인 정책을 Resend 기준으로 확정한다.
 - [x] 관리자 페이지에서 계정 비활성화 / 강제 로그아웃 / 삭제 기능을 추가한다.
 - [x] 관리자 페이지에서 사용자별 문서 상세 조회 기능을 추가한다.
-- [ ] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
+- [x] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.

package-lock.json

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

package.json

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

src/App.vue

@@ -108,6 +108,7 @@ const passwordMessage = ref('')
 const accountDeleteBusy = ref(false)
 const accountDeleteMessage = ref('')
 const carryoverMessage = ref('')
+const timetableCopyMessage = ref('')
 const carryoverCheckPolicy = ref(readCarryoverCheckPolicy())
 const carryoverCheckPrompt = ref(null)
 const guideTooltipResetMessage = ref('')
@@ -131,6 +132,10 @@ const adminUsers = ref([])
 const adminRecentLogins = ref([])
 const adminSelectedUserId = ref(null)
 const adminUserDetail = ref(null)
+const timetableCopyForm = reactive({
+  sourceDate: toKey(new Date()),
+  targetDate: toKey(new Date()),
+})
 
 const hours = [
   '6', '7', '8', '9', '10', '11', '12',
@@ -765,6 +770,7 @@ function shiftDate(amount) {
   selectedDate.value = next
   calendarViewDate.value = new Date(next)
   carryoverMessage.value = ''
+  timetableCopyMessage.value = ''
 }
 
 function shiftCalendarMonth(amount) {
@@ -783,6 +789,7 @@ function selectDate(date) {
   selectedDate.value = new Date(date)
   calendarViewDate.value = new Date(date)
   carryoverMessage.value = ''
+  timetableCopyMessage.value = ''
 }
 
 function updateComment(record, value) {
@@ -969,6 +976,40 @@ function carryIncompleteTasksToNextDay() {
       : `${nextDateLabel} 빈칸 ${copyCount}개까지만 이월했습니다.`
 }
 
+function useSelectedDateAsTimetableSource() {
+  timetableCopyForm.sourceDate = selectedDateKey.value
+  timetableCopyMessage.value = ''
+}
+
+function useSelectedDateAsTimetableTarget() {
+  timetableCopyForm.targetDate = selectedDateKey.value
+  timetableCopyMessage.value = ''
+}
+
+function copyTimetableBetweenDates() {
+  const sourceKey = timetableCopyForm.sourceDate
+  const targetKey = timetableCopyForm.targetDate
+
+  if (!sourceKey || !targetKey) {
+    timetableCopyMessage.value = '복사할 날짜와 붙여넣을 날짜를 모두 선택해 주세요.'
+    return
+  }
+
+  const sourceRecord = getPlannerRecord(toDateValue(sourceKey))
+  const targetRecord = getPlannerRecord(toDateValue(targetKey))
+  const nextTimetable = [...sourceRecord.timetable]
+
+  targetRecord.timetable = nextTimetable
+  schedulePlannerSyncForRecord(targetRecord)
+
+  const sourceDateLabel = createDateLabel(sourceKey)
+  const targetDateLabel = createDateLabel(targetKey)
+
+  timetableCopyMessage.value = nextTimetable.some(Boolean)
+    ? `${sourceDateLabel} 타임테이블을 ${targetDateLabel}에 복사했습니다.`
+    : `${sourceDateLabel} 타임테이블이 비어 있어 ${targetDateLabel}도 비웠습니다.`
+}
+
 function updateMemo(record, { index, value }) {
   record.memo[index].text = value
   schedulePlannerSyncForRecord(record)
@@ -1325,6 +1366,19 @@ watch(
   },
 )
 
+watch(
+  selectedDateKey,
+  (nextKey, previousKey) => {
+    if (!timetableCopyForm.targetDate || timetableCopyForm.targetDate === previousKey) {
+      timetableCopyForm.targetDate = nextKey
+    }
+
+    if (!timetableCopyForm.sourceDate) {
+      timetableCopyForm.sourceDate = nextKey
+    }
+  },
+)
+
 function fillTaskLabelsWithNumbers(record) {
   record.tasks.forEach((task, index) => {
     task.label = createTaskLabel(index)
@@ -2957,6 +3011,71 @@ onBeforeUnmount(() => {
                 </div>
               </section>
 
+              <section class="rounded-[24px] border border-stone-200 bg-white/88 p-4 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
+                <div class="flex items-center gap-2">
+                  <p class="text-[11px] font-bold tracking-[0.22em] text-ink">TIME TABLE 복사</p>
+                  <GuideTooltip
+                    title="Time Table Copy"
+                    description="규칙적인 생활 패턴이면 특정 날짜의 타임테이블을 다른 날짜에 그대로 복사할 수 있습니다."
+                    :visible="isGuideTooltipVisible('timetable-copy')"
+                    @dismiss="dismissGuideTooltip('timetable-copy')"
+                  />
+                </div>
+
+                <div class="mt-4 grid gap-3">
+                  <label class="grid gap-2">
+                    <span class="text-[10px] font-bold tracking-[0.14em] text-stone-500">복사할 날짜</span>
+                    <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                      <input
+                        v-model="timetableCopyForm.sourceDate"
+                        type="date"
+                        class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+                      />
+                      <button
+                        type="button"
+                        class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[10px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-400 hover:text-stone-900"
+                        @click="useSelectedDateAsTimetableSource"
+                      >
+                        현재 날짜
+                      </button>
+                    </div>
+                  </label>
+
+                  <label class="grid gap-2">
+                    <span class="text-[10px] font-bold tracking-[0.14em] text-stone-500">붙여넣을 날짜</span>
+                    <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                      <input
+                        v-model="timetableCopyForm.targetDate"
+                        type="date"
+                        class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+                      />
+                      <button
+                        type="button"
+                        class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[10px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-400 hover:text-stone-900"
+                        @click="useSelectedDateAsTimetableTarget"
+                      >
+                        현재 날짜
+                      </button>
+                    </div>
+                  </label>
+                </div>
+
+                <button
+                  type="button"
+                  class="mt-4 w-full rounded-full border border-stone-900 bg-stone-900 px-4 py-3 text-xs font-bold tracking-[0.14em] text-white transition hover:bg-stone-700"
+                  @click="copyTimetableBetweenDates"
+                >
+                  타임테이블 복사하기
+                </button>
+
+                <p
+                  v-if="timetableCopyMessage"
+                  class="mt-3 rounded-2xl border border-stone-200 bg-white px-4 py-3 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600"
+                >
+                  {{ timetableCopyMessage }}
+                </p>
+              </section>
+
             </div>
 
             <div class="grid gap-4" :class="isWideFocusSidebar ? '' : 'max-w-[360px]'">
@@ -3101,6 +3220,71 @@ onBeforeUnmount(() => {
                   </div>
                 </section>
 
+                <section class="rounded-[24px] border border-stone-200 bg-white/88 p-4 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
+                  <div class="flex items-center gap-2">
+                    <p class="text-[11px] font-bold tracking-[0.22em] text-ink">TIME TABLE 복사</p>
+                    <GuideTooltip
+                      title="Time Table Copy"
+                      description="규칙적인 생활 패턴이면 특정 날짜의 타임테이블을 다른 날짜에 그대로 복사할 수 있습니다."
+                      :visible="isGuideTooltipVisible('timetable-copy')"
+                      @dismiss="dismissGuideTooltip('timetable-copy')"
+                    />
+                  </div>
+
+                  <div class="mt-4 grid gap-3">
+                    <label class="grid gap-2">
+                      <span class="text-[10px] font-bold tracking-[0.14em] text-stone-500">복사할 날짜</span>
+                      <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                        <input
+                          v-model="timetableCopyForm.sourceDate"
+                          type="date"
+                          class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+                        />
+                        <button
+                          type="button"
+                          class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[10px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-400 hover:text-stone-900"
+                          @click="useSelectedDateAsTimetableSource"
+                        >
+                          현재 날짜
+                        </button>
+                      </div>
+                    </label>
+
+                    <label class="grid gap-2">
+                      <span class="text-[10px] font-bold tracking-[0.14em] text-stone-500">붙여넣을 날짜</span>
+                      <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                        <input
+                          v-model="timetableCopyForm.targetDate"
+                          type="date"
+                          class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+                        />
+                        <button
+                          type="button"
+                          class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[10px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-400 hover:text-stone-900"
+                          @click="useSelectedDateAsTimetableTarget"
+                        >
+                          현재 날짜
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+
+                  <button
+                    type="button"
+                    class="mt-4 w-full rounded-full border border-stone-900 bg-stone-900 px-4 py-3 text-xs font-bold tracking-[0.14em] text-white transition hover:bg-stone-700"
+                    @click="copyTimetableBetweenDates"
+                  >
+                    타임테이블 복사하기
+                  </button>
+
+                  <p
+                    v-if="timetableCopyMessage"
+                    class="mt-3 rounded-2xl border border-stone-200 bg-white px-4 py-3 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600"
+                  >
+                    {{ timetableCopyMessage }}
+                  </p>
+                </section>
+
               </div>
 
               <div class="grid max-w-[360px] gap-4">

src/components/AdminDashboard.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from 'vue'
+
 const props = defineProps({
   summary: {
     type: Object,
@@ -45,6 +47,10 @@ const emit = defineEmits([
   'delete-user',
 ])
 
+const userSearch = ref('')
+const userStatusFilter = ref('all')
+const userSort = ref('lastLoginDesc')
+
 function formatDate(value) {
   if (!value) {
     return '기록 없음'
@@ -86,6 +92,61 @@ function getPlannerSummary(payload) {
     memoCount: memo.filter((item) => item?.text?.trim?.() || item?.label?.trim?.()).length,
   }
 }
+
+const filteredUsers = computed(() => {
+  const search = userSearch.value.trim().toLowerCase()
+  const filtered = props.users.filter((user) => {
+    const matchesSearch = !search
+      || String(user.id).includes(search)
+      || user.nickname?.toLowerCase().includes(search)
+      || user.email?.toLowerCase().includes(search)
+
+    if (!matchesSearch) {
+      return false
+    }
+
+    switch (userStatusFilter.value) {
+      case 'active':
+        return !user.disabledAt && user.isActiveRecently
+      case 'disabled':
+        return Boolean(user.disabledAt)
+      case 'unverified':
+        return !user.emailVerifiedAt
+      case 'admin':
+        return user.role === 'admin'
+      case 'member':
+        return user.role !== 'admin'
+      default:
+        return true
+    }
+  })
+
+  return [...filtered].sort((left, right) => {
+    switch (userSort.value) {
+      case 'plannerDesc':
+        return right.plannerEntryCount - left.plannerEntryCount || right.id - left.id
+      case 'goalDesc':
+        return right.goalCount - left.goalCount || right.id - left.id
+      case 'createdDesc':
+        return new Date(right.createdAt || 0).getTime() - new Date(left.createdAt || 0).getTime() || right.id - left.id
+      case 'nicknameAsc':
+        return String(left.nickname || '').localeCompare(String(right.nickname || ''), 'ko')
+      case 'lastLoginDesc':
+      default:
+        return new Date(right.lastLoginAt || right.createdAt || 0).getTime()
+          - new Date(left.lastLoginAt || left.createdAt || 0).getTime()
+          || right.id - left.id
+    }
+  })
+})
+
+const filteredUsersSummary = computed(() => {
+  const total = filteredUsers.value.length
+  const disabled = filteredUsers.value.filter((user) => user.disabledAt).length
+  const active = filteredUsers.value.filter((user) => !user.disabledAt && user.isActiveRecently).length
+
+  return { total, disabled, active }
+})
 </script>
 
 <template>
@@ -178,6 +239,53 @@ function getPlannerSummary(payload) {
           {{ message }}
         </p>
 
+        <div class="mt-5 grid gap-3 rounded-[24px] border border-stone-200 bg-[#fcfaf6] p-4 md:grid-cols-[minmax(0,1.2fr)_180px_180px]">
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">검색</span>
+            <input
+              v-model="userSearch"
+              type="text"
+              placeholder="닉네임, 이메일, ID 검색"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition placeholder:text-stone-400 focus:border-stone-400"
+            />
+          </label>
+
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">상태 필터</span>
+            <select
+              v-model="userStatusFilter"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
+            >
+              <option value="all">전체 사용자</option>
+              <option value="active">최근 활동</option>
+              <option value="disabled">비활성화</option>
+              <option value="unverified">미인증</option>
+              <option value="member">일반 사용자</option>
+              <option value="admin">관리자</option>
+            </select>
+          </label>
+
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">정렬</span>
+            <select
+              v-model="userSort"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
+            >
+              <option value="lastLoginDesc">최근 접속순</option>
+              <option value="plannerDesc">문서 많은 순</option>
+              <option value="goalDesc">목표 많은 순</option>
+              <option value="createdDesc">최근 가입순</option>
+              <option value="nicknameAsc">이름순</option>
+            </select>
+          </label>
+        </div>
+
+        <div class="mt-4 flex flex-wrap items-center gap-2 text-[11px] font-bold tracking-[0.12em] text-stone-500">
+          <span class="rounded-full bg-white px-3 py-2">표시 {{ filteredUsersSummary.total }}명</span>
+          <span class="rounded-full bg-white px-3 py-2">활동 {{ filteredUsersSummary.active }}명</span>
+          <span class="rounded-full bg-white px-3 py-2">비활성 {{ filteredUsersSummary.disabled }}명</span>
+        </div>
+
         <div class="mt-5 overflow-hidden rounded-[24px] border border-stone-200 bg-white">
           <div class="hidden grid-cols-[84px_minmax(0,1.2fr)_110px_150px_90px_90px_150px_190px] gap-3 border-b border-stone-200 bg-[#f8f4ed] px-5 py-4 text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500 xl:grid">
             <span>ID</span>
@@ -192,7 +300,7 @@ function getPlannerSummary(payload) {
 
           <div class="divide-y divide-stone-200">
             <article
-              v-for="user in users"
+              v-for="user in filteredUsers"
               :key="user.id"
               class="px-5 py-4"
             >
@@ -273,10 +381,10 @@ function getPlannerSummary(payload) {
             </article>
 
             <div
-              v-if="!busy && users.length === 0"
+              v-if="!busy && filteredUsers.length === 0"
               class="px-5 py-10 text-center text-sm font-semibold text-stone-500"
             >
-              표시할 사용자가 없습니다.
+              조건에 맞는 사용자가 없습니다.
             </div>
           </div>
         </div>

src/components/GuideTooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps({
   title: {
@@ -28,10 +28,7 @@ const emit = defineEmits(['dismiss'])
 
 const open = ref(false)
 const rootRef = ref(null)
-
-function isCompactButtonLabel() {
-  return String(props.buttonLabel || '').trim().length <= 1
-}
+const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)
 
 function close() {
   open.value = false
@@ -75,8 +72,8 @@ onBeforeUnmount(() => {
   >
     <button
       type="button"
-      class="inline-flex min-w-[22px] items-center justify-center border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
-      :class="isCompactButtonLabel() ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
+      class="inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
+      :class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
       aria-label="가이드 보기"
       :aria-expanded="open"
       @click.stop="toggle"

src/components/PlannerPage.vue

@@ -413,11 +413,11 @@ onBeforeUnmount(() => {
           <span class="h-px flex-1 bg-ink"></span>
         </div>
         <div class="planner-sheet__timetable-scroll overflow-x-auto pb-1">
-          <div class="planner-sheet__timetable-grid min-w-[210px]">
+          <div class="planner-sheet__timetable-grid min-w-[210px] w-full">
             <div
               v-for="(hour, index) in hours"
               :key="`${hour}-${index}`"
-              class="flex h-[25px] border-b sm:h-[30px]"
+              class="grid h-[25px] grid-cols-[30px_repeat(6,minmax(0,1fr))] border-b sm:h-[30px] lg:grid-cols-[30px_repeat(6,30px)]"
               :class="index === hours.length - 1 ? 'border-ink' : 'border-line'"
             >
               <div
@@ -430,7 +430,7 @@ onBeforeUnmount(() => {
                 v-for="quarter in 6"
                 :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"
+                class="h-full cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
                 @contextmenu.prevent
                 @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
                 @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"