v0.1.27 - 달력 기준과 우측 패널 레이아웃 정리
This commit is contained in:
176
src/App.vue
176
src/App.vue
@@ -314,7 +314,7 @@ const calendarDays = computed(() => {
|
||||
const start = new Date(first)
|
||||
start.setDate(first.getDate() - first.getDay())
|
||||
|
||||
return Array.from({ length: 35 }, (_, index) => {
|
||||
return Array.from({ length: 42 }, (_, index) => {
|
||||
const date = new Date(start)
|
||||
date.setDate(start.getDate() + index)
|
||||
return {
|
||||
@@ -1522,7 +1522,7 @@ onMounted(() => {
|
||||
|
||||
<section
|
||||
v-else-if="screenMode === 'planner' && viewMode === 'focus'"
|
||||
class="print-hidden grid gap-6 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_340px]"
|
||||
class="print-hidden grid gap-6 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_440px] 2xl:grid-cols-[minmax(0,1fr)_520px]"
|
||||
>
|
||||
<div class="scrollbar-hide print-target rounded-[28px] border border-white/60 bg-white/45 p-4 shadow-[0_18px_60px_rgba(28,25,23,0.06)] xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3">
|
||||
<PlannerPage
|
||||
@@ -1549,6 +1549,91 @@ onMounted(() => {
|
||||
|
||||
<aside class="scrollbar-hide print-hidden rounded-[28px] border border-white/60 bg-white/50 p-3 shadow-[0_18px_60px_rgba(28,25,23,0.06)] xl:h-full xl:min-h-0 xl:overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 rounded-[22px] p-2">
|
||||
<div class="sticky top-0 z-10 -mx-1 rounded-[26px] bg-[linear-gradient(180deg,rgba(245,241,233,0.98)_0%,rgba(245,241,233,0.94)_78%,rgba(245,241,233,0)_100%)] px-1 pb-4 pt-1 backdrop-blur-sm">
|
||||
<div class="grid gap-4 2xl:grid-cols-2">
|
||||
<section class="2xl:col-span-2">
|
||||
<MiniCalendar
|
||||
:month-label="monthLabel"
|
||||
:year-label="yearLabel"
|
||||
:days="calendarDays"
|
||||
:selected-key="toKey(selectedDate)"
|
||||
:marked-keys="markedDateKeys"
|
||||
@shift-month="shiftCalendarMonth"
|
||||
@shift-year="shiftCalendarYear"
|
||||
@go-today="selectDate(new Date())"
|
||||
@select="selectDate"
|
||||
/>
|
||||
</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">
|
||||
ON이면 왼쪽 라벨을 01, 02 형태로 채우고 OFF이면 비워 둡니다.
|
||||
</p>
|
||||
</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>
|
||||
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
|
||||
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
|
||||
목표 검색과 기간 설정은 GOALS 화면에서 관리하고, 여기서는 현재 날짜에 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="planner.goalEnabled ? 'bg-stone-900' : 'bg-stone-300'"
|
||||
:disabled="!hasActiveGoalForSelectedDate"
|
||||
@click="updateGoalEnabled(planner, !planner.goalEnabled)"
|
||||
>
|
||||
<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="planner.goalEnabled ? '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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</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">PREV SNAPSHOT</p>
|
||||
<div class="space-y-3">
|
||||
@@ -1562,28 +1647,6 @@ onMounted(() => {
|
||||
</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)]">
|
||||
<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">
|
||||
ON이면 왼쪽 라벨을 01, 02 형태로 채우고 OFF이면 비워 둡니다.
|
||||
</p>
|
||||
</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/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="space-y-3">
|
||||
@@ -1598,64 +1661,7 @@ onMounted(() => {
|
||||
</section>
|
||||
|
||||
<section class="rounded-[24px] border border-stone-200 bg-white/82 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">D-DAY 사용</p>
|
||||
<p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
|
||||
목표 검색과 기간 설정은 GOALS 화면에서 관리하고, 여기서는 현재 날짜에 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="planner.goalEnabled ? 'bg-stone-900' : 'bg-stone-300'"
|
||||
:disabled="!hasActiveGoalForSelectedDate"
|
||||
@click="updateGoalEnabled(planner, !planner.goalEnabled)"
|
||||
>
|
||||
<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="planner.goalEnabled ? '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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MiniCalendar
|
||||
:month-label="monthLabel"
|
||||
:year-label="yearLabel"
|
||||
:days="calendarDays"
|
||||
:selected-key="toKey(selectedDate)"
|
||||
:marked-keys="markedDateKeys"
|
||||
@shift-month="shiftCalendarMonth"
|
||||
@shift-year="shiftCalendarYear"
|
||||
@go-today="selectDate(new Date())"
|
||||
@select="selectDate"
|
||||
/>
|
||||
|
||||
<section class="grid grid-cols-2 gap-4">
|
||||
<article class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
|
||||
<article>
|
||||
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
|
||||
<div class="mt-5 space-y-4">
|
||||
<div>
|
||||
@@ -1668,8 +1674,10 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<article class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
|
||||
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
|
||||
<article>
|
||||
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">NEXT DAY</p>
|
||||
<div class="mt-5 space-y-3">
|
||||
<p class="text-lg font-semibold tracking-[-0.04em] text-stone-900">
|
||||
@@ -1677,7 +1685,7 @@ onMounted(() => {
|
||||
<span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
|
||||
</p>
|
||||
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
|
||||
내일의 첫 작업은 "{{ secondaryPlanner.tasks[0]?.title || '새 작업 추가' }}" 로 시작합니다.
|
||||
내일의 첫 작업은 "{{ secondaryPlanner.tasks.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -117,7 +117,12 @@ function selectYear(year) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
|
||||
<span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
|
||||
<span
|
||||
v-for="weekday in ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']"
|
||||
:key="weekday"
|
||||
>
|
||||
{{ weekday }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user