시그니처 리스트 정렬 추가

src/api/signature.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
-async function getSignatureList(page) {
-    return Vue.axios.get('/creator-admin/signature?page=' + (page - 1) + "&size=20");
+async function getSignatureList(page, sort) {
+    return Vue.axios.get('/creator-admin/signature?page=' + (page - 1) + "&size=20" + "&sort-type=" + sort);
 }
 
 async function createSignature(formData) {

src/views/Signature/SignatureManagement.vue

@@ -7,7 +7,59 @@
     </v-toolbar>
     <v-container>
       <v-row>
-        <v-col cols="10" />
+        <v-col>
+          <v-row>
+            <v-col>
+              <input
+                id="sort-newest"
+                v-model="sort_type"
+                type="radio"
+                value="NEWEST"
+                class="radio-sort"
+                @change="changeSortType"
+              >
+              <label
+                for="sort-newest"
+                class="radio-label-sort"
+              >
+                최신순
+              </label>
+            </v-col>
+            <v-col>
+              <input
+                id="sort-can-high"
+                v-model="sort_type"
+                type="radio"
+                value="CAN_HIGH"
+                class="radio-sort"
+                @change="changeSortType"
+              >
+              <label
+                for="sort-can-high"
+                class="radio-label-sort"
+              >
+                높은캔순
+              </label>
+            </v-col>
+            <v-col>
+              <input
+                id="sort-can-low"
+                v-model="sort_type"
+                type="radio"
+                value="CAN_LOW"
+                class="radio-sort"
+                @change="changeSortType"
+              >
+              <label
+                for="sort-can-low"
+                class="radio-label-sort"
+              >
+                낮은캔순
+              </label>
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-col cols="8" />
         <v-col>
           <v-btn
             block
@@ -346,6 +398,7 @@ export default {
       image_url: null,
       is_active: null,
       selected_signature_can: {},
+      sort_type: 'NEWEST',
 
       headers: [
         {
@@ -449,11 +502,15 @@ export default {
       this.show_modify_dialog = true
     },
 
+    async changeSortType() {
+      await this.getSignatureList();
+    },
+
     async getSignatureList() {
-      this.isLoading = true
+      this.is_loading = true
 
       try {
-        let res = await api.getSignatureList(this.page);
+        let res = await api.getSignatureList(this.page, this.sort_type);
 
         if (res.status === 200 && res.data.success === true) {
           const data = res.data.data
@@ -469,7 +526,7 @@ export default {
       } catch (e) {
         this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
       } finally {
-        this.isLoading = false
+        this.is_loading = false
       }
     },
 
@@ -639,4 +696,18 @@ export default {
   display: block;
   margin: 0 auto;
 }
+
+.radio-sort {
+  display: none;
+}
+
+.radio-label-sort {
+  font-weight: normal;
+  color: black;
+}
+
+.radio-sort:checked + .radio-label-sort {
+  font-weight: bold;
+  color: #3bb9f1;
+}
 </style>