Unify month navigation UI

components/MonthNavigator.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="flex items-center gap-2">
+    <button
+      type="button"
+      class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper"
+      aria-label="이전 달"
+      @click="moveMonth(-1)"
+    >
+      <img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_left.svg" alt="">
+    </button>
+    <button
+      type="button"
+      class="rounded-md px-1 py-2 text-left font-extrabold active:bg-paper"
+      :class="labelMode === 'month' ? 'text-2xl' : 'text-xl'"
+      @click="monthPickerOpen = true"
+    >
+      {{ displayMonth }}
+    </button>
+    <button
+      type="button"
+      class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper"
+      aria-label="다음 달"
+      @click="moveMonth(1)"
+    >
+      <img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
+    </button>
+  </div>
+
+  <BottomSheetMonthPicker v-model="model" v-model:open="monthPickerOpen" />
+</template>
+
+<script setup lang="ts">
+import { addMonths, format, parse } from 'date-fns'
+
+const props = withDefaults(defineProps<{
+  labelMode?: 'month' | 'yearMonth'
+}>(), {
+  labelMode: 'yearMonth'
+})
+
+const model = defineModel<string>({ required: true })
+const monthPickerOpen = ref(false)
+
+const displayMonth = computed(() => {
+  const date = parse(model.value, 'yyyy-MM', new Date())
+  return props.labelMode === 'month' ? format(date, 'M월') : format(date, 'yyyy년 M월')
+})
+
+function moveMonth(amount: number) {
+  const date = parse(model.value, 'yyyy-MM', new Date())
+  model.value = format(addMonths(date, amount), 'yyyy-MM')
+}
+</script>