[README.md 업데이트] 컴포넌트 폴더 구조 및 사용법 추가, 자동 임포트 설정 설명 보강, 페이지 구성 및 팝업 생성 방법에 대한 세부 정보 업데이트

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
+components/
- |- base      // 기본 요소(button, input, grid, popup)
+├── base/                    // 기본 UI 요소 (접두사 없이 사용)
- |- layout    // 레이아웃 요소(header, footer, sidebar, wrapper)
+│   ├── button/
- |- module    // 특정 기능 단위(card, form, list)
+│   │   ├── CommonButton.vue
- |- pages     // 특정 페이지 전용
+│   │   └── 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>
-```
+```