zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.43 - 플래너 라벨과 가이드 동작 정리

Browse Source
This commit is contained in:
zenn
2026-04-23 13:34:48 +09:00
parent 4a80721824
commit 44932f9724
16 changed files with 730 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

523
src/App.vue
View File

@@ -2,6 +2,7 @@
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import AdminDashboard from './components/AdminDashboard.vue'
import AuthDialog from './components/AuthDialog.vue'
import GuideTooltip from './components/GuideTooltip.vue'
import GoalsDashboard from './components/GoalsDashboard.vue'
import MiniCalendar from './components/MiniCalendar.vue'
import PlannerPage from './components/PlannerPage.vue'
@@ -28,6 +29,8 @@ import {
restorePlannerUiState,
} from './lib/plannerStorage'
const GUIDE_TOOLTIP_STORAGE_KEY = 'ten-minute-guide-tooltips-hidden'
const DDAY_DISABLED_STORAGE_KEY = 'ten-minute-dday-disabled-dates'
const screenMode = ref('planner')
const viewMode = ref('focus')
const printLayout = ref('single')
@@ -76,6 +79,10 @@ const profileBusy = ref(false)
const passwordBusy = ref(false)
const profileMessage = ref('')
const passwordMessage = ref('')
const carryoverMessage = ref('')
const guideTooltipResetMessage = ref('')
const hiddenGuideTooltips = ref(readHiddenGuideTooltips())
const ddayDisabledDateKeys = ref(readDdayDisabledDateKeys())
const adminBusy = ref(false)
const adminMessage = ref('')
const adminOverview = ref({
@@ -103,6 +110,84 @@ let isHydratingRemoteRecords = false
const syncTimers = new Map()
let syncToastTimer = null
function readHiddenGuideTooltips() {
if (typeof window === 'undefined') {
return []
}
try {
const value = JSON.parse(window.localStorage.getItem(GUIDE_TOOLTIP_STORAGE_KEY) ?? '[]')
return Array.isArray(value) ? value : []
} catch (error) {
return []
}
}
function persistHiddenGuideTooltips() {
if (typeof window === 'undefined') {
return
}
window.localStorage.setItem(GUIDE_TOOLTIP_STORAGE_KEY, JSON.stringify(hiddenGuideTooltips.value))
}
function isGuideTooltipVisible(id) {
return !hiddenGuideTooltips.value.includes(id)
}
function dismissGuideTooltip(id) {
if (hiddenGuideTooltips.value.includes(id)) {
return
}
hiddenGuideTooltips.value = [...hiddenGuideTooltips.value, id]
guideTooltipResetMessage.value = ''
persistHiddenGuideTooltips()
}
function resetGuideTooltips() {
hiddenGuideTooltips.value = []
guideTooltipResetMessage.value = '가이드 툴팁을 다시 볼 수 있게 했습니다.'
persistHiddenGuideTooltips()
}
function readDdayDisabledDateKeys() {
if (typeof window === 'undefined') {
return []
}
try {
const value = JSON.parse(window.localStorage.getItem(DDAY_DISABLED_STORAGE_KEY) ?? '[]')
return Array.isArray(value) ? value : []
} catch (error) {
return []
}
}
function persistDdayDisabledDateKeys() {
if (typeof window === 'undefined') {
return
}
window.localStorage.setItem(DDAY_DISABLED_STORAGE_KEY, JSON.stringify(ddayDisabledDateKeys.value))
}
function isDdayDisabledForDate(dateKey) {
return ddayDisabledDateKeys.value.includes(dateKey)
}
function setDdayDisabledForDate(dateKey, disabled) {
if (disabled) {
if (!ddayDisabledDateKeys.value.includes(dateKey)) {
ddayDisabledDateKeys.value = [...ddayDisabledDateKeys.value, dateKey]
}
} else {
ddayDisabledDateKeys.value = ddayDisabledDateKeys.value.filter((key) => key !== dateKey)
}
persistDdayDisabledDateKeys()
}
function createEmptyTimetable() {
return Array.from({ length: timetableCellCount }, () => false)
}
@@ -379,9 +464,12 @@ const activePlannerGoals = computed(() =>
}),
)
const plannerGoal = computed(() => activePlannerGoals.value[0] ?? null)
const plannerGoalToggleOn = computed(() => Boolean(plannerGoal.value) && planner.value.goalEnabled)
const selectedDateKey = computed(() => toKey(selectedDate.value))
const plannerGoalToggleOn = computed(() =>
Boolean(plannerGoal.value) && !isDdayDisabledForDate(selectedDateKey.value),
)
const plannerDday = computed(() => {
if (!planner.value.goalEnabled || !plannerGoal.value) {
if (!plannerGoalToggleOn.value || !plannerGoal.value) {
return ''
}
@@ -394,7 +482,7 @@ const plannerDday = computed(() => {
return `${badge} ${plannerGoal.value.title}`
})
const showPlannerDday = computed(() =>
planner.value.goalEnabled && Boolean(plannerGoal.value),
plannerGoalToggleOn.value && Boolean(plannerGoal.value),
)
const hasActiveGoalForSelectedDate = computed(() => Boolean(plannerGoal.value))
@@ -404,6 +492,9 @@ const filledTasks = computed(() =>
const completedTasks = computed(() =>
filledTasks.value.filter((task) => task.checked).length,
)
const incompleteTasks = computed(() =>
planner.value.tasks.filter((task) => task.title.trim() && !task.checked),
)
const completionRate = computed(() => {
if (filledTasks.value.length === 0) {
return 0
@@ -451,6 +542,7 @@ function shiftDate(amount) {
next.setDate(next.getDate() + amount)
selectedDate.value = next
calendarViewDate.value = new Date(next)
carryoverMessage.value = ''
}
function shiftCalendarMonth(amount) {
@@ -468,6 +560,7 @@ function shiftCalendarYear(amount) {
function selectDate(date) {
selectedDate.value = new Date(date)
calendarViewDate.value = new Date(date)
carryoverMessage.value = ''
}
function updateComment(record, value) {
@@ -480,8 +573,12 @@ function updateGoalEnabled(record, value) {
return
}
setDdayDisabledForDate(selectedDateKey.value, !value)
record.goalEnabled = value
schedulePlannerSyncForRecord(record)
if (hasPlannerContent(record)) {
schedulePlannerSyncForRecord(record)
}
}
function updateTaskLabel(record, { index, value }) {
@@ -499,6 +596,59 @@ function toggleTask(record, index) {
schedulePlannerSyncForRecord(record)
}
function clearTasks(record, indexes) {
indexes.forEach((index) => {
if (!record.tasks[index]) {
return
}
record.tasks[index].title = ''
record.tasks[index].checked = false
})
schedulePlannerSyncForRecord(record)
}
function carryIncompleteTasksToNextDay() {
const tasksToCarry = incompleteTasks.value.map((task) => ({
label: task.label,
title: task.title,
checked: false,
}))
if (tasksToCarry.length === 0) {
carryoverMessage.value = '이월할 미완료 항목이 없습니다.'
return
}
const targetRecord = secondaryPlanner.value
const emptyIndexes = targetRecord.tasks
.map((task, index) => ({ task, index }))
.filter(({ task }) => !task.title.trim())
.map(({ index }) => index)
const copyCount = Math.min(tasksToCarry.length, emptyIndexes.length)
if (copyCount === 0) {
carryoverMessage.value = '다음 날짜에 비어 있는 할 일 칸이 없습니다.'
return
}
for (let index = 0; index < copyCount; index += 1) {
const task = tasksToCarry[index]
targetRecord.tasks[emptyIndexes[index]] = {
...task,
checked: false,
}
}
schedulePlannerSyncForRecord(targetRecord)
const nextDateLabel = createDateLabel(toKey(secondaryDate.value))
carryoverMessage.value =
copyCount === tasksToCarry.length
? `${nextDateLabel} 빈칸에 미완료 ${copyCount}개를 이월했습니다.`
: `${nextDateLabel} 빈칸 ${copyCount}개까지만 이월했습니다.`
}
function updateMemo(record, { index, value }) {
record.memo[index].text = value
schedulePlannerSyncForRecord(record)
@@ -698,9 +848,7 @@ const prevSnapshotItems = computed(() => {
const readNextItems = computed(() => {
const nextDayFirstTask = secondaryPlanner.value.tasks.find((task) => task.title.trim())
const incompleteTasks = planner.value.tasks.filter((task) => task.title.trim() && !task.checked)
const carryTask = incompleteTasks[0]?.title
const todayComment = planner.value.comment.trim()
const carryTask = incompleteTasks.value[0]?.title
return [
nextDayFirstTask
@@ -708,12 +856,9 @@ const readNextItems = computed(() => {
: carryTask
? `내일 이어갈 첫 작업: ${carryTask}`
: '내일 첫 작업은 아직 비어 있습니다.',
incompleteTasks.length > 0
? `미완료 ${incompleteTasks.length}개를 이어서 볼 수 있습니다.`
: '오늘 미완료 작업은 없습니다.',
todayComment
? `오늘 코멘트 이어보기: ${todayComment}`
: '오늘 코멘트는 아직 비어 있습니다.',
incompleteTasks.value.length > 0
? `아직 처리되지 않은 할 일이 ${incompleteTasks.value.length}개 있습니다.`
: '오늘 할 일은 모두 처리되었습니다.',
]
})
@@ -795,8 +940,8 @@ watch(
watch(
[selectedDate, plannerGoal],
() => {
if (!plannerGoal.value && planner.value.goalEnabled) {
planner.value.goalEnabled = false
if (plannerGoal.value && planner.value.goalEnabled === false && !isDdayDisabledForDate(selectedDateKey.value)) {
planner.value.goalEnabled = true
if (hasPlannerContent(planner.value)) {
schedulePlannerSyncForRecord(planner.value)
@@ -1546,7 +1691,6 @@ onBeforeUnmount(() => {
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">SIGNED IN</p>
<p class="mt-2 text-lg font-semibold tracking-[-0.03em] text-stone-900">{{ currentUser.nickname }}</p>
<p class="mt-1 text-sm font-semibold text-stone-500">{{ currentUser.email }}</p>
<p class="mt-2 text-[11px] font-bold tracking-[0.16em] text-stone-400">{{ currentUser.role === 'admin' ? 'ADMIN' : 'USER' }}</p>
<button
type="button"
class="mt-4 w-full rounded-full border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -1738,7 +1882,6 @@ onBeforeUnmount(() => {
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">SIGNED IN</p>
<p class="mt-2 text-lg font-semibold tracking-[-0.03em] text-stone-900">{{ currentUser.nickname }}</p>
<p class="mt-1 text-sm font-semibold text-stone-500">{{ currentUser.email }}</p>
<p class="mt-2 text-[11px] font-bold tracking-[0.16em] text-stone-400">{{ currentUser.role === 'admin' ? 'ADMIN' : 'USER' }}</p>
<button
type="button"
class="mt-4 w-full rounded-full border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -1872,18 +2015,16 @@ onBeforeUnmount(() => {
>
<div class="mx-auto flex max-w-3xl flex-col gap-6 text-center">
<div class="space-y-3">
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">Members Only</p>
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">회원 전용 플래너</p>
<h2 class="text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
로그인 후 플래너를 작성하고<br>
클라우드에 안전하게 저장하세요
10 Minute Planner
</h2>
<p class="mx-auto max-w-2xl text-sm leading-7 text-stone-600 sm:text-base">
이제 플래너는 사용자 계정 기준으로 문서와 통계가 연결됩니다. 로그인하지 않은 상태에서는 데이터가 섞일 수 있어
작성 화면을 열지 않도록 변경했습니다.
로그인 후 나만의 10분 플래너를 작성하고,<br>날짜별 기록과 통계를 안전하게 이어가세요.
</p>
</div>
<div class="grid gap-4 rounded-[28px] border border-stone-200 bg-[#fbf7f0] p-5 text-left sm:grid-cols-3">
<div class="grid gap-4 rounded-[28px] border border-stone-200 bg-[#fbf7f0] p-5 text-left">
<article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">ACCOUNT</p>
<p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
@@ -1962,6 +2103,7 @@ onBeforeUnmount(() => {
@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)"
@@ -2000,72 +2142,82 @@ onBeforeUnmount(() => {
/>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/88 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
번호가 필요한 날만 빠르게 채우고, 필요 없으면 바로 비울 수 있습니다.
</p>
<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="grid gap-3">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
<GuideTooltip
title="Task Labels"
description="번호가 필요한 날만 빠르게 채우고, 필요 없으면 바로 비울 수 있습니다."
:visible="isGuideTooltipVisible('task-labels')"
@dismiss="dismissGuideTooltip('task-labels')"
/>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out"
:class="areTaskLabelsNumbered(planner) ? 'bg-stone-900' : 'bg-stone-300'"
@click="areTaskLabelsNumbered(planner) ? clearTaskLabels(planner) : fillTaskLabelsWithNumbers(planner)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="areTaskLabelsNumbered(planner) ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
<div class="flex items-center justify-between gap-3 border-t border-stone-200 pt-3">
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
<GuideTooltip
title="D-Day"
description="현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다. 목표는 GOALS 화면에서 표시 기간을 지정하면 자동으로 연결됩니다."
:visible="isGuideTooltipVisible('planner-dday')"
@dismiss="dismissGuideTooltip('planner-dday')"
/>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out disabled:cursor-not-allowed disabled:opacity-50"
:class="plannerGoalToggleOn ? 'bg-stone-900' : 'bg-stone-300'"
:disabled="!hasActiveGoalForSelectedDate"
@click="updateGoalEnabled(planner, !plannerGoalToggleOn)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out"
:class="areTaskLabelsNumbered(planner) ? 'bg-stone-900' : 'bg-stone-300'"
@click="areTaskLabelsNumbered(planner) ? clearTaskLabels(planner) : fillTaskLabelsWithNumbers(planner)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="areTaskLabelsNumbered(planner) ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/88 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<div class="flex items-start justify-between gap-3">
<div class="space-y-4">
<div>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">미완료 항목 이월</p>
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다.
체크하지 못한 할 일을 다음 날짜의 빈칸에 순서대로 복사합니다.
</p>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out disabled:cursor-not-allowed disabled:opacity-50"
:class="plannerGoalToggleOn ? 'bg-stone-900' : 'bg-stone-300'"
:disabled="!hasActiveGoalForSelectedDate"
@click="updateGoalEnabled(planner, !planner.goalEnabled)"
class="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 disabled:cursor-not-allowed disabled:border-stone-200 disabled:bg-stone-200 disabled:text-stone-500"
:disabled="incompleteTasks.length === 0"
@click="carryIncompleteTasksToNextDay"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
다음날로 이월하기
</button>
</div>
<div class="mt-4 space-y-3">
<div v-if="plannerGoal" class="rounded-2xl border border-stone-200 bg-white px-4 py-3">
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">현재 목표</p>
<p class="mt-2 text-sm font-semibold tracking-[0.02em] text-stone-900">{{ plannerGoal.title }}</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.06em] text-stone-500">
목표일 {{ plannerGoal.targetDate }} / 적용 {{ plannerGoal.activeFrom }} ~ {{ plannerGoal.activeUntil }}
</p>
</div>
<div v-if="plannerGoal" class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4">
<p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
이 날짜에는 이미 적용된 목표가 있으므로 토글만으로 표시 여부를 빠르게 조절할 수 있습니다.
</p>
</div>
<div v-else class="rounded-2xl border border-dashed border-stone-300 bg-white/70 px-4 py-4">
<p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-500">
현재 날짜에 적용된 목표가 없습니다. GOALS 화면에서 표시 기간을 지정하면 여기 토글이 자동으로 활성화됩니다.
</p>
</div>
<p
v-if="carryoverMessage"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-3 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600"
>
{{ carryoverMessage }}
</p>
</div>
</section>
</div>
<div class="grid gap-4" :class="isWideFocusSidebar ? '' : 'max-w-[360px]'">
@@ -2097,35 +2249,35 @@ onBeforeUnmount(() => {
{{ nextDaySummary }}
</p>
</div>
<div class="mt-5 border-t border-stone-200 pt-5">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
<div class="mt-3 grid gap-3">
<p
v-for="item in readNextItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</div>
<div class="mt-5 border-t border-stone-200 pt-5">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
<div class="mt-3 grid gap-3">
<p
v-for="item in prevSnapshotItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-white px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</div>
</article>
</section>
</div>
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]" :class="isWideFocusSidebar ? '2xl:col-span-2' : ''">
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
<div class="grid gap-3" :class="isWideFocusSidebar ? 'sm:grid-cols-3 2xl:grid-cols-3' : 'grid-cols-1'">
<p
v-for="item in readNextItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]" :class="isWideFocusSidebar ? '2xl:col-span-2' : ''">
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
<div class="grid gap-3" :class="isWideFocusSidebar ? 'sm:grid-cols-3 2xl:grid-cols-3' : 'grid-cols-1'">
<p
v-for="item in prevSnapshotItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-white px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</section>
</div>
</aside>
@@ -2161,72 +2313,82 @@ onBeforeUnmount(() => {
/>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/88 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
번호가 필요한 날만 빠르게 채우고, 필요 없으면 바로 비울 수 있습니다.
</p>
<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="grid gap-3">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
<GuideTooltip
title="Task Labels"
description="번호가 필요한 날만 빠르게 채우고, 필요 없으면 바로 비울 수 있습니다."
:visible="isGuideTooltipVisible('task-labels')"
@dismiss="dismissGuideTooltip('task-labels')"
/>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out"
:class="areTaskLabelsNumbered(planner) ? 'bg-stone-900' : 'bg-stone-300'"
@click="areTaskLabelsNumbered(planner) ? clearTaskLabels(planner) : fillTaskLabelsWithNumbers(planner)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="areTaskLabelsNumbered(planner) ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
<div class="flex items-center justify-between gap-3 border-t border-stone-200 pt-3">
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
<GuideTooltip
title="D-Day"
description="현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다. 목표는 GOALS 화면에서 표시 기간을 지정하면 자동으로 연결됩니다."
:visible="isGuideTooltipVisible('planner-dday')"
@dismiss="dismissGuideTooltip('planner-dday')"
/>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out disabled:cursor-not-allowed disabled:opacity-50"
:class="plannerGoalToggleOn ? 'bg-stone-900' : 'bg-stone-300'"
:disabled="!hasActiveGoalForSelectedDate"
@click="updateGoalEnabled(planner, !plannerGoalToggleOn)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out"
:class="areTaskLabelsNumbered(planner) ? 'bg-stone-900' : 'bg-stone-300'"
@click="areTaskLabelsNumbered(planner) ? clearTaskLabels(planner) : fillTaskLabelsWithNumbers(planner)"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="areTaskLabelsNumbered(planner) ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/88 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<div class="flex items-start justify-between gap-3">
<div class="space-y-4">
<div>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">미완료 항목 이월</p>
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다.
체크하지 못한 할 일을 다음 날짜의 빈칸에 순서대로 복사합니다.
</p>
</div>
<button
type="button"
class="relative h-8 w-16 shrink-0 rounded-full transition-colors duration-300 ease-out disabled:cursor-not-allowed disabled:opacity-50"
:class="plannerGoalToggleOn ? 'bg-stone-900' : 'bg-stone-300'"
:disabled="!hasActiveGoalForSelectedDate"
@click="updateGoalEnabled(planner, !planner.goalEnabled)"
class="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 disabled:cursor-not-allowed disabled:border-stone-200 disabled:bg-stone-200 disabled:text-stone-500"
:disabled="incompleteTasks.length === 0"
@click="carryIncompleteTasksToNextDay"
>
<span
class="absolute left-1 top-1 h-6 w-6 transform-gpu rounded-full bg-white shadow-sm transition-transform duration-300 ease-out will-change-transform"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
다음날로 이월하기
</button>
</div>
<div class="mt-4 space-y-3">
<div v-if="plannerGoal" class="rounded-2xl border border-stone-200 bg-white px-4 py-3">
<p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">현재 목표</p>
<p class="mt-2 text-sm font-semibold tracking-[0.02em] text-stone-900">{{ plannerGoal.title }}</p>
<p class="mt-1 text-[11px] font-semibold tracking-[0.06em] text-stone-500">
목표일 {{ plannerGoal.targetDate }} / 적용 {{ plannerGoal.activeFrom }} ~ {{ plannerGoal.activeUntil }}
</p>
</div>
<div v-if="plannerGoal" class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4">
<p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
이 날짜에는 이미 적용된 목표가 있으므로 토글만으로 표시 여부를 빠르게 조절할 수 있습니다.
</p>
</div>
<div v-else class="rounded-2xl border border-dashed border-stone-300 bg-white/70 px-4 py-4">
<p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-500">
현재 날짜에 적용된 목표가 없습니다. GOALS 화면에서 표시 기간을 지정하면 여기 토글이 자동으로 활성화됩니다.
</p>
</div>
<p
v-if="carryoverMessage"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-3 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600"
>
{{ carryoverMessage }}
</p>
</div>
</section>
</div>
<div class="grid max-w-[360px] gap-4">
@@ -2258,35 +2420,35 @@ onBeforeUnmount(() => {
{{ nextDaySummary }}
</p>
</div>
<div class="mt-5 border-t border-stone-200 pt-5">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
<div class="mt-3 grid gap-3">
<p
v-for="item in readNextItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</div>
<div class="mt-5 border-t border-stone-200 pt-5">
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
<div class="mt-3 grid gap-3">
<p
v-for="item in prevSnapshotItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-white px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</div>
</article>
</section>
</div>
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
<div class="grid gap-3 grid-cols-1">
<p
v-for="item in readNextItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</section>
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
<div class="grid gap-3 grid-cols-1">
<p
v-for="item in prevSnapshotItems"
:key="item"
class="rounded-2xl border border-stone-200 bg-white px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
>
{{ item || ' ' }}
</p>
</div>
</section>
</div>
</aside>
</Transition>
@@ -2315,6 +2477,7 @@ onBeforeUnmount(() => {
@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)"
@@ -2338,6 +2501,7 @@ onBeforeUnmount(() => {
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
@toggle:task="toggleTask(secondaryPlanner, $event)"
@clear:tasks="clearTasks(secondaryPlanner, $event)"
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
@update:memo="updateMemo(secondaryPlanner, $event)"
@update:timetable="updateTimetable(secondaryPlanner, $event)"
@@ -2375,10 +2539,12 @@ onBeforeUnmount(() => {
:password-busy="passwordBusy"
:profile-message="profileMessage"
:password-message="passwordMessage"
:guide-tooltip-reset-message="guideTooltipResetMessage"
@update:profile-field="updateProfileField"
@update:password-field="updatePasswordField"
@submit:profile="submitProfileForm"
@submit:password="submitPasswordForm"
@reset-guide-tooltips="resetGuideTooltips"
/>
<AdminDashboard
@@ -2424,6 +2590,7 @@ onBeforeUnmount(() => {
@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)"
@@ -2449,6 +2616,7 @@ onBeforeUnmount(() => {
@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)"
@@ -2471,6 +2639,7 @@ onBeforeUnmount(() => {
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
@toggle:task="toggleTask(secondaryPlanner, $event)"
@clear:tasks="clearTasks(secondaryPlanner, $event)"
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
@update:memo="updateMemo(secondaryPlanner, $event)"
@update:timetable="updateTimetable(secondaryPlanner, $event)"

8
src/components/AuthDialog.vue
View File

@@ -45,12 +45,12 @@ function updateField(field, event) {
<div class="w-full max-w-md rounded-[28px] border border-white/60 bg-[#f6f1e8] p-6 shadow-2xl sm:p-7">
<div class="flex items-start justify-between gap-4">
<div class="space-y-2">
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">Account</p>
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">계정 시작</p>
<h2 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900">
{{ mode === 'login' ? '로그인' : '회원가입' }}
</h2>
<p class="text-sm leading-6 text-stone-600">
{{ mode === 'login' ? '저장된 플래너를 다시 이어서 볼 수 있습니다.' : '사용자별 기록과 통계를 연결하기 위한 계정을 만듭니다.' }}
{{ mode === 'login' ? '작성하던 플래너를 이어서 기록하세요.' : '나만의 플래너와 통계를 안전하게 보관할 계정을 만듭니다.' }}
</p>
</div>
<button
@@ -82,7 +82,7 @@ function updateField(field, event) {
:value="form.email"
:type="mode === 'login' ? 'text' : 'email'"
class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
:placeholder="mode === 'login' ? 'zenn@example.com 또는 planner-admin' : 'zenn@example.com'"
:placeholder="mode === 'login' ? '이메일 또는 아이디를 입력해 주세요.' : 'you@example.com'"
@input="updateField('email', $event)"
/>
</div>
@@ -110,7 +110,7 @@ function updateField(field, event) {
class="w-full rounded-full bg-stone-900 px-5 py-3 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700 disabled:cursor-not-allowed disabled:bg-stone-400"
:disabled="busy"
>
{{ busy ? '처리 중...' : mode === 'login' ? 'LOGIN' : 'SIGN UP' }}
{{ busy ? '처리 중...' : mode === 'login' ? '로그인하기' : '가입하기' }}
</button>
</form>

90
src/components/GuideTooltip.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup>
import { onBeforeUnmount, ref } from 'vue'
const props = defineProps({
title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
visible: {
type: Boolean,
default: true,
},
})
const emit = defineEmits(['dismiss'])
const open = ref(false)
const rootRef = ref(null)
function close() {
open.value = false
}
function toggle() {
if (!props.visible) {
return
}
open.value = !open.value
}
function closeFromOutside(event) {
if (!open.value || rootRef.value?.contains(event.target)) {
return
}
close()
}
function dismiss() {
emit('dismiss')
close()
}
if (typeof window !== 'undefined') {
window.addEventListener('pointerdown', closeFromOutside)
}
onBeforeUnmount(() => {
window.removeEventListener('pointerdown', closeFromOutside)
})
</script>
<template>
<span
v-if="visible"
ref="rootRef"
class="relative inline-flex"
>
<button
type="button"
class="flex h-5 w-5 items-center justify-center rounded-full 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"
aria-label="가이드 보기"
:aria-expanded="open"
@click.stop="toggle"
>
?
</button>
<span
v-if="open"
class="absolute left-0 top-7 z-50 w-64 rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)]"
@pointerdown.stop
>
<span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
<span class="mt-2 block text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
<button
type="button"
class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
@click="dismiss"
>
더 이상 보지 않기
</button>
</span>
</span>
</template>

195
src/components/PlannerPage.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { onBeforeUnmount } from 'vue'
import { onBeforeUnmount, ref } from 'vue'
const props = defineProps({
dateMain: {
@@ -57,12 +57,15 @@ const emit = defineEmits([
'update:task-label',
'update:task-title',
'toggle:task',
'clear:tasks',
'update:memo-label',
'update:memo',
'update:timetable',
])
let dragState = null
let taskSelectionDrag = null
const selectedTaskIndexes = ref(new Set())
function shouldShowTaskPlaceholder(index) {
return index === 0 && props.tasks.every((task) => !task.title.trim())
@@ -111,9 +114,114 @@ function stopTimetableDrag() {
dragState = null
}
function isTaskSelectionBlockedTarget(target) {
return Boolean(target.closest('button, textarea, [contenteditable="true"]'))
}
function getTaskSelectionRange(startIndex, endIndex) {
const rangeStart = Math.min(startIndex, endIndex)
const rangeEnd = Math.max(startIndex, endIndex)
return new Set(Array.from({ length: rangeEnd - rangeStart + 1 }, (_, offset) => rangeStart + offset))
}
function isTaskSelected(index) {
return selectedTaskIndexes.value.has(index)
}
function clearTaskSelection() {
selectedTaskIndexes.value = new Set()
taskSelectionDrag = null
}
function clearTaskSelectionOnFocus() {
if (taskSelectionDrag) {
return
}
clearTaskSelection()
}
function startTaskSelection(index, event) {
if (event.button !== 0 || isTaskSelectionBlockedTarget(event.target)) {
return
}
selectedTaskIndexes.value = new Set()
taskSelectionDrag = {
startIndex: index,
isSelecting: false,
}
}
function moveTaskSelection(index) {
if (!taskSelectionDrag) {
return
}
if (!taskSelectionDrag.isSelecting && index === taskSelectionDrag.startIndex) {
return
}
if (!taskSelectionDrag.isSelecting) {
taskSelectionDrag.isSelecting = true
document.activeElement?.blur?.()
window.getSelection()?.removeAllRanges?.()
}
selectedTaskIndexes.value = getTaskSelectionRange(taskSelectionDrag.startIndex, index)
}
function moveTaskSelectionFromPointer(event) {
if (!taskSelectionDrag) {
return
}
const taskRow = document.elementFromPoint(event.clientX, event.clientY)?.closest('[data-task-index]')
const index = Number(taskRow?.dataset.taskIndex)
if (Number.isInteger(index)) {
moveTaskSelection(index)
}
}
function stopTaskSelection() {
if (taskSelectionDrag && !taskSelectionDrag.isSelecting) {
selectedTaskIndexes.value = new Set()
}
taskSelectionDrag = null
}
function clearSelectedTasks(event) {
if (selectedTaskIndexes.value.size === 0) {
return
}
if (event.key === 'Escape') {
event.preventDefault()
clearTaskSelection()
return
}
if (!['Backspace', 'Delete'].includes(event.key)) {
return
}
event.preventDefault()
emit('clear:tasks', [...selectedTaskIndexes.value])
clearTaskSelection()
}
window.addEventListener('pointerup', stopTimetableDrag)
window.addEventListener('pointermove', moveTaskSelectionFromPointer)
window.addEventListener('pointerup', stopTaskSelection)
window.addEventListener('keydown', clearSelectedTasks)
onBeforeUnmount(() => {
window.removeEventListener('pointerup', stopTimetableDrag)
window.removeEventListener('pointermove', moveTaskSelectionFromPointer)
window.removeEventListener('pointerup', stopTaskSelection)
window.removeEventListener('keydown', clearSelectedTasks)
})
</script>
@@ -123,17 +231,23 @@ onBeforeUnmount(() => {
>
<div class="planner-sheet__meta flex flex-col gap-4 py-3 sm:py-[18px]">
<div class="planner-sheet__meta-top flex flex-col gap-3 sm:gap-4" :class="props.showDday ? 'sm:flex-row' : ''">
<div class="relative min-h-[82px] border-t border-ink px-[10px] pt-[10px]" :class="props.showDday ? 'w-full sm:w-[394px] sm:flex-1' : 'w-full flex-1'">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">YEAR / MONTH / DAY</span>
<p class="pt-5 text-[11px] tracking-[0.2em] text-ink sm:pt-6 sm:text-sm">
<div class="planner-field min-h-[82px] px-[10px] pt-[10px]" :class="props.showDday ? 'w-full sm:w-[394px] sm:flex-1' : 'w-full flex-1'">
<div class="planner-field__header flex items-center gap-2 text-muted">
<span class="shrink-0">YEAR / MONTH / DAY</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<p class="pt-6 text-[11px] tracking-[0.2em] text-ink sm:text-sm">
<span>{{ dateMain }}</span>
<span class="ml-1" :class="dateWeekdayTone">{{ dateWeekday }}</span>
</p>
</div>
<div v-if="props.showDday" class="relative min-h-[82px] w-full border-t border-ink px-[10px] pt-[10px] sm:w-[210px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">D-DAY</span>
<div v-if="props.showDday" class="planner-field min-h-[82px] w-full px-[10px] pt-[10px] sm:w-[210px]">
<div class="planner-field__header flex items-center gap-2 text-muted">
<span class="shrink-0">D-DAY</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<p
class="pt-5 text-[11px] tracking-[0.14em] text-ink sm:pt-6 sm:text-sm"
class="pt-6 text-[11px] tracking-[0.14em] text-ink sm:text-sm"
style="
display: -webkit-box;
-webkit-line-clamp: 3;
@@ -148,39 +262,61 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="planner-sheet__meta-bottom flex flex-col gap-3 border-b border-ink pb-3 sm:gap-4 sm:pb-[18px] lg:flex-row">
<div class="relative min-h-[82px] w-full flex-1 border-t border-ink px-[10px] pt-[10px] lg:w-[394px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">COMMENT</span>
<div class="planner-field min-h-[82px] w-full flex-1 px-[10px] pt-[10px] lg:w-[394px]">
<div class="planner-field__header flex items-center gap-2 text-muted">
<span class="shrink-0">COMMENT</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<textarea
:value="comment"
rows="3"
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:mt-4 sm:text-xs"
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)"
/>
</div>
<div class="relative min-h-[82px] w-full border-t border-ink px-[10px] pt-[10px] lg:w-[210px]">
<span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">총 시간</span>
<p class="pt-5 text-[11px] tracking-[0.2em] text-ink sm:pt-6 sm:text-sm">{{ totalTime }}</p>
<div class="planner-field min-h-[82px] w-full px-[10px] pt-[10px] lg:w-[210px]">
<div class="planner-field__header flex items-center gap-2 text-muted">
<span class="shrink-0">FOCUSED TIME</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<p class="pt-6 text-[11px] tracking-[0.2em] text-ink sm:text-sm">{{ totalTime }}</p>
</div>
</div>
</div>
<div class="planner-sheet__body flex flex-col gap-5 py-[10px] lg:flex-row lg:gap-4">
<div class="planner-sheet__lists flex w-full flex-1 flex-col gap-7 sm:gap-9 lg:w-[394px]">
<section class="relative">
<div class="absolute -top-[9px] left-0 bg-paper px-[2px] text-muted">TASKS</div>
<div class="border-t border-ink">
<section>
<div class="flex items-center gap-2 text-muted">
<span class="shrink-0">TASKS</span>
<span
v-if="selectedTaskIndexes.size > 0"
class="shrink-0 rounded-full border border-ink/30 px-2 py-[1px] text-[8px] tracking-[0.12em] text-ink"
>
선택 {{ selectedTaskIndexes.size }}개 · DEL 삭제 · ESC 취소
</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<div>
<div
v-for="(task, index) in tasks"
:key="task.id"
class="flex min-h-[38px] items-center border-b"
:class="index % 5 === 4 || index === tasks.length - 1 ? 'border-ink' : 'border-line'"
:key="task.id ?? index"
:data-task-index="index"
class="flex min-h-[38px] select-none items-center border-b transition-colors"
:class="[
index % 5 === 4 || index === tasks.length - 1 ? 'border-ink' : 'border-line',
isTaskSelected(index) ? 'bg-amber-100/55 ring-1 ring-inset ring-amber-500/40' : '',
]"
@pointerdown="startTaskSelection(index, $event)"
@pointerenter="moveTaskSelection(index)"
>
<div class="h-full w-[52px] shrink-0 border-r border-dashed border-ink px-1.5 py-[7px] sm:w-[62px] sm:px-2">
<input
:value="task.label"
type="text"
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 })"
/>
</div>
@@ -190,13 +326,14 @@ onBeforeUnmount(() => {
type="text"
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"
@input="emit('update:task-title', { index, value: $event.target.value })"
/>
</div>
<div class="flex h-full w-[36px] shrink-0 items-center justify-center p-[8px] sm:w-[42px] sm:p-[10px]">
<button
type="button"
class="flex h-full w-full items-center justify-center border border-dashed transition"
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)"
>
@@ -207,9 +344,12 @@ onBeforeUnmount(() => {
</div>
</section>
<section class="relative">
<div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">MEMO</div>
<div class="border-t border-ink">
<section>
<div class="flex items-center gap-2 text-muted">
<span class="shrink-0">MEMO</span>
<span class="h-px flex-1 bg-ink"></span>
</div>
<div>
<div
v-for="(memoItem, index) in memo"
:key="`memo-${index}`"
@@ -237,10 +377,13 @@ onBeforeUnmount(() => {
</section>
</div>
<section class="planner-sheet__timetable relative w-full shrink-0 lg:w-[210px]">
<div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TIME TABLE</div>
<section class="planner-sheet__timetable w-full shrink-0 lg:w-[210px]">
<div 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>
<div class="planner-sheet__timetable-scroll overflow-x-auto pb-1">
<div class="planner-sheet__timetable-grid min-w-[210px] border-t border-ink">
<div class="planner-sheet__timetable-grid min-w-[210px]">
<div
v-for="(hour, index) in hours"
:key="`${hour}-${index}`"

25
src/components/SettingsDashboard.vue
View File

@@ -30,6 +30,10 @@ const props = defineProps({
type: String,
default: '',
},
guideTooltipResetMessage: {
type: String,
default: '',
},
})
const emit = defineEmits([
@@ -37,6 +41,7 @@ const emit = defineEmits([
'update:password-field',
'submit:profile',
'submit:password',
'reset-guide-tooltips',
])
const initials = computed(() =>
@@ -77,6 +82,26 @@ function updatePasswordField(field, event) {
...
</p>
</div> -->
<div class="mt-6 rounded-[24px] border border-stone-200 bg-white/80 p-4">
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">GUIDE TOOLTIPS</p>
<p class="mt-3 text-sm font-semibold leading-6 text-stone-700">
숨긴 가이드 툴팁을 다시 표시합니다.
</p>
<button
type="button"
class="mt-4 rounded-full border border-stone-900 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-900 transition hover:bg-stone-900 hover:text-white"
@click="emit('reset-guide-tooltips')"
>
가이드 다시 보기
</button>
<p
v-if="guideTooltipResetMessage"
class="mt-3 rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-3 text-xs font-semibold leading-5 text-stone-600"
>
{{ guideTooltipResetMessage }}
</p>
</div>
</aside>
<div class="grid gap-6">

38
src/style.css
View File

@@ -165,6 +165,35 @@
.planner-sheet__meta-top > div,
.planner-sheet__meta-bottom > div {
min-height: 78px !important;
overflow: visible !important;
}
.planner-sheet__meta-bottom > div:first-child {
width: auto !important;
max-width: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.planner-sheet__meta-bottom > div:last-child {
width: 210px !important;
max-width: 210px !important;
flex: 0 0 210px !important;
}
.planner-field__header {
width: 100% !important;
min-width: 0 !important;
}
.planner-field__header > span:first-child {
white-space: nowrap !important;
letter-spacing: 0.16em !important;
}
.planner-sheet__meta-bottom > div:last-child > p {
padding-top: 24px !important;
white-space: nowrap !important;
}
.planner-sheet__lists {
@@ -187,11 +216,14 @@
}
.planner-sheet textarea {
height: auto !important;
min-height: 48px !important;
overflow: visible !important;
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
overflow: hidden !important;
padding-top: 4px !important;
line-height: 1.55 !important;
white-space: pre-wrap !important;
word-break: break-word !important;
}
.print-paper--double .print-sheet-frame {