v0.1.55 - 타임테이블 복사 메뉴와 사용 안내 추가

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.54` 준비 중
+- 현재 기준 버전: `v0.1.55` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -49,7 +49,8 @@
 - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
 - `TIME TABLE` 숫자 영역은 선택/드래그로 텍스트가 잡히지 않도록 막아두었다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
-- 오른쪽 패널에는 특정 날짜의 `TIME TABLE`을 다른 날짜로 그대로 복사하는 카드가 추가되었다.
+- `TIME TABLE` 라벨은 왼쪽 클릭 시 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 시 붙여넣기 메뉴를 연다.
+- `TIME TABLE` 라벨 오른쪽의 `?` 아이콘으로 복사/붙여넣기 사용법을 바로 볼 수 있다.
 - 모바일과 태블릿처럼 `TIME TABLE`이 아래로 내려가는 구간에서는 6칸 그리드가 남는 폭을 더 넓게 채우도록 조정했다.
 - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
 - 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.

package-lock.json

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

package.json

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

src/App.vue

@@ -44,6 +44,7 @@ const GUIDE_TOOLTIP_STORAGE_KEY = 'ten-minute-guide-tooltips-hidden'
 const DDAY_DISABLED_STORAGE_KEY = 'ten-minute-dday-disabled-dates'
 const CARRYOVER_CHECK_POLICY_STORAGE_KEY = 'ten-minute-carryover-check-policy'
 const CARRYOVER_CHECK_POLICIES = ['ask', 'all', 'current']
+const TIMETABLE_CLIPBOARD_PREFIX = 'TEN_MINUTE_TIMETABLE:'
 const screenMode = ref('planner')
 const viewMode = ref('focus')
 const printLayout = ref('single')
@@ -108,7 +109,6 @@ 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('')
@@ -132,9 +132,13 @@ 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 timetableClipboard = ref(null)
+const timetableContextMenu = ref({
+  open: false,
+  x: 0,
+  y: 0,
+  dateKey: '',
+  record: null,
 })
 
 const hours = [
@@ -525,6 +529,7 @@ const secondaryDate = computed(() => {
 })
 
 const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
+const secondaryDateKey = computed(() => toKey(secondaryDate.value))
 
 function getDateDisplay(date) {
   const main = `${date.getFullYear()}. ${`${date.getMonth() + 1}`.padStart(2, '0')}. ${`${date.getDate()}`.padStart(2, '0')}.`
@@ -770,7 +775,6 @@ function shiftDate(amount) {
   selectedDate.value = next
   calendarViewDate.value = new Date(next)
   carryoverMessage.value = ''
-  timetableCopyMessage.value = ''
 }
 
 function shiftCalendarMonth(amount) {
@@ -789,7 +793,6 @@ function selectDate(date) {
   selectedDate.value = new Date(date)
   calendarViewDate.value = new Date(date)
   carryoverMessage.value = ''
-  timetableCopyMessage.value = ''
 }
 
 function updateComment(record, value) {
@@ -919,6 +922,11 @@ function handleGlobalKeydown(event) {
     event.preventDefault()
     closeCarryoverCheckPrompt()
   }
+
+  if (event.key === 'Escape' && timetableContextMenu.value.open) {
+    event.preventDefault()
+    closeTimetableContextMenu()
+  }
 }
 
 function clearTasks(record, indexes) {
@@ -976,38 +984,113 @@ function carryIncompleteTasksToNextDay() {
       : `${nextDateLabel} 빈칸 ${copyCount}개까지만 이월했습니다.`
 }
 
-function useSelectedDateAsTimetableSource() {
-  timetableCopyForm.sourceDate = selectedDateKey.value
-  timetableCopyMessage.value = ''
+function normalizeTimetableClipboard(candidate) {
+  if (!candidate || typeof candidate !== 'object') {
+    return null
+  }
+
+  const sourceDateKey = typeof candidate.sourceDateKey === 'string' ? candidate.sourceDateKey : ''
+  const timetable = Array.isArray(candidate.timetable) ? candidate.timetable : []
+
+  if (!sourceDateKey || timetable.length !== timetableCellCount || timetable.some((value) => typeof value !== 'boolean')) {
+    return null
+  }
+
+  return {
+    sourceDateKey,
+    timetable: [...timetable],
+  }
 }
 
-function useSelectedDateAsTimetableTarget() {
-  timetableCopyForm.targetDate = selectedDateKey.value
-  timetableCopyMessage.value = ''
-}
+async function copyTimetableToClipboard(record, sourceDateKey) {
+  const clipboardPayload = normalizeTimetableClipboard({
+    sourceDateKey,
+    timetable: record.timetable,
+  })
 
-function copyTimetableBetweenDates() {
-  const sourceKey = timetableCopyForm.sourceDate
-  const targetKey = timetableCopyForm.targetDate
-
-  if (!sourceKey || !targetKey) {
-    timetableCopyMessage.value = '복사할 날짜와 붙여넣을 날짜를 모두 선택해 주세요.'
+  if (!clipboardPayload) {
+    setSyncFeedback('local', '복사할 타임테이블을 찾지 못했습니다.')
     return
   }
 
-  const sourceRecord = getPlannerRecord(toDateValue(sourceKey))
-  const targetRecord = getPlannerRecord(toDateValue(targetKey))
-  const nextTimetable = [...sourceRecord.timetable]
+  timetableClipboard.value = clipboardPayload
 
-  targetRecord.timetable = nextTimetable
-  schedulePlannerSyncForRecord(targetRecord)
+  let copiedToSystemClipboard = false
 
-  const sourceDateLabel = createDateLabel(sourceKey)
-  const targetDateLabel = createDateLabel(targetKey)
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(
+        `${TIMETABLE_CLIPBOARD_PREFIX}${JSON.stringify(clipboardPayload)}`,
+      )
+      copiedToSystemClipboard = true
+    }
+  } catch (error) {
+    copiedToSystemClipboard = false
+  }
 
-  timetableCopyMessage.value = nextTimetable.some(Boolean)
-    ? `${sourceDateLabel} 타임테이블을 ${targetDateLabel}에 복사했습니다.`
-    : `${sourceDateLabel} 타임테이블이 비어 있어 ${targetDateLabel}도 비웠습니다.`
+  setSyncFeedback(
+    'local',
+    copiedToSystemClipboard
+      ? `${createDateLabel(sourceDateKey)} 타임테이블을 클립보드에 저장했습니다.`
+      : `${createDateLabel(sourceDateKey)} 타임테이블을 앱 안에 복사했습니다.`,
+  )
+}
+
+function pasteTimetableFromClipboard(record, targetDateKey, clipboardPayload = timetableClipboard.value) {
+  const normalizedClipboard = normalizeTimetableClipboard(clipboardPayload)
+
+  if (!normalizedClipboard) {
+    setSyncFeedback('local', '붙여넣을 타임테이블이 없습니다.')
+    return
+  }
+
+  record.timetable = [...normalizedClipboard.timetable]
+  schedulePlannerSyncForRecord(record)
+  timetableClipboard.value = normalizedClipboard
+
+  setSyncFeedback(
+    'local',
+    normalizedClipboard.timetable.some(Boolean)
+      ? `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블을 ${createDateLabel(targetDateKey)}에 붙여넣었습니다.`
+      : `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블이 비어 있어 ${createDateLabel(targetDateKey)}도 비웠습니다.`,
+  )
+}
+
+async function handleTimetableHeaderAction(record, dateKey) {
+  closeTimetableContextMenu()
+  await copyTimetableToClipboard(record, dateKey)
+}
+
+function openTimetableContextMenu(record, dateKey, event) {
+  timetableContextMenu.value = {
+    open: true,
+    x: event.clientX,
+    y: event.clientY,
+    dateKey,
+    record,
+  }
+}
+
+function closeTimetableContextMenu() {
+  timetableContextMenu.value = {
+    open: false,
+    x: 0,
+    y: 0,
+    dateKey: '',
+    record: null,
+  }
+}
+
+function pasteTimetableToContextTarget() {
+  const { record, dateKey } = timetableContextMenu.value
+
+  if (!record || !dateKey) {
+    closeTimetableContextMenu()
+    return
+  }
+
+  pasteTimetableFromClipboard(record, dateKey)
+  closeTimetableContextMenu()
 }
 
 function updateMemo(record, { index, value }) {
@@ -2905,27 +2988,29 @@ onBeforeUnmount(() => {
               {{ isCompactMobile ? 'INFO' : 'OPEN SIDE PANEL' }}
             </button>
           </div>
-          <PlannerPage
-            :date-main="selectedDateDisplay.main"
-            :date-weekday="selectedDateDisplay.weekday"
-            :date-weekday-tone="selectedDateDisplay.weekdayTone"
-            :dday="plannerDday"
-            :show-dday="showPlannerDday"
-            :comment="planner.comment"
-            :total-time="formatTotalTimeKorean(planner)"
-            :tasks="planner.tasks"
-            :memo="planner.memo"
-            :hours="hours"
-            :timetable="planner.timetable"
-            @update:comment="updateComment(planner, $event)"
-            @update:task-label="updateTaskLabel(planner, $event)"
-            @update:task-title="updateTaskTitle(planner, $event)"
-            @toggle:task="toggleTask(planner, $event)"
-            @clear:tasks="clearTasks(planner, $event)"
-            @update:memo-label="updateMemoLabel(planner, $event)"
-            @update:memo="updateMemo(planner, $event)"
-            @update:timetable="updateTimetable(planner, $event)"
-          />
+            <PlannerPage
+              :date-main="selectedDateDisplay.main"
+              :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :dday="plannerDday"
+              :show-dday="showPlannerDday"
+              :comment="planner.comment"
+              :total-time="formatTotalTimeKorean(planner)"
+              :tasks="planner.tasks"
+              :memo="planner.memo"
+              :hours="hours"
+              :timetable="planner.timetable"
+              @update:comment="updateComment(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
+              @clear:tasks="clearTasks(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
+              @timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
+              @timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
+            />
         </div>
 
         <aside
@@ -3011,71 +3096,6 @@ 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]'">
@@ -3220,71 +3240,6 @@ 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">
@@ -3375,6 +3330,8 @@ onBeforeUnmount(() => {
               @update:memo-label="updateMemoLabel(planner, $event)"
               @update:memo="updateMemo(planner, $event)"
               @update:timetable="updateTimetable(planner, $event)"
+              @timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
+              @timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
             />
           </div>
           <div class="print-hidden overflow-hidden" :style="spreadPageFrameStyle">
@@ -3399,6 +3356,8 @@ onBeforeUnmount(() => {
               @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
               @update:memo="updateMemo(secondaryPlanner, $event)"
               @update:timetable="updateTimetable(secondaryPlanner, $event)"
+              @timetable-action="handleTimetableHeaderAction(secondaryPlanner, secondaryDateKey)"
+              @timetable-contextmenu="openTimetableContextMenu(secondaryPlanner, secondaryDateKey, $event)"
             />
           </div>
         </div>
@@ -3517,6 +3476,42 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
+      <div
+        v-if="timetableContextMenu.open"
+        class="print-hidden fixed inset-0 z-40"
+        @click="closeTimetableContextMenu"
+        @contextmenu.prevent="closeTimetableContextMenu"
+      >
+        <section
+          class="absolute z-50 min-w-[220px] rounded-[24px] border border-stone-200 bg-white p-3 shadow-[0_24px_80px_rgba(28,25,23,0.18)]"
+          :style="{
+            left: `${Math.min(timetableContextMenu.x, windowWidth - 236)}px`,
+            top: `${timetableContextMenu.y}px`,
+          }"
+          @click.stop
+          @contextmenu.prevent
+        >
+          <p class="px-2 pb-2 text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">Time Table Menu</p>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-sm font-semibold transition"
+            :class="timetableClipboard ? 'text-stone-800 hover:bg-[#f7f2ea]' : 'cursor-not-allowed text-stone-400'"
+            :disabled="!timetableClipboard"
+            @click="pasteTimetableToContextTarget"
+          >
+            <span>현재 날짜에 붙여넣기</span>
+            <span class="text-[10px] font-bold tracking-[0.14em] text-stone-400">
+              {{ timetableClipboard ? '준비됨' : '비어 있음' }}
+            </span>
+          </button>
+          <p
+            class="mt-2 rounded-2xl bg-[#faf7f2] px-3 py-3 text-[11px] font-semibold leading-5 text-stone-500"
+          >
+            {{ timetableClipboard ? `${createDateLabel(timetableClipboard.sourceDateKey)} 타임테이블이 복사되어 있습니다.` : '먼저 다른 날짜의 TIME TABLE 라벨을 왼쪽 클릭해 복사해 주세요.' }}
+          </p>
+        </section>
+      </div>
+
       <AuthDialog
         :open="authDialogOpen"
         :mode="authMode"

src/components/PlannerPage.vue

@@ -55,6 +55,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  timetableActionLabel: {
+    type: String,
+    default: '복사',
+  },
 })
 
 const emit = defineEmits([
@@ -66,6 +70,8 @@ const emit = defineEmits([
   'update:memo-label',
   'update:memo',
   'update:timetable',
+  'timetable-action',
+  'timetable-contextmenu',
 ])
 
 let dragState = null
@@ -408,7 +414,26 @@ onBeforeUnmount(() => {
       </div>
 
       <section class="planner-sheet__timetable w-full shrink-0 lg:w-[210px]">
-        <div class="flex items-center gap-2 text-muted">
+        <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
+          <button
+            type="button"
+            class="group flex flex-1 items-center gap-2 rounded-full px-1 py-1 text-left transition hover:bg-stone-100/80"
+            @click="emit('timetable-action')"
+            @contextmenu.prevent="emit('timetable-contextmenu', $event)"
+          >
+            <span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
+            <span class="h-px flex-1 bg-ink"></span>
+            <span class="rounded-full border border-stone-200 bg-white px-3 py-1 text-[9px] font-bold tracking-[0.14em] text-stone-500 transition-colors group-hover:border-stone-400 group-hover:text-stone-900">
+              {{ timetableActionLabel }}
+            </span>
+          </button>
+          <GuideTooltip
+            title="Time Table"
+            description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다."
+            :dismissible="false"
+          />
+        </div>
+        <div v-else class="flex items-center gap-2 text-muted">
           <span class="shrink-0">TIME TABLE</span>
           <span class="h-px flex-1 bg-ink"></span>
         </div>