From b3b4c8fc791855c7c709c0ac493eee5d45fa64d0 Mon Sep 17 00:00:00 2001 From: seongwon030 <105052068+seongwon030@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:55:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=ED=94=84=EB=A6=AC=EB=B7=B0=20in?= =?UTF-8?q?terface=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ImagePreview/ImagePreview.tsx | 11 +++-------- .../AdminPage/components/ImageUpload/ImageUpload.tsx | 8 +++----- frontend/src/types/club.ts | 10 ++++++++++ 3 files changed, 16 insertions(+), 13 deletions(-) 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/types/club.ts b/frontend/src/types/club.ts index c445021c3..1cc985aa5 100644 --- a/frontend/src/types/club.ts +++ b/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; +} From 8b74d7f374ee2d44133ce17ddee21022e2c4190c Mon Sep 17 00:00:00 2001 From: seongwon030 <105052068+seongwon030@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:56:13 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=20import=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx b/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx index e3fb8a8ab..9243c6f92 100644 --- a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx +++ b/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'; From 35e40d0426d5a18a727e832e7e644c18a809f79d Mon Sep 17 00:00:00 2001 From: seongwon030 <105052068+seongwon030@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:56:56 +0900 Subject: [PATCH 3/5] =?UTF-8?q?style:=20gap=2037->15px=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - margin-top 제거 --- .../AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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; `; From 7da87d3c3eb30c65c301f5c935535ec295d10339 Mon Sep 17 00:00:00 2001 From: seongwon030 <105052068+seongwon030@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:57:25 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactore:=20invalidateQuries=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/hooks/queries/club/useUpdateClubDescription.ts | 10 +--------- frontend/src/hooks/queries/club/useUpdateClubDetail.ts | 10 +--------- 2 files changed, 2 insertions(+), 18 deletions(-) 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); }, From 54c851a945b7997e1e8e513bd69ec6814700b2ca Mon Sep 17 00:00:00 2001 From: seongwon030 <105052068+seongwon030@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:57:57 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=ED=95=A8=EC=88=98=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/RecruitEditTab/RecruitEditTab.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) 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) => (