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

v0.1.39 - 달력 원형과 D-DAY 표시 상태 보정

Browse Source
This commit is contained in:
zenn
2026-04-22 18:13:50 +09:00
parent 3c3b0d20dd
commit b18af56c3c
6 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@@ -212,7 +212,7 @@ function startOfDay(date) {
function buildFallbackRecord(date) {
return {
comment: '',
goalEnabled: true,
goalEnabled: false,
selectedGoalId: null,
tasks: Array.from({ length: 15 }, (_, index) => ({
label: '',
@@ -363,6 +363,7 @@ const activePlannerGoals = computed(() =>
}),
)
const plannerGoal = computed(() => activePlannerGoals.value[0] ?? null)
const plannerGoalToggleOn = computed(() => Boolean(plannerGoal.value) && planner.value.goalEnabled)
const plannerDday = computed(() => {
if (!planner.value.goalEnabled || !plannerGoal.value) {
return ''
@@ -1930,13 +1931,13 @@ onBeforeUnmount(() => {
<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'"
:class="plannerGoalToggleOn ? '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'"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>
@@ -2091,13 +2092,13 @@ onBeforeUnmount(() => {
<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'"
:class="plannerGoalToggleOn ? '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'"
:class="plannerGoalToggleOn ? 'translate-x-8' : 'translate-x-0'"
/>
</button>
</div>

2
src/components/MiniCalendar.vue
View File

@@ -132,7 +132,7 @@ function selectYear(year) {
>
<button
type="button"
class="relative flex size-8 items-center justify-center rounded-full border text-[10px] font-semibold transition sm:size-10 sm:text-[11px]"
class="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold transition sm:h-[44px] sm:w-[44px] sm:text-[11px]"
:class="[
day.key === selectedKey
? 'border-ink bg-ink text-white'

14
src/components/PlannerPage.vue
View File

@@ -132,7 +132,19 @@ onBeforeUnmount(() => {
</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>
<p class="pt-5 text-[11px] tracking-[0.2em] text-ink sm:pt-6 sm:text-sm">{{ dday }}</p>
<p
class="pt-5 text-[11px] tracking-[0.14em] text-ink sm:pt-6 sm:text-sm"
style="
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
"
>
{{ dday }}
</p>
</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">