Merge branch 'develop'

Author: ff1451

src/App.tsx

@@ -17,7 +17,10 @@ const StudentIdStep = lazy(() => import('./pages/Auth/SignUp/StudentIdStep'));
 const TermStep = lazy(() => import('./pages/Auth/SignUp/TermStep'));
 const UniversityStep = lazy(() => import('./pages/Auth/SignUp/UniversityStep'));
 const ChatListPage = lazy(() => import('./pages/Chat'));
+const ChatSearch = lazy(() => import('./pages/Chat/ChatSearch'));
+const ChatAdd = lazy(() => import('./pages/Chat/AddChatRoom'));
 const ChatRoom = lazy(() => import('./pages/Chat/ChatRoom'));
+const ChatRoomInfo = lazy(() => import('./pages/Chat/ChatRoomInfo'));
 const ApplicationPage = lazy(() => import('./pages/Club/Application'));
 const ApplyCompletePage = lazy(() => import('./pages/Club/Application/applyCompletePage'));
 const ClubFeePage = lazy(() => import('./pages/Club/Application/clubFeePage'));
@@ -36,7 +39,6 @@ const ManagedApplicationDetail = lazy(() => import('./pages/Manager/ManagedAppli
 const ManagedApplicationList = lazy(() => import('./pages/Manager/ManagedApplicationList'));
 const ManagedClubDetail = lazy(() => import('./pages/Manager/ManagedClubDetail'));
 const ManagedClubInfo = lazy(() => import('./pages/Manager/ManagedClubProfile'));
-const ManagedClubList = lazy(() => import('./pages/Manager/ManagedClubList'));
 const ManagedMemberApplicationDetail = lazy(() => import('./pages/Manager/ManagedMemberApplicationDetail'));
 const ManagedMemberList = lazy(() => import('./pages/Manager/ManagedMemberList'));
 const ManagedRecruitment = lazy(() => import('./pages/Manager/ManagedRecruitment'));
@@ -87,14 +89,15 @@ function App() {
             <Route element={<Layout showBottomNav />}>
               <Route path="home" element={<Home />} />
               <Route path="notifications" element={<NotificationsPage />} />
+              <Route path="chats/search" element={<ChatSearch />} />
+              <Route path="chats/add" element={<ChatAdd />} />
               <Route path="council">
                 <Route index element={<CouncilDetail />} />
                 <Route path="notice/:noticeId" element={<CouncilNotice />} />
               </Route>
               <Route path="mypage">
                 <Route index element={<MyPage />} />
                 <Route path="manager">
-                  <Route index element={<ManagedClubList />} />
                   <Route path=":clubId" element={<ManagedClubDetail />} />
                   <Route path=":clubId/members" element={<ManagedMemberList />} />
                   <Route path=":clubId/members/:userId/application" element={<ManagedMemberApplicationDetail />} />
@@ -123,6 +126,7 @@ function App() {
               <Route path="mypage/manager/:clubId/members/sheet/preview" element={<ManagedSheetImportPreview />} />
               <Route path="profile" element={<Profile />} />
               <Route path="chats/:chatRoomId" element={<ChatRoom />} />
+              <Route path="chats/:chatRoomId/info" element={<ChatRoomInfo />} />
             </Route>
           </Route>
 

src/apis/chat/entity.ts

@@ -1,6 +1,7 @@
-import type { PaginationParams, PaginationResponse } from '../common/pagination';
+import type { PaginationParams, PaginationResponse } from '@/apis/common/pagination';
 
 export type ChatType = 'DIRECT' | 'CLUB_GROUP' | 'GROUP' | 'INQUIRY';
+export type SortBy = 'CLUB' | 'NAME';
 
 export interface Room {
   roomId: number;
@@ -35,6 +36,7 @@ export interface SendChatMessageRequest {
 
 export interface ChatMessageRequestParam extends PaginationParams {
   chatRoomId: number;
+  messageId?: number;
 }
 
 export interface ChatMessagesResponse extends PaginationResponse {
@@ -45,3 +47,70 @@ export interface ChatMessagesResponse extends PaginationResponse {
 export interface CreateChatRoomResponse {
   chatRoomId: number;
 }
+
+export interface Messages {
+  roomId: number;
+  chatType: ChatType;
+  roomName: string;
+  roomImageUrl: string;
+  matchedMessage: string;
+  matchedMessageSentAt: string;
+  matchedMessageId: number;
+  unreadCount: number;
+  isMuted: boolean;
+}
+
+export interface RoomMatched extends PaginationResponse {
+  rooms?: Room[];
+}
+
+export interface MessageMatched extends PaginationResponse {
+  messages?: Messages[];
+}
+
+export interface MatchedRequestParams extends PaginationParams {
+  keyword: string;
+}
+
+export interface MatchResponse {
+  roomMatches?: RoomMatched;
+  messageMatches?: MessageMatched;
+}
+
+export interface InvitableUser {
+  userId: number;
+  name: string;
+  imageUrl: string;
+  studentNumber: string;
+}
+
+export interface InvitableSection {
+  clubId: number;
+  clubName: string;
+  users: InvitableUser[];
+}
+
+export interface InvitableFriendsRequestParams extends PaginationParams {
+  query: string;
+  sortBy: SortBy;
+}
+
+interface InvitableFriendsBase extends PaginationResponse {
+  sortBy: SortBy;
+}
+
+export interface GroupedInvitableFriendsResponse extends InvitableFriendsBase {
+  sortBy: 'CLUB';
+  grouped: true;
+  users: [];
+  sections: InvitableSection[];
+}
+
+export interface FlatInvitableFriendsResponse extends InvitableFriendsBase {
+  sortBy: 'NAME';
+  grouped: false;
+  users: InvitableUser[];
+  sections: [];
+}
+
+export type InvitableFriendsResponse = GroupedInvitableFriendsResponse | FlatInvitableFriendsResponse;

src/apis/chat/index.ts

@@ -6,6 +6,10 @@ import type {
   ChatRoomsResponse,
   CreateChatRoomResponse,
   SendChatMessageRequest,
+  InvitableFriendsRequestParams,
+  InvitableFriendsResponse,
+  MatchResponse,
+  MatchedRequestParams,
 } from './entity';
 
 export const getChatRooms = async () => {
@@ -23,6 +27,14 @@ export const postChatRooms = async (userId: number) => {
   return response;
 };
 
+export const postChatRoomsGroup = async (userIds: number[]) => {
+  const response = await apiClient.post<CreateChatRoomResponse>('chats/rooms/group', {
+    body: { userIds },
+    requiresAuth: true,
+  });
+  return response;
+};
+
 export const postChatMessage = async ({ chatRoomId, content }: SendChatMessageRequest) => {
   return apiClient.post<ChatMessage>(`chats/rooms/${chatRoomId}/messages`, {
     body: { content },
@@ -64,3 +76,19 @@ export const deleteChatRoom = async (chatRoomId: number) => {
   });
   return response;
 };
+
+export const getSearchChat = async ({ ...query }: MatchedRequestParams) => {
+  const response = await apiClient.get<MatchResponse>(`chats/rooms/search`, {
+    params: query,
+    requiresAuth: true,
+  });
+  return response;
+};
+
+export const getInvitableFriends = async ({ ...query }: InvitableFriendsRequestParams) => {
+  const response = await apiClient.get<InvitableFriendsResponse>('chats/rooms/invitables', {
+    params: query,
+    requiresAuth: true,
+  });
+  return response;
+};

src/apis/chat/mutations.ts

@@ -1,6 +1,7 @@
 import { mutationOptions } from '@tanstack/react-query';
 import {
   patchChatRoomName,
+  postChatRoomsGroup,
   postAdminChatRoom,
   postChatMessage,
   postChatMute,
@@ -11,6 +12,7 @@ import {
 export const chatMutationKeys = {
   createRoom: () => ['chat', 'createRoom'] as const,
   createAdminRoom: () => ['chat', 'createAdminRoom'] as const,
+  createRoomGroup: () => ['chat', 'createRoomGroup'] as const,
   sendMessage: () => ['chat', 'sendMessage'] as const,
   toggleMute: (chatRoomId?: number) => ['chat', 'toggleMute', chatRoomId ?? 'unknown'] as const,
   updateRoomName: () => ['chat', 'updateRoomName'] as const,
@@ -28,6 +30,11 @@ export const chatMutations = {
       mutationKey: chatMutationKeys.createAdminRoom(),
       mutationFn: postAdminChatRoom,
     }),
+  createRoomGroup: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.createRoomGroup(),
+      mutationFn: postChatRoomsGroup,
+    }),
   sendMessage: () =>
     mutationOptions({
       mutationKey: chatMutationKeys.sendMessage(),

src/apis/chat/queries.ts

@@ -1,12 +1,21 @@
 import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
-import type { ChatMessagesResponse } from './entity';
-import { getChatMessages, getChatRooms } from '.';
+import { getChatMessages, getChatRooms, getSearchChat, getInvitableFriends } from '@/apis/chat';
+import type { ChatMessagesResponse, SortBy } from '@/apis/chat/entity';
+
+interface ChatMessagesPageParam {
+  page: number;
+  useMessageId: boolean;
+}
 
 export const chatQueryKeys = {
   all: ['chat'] as const,
   rooms: () => [...chatQueryKeys.all, 'rooms'] as const,
-  messages: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
+  messagesByRoom: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
+  messages: (chatRoomId: number, messageId?: number) =>
+    [...chatQueryKeys.messagesByRoom(chatRoomId), messageId ?? 'latest'] as const,
   disabledMessages: () => [...chatQueryKeys.all, 'messages', 'disabled'] as const,
+  search: (keyword: string) => [...chatQueryKeys.all, 'search', keyword],
+  invite: (query: string, sortBy: SortBy) => [...chatQueryKeys.all, 'invite', query, sortBy],
 };
 
 export const chatQueries = {
@@ -15,18 +24,35 @@ export const chatQueries = {
       queryKey: chatQueryKeys.rooms(),
       queryFn: getChatRooms,
     }),
-  messages: (chatRoomId?: number, limit = 20) =>
+  messages: (chatRoomId?: number, messageId?: number, limit = 20) =>
     infiniteQueryOptions({
-      queryKey: chatRoomId ? chatQueryKeys.messages(chatRoomId) : chatQueryKeys.disabledMessages(),
+      queryKey: chatRoomId ? chatQueryKeys.messages(chatRoomId, messageId) : chatQueryKeys.disabledMessages(),
       queryFn: ({ pageParam }) =>
         getChatMessages({
           chatRoomId: chatRoomId!,
-          page: pageParam,
+          messageId: pageParam.useMessageId ? messageId : undefined,
+          page: pageParam.page,
           limit,
         }),
-      initialPageParam: 1,
+      initialPageParam: { page: 1, useMessageId: Boolean(messageId) } satisfies ChatMessagesPageParam,
       getNextPageParam: (lastPage: ChatMessagesResponse) =>
-        lastPage.currentPage < lastPage.totalPage ? lastPage.currentPage + 1 : undefined,
+        lastPage.currentPage < lastPage.totalPage
+          ? ({ page: lastPage.currentPage + 1, useMessageId: false } satisfies ChatMessagesPageParam)
+          : undefined,
+      getPreviousPageParam: (firstPage: ChatMessagesResponse) =>
+        firstPage.currentPage > 1
+          ? ({ page: firstPage.currentPage - 1, useMessageId: false } satisfies ChatMessagesPageParam)
+          : undefined,
       enabled: Boolean(chatRoomId),
     }),
+  search: (keyword: string) =>
+    queryOptions({
+      queryKey: chatQueryKeys.search(keyword),
+      queryFn: () => getSearchChat({ keyword, page: 1, limit: 20 }),
+    }),
+  invite: (query: string, sortBy: SortBy) =>
+    queryOptions({
+      queryKey: chatQueryKeys.invite(query, sortBy),
+      queryFn: () => getInvitableFriends({ query, sortBy, page: 1, limit: 20 }),
+    }),
 };

src/apis/upload/mutations.ts

@@ -1,16 +1,16 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { cn } from '@/utils/ts/cn';
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
 function Card({ children, className, ...props }: CardProps) {
-  const base = 'border-indigo-5 flex w-full flex-col gap-3 rounded-lg border bg-white p-3';
-
   return (
-    <div className={twMerge(clsx(base, className))} {...props}>
+    <div
+      className={cn('border-indigo-5 flex w-full flex-col gap-3 rounded-lg border bg-white p-3', className)}
+      {...props}
+    >
       {children}
     </div>
   );

src/assets/svg/check_color.svg

@@ -13,6 +13,7 @@ interface DropdownProps<T extends string> extends Omit<HTMLAttributes<HTMLDivEle
   value: T;
   onChange: (value: T) => void;
   menuClassName?: string;
+  triggerClassName?: string;
 }
 
 export default function Dropdown<T extends string>({
@@ -21,6 +22,7 @@ export default function Dropdown<T extends string>({
   onChange,
   className,
   menuClassName,
+  triggerClassName,
   ...props
 }: DropdownProps<T>) {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,10 +31,6 @@ export default function Dropdown<T extends string>({
   useClickTouchOutside(dropdownRef, () => setIsOpen(false));
 
   const selectedOption = options.find((opt) => opt.value === value);
-  const orderedOptions = [
-    ...options.filter((option) => option.value !== value),
-    ...options.filter((option) => option.value === value),
-  ];
 
   const handleSelect = (optionValue: T) => {
     onChange(optionValue);
@@ -45,8 +43,9 @@ export default function Dropdown<T extends string>({
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'inline-flex h-7.25 items-center justify-center overflow-hidden rounded-full bg-[#69BFDF] px-2.5 text-[13px] leading-[1.6] font-medium text-white transition-opacity active:opacity-90',
-          isOpen && 'opacity-95'
+          'bg-primary-500 inline-flex h-7.25 items-center justify-evenly overflow-hidden rounded-full px-2.5 text-[13px] leading-[1.6] font-medium text-white transition-opacity active:opacity-90',
+          isOpen && 'opacity-95',
+          triggerClassName
         )}
       >
         <span>{selectedOption?.label}</span>
@@ -64,7 +63,7 @@ export default function Dropdown<T extends string>({
         )}
       >
         <div className="flex min-w-14 flex-col gap-1">
-          {orderedOptions.map((option) => (
+          {options.map((option) => (
             <button
               key={option.value}
               type="button"