fix: login에서 modal을 Bootstrap5 Modal로

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;
         }
     });

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",