planner.sori.studio/src/components/MiniCalendar.vue

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  monthLabel: {
    type: String,
    required: true,
  },
  yearLabel: {
    type: String,
    required: true,
  },
  days: {
    type: Array,
    required: true,
  },
  selectedKey: {
    type: String,
    required: true,
  },
  markedKeys: {
    type: Array,
    required: true,
  },
})

const emit = defineEmits(['select', 'shift-month', 'shift-year', 'go-today'])

const isYearPickerOpen = ref(false)
const currentYearNumber = computed(() => Number(props.yearLabel))
const yearRangeStart = computed(() => currentYearNumber.value - (currentYearNumber.value % 12))
const visibleYears = computed(() =>
  Array.from({ length: 12 }, (_, index) => yearRangeStart.value + index),
)

function selectYear(year) {
  emit('shift-year', year - currentYearNumber.value)
  isYearPickerOpen.value = false
}
</script>

<template>
  <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-2 sm:gap-3">
          <button
            type="button"
            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-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-[10px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink sm:text-[11px]"
              @click="isYearPickerOpen = !isYearPickerOpen"
            >
              {{ yearLabel }}
            </button>
          </div>
          <button
            type="button"
            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>
      </div>
      <button
        type="button"
        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
      </button>

      <div
        v-if="isYearPickerOpen"
        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
            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"
            @click="emit('shift-year', -12)"
          >
            ←
          </button>
          <p class="text-[11px] font-bold tracking-[0.16em] text-stone-500">
            {{ visibleYears[0] }} - {{ visibleYears[visibleYears.length - 1] }}
          </p>
          <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"
            @click="emit('shift-year', 12)"
          >
            →
          </button>
        </div>
        <div class="grid grid-cols-3 gap-2">
          <button
            v-for="year in visibleYears"
            :key="year"
            type="button"
            class="rounded-xl border px-3 py-2 text-[11px] font-semibold transition"
            :class="year === currentYearNumber ? 'border-ink bg-ink text-white' : 'border-stone-200 text-stone-700 hover:border-stone-400 hover:bg-stone-50'"
            @click="selectYear(year)"
          >
            {{ year }}
          </button>
        </div>
      </div>
    </div>
    <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"
      >
        {{ weekday }}
      </span>
    </div>
    <div class="grid grid-cols-7 gap-1.5 sm:gap-2">
      <div
        v-for="day in days"
        :key="day.key"
        class="flex items-center justify-center"
      >
        <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="[
            day.key === selectedKey
              ? 'border-ink bg-ink text-white'
              : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
            day.isCurrentMonth ? '' : 'opacity-35',
          ]"
          @click="emit('select', day.date)"
        >
          <span>{{ day.label }}</span>
          <span
            v-if="markedKeys.includes(day.key)"
            class="absolute bottom-[3px] h-1 w-1 rounded-full bg-red-500 sm:h-[5px] sm:w-[5px]"
          />
        </button>
      </div>
    </div>
  </section>
</template>