[FE] refactor : 어떻게든 자연스러운 서비스를 만들기위한 과정이 비 언어적으로 함축되어있는 PR입니다

frontend/src/apis/channel/dto.ts

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

frontend/src/apis/channel/index.ts

@@ -9,14 +9,14 @@ import { GetChannelResponse, GetMessagesResponse } from './dto';
 export const getChannel = async (
   channelId: string
 ): Promise<GetChannelResponse> => {
-  const response = await https.get(`/api/channel?channelId=${channelId}`);
+  const response = await https.get(`api/channel?channelId=${channelId}`);
   return response.data;
 };
 
 export const getMessages = async (
   channelId: string
 ): Promise<GetMessagesResponse> => {
-  const response = await https.get(`/api/chatMessage?channelId=${channelId}`);
+  const response = await https.get(`/chatMessage?channelId=${channelId}`);
   return response.data;
 };
 
@@ -31,15 +31,17 @@ export const getUserJoinedWorkspaceChannels = async (
   workspaceId: string
 ): Promise<getWorkspaceChannelsResponseDto[]> => {
   const { data } = await https.get(`/api/channels/workspaces/${workspaceId}`);
-  return data;
+  return data.channels;
 };
 
 export const postNewWorkspaceChannels = async ({
+  workspaceId,
   name,
   isPrivate,
   emails,
 }: postWorkspaceChannelsRequestDto): Promise<postWorkspaceChannelsResponseDto> => {
   const { data } = await https.post(`/api/channels`, {
+    workspaceId,
     name,
     isPrivate,
     emails,

frontend/src/apis/dm/index.ts

@@ -7,6 +7,6 @@ export const getDMList = async (): Promise<DMListResponseDto> => {
 };
 
 export const getDMMessage = async (dmId: string): Promise<DMResponseDto> => {
-  const { data } = await https.get(`api/dms/${dmId}`);
+  const { data } = await https.get(`/api/dms/${dmId}`);
   return data;
 };

frontend/src/apis/workspace/dto.ts

@@ -19,9 +19,9 @@ export interface GetUserWorkspaceListeResponse {
 export interface PostNewWorkspaceRequestDto {
   workspaceName: string;
   ownerId: string;
-  username: string;
+  userName: string;
   profileImage: string;
-  inviteResults: string[];
+  inviteUserList: string[];
 }
 
 export interface PostNewWorkspaceResponseDto {

frontend/src/apis/workspace/index.ts

@@ -22,7 +22,7 @@ export const getUserWorkspace = async (
 export const getUserWorkspaces =
   async (): Promise<GetUserWorkspaceListeResponse> => {
     const { data } = await https.get('/api/workspaces');
-    return data;
+    return data.userWorkspaces;
   };
 
 export const postRemoveWorkspace = async (workspaceId: string) => {
@@ -42,6 +42,6 @@ export const postInviteWorkspace = async (
 };
 
 export const postLeaveWorkspace = async (workspaceId: string) => {
-  const { data } = await https.post(`/api/workspaces/${workspaceId}/leave`);
+  const { data } = await https.delete(`/api/workspaces/${workspaceId}/leave`);
   return data;
 };

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

@@ -3,31 +3,30 @@ import ChannelCreateSecondStepModal from '@/components/modals/channel/ChannelCre
 import useCreateChannelMutation from '@/hooks/channel/useCreateChannelMutation';
 import { useModalStore } from '@/stores/modalStore';
 import { useState } from 'react';
+import { useNavigate, 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 { createChannel } = useCreateChannelMutation();
+  const { workspaceId } = useParams();
+  const { createChannel } = useCreateChannelMutation(workspaceId!);
   const closeModla = useModalStore(state => state.closeModal);
+  const naviagate = useNavigate();
 
   const handleNewChannelSubmit = () => {
-    createChannel(
-      {
-        name: channelName,
-        isPrivate: channelVisibility,
-        emails,
-      },
-      {
-        onSuccess: () => {
-          alert(`${channelName} 채널 생성에 하셨습니다.`);
-        },
-        onError: () => {
-          alert(`${channelName} 채널 생성에 실패하였습니다. `);
-        },
-      }
-    );
+    if (!workspaceId) {
+      alert('워크스페이스 접근 오류');
+      naviagate('/workspaces');
+      return;
+    }
+    createChannel({
+      workspaceId,
+      name: channelName,
+      isPrivate: channelVisibility,
+      emails,
+    });
     closeModla();
   };
 

frontend/src/components/workspace/WorkspaceAvatarList.tsx

@@ -8,9 +8,12 @@ interface WorkspaceAvatarListProps {
 const WorkspaceAvatarList = ({ members }: WorkspaceAvatarListProps) => {
   return (
     <div className="flex -space-x-1">
-      {members.slice(0, 5).map(item => (
-        <Avatar src={item.profileImage} alt="user_profile_image" />
-      ))}
+      {members &&
+        members
+          .slice(0, 5)
+          .map(item => (
+            <Avatar src={item.profileImage} alt="user_profile_image" />
+          ))}
     </div>
   );
 };

frontend/src/components/workspace/WorkspaceChannelPanel/WorkspaceChannels.tsx

@@ -16,9 +16,10 @@ const WorkspaceChannels = ({
 }: WorkspaceAccordionSectionProps) => {
   return (
     <WorkspaceAccordionSection sectionTitle="채널">
-      {channelList?.map((channel, index) => (
-        <WorkspaceChannelListItem channel={channel} key={index} />
-      ))}
+      {channelList &&
+        channelList?.map((channel, index) => (
+          <WorkspaceChannelListItem channel={channel} key={index} />
+        ))}
       <ChannelMenu
         onCreateChannel={onCreateChannel}
         onExploreChannels={onExploreChannels}

frontend/src/components/workspace/WorkspaceChannelPanel/index.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import useUserWorkspaceQuery from '@/hooks/workspace/useUserWorkspaceQuery';
 import useWorkspaceChannelListQuery from '@/hooks/channel/useWorkspaceChannelListQuery';
 import useGetDMListQuery from '@/hooks/dm/useGetDMListQuery';
@@ -31,6 +31,7 @@ const WorkspaceChannelPanel = () => {
   const user = useUserStore(state => state.user);
   const currentUserRole =
     workspaceInfo?.ownerId === user.userId ? 'admin' : 'member';
+  const naviagte = useNavigate();
 
   if (!workspaceId) return <p>워크스페이스 정보를 불러오는 중...</p>;
   if (isChannelLoading || isWorkspaceLoading || isDMLoading)
@@ -46,7 +47,10 @@ const WorkspaceChannelPanel = () => {
         onInvite={() => {
           setModal('USER_INVITE');
         }}
-        onLogout={() => alert('로그아웃이 완료되었습니다.')}
+        onLogout={() => {
+          alert('로그아웃이 완료되었습니다');
+          naviagte('/');
+        }}
         onDelete={() => {
           setModal('WORKSPACE_DELETE');
         }}
@@ -57,7 +61,9 @@ const WorkspaceChannelPanel = () => {
 
       <WorkspaceChannels
         onCreateChannel={() => setModal('CHANNEL_CREATE')}
-        onExploreChannels={() => console.log('채널 탐색')}
+        onExploreChannels={() =>
+          alert('채널 탐색은 아직 준비중인 서비스입니다')
+        }
         channelList={channelList}
       />
       <WorkspaceDMs

frontend/src/components/workspace/WorkspaceCreationProcess/StepSetInviteUsers.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { IoIosLink } from 'react-icons/io';
 import { Button } from '@/components/ui/button';
-import { useCreateWorkspace } from '@/hooks/workspace/useCreateWorkspace';
 import { useWorkspaceCreationStore } from '@/stores/workspace';
 import EmailTagInput from '@/components/common/EmailTagInput';
+import { useCreateWorkspaceMutation } from '@/hooks/workspace/useCreateWorkspaceMutation';
+import { getDummyOwnerId } from '@/lib/utils';
 
 const StepSetInviteUsers = () => {
   const {
@@ -16,18 +17,18 @@ const StepSetInviteUsers = () => {
     initWorkspaceStore,
   } = useWorkspaceCreationStore();
   const [validEmail, setValidEmail] = useState(false);
-  const { createWorkspace } = useCreateWorkspace();
+  const { createWorkspace } = useCreateWorkspaceMutation();
   const navigate = useNavigate();
 
   const submitWorkspaceInfo = () => {
     alert('제출 완료');
     createWorkspace(
       {
         workspaceName: workspaceName,
-        ownerId: '1',
-        username: userName,
+        ownerId: getDummyOwnerId(),
+        userName: userName,
         profileImage: workspaceProfileImage,
-        inviteResults: invitedUsers,
+        inviteUserList: invitedUsers,
       },
       {
         onSuccess: data => {

frontend/src/components/workspace/WorkspaceListItem.tsx

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router';
 import Avatar from '@/components/common/Avatar';
 import ArrorIcon from '@/components/common/ArrorIcon';
-import WorkspaceListItemDetail from '@/components/workspace/WorkspaceListItemDetail';
 import { WorkspaceMember } from '@/types/user';
+import WorkspaceListItemDetail from '@/components/workspace/WorkspaceListItemDetail';
 
 interface WorkspaceListItemProps {
   name: string;
@@ -24,7 +24,6 @@ const WorkspaceListItem = ({
   const navigateToWorkspace = (workspaceId: string) => {
     navigate(`/workspace/${workspaceId}`);
   };
-
   return (
     <div className="flex items-center px-6 py-4 w-full border  shadow hover:bg-gray-50">
       <Avatar src={profileImage} alt="workspace_profile_image" fallback="CN" />

frontend/src/hooks/channel/useCreateChannelMutation.ts

@@ -1,9 +1,20 @@
 import { postNewWorkspaceChannels } from '@/apis/channel';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-const useCreateChannelMutation = () => {
+const useCreateChannelMutation = (workspaceId: string) => {
+  const queryClient = useQueryClient();
   const { mutate: createChannel, ...rest } = useMutation({
     mutationFn: postNewWorkspaceChannels,
+    onSuccess: () => {
+      alert(`채널 생성에 하셨습니다.`);
+
+      queryClient.invalidateQueries({
+        queryKey: ['channels', workspaceId],
+      });
+    },
+    onError: () => {
+      alert(`채널 생성에 실패하였습니다. `);
+    },
   });
   return { createChannel, ...rest };
 };

frontend/src/hooks/workspace/useCreateWorkspace.ts → frontend/src/hooks/workspace/useCreateWorkspaceMutation.ts

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

frontend/src/hooks/workspace/useLeaveWorkspaceMutation.ts

@@ -1,11 +1,26 @@
-import { postLeaveWorkspace } from '@/apis/workspace';
-import { useMutation } from '@tanstack/react-query';
+import { postLeaveWorkspace, getUserWorkspaces } from '@/apis/workspace';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
 
 const useLeaveWorkspaceMutation = () => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const { mutate: leaveWorkspace, ...rest } = useMutation({
     mutationFn: (workpspaceId: string) => postLeaveWorkspace(workpspaceId),
-    onSuccess: () => {
+    onSuccess: async () => {
       alert('성공적으로 나가졌습니다.');
+      queryClient.invalidateQueries({
+        queryKey: ['workspaces'],
+      });
+      const updateWorkspaces = await queryClient.fetchQuery({
+        queryKey: ['workspaces'],
+        queryFn: getUserWorkspaces,
+      });
+      if (updateWorkspaces.workspaces.length > 0) {
+        navigate(`/workspace/${updateWorkspaces.workspaces[0].workspaceId}`);
+      } else {
+        navigate('/workspaces');
+      }
     },
     onError: () => {
       alert('워크스페이스 나가기 에러');