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

Author: djk01281

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/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,40 @@
+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: workspaces } = useUserWorkspace();
+  const currentWorkspaceId = useWorkspace();
+
+  return workspaces?.find((workspace) => workspace.id === currentWorkspaceId)
+    ?.status;
+};
+
+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/ui/ShareTool/ShareButton.tsx

@@ -0,0 +1,24 @@
+// TODO: admin이 아니라면 tooltip 추가 "권한이 없습니다."
+
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+import { useUserWorkspace } from "../../model/useWorkspace";
+
+export function Sharebutton() {
+  const currentWorkspaceId = useWorkspace();
+  const workspaces = useUserWorkspace();
+  const workspace = workspaces?.find(
+    (workspace) => workspace.id === 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-[#171717] hover:bg-blue-500"
+      >
+        공유
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { Switch } from "@/shared/ui/Switch";
+import { Globe2, Lock, Copy, CheckCheck } from "lucide-react";
+import { useState, useEffect } from "react";
+import {
+  useWorkspaceStatus,
+  useToggleWorkspaceStatus,
+} from "@/features/workspace/model/useWorkspaceStatus";
+import { useCreateWorkspaceInviteLink } from "@/features/workspace/model/useWorkspaceInvite";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+import { useInviteLinkStore } from "@/features/workspace/model/useInviteLinkStore";
+
+export function SharePanel() {
+  const [copied, setCopied] = useState(false);
+  const currentWorkspaceId = useWorkspace();
+  const workspaceStatus = useWorkspaceStatus();
+
+  const { inviteLink, setInviteLink } = useInviteLinkStore();
+
+  const { mutate: toggleStatus, isPending: isTogglingStatus } =
+    useToggleWorkspaceStatus(workspaceStatus);
+  const { mutate: createLink, isPending: isCreatingLink } =
+    useCreateWorkspaceInviteLink();
+
+  const isPublic = workspaceStatus === "public";
+  const isLoading = isTogglingStatus || isCreatingLink;
+
+  useEffect(() => {
+    if (isPublic) {
+      setInviteLink(window.location.href);
+    } else if (!inviteLink && currentWorkspaceId) {
+      createLink(currentWorkspaceId, {
+        onSuccess: (inviteUrl) => {
+          setInviteLink(inviteUrl);
+        },
+      });
+    }
+  }, [isPublic, currentWorkspaceId]);
+
+  const handleCopy = async () => {
+    const linkToCopy = isPublic ? window.location.href : inviteLink;
+    if (!linkToCopy) return;
+
+    await navigator.clipboard.writeText(linkToCopy);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleSwitchChange = () => {
+    toggleStatus();
+  };
+
+  const displayedLink = isPublic ? window.location.href : inviteLink;
+
+  return (
+    <div className="w-full">
+      <div className="flex w-full items-center gap-2 p-1">
+        <div className="flex-row text-sm text-slate-400">공개 범위</div>
+        <div className="flex items-center space-x-2">
+          <Switch
+            checked={isPublic}
+            onChange={handleSwitchChange}
+            CheckedIcon={Globe2}
+            UncheckedIcon={Lock}
+          />
+        </div>
+      </div>
+      <div
+        className={`flex w-full items-center justify-between gap-2 py-2 ${
+          !isPublic ? "opacity-50" : ""
+        }`}
+      >
+        <div className="w-48 flex-1 truncate rounded-md bg-gray-100 px-3 py-2 text-sm text-gray-600">
+          {isLoading ? "링크 생성 중..." : displayedLink}
+        </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={isLoading || !displayedLink}
+        >
+          {copied ? (
+            <CheckCheck className="h-4 w-4 text-green-500" />
+          ) : (
+            <Copy className="h-4 w-4 text-gray-500" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default SharePanel;

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

@@ -0,0 +1,17 @@
+import { Popover } from "@/shared/ui";
+import { Sharebutton } from "./ShareButton";
+import { SharePanel } from "./SharePanel";
+export function ShareTool() {
+  return (
+    <div className="mr-1">
+      <Popover placement="bottom" align="start" offset={{ x: -6, y: 16 }}>
+        <Popover.Trigger>
+          <Sharebutton />
+        </Popover.Trigger>
+        <Popover.Content className="rounded-lg border border-neutral-200 bg-white p-2 shadow-md">
+          <SharePanel />
+        </Popover.Content>
+      </Popover>
+    </div>
+  );
+}

apps/frontend/src/shared/ui/Switch/index.tsx

@@ -0,0 +1,39 @@
+interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  CheckedIcon: React.ComponentType<{ className?: string }>;
+  UncheckedIcon: React.ComponentType<{ className?: string }>;
+  disabled?: boolean;
+}
+
+export function Switch({
+  checked,
+  onChange,
+  CheckedIcon,
+  UncheckedIcon,
+  disabled,
+}: SwitchProps) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange(!checked)}
+      className={`relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${
+        checked ? "bg-[#b2ffba]" : "bg-gray-200"
+      }`}
+      disabled={disabled}
+    >
+      <div
+        className={`pointer-events-none inline-flex h-5 w-5 transform items-center justify-center rounded-md bg-white text-gray-500 shadow-lg ring-0 transition duration-200 ease-in-out ${
+          checked ? "translate-x-4" : "translate-x-0"
+        }`}
+      >
+        {checked ? (
+          <CheckedIcon className="h-3 w-3" />
+        ) : (
+          <UncheckedIcon className="h-3 w-3" />
+        )}
+      </div>
+    </button>
+  );
+}