feat. 환경 세팅

layers/components/atoms/Button.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  size?: "large" | "medium" | "small" | "extra-small";
+  disabled?: boolean;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "medium",
+  disabled: false,
+  icon: "",
+});
+
+// 크기별 스타일 클래스
+const sizeClasses = {
+  large: "px-10 h-16 text-lg rounded-lg",
+  medium: "px-10 h-14 text-base rounded-lg",
+  small: "px-10 h-12 text-sm rounded-lg",
+  "extra-small": "px-6 h-10 text-sm rounded",
+};
+
+// 상태별 스타일 클래스
+const getStateClasses = (disabled: boolean) => {
+  if (disabled) {
+    return "bg-white/10 text-gray-400 cursor-not-allowed";
+  }
+
+  return "bg-gray-700 text-white cursor-pointer";
+};
+</script>
+
+<template>
+  <button
+    :class="[
+      'group relative inline-flex items-center font-medium transition-all duration-200 border border-gray-600/30 overflow-hidden',
+      sizeClasses[size],
+      getStateClasses(props.disabled),
+    ]"
+    :disabled="disabled"
+  >
+    <span
+      v-if="!disabled"
+      class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200 rounded-inherit"
+    ></span>
+    <span class="relative">
+      <slot />
+      <span v-if="icon" :class="['flex-shrink-0']" v-html="icon" />
+    </span>
+  </button>
+</template>

layers/components/atoms/LanguageSwitcher.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { locale } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+
+const selectedLocale = ref(locale.value);
+
+const switchLanguage = async () => {
+  const path = switchLocalePath(selectedLocale.value);
+  if (path) {
+    await navigateTo(path);
+  }
+  console.log("Language:", locale.value);
+};
+</script>
+
+<template>
+  <div class="language-switcher">
+    <select v-model="selectedLocale" @change="switchLanguage">
+      <option value="ko">한국어</option>
+      <option value="en">English</option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.language-switcher {
+  display: inline-block;
+}
+
+.language-switcher select {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+}
+
+.language-switcher select:hover {
+  border-color: #999;
+}
+</style>