Merge pull request #138 from B03-Killer/feature/#137

채팅 UI 상대방 화면 수정, 하드코딩 수정
B03-Killer · Aug 2, 2024 · 52d0d47 · 52d0d47
2 parents a7acf7e + 8d64292
commit 52d0d47
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/app/(providers)/(root)/[workspaceId]/chat/[id]/_components/Chat/Chat.tsx b/src/app/(providers)/(root)/[workspaceId]/chat/[id]/_components/Chat/Chat.tsx
@@ -112,16 +112,31 @@ export const ChatMessage = ({ content, type, isMe, id }: ChatMessageProps) => {
       return (
         <ChatImage
           src={content}
-          className="rounded-lg w-[200px] h-auto"
+          className={clsx('rounded-lg w-[200px] h-auto', isMe ? '' : 'ml-[40px] mt-[6px]')}
           width={300}
           height={300}
           onContextMenu={handleContextMenu}
         />
       );
     case CHAT_TYPE.document:
-      return <ChatFile fileUrl={content} fileName={content.split('/').pop() || ''} onContextMenu={handleContextMenu} />;
+      return (
+        <ChatFile
+          fileUrl={content}
+          fileName={content.split('/').pop() || ''}
+          onContextMenu={handleContextMenu}
+          className={clsx(isMe ? '' : 'ml-[40px] mt-[6px]')}
+        />
+      );
     case CHAT_TYPE.video:
-      return <ChatVideo src={content} className="rounded-lg" width={200} onContextMenu={handleContextMenu} controls />;
+      return (
+        <ChatVideo
+          src={content}
+          className={clsx('rounded-lg', isMe ? '' : 'ml-[40px] mt-[6px]')}
+          width={200}
+          onContextMenu={handleContextMenu}
+          controls
+        />
+      );
     case CHAT_TYPE.text:
       return (
         <ChatText onContextMenu={handleContextMenu} isMe={isMe}>

diff --git a/src/app/(providers)/(root)/[workspaceId]/chat/[id]/_components/UtilsMenus/UtilsMenus.tsx b/src/app/(providers)/(root)/[workspaceId]/chat/[id]/_components/UtilsMenus/UtilsMenus.tsx
@@ -8,6 +8,7 @@ import { supabase } from '@/utils/supabase/supabaseClient';
 import { ChatType } from '@/types/chat';
 import { useSnackBar } from '@/providers/SnackBarContext';
 import { useWorkspaceUserId } from '@/hooks/useWorkspaceUserId';
+import { useParams } from 'next/navigation';
 
 const MAX_FILE_SIZE = mbToBytes(3);
 const RESOURCE_URL = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/`;
@@ -31,6 +32,7 @@ const CHAT_TYPE: Record<string, ChatType['type']> = {
 };
 
 const UtilsMenus = ({ handleOpenUtil }: { handleOpenUtil: () => void }) => {
+  const { id } = useParams();
   const onFinish = () => {
     handleOpenUtil();
   };
@@ -39,7 +41,7 @@ const UtilsMenus = ({ handleOpenUtil }: { handleOpenUtil: () => void }) => {
   const workspaceUserId = useWorkspaceUserId();
 
   const { mutate: mutateChatMessage } = useMutationChatMessage({
-    channel_id: Number(4),
+    channel_id: Number(id),
     workspace_user_id: workspaceUserId,
     onSuccess: onFinish
   });