fix

apps/extension/components/PopupBox/PopupBox.tsx

@@ -5,7 +5,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { baseFetcher, userOptions, vocabularyOptions } from '@vook-client/api'
 
-import { getStorage, removeStorage } from '../../utils/storage'
+import { getStorage, removeStorage, setStorage } from '../../utils/storage'
 
 import { LogoutButton, PopupBoxContainer } from './PopupBox.styles'
 
@@ -76,7 +76,14 @@ export const PopupBox = () => {
         }
       },
     )
-  }, [])
+
+    baseFetcher.setTokenRefreshHandler(async (access, refresh) => {
+      client.setQueryData(['access'], access)
+      client.setQueryData(['refresh'], refresh)
+      await setStorage('vook-access', access)
+      await setStorage('vook-refresh', refresh)
+    })
+  }, [client])
 
   const onClickLogin = () => {
     window.open(

apps/extension/content.tsx

@@ -3,7 +3,7 @@ import styleText from 'data-text:@vook-client/design-system/style.css'
 import createCache from '@emotion/cache'
 import { CacheProvider, Global } from '@emotion/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { baseFetcher } from '@vook-client/api'
 
 import { getStorage, removeStorage, setStorage } from './utils/storage'
@@ -35,6 +35,7 @@ const queryClient = new QueryClient({
 })
 
 function VookContentScript() {
+  const [login, setLogin] = useState(false)
   useDomRect()
   const { isSelected, isOpenSearchWindow, position } = useToggle()
 
@@ -49,13 +50,26 @@ function VookContentScript() {
       await removeStorage('vook-access')
       await removeStorage('vook-refresh')
     })
+
+    baseFetcher.setTokenRefreshHandler(async (access, refresh) => {
+      queryClient.setQueryData(['access'], access)
+      queryClient.setQueryData(['refresh'], refresh)
+      await setStorage('vook-access', access)
+      await setStorage('vook-refresh', refresh)
+    })
   }, [])
 
   useEffect(() => {
     const setToken = async () => {
       const access = await getStorage<string>('vook-access')
       const refresh = await getStorage<string>('vook-refresh')
 
+      if (!access || !refresh) {
+        setLogin(false)
+        return
+      }
+
+      setLogin(true)
       queryClient.setQueryData(['access'], access)
       queryClient.setQueryData(['refresh'], refresh)
     }
@@ -91,8 +105,6 @@ function VookContentScript() {
           await setStorage('vook-access', event.data.access)
           await setStorage('vook-refresh', event.data.refresh)
 
-          console.log(event.data)
-
           queryClient.setQueryData(['access'], event.data.access)
           queryClient.setQueryData(['refresh'], event.data.refresh)
 
@@ -106,7 +118,7 @@ function VookContentScript() {
     <CacheProvider value={styleCache}>
       <Global styles={reset} />
       <QueryClientProvider client={queryClient}>
-        {isSelected && <ToggleButton position={position} />}
+        {login && isSelected && <ToggleButton position={position} />}
         {isOpenSearchWindow && <SearchWindow />}
       </QueryClientProvider>
     </CacheProvider>

packages/api/src/lib/fetcher.ts

@@ -16,6 +16,9 @@ export class Fetcher {
 
   private unAuthorizedHandler: () => void = () => {}
 
+  private tokenRefreshHandler: (access: string, refresh: string) => void =
+    async () => {}
+
   private errorHandler: (error: Error) => void = () => {}
 
   public constructor(baseUrl: string) {
@@ -26,6 +29,12 @@ export class Fetcher {
     this.errorHandler = handler
   }
 
+  public setTokenRefreshHandler(
+    handler: (access: string, refresh: string) => void,
+  ) {
+    this.tokenRefreshHandler = handler
+  }
+
   public setUnAuthorizedHandler(handler: () => void) {
     this.unAuthorizedHandler = handler
   }
@@ -139,6 +148,8 @@ export class Fetcher {
         throw new Error('토큰 갱신에 실패하였습니다.')
       }
 
+      this.tokenRefreshHandler(newAccessToken, newRefreshToken)
+
       Cookies.set('access', newAccessToken, {
         expires: new Date('2038-01-19T03:14:07.000Z'),
       })