[캠퍼스] 콜밴팟 API 이미지 업로드 추가 (#1209)

Author: dooohun

src/api/callvan/entity.ts

@@ -159,10 +159,18 @@ export interface CallvanReportReason {
   custom_text?: string;
 }
 
+export type CallvanReportAttachmentType = 'IMAGE';
+
+export interface CallvanReportAttachment {
+  attachment_type: CallvanReportAttachmentType;
+  url: string;
+}
+
 export interface CallvanReportRequest {
   reported_user_id: number;
   description?: string;
   reasons: CallvanReportReason[];
+  attachments?: CallvanReportAttachment[];
 }
 
 export interface CreateCallvanRequest {

src/api/uploadFile/entity.ts

@@ -1,6 +1,6 @@
 import { APIResponse } from 'interfaces/APIResponse';
 
-export type UploadDomain = 'SHOPS' | 'LOST_ITEMS' | 'CLUB';
+export type UploadDomain = 'SHOPS' | 'LOST_ITEMS' | 'CLUB' | 'CALLVAN_REPORT' | 'CALLVAN_CHAT';
 
 export interface UploadImage extends APIResponse {
   file_url: string;

src/assets/svg/Callvan/image-upload.svg

@@ -60,7 +60,7 @@ export default function CallvanChatRoom({ postId }: CallvanChatRoomProps) {
     if (!file) return;
 
     try {
-      const { file_url } = await uploadFile({ domain: 'SHOPS', file });
+      const { file_url } = await uploadFile({ domain: 'CALLVAN_CHAT', file });
       if (file_url) {
         sendMessage({ is_image: true, content: file_url });
       }

src/components/Callvan/components/CallvanChatRoom/index.tsx

@@ -86,7 +86,6 @@ export default function DetailStep({ description, images, onDescriptionChange, o
             </button>
           )}
         </div>
-        {/* TODO: 이미지 API 완성 후 FormData로 업로드 연결 */}
         <input
           ref={fileInputRef}
           type="file"

src/components/Callvan/components/ReportPage/DetailStep.tsx

@@ -360,6 +360,7 @@
     justify-content: center;
     gap: 8px;
     width: 100%;
+    height: 38px;
     background: #ead3fe;
     border: none;
     border-radius: 8px;

src/components/Callvan/components/ReportPage/ReportPage.module.scss

@@ -5,6 +5,7 @@ import ArrowBackIcon from 'assets/svg/Callvan/arrow-back.svg';
 import useCallvanToast from 'components/Callvan/hooks/useCallvanToast';
 import useReportCallvan from 'components/Callvan/hooks/useReportCallvan';
 import ROUTES from 'static/routes';
+import useUploadFile from 'utils/hooks/uploadFile/useUploadFile';
 import showToast from 'utils/ts/showToast';
 import DetailStep from './DetailStep';
 import ReasonStep from './ReasonStep';
@@ -18,6 +19,7 @@ interface ReportPageProps {
 export default function ReportPage({ postId, reportedUserId }: ReportPageProps) {
   const router = useRouter();
   const { mutate, isPending } = useReportCallvan(postId);
+  const { uploadFile, isPending: isUploading } = useUploadFile();
 
   const [step, setStep] = useState<1 | 2>(1);
   const [selectedReasons, setSelectedReasons] = useState<Set<CallvanReportReasonCode>>(new Set());
@@ -59,18 +61,31 @@ export default function ReportPage({ postId, reportedUserId }: ReportPageProps)
     }
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     const reasons: CallvanReportReason[] = Array.from(selectedReasons).map((code) => ({
       reason_code: code,
       ...(code === 'OTHER' ? { custom_text: customText } : {}),
     }));
 
+    let attachments: { attachment_type: 'IMAGE'; url: string }[] = [];
+    if (images.length > 0) {
+      try {
+        const uploadResults = await Promise.all(
+          images.map((file) => uploadFile({ domain: 'CALLVAN_REPORT', file })),
+        );
+        attachments = uploadResults.map((result: { file_url: string }) => ({ attachment_type: 'IMAGE' as const, url: result.file_url }));
+      } catch {
+        showToast('error', '이미지 업로드에 실패했습니다.');
+        return;
+      }
+    }
+
     mutate(
       {
         reported_user_id: reportedUserId,
         ...(description.trim() ? { description: description.trim() } : {}),
         reasons,
-        // TODO: images를 FormData로 업로드하는 API가 완성되면 여기에 연결
+        ...(attachments.length > 0 ? { attachments } : {}),
       },
       {
         onSuccess: () => {
@@ -120,7 +135,7 @@ export default function ReportPage({ postId, reportedUserId }: ReportPageProps)
             다음
           </button>
         ) : (
-          <button type="button" className={styles['page__submit-button']} onClick={handleSubmit} disabled={isPending}>
+          <button type="button" className={styles['page__submit-button']} onClick={handleSubmit} disabled={isPending || isUploading}>
             신고하기
           </button>
         )}