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

v0.1.34 - 모바일 달력 카드 밀도와 버튼 크기 조정

Browse Source
This commit is contained in:
zenn
2026-04-22 17:32:39 +09:00
parent 4d48176555
commit 4e1263348e
4 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MiniCalendar.vue
View File

@@ -40,23 +40,23 @@ function selectYear(year) {
</script>
<template>
<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="relative mb-4 flex items-start justify-between gap-4">
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-4 shadow-[0_12px_36px_rgba(28,25,23,0.05)] sm:p-5">
<div class="relative mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
<div class="min-w-0">
<h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
<div class="mt-2 flex items-center gap-3">
<div class="mt-2 flex items-center gap-2 sm:gap-3">
<button
type="button"
class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
@click="emit('shift-month', -1)"
>
←
</button>
<div class="flex min-w-0 items-center gap-2">
<p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
<div class="flex min-w-0 items-center gap-1.5 sm:gap-2">
<p class="text-[15px] font-semibold tracking-[-0.04em] text-stone-900 sm:text-base">{{ monthLabel }}</p>
<button
type="button"
class="rounded-full px-2 py-1 text-[11px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink"
class="rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink sm:text-[11px]"
@click="isYearPickerOpen = !isYearPickerOpen"
>
{{ yearLabel }}
@@ -64,7 +64,7 @@ function selectYear(year) {
</div>
<button
type="button"
class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
@click="emit('shift-month', 1)"
>
→
@@ -73,7 +73,7 @@ function selectYear(year) {
</div>
<button
type="button"
class="shrink-0 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
class="shrink-0 self-start rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink sm:self-auto"
@click="emit('go-today')"
>
TODAY
@@ -81,7 +81,7 @@ function selectYear(year) {
<div
v-if="isYearPickerOpen"
class="absolute right-0 top-14 z-10 w-[220px] rounded-2xl border border-stone-200 bg-white p-4 shadow-lg"
class="absolute left-0 right-0 top-[88px] z-10 rounded-2xl border border-stone-200 bg-white p-4 shadow-lg sm:left-auto sm:right-0 sm:top-14 sm:w-[220px]"
>
<div class="mb-3 flex items-center justify-between">
<button
@@ -116,7 +116,7 @@ function selectYear(year) {
</div>
</div>
</div>
<div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
<div class="mb-3 grid grid-cols-7 gap-1.5 text-center text-[9px] font-bold tracking-[0.1em] text-stone-400 sm:gap-2 sm:text-[10px] sm:tracking-[0.12em]">
<span
v-for="weekday in ['일', '월', '화', '수', '목', '금', '토']"
:key="weekday"
@@ -124,12 +124,12 @@ function selectYear(year) {
{{ weekday }}
</span>
</div>
<div class="grid grid-cols-7 gap-2">
<div class="grid grid-cols-7 gap-1.5 sm:gap-2">
<button
v-for="day in days"
:key="day.key"
type="button"
class="aspect-square rounded-full border text-[11px] font-semibold transition"
class="aspect-square min-h-[34px] rounded-full border text-[10px] font-semibold transition sm:min-h-[40px] sm:text-[11px]"
:class="[
day.key === selectedKey
? 'border-ink bg-ink text-white'
@@ -142,7 +142,7 @@ function selectYear(year) {
<span>{{ day.label }}</span>
<span
v-if="markedKeys.includes(day.key)"
class="absolute bottom-[3px] h-[5px] w-[5px] rounded-full bg-red-500"
class="absolute bottom-[3px] h-1 w-1 rounded-full bg-red-500 sm:h-[5px] sm:w-[5px]"
/>
</span>
</button>