update

frontend/portal/src/components/Buttons/KakaoLoginButton.tsx

@@ -1,12 +1,17 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import KakaoLogin from 'react-kakao-login'
 import { KAKAO_JAVASCRIPT_KEY } from '@constants/env'
 import { ISocialButton } from '@components/Buttons/GoogleLoginButton'
 import CustomConfirm, { CustomConfirmPrpps } from '@components/CustomConfirm'
 
-const KakaoLoginButton = (props: ISocialButton) => {
-  const { handleClick, confirmMessage } = props
+export interface ISocialKakaoButton extends ISocialButton {
+  kakaoLoginMode?: string
+  setKakaoLoginMode?: any
+}
+
+const KakaoLoginButton = (props: ISocialKakaoButton) => {
+  const { handleClick, confirmMessage, kakaoLoginMode, setKakaoLoginMode } = props
   const { t } = useTranslation()
 
   const [customConfirm, setCustomConfirm] = useState<CustomConfirmPrpps>({
@@ -15,6 +20,23 @@ const KakaoLoginButton = (props: ISocialButton) => {
     handleCancel: () => {},
   })
 
+  useEffect(() => {
+    // 라이브러리에서 로그인 상태를 유지하고 바꿀 수 없어서 이런 코드를..
+    if (kakaoLoginMode !== 'logout' || !document || !document.querySelector('#kakaoIdLogin')) {
+      return
+    }
+
+    const kakaoLoginButton = document.querySelector('#kakaoIdLogin')
+
+    // @ts-ignore
+    kakaoLoginButton.href = 'javascript:void(0);'
+
+    // @ts-ignore
+    kakaoLoginButton.click()
+
+    setKakaoLoginMode(null)
+  }, [kakaoLoginMode])
+
   return (
     <>
       <KakaoLogin
@@ -24,6 +46,7 @@ const KakaoLoginButton = (props: ISocialButton) => {
         render={(_props: any) => (
           <a
             href="#"
+            id="kakaoIdLogin"
             className="social kakao"
             onClick={event => {
               event.preventDefault()

frontend/portal/src/components/Buttons/NaverLoginButton.tsx

@@ -47,6 +47,7 @@ const NaverLoginButton = (loginButtonProps: ISocialButton) => {
     })
 
     naverLogin.init()
+
     if (!window.opener) {
       naver.successCallback = data => {
         return onSuccess(data)
@@ -91,28 +92,28 @@ const NaverLoginButton = (loginButtonProps: ISocialButton) => {
   }
 
   const loadScript = useCallback(() => {
-    if (mounted) {
-      if (
-        document &&
-        document.querySelectorAll('#naver-login-sdk').length === 0
-      ) {
-        let script = document.createElement('script')
-        script.id = 'naver-login-sdk'
-        script.src = NAVER_ID_SDK_URL
-        script.onload = () => {
-          return initLoginButton()
-        }
-        document.head.appendChild(script)
-      } else {
-        initLoginButton()
+    if (
+      document &&
+      document.querySelectorAll('#naver-login-sdk').length === 0
+    ) {
+      let script = document.createElement('script')
+      script.id = 'naver-login-sdk'
+      script.src = NAVER_ID_SDK_URL
+      script.onload = () => {
+        return initLoginButton()
       }
+      document.head.appendChild(script)
+    } else {
+      initLoginButton()
     }
-  }, [mounted])
+  }, [])
 
   useEffect(() => {
-    appendNaverButton()
-    loadScript()
-  }, [])
+    if (mounted) {
+      appendNaverButton()
+      loadScript()
+    }
+  }, [mounted])
 
   const handleLogin = () => {
     if (!document || !document.querySelector('#naverIdLogin').firstChild) {