tab, component, popup 변경

README.md

@@ -5,8 +5,25 @@
  - compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)
 
 
-## 공통 페이지 구성
+# 구성 요소
+## components 구성
+```
+components
+ |- base      // 기본 요소(button, input, grid, popup)
+ |- layout    // 레이아웃 요소(header, footer, sidebar, wrapper)
+ |- module    // 특정 기능 단위(card, form, list)
+ |- pages     // 특정 페이지 전용
+```
 
+## page 구성
+```
+pages         // 단일 화면(비 탭 요소)
+|- [tabId]    // 탭 요소
+    |- admin  // 관리자 페이지
+```
+
+# page(페이지) 생성 요소
+## 공통 페이지 구성
 ```
 <template>
     <ContentsWrapper> <!-- wrapper(title) 추가 -->
@@ -27,6 +44,7 @@
 </script>
 ```
 
+
 ## Toast(Tui) Grid 사용법
 한글 설명: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
 
@@ -185,3 +203,97 @@ const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
 const grid1Ref = ref();
 </script>
 ```
+
+## 팝업 구성
+
+```
+┌─────────────────────────────┐
+│      customPopup.vue        │
+│ ┌─────────────────────────┐ │
+│ │      poupWrapper.vue    │ │
+│ │ ┌─────────────────────┐ │ │
+│ │ │        <slot>       │ │ │
+│ │ └─────────────────────┘ │ │
+│ └─────────────────────────┘ │
+└─────────────────────────────┘
+
+
+customPopup.vue - 기본 빈 팝업
+poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
+
+1. 구조에 따라 customPopup, poupWrapper 기반으로 팝업 생성(/pages/popup/*.vue)
+2. 사용할 페이지에서 생성한 팝업 추가
+```
+
+
+### 팝업 생성
+```
+// examplePopup.vue
+<template>
+  <div>
+    <!--PopupWrapper 구성, 크기 지정, 숨김 여부 지정 -->
+    <PopupWrapper width="1000px" height="600px" v-model:show="show">
+      <template #top>
+        <h2>팝업 제목</h2>
+      </template>
+  
+      <template #middle>
+        <!-- 팝업 본문 -->
+      </template>
+  
+      <template #bottom>
+        <button>추가 버튼</button>
+        <!-- 닫기 버튼은 자동 생성 -->
+      </template>
+    </PopupWrapper>
+  </div>
+</template>
+  
+<script setup lang="ts">
+  // 숨김 여부 지정
+  const show = defineModel('show', {type: Boolean, default:false});
+</script>
+```
+
+### 팝업 사용
+```
+<template>
+  <button @click="popupShow = true">팝업 실행</button>
+  <examplePopup v-model:show="popupShow" />
+</template>
+<script setup lang="ts">
+  import addSamplePopup from '../popup/examplePopup.vue';
+  const popupShow = ref(false);
+</script>
+```
+
+
+## 탭 구성
+```
+// layouts/default.vue
+// stores/tab.ts
+
+import { useTabsStore } from "../stores/tab";
+const tabsStore = useTabsStore();
+
+// 탭추가 (최대 10개)
+tabsStore.addTab();
+
+// 탭 갱신
+tabsStore.updateActiveTab({ label, to, componentName});
+
+// 탭 변경
+tabsStore.setActiveTab(key);
+
+// 탭 생성
+<div
+  v-for="tab in tabsStore.tabs"
+  :key="tab.key"
+  class="tab-item"
+  :class="{ active: tabsStore.activeTab === tab.key }"
+  @click="tabsStore.setActiveTab(tab.key);"
+>
+  {{ tab.label }}
+  <span v-show="tabsStore.activeTab !== tab.key" class="close-btn" @click.stop="tabsStore.removeTab(tab.key)"> × </span>
+</div>
+```