[fix] 파일 첨부 api 연동

app/routes/rooms/api/attachments.ts

@@ -12,6 +12,15 @@ export interface ChatAttachmentUploadResponse {
   createdAt: string;
 }
 
+export interface ChatAttachment {
+  attachmentId: number;
+  attachmentType: "IMAGE" | "FILE";
+  contentType: string;
+  originalName: string;
+  fileSize: number;
+  accessUrl: string; // 서버가 메시지 응답에 주는 경우에만
+}
+
 /**
  * 주의:
  * - fetch를 쓸 때 Content-Type을 직접 multipart/form-data로 세팅하지 마세요.
@@ -40,12 +49,11 @@ export async function uploadAttachment(params: {
     body: form,
   });
 
-  // 실패시 throw
   if (!res.ok) {
     const text = await res.text().catch(() => "");
     throw new Error(`Attachment upload failed: ${res.status} ${text}`);
   }
 
   const data = (await res.json()) as ChatAttachmentUploadResponse;
   return data;
-}
+}

app/routes/rooms/api/rooms.ts

@@ -1,6 +1,6 @@
 import { axiosInstance } from "../../../api/axios";
 
-
+//채팅룸 생성 및 조회
 type CreateOrGetDirectRoomResponse = {
   isSuccess: boolean;
   code: string;
@@ -188,4 +188,4 @@ export async function getChatMessages({
     }
   );
   return res.data;
-}
+}

app/routes/rooms/chatting-room.tsx

@@ -2,9 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import NavigationHeader from "../../components/common/NavigateHeader";
 import ChatComposer from "./components/ChatComposer";
-import AttachmentSheet, {
-  type AttachmentAction,
-} from "./components/AttachmentSheet";
+import AttachmentSheet, { type AttachmentAction } from "./components/AttachmentSheet";
 import useKeyboardOffset from "../../hooks/KeyboardOffset";
 import MessageRenderer from "./components/MessageRender";
 import { formatKoreanDateTime } from "../../utils/dateTime";
@@ -51,8 +49,7 @@ export default function ChattingRoom({ brandId }: Props) {
 
   const collabTitle = detail?.campaignSummary?.campaignTitle ?? "";
   const collabSubtitle = detail?.campaignSummary?.brandName ?? "";
-  const collabThumb =
-    detail?.campaignSummary?.campaignImageUrl ?? partnerAvatarUrl;
+  const collabThumb = detail?.campaignSummary?.campaignImageUrl ?? partnerAvatarUrl;
   const summaryBarHeight = isCollaborating ? 64 : 0;
 
   const createdAt = useMemo(() => {
@@ -74,10 +71,7 @@ export default function ChattingRoom({ brandId }: Props) {
 
     const run = async () => {
       try {
-        const result = await createOrGetDirectRoom({
-          brandId,
-          creatorId: myUserId,
-        });
+        const result = await createOrGetDirectRoom({ brandId, creatorId: myUserId });
         setRoomId(result.roomId);
       } catch (e) {
         console.error("createOrGetDirectRoom failed:", e);
@@ -195,6 +189,7 @@ export default function ChattingRoom({ brandId }: Props) {
   };
 
   const handlePickImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!roomId) return;
     const file = e.target.files?.[0];
     e.target.value = "";
     if (!file) return;
@@ -231,6 +226,7 @@ export default function ChattingRoom({ brandId }: Props) {
   };
 
   const handlePickFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!roomId) return;
     const file = e.target.files?.[0];
     e.target.value = "";
     if (!file) return;
@@ -313,11 +309,7 @@ export default function ChattingRoom({ brandId }: Props) {
       <NavigationHeader title={partnerName} onBack={() => history.back()} />
 
       {detail?.campaignSummary && (
-        <CollaborationSummaryBar
-          thumbnailUrl={collabThumb}
-          title={collabTitle}
-          subtitle={collabSubtitle}
-        />
+        <CollaborationSummaryBar thumbnailUrl={collabThumb} title={collabTitle} subtitle={collabSubtitle} />
       )}
 
       <div