leejisun9/bio_frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[폴더, 파일 구조 정리]

Browse Source
This commit is contained in:
sohot8653
2025-09-25 15:33:11 +09:00
parent 51019d7f5f
commit ded762517e
30 changed files with 644 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
components/base/AppButton.vue → components/base/button/CommonButton.vue
View File

0
components/base/PermissionButton.vue → components/base/button/PermissionButton.vue
View File

100
components/base/ToastGrid.vue → components/base/grid/ToastGrid.vue
View File

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

0
components/PageDescription.vue → components/base/info/PageDescription.vue
View File

0
components/layout/GlobalLoading.vue → components/base/loading/GlobalLoading.vue
View File

55
components/base/customPopup.vue → components/base/popup/CommonPopup.vue
View File

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

0
components/BatchGraph.vue → components/domain/culture-graph/BatchGraph.vue
View File

2
components/BatchTabs.vue → components/domain/culture-graph/BatchTabs.vue
View File

@@ -15,7 +15,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import BatchGraph from "~/components/BatchGraph.vue"; import BatchGraph from "~/components/domain/culture-graph/BatchGraph.vue";
const batchNames = ["배치 1", "배치 2", "배치 3", "배치 4"]; const batchNames = ["배치 1", "배치 2", "배치 3", "배치 4"];
const currentTab = ref(0); const currentTab = ref(0);
</script> </script>

0
components/CustomContextMenu.vue → components/domain/culture-graph/CustomContextMenu.vue
View File

95
components/layout/ContentsWrapper.vue
View File

@@ -1,95 +0,0 @@
<template>
<div class="wrapper">
<!-- 경로 -->
<nav class="breadcrumb">{{ breadcrumb }}</nav>
<!-- 화면 명 + 버튼 영역 -->
<header class="header">
<h1 class="title">{{ pageTitle }}</h1>
<div class="header-actions">
<slot name="actions" />
</div>
</header>
<!-- 메인 콘텐츠 -->
<main class="content">
<slot />
</main>
</div>
</template>
<script setup lang="ts">
import { useRoute } from '#imports'
const route = useRoute()
// 경로(메뉴 경로)
const breadcrumb = computed(() => route.path)
// 화면명(meta.title 값)
const pageTitle = computed(() => route.meta.title || 'Untitled Page')
</script>
<style scoped>
.wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 16px;
background: #f9f9f9;
min-height: 100%;
}
.breadcrumb {
font-size: 14px;
color: #666;
}
/* 화면명과 버튼을 좌우 끝으로 배치 */
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
margin: 0;
font-size: 20px;
font-weight: bold;
}
.header-actions {
display: flex;
gap: 8px;
}
.content {
flex: 1;
padding: 12px;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 버튼 공통 스타일 */
.header-actions ::v-deep button {
background-color: #4CAF50;
color: white;
font-size: 14px;
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.header-actions ::v-deep button:hover {
background-color: #45a049;
}
.header-actions ::v-deep button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>

19
components/layout/AppHeader.vue → components/layout/navigation/AppHeader.vue
View File

@@ -18,7 +18,7 @@
<!-- 사용자 정보 및 드롭다운 --> <!-- 사용자 정보 및 드롭다운 -->
<div class="user-menu-wrapper"> <div class="user-menu-wrapper">
<div class="user-info" @click="toggleDropdown"> <div class="user-info" @click="toggleDropdown">
<span class="user-name">{{ userStore.name }}</span> <span class="user-name">{{ userStore.user?.name }}</span>
<div class="user-icon"> <div class="user-icon">
<svg <svg
width="24" width="24"
@@ -36,10 +36,6 @@
</div> </div>
</div> </div>
<div v-show="showDropdown" class="user-dropdown"> <div v-show="showDropdown" class="user-dropdown">
<div class="user-details">
<p class="user-email">{{ userStore.user?.email }}</p>
<p class="user-role">{{ userStore.isAdmin ? "관리자" : "사용자" }}</p>
</div>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<button class="logout-btn" @click="logout"> <button class="logout-btn" @click="logout">
<svg <svg
@@ -61,12 +57,7 @@
</header> </header>
</template> </template>
<script setup> <script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useUserStore } from "~/stores/user";
import { usePermissionsStore } from "~/stores/permissions";
// defineModel 사용
const modelValue = defineModel({ type: String, required: true }); const modelValue = defineModel({ type: String, required: true });
const showDropdown = ref(false); const showDropdown = ref(false);
@@ -84,7 +75,7 @@ const availableMenus = computed(() => {
}); });
// 메뉴 클릭 핸들러 // 메뉴 클릭 핸들러
function onMenuClick(menu) { function onMenuClick(menu: string) {
modelValue.value = menu; modelValue.value = menu;
} }
@@ -92,9 +83,9 @@ function toggleDropdown() {
showDropdown.value = !showDropdown.value; showDropdown.value = !showDropdown.value;
} }
function handleClickOutside(event) { function handleClickOutside(event: MouseEvent) {
const menu = document.querySelector(".user-menu-wrapper"); const menu = document.querySelector(".user-menu-wrapper");
if (menu && !menu.contains(event.target)) { if (menu && !menu.contains(event.target as Node)) {
showDropdown.value = false; showDropdown.value = false;
} }
} }

