[feat] 사용자 채팅방 이름 변경 및 채팅방 나가기 기능 추가 (#258)

ParkSungju01 · ff1451 · web-flow · commit c4d304a903ca · 2026-04-07T10:59:12.000+09:00
* feat:contextMessage 구현

* fix: long press 후 스크롤 중단 버그 수정

* fix: 외부 클릭 시 처리 훅 추가 및 적용

* 채팅방 삭제 기능 구현

* fix: codeRabbit 수정사항 수정

* fix: 수정사항 수정 및 toggleMute 연결

* fix: coderabbit 리뷰 수정

---------

Co-authored-by: 이준영 &lt;ff1451@gmail.com&gt;
diff --git a/src/apis/chat/index.ts b/src/apis/chat/index.ts
@@ -49,3 +49,18 @@ export const postAdminChatRoom = async () => {
   });
   return response;
 };
+
+export const patchChatRoomName = async (chatRoomId: number, name: string) => {
+  const response = await apiClient.patch(`chats/rooms/${chatRoomId}/name`, {
+    body: { roomName: name },
+    requiresAuth: true,
+  });
+  return response;
+};
+
+export const deleteChatRoom = async (chatRoomId: number) => {
+  const response = await apiClient.delete(`chats/rooms/${chatRoomId}`, {
+    requiresAuth: true,
+  });
+  return response;
+};
diff --git a/src/apis/chat/mutations.ts b/src/apis/chat/mutations.ts
@@ -1,11 +1,20 @@
 import { mutationOptions } from '@tanstack/react-query';
-import { postAdminChatRoom, postChatMessage, postChatMute, postChatRooms } from '@/apis/chat';
+import {
+  patchChatRoomName,
+  postAdminChatRoom,
+  postChatMessage,
+  postChatMute,
+  postChatRooms,
+  deleteChatRoom,
+} from '@/apis/chat';
 
 export const chatMutationKeys = {
   createRoom: () => ['chat', 'createRoom'] as const,
   createAdminRoom: () => ['chat', 'createAdminRoom'] as const,
   sendMessage: () => ['chat', 'sendMessage'] as const,
   toggleMute: (chatRoomId?: number) => ['chat', 'toggleMute', chatRoomId ?? 'unknown'] as const,
+  updateRoomName: () => ['chat', 'updateRoomName'] as const,
+  deleteRoom: () => ['chat', 'deleteRoom'] as const,
 };
 
 export const chatMutations = {
@@ -24,15 +33,25 @@ export const chatMutations = {
       mutationKey: chatMutationKeys.sendMessage(),
       mutationFn: postChatMessage,
     }),
-  toggleMute: (chatRoomId?: number) =>
+  toggleMute: () =>
     mutationOptions({
-      mutationKey: chatMutationKeys.toggleMute(chatRoomId),
-      mutationFn: async () => {
+      mutationKey: chatMutationKeys.toggleMute(),
+      mutationFn: async (chatRoomId?: number) => {
         if (!chatRoomId) {
           throw new Error('chatRoomId is missing');
         }
 
         return postChatMute(chatRoomId);
       },
     }),
+  updateRoomName: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.updateRoomName(),
+      mutationFn: ({ chatRoomId, name }: { chatRoomId: number; name: string }) => patchChatRoomName(chatRoomId, name),
+    }),
+  deleteRoom: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.deleteRoom(),
+      mutationFn: (chatRoomId: number) => deleteChatRoom(chatRoomId),
+    }),
 };
diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
@@ -58,7 +58,7 @@ function ChatHeader() {
             <button
               type="button"
               disabled={isTogglingMute}
-              onClick={() => void toggleMute()}
+              onClick={() => void toggleMute(numericRoomId)}
               className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                 isMuted ? 'bg-gray-300' : 'bg-primary'
               } disabled:cursor-not-allowed disabled:opacity-60`}
diff --git a/src/pages/Chat/components/ChatRoomContextMenu.tsx b/src/pages/Chat/components/ChatRoomContextMenu.tsx
@@ -0,0 +1,57 @@
+import { useRef } from 'react';
+import useOutsideTapDismiss from '@/utils/hooks/useOutsideTapDismiss';
+import { cn } from '@/utils/ts/cn';
+
+interface MenuItem {
+  label: string;
+  onClick: () => void;
+  danger?: boolean;
+}
+
+interface ChatRoomContextMenuProps {
+  x: number;
+  y: number;
+  title: string;
+  items: MenuItem[];
+  onClose: () => void;
+}
+const MENU_WIDTH = 161;
+const MENU_ITEM_HEIGHT = 44;
+const MENU_HEADER_HEIGHT = 27;
+const MENU_VERTICAL_PADDING = 24;
+
+export default function ChatRoomContextMenu({ x, y, title, items, onClose }: ChatRoomContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  useOutsideTapDismiss(menuRef, onClose);
+
+  const menuHeight = MENU_HEADER_HEIGHT + MENU_VERTICAL_PADDING + items.length * MENU_ITEM_HEIGHT;
+
+  const adjustedX = x + MENU_WIDTH > window.innerWidth ? x - MENU_WIDTH : x;
+  const adjustedY = y + menuHeight > window.innerHeight ? y - menuHeight : y;
+
+  return (
+    <div
+      ref={menuRef}
+      className="bg-text-100/80 fixed z-50 w-[161px] overflow-hidden rounded-xl py-3 shadow-lg"
+      style={{ left: adjustedX, top: adjustedY, height: menuHeight }}
+    >
+      <div className="truncate px-4 py-3 text-[14px] font-bold text-indigo-900">{title}</div>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          type="button"
+          onClick={() => {
+            item.onClick();
+            onClose();
+          }}
+          className={cn(
+            'active:bg-indigo-5 w-full px-4 py-2.5 text-left text-[14px] font-medium',
+            item.danger ? 'text-red-500' : 'text-indigo-700'
+          )}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/pages/Chat/hooks/useChat.ts b/src/pages/Chat/hooks/useChat.ts
@@ -5,6 +5,8 @@ import {
   useCreateChatRoomMutation,
   useSendChatMessageMutation,
   useToggleChatMuteMutation,
+  useUpdateChatRoomNameMutation,
+  useDeleteChatRoomMutation,
 } from '@/pages/Chat/hooks/useChatMutations';
 
 const useChat = (chatRoomId?: number) => {
@@ -35,7 +37,11 @@ const useChat = (chatRoomId?: number) => {
 
   const { data: clubMembersData } = useQuery(clubQueries.members(clubId));
 
-  const toggleMuteMutation = useToggleChatMuteMutation(chatRoomId);
+  const toggleMuteMutation = useToggleChatMuteMutation();
+
+  const updateRoomNameMutation = useUpdateChatRoomNameMutation();
+
+  const deleteChatRoomMutation = useDeleteChatRoomMutation();
 
   return {
     chatRoomList,
@@ -51,6 +57,10 @@ const useChat = (chatRoomId?: number) => {
     clubMembers: clubMembersData?.clubMembers ?? [],
     toggleMute: toggleMuteMutation.mutateAsync,
     isTogglingMute: toggleMuteMutation.isPending,
+    updateRoomName: updateRoomNameMutation.mutateAsync,
+    isUpdatingRoomName: updateRoomNameMutation.isPending,
+    deleteChatRoom: deleteChatRoomMutation.mutateAsync,
+    isDeletingChatRoom: deleteChatRoomMutation.isPending,
   };
 };
 
diff --git a/src/pages/Chat/hooks/useChatMutations.ts b/src/pages/Chat/hooks/useChatMutations.ts
@@ -27,11 +27,33 @@ export const useSendChatMessageMutation = () => {
   });
 };
 
-export const useToggleChatMuteMutation = (chatRoomId?: number) => {
+export const useUpdateChatRoomNameMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    ...chatMutations.toggleMute(chatRoomId),
+    ...chatMutations.updateRoomName(),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() });
+    },
+  });
+};
+
+export const useToggleChatMuteMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    ...chatMutations.toggleMute(),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() });
+    },
+  });
+};
+
+export const useDeleteChatRoomMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    ...chatMutations.deleteRoom(),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() });
     },
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
@@ -1,11 +1,16 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 import type { Advertisement } from '@/apis/advertisement/entity';
 import type { Room } from '@/apis/chat/entity';
 import BellOffIcon from '@/assets/svg/bell-off.svg';
+import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
 import PersonIcon from '@/assets/svg/person.svg';
+import BottomModal from '@/components/common/BottomModal';
+import Modal from '@/components/common/Modal';
 import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
 import { useAdvertisements } from '@/utils/hooks/useAdvertisements';
+import { useLongPress } from '@/utils/hooks/useLongPress';
+import ChatRoomContextMenu from './components/ChatRoomContextMenu';
 import useChat from './hooks/useChat';
 
 const DEFAULT_LAST_MESSAGE = '동아리에 궁금한 점을 물어보세요';
@@ -70,15 +75,24 @@ function ChatRoomAvatar({ roomImageUrl }: Pick<Room, 'roomImageUrl'>) {
   );
 }
 
-function ChatRoomListItem({ room }: { room: Room }) {
+interface ChatRoomListItemProps {
+  room: Room;
+  onLongPress: (x: number, y: number, room: Room) => void;
+}
+
+function ChatRoomListItem({ room, onLongPress }: ChatRoomListItemProps) {
   const isGroup = room.chatType === 'GROUP';
   const hasUnreadMessage = room.unreadCount > 0;
   const previewMessage = room.lastMessage?.trim() || DEFAULT_LAST_MESSAGE;
+  const longPress = useLongPress({
+    onLongPress: (x: number, y: number) => onLongPress(x, y, room),
+  });
 
   return (
     <Link
+      {...longPress}
       to={`${room.roomId}`}
-      className="active:bg-indigo-5 flex items-center gap-3 bg-white px-5 py-3 transition-colors"
+      className="active:bg-indigo-5 flex touch-pan-y items-center gap-3 bg-white px-5 py-3 transition-colors select-none"
     >
       <ChatRoomAvatar roomImageUrl={room.roomImageUrl} />
 
@@ -187,15 +201,69 @@ function ChatAdvertisementListItemSkeleton() {
   );
 }
 
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  room: Room;
+}
+
 function ChatListPage() {
-  const { chatRoomList } = useChat();
+  const { chatRoomList, updateRoomName, deleteChatRoom, toggleMute } = useChat();
   const rooms = chatRoomList.rooms;
   const advertisementCount = getAdvertisementCount(rooms.length);
   const { advertisements, isLoadingAdvertisements, trackAdvertisementClick } = useAdvertisements({
     advertisementCount,
     scope: 'chat-list',
   });
 
+  const [contextMenu, setContextMenu] = useState<ContextMenuProps | null>(null);
+  const [leaveRoom, setLeaveRoom] = useState<Room | null>(null);
+  const [changeRoomName, setChangeRoomName] = useState<Room | null>(null);
+  const [newRoomName, setNewRoomName] = useState('');
+
+  const changeName = async () => {
+    if (!changeRoomName) return;
+    const roomId = changeRoomName.roomId;
+    const normalizedName = newRoomName.trim();
+    try {
+      await updateRoomName({ chatRoomId: roomId, name: normalizedName });
+    } catch (error) {
+      console.error('Error updating room name:', error);
+    }
+    setChangeRoomName(null);
+  };
+
+  const contextMenuItems = (room: Room) => [
+    {
+      label: '채팅방 이름 변경',
+      onClick: () => {
+        setChangeRoomName(room);
+        setNewRoomName(room.roomName);
+      },
+    },
+    {
+      label: room.isMuted ? '알림 켜기' : '알림 끄기',
+      onClick: () => {
+        toggleMute(room.roomId);
+        setContextMenu(null);
+      },
+    },
+    ...(room.chatType === 'DIRECT'
+      ? [{ label: '채팅방 나가기', onClick: () => setLeaveRoom(room), danger: true }]
+      : []),
+  ];
+
+  const deleteChat = async () => {
+    if (!leaveRoom) return;
+    const roomId = leaveRoom.roomId;
+    setLeaveRoom(null);
+    try {
+      await deleteChatRoom(roomId);
+    } catch (error) {
+      console.error('Error leaving chat room:', error);
+    }
+  };
+
   if (rooms.length === 0) {
     return (
       <div className="bg-indigo-0 flex min-h-full flex-col items-center justify-center px-6 py-3 text-center">
@@ -215,7 +283,7 @@ function ChatListPage() {
 
           return (
             <Fragment key={room.roomId}>
-              <ChatRoomListItem room={room} />
+              <ChatRoomListItem room={room} onLongPress={(x, y, room) => setContextMenu({ x, y, room })} />
               {advertisement && (
                 <ChatAdvertisementListItem advertisement={advertisement} onClick={trackAdvertisementClick} />
               )}
@@ -227,6 +295,61 @@ function ChatListPage() {
         })}
         <BottomOverlaySpacer gap={24} />
       </div>
+      <Modal isOpen={leaveRoom !== null} onClose={() => setLeaveRoom(null)} className="h-[172px] w-[341px] rounded-2xl">
+        <div className="px-6 py-6 text-center">
+          <p className="text-text-700 mb-5 text-[16px] font-bold">채팅방 나가기</p>
+          <p className="text-text-500 mt-2 text-[14px]">{leaveRoom?.roomName} 채팅방을 나가시겠어요?</p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className="ml-4 h-11 w-37 flex-1 cursor-pointer rounded-[10px] border border-[#69BFDF] py-4 text-[14px] font-bold text-[#69BFDF]"
+            onClick={() => setLeaveRoom(null)}
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            className="bg-primary-500 mr-4 flex-1 cursor-pointer rounded-[10px] py-4 text-[14px] font-medium text-white"
+            onClick={deleteChat}
+          >
+            나가기
+          </button>
+        </div>
+      </Modal>
+      <BottomModal isOpen={changeRoomName !== null} onClose={() => setChangeRoomName(null)} className="h-59">
+        <div className="flex items-center px-4 py-4">
+          <button type="button" aria-label="닫기" onClick={() => setChangeRoomName(null)}>
+            <ChevronLeftIcon />
+          </button>
+          <div className="px-30 text-center font-semibold">이름 변경</div>
+        </div>
+        <div className="flex w-full flex-col items-center gap-6">
+          <input
+            type="text"
+            value={newRoomName}
+            onChange={(e) => setNewRoomName(e.target.value)}
+            className="text-text-700 mt-11 h-[50px] w-[343px] rounded-2xl border border-indigo-50 text-center"
+            placeholder="변경할 채팅방명을 입력해주세요."
+          />
+          <button
+            type="button"
+            className="bg-primary-500 w-[343px] flex-1 cursor-pointer rounded-[10px] py-4 text-[14px] font-medium text-white"
+            onClick={changeName}
+          >
+            확인
+          </button>
+        </div>
+      </BottomModal>
+      {contextMenu && (
+        <ChatRoomContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          title={contextMenu.room.roomName}
+          items={contextMenuItems(contextMenu.room)}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/utils/hooks/useLongPress.ts b/src/utils/hooks/useLongPress.ts
diff --git a/src/utils/hooks/useOutsideTapDismiss.ts b/src/utils/hooks/useOutsideTapDismiss.ts
