From 28f21b1e03797bacca68a426369dc563ed53f651 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Wed, 22 Nov 2023 01:16:46 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=B0=EB=A0=B9=EC=A0=9C=ED=95=9C=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Promotion/EventView.vue | 571 ++++++++++++++++--------------
 1 file changed, 305 insertions(+), 266 deletions(-)

diff --git a/src/views/Promotion/EventView.vue b/src/views/Promotion/EventView.vue
index 4368044..7386e38 100644
--- a/src/views/Promotion/EventView.vue
+++ b/src/views/Promotion/EventView.vue
@@ -41,16 +41,6 @@
           </v-card>
         </v-col>
       </v-row>
-      <v-row class="text-center">
-        <v-col>
-          <v-pagination
-            v-model="page"
-            :length="total_page"
-            circle
-            @input="next"
-          />
-        </v-col>
-      </v-row>
     </v-container>
     <v-row>
       <v-dialog
@@ -147,6 +137,50 @@
               </v-col>
             </v-row>
           </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                연령제한
+              </v-col>
+              <v-col cols="8">
+                <v-row>
+                  <v-col>
+                    <input
+                      id="no-auth"
+                      v-model="event.isAdult"
+                      type="radio"
+                      value="false"
+                    >
+                    <label for="no-auth">
+                      본인인증을 하지 않은 유저만
+                    </label>
+                  </v-col>
+                  <v-col>
+                    <input
+                      id="auth"
+                      v-model="event.isAdult"
+                      type="radio"
+                      value="true"
+                    >
+                    <label for="auth">
+                      본인인증을 한 유저만
+                    </label>
+                  </v-col>
+                  <v-col>
+                    <input
+                      id="both"
+                      v-model="event.isAdult"
+                      type="radio"
+                      value=""
+                    >
+                    <label for="both">
+                      상관없음
+                    </label>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-actions v-show="!is_loading">
             <v-btn
               v-show="is_modify"
