[Feature/#207] chat api 연동 - 아직 리뷰 x

apis/data-contracts.ts

@@ -383,10 +383,10 @@ export interface CreateReservationRequest {
    */
   reservationDates: string[];
   /**
-   * 운영 시간 (형식: HH:MM ~ HH:MM)
+   * 운영 시간 (형식: HH:MM-HH:MM)
    * @minLength 1
-   * @pattern ^([01]\d|2[0-3]):([0-5]\d) ~ ([01]\d|2[0-3]):([0-5]\d)$
-   * @example "15:00 ~ 16:00"
+   * @pattern ^([01]\d|2[0-3]):([0-5]\d)-([01]\d|2[0-3]):([0-5]\d)$
+   * @example "15:00-16:00"
    */
   operationHour: string;
   /**
@@ -788,8 +788,8 @@ export interface ReservationResponse {
    */
   reservationDates?: string[];
   /**
-   * 운영 시간 (형식: HH:MM ~ HH:MM)
-   * @example "15:00 ~ 16:00"
+   * 운영 시간 (형식: HH:MM-HH:MM)
+   * @example "15:00-16:00"
    */
   operationHour?: string;
   /**
@@ -1461,11 +1461,8 @@ export interface FoodTruckDetailResponse {
    * @example "서울 광진구, 서울 강남구, 서울 영등포구"
    */
   serviceAreas?: string;
-  /**
-   * 호출 가능 지역 코드
-   * @example [1,2]
-   */
-  regionCodes?: number[];
+  /** 호출 가능 지역 정보 리스트 */
+  regionCodes?: RegionResponse[];
   /**
    * 푸드트럭 메뉴 카테고리 (라벨 리스트)
    * @example ["한식","분식"]
@@ -1689,12 +1686,24 @@ export interface ChatRoomMetaDataResponse {
    * @example "맛있는푸드트럭"
    */
   foodTruckName?: string;
+  /**
+   * 푸드트럭 식별자
+   * @format int64
+   * @example 1
+   */
+  foodTruckId?: number;
   /**
    * 채팅방과 관련된 예약 ID (있는 경우: ID 반환, 없는 경우: null)
    * @format int64
    * @example 1
    */
   reservationId?: number;
+  /**
+   * 예약자(일반 유저) 식별자
+   * @format int64
+   * @example 2
+   */
+  memberId?: number;
 }
 
 export interface BaseResponseListChatMessageResponse {

src/pages/chat-list/ChatList.tsx

@@ -6,16 +6,21 @@ import { Icon } from '@icon/Icon';
 import OverlayModal from '@layout/overlay/Overlay';
 import Navigation from '@layout/navigation/Navigation';
 import Button from '@ui/button/Button';
+import { useGetChatList } from '@pages/chat-list/api/chat-list-api';
+import Loading from '@layout/loading/Loading';
 
 export default function ChatList() {
   const navigate = useNavigate();
   const handleClickBack = () => navigate(-1);
 
+  //TODO: 유저,오너 구분 확인 로직 필요
+  const isOwner = true;
+  const { data: chatListData, isPending, isError } = useGetChatList(isOwner);
+
   const {
     isEditing,
     activeFilter,
     setActiveFilter,
-    chatList,
     selectChatList,
     handleToggleEdit,
     handleCheckChange,
@@ -25,6 +30,13 @@ export default function ChatList() {
     handleCloseModal,
   } = useChatList();
 
+  //TODO: 에러 처리 필요
+  if (isPending) {
+    return <Loading />;
+  }
+  if (isError) {
+    return <div>채팅 목록을 불러오는 중에 오류가 발생했습니다.</div>;
+  }
   return (
     <>
       <Navigation
@@ -69,19 +81,19 @@ export default function ChatList() {
           </div>
         </div>
       </OverlayModal>
-      <div className='flex flex-col overflow-y-scroll pb-[2.4rem] pt-[7.8rem] scrollbar-hide'>
-        {(chatList ?? []).map(item => {
+      <div className='scrollbar-hide flex flex-col overflow-y-scroll pb-[2.4rem] pt-[7.8rem]'>
+        {(chatListData?.content ?? []).map(item => {
           return (
             <ChatListItem
-              key={item.clientId}
+              key={item.id}
               isEditing={isEditing}
-              clientName={item.clientName}
-              tagTitle={item.tagTitle}
-              lastChat={item.lastChat}
-              lastChatTime={item.lastChatTime}
-              unreadCount={item.unreadCount}
-              isChecked={selectChatList.has(item.clientId)}
-              handleCheckChange={() => handleCheckChange(item.clientId)}
+              name={item.name ?? ''}
+              foodTruckName={item.foodTruckName ?? ''}
+              lastMessage={item.lastMessage ?? ''}
+              lastMessageSendTime={item.lastMessageSendTime ?? ''}
+              unreadCount={item.unreadCount ?? 0}
+              isChecked={selectChatList.has(item.id ?? 0)}
+              handleCheckChange={() => handleCheckChange(item.id ?? 0)}
             />
           );
         })}

src/pages/chat-list/api/chat-list-api.ts

@@ -0,0 +1,66 @@
+import { apiRequest } from '@api/apiRequest';
+import { USER_INFO } from '@shared/querykey/user-info';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type {
+  CreateChatRoomData,
+  GetChatRoomsData,
+  MarkMessagesAsReadData,
+} from 'apis/data-contracts';
+
+const getChatList = async (isOwner: boolean) => {
+  const response = await apiRequest<GetChatRoomsData>({
+    endPoint: '/chat/rooms',
+    method: 'GET',
+    params: {
+      isOwner,
+    },
+  });
+  return response.data;
+};
+
+const postChatRoom = async (foodTruckId: number) => {
+  const response = await apiRequest<CreateChatRoomData>({
+    endPoint: '/chat/rooms',
+    method: 'POST',
+    params: {
+      foodTruckId,
+    },
+  });
+  return response.data;
+};
+
+const patchChatRoom = async (chatRoomId: number) => {
+  const response = await apiRequest<MarkMessagesAsReadData>({
+    endPoint: `/chat/rooms/${chatRoomId}/read`,
+    method: 'PATCH',
+  });
+  return response.data;
+};
+
+export const useGetChatList = (isOwner: boolean) => {
+  return useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: USER_INFO.CHATS(),
+    queryFn: () => getChatList(isOwner),
+  });
+};
+
+export const usePostChatRoom = (foodTruckId: number) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => postChatRoom(foodTruckId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
+    },
+  });
+};
+
+export const usePatchChatRoom = (chatRoomId: number) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => patchChatRoom(chatRoomId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
+    },
+  });
+};

src/pages/chat-list/hooks/use-chat-list.tsx

@@ -1,11 +1,9 @@
-import { mockup } from '@pages/chat-list/constant/mocks';
-import type { Chat } from '@pages/chat-list/types/chat-list-type';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export const useChatList = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [activeFilter, setActiveFilter] = useState('전체보기');
-  const [chatList, setChatList] = useState<Chat[]>([]);
+
   const [selectChatList, setSelectChatList] = useState(new Set<number>());
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
@@ -36,16 +34,10 @@ export const useChatList = () => {
 
   const handleCloseModal = () => setIsDeleteModalOpen(false);
 
-  useEffect(() => {
-    /** API 준비 전 더미 데이터 사용*/
-    setChatList(mockup);
-  }, []);
-
   return {
     isEditing,
     activeFilter,
     setActiveFilter,
-    chatList,
     selectChatList,
     handleToggleEdit,
     handleCheckChange,