v0.1.48 - 데모 읽기 전용 스크롤 수정

src/App.vue

@@ -2186,8 +2186,9 @@ onBeforeUnmount(() => {
         class="print-hidden mx-auto grid h-[calc(100vh-3rem)] w-full max-w-6xl gap-5 rounded-[30px] border border-white/70 bg-white/55 p-4 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-6 xl:grid-cols-[minmax(0,1fr)_280px] xl:items-start"
       >
         <div class="scrollbar-hide min-h-0 overflow-auto rounded-[26px] border border-white/70 bg-white/45 p-3 sm:p-4">
-          <div v-if="demoViewMode === 'single'" class="pointer-events-none mx-auto w-[762px] max-w-none">
+          <div v-if="demoViewMode === 'single'" class="mx-auto w-[762px] max-w-none">
             <PlannerPage
+              readonly
               :date-main="demoDateDisplay.main"
               :date-weekday="demoDateDisplay.weekday"
               :date-weekday-tone="demoDateDisplay.weekdayTone"
@@ -2201,8 +2202,9 @@ onBeforeUnmount(() => {
               :timetable="demoPlanner.timetable"
             />
           </div>
-          <div v-else class="pointer-events-none mx-auto flex w-[1548px] max-w-none gap-6">
+          <div v-else class="mx-auto flex w-[1548px] max-w-none gap-6">
             <PlannerPage
+              readonly
               class="max-w-none"
               :date-main="demoDateDisplay.main"
               :date-weekday="demoDateDisplay.weekday"
@@ -2217,6 +2219,7 @@ onBeforeUnmount(() => {
               :timetable="demoPlanner.timetable"
             />
             <PlannerPage
+              readonly
               class="max-w-none"
               :date-main="demoNextDateDisplay.main"
               :date-weekday="demoNextDateDisplay.weekday"

src/components/PlannerPage.vue

@@ -50,6 +50,10 @@ const props = defineProps({
     type: String,
     default: 'SORI.STUDIO',
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits([
@@ -84,6 +88,10 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
 }
 
 function startTimetableDrag(index, event) {
+  if (props.readonly) {
+    return
+  }
+
   if (event.button !== 0 && event.button !== 2) {
     return
   }
@@ -100,7 +108,7 @@ function startTimetableDrag(index, event) {
 }
 
 function moveTimetableDrag(index) {
-  if (!dragState) {
+  if (props.readonly || !dragState) {
     return
   }
 
@@ -143,6 +151,10 @@ function clearTaskSelectionOnFocus() {
 }
 
 function startTaskSelection(index, event) {
+  if (props.readonly) {
+    return
+  }
+
   if (event.button !== 0 || isTaskSelectionBlockedTarget(event.target)) {
     return
   }
@@ -194,6 +206,10 @@ function stopTaskSelection() {
 }
 
 function clearSelectedTasks(event) {
+  if (props.readonly) {
+    return
+  }
+
   if (selectedTaskIndexes.value.size === 0) {
     return
   }
@@ -270,6 +286,7 @@ onBeforeUnmount(() => {
           <textarea
             :value="comment"
             rows="3"
+            :readonly="props.readonly"
             class="mt-3 h-[54px] w-full resize-none bg-transparent pt-2 text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-700 outline-none placeholder:text-stone-400 sm:text-xs"
             placeholder="오늘의 코멘트를 적어 주세요."
             @input="emit('update:comment', $event.target.value)"
@@ -315,6 +332,7 @@ onBeforeUnmount(() => {
                 <input
                   :value="task.label"
                   type="text"
+                  :readonly="props.readonly"
                   class="w-full bg-transparent text-center text-[9px] font-semibold tracking-[0.08em] text-stone-500 outline-none placeholder:text-stone-300"
                   @focus="clearTaskSelectionOnFocus"
                   @input="emit('update:task-label', { index, value: $event.target.value })"
@@ -324,6 +342,7 @@ onBeforeUnmount(() => {
                 <input
                   :value="task.title"
                   type="text"
+                  :readonly="props.readonly"
                   class="w-full truncate bg-transparent text-[10px] font-semibold normal-case tracking-[0.04em] text-stone-800 outline-none placeholder:text-stone-400 sm:text-[11px] sm:tracking-[0.06em]"
                   :placeholder="shouldShowTaskPlaceholder(index) ? '할 일을 입력해 주세요.' : ''"
                   @focus="clearTaskSelectionOnFocus"
@@ -333,6 +352,7 @@ onBeforeUnmount(() => {
               <div class="flex h-full w-[36px] shrink-0 items-center justify-center p-[8px] sm:w-[42px] sm:p-[10px]">
                 <button
                   type="button"
+                  :disabled="props.readonly"
                   class="flex h-full w-full items-center justify-center border border-dashed transition focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
                   :class="task.checked ? 'border-ink bg-stone-100 text-ink' : 'border-ink/60 text-transparent'"
                   @click="emit('toggle:task', index)"
@@ -360,6 +380,7 @@ onBeforeUnmount(() => {
                 <input
                   :value="memoItem.label"
                   type="text"
+                  :readonly="props.readonly"
                   class="w-full bg-transparent text-center text-[9px] font-semibold tracking-[0.08em] text-stone-500 outline-none placeholder:text-stone-300"
                   @input="emit('update:memo-label', { index, value: $event.target.value })"
                 />
@@ -368,6 +389,7 @@ onBeforeUnmount(() => {
                 <input
                   :value="memoItem.text"
                   type="text"
+                  :readonly="props.readonly"
                   class="w-full bg-transparent text-[10px] font-semibold normal-case tracking-[0.04em] text-stone-700 outline-none placeholder:text-stone-400 sm:text-[11px] sm:tracking-[0.06em]"
                   @input="emit('update:memo', { index, value: $event.target.value })"
                 />