From 612b5f9a1b26f11006321a41fc9d0a0255b4468a 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, 2 Sep 2022 18:49:54 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=952...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/HeaderLayout.vue |  81 +++++------
 src/components/todo/ListComponent.vue  | 178 ++++++++++++-------------
 2 files changed, 131 insertions(+), 128 deletions(-)

diff --git a/src/components/layout/HeaderLayout.vue b/src/components/layout/HeaderLayout.vue
index f8fa8f4..d17de79 100644
--- a/src/components/layout/HeaderLayout.vue
+++ b/src/components/layout/HeaderLayout.vue
@@ -1,42 +1,47 @@
 <template>
-  <nav class="navbar navbar-expand-lg bg-light">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="#">Navbar</a>
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/todo">Todo</a>
-          </li>
-        </ul>
-        <form class="d-flex" role="search">
-          <input
-            class="form-control me-2"
-            type="search"
-            placeholder="통합검색"
-            aria-label="Search"
-          />
-          <button class="btn btn-outline-success" type="submit">Search</button>
-        </form>
-      </div>
-    </div>
-  </nav>
+  <b-navbar toggleable="lg" type="dark" variant="info">
+    <b-navbar-brand href="#">NavBar</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="#">Link</b-nav-item>
+        <b-nav-item href="#" disabled>Disabled</b-nav-item>
+        <b-nav-item href="/todo">Todo</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">
+        <b-nav-form>
+          <b-form-input
+            size="sm"
+            class="mr-sm-2"
+            placeholder="Search"
+          ></b-form-input>
+          <b-button size="sm" class="my-2 my-sm-0" type="submit"
+            >Search</b-button
+          >
+        </b-nav-form>
+
+        <!-- <b-nav-item-dropdown text="Lang" right>
+          <b-dropdown-item href="#">EN</b-dropdown-item>
+          <b-dropdown-item href="#">ES</b-dropdown-item>
+          <b-dropdown-item href="#">RU</b-dropdown-item>
+          <b-dropdown-item href="#">FA</b-dropdown-item>
+        </b-nav-item-dropdown> -->
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template #button-content>
+            <em>User</em>
+          </template>
+          <b-dropdown-item href="#">Profile</b-dropdown-item>
+          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
 </template>
 <script>
 export default {
diff --git a/src/components/todo/ListComponent.vue b/src/components/todo/ListComponent.vue
index ef6c354..f8fe692 100644
--- a/src/components/todo/ListComponent.vue
+++ b/src/components/todo/ListComponent.vue
@@ -36,13 +36,11 @@
         </b-col>
         <b-col cols="4" class="border">
           <b-input-group>
-            <label class="input-group-text">
-              <b-form-select
-                class="d-flex flex-nowrap"
-                v-model="filterDateField"
-                :options="filterDateFieldOptions"
-              ></b-form-select>
-            </label>
+            <b-form-select
+              class="d-flex flex-nowrap"
+              v-model="filterDateField"
+              :options="filterDateFieldOptions"
+            ></b-form-select>
             <b-form-input v-model="filterDateStart" type="date"></b-form-input>
             ~
             <b-form-input v-model="filterDateEnd" type="date"></b-form-input>
@@ -60,89 +58,89 @@
           </b-input-group>
         </b-col>
       </b-row>
-      <b-row class="overflow-auto">
-        <b-table
-          id="todoTable"
-          ref="todoTable"
-          :page="page"
-          :items="rows"
-          :fields="fields"
-          :per-page="perPage"
-          :sort-by.sync="sortBy"
-          :sort-desc.sync="sortDesc"
-          @sort-changed="sortClick"
-          label-sort-asc=""
-          label-sort-desc=""
-          label-sort-clear=""
-          :select-mode="selectedRowMode"
-          selectable
-          @row-selected="rowSelectedToggle"
-          :busy="isBusy"
-          :sticky-header="commonTableAttributes.stickyHeader"
-          :no-border-collapse="commonTableAttributes.noBorderCollapse"
-          :striped="commonTableAttributes.striped"
-          :hover="commonTableAttributes.hover"
-          :no-local-sorting="commonTableAttributes.noLocalSorting"
-          :bordered="commonTableAttributes.bordered"
-          :dark="commonTableAttributes.dark"
-          :head-variant="commonTableAttributes.headVariant"
-        >
-          <!-- Column별 Filter용 -->
-          <template #thead-top>
-            <b-tr>
-              <b-th colspan="4"> </b-th>
-              <b-th
-                ><b-form-select
-                  v-model="filterIsDone"
-                  :options="filterIsDoneFieldOptions"
-                  @change="isDoneClick"
-                ></b-form-select
-              ></b-th>
-              <b-th></b-th>
-            </b-tr>
-          </template>
-          <!-- 비/선택 Row를 토글용 -->
-          <template #cell(rowSelect)="{ rowSelected }">
-            <template v-if="rowSelected">
-              <span aria-hidden="true">✓</span>
-            </template>
-            <template v-else>
-              <span aria-hidden="true">&nbsp;</span>
-            </template>
-          </template>
-          <!-- Row의 Index를 이용한 번호 출력 -->
-          <template #cell(id)="row">
-            <b-link ref="edit/{{row.item.id}}">
-              {{ total - (page * perPage + row.index) + perPage }}
-            </b-link>
-          </template>
-          <!-- 제목부분 출력용 -->
-          <template #cell(title)="row">
-            {{ row.item.title }}
-          </template>
-          <!-- 상세 내용 출력용 -->
-          <template #cell(content)="row">
-            <b-button size="sm" @click="row.toggleDetails" class="mr-2">
-              [{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
-            </b-button>
-          </template>
-          <template #row-details="row">
-            <b-card>
-              <b-row>
-                <b-col v-html="row.item.content"></b-col>
-              </b-row>
-              <b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
-            </b-card>
-          </template>
-          <!-- 데이터 로딩중 출력용 -->
-          <template #table-busy>
-            <div class="text-center text-danger my-2">
-              <b-spinner class="align-middle"></b-spinner>
-              <strong>Loading...</strong>
-            </div>
-          </template>
-        </b-table>
-      </b-row>
+    </b-container>
+    <b-table
+      id="todoTable"
+      ref="todoTable"
+      :page="page"
+      :items="rows"
+      :fields="fields"
+      :per-page="perPage"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
+      @sort-changed="sortClick"
+      label-sort-asc=""
+      label-sort-desc=""
+      label-sort-clear=""
+      :select-mode="selectedRowMode"
+      selectable
+      @row-selected="rowSelectedToggle"
+      :busy="isBusy"
+      :sticky-header="commonTableAttributes.stickyHeader"
+      :no-border-collapse="commonTableAttributes.noBorderCollapse"
+      :striped="commonTableAttributes.striped"
+      :hover="commonTableAttributes.hover"
+      :no-local-sorting="commonTableAttributes.noLocalSorting"
+      :bordered="commonTableAttributes.bordered"
+      :dark="commonTableAttributes.dark"
+      :head-variant="commonTableAttributes.headVariant"
+    >
+      <!-- Column별 Filter용 -->
+      <template #thead-top>
+        <b-tr>
+          <b-th colspan="4"> </b-th>
+          <b-th
+            ><b-form-select
+              v-model="filterIsDone"
+              :options="filterIsDoneFieldOptions"
+              @change="isDoneClick"
+            ></b-form-select
+          ></b-th>
+          <b-th></b-th>
+        </b-tr>
+      </template>
+      <!-- 비/선택 Row를 토글용 -->
+      <template #cell(rowSelect)="{ rowSelected }">
+        <template v-if="rowSelected">
+          <span aria-hidden="true">✓</span>
+        </template>
+        <template v-else>
+          <span aria-hidden="true">&nbsp;</span>
+        </template>
+      </template>
+      <!-- Row의 Index를 이용한 번호 출력 -->
+      <template #cell(id)="row">
+        <b-link ref="edit/{{row.item.id}}">
+          {{ total - (page * perPage + row.index) + perPage }}
+        </b-link>
+      </template>
+      <!-- 제목부분 출력용 -->
+      <template #cell(title)="row">
+        {{ row.item.title }}
+      </template>
+      <!-- 상세 내용 출력용 -->
+      <template #cell(content)="row">
+        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+          [{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
+        </b-button>
+      </template>
+      <template #row-details="row">
+        <b-card>
+          <b-row>
+            <b-col v-html="row.item.content"></b-col>
+          </b-row>
+          <b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
+        </b-card>
+      </template>
+      <!-- 데이터 로딩중 출력용 -->
+      <template #table-busy>
+        <div class="text-center text-danger my-2">
+          <b-spinner class="align-middle"></b-spinner>
+          <strong>Loading...</strong>
+        </div>
+      </template>
+    </b-table>
+    <b-container fluid>
       <b-row>
         <b-col>
           <p>{{ selectedRows }}</p>