두번째 수정...

.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']
 

package.json

@@ -53,6 +53,5 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ],
-  "proxy": "http://localhost:3000"
+  ]
 }

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>

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}`)
         }