[refactor] tanstackQuery 최적화 및 활동사진 컴포넌트 리팩토링

frontend/src/hooks/queries/club/useUpdateClubDescription.ts

@@ -1,20 +1,12 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { updateClubDescription } from '@/apis/updateClubDescription';
 import { ClubDescription } from '@/types/club';
 
 export const useUpdateClubDescription = () => {
-  const queryClient = useQueryClient();
-
   return useMutation({
     mutationFn: (updatedData: ClubDescription) =>
       updateClubDescription(updatedData),
 
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ['clubDetail'],
-      });
-    },
-
     onError: (error) => {
       console.error('Error updating club detail:', error);
     },

frontend/src/hooks/queries/club/useUpdateClubDetail.ts

@@ -1,20 +1,12 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { updateClubDetail } from '@/apis/updateClubDetail';
 import { ClubDetail } from '@/types/club';
 
 export const useUpdateClubDetail = () => {
-  const queryClient = useQueryClient();
-
   return useMutation({
     mutationFn: (updatedData: Partial<ClubDetail>) =>
       updateClubDetail(updatedData),
 
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ['clubDetail'],
-      });
-    },
-
     onError: (error) => {
       console.error('Error updating club detail:', error);
     },

frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx

@@ -1,17 +1,12 @@
 import React from 'react';
 import * as Styled from './ImagePreview.styles';
+import { ImagePreviewProps } from '@/types/club';
 
-export const ImagePreview = ({
-  image,
-  onDelete,
-}: {
-  image: string;
-  onDelete: () => void;
-}) => {
+export const ImagePreview = ({ image, onDelete }: ImagePreviewProps) => {
   return (
     <Styled.ImagePreviewContainer>
       <img src={image} alt='preview' />
       <Styled.DeleteButton onClick={onDelete}>X</Styled.DeleteButton>
     </Styled.ImagePreviewContainer>
   );
-};
+};

frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx

@@ -2,14 +2,12 @@ import React, { useRef } from 'react';
 import * as Styled from './ImageUpload.styles';
 import UploadAddIcon from '@/assets/images/upload-add.png';
 import useCreateFeedImage from '@/hooks/queries/club/useCreateFeedImage';
+import { ImageUploadProps } from '@/types/club';
 
 export const ImageUpload = ({
   clubId,
   onChangeImageList,
-}: {
-  clubId: string;
-  onChangeImageList: (image: string) => void;
-}) => {
+}: ImageUploadProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onSuccessUploadImage = (data: string) => {
@@ -39,4 +37,4 @@ export const ImageUpload = ({
   );
 };
 
-export default ImageUpload;
+export default ImageUpload;

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts

@@ -102,8 +102,7 @@ export const ListItem = styled.li`
 export const ImageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 37px;
-  margin-top: 140px;
+  gap: 15px;
   overflow: hidden;
 `;
 

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx

@@ -1,29 +1,34 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { useOutletContext } from 'react-router-dom';
 import * as Styled from './RecruitEditTab.styles';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Calendar from '@/pages/AdminPage/components/Calendar/Calendar';
 import Button from '@/components/common/Button/Button';
 import InputField from '@/components/common/InputField/InputField';
-import { parseRecruitmentPeriod } from '@/utils/stringToDate';
-import { useOutletContext } from 'react-router-dom';
+import ImageUpload from '@/pages/AdminPage/components/ImageUpload/ImageUpload';
+import { ImagePreview } from '@/pages/AdminPage/components/ImagePreview/ImagePreview';
 import { useUpdateClubDetail } from '@/hooks/queries/club/useUpdateClubDetail';
 import { useUpdateClubDescription } from '@/hooks/queries/club/useUpdateClubDescription';
-import { ClubDetail, ClubDescription } from '@/types/club';
-import ImageUpload from '@/pages/AdminPage/components/ImageUpload/ImageUpload';
-import { ImagePreview } from '../../components/ImagePreview/ImagePreview';
 import useUpdateFeedImages from '@/hooks/queries/club/useUpdateFeedImages';
+import { parseRecruitmentPeriod } from '@/utils/stringToDate';
+import { ClubDetail, ClubDescription } from '@/types/club';
 
+const MAX_IMAGES = 5;
+const TEMP_CLUB_ID = '67d5529c1b38fc41fad7660a';
 
 const RecruitEditTab = () => {
   const clubDetail = useOutletContext<ClubDetail | null>();
+
   const { mutate: updateClub } = useUpdateClubDetail();
   const { mutate: updateClubDescription } = useUpdateClubDescription();
+  const { mutate: updateFeedImages } = useUpdateFeedImages();
 
   const [recruitmentStart, setRecruitmentStart] = useState<Date | null>(null);
   const [recruitmentEnd, setRecruitmentEnd] = useState<Date | null>(null);
   const [recruitmentTarget, setRecruitmentTarget] = useState('');
   const [description, setDescription] = useState('');
+  const [imageList, setImageList] = useState<string[]>([]);
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -42,13 +47,6 @@ const RecruitEditTab = () => {
     }, 0);
   };
 
-  const MAX_IMAGES = 5;
-  const TEMP_CLUB_ID = '67d5529c1b38fc41fad7660a';
-
-  const [imageList, setImageList] = useState<string[]>([]);
-
-  const { mutate: updateFeedImages } = useUpdateFeedImages();
-
   const addImage = (newImage: string) => {
     updateFeedImages({ feeds: [...imageList, newImage], clubId: TEMP_CLUB_ID });
     setImageList([...imageList, newImage]);
@@ -134,7 +132,7 @@ const RecruitEditTab = () => {
       alert(`동아리 정보 수정에 실패했습니다`);
     }
   };
-
+  // [x]FIXME: div 컴포넌트 수정
   return (
     <Styled.RecruitEditorContainer>
       <div>
@@ -209,8 +207,9 @@ const RecruitEditTab = () => {
           </ReactMarkdown>
         </Styled.PreviewContainer>
       </Styled.EditorPreviewContainer>
+
+      <h3>활동 사진 편집</h3>
       <Styled.ImageContainer>
-        <h2>활동 사진 편집</h2>
         <Styled.ImageGrid>
           {imageList.map((image, index) => (
             <ImagePreview

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import useTrackPageView from '@/hooks/useTrackPageView';
+import * as Styled from '@/styles/PageContainer.styles';
 import Header from '@/components/common/Header/Header';
 import BackNavigationBar from '@/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar';
 import ClubDetailHeader from '@/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader';
@@ -9,7 +9,7 @@ import InfoBox from '@/pages/ClubDetailPage/components/InfoBox/InfoBox';
 import IntroduceBox from '@/pages/ClubDetailPage/components/IntroduceBox/IntroduceBox';
 import Footer from '@/components/common/Footer/Footer';
 import ClubDetailFooter from '@/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter';
-import * as Styled from '@/styles/PageContainer.styles';
+import useTrackPageView from '@/hooks/useTrackPageView';
 import useAutoScroll from '@/hooks/useAutoScroll';
 import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail';
 

frontend/src/types/club.ts

@@ -23,3 +23,13 @@ export interface ClubDescription {
   clubId: string;
   description: string | null;
 }
+
+export interface ImageUploadProps {
+  clubId: string;
+  onChangeImageList: (image: string) => void;
+}
+
+export interface ImagePreviewProps {
+  image: string;
+  onDelete: () => void;
+}