[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,26 @@ 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 +53,18 @@ 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 +76,7 @@ export const useUploadFeed = () => {
           successfulUrls.push(feedResArr[i].finalUrl);
         } else {
           failedFiles.push(files[i].name);
+          onItemStatusChange?.(i, 'failed');
         }
       });
 
@@ -64,8 +91,8 @@ export const useUploadFeed = () => {
       // 6. 서버에 전체 배열 PUT으로 갱신
       await feedApi.updateFeeds(clubId, allUrls);
 
-      // 7. 실패한 파일 정보 반환
-      return { clubId, failedFiles };
+      // 7. 실패한 파일 정보 및 성공 URL 반환
+      return { clubId, failedFiles, successfulUrls };
     },
 
     onSuccess: (data) => {

frontend/src/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab.stories.tsx

@@ -0,0 +1,88 @@
+import { MemoryRouter, Outlet, Route, Routes } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ClubDetail } from '@/types/club';
+import PhotoEditTab from './PhotoEditTab';
+
+const SAMPLE_FEEDS = [
+  'https://picsum.photos/seed/a/400/500',
+  'https://picsum.photos/seed/b/400/500',
+  'https://picsum.photos/seed/c/400/500',
+  'https://picsum.photos/seed/d/400/500',
+  'https://picsum.photos/seed/e/400/500',
+];
+
+const mockClubDetail = (feeds: string[]): ClubDetail => ({
+  id: 'club-1',
+  name: '테스트 동아리',
+  logo: '',
+  tags: [],
+  recruitmentStatus: 'OPEN',
+  division: '',
+  category: '',
+  introduction: '',
+  description: {
+    introDescription: '',
+    activityDescription: '',
+    awards: [],
+    idealCandidate: { tags: [], content: '' },
+    benefits: '',
+    faqs: [],
+  },
+  state: '',
+  feeds,
+  presidentName: '',
+  presidentPhoneNumber: '',
+  recruitmentForm: '',
+  recruitmentStart: '',
+  recruitmentEnd: '',
+  recruitmentTarget: '',
+  socialLinks: {} as ClubDetail['socialLinks'],
+});
+
+const makeQueryClient = () =>
+  new QueryClient({ defaultOptions: { queries: { retry: false } } });
+
+const Wrapper = ({ feeds = SAMPLE_FEEDS }: { feeds?: string[] }) => (
+  <QueryClientProvider client={makeQueryClient()}>
+    <div style={{ maxWidth: 600, padding: 24 }}>
+      <MemoryRouter initialEntries={['/admin/photo']}>
+        <Routes>
+          <Route
+            path='/admin/photo'
+            element={<Outlet context={mockClubDetail(feeds)} />}
+          >
+            <Route index element={<PhotoEditTab />} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </div>
+  </QueryClientProvider>
+);
+
+const meta = {
+  title: 'Admin/PhotoEditTab',
+  parameters: { layout: 'centered' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const WithPhotos: Story = {
+  render: () => <Wrapper />,
+};
+
+export const Empty: Story = {
+  render: () => <Wrapper feeds={[]} />,
+};
+
+export const ManyPhotos: Story = {
+  render: () => (
+    <Wrapper
+      feeds={Array.from(
+        { length: 9 },
+        (_, i) => `https://picsum.photos/seed/${i + 10}/400/500`,
+      )}
+    />
+  ),
+};