[폴더, 파일 구조 정리]

components/base/button/CommonButton.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    :class="['app-button', variant, size]"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+}
+
+interface Emits {
+  click: [];
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  size: "medium",
+  disabled: false,
+});
+
+defineEmits<Emits>();
+</script>
+
+<style scoped>
+.app-button {
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.app-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Variants */
+.primary {
+  background-color: #00dc82;
+  color: white;
+}
+
+.primary:hover:not(:disabled) {
+  background-color: #00b368;
+}
+
+.secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.secondary:hover:not(:disabled) {
+  background-color: #5a6268;
+}
+
+.danger {
+  background-color: #dc3545;
+  color: white;
+}
+
+.danger:hover:not(:disabled) {
+  background-color: #c82333;
+}
+
+/* Sizes */
+.small {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.medium {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.large {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+</style>

components/base/button/PermissionButton.vue

@@ -0,0 +1,95 @@
+<template>
+  <button
+    v-if="hasPermission"
+    v-bind="$attrs"
+    :class="buttonClass"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot>{{ buttonText }}</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** 버튼 코드 (권한 체크용) */
+  buttonCode: string;
+  /** 버튼 비활성화 여부 */
+  disabled?: boolean;
+  /** 추가 CSS 클래스 */
+  class?: string;
+}
+
+interface Emits {
+  /** 클릭 이벤트 */
+  (e: "click", event: MouseEvent): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  class: "",
+});
+
+const emit = defineEmits<Emits>();
+
+// 권한 체크 - usePermission composable만 사용
+const permission = usePermission();
+const hasPermission = computed(() =>
+  permission.hasComponentPermission(props.buttonCode)
+);
+
+// 버튼 텍스트 가져오기 - usePermission composable 사용
+const buttonText = computed(() => {
+  const component = permission.getResourceByCode(props.buttonCode);
+  return component?.name || props.buttonCode;
+});
+
+// 버튼 클래스 계산
+const buttonClass = computed(() => {
+  const baseClass = "permission-button";
+  const disabledClass = props.disabled ? "permission-button--disabled" : "";
+  const customClass = props.class || "";
+
+  return [baseClass, disabledClass, customClass].filter(Boolean).join(" ");
+});
+
+// 클릭 이벤트 처리
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && hasPermission.value) {
+    emit("click", event);
+  }
+};
+</script>
+
+<style scoped>
+.permission-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #3b82f6;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  user-select: none;
+  min-height: 36px;
+}
+
+.permission-button:hover:not(.permission-button--disabled) {
+  background-color: #2563eb;
+}
+
+.permission-button:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.permission-button--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>