@@ -222,274 +256,279 @@
 import * as api from '@/api/event'
 
 export default {
-    name: "EventView",
+  name: "EventView",
 
-    data() {
-        return {
-            is_loading: false,
-            is_modify: false,
-            page: 1,
-            events: [],
-            event: {},
-            show_write_dialog: false,
-            show_delete_confirm_dialog: false,
-        }
-    },
-
-    async created() {
-        await this.getEvents()
-    },
-
-    methods: {
-        notifyError(message) {
-            this.$dialog.notify.error(message)
-        },
-
-        notifySuccess(message) {
-            this.$dialog.notify.success(message)
-        },
-
-        thumbnailImageAdd(payload) {
-            const file = payload;
-            if (file) {
-                this.event.thumbnailImageUrl = URL.createObjectURL(file)
-                URL.revokeObjectURL(file)
-            } else {
-                this.event.thumbnailImageUrl = null
-            }
-        },
-
-        detailImageAdd(payload) {
-            const file = payload;
-            if (file) {
-                this.event.detailImageUrl = URL.createObjectURL(file)
-                URL.revokeObjectURL(file)
-            } else {
-                this.event.detailImageUrl = null
-            }
-        },
-
-        popupImageAdd(payload) {
-            const file = payload;
-            if (file) {
-                this.event.popupImageUrl = URL.createObjectURL(file)
-                URL.revokeObjectURL(file)
-            } else {
-                this.event.popupImageUrl = null
-            }
-        },
-
-        async getEvents() {
-            this.is_loading = true
-
-            try {
-                const res = await api.getEvents(this.page)
-                if (res.status === 200 && res.data.success === true) {
-                    this.events = res.data.data.eventList
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        },
-
-        async next() {
-            await this.getEvents()
-        },
-
-        showWriteDialog() {
-            this.show_write_dialog = true
-        },
-
-        clickEvent(item) {
-            this.is_modify = true
-            this.event.id = item.id
-            this.event.thumbnailImageUrl = item.thumbnailImageUrl
-            this.event.detailImageUrl = item.detailImageUrl
-            this.event.link = item.link
-            this.event.title = item.title
-            this.event.isPopup = item.isPopup
-            this.event.popupImageUrl = item.popupImageUrl
-            this.show_write_dialog = true
-        },
-
-        cancel() {
-            this.is_modify = false
-            this.event = {}
-            this.show_write_dialog = false
-        },
-
-        validate() {
-            if (this.event.title == null) {
-                this.notifyError("제목을 입력하세요")
-                return false;
-            }
-
-            if (this.event.thumbnailImage == null) {
-                this.notifyError("썸네일 이미지를 등록하세요")
-                return false;
-            }
-
-            if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) {
-                this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.")
-                return false;
-            }
-
-            return true
-        },
-
-        async submit() {
-            if (!this.validate()) return;
-            if (this.is_loading) return;
-
-            this.is_loading = true
-
-            try {
-                const formData = new FormData()
-                formData.append("title", this.event.title)
-                formData.append("thumbnail", this.event.thumbnailImage)
-                formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false)
-
-                if (this.event.detailImage != null) {
-                    formData.append("detail", this.event.detailImage)
-                }
-
-                if (this.event.popupImage != null) {
-                    formData.append("popup", this.event.popupImage)
-                }
-
-                if (this.event.link != null && this.event.link.trim().length > 0) {
-                    formData.append("link", this.event.link)
-                }
-
-                const res = await api.save(formData)
-                if (res.status === 200 && res.data.success === true) {
-                    this.show_write_dialog = false
-                    this.notifySuccess('등록되었습니다.')
-                    this.page = 1
-                    await this.getEvents()
-                    this.event = {}
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        },
-
-        async modify() {
-            if (this.is_loading) return;
-
-            this.is_loading = true
-            try {
-                const formData = new FormData()
-                formData.append("id", this.event.id)
-
-                if (this.event.title != null && this.event.title.trim().length > 0) {
-                    formData.append("title", this.event.title)
-                }
-
-                if (this.event.thumbnailImage != null) {
-                    formData.append("thumbnail", this.event.thumbnailImage)
-                }
-
-                if (this.event.detailImage != null) {
-                    formData.append("detail", this.event.detailImage)
-                }
-
-                if (this.event.popupImage != null) {
-                    formData.append("popup", this.event.popupImage)
-                }
-
-                if (this.event.isPopup != null) {
-                    formData.append("isPopup", this.event.isPopup)
-                }
-
-                if (this.event.link != null && this.event.link.trim().length > 0) {
-                    formData.append("link", this.event.link)
-                }
-
-                const res = await api.modify(formData)
-                if (res.status === 200 && res.data.success === true) {
-                    this.show_write_dialog = false
-                    this.notifySuccess('수정되었습니다.')
-                    this.page = 1
-                    await this.getEvents()
-                    this.event = {}
-                    this.is_modify = false
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        },
-
-        deleteConfirm() {
-            this.show_delete_confirm_dialog = true
-        },
-
-        deleteCancel() {
-            this.show_delete_confirm_dialog = false
-        },
-
-        async deleteEvent() {
-            if (this.is_loading) return;
-            this.is_loading = true
-
-            try {
-                const res = await api.deleteEvent(this.event.id)
-                if (res.status === 200 && res.data.success === true) {
-                    this.show_write_dialog = false
-                    this.show_delete_confirm_dialog = false
-                    this.notifySuccess('삭제되었습니다.')
-                    this.page = 1
-                    await this.getEvents()
-                    this.event = {}
-                    this.is_modify = false
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        }
+  data() {
+    return {
+      is_loading: false,
+      is_modify: false,
+      events: [],
+      event: { isAdult: '' },
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
     }
+  },
+
+  async created() {
+    await this.getEvents()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    thumbnailImageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.event.thumbnailImageUrl = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.event.thumbnailImageUrl = null
+      }
+    },
+
+    detailImageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.event.detailImageUrl = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.event.detailImageUrl = null
+      }
+    },
+
+    popupImageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.event.popupImageUrl = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.event.popupImageUrl = null
+      }
+    },
+
+    async getEvents() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getEvents(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          this.events = res.data.data.eventList
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    showWriteDialog() {
+      this.event.isAdult = ''
+      this.show_write_dialog = true
+    },
+
+    clickEvent(item) {
+      this.is_modify = true
+      this.event.id = item.id
+      this.event.thumbnailImageUrl = item.thumbnailImageUrl
+      this.event.detailImageUrl = item.detailImageUrl
+      this.event.link = item.link
+      this.event.title = item.title
+      this.event.isPopup = item.isPopup
+      this.event.isAdult = item.isAdult === null ? '' : item.isAdult
+      this.event.popupImageUrl = item.popupImageUrl
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.is_modify = false
+      this.event = { isAdult: '' }
+      this.show_write_dialog = false
+    },
+
+    validate() {
+      if (this.event.title == null) {
+        this.notifyError("제목을 입력하세요")
+        return false;
+      }
+
+      if (this.event.thumbnailImage == null) {
+        this.notifyError("썸네일 이미지를 등록하세요")
+        return false;
+      }
+
+      if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) {
+        this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.")
+        return false;
+      }
+
+      return true
+    },
+
+    async submit() {
+      if (!this.validate()) return;
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("title", this.event.title)
+        formData.append("thumbnail", this.event.thumbnailImage)
+        formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false)
+
+        if (this.event.detailImage != null) {
+          formData.append("detail", this.event.detailImage)
+        }
+
+        if (this.event.popupImage != null) {
+          formData.append("popup", this.event.popupImage)
+        }
+
+        if (this.event.link != null && this.event.link.trim().length > 0) {
+          formData.append("link", this.event.link)
+        }
+
+        if (this.event.isAdult !== undefined && this.event.isAdult !== null && this.event.isAdult !== '') {
+          formData.append("isAdult", JSON.parse(this.event.isAdult))
+        }
+
+        const res = await api.save(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.notifySuccess('등록되었습니다.')
+          this.page = 1
+          await this.getEvents()
+          this.event = { isAdult: '' }
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async modify() {
+      if (this.is_loading) return;
+
+      this.is_loading = true
+      try {
+        const formData = new FormData()
+        formData.append("id", this.event.id)
+
+        if (this.event.title != null && this.event.title.trim().length > 0) {
+          formData.append("title", this.event.title)
+        }
+
+        if (this.event.thumbnailImage != null) {
+          formData.append("thumbnail", this.event.thumbnailImage)
+        }
+
+        if (this.event.detailImage != null) {
+          formData.append("detail", this.event.detailImage)
+        }
+
+        if (this.event.popupImage != null) {
+          formData.append("popup", this.event.popupImage)
+        }
+
+        if (this.event.isPopup != null) {
+          formData.append("isPopup", this.event.isPopup)
+        }
+
+        if (this.event.link != null && this.event.link.trim().length > 0) {
+          formData.append("link", this.event.link)
+        }
+
+        if (this.event.isAdult !== undefined && this.event.isAdult !== null && this.event.isAdult !== '') {
+          formData.append("isAdult", JSON.parse(this.event.isAdult))
+        }
+
+        const res = await api.modify(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.notifySuccess('수정되었습니다.')
+          this.page = 1
+          await this.getEvents()
+          this.event = { isAdult: '' }
+          this.is_modify = false
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    deleteConfirm() {
+      this.show_delete_confirm_dialog = true
+    },
+
+    deleteCancel() {
+      this.show_delete_confirm_dialog = false
+    },
+
+    async deleteEvent() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const res = await api.deleteEvent(this.event.id)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.show_delete_confirm_dialog = false
+          this.notifySuccess('삭제되었습니다.')
+          this.page = 1
+          await this.getEvents()
+          this.event = {}
+          this.is_modify = false
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
 .image-select label {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #232d4a;
-    color: #fff;
-    vertical-align: middle;
-    font-size: 15px;
-    cursor: pointer;
-    border-radius: 5px;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
 }
 
 .v-file-input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
-    border: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
 }
 
 .image-preview {
-    max-width: 100%;
-    width: 250px;
-    object-fit: cover;
-    margin-top: 10px;
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
 }
 </style>