Merge pull request #324 from boostcampwm-2024/feature-fe-#315

워크스페이스 공유 기능 추가

Author: yewonJin

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

@@ -0,0 +1,32 @@
+import { Delete, Get, Post } from "@/shared/api";
+import {
+  CreateWorkSpaceResponse,
+  CreateWorkSpaceResquest,
+  GetUserWorkspaceResponse,
+  RemoveWorkSpaceResponse,
+} from "../model/workspaceTypes";
+
+const BASE_URL = "/api/workspace";
+
+export const createWorkspace = async (payload: CreateWorkSpaceResquest) => {
+  const res = await Post<CreateWorkSpaceResponse, CreateWorkSpaceResquest>(
+    BASE_URL,
+    payload,
+  );
+  return res.data;
+};
+
+export const removeWorkspace = async (workspaceId: string) => {
+  const url = `${BASE_URL}/${workspaceId}`;
+
+  const res = await Delete<RemoveWorkSpaceResponse>(url);
+  return res.data;
+};
+
+// TODO: /entities/user vs workspace 위치 고민해봐야할듯?
+export const getUserWorkspaces = async () => {
+  const url = `${BASE_URL}/user`;
+
+  const res = await Get<GetUserWorkspaceResponse>(url);
+  return res.data;
+};

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

@@ -0,0 +1,14 @@
+import { Post } from "@/shared/api";
+import { SetWorkspaceStatusResponse } from "../model/workspaceInviteTypes";
+
+export const setWorkspaceStatusToPrivate = async (id: string) => {
+  // TODO: URL 맞게 고치기.
+  const url = `/api/workspace/${id}/private`;
+  await Post<SetWorkspaceStatusResponse, null>(url);
+};
+
+export const setWorkspaceStatusToPublic = async (id: string) => {
+  // TODO: URL 맞게 고치기.
+  const url = `/api/workspace/${id}/public`;
+  await Post<SetWorkspaceStatusResponse, null>(url);
+};

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

@@ -0,0 +1,23 @@
+import { Get, Post } from "@/shared/api";
+import {
+  WorkspaceInviteLinkRequest,
+  WorkspaceInviteLinkResponse,
+  ValidateWorkspaceLinkResponse,
+} from "@/features/workspace/model/workspaceInviteTypes";
+
+export const createWorkspaceInviteLink = async (id: string) => {
+  const url = `/api/workspace/${id}/invite`;
+
+  const res = await Post<
+    WorkspaceInviteLinkResponse,
+    WorkspaceInviteLinkRequest
+  >(url, { id });
+
+  return res.data.inviteUrl;
+};
+
+export const validateWorkspaceInviteLink = async (token: string) => {
+  const url = `/api/workspace/join?token=${token}`;
+  const res = await Get<ValidateWorkspaceLinkResponse>(url);
+  return res.data;
+};

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

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type InviteLinkStore = {
+  inviteLink: string | null;
+  setInviteLink: (link: string) => void;
+};
+
+export const useInviteLinkStore = create<InviteLinkStore>((set) => ({
+  inviteLink: null,
+  setInviteLink: (link) => set({ inviteLink: link }),
+}));

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

@@ -0,0 +1,38 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createWorkspace,
+  getUserWorkspaces,
+  removeWorkspace,
+} from "../api/workspaceApi";
+
+export const useUserWorkspace = () => {
+  return useQuery({
+    queryKey: ["userWorkspace"],
+    queryFn: getUserWorkspaces,
+  });
+};
+
+// response로 workspaceId가 오는데 userWorkspace를 어떻게 invalidate 할까?
+// login state에 있는 userId로?
+export const useCreateWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createWorkspace,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userWorkspace"] });
+    },
+  });
+};
+
+export const useRemoveWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: removeWorkspace,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userWorkspace"] });
+    },
+  });
+};

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

@@ -0,0 +1,17 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  createWorkspaceInviteLink,
+  validateWorkspaceInviteLink,
+} from "../api/worskspaceInviteApi";
+
+export const useCreateWorkspaceInviteLink = () => {
+  return useMutation({
+    mutationFn: (id: string) => createWorkspaceInviteLink(id),
+  });
+};
+
+export const useValidateWorkspaceInviteLink = () => {
+  return useMutation({
+    mutationFn: (token: string) => validateWorkspaceInviteLink(token),
+  });
+};

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

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUserWorkspace } from "@/features/workspace/model/useWorkspace";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+import {
+  setWorkspaceStatusToPrivate,
+  setWorkspaceStatusToPublic,
+} from "../api/workspaceStatusApi";
+
+export const useWorkspaceStatus = () => {
+  const { data } = useUserWorkspace();
+  const currentWorkspaceId = useWorkspace();
+
+  const workspaces = data?.workspaces;
+  return workspaces?.find(
+    (workspace) => workspace.workspaceId === currentWorkspaceId,
+  )?.visibility;
+};
+
+export const useToggleWorkspaceStatus = (
+  currentStatus: "public" | "private" | undefined,
+) => {
+  const queryClient = useQueryClient();
+  const currentWorkspaceId = useWorkspace();
+
+  return useMutation({
+    mutationFn: () => {
+      if (currentStatus === undefined) {
+        throw new Error("Workspace status is undefined");
+      }
+
+      const toggleFn =
+        currentStatus === "public"
+          ? setWorkspaceStatusToPrivate
+          : setWorkspaceStatusToPublic;
+
+      return toggleFn(currentWorkspaceId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userWorkspace"] });
+    },
+  });
+};

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

@@ -0,0 +1,16 @@
+export interface WorkspaceInviteLinkRequest {
+  id: string;
+}
+
+export interface WorkspaceInviteLinkResponse {
+  message: string;
+  inviteUrl: string;
+}
+
+export interface ValidateWorkspaceLinkResponse {
+  message: string;
+}
+
+export interface SetWorkspaceStatusResponse {
+  message: string;
+}

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

@@ -0,0 +1,29 @@
+export interface Workspace {
+  workspaceId: string;
+  title: string;
+  description: string;
+  thumbnailUrl: string;
+  role: "owner" | "guest";
+  visibility: "private" | "public";
+}
+
+export interface CreateWorkSpaceResquest {
+  title: string;
+  description?: string;
+  visibility?: "private" | "public";
+  thumbnailUrl?: string;
+}
+
+export interface CreateWorkSpaceResponse {
+  message: string;
+  workspaceId: string;
+}
+
+export interface RemoveWorkSpaceResponse {
+  message: string;
+}
+
+export interface GetUserWorkspaceResponse {
+  message: string;
+  workspaces: Workspace[];
+}

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

@@ -0,0 +1,25 @@
+// TODO: admin이 아니라면 tooltip 추가 "권한이 없습니다."
+
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+import { useUserWorkspace } from "../../model/useWorkspace";
+
+export function Sharebutton() {
+  const currentWorkspaceId = useWorkspace();
+  const { data } = useUserWorkspace();
+  const workspaces = data?.workspaces;
+  const workspace = workspaces?.find(
+    (workspace) => workspace.workspaceId === currentWorkspaceId,
+  );
+  const isGuest = workspace?.role === "guest";
+
+  return (
+    <div className="flex h-9 items-center justify-center">
+      <button
+        disabled={isGuest}
+        className="rounded-md bg-blue-400 px-2 py-1 text-sm text-white hover:bg-blue-500"
+      >
+        공유
+      </button>
+    </div>
+  );
+}