Share month picker sheet

components/BottomSheetMonthPicker.vue

@@ -0,0 +1,87 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="open" class="fixed inset-0 z-40 bg-ink/35" @click="close" />
+    </Transition>
+
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="translate-y-full"
+      enter-to-class="translate-y-0"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="translate-y-0"
+      leave-to-class="translate-y-full"
+    >
+      <section v-if="open" class="fixed inset-x-0 bottom-0 z-50 mx-auto max-w-lg rounded-t-2xl bg-white shadow-2xl">
+        <div class="border-b border-line px-4 pb-3 pt-2">
+          <div class="mx-auto mb-3 h-1 w-10 rounded-full bg-line" />
+          <div class="flex items-center justify-between">
+            <h2 class="text-base font-bold">월 선택</h2>
+            <button type="button" class="text-sm font-semibold text-muted" @click="close">닫기</button>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between px-4 py-4">
+          <button class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper" type="button" aria-label="이전 년도" @click="pickerYear--">
+            <img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_left.svg" alt="">
+          </button>
+          <strong class="text-xl">{{ pickerYear }}</strong>
+          <button class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper" type="button" aria-label="다음 년도" @click="pickerYear++">
+            <img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
+          </button>
+        </div>
+
+        <div class="grid grid-cols-4 gap-y-2 px-4 pb-6">
+          <button
+            v-for="month in 12"
+            :key="month"
+            type="button"
+            class="rounded-md py-3 text-base font-bold"
+            :class="isSelected(month) ? 'bg-red-50 text-red-500' : 'active:bg-paper'"
+            @click="select(month)"
+          >
+            {{ month }}월
+          </button>
+        </div>
+      </section>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:open': [value: boolean]
+}>()
+
+const pickerYear = ref(Number(props.modelValue.slice(0, 4)))
+
+watch(() => props.open, (open) => {
+  if (open) pickerYear.value = Number(props.modelValue.slice(0, 4))
+})
+
+function isSelected(month: number) {
+  return props.modelValue === `${pickerYear.value}-${String(month).padStart(2, '0')}`
+}
+
+function select(month: number) {
+  emit('update:modelValue', `${pickerYear.value}-${String(month).padStart(2, '0')}`)
+  close()
+}
+
+function close() {
+  emit('update:open', false)
+}
+</script>