From fc1d02b9ea32e5bc88e375cbcc3efd961119f657 Mon Sep 17 00:00:00 2001
From: FacerAin <ywsong.dev@kakao.com>
Date: Fri, 11 Aug 2023 01:57:46 +0900
Subject: [PATCH] feat: add upload and download

---
 src/components/dashboard/MainBottom.vue | 88 +++++++++++++++++++++++++
 src/views/dashboard/index.vue           |  4 ++
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/dashboard/MainBottom.vue

diff --git a/src/components/dashboard/MainBottom.vue b/src/components/dashboard/MainBottom.vue
new file mode 100644
index 0000000..6b43b17
--- /dev/null
+++ b/src/components/dashboard/MainBottom.vue
@@ -0,0 +1,88 @@
+<script setup>
+import axios from 'axios';
+import { ref } from 'vue';
+let btnData = ref('upload');
+let btnLoader = ref(false);
+let btnType = ref('');
+let btnMsg = ref('');
+const showModal = ref(false);
+
+const OnClick = () => {
+    btnLoader.value = true;
+    if (btnData.value == 'upload') {
+        axios
+            .post('/s3/upload')
+            .then((res) => {
+                btnData.value = 'download';
+                btnType.value = 'success';
+                btnMsg.value = 's3 업로드 완료';
+                btnLoader.value = false;
+                showModal.value = true;
+            })
+            .catch((err) => {
+                btnMsg.value = 's3 업로드 실패';
+                btnType.value = 'warning';
+                btnLoader.value = false;
+                showModal.value = true;
+                console.error(err);
+            });
+    } else if (btnData.value == 'download') {
+        axios
+            .get('/s3/download', { responseType: 'blob' })
+            .then((res) => {
+                btnData.value = 'upload';
+                btnType.value = 'success';
+                btnMsg.value = 's3 다운로드 완료';
+                btnLoader.value = false;
+                showModal.value = true;
+
+                const url = window.URL.createObjectURL(new Blob([res.data]), {
+                    type: 'application/zip',
+                });
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', 'tf.zip');
+                document.body.appendChild(link);
+                link.click();
+            })
+            .catch((err) => {
+                btnMsg.value = 's3 다운로드 실패';
+                btnType.value = 'warning';
+                btnLoader.value = false;
+                showModal.value = true;
+                console.error(err);
+            });
+    }
+};
+</script>
+<template>
+    <div>
+        <v-btn :loading="btnLoader" class="upload-btn" @click="OnClick">{{
+            btnData
+        }}</v-btn>
+    </div>
+    <template>
+        <v-dialog v-model="showModal" content-class="align-center">
+            <v-alert
+                variant="outlined"
+                :type="btnType"
+                prominent
+                border="top"
+                width="300"
+            >
+                {{ btnMsg }}
+            </v-alert>
+        </v-dialog>
+    </template>
+</template>
+
+<style>
+.upload-btn {
+    margin-top: 10px;
+    margin-left: auto;
+    height: 2rem;
+    background-color: #228be6;
+    color: white;
+    font-weight: bold;
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 6339038..c1eb6f5 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -16,6 +16,9 @@
             <v-row class="row-vueflow">
                 <v-col><NodePlane @nodeClicked="handleRightDrawer" /></v-col>
             </v-row>
+            <v-row>
+                <v-col><MainBottom /></v-col>
+            </v-row>
         </v-container>
     </v-main>
 </template>
@@ -23,6 +26,7 @@
 <script setup>
 import NodePlane from '@/components/node/NodePlane';
 import DrawerInput from '@/components/aws/DrawerInput.vue';
+import MainBottom from '@/components/dashboard/MainBottom.vue';
 import { ref } from 'vue';
 import store from '@/store';