feat: 워크스페이스 초대 수락 라우팅 구현

Author: djk01281

apps/frontend/src/features/workspace/ui/ShareTool/SharePanel.tsx

@@ -9,6 +9,14 @@ import { useCreateWorkspaceInviteLink } from "@/features/workspace/model/useWork
 import { useWorkspace } from "@/shared/lib/useWorkspace";
 import { useInviteLinkStore } from "@/features/workspace/model/useInviteLinkStore";
 
+const createFrontendUrl = (apiUrl: string, currentWorkspaceId: string) => {
+  const searchParams = new URLSearchParams();
+
+  searchParams.set("workspaceId", currentWorkspaceId);
+  searchParams.set("token", new URL(apiUrl).searchParams.get("token") || "");
+  return `${window.location.origin}/join?${searchParams.toString()}`;
+};
+
 export function SharePanel() {
   const [copied, setCopied] = useState(false);
   const currentWorkspaceId = useWorkspace();
@@ -30,7 +38,8 @@ export function SharePanel() {
     } else if (!inviteLink && currentWorkspaceId) {
       createLink(currentWorkspaceId, {
         onSuccess: (inviteUrl) => {
-          setInviteLink(inviteUrl);
+          const frontendUrl = createFrontendUrl(inviteUrl, currentWorkspaceId);
+          setInviteLink(frontendUrl);
         },
       });
     }

apps/frontend/src/routeTree.gen.ts

@@ -12,7 +12,8 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
-import { Route as WorkspaceWorkspaceIdImport } from './routes/workspace/$workspaceId'
+import { Route as JoinIndexImport } from './routes/join/index'
+import { Route as WorkspaceWorkspaceIdImpo./routes/joinworkspace/$workspaceId'
 
 // Create/Update Routes
 
@@ -22,6 +23,12 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const JoinIndexRoute = JoinIndexImport.update({
+  id: '/join/',
+  path: '/join/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const WorkspaceWorkspaceIdRoute = WorkspaceWorkspaceIdImport.update({
   id: '/workspace/$workspaceId',
   path: '/workspace/$workspaceId',
@@ -46,6 +53,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof WorkspaceWorkspaceIdImport
       parentRoute: typeof rootRoute
     }
+    '/join/': {
+      id: '/join/'
+      path: '/join'
+      fullPath: '/join'
+      preLoaderRoute: typeof JoinIndexImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -54,36 +68,41 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/workspace/$workspaceId': typeof WorkspaceWorkspaceIdRoute
+  '/join': typeof JoinIndexRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/workspace/$workspaceId': typeof WorkspaceWorkspaceIdRoute
+  '/join': typeof JoinIndexRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/workspace/$workspaceId': typeof WorkspaceWorkspaceIdRoute
+  '/join/': typeof JoinIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/workspace/$workspaceId'
+  fullPaths: '/' | '/workspace/$workspaceId' | '/join'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/workspace/$workspaceId'
-  id: '__root__' | '/' | '/workspace/$workspaceId'
+  to: '/' | '/workspace/$workspaceId' | '/join'
+  id: '__root__' | '/' | '/workspace/$workspaceId' | '/join/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   WorkspaceWorkspaceIdRoute: typeof WorkspaceWorkspaceIdRoute
+  JoinIndexRoute: typeof JoinIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   WorkspaceWorkspaceIdRoute: WorkspaceWorkspaceIdRoute,
+  JoinIndexRoute: JoinIndexRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,14 +116,18 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/workspace/$workspaceId"
+        "/workspace/$workspaceId",
+        "/join/"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
     "/workspace/$workspaceId": {
       "filePath": "workspace/$workspaceId.tsx"
+    },
+    "/join/": {
+      "filePath": "join/index.tsx"
     }
   }
 }

apps/frontend/src/routes/join/index.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useValidateWorkspaceInviteLink } from "@/features/workspace/model/useWorkspaceInvite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const joinQueryClient = new QueryClient();
+
+function JoinWrapper() {
+  return (
+    <QueryClientProvider client={joinQueryClient}>
+      <JoinComponent />
+    </QueryClientProvider>
+  );
+}
+
+export const Route = createFileRoute("/join/")({
+  validateSearch: (search: Record<string, unknown>) => {
+    return {
+      workspaceId: search.workspaceId as string,
+      token: search.token as string,
+    };
+  },
+  component: JoinWrapper,
+});
+
+function JoinComponent() {
+  const { workspaceId, token } = Route.useSearch();
+  const navigate = useNavigate();
+  const { mutate: validateInvite, isPending } =
+    useValidateWorkspaceInviteLink();
+
+  useEffect(() => {
+    if (!token || !workspaceId) {
+      navigate({ to: "/" });
+      return;
+    }
+
+    validateInvite(token, {
+      onSuccess: () => {
+        navigate({ to: "/workspace/$workspaceId", params: { workspaceId } });
+      },
+      onError: () => {
+        navigate({ to: "/" });
+      },
+    });
+  }, [token, workspaceId, validateInvite, navigate]);
+
+  if (isPending) {
+    return <div>워크스페이스 {workspaceId} 입장 중 ...</div>;
+  }
+
+  return null;
+}