v0.1.50 - 이월 할 일 흐름과 사이드 패널 정리

src/components/SettingsDashboard.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  carryoverCheckPolicy: {
+    type: String,
+    default: 'ask',
+  },
 })
 
 const emit = defineEmits([
@@ -42,6 +46,7 @@ const emit = defineEmits([
   'submit:profile',
   'submit:password',
   'reset-guide-tooltips',
+  'update:carryover-check-policy',
 ])
 
 const initials = computed(() =>
@@ -102,6 +107,29 @@ function updatePasswordField(field, event) {
           {{ guideTooltipResetMessage }}
         </p>
       </div>
+
+      <div class="mt-4 rounded-[24px] border border-stone-200 bg-white/80 p-4">
+        <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">CARRYOVER CHECK</p>
+        <p class="mt-3 text-sm font-semibold leading-6 text-stone-700">
+          이월된 할 일을 완료할 때 이전 날짜 항목까지 함께 체크할지 정합니다.
+        </p>
+        <div class="mt-4 grid gap-2">
+          <button
+            v-for="option in [
+              { value: 'ask', label: '항상 물어보기' },
+              { value: 'all', label: '항상 이전까지 체크' },
+              { value: 'current', label: '항상 오늘만 체크' },
+            ]"
+            :key="option.value"
+            type="button"
+            class="rounded-2xl border px-4 py-3 text-left text-xs font-bold tracking-[0.12em] transition"
+            :class="carryoverCheckPolicy === option.value ? 'border-stone-900 bg-stone-900 text-white' : 'border-stone-200 bg-white text-stone-600 hover:border-stone-400 hover:text-stone-900'"
+            @click="emit('update:carryover-check-policy', option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </div>
     </aside>
 
     <div class="grid gap-6">