feat: 토큰 동기화용 컴포넌트 추가

apps/extension/components/PopupBox/PopupBox.tsx

@@ -12,33 +12,39 @@ import { PopupBoxContainer } from './PopupBox.styles'
 import { SearchBox } from 'components/SearchBox'
 
 export const PopupBox = () => {
-  const [tokenExist, setTokenExist] = useState<boolean>(false)
   const [login, setLogin] = useState<boolean>(false)
+  const [tokenDone, setTokenDone] = useState<boolean>(false)
   const [hasResult, setHasResult] = useState<boolean>(false)
 
   const client = useQueryClient()
 
   const userInfo = useQuery({
     ...userOptions.userInfo(client),
-    enabled: tokenExist,
+    enabled: tokenDone,
   })
   const vocabularyQuery = useQuery({
     ...vocabularyOptions.vocabularyInfo(client),
-    enabled: tokenExist,
+    enabled: tokenDone,
   })
 
   useLayoutEffect(() => {
     const setToken = async () => {
       const access = await getStorage<string>('vook-access')
       const refresh = await getStorage<string>('vook-refresh')
+      const vookLogin = await getStorage<string>('vook-login')
 
       if (!access || !refresh) {
         return
       }
 
+      if (!vookLogin) {
+        setLogin(false)
+        return
+      }
+
       client.setQueryData(['access'], access)
       client.setQueryData(['refresh'], refresh)
-      setTokenExist(true)
+      setTokenDone(true)
     }
 
     setToken()
@@ -79,7 +85,7 @@ export const PopupBox = () => {
         <SymbolLogo size={24} />
         <TypoLogo size="small" />
       </div>
-      {!tokenExist && !login && (
+      {tokenDone && !login && (
         <>
           <Text type="body-1" fontWeight="medium">
             주제별로 용어집을 관리하고, 간편하게 용어를 검색하세요
@@ -103,9 +109,7 @@ export const PopupBox = () => {
           </Text>
         </>
       )}
-      {login && userInfo.isSuccess && (
-        <SearchBox hasResult={hasResult} setHasResult={setHasResult} />
-      )}
+      {login && <SearchBox hasResult={hasResult} setHasResult={setHasResult} />}
     </PopupBoxContainer>
   )
 }

apps/extension/content.tsx

@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect } from 'react'
 import { baseFetcher } from '@vook-client/api'
 
-import { getStorage, setStorage } from './utils/storage'
+import { getStorage, removeStorage, setStorage } from './utils/storage'
 import { ToggleButton } from './components/ToggleButton'
 import { SearchWindow } from './components/SearchWindow'
 import { useDomRect } from './hooks/useDomRect'
@@ -39,8 +39,15 @@ function VookContentScript() {
   const { isSelected, isOpenSearchWindow, position } = useToggle()
 
   useEffect(() => {
-    baseFetcher.setUnAuthorizedHandler(() => {
-      window.open(process.env.PLASMO_PUBLIC_WEB_DOMAIN + '/login', '_blank')
+    baseFetcher.setUnAuthorizedHandler(async () => {
+      queryClient.removeQueries({
+        queryKey: ['access'],
+      })
+      queryClient.removeQueries({
+        queryKey: ['refresh'],
+      })
+      await removeStorage('vook-access')
+      await removeStorage('vook-refresh')
     })
   }, [])
 
@@ -83,6 +90,7 @@ function VookContentScript() {
         ) {
           await setStorage('vook-access', event.data.access)
           await setStorage('vook-refresh', event.data.refresh)
+          await setStorage('vook-login', true)
           queryClient.setQueryData(['access'], event.data.access)
           queryClient.setQueryData(['refresh'], event.data.refresh)
           postSuccessMessage()

apps/web/src/app/layout.tsx

@@ -8,6 +8,7 @@ import { pretendard } from '@/styles/fonts'
 import { MSWComponent } from '@/mock/MSWComponent'
 import { ToastContextProvider } from '@/hooks/useToast'
 import { InitialSetting } from '@/components/InitialSetting'
+import TokenSender from '@/components/TokenSender/TokenSender'
 
 import { ModalContextProvider } from 'src/hooks/useModal/useModal'
 
@@ -26,6 +27,7 @@ const RootLayout = ({
       <ModalContextProvider>
         <ToastContextProvider>
           <InitialSetting />
+          <TokenSender />
           <div>{children}</div>
           <div id="modal" />
         </ToastContextProvider>

apps/web/src/components/TokenSender/TokenSender.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import Cookies from 'js-cookie'
+import { usePathname } from 'next/navigation'
+import { useLayoutEffect } from 'react'
+
+const TokenSender = () => {
+  const location = usePathname()
+
+  useLayoutEffect(() => {
+    const access = Cookies.get('access')
+    const refresh = Cookies.get('refresh')
+
+    if (!access || !refresh) {
+      return
+    }
+
+    global.window.postMessage(
+      {
+        from: 'vook-web',
+        access,
+        refresh,
+      },
+      '*',
+    )
+  }, [location])
+
+  return null
+}
+
+export default TokenSender