[refactor] 관리자 페이지 활동사진 업로드 UI/UX 개선

frontend/src/apis/image.ts

@@ -5,6 +5,8 @@ import { handleResponse } from './utils/apiHelpers';
 interface PresignedData {
   presignedUrl: string;
   finalUrl: string;
+  success: boolean;
+  failureReason: string | null;
 }
 
 interface FeedUploadRequest {
@@ -16,11 +18,13 @@ interface FeedUploadRequest {
 export async function uploadToStorage(
   presignedUrl: string,
   file: File,
+  contentType?: string,
 ): Promise<void> {
+  const resolvedContentType = contentType || file.type || 'image/jpeg';
   const response = await fetch(presignedUrl, {
     method: 'PUT',
     body: file,
-    headers: { 'Content-Type': file.type },
+    headers: { 'Content-Type': resolvedContentType },
   });
   await handleResponse(response, `S3 업로드 실패 : ${response.status}`);
 }

frontend/src/components/common/Button/Button.tsx

@@ -28,7 +28,7 @@ const StyledButton = styled.button<ButtonProps>`
   transition: background-color 0.2s;
   width: ${({ width }) => width || 'auto'};
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: #333333;
     ${({ animated }) =>
       animated &&
@@ -42,9 +42,9 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   &:disabled {
-    background-color: #cccccc; /* 비활성화된 느낌의 회색 */
+    background-color: #cccccc;
     color: #666666;
-    cursor: not-allowed; /* 클릭할 수 없음을 나타내는 커서 */
+    cursor: not-allowed;
     opacity: 0.7;
   }
 `;

frontend/src/hooks/Queries/useClubImages.ts

@@ -2,10 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { feedApi, logoApi, uploadToStorage } from '@/apis/image';
 import { queryKeys } from '@/constants/queryKeys';
 
+type ItemStatus = 'pending' | 'uploading' | 'failed';
+
 interface FeedUploadParams {
   clubId: string;
   files: File[];
   existingUrls: string[];
+  onItemStatusChange?: (index: number, status: ItemStatus) => void;
 }
 
 interface FeedUpdateParams {
@@ -22,11 +25,12 @@ export const useUploadFeed = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ clubId, files, existingUrls }: FeedUploadParams) => {
+    mutationFn: async ({ clubId, files, existingUrls, onItemStatusChange }: FeedUploadParams) => {
       // 1. presigned URL 요청
+      const ALLOWED_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
       const uploadRequests = files.map((file) => ({
         fileName: file.name,
-        contentType: file.type,
+        contentType: ALLOWED_TYPES.includes(file.type) ? file.type : 'image/jpeg',
       }));
       const feedResArr = await feedApi.getUploadUrls(clubId, uploadRequests);
 
@@ -35,10 +39,14 @@ export const useUploadFeed = () => {
       }
 
       // 2. r2에 병렬 업로드 (개별 성공/실패 추적)
+      // presigned URL 생성 자체가 실패한 항목은 업로드 건너뜀
       const uploadResults = await Promise.allSettled(
-        files.map((file, i) =>
-          uploadToStorage(feedResArr[i].presignedUrl, file),
-        ),
+        files.map((file, i) => {
+          if (!feedResArr[i].success || !feedResArr[i].presignedUrl) {
+            return Promise.reject(new Error(feedResArr[i].failureReason ?? 'presigned URL 생성 실패'));
+          }
+          return uploadToStorage(feedResArr[i].presignedUrl, file);
+        }),
       );
 
       // 3. 성공한 파일만 추출
@@ -50,6 +58,7 @@ export const useUploadFeed = () => {
           successfulUrls.push(feedResArr[i].finalUrl);
         } else {
           failedFiles.push(files[i].name);
+          onItemStatusChange?.(i, 'failed');
         }
       });
 
@@ -64,8 +73,8 @@ export const useUploadFeed = () => {
       // 6. 서버에 전체 배열 PUT으로 갱신
       await feedApi.updateFeeds(clubId, allUrls);
 
-      // 7. 실패한 파일 정보 반환
-      return { clubId, failedFiles };
+      // 7. 실패한 파일 정보 및 성공 URL 반환
+      return { clubId, failedFiles, successfulUrls };
     },
 
     onSuccess: (data) => {