From 9da82dd205e11f95ca06deff04bbb351b61188b8 Mon Sep 17 00:00:00 2001
From: hide_d <hided62@gmail.com>
Date: Sat, 11 Dec 2021 00:20:11 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20login=EC=97=90=EC=84=9C=20modal=EC=9D=84?=
 =?UTF-8?q?=20Bootstrap5=20Modal=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/gateway/login.ts | 14 ++++++++++----
 package.json            |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/hwe/ts/gateway/login.ts b/hwe/ts/gateway/login.ts
index 8cf731d7..b9ab39a6 100644
--- a/hwe/ts/gateway/login.ts
+++ b/hwe/ts/gateway/login.ts
@@ -8,7 +8,7 @@ import { sha512 } from 'js-sha512';
 import { unwrap } from '@util/unwrap';
 import { InvalidResponse } from '@/defs';
 import { delay } from '@util/delay';
-import 'bootstrap';
+import { Modal } from 'bootstrap';
 import '@/gateway/common';
 
 import '@scss/gateway/login.scss';
@@ -54,6 +54,8 @@ declare global {
 declare const kakao_oauth_client_id: string;
 declare const kakao_oauth_redirect_uri: string;
 
+let modalOTP: Modal|undefined = undefined;
+
 let oauthMode: string | null = null;
 
 const TOKEN_VERSION = 1;
@@ -228,10 +230,12 @@ async function doLoginUsingOAuth() {
         return;
     }
 
-    const $modal = $('#modalOTP').modal() as unknown as JQuery;
-    $modal.on('shown.bs.modal', function () {
+    const modalEl = unwrap(document.querySelector('#modalOTP'))
+    modalOTP = new Modal(modalEl);
+    modalEl.addEventListener('shown.bs.modal', function(){
         $('#otp_code').trigger('focus');
     });
+    modalOTP.show();
 }
 
 function postOAuthResult(mode: string) {
@@ -375,7 +379,9 @@ $(async function ($) {
         alert(result.reason);
 
         if (result.reset) {
-            $('#modalOTP').modal('hide')
+            if(modalOTP){
+                modalOTP.hide();
+            }
             return;
         }
     });
diff --git a/package.json b/package.json
index e7ab341c..64d24278 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
+    "@types/bootstrap": "^5.1.6",
     "@types/downloadjs": "^1.4.2",
     "@types/linkifyjs": "^2.1.4",
     "@types/select2": "^4.0.54",
@@ -49,7 +50,6 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-typescript": "^7.16.0",
     "@coreui/vue": "^4.1.1",
-    "@types/bootstrap": "^5.1.6",
     "@types/jquery": "^3.5.10",
     "@types/lodash": "^4.14.178",
     "@types/node": "^16.11.12",