[README.md 업데이트] 컴포넌트 폴더 구조 및 사용법 추가, 자동 임포트 설정 설명 보강, 페이지 구성 및 팝업 생성 방법에 대한 세부 정보 업데이트
This commit is contained in:
105
README.md
105
README.md
@@ -1,21 +1,76 @@
|
||||
# bio_frontend
|
||||
|
||||
## NUXT 3 (VUE 3) 환경
|
||||
- data-list 와 dataList는 동일 변수명으로 인식
|
||||
- compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)
|
||||
|
||||
- data-list 와 dataList는 동일 변수명으로 인식
|
||||
- compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)
|
||||
|
||||
# 구성 요소
|
||||
|
||||
## components 구성
|
||||
|
||||
### 폴더 구조
|
||||
|
||||
```
|
||||
components
|
||||
|- base // 기본 요소(button, input, grid, popup)
|
||||
|- layout // 레이아웃 요소(header, footer, sidebar, wrapper)
|
||||
|- module // 특정 기능 단위(card, form, list)
|
||||
|- pages // 특정 페이지 전용
|
||||
components/
|
||||
├── base/ // 기본 UI 요소 (접두사 없이 사용)
|
||||
│ ├── button/
|
||||
│ │ ├── CommonButton.vue
|
||||
│ │ └── PermissionButton.vue
|
||||
│ ├── grid/
|
||||
│ │ └── ToastGrid.vue
|
||||
│ ├── info/
|
||||
│ │ └── PageDescription.vue
|
||||
│ ├── loading/
|
||||
│ │ └── GlobalLoading.vue
|
||||
│ └── popup/
|
||||
│ └── CommonPopup.vue
|
||||
├── layout/ // 레이아웃 요소 (접두사 없이 사용)
|
||||
│ ├── navigation/
|
||||
│ │ ├── AppHeader.vue
|
||||
│ │ ├── SubMenuBar.vue
|
||||
│ │ └── TabBar.vue
|
||||
│ └── wrapper/
|
||||
│ ├── ContentsWrapper.vue
|
||||
│ └── PopupWrapper.vue
|
||||
└── domain/ // 도메인별 기능 컴포넌트 (@domain/ 접두사 사용)
|
||||
└── culture-graph/
|
||||
├── BatchGraph.vue
|
||||
├── BatchTabs.vue
|
||||
└── CustomContextMenu.vue
|
||||
```
|
||||
|
||||
### 자동 임포트 설정 (nuxt.config.ts)
|
||||
|
||||
```typescript
|
||||
components: [
|
||||
{ path: "~/components/base", pathPrefix: false }, // @base/ 접두사 제거
|
||||
{ path: "~/components/layout", pathPrefix: false }, // @layout/ 접두사 제거
|
||||
{ path: "~/components/domain", pathPrefix: true }, // @domain/ 접두사 유지
|
||||
],
|
||||
```
|
||||
|
||||
### 컴포넌트 사용법
|
||||
|
||||
- **base/**, **layout/** 폴더의 컴포넌트\*\*: 접두사 없이 직접 사용
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<CommonButton />
|
||||
<ToastGrid />
|
||||
<ContentsWrapper />
|
||||
</template>
|
||||
```
|
||||
|
||||
- **domain/** 폴더의 컴포넌트: `@domain/` 접두사 사용
|
||||
```vue
|
||||
<template>
|
||||
<DomainCultureGraphBatchGraph />
|
||||
</template>
|
||||
```
|
||||
|
||||
## page 구성
|
||||
|
||||
```
|
||||
pages // 단일 화면(비 탭 요소)
|
||||
|- popup // 팝업 요소
|
||||
@@ -25,7 +80,9 @@ pages // 단일 화면(비 탭 요소)
|
||||
```
|
||||
|
||||
# page(페이지) 생성 요소
|
||||
|
||||
## 공통 페이지 구성
|
||||
|
||||
```
|
||||
<template>
|
||||
<ContentsWrapper> <!-- wrapper(title) 추가 -->
|
||||
@@ -46,25 +103,25 @@ pages // 단일 화면(비 탭 요소)
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## Toast(Tui) Grid 사용법
|
||||
|
||||
한글 설명: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
|
||||
|
||||
|
||||
### 기본 설정
|
||||
|
||||
```
|
||||
<template>
|
||||
<button @click="onAddClick">추가</button>
|
||||
<button @click="onUpdateClick">저장</button>
|
||||
|
||||
<!-- toast Grid 필수값 ref, data, columns(header) -->
|
||||
<ToastGrid
|
||||
<ToastGrid
|
||||
ref="grid1Ref"
|
||||
:data="data"
|
||||
:columns="colDefs"
|
||||
/>
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
// 컬럼 항목 리스트
|
||||
// composables폴더 아래에 생성
|
||||
@@ -87,7 +144,7 @@ let no = 1;
|
||||
|
||||
// 항목 추가 버튼
|
||||
function onAddClick() {
|
||||
grid1Ref.value?.api()?.appendRow({'no': no}); // ref api를 통해서 항목 추가
|
||||
grid1Ref.value?.api()?.appendRow({'no': no}); // ref api를 통해서 항목 추가
|
||||
++no;
|
||||
}
|
||||
|
||||
@@ -95,20 +152,21 @@ function onAddClick() {
|
||||
function onUpdateClick() {
|
||||
//grid1Ref.value?.clearGrid();
|
||||
const chageList = grid1Ref.value?.api()?.getModifiedRows(); // ref api를 통해서 변경점 읽어오기
|
||||
console.log(changeList);
|
||||
console.log(changeList);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
## tree data
|
||||
|
||||
```
|
||||
<template>
|
||||
<ToastGrid
|
||||
<ToastGrid
|
||||
ref="grid1Ref"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:treeColumnOptions="treeColumnOptions"
|
||||
/>
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -227,8 +285,8 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
|
||||
2. 사용할 페이지에서 생성한 팝업 추가
|
||||
```
|
||||
|
||||
|
||||
### 팝업 생성
|
||||
|
||||
```
|
||||
// examplePopup.vue
|
||||
<template>
|
||||
@@ -238,11 +296,11 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
|
||||
<template #top>
|
||||
<h2>팝업 제목</h2>
|
||||
</template>
|
||||
|
||||
|
||||
<template #middle>
|
||||
<!-- 팝업 본문 -->
|
||||
</template>
|
||||
|
||||
|
||||
<template #bottom>
|
||||
<button>추가 버튼</button>
|
||||
<!-- 닫기 버튼은 자동 생성 -->
|
||||
@@ -250,7 +308,7 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
|
||||
</PopupWrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
// 숨김 여부 지정
|
||||
const show = defineModel('show', {type: Boolean, default:false});
|
||||
@@ -258,6 +316,7 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
|
||||
```
|
||||
|
||||
### 팝업 사용
|
||||
|
||||
```
|
||||
<template>
|
||||
<button @click="popupShow = true">팝업 실행</button>
|
||||
@@ -269,8 +328,8 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## 탭 구성
|
||||
|
||||
```
|
||||
// layouts/default.vue
|
||||
// stores/tab.ts
|
||||
@@ -298,4 +357,4 @@ tabsStore.setActiveTab(key);
|
||||
{{ tab.label }}
|
||||
<span v-show="tabsStore.activeTab !== tab.key" class="close-btn" @click.stop="tabsStore.removeTab(tab.key)"> × </span>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user