diff --git a/apps/web/src/apis/image-upload/api.ts b/apps/web/src/apis/image-upload/api.ts index 793b78cd..b65e6325 100644 --- a/apps/web/src/apis/image-upload/api.ts +++ b/apps/web/src/apis/image-upload/api.ts @@ -14,6 +14,10 @@ export interface UploadProfileImageResponse { fileUrl: string; } +export interface UploadChatImageResponse { + fileUrl: string; +} + export interface UploadGpaReportResponse { fileUrl: string; } @@ -44,17 +48,32 @@ export const imageUploadApi = { }, /** - * 채팅 이미지 업로드 (로그인 후) + * 프로필 이미지 업로드 (로그인 후) */ postUploadProfileImage: async (file: File): Promise => { const formData = new FormData(); formData.append("file", file); - const res = await axiosInstance.post(`/file/chat/post`, formData, { + const res = await axiosInstance.post(`/file/profile/post`, formData, { headers: { "Content-Type": "multipart/form-data" }, }); return res.data; }, + /** + * 채팅 이미지 업로드 (로그인 후) + */ + postUploadChatImages: async (files: File[]): Promise => { + const formData = new FormData(); + files.forEach((file) => { + formData.append("files", file); + }); + + const res = await axiosInstance.post(`/file/chat`, formData, { + headers: { "Content-Type": "multipart/form-data" }, + }); + return res.data.map((image) => image.fileUrl); + }, + /** * 프로필 이미지 업로드 (회원가입 전, 공개 API) */ diff --git a/apps/web/src/apis/image-upload/index.ts b/apps/web/src/apis/image-upload/index.ts index d6ee6647..601ad158 100644 --- a/apps/web/src/apis/image-upload/index.ts +++ b/apps/web/src/apis/image-upload/index.ts @@ -1,7 +1,13 @@ -export type { UploadGpaReportResponse, UploadLanguageTestReportResponse, UploadProfileImageResponse } from "./api"; +export type { + UploadChatImageResponse, + UploadGpaReportResponse, + UploadLanguageTestReportResponse, + UploadProfileImageResponse, +} from "./api"; export { imageUploadApi } from "./api"; export { default as useSlackNotification } from "./postSlackNotification"; +export { default as useUploadChatImages } from "./postUploadChatImages"; export { default as useUploadGpaReport } from "./postUploadGpaReport"; export { default as useUploadLanguageTestReport } from "./postUploadLanguageTestReport"; export { default as useUploadProfileImage } from "./postUploadProfileImage"; diff --git a/apps/web/src/apis/image-upload/postUploadChatImages.ts b/apps/web/src/apis/image-upload/postUploadChatImages.ts new file mode 100644 index 00000000..60325642 --- /dev/null +++ b/apps/web/src/apis/image-upload/postUploadChatImages.ts @@ -0,0 +1,13 @@ +import { useMutation } from "@tanstack/react-query"; +import type { AxiosError } from "axios"; +import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta"; +import { imageUploadApi } from "./api"; + +const useUploadChatImages = () => { + return useMutation({ + mutationFn: (files) => imageUploadApi.postUploadChatImages(files), + meta: SKIP_GLOBAL_ERROR_TOAST_META, + }); +}; + +export default useUploadChatImages; diff --git a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx index 59169586..d9b4ae77 100644 --- a/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx +++ b/apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx @@ -4,7 +4,7 @@ import clsx from "clsx"; import Link from "next/link"; import { toast } from "react-hot-toast"; import { useGetPartnerInfo } from "@/apis/chat"; -import { useUploadProfileImage } from "@/apis/image-upload"; +import { useUploadChatImages } from "@/apis/image-upload"; import ProfileWithBadge from "@/components/ui/ProfileWithBadge"; import useAuthStore from "@/lib/zustand/useAuthStore"; import { ConnectionStatus } from "@/types/chat"; @@ -49,7 +49,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => { addImageMessagePreview, } = useChatListHandler(chatId); - const uploadProfileImageMutation = useUploadProfileImage(); + const uploadChatImagesMutation = useUploadChatImages(); const { data: partnerInfo } = useGetPartnerInfo(chatId); @@ -181,11 +181,7 @@ const ChatContent = ({ chatId }: ChatContentProps) => { }} onSendImages={async (data) => { try { - const uploadedImages = await Promise.all( - data.images.map((image) => uploadProfileImageMutation.mutateAsync(image)), - ); - - const imageUrls = uploadedImages.map((image) => image.fileUrl); + const imageUrls = await uploadChatImagesMutation.mutateAsync(data.images); const isSent = sendImageMessage(imageUrls); if (!isSent) {