feat: 사전 등록 수정 기능

src/@types/AuctionDetails.d.ts

@@ -7,6 +7,7 @@ declare module 'AuctionDetails' {
     minPrice: number;
     imageUrls: string[];
     isSeller: boolean;
+    category: string;
   }
 
   export interface IAuctionDetails extends IAuctionDetailsBase {

src/@types/Register.d.ts

@@ -3,7 +3,7 @@ declare module 'Register' {
     productName: string;
     description: string;
     minPrice: number;
-    auctionRegisterType: string;
+    auctionRegisterType?: string;
     category: string;
   }
 }

src/components/details/queries.ts

@@ -23,6 +23,8 @@ export const useGetAuctionDetails = (auctionId: number) => {
 };
 
 export const useGetPreAuctionDetails = (preAuctionId: number) => {
+  if (!preAuctionId) return { preAuctionDetails: undefined };
+
   const getPreAuctionDetails = async (): Promise<IPreAuctionDetails> => {
     const response = await httpClient.get(`${API_END_POINT.PRE_AUCTION}/${preAuctionId}`);
 

src/components/home/HomeAuctionItem.tsx

@@ -6,14 +6,15 @@ import ParticipantCount from '../common/atomic/ParticipantCount';
 import TimeLabel from '../common/atomic/TimeLabel';
 import { truncateText } from '@/utils/truncateText';
 import { useNavigate } from 'react-router-dom';
+import ROUTERS from '@/constants/route';
 import { CarouselItem } from '../ui/carousel';
 
 type HomeAuctionItemProps<T> = T extends 'preAuction' ? { kind: 'preAuction'; auction: IPreAuctionItem } : { kind: 'auction'; auction: IAuctionItem };
 
 const HomeAuctionItem = <T extends 'preAuction' | 'auction'>({ kind, auction }: HomeAuctionItemProps<T>) => {
   const navigate = useNavigate();
   const { productName, imageUrl, minPrice } = auction;
-  const handleClick = () => navigate(kind === 'auction' ? `/auctions/auction/${auction.auctionId}` : `/auctions/pre-auction/${auction.productId}`);
+  const handleClick = () => navigate(kind === 'auction' ? `${ROUTERS.AUCTION.ITEM}/${auction.auctionId}` : `${ROUTERS.PRE_AUCTION.ITEM}/${auction.productId}`);
   const name = truncateText(productName);
 
   return (

src/components/register/quries.ts

@@ -8,6 +8,8 @@ import { toast } from 'sonner';
 export const usePostRegister = (): {
   mutate: UseMutateFunction<unknown, Error, FormData, unknown>;
 } => {
+  const navigate = useNavigate();
+
   const postRegister = async (formData: FormData) => {
     await httpClient.post(`${API_END_POINT.AUCTIONS}`, formData, {
       headers: {
@@ -16,12 +18,43 @@ export const usePostRegister = (): {
     });
   };
 
+  const { mutate } = useMutation({
+    mutationFn: postRegister,
+    onSuccess: () => {
+      toast.success('경매가 등록되었습니다.');
+      navigate('/');
+    },
+  });
+
+  return { mutate };
+};
+
+export const usePatchPreAuction = (): {
+  mutate: UseMutateFunction<
+    void,
+    Error,
+    {
+      preAuctionId: number;
+      formData: FormData;
+    },
+    unknown
+  >;
+} => {
   const navigate = useNavigate();
 
+  const patchPreAuction = async ({ preAuctionId, formData }: { preAuctionId: number; formData: FormData }) => {
+    await httpClient.patch(`${API_END_POINT.PRE_AUCTION}/${preAuctionId}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  };
+
   const { mutate } = useMutation({
-    mutationFn: postRegister,
+    mutationFn: patchPreAuction,
     onSuccess: () => {
-      navigate('/'), toast.success('경매가 등록되었습니다.');
+      toast.success('사전 경매가 수정되었습니다.');
+      navigate('/');
     },
   });
 

src/constants/route.ts

@@ -16,7 +16,7 @@ const ROUTERS = Object.freeze({
   },
   PRE_AUCTION: {
     ITEM: '/auctions/pre-auction',
-    EDIT: '/products',
+    EDIT: '/auctions/pre-auction/edit',
   },
   ADDRESSBOOK: '/addressbook',
   BID: '/auctions/bid/:auctionId',

src/pages/PreAuctionDetails.tsx

@@ -13,22 +13,11 @@ import ConfirmationModal from '@/components/details/ConfirmationModal';
 import SuccessModal from '@/components/details/SuccessModal';
 import { useGetPreAuctionDetails } from '@/components/details/queries';
 
-// interface PreAuctionDetails {
-//   productId: number;
-//   productName: string;
-//   sellerNickname: string;
-//   minPrice: number;
-//   createdAt: string;
-//   description: string;
-//   likeCount: number;
-//   isLiked: boolean;
-//   isSeller: boolean;
-//   imageUrls: string[];
-// }
-
 const PreAuction = () => {
   const preAuctionId = useLoaderData() as number;
   const { preAuctionDetails } = useGetPreAuctionDetails(preAuctionId);
+  if (!preAuctionDetails) return;
+
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
   const [isDeleteSuccessOpen, setIsDeleteSuccessOpen] = useState(false);
@@ -63,6 +52,10 @@ const PreAuction = () => {
     closeMenu();
   };
 
+  const onModifyButtonClickHandler = () => {
+    navigate(`/auctions/pre-auction/edit/${preAuctionDetails.productId}`);
+  };
+
   // 삭제 확인 다이얼로그에서 '삭제' 버튼 클릭 핸들러
   const handleConfirmDelete = async () => {
     try {

src/pages/Register.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunction, useNavigate } from 'react-router-dom';
+import { LoaderFunction, useLoaderData, useNavigate } from 'react-router-dom';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
@@ -16,14 +16,16 @@ import { Textarea } from '@/components/ui/textarea';
 import { categories } from '@/constants/categories';
 import { convertCurrencyToNumber } from '@/utils/convertCurrencyToNumber';
 import { useEditableNumberInput } from '@/hooks/useEditableNumberInput';
-import { usePostRegister } from '@/components/register/quries';
+import { usePatchPreAuction, usePostRegister } from '@/components/register/quries';
 import { useState } from 'react';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useGetPreAuctionDetails } from '@/components/details/queries';
+import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
 
 type FormFields = z.infer<typeof RegisterSchema>;
 
-const defaultValues = {
+const defaultValues: FormFields = {
   productName: '',
   images: [],
   category: '',
@@ -32,7 +34,19 @@ const defaultValues = {
 };
 
 const Register = () => {
-  // const preAuctionId = useLoaderData() as number;
+  const preAuctionId = useLoaderData() as number;
+  const { preAuctionDetails } = useGetPreAuctionDetails(preAuctionId);
+  const { mutate: patchPreAuction } = usePatchPreAuction();
+
+  if (preAuctionDetails) {
+    const { productName, imageUrls, category, description, minPrice } = preAuctionDetails;
+    defaultValues.productName = productName;
+    defaultValues.images = imageUrls;
+    defaultValues.description = description;
+    defaultValues.minPrice = formatCurrencyWithWon(minPrice);
+    defaultValues.category = category;
+  }
+
   const navigate = useNavigate();
   const [caution, setCaution] = useState<string>('');
   const [check, setCheck] = useState<boolean>(false);
@@ -56,7 +70,7 @@ const Register = () => {
     getValues,
   });
 
-  const title = caution === '' ? '경매 등록하기' : `주의사항`;
+  const title = caution === '' ? `${preAuctionId ? '사전 경매 수정하기' : '경매 등록하기'}` : `주의사항`;
   const cautionButton = caution === 'REGISTER' ? '바로 등록하기' : '사전 등록하기';
   const finalButton = isSubmitting ? '등록 중...' : cautionButton;
 
@@ -73,23 +87,25 @@ const Register = () => {
     const { productName, category, description, minPrice } = data;
     const formData = new FormData();
 
-    const registerData: IRegister = {
+    let submitData: IRegister = {
       productName,
       category,
       description,
       minPrice: convertCurrencyToNumber(minPrice),
-      auctionRegisterType: caution,
     };
+    if (!preAuctionId) submitData.auctionRegisterType = caution;
 
     formData.append(
       'request',
-      new Blob([JSON.stringify(registerData)], {
+      new Blob([JSON.stringify(submitData)], {
         type: 'application/json',
       })
     );
 
     files.forEach((file) => formData.append('images', file));
-    register(formData);
+
+    if (preAuctionId) patchPreAuction({ preAuctionId, formData });
+    else register(formData);
   };
 
   return (
@@ -177,7 +193,11 @@ const Register = () => {
         )}
       </Layout.Main>
       <Layout.Footer type={caution === '' ? 'double' : 'single'}>
-        {caution === '' ? (
+        {preAuctionId ? (
+          <Button disabled={isSubmitting} onClick={handleSubmit(onSubmit)} type='button' color='cheeseYellow' className='w-full h-full'>
+            수정 완료
+          </Button>
+        ) : caution === '' ? (
           <>
             <Button type='button' color='white' className='flex-1 h-full' onClick={() => handleProceed('PRE_REGISTER')}>
               사전 등록하기