-
diff --git a/src/components/layout/Header/components/ChatSearchHeader.tsx b/src/components/layout/Header/components/ChatSearchHeader.tsx
new file mode 100644
index 0000000..d433552
--- /dev/null
+++ b/src/components/layout/Header/components/ChatSearchHeader.tsx
@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
+
+interface ChatListHeaderProps {
+ title: string;
+ headerRef?: Ref
+ {clubName}
+ {users.map((user) => (
+
+
+ ))}
+
+ );
+}
+
+function InvitableUserList({ userId, name, studentNumber, onToggle, selectedUserIds }: User & UserListProps) {
+ return (
+ onToggle(user.userId)}>
+
+
+ {user.name[0]}
+
+
+ {user.name} ({user.studentNumber})
+
+ {selectedUserIds.has(user.userId) && onToggle(userId)}>
+
+ );
+}
+
+const SORT_OPTIONS = [
+ { value: 'CLUB', label: '동아리' },
+ { value: 'NAME', label: '이름' },
+] as const;
+
+export default function AddChatRoom() {
+ const { pathname } = useLocation();
+ const { title } = getHeaderPresentation(pathname);
+ const [keyword, setKeyword] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+ const [sortBy, setSortBy] = useState
+
+
+ {name[0]}
+
+
+ {name} ({studentNumber})
+
+ {selectedUserIds.has(userId) &&
+
+ );
+}
diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx
index bac4c9e..00b1cef 100644
--- a/src/pages/Chat/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
import type { ChatMessage } from '@/apis/chat/entity';
import SendArrowIcon from '@/assets/svg/chat-send-arrow.svg';
import LinkifiedText from '@/components/common/LinkifiedText';
@@ -82,8 +82,12 @@ function ChatMessageRow({ isSameSender, message }: ChatMessageRowProps) {
function ChatRoom() {
const { chatRoomId } = useParams();
+ const [searchParams] = useSearchParams();
+ const targetMessageId = searchParams.get('messageId') ? Number(searchParams.get('messageId')) : undefined;
+
const { sendMessage, chatMessages, fetchNextPage, hasNextPage, isFetchingNextPage, isSendingMessage } = useChat(
- Number(chatRoomId)
+ Number(chatRoomId),
+ targetMessageId
);
const [value, setValue] = useState('');
@@ -101,6 +105,14 @@ function ChatRoom() {
useViewportHeightLock(scrollContainerRef);
const sortedMessages = [...chatMessages].reverse();
+
+ useEffect(() => {
+ if (!targetMessageId) return;
+ const el = document.querySelector(`[data-message-id="${targetMessageId}"]`);
+ if (el) {
+ el.scrollIntoView({ block: 'center' });
+ }
+ }, [chatMessages, targetMessageId]);
const isSubmitDisabled = isSendingMessage || !value.trim();
const resetTextareaHeight = () => {
@@ -167,7 +179,7 @@ function ChatRoom() {
const isSameSender = prevMessage?.senderId === message.senderId && !showDateHeader;
return (
-
+
+
+ 친구 선택({data?.currentCount})
+ setSortBy(value)}
+ />
+
+ {data?.sortBy === 'CLUB'
+ ? data?.sections?.map((section) => (
+
+
{showDateHeader && (
diff --git a/src/pages/Chat/ChatSearch.tsx b/src/pages/Chat/ChatSearch.tsx
new file mode 100644
index 0000000..ef84477
--- /dev/null
+++ b/src/pages/Chat/ChatSearch.tsx
@@ -0,0 +1,89 @@
+import { useState, Fragment } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import type { Messages } from '@/apis/chat/entity';
+import { chatQueries } from '@/apis/chat/queries';
+import Search from '@/assets/svg/big-search-icon.svg';
+import useDebouncedCallback from '@/utils/hooks/useDebounce';
+import { ChatRoomAvatar, ChatRoomListItem } from './components/ChatRoomListItem';
+import { formatTime } from './utils/formatTime';
+
+function MessageListItem({ message, keyword }: { message: Messages; keyword: string }) {
+ const parts = message.matchedMessage.split(keyword);
+ return (
+
+ ) {
+ if (roomImageUrl) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+interface ChatRoomListItemProps {
+ room: Room;
+ defaultMessage?: string;
+ onLongPress?: (x: number, y: number, room: Room) => void;
+}
+
+export function ChatRoomListItem({ room, defaultMessage = '', onLongPress }: ChatRoomListItemProps) {
+ const hasUnreadMessage = room.unreadCount > 0;
+ const previewMessage = room.lastMessage?.trim() || defaultMessage;
+ const longPress = useLongPress({
+ onLongPress: (x, y) => onLongPress?.(x, y, room),
+ });
+
+ return (
+
+ ) {
- if (roomImageUrl) {
- return (
-
- );
- }
-
- return (
-
- );
-}
-
-interface ChatRoomListItemProps {
- room: Room;
- onLongPress: (x: number, y: number, room: Room) => void;
-}
-
-function ChatRoomListItem({ room, onLongPress }: ChatRoomListItemProps) {
- 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 (
-
-
+
+
+ );
+}
+
+function ChatSearchResults({ keyword }: { keyword: string }) {
+ const { data } = useSuspenseQuery(chatQueries.search(keyword));
+
+ return (
+
+
+
+ {message.roomName}
+
+ {message.matchedMessageSentAt && (
+
+ {formatTime(message.matchedMessageSentAt)}
+
+ )}
+
+
+
+ {parts.map((part, index) => (
+
+ {data?.roomMatches?.rooms?.map((room) => (
+
+ );
+}
+
+export default function ChatSearch() {
+ const [keyword, setKeyword] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+
+ const updateDebouncedQuery = useDebouncedCallback((value: string) => {
+ const trimmed = value.trim();
+ setDebouncedQuery(trimmed);
+ }, 300);
+
+ const handleChange = (value: string) => {
+ setKeyword(value);
+ updateDebouncedQuery(value);
+ };
+
+ return (
+
+
+ {debouncedQuery &&
+ );
+}
diff --git a/src/pages/Chat/components/ChatRoomListItem.tsx b/src/pages/Chat/components/ChatRoomListItem.tsx
new file mode 100644
index 0000000..49492f6
--- /dev/null
+++ b/src/pages/Chat/components/ChatRoomListItem.tsx
@@ -0,0 +1,77 @@
+import { Link } from 'react-router-dom';
+import type { Room } from '@/apis/chat/entity';
+import BellOffIcon from '@/assets/svg/bell-off.svg';
+import PersonIcon from '@/assets/svg/person.svg';
+import { formatTime } from '@/pages/Chat/utils/formatTime';
+import { useLongPress } from '@/utils/hooks/useLongPress';
+
+export function ChatRoomAvatar({ roomImageUrl }: Pick
+
+
+ );
+}
diff --git a/src/pages/Chat/hooks/useChat.ts b/src/pages/Chat/hooks/useChat.ts
index caa2151..95098d2 100644
--- a/src/pages/Chat/hooks/useChat.ts
+++ b/src/pages/Chat/hooks/useChat.ts
@@ -3,13 +3,14 @@ import { chatQueries } from '@/apis/chat/queries';
import { clubQueries } from '@/apis/club/queries';
import {
useCreateChatRoomMutation,
+ useCreateChatRoomGroupMutation,
useSendChatMessageMutation,
useToggleChatMuteMutation,
useUpdateChatRoomNameMutation,
useDeleteChatRoomMutation,
} from '@/pages/Chat/hooks/useChatMutations';
-const useChat = (chatRoomId?: number) => {
+const useChat = (chatRoomId?: number, messageId?: number) => {
const { data: chatRoomList } = useSuspenseQuery({
...chatQueries.rooms(),
refetchInterval: 5000,
@@ -17,13 +18,15 @@ const useChat = (chatRoomId?: number) => {
const createChatRoomMutation = useCreateChatRoomMutation();
+ const createRoomGroupMutation = useCreateChatRoomGroupMutation();
+
const {
data: chatMessagesData,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useInfiniteQuery({
- ...chatQueries.messages(chatRoomId),
+ ...chatQueries.messages(chatRoomId, messageId),
refetchInterval: 1000,
});
@@ -46,6 +49,7 @@ const useChat = (chatRoomId?: number) => {
return {
chatRoomList,
createChatRoom: createChatRoomMutation.mutateAsync,
+ createRoomGroup: createRoomGroupMutation.mutateAsync,
isCreatingChatRoom: createChatRoomMutation.isPending,
chatMessages: allMessages,
fetchNextPage,
diff --git a/src/pages/Chat/hooks/useChatMutations.ts b/src/pages/Chat/hooks/useChatMutations.ts
index 821b8be..ee5d8cc 100644
--- a/src/pages/Chat/hooks/useChatMutations.ts
+++ b/src/pages/Chat/hooks/useChatMutations.ts
@@ -13,6 +13,17 @@ export const useCreateChatRoomMutation = () => {
});
};
+export const useCreateChatRoomGroupMutation = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ ...chatMutations.createRoomGroup(),
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() });
+ },
+ });
+};
+
export const useSendChatMessageMutation = () => {
const queryClient = useQueryClient();
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index fdc3abf..3cc1781 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -1,19 +1,15 @@
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 { isDirectChatType } from '@/pages/Chat/utils/chatType';
import { useAdvertisements } from '@/utils/hooks/useAdvertisements';
-import { useLongPress } from '@/utils/hooks/useLongPress';
import ChatRoomContextMenu from './components/ChatRoomContextMenu';
+import { ChatRoomListItem } from './components/ChatRoomListItem';
import useChat from './hooks/useChat';
-const DEFAULT_LAST_MESSAGE = '동아리에 궁금한 점을 물어보세요';
const FIRST_ADVERTISEMENT_ROOM_POSITION = 4;
const ADVERTISEMENT_INTERVAL = 6;
@@ -41,95 +37,6 @@ const getAdvertisementIndexAfterRoom = (roomIndex: number) => {
return Math.floor(roomOffsetFromFirstAdvertisement / ADVERTISEMENT_INTERVAL);
};
-const formatTime = (timeString: string) => {
- const timeMatch = timeString.match(/(\d{1,2}):(\d{2})/);
-
- if (!timeMatch) {
- return '';
- }
-
- const hour = Number(timeMatch[1]);
- const minute = Number(timeMatch[2]);
- const period = hour < 12 ? '오전' : '오후';
- const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-
- return `${period} ${displayHour}:${String(minute).padStart(2, '0')}`;
-};
-
-function ChatRoomAvatar({ roomImageUrl }: Pick
+
+
+ {room.roomName}
+ {room.isMuted &&
+ {room.lastSentAt && (
+
+ {formatTime(room.lastSentAt)}
+
+ )}
+
+
+ + {previewMessage} +
+ {hasUnreadMessage && ( + + + + )} +
-
-
- );
-}
-
interface ChatAdvertisementListItemProps {
advertisement: Advertisement;
onClick: (advertisementId: number) => void;
diff --git a/src/pages/Chat/utils/formatTime.ts b/src/pages/Chat/utils/formatTime.ts
new file mode 100644
index 0000000..4386371
--- /dev/null
+++ b/src/pages/Chat/utils/formatTime.ts
@@ -0,0 +1,14 @@
+export const formatTime = (timeString: string) => {
+ const timeMatch = timeString.match(/(\d{1,2}):(\d{2})/);
+
+ if (!timeMatch) {
+ return '';
+ }
+
+ const hour = Number(timeMatch[1]);
+ const minute = Number(timeMatch[2]);
+ const period = hour < 12 ? '오전' : '오후';
+ const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+
+ return `${period} ${displayHour}:${String(minute).padStart(2, '0')}`;
+};
-
-
-
- {room.roomName}
- {room.isMuted &&
-
- {room.lastSentAt && (
-
- {formatTime(room.lastSentAt)}
-
- )}
-
-
- - {previewMessage} -
- - {hasUnreadMessage && ( - - - - )} -