diff --git a/src/apis/matePostService.ts b/src/apis/matePostService.ts index fe67900..0bc9a33 100644 --- a/src/apis/matePostService.ts +++ b/src/apis/matePostService.ts @@ -25,22 +25,16 @@ const matePostService = { return response.data }, - editMatePost: async ( - memberId: number, - matePostId: number, - formData: FormData, - ) => { + editMatePost: async (matePostId: number, formData: FormData) => { const response = await fetchApi - .patch(`mates/${memberId}/${matePostId}`, { body: formData }) + .put(`mates/${matePostId}`, { body: formData }) .json() return response }, - deleteMatePost: async (memberId: number, matePostId: string) => { - const response = await fetchApi - .delete(`mates/${memberId}/${matePostId}`) - .json() + deleteMatePost: async (matePostId: string) => { + const response = await fetchApi.delete(`mates/${matePostId}`).json() return response }, @@ -62,12 +56,11 @@ const matePostService = { */ completeRecruitmentMatePost: async ( - memberId: number, matePostId: number, data: { status: string; participantIds: number[] }, ) => { const response = await fetchApi - .patch(`mates/${memberId}/${matePostId}/status`, { + .patch(`mates/${matePostId}/status`, { json: data, }) .json() @@ -89,12 +82,11 @@ const matePostService = { */ completeMatePost: async ( - memberId: number, matePostId: number, data: { participantIds: number[] }, ) => { const response = await fetchApi - .patch(`mates/${memberId}/${matePostId}/complete`, { + .patch(`mates/${matePostId}/complete`, { json: data, }) .json() diff --git a/src/components/GoodsListCard/index.tsx b/src/components/GoodsListCard/index.tsx index f51fd3f..8c264b1 100644 --- a/src/components/GoodsListCard/index.tsx +++ b/src/components/GoodsListCard/index.tsx @@ -12,7 +12,6 @@ import { formatPriceWithComma } from '@utils/formatPrice' import Placeholder from '@components/Placeholder' import { useNavigate } from 'react-router-dom' - interface GoodsListCardProps { goodsPost: Partial } diff --git a/src/components/GoodsListCard/style.ts b/src/components/GoodsListCard/style.ts index a5ac7f6..84c4794 100644 --- a/src/components/GoodsListCard/style.ts +++ b/src/components/GoodsListCard/style.ts @@ -35,6 +35,7 @@ export const ContentWrapper = styled.div` export const GoodsListCardContainer = styled.div` width: 100%; + & > div:first-child { display: flex; flex-direction: column; diff --git a/src/components/ProgressSection/index.tsx b/src/components/ProgressSection/index.tsx index ec56b65..b2bb760 100644 --- a/src/components/ProgressSection/index.tsx +++ b/src/components/ProgressSection/index.tsx @@ -1,3 +1,4 @@ +import { useLocation } from 'react-router-dom' import { Button, ButtonContainer, @@ -29,6 +30,9 @@ const ProgressSection = ({ }: ProgressSectionProps) => { const handleClick = isFinalTab ? handleSubmit : handleNext + const { pathname } = useLocation() + + const lastTabButtonText = pathname.includes('edit') ? '수정하기' : '등록하기' return (
{/* 직관 모임 등록 프로세스 영역 */} @@ -53,7 +57,7 @@ const ProgressSection = ({ disabled={isDisabled} $isDisabled={isDisabled} > - {isFinalTab ? '상품 등록하기' : '다음'} + {isFinalTab ? lastTabButtonText : '다음'}
diff --git a/src/hooks/useEditGoodsPost.ts b/src/hooks/useEditGoodsPost.ts index 8e1dc45..2bf920d 100644 --- a/src/hooks/useEditGoodsPost.ts +++ b/src/hooks/useEditGoodsPost.ts @@ -18,7 +18,13 @@ const useEditGoodsPost = ({ goodsPostId }: UseEditGoodsPostProps) => { onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GOODS_LIST] }) - navigate(ROUTE_PATH.GOODS_LIST) + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY.GOODS_POST, goodsPostId.toString()], + }) + + navigate(ROUTE_PATH.GOODS_LIST, { + state: { isEditSuccess: true }, + }) }, onSettled: (data, error) => { diff --git a/src/hooks/useEditMatePost.ts b/src/hooks/useEditMatePost.ts index 9e2de95..51f8b4d 100644 --- a/src/hooks/useEditMatePost.ts +++ b/src/hooks/useEditMatePost.ts @@ -14,22 +14,28 @@ import { ROUTE_PATH } from '@constants/ROUTE_PATH' */ interface UseEditMatePostProps { - memberId: number matePostId: number } -const useEditMatePost = ({ memberId, matePostId }: UseEditMatePostProps) => { +const useEditMatePost = ({ matePostId }: UseEditMatePostProps) => { const navigate = useNavigate() const { mutate, isPending, isError, error } = useMutation({ mutationFn: async (formData: FormData) => - matePostService.editMatePost(memberId, matePostId, formData), + matePostService.editMatePost(matePostId, formData), onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MATE_POST, matePostId], }) - navigate(ROUTE_PATH.MATE_LIST) + + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY.MATE_LIST], + }) + + navigate(ROUTE_PATH.MATE_LIST, { + state: { isEditSuccess: true }, + }) }, onSettled: (data, error) => { diff --git a/src/hooks/usePostGoodsPost.ts b/src/hooks/usePostGoodsPost.ts index 0d6f68d..5755cf7 100644 --- a/src/hooks/usePostGoodsPost.ts +++ b/src/hooks/usePostGoodsPost.ts @@ -3,6 +3,7 @@ import goodsPostService from '@apis/goodsPostService' import { useNavigate } from 'react-router-dom' import { ROUTE_PATH } from '@constants/ROUTE_PATH' import queryClient, { QUERY_KEY } from '@apis/queryClient' +import { toast } from 'react-toastify' /** * 굿즈 게시글 등록 및 수정 요청 훅 @@ -23,7 +24,10 @@ const usePostGoodsPost = () => { onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GOODS_LIST] }) - navigate(ROUTE_PATH.GOODS_LIST) + + navigate(ROUTE_PATH.GOODS_LIST, { + state: { isPostSuccess: true }, + }) }, onSettled: (data, error) => { diff --git a/src/hooks/usePostMatePost.ts b/src/hooks/usePostMatePost.ts index ae3dfa5..1b6bb5f 100644 --- a/src/hooks/usePostMatePost.ts +++ b/src/hooks/usePostMatePost.ts @@ -14,7 +14,9 @@ const usePostMatePost = () => { onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MATE_LIST] }) - navigate(ROUTE_PATH.MATE_LIST) + navigate(ROUTE_PATH.MATE_LIST, { + state: { isPostSuccess: true }, + }) }, onSettled: (data, error) => { diff --git a/src/hooks/usegetMatePost.ts b/src/hooks/usegetMatePost.ts index 0a3af9c..89f19da 100644 --- a/src/hooks/usegetMatePost.ts +++ b/src/hooks/usegetMatePost.ts @@ -5,7 +5,8 @@ import { QUERY_KEY } from '@apis/queryClient' const useGetMatePost = (matePostId: number) => { const { data, isLoading, isError, error } = useQuery({ queryKey: [QUERY_KEY.MATE_POST, matePostId], - queryFn: () => matePostService.getMatePost(matePostId), + queryFn: () => matePostService.getMatePost(matePostId.toString()), + enabled: !!matePostId, }) diff --git a/src/layouts/SubLayout/index.tsx b/src/layouts/SubLayout/index.tsx index f181142..d27d46e 100644 --- a/src/layouts/SubLayout/index.tsx +++ b/src/layouts/SubLayout/index.tsx @@ -1,12 +1,10 @@ import { SubGlobalContainer } from '@styles/globalStyle' import { Outlet } from 'react-router-dom' -import { ToastContainer } from 'react-toastify' const SubLayout = () => { return ( <> - diff --git a/src/main.tsx b/src/main.tsx index cd234b0..2d208bd 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,22 +11,22 @@ import App from './App' import 'react-toastify/ReactToastify.css' createRoot(document.getElementById('root')!).render( - - - - - - - - - - - , + // + + + + + + + + + , + // , ) diff --git a/src/pages/ChatRoom/Rooms/GoodsChatRoom/index.tsx b/src/pages/ChatRoom/Rooms/GoodsChatRoom/index.tsx index b9b5659..44909b7 100644 --- a/src/pages/ChatRoom/Rooms/GoodsChatRoom/index.tsx +++ b/src/pages/ChatRoom/Rooms/GoodsChatRoom/index.tsx @@ -254,7 +254,7 @@ const GoodsChatRoom = () => { {...currentAlertMessage()} handleAlertClick={alertHandler} /> - + ) } diff --git a/src/pages/ChatRoom/Rooms/MateChatRoom/index.tsx b/src/pages/ChatRoom/Rooms/MateChatRoom/index.tsx index 2b52733..beeb8f4 100644 --- a/src/pages/ChatRoom/Rooms/MateChatRoom/index.tsx +++ b/src/pages/ChatRoom/Rooms/MateChatRoom/index.tsx @@ -2,16 +2,16 @@ import { useModal } from '@hooks/useModal' import { EnterChatMessage, MateChatCardContainer } from '../../style' import { GlobalFloatAside } from '@styles/globalStyle' -import ChatInput from '@pages/ChatRoom/ChatInput' import BottomModal from '@components/BottomModal' import Alert from '@components/Alert' import MateModalContent from './MateModalContent' import ALERT_MESSAGE from '@constants/alertMessage' +import { transformMatePostToCardData } from '@utils/formatPostData' + import { useMateChatStore } from '@store/useMateChatStore' import useGetMatePost from '@hooks/usegetMatePost' -import { transformMatePostToCardData } from '@utils/formatPostData' import { useLocation, useParams } from 'react-router-dom' import { useQuery } from '@tanstack/react-query' import mateChatService from '@apis/mateChatService' @@ -278,7 +278,7 @@ const MateChatRoom = () => { {...currentAlertMessage()} handleAlertClick={handleAlertAction} /> - + ) } diff --git a/src/pages/GoodsDetailPage/index.tsx b/src/pages/GoodsDetailPage/index.tsx index 7e9bb5f..986b79e 100644 --- a/src/pages/GoodsDetailPage/index.tsx +++ b/src/pages/GoodsDetailPage/index.tsx @@ -2,7 +2,6 @@ import { Swiper, SwiperSlide } from 'swiper/react' import { Pagination } from 'swiper/modules' import { GoodsBedgeWrap, - GoodsBottomButton, GoodsBottomButtonWrap, GoodsBottomWrap, GoodsDetailMapInner, @@ -22,7 +21,6 @@ import 'swiper/css/pagination' import UserInfoList from '@components/UserInfoList' import CardBedge from '@components/CardBedge' import { GlobalFloatAside } from '@styles/globalStyle' -import { useEffect, useState } from 'react' import SubHeader from '@layouts/SubHeader' import { useLocation, useNavigate, useParams } from 'react-router-dom' @@ -37,7 +35,6 @@ import { useGoodsFormStore } from '@store/useGoodsFormStore' import Alert from '@components/Alert' import ALERT_MESSAGE from '@constants/alertMessage' import { useModal } from '@hooks/useModal' -import goodsChatService from '@apis/goodsChatService' import KakaoMapContainer from './KakaoMapContainer' import GoodsHostButton from './GoodsHostButton' import GoodsVisitorButton from './GoodsVisitorButton' @@ -86,7 +83,9 @@ const GoodsDetailPage = () => { onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GOODS_LIST] }) - navigate(ROUTE_PATH.GOODS_LIST) + navigate(ROUTE_PATH.GOODS_LIST, { + state: { isDeleteSuccess: true }, + }) }, }) @@ -125,7 +124,7 @@ const GoodsDetailPage = () => { const { goods, imageList } = formattedData setGoods(goods) - setImageList(imageList) + setImageList(imageList as unknown as File[]) navigate(`${pathname}/edit`, { state: { isEdit: true, goodsPostId: data.id }, diff --git a/src/pages/GoodsListPage/index.tsx b/src/pages/GoodsListPage/index.tsx index bc56b5e..a323629 100644 --- a/src/pages/GoodsListPage/index.tsx +++ b/src/pages/GoodsListPage/index.tsx @@ -10,6 +10,8 @@ import { QUERY_KEY } from '@apis/queryClient' import PillButton from '@components/PillButton' import { useInView } from 'react-intersection-observer' import { useTopRef } from '@hooks/useTopRef' +import { toast, ToastContainer } from 'react-toastify' +import { useLocation } from 'react-router-dom' import { kboTeamList } from '@constants/kboInfo' const CATEGORY_LIST = ['전체', '유니폼', '모자', '의류', '잡화', '기념상품'] @@ -23,6 +25,23 @@ const GoodsListPage = () => { const [selectedTeam, setSelectedTeam] = useState(initialTeam) const [selectedCategory, setSelectedCategory] = useState('전체') + const location = useLocation() + + useEffect(() => { + const isPostSuccess = location.state?.isPostSuccess + const isEditSuccess = location.state?.isEditSuccess + const isDeleteSuccess = location.state?.isDeleteSuccess + if (isPostSuccess) { + toast.success('굿즈 게시글 등록이 완료되었습니다.') + } + + if (isEditSuccess) { + toast.success('굿즈 게시글 수정이 완료되었습니다.') + } + if (isDeleteSuccess) { + toast.success('굿즈 게시글 삭제가 완료되었습니다.') + } + }, [location.state]) const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ @@ -36,7 +55,7 @@ const GoodsListPage = () => { getNextPageParam: (lastPage) => lastPage.hasNext ? lastPage.pageNumber + 1 : undefined, - placeholderData: keepPreviousData, + placeholderData: keepPreviousData, }) const { ref, inView } = useInView() @@ -87,6 +106,7 @@ const GoodsListPage = () => { path={ROUTE_PATH.GOODS_POSTING} handleUpButtonClick={handleUpButtonClick} /> + ) } diff --git a/src/pages/GoodsPostingPage/Tabs/FirstTab/DescriptionSection/style.ts b/src/pages/GoodsPostingPage/Tabs/FirstTab/DescriptionSection/style.ts index 59b903e..c94740b 100644 --- a/src/pages/GoodsPostingPage/Tabs/FirstTab/DescriptionSection/style.ts +++ b/src/pages/GoodsPostingPage/Tabs/FirstTab/DescriptionSection/style.ts @@ -5,14 +5,11 @@ export const DescriptionContainer = styled(QuestionSection)` display: flex; flex-direction: column; gap: 8px; - position: relative; & > p { font-size: ${({ theme }) => theme.fontSize.small}; color: ${({ theme }) => theme.fontColor.black}; - position: absolute; - bottom: 5px; - right: 25px; + text-align: right; } ` diff --git a/src/pages/GoodsPostingPage/Tabs/FirstTab/ImageSection/ImageCard/index.tsx b/src/pages/GoodsPostingPage/Tabs/FirstTab/ImageSection/ImageCard/index.tsx index 3c24624..9960437 100644 --- a/src/pages/GoodsPostingPage/Tabs/FirstTab/ImageSection/ImageCard/index.tsx +++ b/src/pages/GoodsPostingPage/Tabs/FirstTab/ImageSection/ImageCard/index.tsx @@ -20,8 +20,8 @@ const ImageCard = ({ onDragEnd, }: ImageCardProps) => { if (image === null) return - - const formatImage = URL.createObjectURL(image) + console.log(image) + const formatImage = image instanceof File ? URL.createObjectURL(image) : image return ( diff --git a/src/pages/GoodsPostingPage/Tabs/FirstTab/ProductNameSection/style.ts b/src/pages/GoodsPostingPage/Tabs/FirstTab/ProductNameSection/style.ts index 1ad59f0..1cc6686 100644 --- a/src/pages/GoodsPostingPage/Tabs/FirstTab/ProductNameSection/style.ts +++ b/src/pages/GoodsPostingPage/Tabs/FirstTab/ProductNameSection/style.ts @@ -2,14 +2,9 @@ import styled from 'styled-components' import { QuestionSection } from '@pages/MatePostingPage/Tabs/FirstTab/style' export const ProductNameContainer = styled(QuestionSection)` - position: relative; - & > p { - width: fit-content; + text-align: right; - position: absolute; - bottom: 5px; - right: 25px; font-size: ${({ theme }) => theme.fontSize.small}; color: ${({ theme }) => theme.fontColor.black}; } diff --git a/src/pages/MateDetailPage/MateDetailAction/index.tsx b/src/pages/MateDetailPage/MateDetailAction/index.tsx index 1983c34..2ddde18 100644 --- a/src/pages/MateDetailPage/MateDetailAction/index.tsx +++ b/src/pages/MateDetailPage/MateDetailAction/index.tsx @@ -45,7 +45,6 @@ const MateDetailAction = ({ return false // 나이가 10살 미만이거나 숫자가 아니면 false } - // 나이를 범위로 변환 let userAgeGroup: string if (ageAsNumber < 10) { @@ -74,7 +73,7 @@ const MateDetailAction = ({ return isGenderMatched && isAgeMatched })() - + const totalParticipants = matePostData.currentChatMembers // 참여자 수 const { createChatRoom, createIsPending, createIsError, createError } = @@ -90,12 +89,12 @@ const MateDetailAction = ({ // 수정 버튼 클릭 핸들러 const handleEditClick = () => { - const { matePost, selectedWeek, img } = - transformMatePostToFormData(matePostData) + // const { matePost, selectedWeek, img } = + // transformMatePostToFormData(matePostData) - setMateFormData(matePost) - setSelectedWeek(selectedWeek as number) - setImg(img) + // setMateFormData(matePost) + // setSelectedWeek(selectedWeek as number) + // setImg(img) navigate(`/mate-detail/${matePostData.postId}/edit`, { state: { isEdit: true, postId: matePostData.postId }, diff --git a/src/pages/MateDetailPage/index.tsx b/src/pages/MateDetailPage/index.tsx index 5d6ec96..0e775f0 100644 --- a/src/pages/MateDetailPage/index.tsx +++ b/src/pages/MateDetailPage/index.tsx @@ -43,7 +43,6 @@ const MateDetailPage = () => { enabled: !!matePostId, }) - console.log(matePost) /** * 메이트 게시글 삭제 * @params memberId 회원 id @@ -61,11 +60,13 @@ const MateDetailPage = () => { isError: isDeleteError, error: deleteError, } = useMutation({ - mutationFn: () => matePostService.deleteMatePost(1, matePostId as string), + mutationFn: () => matePostService.deleteMatePost(matePostId as string), onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MATE_POST] }) - navigate(ROUTE_PATH.MATE_LIST) + navigate(ROUTE_PATH.MATE_LIST, { + state: { isDeleteSuccess: true }, + }) }, onSettled: (data) => { diff --git a/src/pages/MateDetailPage/style.ts b/src/pages/MateDetailPage/style.ts index ccf08d0..9da13ef 100644 --- a/src/pages/MateDetailPage/style.ts +++ b/src/pages/MateDetailPage/style.ts @@ -23,6 +23,8 @@ export const MateDetailDescription = styled.div` color: ${theme.fontColor.black}; border-radius: 4px; + min-height: 190px; + &::-webkit-scrollbar { display: none; } diff --git a/src/pages/MateListPage/index.tsx b/src/pages/MateListPage/index.tsx index d7d45cd..fbda526 100644 --- a/src/pages/MateListPage/index.tsx +++ b/src/pages/MateListPage/index.tsx @@ -18,12 +18,13 @@ import { useModal } from '@hooks/useModal' import { kboTeamList } from '@constants/kboInfo' import { getMateList } from '@apis/mateListService' -import MateCard from '@components/MateCard' import { useTopRef } from '@hooks/useTopRef' import { useInfiniteQuery, keepPreviousData } from '@tanstack/react-query' import { QUERY_KEY } from '@apis/queryClient' import { useInView } from 'react-intersection-observer' import MainMateCard from '@components/MainMateCard' +import { useLocation } from 'react-router-dom' +import { toast, ToastContainer } from 'react-toastify' const MateListPage = () => { const initialTeam = () => { @@ -47,6 +48,22 @@ const MateListPage = () => { }) const [tempFilters, setTempFilters] = useState(selectedFilters) + const location = useLocation() + + useEffect(() => { + const isPostSuccess = location.state?.isPostSuccess + const isEditSuccess = location.state?.isEditSuccess + const isDeleteSuccess = location.state?.isDeleteSuccess + if (isPostSuccess) { + toast.success('메이트 게시글 등록이 완료되었습니다.') + } + if (isEditSuccess) { + toast.success('메이트 게시글 수정이 완료되었습니다.') + } + if (isDeleteSuccess) { + toast.success('메이트 게시글 삭제가 완료되었습니다.') + } + }, [location.state]) // 필터 변경 핸들러 (임시 필터) const handleTempFilterChange = (filters: Partial) => { setTempFilters((prevFilters) => ({ @@ -148,6 +165,7 @@ const MateListPage = () => { onFilterChange={handleTempFilterChange} /> + ) } diff --git a/src/pages/MatePostingPage/Tabs/FirstTab/GameButtonList/index.tsx b/src/pages/MatePostingPage/Tabs/FirstTab/GameButtonList/index.tsx index 94286c3..d0f133e 100644 --- a/src/pages/MatePostingPage/Tabs/FirstTab/GameButtonList/index.tsx +++ b/src/pages/MatePostingPage/Tabs/FirstTab/GameButtonList/index.tsx @@ -5,14 +5,19 @@ import GameList from '../GameList' import useWeeklyMatch from '@hooks/useWeeklyMatch' import { useMateFormStore } from '@store/useMateFormStore' import { GameListPlaceholder } from '../GameList/style' +import { useEffect } from 'react' +import { findWeekNumberByMatchId } from '@utils/formatPostData' +import { useLocation } from 'react-router-dom' const GameButtonList = () => { const { - matePost: { teamId }, + matePost: { teamId, matchId }, selectedWeek, setSelectedWeek, } = useMateFormStore() + const { state } = useLocation() + const handleClickGameButton = (weekIndex: number) => { setSelectedWeek(weekIndex) } @@ -21,6 +26,16 @@ const GameButtonList = () => { teamId as number, ) + useEffect(() => { + if (state?.isEdit && weeklyMatchData) { + const weekNumber = findWeekNumberByMatchId( + weeklyMatchData, + matchId as number, + ) + setSelectedWeek(weekNumber) + } + }, [weeklyMatchData]) + if (teamId === null) { return ( diff --git a/src/pages/MatePostingPage/Tabs/ThirdTab/imageSection/index.tsx b/src/pages/MatePostingPage/Tabs/ThirdTab/imageSection/index.tsx index 2db54aa..6df0528 100644 --- a/src/pages/MatePostingPage/Tabs/ThirdTab/imageSection/index.tsx +++ b/src/pages/MatePostingPage/Tabs/ThirdTab/imageSection/index.tsx @@ -11,11 +11,14 @@ const ImageSection = () => { const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] + if (file) { setImg(file) } } + const formatImage = img instanceof File ? URL.createObjectURL(img) : img + const handleDeleteImage = () => { setImg(null) } @@ -30,10 +33,10 @@ const ImageSection = () => { onChangeImage={handleImageChange} /> - {img && ( + {formatImage && ( 선택된 이미지 diff --git a/src/pages/MatePostingPage/index.tsx b/src/pages/MatePostingPage/index.tsx index ef5a905..63f7f27 100644 --- a/src/pages/MatePostingPage/index.tsx +++ b/src/pages/MatePostingPage/index.tsx @@ -13,7 +13,11 @@ import { useEffect } from 'react' import { useLocation } from 'react-router-dom' import usePostMatePost from '@hooks/usePostMatePost' import useEditMatePost from '@hooks/useEditMatePost' -import { transformMatePostToSubmitData } from '@utils/formatPostData' +import { + transformMatePostToFormData, + transformMatePostToSubmitData, +} from '@utils/formatPostData' +import useGetMatePost from '@hooks/usegetMatePost' /** * 메이트 구인글 작성 시 필요한 탭정보 @@ -47,7 +51,14 @@ type CategoryList = const MatePostingPage = () => { // 폼 상태 관리 - const { matePost, img, setInitialState } = useMateFormStore() + const { + matePost, + img, + setInitialState, + setMateFormData, + setSelectedWeek, + setImg, + } = useMateFormStore() /** * 메이트 게시글 생성 및 수정 @@ -64,6 +75,8 @@ const MatePostingPage = () => { const { state } = useLocation() const matePostId = state?.postId + const { matePost: post } = useGetMatePost(matePostId) + const { mutatePost, isPostPending, isPostError, postError } = usePostMatePost() @@ -73,6 +86,15 @@ const MatePostingPage = () => { matePostId, }) + useEffect(() => { + if (post) { + const { matePost, img } = transformMatePostToFormData(post) + + setMateFormData(matePost) + setImg(img as unknown as File) + } + }, [post]) + // 초기 상태 초기화 useEffect(() => { return () => { diff --git a/src/store/useMateFormStore.ts b/src/store/useMateFormStore.ts index 666f9b4..9e0eb88 100644 --- a/src/store/useMateFormStore.ts +++ b/src/store/useMateFormStore.ts @@ -6,7 +6,6 @@ interface MateFormStore { selectedWeek: number img: File | null - setMemberId: (memberId: number) => void setTeamId: (teamId: number) => void setMatchId: (matchId: number) => void setTitle: (title: string) => void @@ -23,7 +22,6 @@ interface MateFormStore { const initialState = { matePost: { - memberId: Number(localStorage.getItem('memberId')) || null, teamId: null, title: '', content: '', @@ -43,8 +41,6 @@ export const useMateFormStore = create((set) => ({ ...initialState, setSelectedWeek: (selectedWeek) => set(() => ({ selectedWeek })), - setMemberId: (memberId) => - set((state) => ({ matePost: { ...state.matePost, memberId } })), setMatchId: (matchId) => set((state) => ({ matePost: { ...state.matePost, matchId } })), setTitle: (title) => diff --git a/src/typings/postForm.ts b/src/typings/postForm.ts index 05fd8a2..bbfb62b 100644 --- a/src/typings/postForm.ts +++ b/src/typings/postForm.ts @@ -19,7 +19,6 @@ export interface GoodsPostForm { } export interface MatePost { - memberId: number | null teamId: number | null title: string content: string diff --git a/src/utils/formatPostData.ts b/src/utils/formatPostData.ts index f7229cf..ab65630 100644 --- a/src/utils/formatPostData.ts +++ b/src/utils/formatPostData.ts @@ -20,6 +20,16 @@ export const getTeamIdByName = (teamName: string): number => { return 0 } +export const findWeekNumberByMatchId = ( + data: any[], + targetMatchId: number, +): number => { + const week = data.find((week) => + week.matches.some((match: any) => match.id === targetMatchId), + ) + return week ? week.weekNumber : -1 +} + export const transformMatePostToFormData = (matePost: MatePostData) => { const { matchId, @@ -33,12 +43,9 @@ export const transformMatePostToFormData = (matePost: MatePostData) => { postImageUrl, } = matePost - console.log(matchId) - return { matePost: { teamId: getTeamIdByName(myTeamName), - memberId: Number(localStorage.getItem('memberId')) || 1, title, content, age, @@ -48,9 +55,7 @@ export const transformMatePostToFormData = (matePost: MatePostData) => { matchId, }, - selectedWeek: 2, - - img: new File([], postImageUrl), + img: postImageUrl, } } @@ -67,7 +72,7 @@ export const transformGoodsDetailToFormData = (goodsDetail: GoodsDetail) => { price: formatPriceWithComma(price), location, }, - imageList: imageUrls.map((imageUrl) => new File([], imageUrl)), + imageList: imageUrls, } }