diff --git a/frontend/src/hooks/queries/club/useUpdateClubDescription.ts b/frontend/src/hooks/queries/club/useUpdateClubDescription.ts index 851aaf645..fcdedb1de 100644 --- a/frontend/src/hooks/queries/club/useUpdateClubDescription.ts +++ b/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); }, diff --git a/frontend/src/hooks/queries/club/useUpdateClubDetail.ts b/frontend/src/hooks/queries/club/useUpdateClubDetail.ts index 902a6d0e2..d33429671 100644 --- a/frontend/src/hooks/queries/club/useUpdateClubDetail.ts +++ b/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) => updateClubDetail(updatedData), - onSuccess: async () => { - await queryClient.invalidateQueries({ - queryKey: ['clubDetail'], - }); - }, - onError: (error) => { console.error('Error updating club detail:', error); }, diff --git a/frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx b/frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx index aadeaee16..cefff5f05 100644 --- a/frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx +++ b/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 ( preview X ); -}; \ No newline at end of file +}; diff --git a/frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx b/frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx index f17006307..ba4564425 100644 --- a/frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx +++ b/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(null); const onSuccessUploadImage = (data: string) => { @@ -39,4 +37,4 @@ export const ImageUpload = ({ ); }; -export default ImageUpload; \ No newline at end of file +export default ImageUpload; diff --git a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts index fc002ac27..e9cdd2161 100644 --- a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts +++ b/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; `; diff --git a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx index d360deb6b..9bad8329f 100644 --- a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx +++ b/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(); + const { mutate: updateClub } = useUpdateClubDetail(); const { mutate: updateClubDescription } = useUpdateClubDescription(); + const { mutate: updateFeedImages } = useUpdateFeedImages(); const [recruitmentStart, setRecruitmentStart] = useState(null); const [recruitmentEnd, setRecruitmentEnd] = useState(null); const [recruitmentTarget, setRecruitmentTarget] = useState(''); const [description, setDescription] = useState(''); + const [imageList, setImageList] = useState([]); const textareaRef = useRef(null); @@ -42,13 +47,6 @@ const RecruitEditTab = () => { }, 0); }; - const MAX_IMAGES = 5; - const TEMP_CLUB_ID = '67d5529c1b38fc41fad7660a'; - - const [imageList, setImageList] = useState([]); - - 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 (
@@ -209,8 +207,9 @@ const RecruitEditTab = () => { + +

활동 사진 편집

-

활동 사진 편집

{imageList.map((image, index) => ( void; +} + +export interface ImagePreviewProps { + image: string; + onDelete: () => void; +}