Update README.md

README.md

@@ -1,2 +1,187 @@
 # bio_frontend
 
+## NUXT 3 (VUE 3) 환경
+ - data-list 와 dataList는 동일 변수명으로 인식
+ - compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)
+
+
+## 공통 페이지 구성
+
+```
+<template>
+    <ContentsWrapper> <!-- wrapper(title) 추가 -->
+        <template #actions> <!--title 우측 버튼 설정-->
+            <button>추가</button>
+            <button>저장</button>
+        </template>
+        <!--메인 콘텐츠 영역-->
+        <input type="text" >
+        <!--메인 콘텐츠 영역-->
+    </ContentsWrapper>
+</template>
+<script setup lang="ts">
+    // title(wrapper) 설정
+    definePageMeta({
+        title: '리소스 관리'
+    })
+</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  
+        ref="grid1Ref"
+        :data="data"
+        :columns="colDefs"
+    />        
+</template>
+  
+<script setup lang="ts">
+// 컬럼 항목 리스트
+// composables폴더 아래에 생성
+// 위 한글 성명 참조하여 생성
+import {colDefs} from '../../composables/grids/resourceGrid'
+
+// 데이터 항목
+const data = [{}]
+
+// ref 설정
+// api : https://nhn.github.io/tui.grid/latest/Grid
+const grid1Ref = ref();
+
+onMounted(async () => {
+  await nextTick() // DOM 및 컴포넌트 렌더링 완료 대기
+  grid1Ref.value?.api()?.setBodyHeight('700') // ref api를 통해서 높이 지정
+})
+
+let no = 1;
+
+// 항목 추가 버튼
+function onAddClick() {
+  grid1Ref.value?.api()?.appendRow({'no': no}); // ref api를 통해서 항목 추가  
+  ++no;
+}
+
+// 저장 버튼
+function onUpdateClick() {
+   //grid1Ref.value?.clearGrid();
+  const chageList = grid1Ref.value?.api()?.getModifiedRows(); // ref api를 통해서 변경점 읽어오기
+  console.log(changeList);  
+}
+</script>
+```  
+
+## tree data
+```
+<template>
+  <ToastGrid  
+    ref="grid1Ref"
+    :data="data"
+    :columns="columns"
+    :treeColumnOptions="treeColumnOptions"
+  />  
+</template>
+
+<script setup lang="ts">
+// data 설정시 _children: 항목으로 구성
+const data = [
+  {
+    id: 549731,
+    name: 'Beautiful Lies',
+    price: 10000,
+    downloadCount: 1000,
+    listenCount: 5000,
+    _attributes: {
+      expanded: true,
+    },
+    _children: [
+      {
+        id: 491379,
+        name: 'Chaos And The Calm',
+        artist: 'James Bay',
+        grade: '5',
+        price: 12000,
+        downloadCount: 1000,
+        listenCount: 5000
+      },
+      {
+        id: 450720,
+        name: "I'm Not The Only One",
+        artist: 'Sam Smith',
+        release: '2014.09.15',
+        type: 'Single',
+        grade: '4',
+        price: 8000,
+        downloadCount: 1000,
+        listenCount: 5000,
+        _attributes: {
+          expanded: true,
+        },
+        _children: [
+          {
+            id: 587871,
+            name: 'This Is Acting',
+            artist: 'Sia',
+            release: '2016.10.22',
+            type: 'EP',
+            typeCode: '2',
+            genre: 'Pop',
+            _attributes: {
+              expanded: true,
+            },
+            _children: [
+              {
+                id: 490500,
+                name: 'Blue Skies',
+                release: '2015.03.18',
+                artist: 'Lenka',
+                type: 'Single',
+                typeCode: '3',
+              },
+              {
+                id: 317659,
+                name: "I Won't Give Up",
+                artist: 'Jason Mraz',
+                release: '2012.01.03',
+                type: 'Single',
+                typeCode: '3',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 436461,
+    name: 'X',
+    artist: 'Ed Sheeran',
+    release: '2014.06.24',
+    type: 'Deluxe',
+    typeCode: '1',
+  },
+];
+
+const columns = [
+  { header: 'Name', name: 'name', width: 300 },
+  { header: 'Artist', name: 'artist' },
+  { header: 'Type', name: 'type' },
+  { header: 'Release', name: 'release' },
+  { header: 'Genre', name: 'genre' },
+];
+
+// tree column 설정
+const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
+
+const grid1Ref = ref();
+</script>
+```