[Fix] 로그인 관련 버그 핫픽스 (#44)

* fix: 토큰 관련 로직 수정 * fix: 온보딩 페이지 뒤로가기 접근 제한 * fix: 닉네임 공백 관련 처리 추가 * fix: 로그인 취소 관련 리다이렉트 추가 * design: 검색된 용어 색상 수정 * fix: 메세지 중복 요청 제거
makevook · Aug 7, 2024 · 66d94d9 · 66d94d9
1 parent 052a729
commit 66d94d9
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 234 deletions.
diff --git a/apps/web/src/app/(afterLogin)/layout.tsx b/apps/web/src/app/(afterLogin)/layout.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
-import { userService, UserStatus } from '@vook-client/api'
-import { cookies, headers } from 'next/headers'
+import { UserInfoResponse, userService, UserStatus } from '@vook-client/api'
+import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 
@@ -15,24 +15,30 @@ import { mainArea } from './layout.css'
 
 const Layout = async ({ children }: PropsWithChildren) => {
   const cookieStore = cookies()
-  const isAuthorization = headers().get('X-AuthConfirm')
-
-  if (isAuthorization !== 'confirmed') {
-    redirect('/login')
-  }
 
   const access = cookieStore.get('access')?.value || ''
   const refresh = cookieStore.get('refresh')?.value || ''
 
-  if (!access && !refresh) {
+  if (!access || !refresh) {
     redirect('/login')
   }
 
   const queryClient = getQueryClient()
+
   queryClient.setQueryData(['access'], access)
   queryClient.setQueryData(['refresh'], refresh)
 
-  const user = await userService.userInfo(queryClient)
+  let user: UserInfoResponse
+
+  try {
+    user = await userService.userInfo(queryClient)
+  } catch {
+    redirect('/login')
+  }
+
+  if (user.result.onboardingCompleted === false) {
+    redirect('/onboarding')
+  }
 
   if (user.result.status !== UserStatus.Registered) {
     redirect('/signup')

diff --git a/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.css.ts b/apps/web/src/app/(afterLogin)/vocabulary/[id]/_component/term/Term.css.ts
@@ -36,7 +36,7 @@ export const termTitleContainer = style({
 })
 
 export const highlightHit = style({
-  backgroundColor: vars.colors['component-alternative'],
+  backgroundColor: vars.colors['semantic-line-alternative'],
 })
 
 export const highlight = style({

diff --git a/apps/web/src/app/(afterLogin)/workspace/layout.tsx b/apps/web/src/app/(afterLogin)/workspace/layout.tsx
@@ -1,36 +1,20 @@
 import { PropsWithChildren } from 'react'
-import { userService, UserStatus } from '@vook-client/api'
-import { cookies, headers } from 'next/headers'
-import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 
 import { getQueryClient } from '@/utils/react-query'
 
-const Layout = async ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: PropsWithChildren) => {
   const cookieStore = cookies()
-  const isAuthorization = headers().get('X-AuthConfirm')
-
-  if (isAuthorization !== 'confirmed') {
-    redirect('/login')
-  }
 
   const access = cookieStore.get('access')?.value || ''
   const refresh = cookieStore.get('refresh')?.value || ''
 
-  if (!access && !refresh) {
-    redirect('/login')
-  }
-
   const queryClient = getQueryClient()
+
   queryClient.setQueryData(['access'], access)
   queryClient.setQueryData(['refresh'], refresh)
 
-  const user = await userService.userInfo(queryClient)
-
-  if (user.result.status !== UserStatus.Registered) {
-    redirect('/signup')
-  }
-
   const dehydrateState = dehydrate(queryClient)
 
   return (

diff --git a/apps/web/src/app/(beforeLogin)/auth/page.tsx b/apps/web/src/app/(beforeLogin)/auth/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation'
+
+const Page = () => {
+  return redirect('/login')
+}
+
+export default Page
diff --git a/apps/web/src/app/(beforeLogin)/auth/token/page.tsx b/apps/web/src/app/(beforeLogin)/auth/token/page.tsx
@@ -32,14 +32,6 @@ const AuthCallbackPage = ({
       secure: true,
       expires: new Date('2038-01-19T03:14:07.000Z'),
     })
-    window.postMessage(
-      {
-        from: 'vook-web',
-        access,
-        refresh,
-      },
-      '*',
-    )
     queryClient.setQueryData(['access'], access)
     queryClient.setQueryData(['refresh'], refresh)
 

diff --git a/apps/web/src/app/(onboarding)/onboarding/job/page.tsx b/apps/web/src/app/(onboarding)/onboarding/job/page.tsx
@@ -6,12 +6,10 @@ import {
   SelectBox,
   Text,
 } from '@vook-client/design-system'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { OnboardingJob, useOnboardingMutation } from '@vook-client/api'
 import { useRouter } from 'next/navigation'
 
-import { Link } from '@/components/Link'
-
 import { SelectBoxGroup } from '../_components/SelectBoxGroup'
 import { useOnBoarding } from '../_context/useOnboarding'
 import { OnboardingHeader } from '../_components/OnboardingHeader'
@@ -76,10 +74,17 @@ const OnboardingJobPage = () => {
     },
   )
 
-  const onSubmitFunnel = () => {
-    if (!mutation.isPending || !mutation.isSuccess) {
-      mutation.mutate()
+  useEffect(() => {
+    window.onpopstate = () => {
+      if (location.pathname === '/onboarding/job') {
+        alert('뒤로가기를 통한 접근을 감지하여 페이지를 이동합니다.')
+        router.push('/workspace')
+      }
     }
+  }, [router])
+
+  const onSubmitFunnel = () => {
+    mutation.mutate()
   }
 
   const onClickJob = (job: OnboardingJob) => {
@@ -122,22 +127,20 @@ const OnboardingJobPage = () => {
         <Text type="body-2" color="label-alternative" onClick={onSubmitFunnel}>
           건너뛰기
         </Text>
-        <Link href="/onboarding/job">
-          <Button
-            onClick={onSubmitFunnel}
-            size="middle"
-            disabled={
-              selectedJob === null || mutation.isPending || mutation.isSuccess
-            }
-            suffixIcon={
-              mutation.isPending || mutation.isSuccess
-                ? 'spinner-medium'
-                : undefined
-            }
-          >
-            시작하기
-          </Button>
-        </Link>
+        <Button
+          onClick={onSubmitFunnel}
+          size="middle"
+          disabled={
+            selectedJob === null || mutation.isPending || mutation.isSuccess
+          }
+          suffixIcon={
+            mutation.isPending || mutation.isSuccess
+              ? 'spinner-medium'
+              : undefined
+          }
+        >
+          시작하기
+        </Button>
       </div>
     </div>
   )

diff --git a/apps/web/src/app/(onboarding)/onboarding/layout.tsx b/apps/web/src/app/(onboarding)/onboarding/layout.tsx
@@ -10,21 +10,29 @@ import { OnBoardingProvider } from './_context/useOnboarding'
 
 const Layout = async ({ children }: PropsWithChildren) => {
   const cookieStore = cookies()
+
   const accessToken = cookieStore.get('access')?.value
   const refreshToken = cookieStore.get('refresh')?.value
 
-  if (!accessToken && !refreshToken) {
+  if (!accessToken || !refreshToken) {
     redirect('/login')
   }
 
   const queryClient = getQueryClient()
+
   queryClient.setQueryData(['access'], accessToken)
   queryClient.setQueryData(['refresh'], refreshToken)
 
-  const userInfo = await userService.userInfo(queryClient)
+  let userInfo
+
+  try {
+    userInfo = await userService.userInfo(queryClient)
+  } catch {
+    redirect('/login')
+  }
 
   if (userInfo.result.onboardingCompleted) {
-    redirect('/')
+    redirect('/workspace')
   }
 
   return (

diff --git a/apps/web/src/components/InitialSetting/InitialSetting.tsx b/apps/web/src/components/InitialSetting/InitialSetting.tsx
@@ -2,14 +2,20 @@
 
 import { baseFetcher } from '@vook-client/api'
 import { useLayoutEffect } from 'react'
+import Cookies from 'js-cookie'
+import { useQueryClient } from '@tanstack/react-query'
 
 import { useToast } from '@/hooks/useToast'
 
 export const InitialSetting = () => {
   const { addToast } = useToast()
+  const client = useQueryClient()
 
   useLayoutEffect(() => {
     // eslint-disable-next-line promise/prefer-await-to-callbacks
+    client.setQueryData(['access'], Cookies.get('access'))
+    client.setQueryData(['refresh'], Cookies.get('refresh'))
+
     baseFetcher.setUnAuthorizedHandler(() => {
       location.href = '/login'
     })
@@ -19,6 +25,14 @@ export const InitialSetting = () => {
         type: 'error',
       })
     })
+    baseFetcher.setTokenRefreshHandler((access, refresh) => {
+      Cookies.set('access', access, {
+        expires: new Date('2038-01-19T03:14:07.000Z'),
+      })
+      Cookies.set('refresh', refresh, {
+        expires: new Date('2038-01-19T03:14:07.000Z'),
+      })
+    })
   }, [addToast])
 
   return null

diff --git a/apps/web/src/components/ProfileEditForm/ProfileEditForm.tsx b/apps/web/src/components/ProfileEditForm/ProfileEditForm.tsx
@@ -27,7 +27,7 @@ export const ProfileEditForm = () => {
 
   const userEditMutation = useEditUserMutation(
     {
-      nickname,
+      nickname: nickname.trim(),
     },
     {
       onSuccess: () => {
@@ -56,7 +56,7 @@ export const ProfileEditForm = () => {
 
   useEffect(
     function checkValidateNickname() {
-      const isBlankNickname = nickname.length === 0
+      const isBlankNickname = nickname.trim().length === 0
       const isSameNickname = nickname === user?.nickname
 
       if (isBlankNickname || isSameNickname) {

diff --git a/apps/web/src/components/SignUpForm/SignUpForm.tsx b/apps/web/src/components/SignUpForm/SignUpForm.tsx
@@ -80,13 +80,11 @@ export const SignUpForm = () => {
     [signUpMutation.isPending],
   )
 
-  const canSubmit = useMemo(
-    () =>
-      !formState.isValid ||
-      signUpMutation.isPending ||
-      signUpMutation.isSuccess,
-    [formState.isValid, signUpMutation.isPending, signUpMutation.isSuccess],
-  )
+  const canSubmit =
+    watch('nickname').trim().length === 0 ||
+    !formState.isValid ||
+    signUpMutation.isPending ||
+    signUpMutation.isSuccess
 
   if (!userInfoQuery.data) {
     return null