- {(chatList ?? []).map(item => {
+
+ {(chatListData?.content ?? []).map(item => {
return (
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)}
/>
);
})}
diff --git a/src/pages/chat-list/api/chat-list-api.ts b/src/pages/chat-list/api/chat-list-api.ts
new file mode 100644
index 00000000..a7e03dea
--- /dev/null
+++ b/src/pages/chat-list/api/chat-list-api.ts
@@ -0,0 +1,21 @@
+import { apiRequest } from '@api/apiRequest';
+import { useQuery } from '@tanstack/react-query';
+import type { GetChatRoomsData } from 'apis/data-contracts';
+
+const getChatList = async (isOwner: boolean) => {
+ const response = await apiRequest({
+ endPoint: '/chat/rooms',
+ method: 'GET',
+ params: {
+ isOwner,
+ },
+ });
+ return response.data;
+};
+
+export const useGetChatList = (isOwner: boolean) => {
+ return useQuery({
+ queryKey: ['chat-list', isOwner],
+ queryFn: () => getChatList(isOwner),
+ });
+};
diff --git a/src/pages/chat-list/hooks/use-chat-list.tsx b/src/pages/chat-list/hooks/use-chat-list.tsx
index 2be5ef30..7df9f806 100644
--- a/src/pages/chat-list/hooks/use-chat-list.tsx
+++ b/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([]);
+
const [selectChatList, setSelectChatList] = useState(new Set());
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,
From 4cba13cf2b92d8c5fb88e127d8f7819a226893df Mon Sep 17 00:00:00 2001
From: hamxxn <150767569+hamxxn@users.noreply.github.com>
Date: Sat, 13 Dec 2025 12:54:43 +0900
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20/chat/rooms=20patch,=20post=20api?=
=?UTF-8?q?=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/chat-list/api/chat-list-api.ts | 50 ++++++++++++++++++++++--
1 file changed, 47 insertions(+), 3 deletions(-)
diff --git a/src/pages/chat-list/api/chat-list-api.ts b/src/pages/chat-list/api/chat-list-api.ts
index a7e03dea..e6f6c852 100644
--- a/src/pages/chat-list/api/chat-list-api.ts
+++ b/src/pages/chat-list/api/chat-list-api.ts
@@ -1,6 +1,11 @@
import { apiRequest } from '@api/apiRequest';
-import { useQuery } from '@tanstack/react-query';
-import type { GetChatRoomsData } from 'apis/data-contracts';
+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({
@@ -13,9 +18,48 @@ const getChatList = async (isOwner: boolean) => {
return response.data;
};
+const postChatRoom = async (foodTruckId: number) => {
+ const response = await apiRequest({
+ endPoint: '/chat/rooms',
+ method: 'POST',
+ params: {
+ foodTruckId,
+ },
+ });
+ return response.data;
+};
+
+const patchChatRoom = async (chatRoomId: number) => {
+ const response = await apiRequest({
+ endPoint: `/chat/rooms/${chatRoomId}/read`,
+ method: 'PATCH',
+ });
+ return response.data;
+};
+
export const useGetChatList = (isOwner: boolean) => {
return useQuery({
- queryKey: ['chat-list', isOwner],
+ 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() });
+ },
+ });
+};
From c1ba1e7ea2654c4ebcffee5b340b9576e0a24970 Mon Sep 17 00:00:00 2001
From: hamxxn <150767569+hamxxn@users.noreply.github.com>
Date: Sat, 13 Dec 2025 12:56:22 +0900
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20mockup=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/chat-list/constant/mocks.ts | 77 ---------------------------
1 file changed, 77 deletions(-)
delete mode 100644 src/pages/chat-list/constant/mocks.ts
diff --git a/src/pages/chat-list/constant/mocks.ts b/src/pages/chat-list/constant/mocks.ts
deleted file mode 100644
index 5b7336d7..00000000
--- a/src/pages/chat-list/constant/mocks.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { Chat } from '@pages/chat-list/types/chat-list-type';
-
-export const mockup: Chat[] = [
- {
- clientId: 1,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 12,
- },
- {
- clientId: 2,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 122,
- },
- {
- clientId: 3,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
- {
- clientId: 4,
- clientName: '고객이름고객이름고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat:
- '혹시 예약 가능할까요? 아 안된다고요. 알겠습니다. 몇자 제한입니까',
- lastChatTime: '오후 5:40',
- unreadCount: 12,
- },
- {
- clientId: 5,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
- {
- clientId: 6,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
- {
- clientId: 7,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
- {
- clientId: 8,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
- {
- clientId: 9,
- clientName: '고객이름',
- tagTitle: '오소리 푸드트럭',
- lastChat: '혹시 예약 가능할까요?',
- lastChatTime: '오후 5:40',
- unreadCount: 0,
- },
-];
From 30710de053fdb96489fc719270e0b58efe88cbe5 Mon Sep 17 00:00:00 2001
From: hamxxn <150767569+hamxxn@users.noreply.github.com>
Date: Sat, 13 Dec 2025 13:00:45 +0900
Subject: [PATCH 6/7] fix: lint, build error
---
src/pages/chat-list/api/chat-list-api.ts | 10 +++----
.../chat-list-item/ChatListItem.stories.tsx | 30 +++++++++----------
src/shared/querykey/user-info.ts | 7 +++--
3 files changed, 25 insertions(+), 22 deletions(-)
diff --git a/src/pages/chat-list/api/chat-list-api.ts b/src/pages/chat-list/api/chat-list-api.ts
index e6f6c852..b34ee70e 100644
--- a/src/pages/chat-list/api/chat-list-api.ts
+++ b/src/pages/chat-list/api/chat-list-api.ts
@@ -39,27 +39,27 @@ const patchChatRoom = async (chatRoomId: number) => {
export const useGetChatList = (isOwner: boolean) => {
return useQuery({
- queryKey: USER_INFO.CHATS(),
+ queryKey: [...USER_INFO.CHATS(isOwner)],
queryFn: () => getChatList(isOwner),
});
};
-export const usePostChatRoom = (foodTruckId: number) => {
+export const usePostChatRoom = (foodTruckId: number, isOwner: boolean) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => postChatRoom(foodTruckId),
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
+ queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS(isOwner) });
},
});
};
-export const usePatchChatRoom = (chatRoomId: number) => {
+export const usePatchChatRoom = (chatRoomId: number, isOwner: boolean) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => patchChatRoom(chatRoomId),
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
+ queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS(isOwner) });
},
});
};
diff --git a/src/shared/components/chat/chat-list-item/ChatListItem.stories.tsx b/src/shared/components/chat/chat-list-item/ChatListItem.stories.tsx
index 18afb099..eb9e8fdc 100644
--- a/src/shared/components/chat/chat-list-item/ChatListItem.stories.tsx
+++ b/src/shared/components/chat/chat-list-item/ChatListItem.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta = {
},
tags: ['autodocs'],
argTypes: {
- profileImage: {
+ profileImageUrl: {
control: 'text',
description: '프로필 이미지 URL',
},
@@ -19,19 +19,19 @@ const meta: Meta = {
description:
'편집 모드 활성화 여부. true인 경우에 컴포넌트 전체에 클릭 이벤트 발생',
},
- clientName: {
+ name: {
control: 'text',
description: '고객 이름',
},
- tagTitle: {
+ foodTruckName: {
control: 'text',
description: '고객에게 붙은 태그',
},
- lastChat: {
+ lastMessage: {
control: 'text',
description: '마지막으로 수신된 채팅 메시지',
},
- lastChatTime: {
+ lastMessageSendTime: {
control: 'text',
description: '마지막 채팅 수신 시간',
},
@@ -54,10 +54,10 @@ export default meta;
type Story = StoryObj;
const defaultArgs = {
- profileImage: 'https://via.placeholder.com/52',
- clientName: '고객이름',
- tagTitle: '고고 푸드트럭',
- lastChatTime: '오후 3:40',
+ profileImageUrl: 'https://via.placeholder.com/52',
+ name: '고객이름',
+ foodTruckName: '고고 푸드트럭',
+ lastMessageSendTime: '오후 3:40',
isEditing: false,
isChecked: false,
};
@@ -65,7 +65,7 @@ const defaultArgs = {
export const Default: Story = {
args: {
...defaultArgs,
- lastChat: '네, 확인했습니다. 내일 연락드리겠습니다.',
+ lastMessage: '네, 확인했습니다. 내일 연락드리겠습니다.',
unreadCount: 3,
},
};
@@ -73,7 +73,7 @@ export const Default: Story = {
export const Read: Story = {
args: {
...defaultArgs,
- lastChat: '감사합니다! 좋은 하루 되세요.',
+ lastMessage: '감사합니다! 좋은 하루 되세요.',
unreadCount: 0,
},
};
@@ -81,8 +81,8 @@ export const Read: Story = {
export const LongText: Story = {
args: {
...defaultArgs,
- clientName: '건국대학교 총학생회 축제준비위원회 부팀장 고객님',
- lastChat:
+ name: '건국대학교 총학생회 축제준비위원회 부팀장 고객님',
+ lastMessage:
'안녕하세요, 문의주신 내용에 대한 답변입니다. 저희 학교의 축제를 맞이하여 총 7대의 푸드트럭을 각 건물 앞에 요청드리려고 합니다.',
unreadCount: 1,
},
@@ -91,8 +91,8 @@ export const LongText: Story = {
export const NoProfileImage: Story = {
args: {
...defaultArgs,
- profileImage: '',
- lastChat: '프로필 이미지가 없는 사용자입니다.',
+ profileImageUrl: '',
+ lastMessage: '프로필 이미지가 없는 사용자입니다.',
unreadCount: 0,
},
};
diff --git a/src/shared/querykey/user-info.ts b/src/shared/querykey/user-info.ts
index 2605590c..016c3115 100644
--- a/src/shared/querykey/user-info.ts
+++ b/src/shared/querykey/user-info.ts
@@ -2,8 +2,11 @@ export const USER_INFO = {
ALL: ['userInfo'],
DETAILS: () => [USER_INFO.ALL, 'details'],
DETAIL: (userId: number) => [...USER_INFO.DETAILS(), userId],
- CHATS: () => [USER_INFO.ALL, 'chats'],
- CHAT: (chatId: number) => [...USER_INFO.CHATS(), chatId],
+ CHATS: (isOwner: boolean) => [USER_INFO.ALL, 'chats', isOwner],
+ CHAT: (isOwner: boolean, chatId: number) => [
+ ...USER_INFO.CHATS(isOwner),
+ chatId,
+ ],
ACCOUNTS: () => [USER_INFO.ALL, 'accounts'],
ACCOUNT: (accountId: number) => [...USER_INFO.ACCOUNTS(), accountId],
RESERVATIONS: () => [USER_INFO.ALL, 'reservations'],
From b4a97a7062c0c59d1cda81c2168b2eabcefbc8c8 Mon Sep 17 00:00:00 2001
From: hamxxn <150767569+hamxxn@users.noreply.github.com>
Date: Sat, 13 Dec 2025 13:04:18 +0900
Subject: [PATCH 7/7] fix: lint error
---
src/pages/chat-list/api/chat-list-api.ts | 11 ++++++-----
src/shared/querykey/user-info.ts | 7 ++-----
2 files changed, 8 insertions(+), 10 deletions(-)
diff --git a/src/pages/chat-list/api/chat-list-api.ts b/src/pages/chat-list/api/chat-list-api.ts
index b34ee70e..c64e2998 100644
--- a/src/pages/chat-list/api/chat-list-api.ts
+++ b/src/pages/chat-list/api/chat-list-api.ts
@@ -39,27 +39,28 @@ const patchChatRoom = async (chatRoomId: number) => {
export const useGetChatList = (isOwner: boolean) => {
return useQuery({
- queryKey: [...USER_INFO.CHATS(isOwner)],
+ // eslint-disable-next-line @tanstack/query/exhaustive-deps
+ queryKey: USER_INFO.CHATS(),
queryFn: () => getChatList(isOwner),
});
};
-export const usePostChatRoom = (foodTruckId: number, isOwner: boolean) => {
+export const usePostChatRoom = (foodTruckId: number) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => postChatRoom(foodTruckId),
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS(isOwner) });
+ queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
},
});
};
-export const usePatchChatRoom = (chatRoomId: number, isOwner: boolean) => {
+export const usePatchChatRoom = (chatRoomId: number) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => patchChatRoom(chatRoomId),
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS(isOwner) });
+ queryClient.invalidateQueries({ queryKey: USER_INFO.CHATS() });
},
});
};
diff --git a/src/shared/querykey/user-info.ts b/src/shared/querykey/user-info.ts
index 016c3115..2605590c 100644
--- a/src/shared/querykey/user-info.ts
+++ b/src/shared/querykey/user-info.ts
@@ -2,11 +2,8 @@ export const USER_INFO = {
ALL: ['userInfo'],
DETAILS: () => [USER_INFO.ALL, 'details'],
DETAIL: (userId: number) => [...USER_INFO.DETAILS(), userId],
- CHATS: (isOwner: boolean) => [USER_INFO.ALL, 'chats', isOwner],
- CHAT: (isOwner: boolean, chatId: number) => [
- ...USER_INFO.CHATS(isOwner),
- chatId,
- ],
+ CHATS: () => [USER_INFO.ALL, 'chats'],
+ CHAT: (chatId: number) => [...USER_INFO.CHATS(), chatId],
ACCOUNTS: () => [USER_INFO.ALL, 'accounts'],
ACCOUNT: (accountId: number) => [...USER_INFO.ACCOUNTS(), accountId],
RESERVATIONS: () => [USER_INFO.ALL, 'reservations'],