chore: initialize frontend miniapp repository

src/components/floor/FloorSelector.vue

@@ -0,0 +1,93 @@
+<template>
+  <view class="floor-selector">
+    <view
+      v-for="floor in floors"
+      :key="floor.id"
+      class="floor-item"
+      :class="{ active: currentFloor === floor.id, disabled: floor.disabled }"
+      @tap="handleFloorClick(floor)"
+    >
+      <text class="floor-label">{{ floor.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Floor {
+  id: string
+  label: string
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  current?: string
+  floors?: Floor[]
+}>()
+
+const emit = defineEmits<{
+  change: [floorId: string]
+}>()
+
+const currentFloor = ref(props.current || '1F')
+
+const defaultFloors: Floor[] = [
+  { id: '3F', label: '3F' },
+  { id: '2F', label: '2F' },
+  { id: '1F', label: '1F' },
+  { id: 'B1', label: 'B1' }
+]
+
+const floors = props.floors || defaultFloors
+
+const handleFloorClick = (floor: Floor) => {
+  if (floor.disabled) return
+  currentFloor.value = floor.id
+  emit('change', floor.id)
+}
+</script>
+
+<style scoped lang="scss">
+.floor-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: var(--blur-medium);
+  border-radius: var(--radius-button);
+  padding: 8px;
+  box-shadow: var(--shadow-md);
+}
+
+.floor-item {
+  width: 46px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border-radius: var(--radius-button);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.floor-item.active {
+  background-color: #000000;
+}
+
+.floor-item.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.floor-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--museum-text-secondary);
+}
+
+.floor-item.active .floor-label {
+  color: var(--museum-accent);
+}
+</style>