v0.1.28 - 사이드 레이아웃 재정리와 2페이지 인쇄 보정
This commit is contained in:
120
src/App.vue
120
src/App.vue
@@ -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)_440px] 2xl:grid-cols-[minmax(0,1fr)_520px]"
|
||||
class="print-hidden grid gap-6 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_460px] 2xl:grid-cols-[minmax(0,1fr)_640px]"
|
||||
>
|
||||
<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
|
||||
@@ -1548,10 +1548,9 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div class="grid gap-4 rounded-[22px] p-2 2xl:grid-cols-[280px_minmax(0,1fr)] 2xl:items-start">
|
||||
<div class="grid gap-4">
|
||||
<section class="2xl:w-[280px]">
|
||||
<MiniCalendar
|
||||
:month-label="monthLabel"
|
||||
:year-label="yearLabel"
|
||||
@@ -1570,7 +1569,7 @@ onMounted(() => {
|
||||
<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
|
||||
@@ -1592,7 +1591,7 @@ onMounted(() => {
|
||||
<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를 보여줄지 여부만 제어합니다.
|
||||
현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -1632,64 +1631,65 @@ onMounted(() => {
|
||||
</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">
|
||||
<p
|
||||
v-for="item in prevSnapshotItems"
|
||||
:key="item"
|
||||
class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
|
||||
>
|
||||
{{ item || ' ' }}
|
||||
</p>
|
||||
<div class="grid gap-4">
|
||||
<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">STATS</p>
|
||||
<div class="mt-5 space-y-4">
|
||||
<div>
|
||||
<p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
|
||||
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
|
||||
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<span>{{ secondaryDateDisplay.main }}</span>
|
||||
<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.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</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">
|
||||
<p
|
||||
v-for="item in readNextItems"
|
||||
:key="item"
|
||||
class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
|
||||
>
|
||||
{{ 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)]">
|
||||
<article>
|
||||
<p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
|
||||
<div class="mt-5 space-y-4">
|
||||
<div>
|
||||
<p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
|
||||
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
|
||||
<p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<span>{{ secondaryDateDisplay.main }}</span>
|
||||
<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.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
|
||||
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)] 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 sm:grid-cols-3 2xl:grid-cols-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>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)] 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 sm:grid-cols-3 2xl:grid-cols-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>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user