From fbc7b379ba9c853e5720124c95f47c27db51dda6 Mon Sep 17 00:00:00 2001
From: Uno Kim <djkehh@gmail.com>
Date: Thu, 8 Aug 2024 05:55:37 +0900
Subject: [PATCH] =?UTF-8?q?#32=20-=20=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=8F=99=EC=9E=91=EC=97=90=20=EB=B9=84=EB=8F=99?=
 =?UTF-8?q?=EA=B8=B0=20=EC=9A=94=EC=B2=AD=20+=20=EB=8C=80=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=ED=8C=9D=EC=97=85=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

팀 논의 결과(강의 시뮬레이션), 다운로드가 지연되는 문제를
프론트엔드에서 안내 팝업으로 해결하기로 결정하고
적절한 히든 팝업을 tailwind css 스타일을 활용하여 작성.

버튼 클릭 이벤트에서 api 호출을 비동기 처리하여
응답이 올 때까지 대기 팝업을 보여주는 식으로 구현함.
유저는 다운로드가 진행되는 과정을 안내 받음으로써
기다릴 수 있는 동기를 받을 것으로 예상.
---
 .../resources/templates/table-schema.html     | 53 ++++++++++++++++---
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/templates/table-schema.html b/src/main/resources/templates/table-schema.html
index 71104c2..1f9927a 100644
--- a/src/main/resources/templates/table-schema.html
+++ b/src/main/resources/templates/table-schema.html
@@ -106,6 +106,15 @@ <h2 class="text-2xl font-bold text-gray-800 mb-6">테이블 스키마 만들기<
           <button type="button" id="export" class="mt-4 bg-sky-600 text-white py-2 px-4 rounded hover:bg-sky-700">Generate</button>
         </div>
       </section>
+
+      <section id="loading-overlay" class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-white shadow-lg rounded-lg p-6">
+          <div class="text-center">
+            <i class="fas fa-spinner fa-spin text-sky-600 text-3xl"></i>
+            <p class="text-gray-600 mt-4">파일을 다운로드 중입니다. 잠시만 기다려주세요...</p>
+          </div>
+        </div>
+      </section>
     </form>
   </main>
 
@@ -154,12 +163,44 @@ <h2 class="text-2xl font-bold text-gray-800 mb-6">테이블 스키마 만들기<
       const lastRow = schemaFieldList.items.at(-1).elm
       enrollDeleteRowEvent(lastRow.querySelector('.delete-row'), schemaFieldList);
     });
-    document.getElementById('export').addEventListener('click', () => {
-      document.forms['table-schema-form'].action = '/table-schema/export';
-      document.forms['table-schema-form'].method = 'get';
-      document.forms['table-schema-form'].requestSubmit();
-      document.forms['table-schema-form'].action = '/table-schema';
-      document.forms['table-schema-form'].method = 'post';
+    document.getElementById('export').addEventListener('click', async () => {
+      const loadingOverlay = document.getElementById('loading-overlay');
+      const form = document.forms['table-schema-form'];
+      const formData = new FormData(form);
+      const params = new URLSearchParams(formData);
+
+      loadingOverlay.classList.remove('hidden');
+
+      try {
+        const response = await fetch(`/table-schema/export?${params}`, { method: 'GET' });
+
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+
+        const blob = await response.blob();
+        const contentDisposition = response.headers.get('Content-Disposition');
+        let fileName = 'download.txt'; // 기본 파일 이름
+        if (contentDisposition && contentDisposition.includes('attachment')) {
+          const match = contentDisposition.match(/filename="?([^"]+)"?/);
+          if (match) {
+            fileName = match[1];
+          }
+        }
+
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('파일 다운로드 중 오류가 발생하였습니다.', error);
+      } finally {
+        loadingOverlay.classList.add('hidden');
+      }
     });
 
     function enrollDeleteRowEvent(btn, list) {