[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,12 +103,12 @@ 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>
@@ -101,6 +158,7 @@ function onUpdateClick() {
 ```
 
 ## tree data
+
 ```
 <template>
   <ToastGrid
@@ -227,8 +285,8 @@ poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
 2. 사용할 페이지에서 생성한 팝업 추가
 ```
 
-
 ### 팝업 생성
+
 ```
 // examplePopup.vue
 <template>
@@ -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