fix: 워크스페이스 기능 복구

Author: djk01281

apps/frontend/src/features/workspace/api/workspaceApi.ts

@@ -2,6 +2,7 @@ import { Delete, Get, Post } from "@/shared/api";
 import {
   CreateWorkSpaceResponse,
   CreateWorkSpaceResquest,
+  GetCurrentUserWorkspaceResponse,
   GetUserWorkspaceResponse,
   RemoveWorkSpaceResponse,
 } from "../model/workspaceTypes";
@@ -30,3 +31,14 @@ export const getUserWorkspaces = async () => {
   const res = await Get<GetUserWorkspaceResponse>(url);
   return res.data;
 };
+
+export const getCurrentWorkspace = async (
+  workspaceId: string,
+  userId: string,
+) => {
+  const url = `${BASE_URL}/${workspaceId}/${userId}`;
+
+  // Response type 바꾸기
+  const res = await Get<GetCurrentUserWorkspaceResponse>(url);
+  return res.data;
+};

apps/frontend/src/features/workspace/model/useWorkspace.ts

@@ -2,9 +2,12 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import {
   createWorkspace,
+  getCurrentWorkspace,
   getUserWorkspaces,
   removeWorkspace,
 } from "../api/workspaceApi";
+import { useGetUser } from "@/features/auth";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
 
 export const useUserWorkspace = () => {
   return useQuery({
@@ -36,3 +39,22 @@ export const useRemoveWorkspace = () => {
     },
   });
 };
+
+export const useCurrentWorkspace = () => {
+  const workspaceId = useWorkspace();
+  const { data: user, isError } = useGetUser();
+
+  return useQuery({
+    queryKey: [
+      "currentWorkspace",
+      workspaceId,
+      isError ? "null" : (user?.snowflakeId ?? "null"),
+    ],
+    queryFn: () =>
+      getCurrentWorkspace(
+        workspaceId,
+        isError ? "null" : (user?.snowflakeId ?? "null"),
+      ),
+    enabled: Boolean(workspaceId),
+  });
+};

apps/frontend/src/features/workspace/model/useWorkspaceStatus.ts

@@ -37,6 +37,7 @@ export const useToggleWorkspaceStatus = (
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["userWorkspace"] });
+      queryClient.invalidateQueries({ queryKey: ["currentWorkspace"] });
     },
   });
 };

apps/frontend/src/features/workspace/model/workspaceTypes.ts

@@ -27,3 +27,8 @@ export interface GetUserWorkspaceResponse {
   message: string;
   workspaces: Workspace[];
 }
+
+export interface GetCurrentUserWorkspaceResponse {
+  message: string;
+  workspace: Workspace;
+}

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

@@ -1,19 +1,67 @@
+import { useState } from "react";
 import { Switch } from "@/shared/ui/Switch";
 import { Globe2, Lock, Copy, CheckCheck } from "lucide-react";
-import { useState } from "react";
+import { useCreateWorkspaceInviteLink } from "../../model/useWorkspaceInvite";
+import { useCurrentWorkspace } from "../../model/useWorkspace";
+import { useToggleWorkspaceStatus } from "../../model/useWorkspaceStatus";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+
+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 workspaceId = useWorkspace();
+  const { data: currentWorkspace, isPending: isWorkspaceLoading } =
+    useCurrentWorkspace();
   const [copied, setCopied] = useState(false);
-  const [isPublic, setIsPublic] = useState(false);
+  const createInviteLinkMutation = useCreateWorkspaceInviteLink();
+  const toggleStatusMutation = useToggleWorkspaceStatus(
+    currentWorkspace?.workspace?.visibility,
+  );
+
+  const PUBLIC_URL = window.location.href;
+
+  const isPending =
+    isWorkspaceLoading ||
+    createInviteLinkMutation.isPending ||
+    toggleStatusMutation.isPending;
+  const isPublic = currentWorkspace?.workspace?.visibility === "public";
+  const isGuest = currentWorkspace?.workspace?.role === "guest";
 
