[#8] 워크스페이스 페이지 이동 기능, 워크스페이스 이름 변경 기능 구현

.github/workflows/boolock-dev-cicd.yml

@@ -42,6 +42,7 @@ jobs:
       - name: Build Backend
         run: |
           cd apps/server
+          pnpm run swagger-auto
           pnpm run build
 
       - name: Build base image

.gitignore

@@ -39,5 +39,8 @@ Thumbs.db
 
 *storybook.log
 
+
+swagger-output.json
+
 # Ignore Storybook build folder
-storybook-static/
+storybook-static/

apps/client/package.json

@@ -23,6 +23,7 @@
     "react-spinners": "^0.14.1",
     "react-youtube": "^10.1.0",
     "storybook": "^8.4.1",
+    "uuid": "^11.0.3",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

apps/client/src/entities/home/WorkspaceItem.tsx

@@ -1,50 +1,33 @@
 import TrashSVG from '@/shared/assets/trash.svg?react';
+import { formatRelativeOrAbsoluteDate } from '@/shared/utils';
 import { useModalStore } from '@/shared/store';
 
 type WorkspaceItemProps = {
   title: string;
   thumbnail: string;
   lastEdited: string;
+  onClick: () => void;
 };
 
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString);
-  const now = new Date();
-  const rtf = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' });
-  const diffMinutes = Math.floor((date.getTime() - now.getTime()) / (1000 * 60));
-  const diffHours = Math.floor(diffMinutes / 60);
-  if (diffMinutes > -60) {
-    return rtf.format(diffMinutes, 'minute');
-  }
-
-  if (diffHours > -24) {
-    return rtf.format(diffHours, 'hour');
-  }
-  return new Intl.DateTimeFormat('ko', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).format(date);
-};
-
-export const WorkspaceItem = ({ title, thumbnail, lastEdited }: WorkspaceItemProps) => {
+export const WorkspaceItem = ({ title, thumbnail, lastEdited, onClick }: WorkspaceItemProps) => {
   const { openModal: onOpen } = useModalStore();
   return (
     <li className="shadow-drop relative rounded-lg">
       <button className="absolute right-2 top-2 text-gray-300 hover:text-red-500" onClick={onOpen}>
         <TrashSVG width={16} />
       </button>
-      <div className="flex h-[180px] overflow-hidden bg-gray-50">
-        {/* TODO: 썸네일 형태에 따라 이미지 태그 OR 백그라운드로 지정 */}
-        {thumbnail && (
-          <img src={thumbnail} alt="workspace thumbnail" className="h-32 w-full object-cover" />
-        )}
+      <div className="cursor-pointer" onClick={onClick}>
+        <div className="flex h-[180px] overflow-hidden bg-gray-50">
+          {/* TODO: 썸네일 형태에 따라 이미지 태그 OR 백그라운드로 지정 */}
+          {thumbnail && (
+            <img src={thumbnail} alt="workspace thumbnail" className="h-32 w-full object-cover" />
+          )}
+        </div>
+        <aside className="p-4 pb-6">
+          <h4 className="text-bold-md mb-1.5 text-gray-500">{title}</h4>
+          <p className="text-medium-sm text-gray-200">{formatRelativeOrAbsoluteDate(lastEdited)}</p>
+        </aside>
       </div>
-
-      <aside className="p-4 pb-6">
-        <h4 className="text-bold-md mb-1.5 text-gray-500">{title}</h4>
-        <p className="text-medium-sm text-gray-200">{formatDate(lastEdited)}</p>
-      </aside>
     </li>
   );
 };

apps/client/src/entities/home/WorkspaceLoadError.tsx

@@ -0,0 +1,8 @@
+export const WorkspaceLoadError = () => {
+  return (
+    <div className="flex h-[23rem] w-full flex-col items-center justify-center gap-4 rounded-lg bg-gray-50 text-gray-200">
+      <img src="./images/not_found.png" className="h-40 w-40" />
+      <p className="text-center">워크스페이스를 불러오지 못했습니다.</p>
+    </div>
+  );
+};

apps/client/src/entities/index.ts

@@ -1,6 +1,7 @@
 export { GuideVideo } from './home/GuideVideo';
 export { WorkspaceItem } from './home/WorkspaceItem';
 export { WorkspaceAddBtn } from './home/WorkspaceAddBtn';
+export { WorkspaceLoadError } from './home/WorkspaceLoadError';
 
 export { RedoButton } from './workspace/RedoButton';
 export { UndoButton } from './workspace/UndoButton';

apps/client/src/entities/workspace/WorkspaceNameInput.tsx

@@ -1,21 +1,22 @@
-import { FocusEventHandler, KeyboardEventHandler, useState } from 'react';
+import { FocusEventHandler, KeyboardEventHandler } from 'react';
 
-import toast from 'react-hot-toast';
+import Spinner from '@/shared/assets/spinner.svg?react';
+import { useParams } from 'react-router-dom';
+import { useUpdateWorkspaceName } from '@/shared/hooks';
+import { useWorkspaceStore } from '@/shared/store';
 
 export const WorkspaceNameInput = () => {
-  // TODO: 워크스페이스 이름 변경 로직 필요
-
-  const [name, setName] = useState<string>('');
+  const { workspaceId } = useParams() as { workspaceId: string };
+  const { name } = useWorkspaceStore();
+  const { mutate, isPending } = useUpdateWorkspaceName();
 
   const handleBlur: FocusEventHandler<HTMLInputElement> = (
     event: React.FocusEvent<HTMLInputElement>
   ) => {
-    // TODO: 이름 변경 로직 추가
-    if (event.target.value === name) {
+    if (event.target.value === name || event.target.value === '') {
       return;
     }
-    toast.error('이름 변경 실패');
-    setName(event.target.value);
+    mutate({ workspaceId, newName: event.target.value });
   };
 
   const handleEnter: KeyboardEventHandler<HTMLInputElement> = (e) => {
@@ -25,24 +26,29 @@ export const WorkspaceNameInput = () => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // TODO: 이름 변경 로직 추가
     e.currentTarget.blur();
-    if (name === e.currentTarget.value) {
+    if (name === e.currentTarget.value || e.currentTarget.value === '') {
       return;
     }
-    setName(e.currentTarget.value);
+    mutate({ workspaceId, newName: e.currentTarget.value });
     e.preventDefault();
   };
 
-  // TODO: 워크스페이스 이름 존재 시 placeholder가 그에 맞추어 변경되어야함
   return (
     <>
-      <input
-        placeholder={name === '' ? '워크스페이스 이름' : name}
-        className="placeholder:text-semibold-rg w-[272px] rounded-md border border-green-500 px-3 py-1 placeholder:text-gray-100 focus:outline-none"
-        onBlur={handleBlur}
-        onKeyDown={handleEnter}
-      />
+      <div className="relative flex items-center">
+        <input
+          placeholder={name === '' ? '워크스페이스 이름' : name}
+          className="placeholder:text-semibold-rg w-[272px] rounded-md border border-green-500 px-3 py-1 placeholder:text-gray-100 focus:outline-none"
+          onBlur={handleBlur}
+          onKeyDown={handleEnter}
+          maxLength={20}
+          disabled={isPending}
+        />
+        {isPending && (
+          <Spinner className="absolute right-5 inline h-4 w-4 animate-spin fill-green-500 text-gray-200" />
+        )}
+      </div>
     </>
   );
 };

apps/client/src/pages/WorkspacePage.tsx

@@ -1,9 +1,22 @@
-import { WorkspacePageHeader, WorkspaceContent } from '@/widgets';
+import { WorkspaceContent, WorkspacePageHeader } from '@/widgets';
+
+import { Loading } from '@/shared/ui';
+import { NotFound } from '@/pages/NotFound';
+import { useGetWorkspace } from '@/shared/hooks';
+import { useParams } from 'react-router-dom';
 
-// TODO: useParams 훅을 통해 workspaceId 가져오기
 export const WorkspacePage = () => {
+  const { workspaceId } = useParams();
+
+  const { isPending, isError } = useGetWorkspace(workspaceId as string);
+
+  if (isError) {
+    return <NotFound />;
+  }
+
   return (
     <>
+      {isPending && <Loading />}
       <WorkspacePageHeader />
       <WorkspaceContent />
     </>

apps/client/src/shared/api/workspaceApi.ts

@@ -1,5 +1,11 @@
-import { Instance } from './axiosInstance';
-import { TcreatedWorkspaceDto, TpagedWorkspaceListResultDto } from '@/shared/types';
+import {
+  TcreatedWorkspaceDto,
+  TgetWorkspaceResponse,
+  TpagedWorkspaceListResultDto,
+  Tworkspace,
+} from '@/shared/types';
+
+import { Instance } from '@/shared/api';
 
 export const WorkspaceApi = () => {
   const createWorkspace = async (userId: string) => {
@@ -20,7 +26,7 @@ export const WorkspaceApi = () => {
 
   const getWorkspaceList = async (userId: string, cursor: string) => {
     const response = await Instance.get(
-      `/workspace${cursor !== 'null' ? `?cursor=${encodeURIComponent(cursor)}` : ''}`,
+      `/workspace/list${cursor !== 'null' ? `?cursor=${encodeURIComponent(cursor)}` : ''}`,
       {
         headers: { 'user-id': userId },
       }
@@ -31,8 +37,33 @@ export const WorkspaceApi = () => {
     throw new Error('Invalid response from server');
   };
 
+  const getWorkspace = async (userId: string, workspaceId: string) => {
+    const response = await Instance.get(`/workspace?workspaceId=${workspaceId}`, {
+      headers: { 'user-id': userId },
+    });
+    if (response) {
+      return response.data as TgetWorkspaceResponse;
+    }
+    throw new Error('Invalid response from server');
+  };
+
+  const updateWorkspaceName = async (userId: string, workspaceId: string, newName: string) => {
+    const response = await Instance.patch(
+      '/workspace/name',
+      { workspaceId, newName },
+      { headers: { 'user-id': userId } }
+    );
+
+    if (response) {
+      return response.data as Tworkspace;
+    }
+    throw new Error('Invalid response from server');
+  };
+
   return {
     createWorkspace,
     getWorkspaceList,
+    getWorkspace,
+    updateWorkspaceName,
   };
 };

apps/client/src/shared/hooks/index.ts

@@ -1,2 +1,4 @@
 export { useCreateWorkspace } from './queries/useCreateWorkspace';
 export { useGetWorkspaceList } from './queries/useGetWorkspaceList';
+export { useGetWorkspace } from './queries/useGetWorkspace';
+export { useUpdateWorkspaceName } from './queries/useUpdateWorkspaceName';

apps/client/src/shared/hooks/queries/useGetWorkspace.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { WorkspaceApi } from '@/shared/api';
+import { getUserId } from '@/shared/utils';
+import toast from 'react-hot-toast';
+import { useQuery } from '@tanstack/react-query';
+import { useWorkspaceStore } from '@/shared/store';
+
+export const useGetWorkspace = (workspaceId: string) => {
+  const workspaceApi = WorkspaceApi();
+  const userId = getUserId();
+  const { setName } = useWorkspaceStore();
+  const { data, isPending, isError } = useQuery({
+    queryKey: ['getWorkspace', workspaceId],
+    queryFn: () => {
+      return workspaceApi.getWorkspace(userId, workspaceId);
+    },
+  });
+
+  React.useEffect(() => {
+    if (isError) {
+      toast.error('워크스페이스 정보 불러오기 실패');
+      return;
+    }
+    if (data) {
+      setName(data.workspaceDto.name);
+    }
+  }, [data, setName, isError]);
+
+  return { data, isPending, isError };
+};

apps/client/src/shared/hooks/queries/useGetWorkspaceList.ts

@@ -10,6 +10,7 @@ export const useGetWorkspaceList = () => {
     fetchNextPage,
     isPending,
     isFetchingNextPage,
+    isError,
     data: workspaceList,
   } = useInfiniteQuery({
     queryKey: ['getWorkspaceList'],
@@ -25,5 +26,5 @@ export const useGetWorkspaceList = () => {
     select: (data) =>
       (data.pages ?? []).flatMap((page) => page.pagedWorkspaceListResult.workspaceList),
   });
-  return { hasNextPage, fetchNextPage, isFetchingNextPage, isPending, workspaceList };
+  return { hasNextPage, fetchNextPage, isFetchingNextPage, isPending, isError, workspaceList };
 };

apps/client/src/shared/hooks/queries/useUpdateWorkspaceName.ts

@@ -0,0 +1,26 @@
+import { WorkspaceApi } from '@/shared/api';
+import { getUserId } from '@/shared/utils';
+import toast from 'react-hot-toast';
+import { useMutation } from '@tanstack/react-query';
+import { useWorkspaceStore } from '@/shared/store';
+
+export const useUpdateWorkspaceName = () => {
+  const workspaceApi = WorkspaceApi();
+  const userId = getUserId();
+  const { setName } = useWorkspaceStore();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: ({ workspaceId, newName }: { workspaceId: string; newName: string }) => {
+      return workspaceApi.updateWorkspaceName(userId, workspaceId, newName);
+    },
+    onSuccess: (data) => {
+      toast.success('워크스페이스 이름이 변경되었습니다.');
+      setName(data?.name!);
+    },
+    onError: () => {
+      toast.error('워크스페이스 이름 변경을 실패했습니다.');
+    },
+  });
+
+  return { mutate, isPending };
+};

apps/client/src/shared/store/index.ts

@@ -1,2 +1,3 @@
 export { useLoadingStore } from './useLoadingStore';
 export { useModalStore } from './useModalStore';
+export { useWorkspaceStore } from './useWorkspaceStore';

apps/client/src/shared/store/useWorkspaceStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+type TWorkspace = {
+  name: string;
+  setName: (newName: string) => void;
+};
+
+export const useWorkspaceStore = create<TWorkspace>((set) => ({
+  name: '워크스페이스 이름',
+  setName: (newName) => set({ name: newName }),
+}));

apps/client/src/shared/types/index.ts

@@ -1,6 +1,8 @@
 export type {
   TcreatedWorkspaceDto,
+  TgetWorkspaceResponse,
   TworkspaceDto,
+  Tworkspace,
   TpagedWorkspaceListResultDto,
   TpagedWorkspaceListResult,
   Tcursor,