[FE] refactor : api 명세 변경에 따른 코드를 수정한다

frontend/src/apis/channel/dto.ts

@@ -18,7 +18,6 @@ export interface GetChannelResponse {
 }
 
 export interface postWorkspaceChannelsRequestDto {
-  workspaceId: string;
   name: string;
   isPrivate: boolean;
   emails: string[];

frontend/src/apis/channel/index.ts

@@ -20,21 +20,26 @@ export const getMessages = async (
   return response.data;
 };
 
-export const getWorkspaceChannels = async (
+// export const getWorkspaceChannels = async (
+//   workspaceId: string
+// ): Promise<getWorkspaceChannelsResponseDto[]> => {
+//   const { data } = await https.get(`/api/workspaces/${workspaceId}/channels`);
+//   return data;
+// };
+
+export const getUserJoinedWorkspaceChannels = async (
   workspaceId: string
 ): Promise<getWorkspaceChannelsResponseDto[]> => {
-  const { data } = await https.get(`/api/workspaces/${workspaceId}/channels`);
+  const { data } = await https.get(`/api/channels/workspaces/${workspaceId}`);
   return data;
 };
 
 export const postNewWorkspaceChannels = async ({
-  workspaceId,
   name,
   isPrivate,
   emails,
 }: postWorkspaceChannelsRequestDto): Promise<postWorkspaceChannelsResponseDto> => {
-  const { data } = await https.post(`/api/workspaces/${workspaceId}/channels`, {
-    workspaceId,
+  const { data } = await https.post(`/api/channels`, {
     name,
     isPrivate,
     emails,
@@ -43,26 +48,17 @@ export const postNewWorkspaceChannels = async ({
 };
 
 export const postInviteWorkspaceChannels = async (
-  workspaceId: string,
   emails: string[],
   channels: string[]
 ) => {
-  const { data } = await https.post(
-    `/api/workspaces/${workspaceId}/channels/invite`,
-    {
-      emails,
-      channels,
-    }
-  );
+  const { data } = await https.post(`/api/channels/invite`, {
+    emails,
+    channels,
+  });
   return data;
 };
 
-export const leaveWorkspaceChannel = async (
-  workspaceId: string,
-  channelId: string
-) => {
-  const { data } = await https.delete(
-    `/api/workspaces/${workspaceId}/channels/${channelId}/leave`
-  );
+export const leaveWorkspaceChannel = async (channelId: string) => {
+  const { data } = await https.delete(`/api/channels/${channelId}/leave`);
   return data;
 };

frontend/src/apis/workspace/index.ts

@@ -5,6 +5,13 @@ import {
 } from '@/apis/workspace/dto';
 import https from '@/lib/https';
 
+export const postNewWorkspace = async (
+  workspaceInfo: PostNewWorkspaceRequestDto
+) => {
+  const { data } = await https.post('/api/workspaces', workspaceInfo);
+  return data;
+};
+
 export const getUserWorkspace = async (
   workspaceId: string
 ): Promise<GetUserWorkspaceResponse> => {
@@ -18,10 +25,8 @@ export const getUserWorkspaces =
     return data;
   };
 
-export const postWorkspace = async (
-  workspaceInfo: PostNewWorkspaceRequestDto
-) => {
-  const { data } = await https.post('/api/workspaces', workspaceInfo);
+export const postRemoveWorkspace = async (workspaceId: string) => {
+  const { data } = await https.delete(`/api/workspaces/${workspaceId}`);
   return data;
 };
 
@@ -40,8 +45,3 @@ export const postLeaveWorkspace = async (workspaceId: string) => {
   const { data } = await https.post(`/api/workspaces/${workspaceId}/leave`);
   return data;
 };
-
-export const postRemoveWorkspace = async (workspaceId: string) => {
-  const { data } = await https.delete(`/api/workspaces/${workspaceId}`);
-  return data;
-};

frontend/src/components/common/ChatHeader.tsx

@@ -38,7 +38,7 @@ const ChatHeader = ({
   const [infoTab, setInfoTab] = useState<'정보' | '멤버'>('정보');
   const displayMembers = members ? members?.slice(0, 3) : [];
   const { mutate } = useLeaveWorkspaceChannelMutation();
-  const { workspaceId, channelId } = useParams();
+  const { channelId } = useParams();
 
   const handleDeleteChannel = () => {
     if (isPrivate) {
@@ -50,9 +50,9 @@ const ChatHeader = ({
 
   const onClickDelteChannel = () => {
     setOpenDeleteChannel(false);
-    if (workspaceId && channelId) {
+    if (channelId) {
       mutate(
-        { workspaceId, channelId },
+        { channelId },
         {
           onSuccess: () => {
             alert('채널 삭제 성공');

frontend/src/components/modals/channel/ChannelCreateModal/index.tsx

@@ -3,21 +3,18 @@ import ChannelCreateSecondStepModal from '@/components/modals/channel/ChannelCre
 import useCreateChannelMutation from '@/hooks/channel/useCreateChannelMutation';
 import { useModalStore } from '@/stores/modalStore';
 import { useState } from 'react';
-import { useParams } from 'react-router';
 
 const ChannelCreateModal = () => {
   const [step, setStep] = useState(1);
   const [channelName, setChannelName] = useState('');
   const [channelVisibility, setChannelVisibility] = useState(true);
   const [emails, setEmails] = useState<string[]>([]);
-  const { workspaceId } = useParams();
-  const { createChannel } = useCreateChannelMutation(workspaceId ?? '');
+  const { createChannel } = useCreateChannelMutation();
   const closeModla = useModalStore(state => state.closeModal);
 
   const handleNewChannelSubmit = () => {
     createChannel(
       {
-        workspaceId: workspaceId ?? '',
         name: channelName,
         isPrivate: channelVisibility,
         emails,

frontend/src/components/modals/workspace/WorkspaceUserInviteModal.tsx

@@ -59,7 +59,6 @@ const WorkspaceUserInviteModal = ({
       }
       inviteUserChannels(
         {
-          workspaceId: workspaceId,
           emails: emails,
           channels: inviteChannel,
         },

frontend/src/hooks/channel/useCreateChannelMutation.ts

@@ -1,9 +1,8 @@
 import { postNewWorkspaceChannels } from '@/apis/channel';
 import { useMutation } from '@tanstack/react-query';
 
-const useCreateChannelMutation = (workspaceId: string) => {
+const useCreateChannelMutation = () => {
   const { mutate: createChannel, ...rest } = useMutation({
-    mutationKey: ['createChannel', workspaceId],
     mutationFn: postNewWorkspaceChannels,
   });
   return { createChannel, ...rest };

frontend/src/hooks/channel/useInviteChannelMutation.ts

@@ -5,14 +5,12 @@ const useInviteChannelMutation = () => {
   return useMutation({
     mutationKey: ['inviteWorkspace'],
     mutationFn: ({
-      workspaceId,
       emails,
       channels,
     }: {
-      workspaceId: string;
       emails: string[];
       channels: string[];
-    }) => postInviteWorkspaceChannels(workspaceId, emails, channels),
+    }) => postInviteWorkspaceChannels(emails, channels),
   });
 };
 

frontend/src/hooks/channel/useLeaveWorkspaceChannelMutation.ts

@@ -3,13 +3,8 @@ import { useMutation } from '@tanstack/react-query';
 
 const useLeaveWorkspaceChannelMutation = () => {
   return useMutation({
-    mutationFn: ({
-      workspaceId,
-      channelId,
-    }: {
-      workspaceId: string;
-      channelId: string;
-    }) => leaveWorkspaceChannel(workspaceId, channelId),
+    mutationFn: ({ channelId }: { channelId: string }) =>
+      leaveWorkspaceChannel(channelId),
   });
 };
 

frontend/src/hooks/channel/useWorkspaceChannelListQuery.ts

@@ -1,4 +1,4 @@
-import { getWorkspaceChannels } from '@/apis/channel';
+import { getUserJoinedWorkspaceChannels } from '@/apis/channel';
 import { useQuery } from '@tanstack/react-query';
 
 const useWorkspaceChannelListQuery = (workspaceId: string) => {
@@ -8,7 +8,7 @@ const useWorkspaceChannelListQuery = (workspaceId: string) => {
     isError: isChannelError,
   } = useQuery({
     queryKey: ['channels', workspaceId],
-    queryFn: () => getWorkspaceChannels(workspaceId),
+    queryFn: () => getUserJoinedWorkspaceChannels(workspaceId),
     enabled: !!workspaceId,
   });
   return { channelList, isChannelLoading, isChannelError };

frontend/src/hooks/workspace/useCreateWorkspace.ts

@@ -1,10 +1,10 @@
-import { postWorkspace } from '@/apis/workspace';
+import { postNewWorkspace } from '@/apis/workspace';
 import { useMutation } from '@tanstack/react-query';
 
 export const useCreateWorkspace = () => {
   const { mutate: createWorkspace, ...rest } = useMutation({
     mutationKey: ['makeworkspace'],
-    mutationFn: postWorkspace,
+    mutationFn: postNewWorkspace,
     onSuccess: () => {
       alert('성공');
     },

frontend/src/mocks/handlers.ts

@@ -17,23 +17,7 @@ export const handlers = [
   http.get('/api/users', () => {
     return HttpResponse.json(dummy.userProfiles);
   }),
-  http.get('/api/workspaces', () => {
-    return HttpResponse.json(db.userWorkspaces);
-  }),
-  http.post(`/api/workspaces/:workspaceId/leave`, () => {
-    return HttpResponse.json({ message: 'success' }, { status: 200 });
-  }),
-  http.delete(`/api/workspaces/:workspaceId`, () => {
-    return HttpResponse.json({ message: 'success' }, { status: 200 });
-  }),
-  http.get(`/api/workspaces/:workspaceId`, ({ params }) => {
-    const { workspaceId } = params;
-    const workspace = db.userWorkspaces.workspaces.find(
-      (item: { workspaceId: string | readonly string[] | undefined }) =>
-        item.workspaceId === workspaceId
-    );
-    return HttpResponse.json(workspace);
-  }),
+  // 워크스페이스 생성
   http.post('/api/workspaces', async ({ request }) => {
     try {
       const newPost: PostNewWorkspaceRequestDto =
@@ -97,6 +81,24 @@ export const handlers = [
       );
     }
   }),
+  // 워크스페이스 상세 조회
+  http.get(`/api/workspaces/:workspaceId`, ({ params }) => {
+    const { workspaceId } = params;
+    const workspace = db.userWorkspaces.workspaces.find(
+      (item: { workspaceId: string | readonly string[] | undefined }) =>
+        item.workspaceId === workspaceId
+    );
+    return HttpResponse.json(workspace);
+  }),
+  // 본인 워크스페이스 목록 조회
+  http.get('/api/workspaces', () => {
+    return HttpResponse.json(db.userWorkspaces);
+  }),
+  // 워크스페이스 삭제
+  http.delete(`/api/workspaces/:workspaceId`, () => {
+    return HttpResponse.json({ message: 'success' }, { status: 200 });
+  }),
+  // 워크스페이스 초대
   http.post(
     `/api/workspaces/:workspaceId/invite`,
     async ({ request, params }) => {
@@ -124,12 +126,39 @@ export const handlers = [
       return HttpResponse.json(response, { status: 200 });
     }
   ),
-  http.post(`/api/workspaces/:workspaceId/channels`, () => {
+  // 워크스페이스 나가기
+  http.delete(`/api/workspaces/:workspaceId/leave`, () => {
+    return HttpResponse.json({ message: 'success' }, { status: 200 });
+  }),
+
+  // 채널 생성
+  http.post(`/api/channels`, () => {
     return HttpResponse.json({ status: 200 });
   }),
-  http.get(`/api/workspaces/:workspaceId/channels`, () => {
+  // (유저가 소속된) 채널 목록 조회
+  http.get(`/api/channels/workspaces/:workspaceId`, () => {
     return HttpResponse.json(dummy.channels);
   }),
+  // 채널 초대
+  http.post(`/api/channels/invite`, () => {
+    return HttpResponse.json({ status: 200 });
+  }),
+  // 채널 참여
+  http.post(`/api/channels/:channelId/join`, () => {
+    return HttpResponse.json({ status: 200 });
+  }),
+  // 채널 삭제
+  http.delete(`/api/channels/:channelId`, () => {
+    return HttpResponse.json({ status: 200 });
+  }),
+  // 채널 나가기
+  http.delete('/api/channels/:channelId/leave', () => {
+    return HttpResponse.json(
+      { message: 'leave the chaneel suc' },
+      { status: 200 }
+    );
+  }),
+
   http.get('/api/channel', () => {
     const channel = dummy.channel.find(c => c.channelId === '12345');
     if (channel) {
@@ -141,12 +170,7 @@ export const handlers = [
       { status: 404 }
     );
   }),
-  http.delete('/api/workspaces/:workspaceId/channels/:channelId/leave', () => {
-    return HttpResponse.json(
-      { message: 'leave the chaneel suc' },
-      { status: 200 }
-    );
-  }),
+
   http.get('/api/chatMessage', () => {
     if ('12345' === dummy.messages.channelId) {
       return HttpResponse.json(dummy.messages);