Merge pull request #204 from prgrms-web-devcourse-final-project/refac…

…tor/#184

Refactor/#184

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()

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<GoodsDetail>
 }

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;

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 (
     <div>
       {/* 직관 모임 등록 프로세스 영역 */}
@@ -53,7 +57,7 @@ const ProgressSection = ({
           disabled={isDisabled}
           $isDisabled={isDisabled}
         >
-          {isFinalTab ? '상품 등록하기' : '다음'}
+          {isFinalTab ? lastTabButtonText : '다음'}
         </Button>
       </ButtonContainer>
     </div>

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) => {

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) => {

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) => {

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) => {

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,
   })
 

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 (
     <>
       <SubGlobalContainer>
-        <ToastContainer />
         <Outlet />
       </SubGlobalContainer>
     </>

src/main.tsx

@@ -11,22 +11,22 @@ import App from './App'
 import 'react-toastify/ReactToastify.css'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <SkeletonTheme
-          baseColor='#313131'
-          highlightColor='#525252'
-        >
-          <ToastContainer
-            position='top-center'
-            autoClose={3000}
-            closeOnClick
-          />
-          <GlobalStyle />
-          <App />
-        </SkeletonTheme>
-      </ThemeProvider>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <SkeletonTheme
+        baseColor='#313131'
+        highlightColor='#525252'
+      >
+        <ToastContainer
+          position='top-center'
+          autoClose={3000}
+          closeOnClick
+        />
+        <GlobalStyle />
+        <App />
+      </SkeletonTheme>
+    </ThemeProvider>
+  </QueryClientProvider>,
+  // </StrictMode>,
 )

src/pages/ChatRoom/Rooms/GoodsChatRoom/index.tsx

@@ -254,7 +254,7 @@ const GoodsChatRoom = () => {
         {...currentAlertMessage()}
         handleAlertClick={alertHandler}
       />
-      <ToastContainer />
+      <ToastContainer position='top-center' />
     </>
   )
 }

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}
       />
-      <ToastContainer />
+      <ToastContainer position='top-center' />
     </>
   )
 }

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 },

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<number>(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}
       />
+      <ToastContainer position='top-center' />
     </section>
   )
 }

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;
   }
 `

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 (
     <ImageCardContainer>