tab, component, popup 변경

components/base/AppButton.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/ToastGrid.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, defineExpose } from 'vue';
+import type { OptColumn, OptRow } from 'tui-grid/types/options';
+import type { TuiGridElement } from 'vue3-tui-grid';
+import type Grid from 'tui-grid';
+
+interface TreeColumnOptions {
+  name: string;
+  useCascadingCheckbox?: boolean;
+}
+
+const tuiGridRef = ref<TuiGridElement>();
+
+const selectionUnit = "row"
+
+const props = defineProps<{
+  data: OptRow[];
+  // editor: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
+  columns: OptColumn[];
+  treeColumnOptions?: TreeColumnOptions;
+  rowHeaders?: string[];
+  rowKey?: string;
+}>();
+
+// grid api : https://nhn.github.io/tui.grid/latest/Grid
+// const ref = ref<InstanceType<typeof ToastGrid>>();
+// ref.value?.api()?.clear();  
+// ref.value?.api()?.getModifiedRows();
+defineExpose({
+  api: (): Grid | undefined => tuiGridRef.value?.gridInstance,
+  clearGrid: () => clearGrid(),
+});
+
+function clearGrid() {
+  tuiGridRef.value?.gridInstance.clear();
+}
+
+</script>
+
+<template>
+    <tui-grid
+      ref="tuiGridRef"
+      :data="props.data"
+      :columns="props.columns"
+      :treeColumnOptions="props.treeColumnOptions"
+      :rowHeaders="props.rowHeaders"
+      :rowKey="props.rowKey"
+      :selectionUnit="selectionUnit"
+    />
+</template>

components/base/customPopup.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="show" class="popup-overlay" @click.self="show = false">
+    <div class="popup-container">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const show = defineModel('show', {type: Boolean, default:false});
+
+</script>
+
+<style scoped>
+.popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.popup-container {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>