Merge pull request #264 from kakao-tech-campus-2nd-step3/Week11

Week11 7

src/components/PageLayout/SideNavigation/index.tsx

@@ -4,11 +4,13 @@ import { Link } from 'react-router-dom'
 import { Box, Flex } from '@chakra-ui/react'
 
 import { useAuthTokenStore } from '@/stores/auth-token'
+import { useInviteUrl } from '@/stores/invite-url'
 import { useUserInfoStore } from '@/stores/user-info'
 
 export const SideNavigation = () => {
   const clearAuthToken = useAuthTokenStore((state) => state.clearAuthToken)
   const isLoggedIn = useAuthTokenStore((state) => state.isLoggedIn())
+  const clearInviteUrl = useInviteUrl((state) => state.clearInviteUrl)
 
   const clearUserInfo = useUserInfoStore((state) => state.clearUserInfo)
   const userId = useUserInfoStore((state) => state.userInfo?.userId)
@@ -51,6 +53,7 @@ export const SideNavigation = () => {
         onClick={() => {
           clearAuthToken()
           clearUserInfo()
+          clearInviteUrl()
         }}
       >
         <BiLogOut size={26} />

src/pages/InvitePage/index.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useParams, useSearchParams } from 'react-router-dom'
 
 import { Flex, Heading } from '@chakra-ui/react'
 
 import ErrorPage from '@/pages/ErrorPage'
+import { useInviteUrl } from '@/stores/invite-url'
 
 import { InviteCard } from './InviteCard'
 import { InviteErrorFallback } from './InviteErrorFallback'
@@ -12,7 +14,15 @@ export default function InvitePage() {
   const { groupId } = useParams<{ groupId: string }>()
   const [searchParams] = useSearchParams()
 
+  const setInviteUrl = useInviteUrl((state) => state.setInviteUrl)
   const inviteCode = searchParams.get('invite-code')
+
+  useEffect(() => {
+    if (inviteCode) {
+      setInviteUrl(window.location.href)
+    }
+  }, [inviteCode, setInviteUrl])
+
   if (!inviteCode) return <ErrorPage />
 
   return (

src/pages/RegisterPage/index.tsx

@@ -27,11 +27,14 @@ import {
 } from '@/components/Form'
 import { RegisterUserFields, RegisterUserSchema } from '@/schema/user'
 import { useAuthTokenStore } from '@/stores/auth-token'
+import { useInviteUrl } from '@/stores/invite-url'
 import { useUserInfoStore } from '@/stores/user-info'
 
 export default function RegisterPage() {
   const navigate = useNavigate()
   const role = useUserInfoStore((state) => state.userInfo?.role)
+  const inviteUrl = useInviteUrl((state) => state.inviteUrl)
+  const clearInviteUrl = useInviteUrl((state) => state.clearInviteUrl)
 
   const form = useForm<RegisterUserFields>({
     resolver: zodResolver(RegisterUserSchema),
@@ -51,7 +54,8 @@ export default function RegisterPage() {
     onSuccess: (data) => {
       setAuthToken(data.accessToken)
       setUserInfo(data.userInfo)
-      navigate('/')
+      window.location.href = `${inviteUrl}`
+      clearInviteUrl()
     },
   })
 

src/stores/invite-url.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface InviteUrlProps {
+  inviteUrl: string
+  setInviteUrl: (inviteUrl: string) => void
+  clearInviteUrl: () => void
+}
+
+export const useInviteUrl = create(
+  persist<InviteUrlProps>(
+    (set) => ({
+      inviteUrl: '/',
+      setInviteUrl: (inviteUrl) => {
+        set({ inviteUrl })
+      },
+      clearInviteUrl: () => {
+        set({ inviteUrl: '/' })
+      },
+    }),
+    {
+      name: 'invite-url',
+    }
+  )
+)