From 1bef1de9dc94711cc29f84c4e5aa607717b38934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=A4=80=ED=9D=A0?= <choi.jh@prime-idc.jp>
Date: Fri, 19 Aug 2022 19:34:49 +0900
Subject: [PATCH] =?UTF-8?q?=EB=91=90=EB=B2=88=EC=A7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                   |  2 +-
 package.json                           |  3 +-
 src/components/layout/HeaderLayout.vue |  2 +-
 src/views/3_api/todo/listView.vue      | 52 ++++++++++++++++++++++----
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/.env b/.env
index 69b3d46..67bc808 100644
--- a/.env
+++ b/.env
@@ -4,5 +4,5 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-API_TODO_URI = ['http://localhost:3000']
+API_TODO_URI = ['http://localhost:3000/todo']
 
diff --git a/package.json b/package.json
index 15be344..c3f01c4 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,5 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ],
-  "proxy": "http://localhost:3000"
+  ]
 }
diff --git a/src/components/layout/HeaderLayout.vue b/src/components/layout/HeaderLayout.vue
index 1b4089e..36e4b06 100644
--- a/src/components/layout/HeaderLayout.vue
+++ b/src/components/layout/HeaderLayout.vue
@@ -100,7 +100,7 @@
           <input
             class="form-control me-2"
             type="search"
-            placeholder="Search"
+            placeholder="통합검색"
             aria-label="Search"
           />
           <button class="btn btn-outline-success" type="submit">Search</button>
diff --git a/src/views/3_api/todo/listView.vue b/src/views/3_api/todo/listView.vue
index 6be94b0..0b617e5 100644
--- a/src/views/3_api/todo/listView.vue
+++ b/src/views/3_api/todo/listView.vue
@@ -1,7 +1,35 @@
 <template>
+  <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
   <div>
-    <table class="table table-striped">
-      <thead>
+    <div class="container text-center">
+      <div class="row">
+        <div class="col">total:{{ length }} / {{ total }}</div>
+        <div class="col">
+          <form class="d-flex" role="search">
+            <input
+              class="form-control me-2"
+              type="search"
+              v-model="searchString"
+              placeholder="통합검색"
+              aria-label="Search"
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
+        <div class="col">
+          <select name="" id="" v-model="perPage">
+            <option value="">--라인수--</option>
+            <option :value="value" :key="idx" v-for="(value, idx) in total">
+              {{ value }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+      <thead class="table-light">
         <tr>
           <th scope="col" :key="field.key" v-for="field in fields">
             {{ field.label }}
@@ -28,9 +56,11 @@ export default {
   data() {
     return {
       loading: null,
+      total: 0,
+      length: 0,
       page: 0, // 현재 페이지
-      perPage: 10, // 페이지당 보여줄 갯수
-      // bootstrap 'b-table' 필드 설정
+      perPage: 0, // 페이지당 보여줄 갯수
+      searchString: '',
       fields: [
         {
           key: 'id',
@@ -54,17 +84,23 @@ export default {
   },
   setup() {},
   created() {
-    this.list()
+    const url = 'http://localhost:3000/todo'
+    this.list(url)
   },
   mounted() {},
   unmounted() {},
   methods: {
-    async list() {
-      const url = 'http://localhost:3000/todo?per_page=5&page=1'
+    async list(url) {
       this.loading = null
       await axios.get(url).then((response) => {
         if (response.statusText === 'OK') {
-          this.rows = response.data
+          console.log(response)
+          this.page = response.data.query.page
+          this.per_page = response.data.query.per_page
+          this.searchString = response.data.query.searchString
+          this.total = response.data.total
+          this.rows = response.data.rows
+          this.length = response.data.rows.length
         } else {
           throw new Error(`Network response was not ok. \n url => ${url}`)
         }