0
components/layout/SubMenuBar.vue → components/layout/navigation/SubMenuBar.vue
View File

0
components/layout/TabBar.vue → components/layout/navigation/TabBar.vue
View File

91
components/layout/wrapper/ContentsWrapper.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div class="wrapper">
<!-- 경로 -->
<nav class="breadcrumb">{{ breadcrumb }}</nav>
<!-- 화면 명 + 버튼 영역 -->
<header class="header">
<h1 class="title">{{ pageTitle }}</h1>
<div class="header-actions">
<slot name="actions" />
</div>
</header>
<!-- 메인 콘텐츠 -->
<main class="content">
<slot />
</main>
</div>
</template>
<script setup lang="ts">
const route = useRoute();
// 경로(메뉴 경로)
const breadcrumb = computed(() => route.path);
// 화면명(meta.title 값)
const pageTitle = computed(() => route.meta.title || "Untitled Page");
</script>
<style scoped>
.wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 16px;
background: #f9f9f9;
min-height: 100%;
}
.breadcrumb {
font-size: 14px;
color: #666;
}
/* 화면명과 버튼을 좌우 끝으로 배치 */
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
margin: 0;
font-size: 20px;
font-weight: bold;
}
.header-actions {
display: flex;
gap: 8px;
}
.content {
flex: 1;
padding: 12px;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 버튼 공통 스타일 */
.header-actions ::v-deep button {
background-color: #4caf50;
color: white;
font-size: 14px;
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.header-actions ::v-deep button:hover {
background-color: #45a049;
}
.header-actions ::v-deep button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>

159
components/layout/PopupWrapper.vue → components/layout/wrapper/PopupWrapper.vue
View File

@@ -1,81 +1,78 @@
<template> <template>
<customPopup v-model:show="show"> <CommonPopup v-model:show="show">
<div class="popup-content" :style="{ width, height }"> <div class="popup-content" :style="{ width, height }">
<!-- Top --> <!-- Top -->
<div class="popup-top"> <div class="popup-top">
<slot name="top"></slot> <slot name="top"></slot>
</div> </div>
<!-- Middle --> <!-- Middle -->
<div class="popup-middle"> <div class="popup-middle">
<slot name="middle"></slot> <slot name="middle"></slot>
</div> </div>
<!-- Bottom --> <!-- Bottom -->
<div class="popup-bottom"> <div class="popup-bottom">
<button class="popup-close" @click="show = false">닫기</button> <button class="popup-close" @click="show = false">닫기</button>
<slot name="bottom"></slot> <slot name="bottom"></slot>
</div> </div>
</div> </div>
</customPopup> </CommonPopup>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{
defineProps<{ width?: string;
width?: string height?: string;
height?: string }>();
}>()
// defineModel + 기본값 지정
// defineModel + 기본값 지정 const show = defineModel("show", { type: Boolean, default: false });
const show = defineModel('show', {type: Boolean, default:false}); </script>
</script> <style scoped>
.popup-content {
background: white;
<style scoped> display: flex;
.popup-content { flex-direction: column;
background: white; border-radius: 8px;
display: flex; overflow: hidden;
flex-direction: column; }
border-radius: 8px; .popup-top {
overflow: hidden; padding: 10px 20px;
} font-weight: bold;
.popup-top { background: #f0f0f0;
padding: 10px 20px; border-bottom: 1px solid #ddd;
font-weight: bold; }
background: #f0f0f0; .popup-middle {
border-bottom: 1px solid #ddd; flex: 1;
} padding: 20px;
.popup-middle { overflow-y: auto;
flex: 1; }
padding: 20px; .popup-bottom {
overflow-y: auto; padding: 10px 20px;
} display: flex;
.popup-bottom { justify-content: center; /* 중앙 정렬 */
padding: 10px 20px; gap: 10px;
display: flex; background: #f9f9f9;
justify-content: center; /* 중앙 정렬 */ border-top: 1px solid #ddd;
gap: 10px; }
background: #f9f9f9;
border-top: 1px solid #ddd; /* ⭐️ bottom 슬롯 버튼 공통 스타일 */
} .popup-bottom ::v-deep(button) {
padding: 8px 16px;
/* ⭐️ bottom 슬롯 버튼 공통 스타일 */ border: none;
.popup-bottom ::v-deep(button) { border-radius: 6px;
padding: 8px 16px; background: #007bff;
border: none; color: white;
border-radius: 6px; cursor: pointer;
background: #007bff; }
color: white; .popup-bottom ::v-deep(button:hover) {
cursor: pointer; background: #0056b3;
} }
.popup-bottom ::v-deep(button:hover) {
background: #0056b3; .popup-close {
} background: #ddd !important;
color: black !important;
.popup-close { }
background: #ddd !important; </style>
color: black !important;
}
</style>

15
composables/popupManager.ts
View File

@@ -1,15 +0,0 @@
import { ref } from 'vue'
let baseZIndex = 1000;
++baseZIndex;
const currentZ = ref(baseZIndex)
export function usePopupZIndex() {
function nextZIndex() {
currentZ.value += 1
return currentZ.value
}
return { nextZIndex }
}

25
composables/useCounter.ts
View File

@@ -1,25 +0,0 @@
export const useCounter = () => {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
const reset = () => {
count.value = 0;
};
const double = computed(() => count.value * 2);
return {
count: readonly(count),
increment,
decrement,
reset,
double,
};
};

376
composables/grids/resourceGrid.ts → constants/resourceGrid.ts
View File

@@ -1,188 +1,188 @@
import type { OptColumn } from 'tui-grid/types/options'; import type { OptColumn } from 'tui-grid/types/options';
export const colDefs: OptColumn[] = [ export const colDefs: OptColumn[] = [
{ {
name: 'seq', name: 'seq',
header: 'seq', header: 'seq',
width: 50, width: 50,
align: 'center', align: 'center',
hidden: true, hidden: true,
}, },
{ {
name: 'parentCode', name: 'parentCode',
header: '부모 코드', header: '부모 코드',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
filter: { type: 'text' }, filter: { type: 'text' },
}, },
{ {
name: 'level', name: 'level',
header: '레벨', header: '레벨',
width: 100, width: 100,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
filter: { type: 'number' }, filter: { type: 'number' },
}, },
{ {
name: 'code', name: 'code',
header: '코드', header: '코드',
minWidth: 250, minWidth: 250,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'name', name: 'name',
header: '이름', header: '이름',
minWidth: 250, minWidth: 250,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'useFlag', name: 'useFlag',
header: '사용 여부', header: '사용 여부',
width: 150, width: 150,
filter: { type: 'text' }, filter: { type: 'text' },
align: 'center', align: 'center',
}, },
{ {
name: 'menuFlag', name: 'menuFlag',
header: '메뉴 여부', header: '메뉴 여부',
width: 150, width: 150,
filter: { type: 'text' }, filter: { type: 'text' },
align: 'center', align: 'center',
}, },
{ {
name: 'apiFlag', name: 'apiFlag',
header: 'API 여부', header: 'API 여부',
width: 150, width: 150,
filter: { type: 'text' }, filter: { type: 'text' },
align: 'center', align: 'center',
}, },
{ {
name: 'authExceptionFlag', name: 'authExceptionFlag',
header: '예외 허용 여부', header: '예외 허용 여부',
width: 150, width: 150,
filter: { type: 'text' }, filter: { type: 'text' },
align: 'center', align: 'center',
}, },
{ {
name: 'sortOrder', name: 'sortOrder',
header: '표시 순서', header: '표시 순서',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'uri', name: 'uri',
header: 'uri', header: 'uri',
width: 300, width: 300,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'field1', name: 'field1',
header: '필드1', header: '필드1',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'field2', name: 'field2',
header: '필드2', header: '필드2',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'field3', name: 'field3',
header: '필드3', header: '필드3',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'field4', name: 'field4',
header: '필드4', header: '필드4',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'field5', name: 'field5',
header: '필드5', header: '필드5',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton1', name: 'userButton1',
header: '사용자 버튼1', header: '사용자 버튼1',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton2', name: 'userButton2',
header: '사용자 버튼2', header: '사용자 버튼2',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton3', name: 'userButton3',
header: '사용자 버튼3', header: '사용자 버튼3',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton4', name: 'userButton4',
header: '사용자 버튼4', header: '사용자 버튼4',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton5', name: 'userButton5',
header: '사용자 버튼5', header: '사용자 버튼5',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton6', name: 'userButton6',
header: '사용자 버튼6', header: '사용자 버튼6',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton7', name: 'userButton7',
header: '사용자 버튼7', header: '사용자 버튼7',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton8', name: 'userButton8',
header: '사용자 버튼8', header: '사용자 버튼8',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton9', name: 'userButton9',
header: '사용자 버튼9', header: '사용자 버튼9',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
{ {
name: 'userButton10', name: 'userButton10',
header: '사용자 버튼10', header: '사용자 버튼10',
width: 200, width: 200,
editor: 'text', editor: 'text',
align: 'center', align: 'center',
}, },
]; ];

6
layouts/default.vue
View File

@@ -19,9 +19,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import AppHeader from "../components/layout/AppHeader.vue"; import AppHeader from "../components/layout/navigation/AppHeader.vue";
import SubMenuBar from "../components/layout/SubMenuBar.vue"; import SubMenuBar from "../components/layout/navigation/SubMenuBar.vue";
import TabBar from "../components/layout/TabBar.vue"; import TabBar from "../components/layout/navigation/TabBar.vue";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { useTabsStore } from "../stores/tab"; import { useTabsStore } from "../stores/tab";
import { usePermissionsStore } from "~/stores/permissions"; import { usePermissionsStore } from "~/stores/permissions";

17
nuxt.config.ts
View File

@@ -11,18 +11,7 @@ export default defineNuxtConfig({
"@nuxtjs/tailwindcss", "@nuxtjs/tailwindcss",
], ],
piniaPluginPersistedstate: { piniaPluginPersistedstate: {
storage: 'localStorage', storage: "localStorage",
},
app: {
head: {
link: [
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/icon?family=Material+Icons",
},
],
//script: [{ src: "/dist/igv.js", defer: true }],
},
}, },
vite: { vite: {
optimizeDeps: { optimizeDeps: {
@@ -49,6 +38,8 @@ export default defineNuxtConfig({
}, },
plugins: ["~/plugins/vue3-tui-grid.client.ts"], plugins: ["~/plugins/vue3-tui-grid.client.ts"],
components: [ components: [
{ path: "~/components", pathPrefix: false }, // 경로 접두사 제거 { path: "~/components/base", pathPrefix: false }, // @base/ 접두사 제거
{ path: "~/components/layout", pathPrefix: false }, // @layout/ 접두사 제거
{ path: "~/components/domain", pathPrefix: true }, // @domain/ 접두사 유지
], ],
}); });

43
pages/[tabId]/admin/resource.vue
View File

@@ -1,41 +1,36 @@
<template> <template>
<ContentsWrapper> <ContentsWrapper>
<template #actions> <template #actions>
<button @click="onAddClick">추가</button> <button @click="onAddClick">추가</button>
<button @click="onUpdateClick">저장</button> <button @click="onUpdateClick">저장</button>
</template> </template>
<input type="text" > <input type="text" />
<ToastGrid <ToastGrid ref="grid1Ref" :data="data" :columns="colDefs" />
ref="grid1Ref" </ContentsWrapper>
:data="data"
:columns="colDefs"
/>
</ContentsWrapper>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {colDefs} from '../../../composables/grids/resourceGrid' import { colDefs } from "../../../constants/resourceGrid";
definePageMeta({ definePageMeta({
title: '리소스 관리' title: "리소스 관리",
}) });
const data = [{}] const data = [{}];
const grid1Ref = ref(); const grid1Ref = ref();
onMounted(async () => { onMounted(async () => {
await nextTick() // DOM 및 컴포넌트 렌더링 완료 대기 await nextTick(); // DOM 및 컴포넌트 렌더링 완료 대기
grid1Ref.value?.api()?.setBodyHeight('700') grid1Ref.value?.api()?.setBodyHeight("700");
}) });
function onAddClick() { function onAddClick() {
grid1Ref.value?.api()?.appendRow({}); grid1Ref.value?.api()?.appendRow({});
} }
function onUpdateClick() { function onUpdateClick() {
//grid1Ref.value?.clearGrid(); //grid1Ref.value?.clearGrid();
console.log(grid1Ref.value?.api()?.getModifiedRows()); console.log(grid1Ref.value?.api()?.getModifiedRows());
} }
</script> </script>

7
pages/[tabId]/index.vue
View File

@@ -23,10 +23,6 @@
}}</span }}</span
>님! >님!
</p> </p>
<p class="text-sm text-gray-600">
{{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
로그인되었습니다.
</p>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
<button <button
class="mr-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded" class="mr-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"
@@ -113,9 +109,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from "~/stores/user";
// 페이지 메타데이터 설정
definePageMeta({ definePageMeta({
title: "Home", title: "Home",
description: "Welcome to our Nuxt.js application", description: "Welcome to our Nuxt.js application",

2
pages/[tabId]/test/culture-graph-tab.vue
View File

@@ -28,5 +28,5 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import BatchTabs from "~/components/BatchTabs.vue"; import BatchTabs from "~/components/domain/cultureGraph/BatchTabs.vue";
</script> </script>

2
pages/[tabId]/test/culture-graph.vue
View File

@@ -146,7 +146,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch, computed, onUnmounted } from "vue"; import { ref, onMounted, watch, computed, onUnmounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import CustomContextMenu from "~/components/CustomContextMenu.vue"; import CustomContextMenu from "~/components/domain/cultureGraph/CustomContextMenu.vue";
// 타입 인터페이스 정의 // 타입 인터페이스 정의
interface YAxis { interface YAxis {

4
pages/[tabId]/test/permission-test.vue
View File

@@ -547,10 +547,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// 컴포넌트 import
import PermissionButton from "~/components/base/PermissionButton.vue";
// 페이지 메타데이터 설정
definePageMeta({ definePageMeta({
title: "권한 시스템 테스트", title: "권한 시스템 테스트",
description: description:

350
pages/[tabId]/tui.vue
View File

@@ -1,17 +1,29 @@
<script setup lang="ts"> <template>
import ToastGrid from '@/components/base/ToastGrid.vue'; <div>
<button @click="onClearClick">clear api</button>
<br />
<button @click="onUpdateClick">update list</button>
<ToastGrid
ref="grid1Ref"
:data="data"
:columns="columns"
:tree-column-options="treeColumnOptions"
/>
</div>
</template>
<script setup lang="ts">
const data = [ const data = [
{ {
id: 549731, id: 549731,
name: 'Beautiful Lies', name: "Beautiful Lies",
artist: 'Birdy', artist: "Birdy",
release: '2016.03.26', release: "2016.03.26",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Pop', genre: "Pop",
genreCode: '1', genreCode: "1",
grade: '4', grade: "4",
price: 10000, price: 10000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -21,14 +33,14 @@ const data = [
_children: [ _children: [
{ {
id: 491379, id: 491379,
name: 'Chaos And The Calm', name: "Chaos And The Calm",
artist: 'James Bay', artist: "James Bay",
release: '2015.03.23', release: "2015.03.23",
type: 'EP', type: "EP",
typeCode: '2', typeCode: "2",
genre: 'Pop,Rock', genre: "Pop,Rock",
genreCode: '1,2', genreCode: "1,2",
grade: '5', grade: "5",
price: 12000, price: 12000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -36,14 +48,14 @@ const data = [
}, },
{ {
id: 498896, id: 498896,
name: 'The Magic Whip', name: "The Magic Whip",
artist: 'Blur', artist: "Blur",
release: '2015.04.27', release: "2015.04.27",
type: 'EP', type: "EP",
typeCode: '2', typeCode: "2",
genre: 'Rock', genre: "Rock",
genreCode: '2', genreCode: "2",
grade: '3', grade: "3",
price: 15000, price: 15000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -54,13 +66,13 @@ const data = [
{ {
id: 450720, id: 450720,
name: "I'm Not The Only One", name: "I'm Not The Only One",
artist: 'Sam Smith', artist: "Sam Smith",
release: '2014.09.15', release: "2014.09.15",
type: 'Single', type: "Single",
typeCode: '3', typeCode: "3",
genre: 'Pop,R&B', genre: "Pop,R&B",
genreCode: '1,3', genreCode: "1,3",
grade: '4', grade: "4",
price: 8000, price: 8000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -70,14 +82,14 @@ const data = [
_children: [ _children: [
{ {
id: 587871, id: 587871,
name: 'This Is Acting', name: "This Is Acting",
artist: 'Sia', artist: "Sia",
release: '2016.10.22', release: "2016.10.22",
type: 'EP', type: "EP",
typeCode: '2', typeCode: "2",
genre: 'Pop', genre: "Pop",
genreCode: '1', genreCode: "1",
grade: '3', grade: "3",
price: 20000, price: 20000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -87,14 +99,14 @@ const data = [
_children: [ _children: [
{ {
id: 490500, id: 490500,
name: 'Blue Skies', name: "Blue Skies",
release: '2015.03.18', release: "2015.03.18",
artist: 'Lenka', artist: "Lenka",
type: 'Single', type: "Single",
typeCode: '3', typeCode: "3",
genre: 'Pop,Rock', genre: "Pop,Rock",
genreCode: '1,2', genreCode: "1,2",
grade: '5', grade: "5",
price: 6000, price: 6000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -102,27 +114,27 @@ const data = [
{ {
id: 317659, id: 317659,
name: "I Won't Give Up", name: "I Won't Give Up",
artist: 'Jason Mraz', artist: "Jason Mraz",
release: '2012.01.03', release: "2012.01.03",
type: 'Single', type: "Single",
typeCode: '3', typeCode: "3",
genre: 'Pop', genre: "Pop",
genreCode: '1', genreCode: "1",
grade: '2', grade: "2",
price: 7000, price: 7000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 583551, id: 583551,
name: 'Following My Intuition', name: "Following My Intuition",
artist: 'Craig David', artist: "Craig David",
release: '2016.10.01', release: "2016.10.01",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'R&B,Electronic', genre: "R&B,Electronic",
genreCode: '3,4', genreCode: "3,4",
grade: '5', grade: "5",
price: 15000, price: 15000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -135,42 +147,42 @@ const data = [
}, },
{ {
id: 436461, id: 436461,
name: 'X', name: "X",
artist: 'Ed Sheeran', artist: "Ed Sheeran",
release: '2014.06.24', release: "2014.06.24",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Pop', genre: "Pop",
genreCode: '1', genreCode: "1",
grade: '5', grade: "5",
price: 20000, price: 20000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 295651, id: 295651,
name: 'Moves Like Jagger', name: "Moves Like Jagger",
release: '2011.08.08', release: "2011.08.08",
artist: 'Maroon5', artist: "Maroon5",
type: 'Single', type: "Single",
typeCode: '3', typeCode: "3",
genre: 'Pop,Rock', genre: "Pop,Rock",
genreCode: '1,2', genreCode: "1,2",
grade: '2', grade: "2",
price: 7000, price: 7000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 541713, id: 541713,
name: 'A Head Full Of Dreams', name: "A Head Full Of Dreams",
artist: 'Coldplay', artist: "Coldplay",
release: '2015.12.04', release: "2015.12.04",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Rock', genre: "Rock",
genreCode: '2', genreCode: "2",
grade: '3', grade: "3",
price: 25000, price: 25000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -180,28 +192,28 @@ const data = [
_children: [ _children: [
{ {
id: 294574, id: 294574,
name: '4', name: "4",
artist: 'Beyoncé', artist: "Beyoncé",
release: '2011.07.26', release: "2011.07.26",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Pop', genre: "Pop",
genreCode: '1', genreCode: "1",
grade: '3', grade: "3",
price: 12000, price: 12000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 265289, id: 265289,
name: '21', name: "21",
artist: 'Adele', artist: "Adele",
release: '2011.01.21', release: "2011.01.21",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Pop,R&B', genre: "Pop,R&B",
genreCode: '1,3', genreCode: "1,3",
grade: '5', grade: "5",
price: 15000, price: 15000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -210,70 +222,70 @@ const data = [
}, },
{ {
id: 555871, id: 555871,
name: 'Warm On A Cold Night', name: "Warm On A Cold Night",
artist: 'HONNE', artist: "HONNE",
release: '2016.07.22', release: "2016.07.22",
type: 'EP', type: "EP",
typeCode: '1', typeCode: "1",
genre: 'R&B,Electronic', genre: "R&B,Electronic",
genreCode: '3,4', genreCode: "3,4",
grade: '4', grade: "4",
price: 11000, price: 11000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 550571, id: 550571,
name: 'Take Me To The Alley', name: "Take Me To The Alley",
artist: 'Gregory Porter', artist: "Gregory Porter",
release: '2016.09.02', release: "2016.09.02",
type: 'Deluxe', type: "Deluxe",
typeCode: '1', typeCode: "1",
genre: 'Jazz', genre: "Jazz",
genreCode: '5', genreCode: "5",
grade: '3', grade: "3",
price: 30000, price: 30000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 544128, id: 544128,
name: 'Make Out', name: "Make Out",
artist: 'LANY', artist: "LANY",
release: '2015.12.11', release: "2015.12.11",
type: 'EP', type: "EP",
typeCode: '2', typeCode: "2",
genre: 'Electronic', genre: "Electronic",
genreCode: '4', genreCode: "4",
grade: '2', grade: "2",
price: 12000, price: 12000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 366374, id: 366374,
name: 'Get Lucky', name: "Get Lucky",
artist: 'Daft Punk', artist: "Daft Punk",
release: '2013.04.23', release: "2013.04.23",
type: 'Single', type: "Single",
typeCode: '3', typeCode: "3",
genre: 'Pop,Funk', genre: "Pop,Funk",
genreCode: '1,5', genreCode: "1,5",
grade: '3', grade: "3",
price: 9000, price: 9000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
}, },
{ {
id: 8012747, id: 8012747,
name: 'Valtari', name: "Valtari",
artist: 'Sigur Rós', artist: "Sigur Rós",
release: '2012.05.31', release: "2012.05.31",
type: 'EP', type: "EP",
typeCode: '3', typeCode: "3",
genre: 'Rock', genre: "Rock",
genreCode: '2', genreCode: "2",
grade: '5', grade: "5",
price: 10000, price: 10000,
downloadCount: 1000, downloadCount: 1000,
listenCount: 5000, listenCount: 5000,
@@ -281,43 +293,33 @@ const data = [
]; ];
const columns = [ const columns = [
{ header: 'Name', name: 'name', width: 300 }, { header: "Name", name: "name", width: 300 },
{ header: 'Artist', name: 'artist' }, { header: "Artist", name: "artist" },
{ header: 'Type', name: 'type' }, { header: "Type", name: "type" },
{ header: 'Release', name: 'release' }, { header: "Release", name: "release" },
{ header: 'Genre', name: 'genre' }, { header: "Genre", name: "genre" },
{ header: 'checkbox', name: 'checkbox', editor:{ type: 'checkbox', options: { {
listItems: [ header: "checkbox",
{ text: 'true', value: true }, name: "checkbox",
] editor: {
}}} type: "checkbox",
options: {
listItems: [{ text: "true", value: true }],
},
},
},
]; ];
const treeColumnOptions = { name: 'name', useCascadingCheckbox: true }; const treeColumnOptions = { name: "name", useCascadingCheckbox: true };
const grid1Ref = ref(); const grid1Ref = ref();
function onClearClick() { function onClearClick() {
//grid1Ref.value?.clearGrid(); //grid1Ref.value?.clearGrid();
grid1Ref.value?.api()?.clear(); grid1Ref.value?.api()?.clear();
} }
function onUpdateClick() { function onUpdateClick() {
//grid1Ref.value?.clearGrid(); //grid1Ref.value?.clearGrid();
console.log(grid1Ref.value?.api()?.getModifiedRows()); console.log(grid1Ref.value?.api()?.getModifiedRows());
} }
</script> </script>
<template>
<div>
<button @click="onClearClick">clear api</button>
<br>
<button @click="onUpdateClick">update list</button>
<ToastGrid
ref="grid1Ref"
:data="data"
:columns="columns"
:treeColumnOptions="treeColumnOptions"
/>
</div>
</template>

7
pages/index.vue
View File

@@ -23,10 +23,6 @@
}}</span }}</span
>님! >님!
</p> </p>
<p class="text-sm text-gray-600">
{{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
로그인되었습니다.
</p>
</div> </div>
<div <div
v-else v-else
@@ -99,9 +95,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from "~/stores/user";
// 페이지 메타데이터 설정
definePageMeta({ definePageMeta({
title: "Home", title: "Home",
description: "Welcome to our Nuxt.js application", description: "Welcome to our Nuxt.js application",

6
pages/login.vue
View File

@@ -54,11 +54,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "~/stores/user";
// auth 레이아웃 사용
definePageMeta({ definePageMeta({
layout: "auth", layout: "auth",
}); });
@@ -67,7 +62,6 @@ const userId = ref("");
const password = ref(""); const password = ref("");
const errorMessage = ref(""); const errorMessage = ref("");
const isLoading = ref(false); const isLoading = ref(false);
const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
// 이미 로그인된 경우 홈으로 리다이렉션 // 이미 로그인된 경우 홈으로 리다이렉션

6
pages/register.vue
View File

@@ -66,11 +66,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "~/stores/user";
// auth 레이아웃 사용
definePageMeta({ definePageMeta({
layout: "auth", layout: "auth",
}); });
@@ -81,7 +76,6 @@ const confirmPassword = ref("");
const errorMessage = ref(""); const errorMessage = ref("");
const successMessage = ref(""); const successMessage = ref("");
const isLoading = ref(false); const isLoading = ref(false);
const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
// 이미 로그인된 경우 홈으로 리다이렉션 // 이미 로그인된 경우 홈으로 리다이렉션

27
stores/counter.ts
View File

@@ -1,27 +0,0 @@
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const name = ref("Counter Store");
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
function decrement() {
count.value--;
}
function reset() {
count.value = 0;
}
return {
count,
name,
doubleCount,
increment,
decrement,
reset,
};
});