-  const url = "https://octodocs.com";
+  const handlePublicToggle = async () => {
+    if (isGuest) return;
+    await toggleStatusMutation.mutateAsync();
+
+    if (isPublic && !createInviteLinkMutation.data) {
+      await createInviteLinkMutation.mutateAsync(workspaceId);
+    }
+  };
+
+  const getCurrentUrl = () => {
+    if (isWorkspaceLoading) return "워크스페이스를 불러오는 중...";
+    if (isPending) return "처리 중...";
+    if (isPublic) return PUBLIC_URL;
+    if (createInviteLinkMutation.data) {
+      return createFrontendUrl(createInviteLinkMutation.data, workspaceId);
+    }
+    return "링크 생성 중...";
+  };
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(url);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    const urlToCopy = getCurrentUrl();
+    if (!isPending) {
+      await navigator.clipboard.writeText(urlToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
   };
 
+  const isDisabled = !currentWorkspace?.workspace || isGuest || isPending;
+
   return (
     <div className="w-full">
       <div className="flex w-full flex-row justify-between p-1">
@@ -22,29 +70,30 @@ export function SharePanel() {
           <div className="flex items-center space-x-2">
             <Switch
               checked={isPublic}
-              onChange={setIsPublic}
+              onChange={handlePublicToggle}
               CheckedIcon={Globe2}
               UncheckedIcon={Lock}
+              disabled={!currentWorkspace?.workspace || isPending || isGuest}
             />
           </div>
         </div>
         <div className="select-none flex-row text-sm text-slate-400">
-          🚧 수정 중입니다.
+          {isGuest ? "변경 권한이 없습니다." : ""}
         </div>
       </div>
       <div
         className={`flex w-full items-center justify-between gap-2 py-2 ${
-          !isPublic ? "opacity-50" : ""
+          isGuest ? "opacity-50" : ""
         }`}
       >
         <div className="w-48 flex-1 truncate rounded-md bg-gray-100 px-3 py-2 text-sm text-gray-600">
-          {isPublic ? url : "비공개 모드입니다."}
+          {getCurrentUrl()}
         </div>
         <button
           onClick={handleCopy}
           className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-transparent"
           aria-label="Copy URL"
-          disabled={!isPublic}
+          disabled={isDisabled}
         >
           {copied ? (
             <CheckCheck className="h-4 w-4 text-green-500" />

apps/frontend/src/routeTree.gen.ts

@@ -12,6 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
+import { Route as JoinIndexImport } from './routes/join/index'
 import { Route as WorkspaceWorkspaceIdImport } from './routes/workspace/$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,70 @@
+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>) => {
+    const workspaceId = search.workspaceId as string;
+    const token = search.token as string;
+
+    if (!workspaceId || !token) {
+      throw new Error("유효한 링크가 아닙니다.");
+    }
+
+    return { workspaceId, token };
+  },
+  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 },
+          replace: true,
+        });
+      },
+      onError: () => {
+        navigate({ to: "/" });
+      },
+    });
+  }, [token, workspaceId, validateInvite, navigate]);
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="text-center">
+        <div className="mb-2 text-lg font-medium">
+          워크스페이스 초대 확인 중
+        </div>
+        {isPending && (
+          <div className="text-sm text-gray-500">
+            워크스페이스 {workspaceId} 입장 중...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/shared/lib/useWorkspace.ts

@@ -5,5 +5,7 @@ export function useWorkspace(): string {
   const workspaceMatch = matches.find(
     (match) => match.routeId === "/workspace/$workspaceId",
   );
-  return workspaceMatch?.params.workspaceId ?? "main";
+  const workspaceId = workspaceMatch?.params.workspaceId ?? "main";
+  console.log(workspaceId);
+  return workspaceId;
 }