Merge pull request #104 from CHZZK-Study/dev

dev to main

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/bid/Bid.test.tsx

@@ -25,6 +25,7 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     sellerNickname: 'aaron93',
     status: 'PROCEEDING',
     timeRemaining: 25816,
+    category: 'ELECTRONICS',
   },
 });
 

src/components/bid/EditBid.test.tsx

@@ -25,6 +25,7 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     sellerNickname: 'aaron93',
     status: 'PROCEEDING',
     timeRemaining: 25816,
+    category: 'ELECTRONICS',
   },
 });
 const router = createMemoryRouter(

src/components/details/BuyersFooter.tsx

@@ -5,11 +5,17 @@ interface BuyersFooterProps {
   auctionId: number;
   isSeller: boolean;
   status: string;
-  isParticipating: boolean;
-  remainingBidCount: number;
+  isParticipated: boolean;
+  remainingBidCount?: number;
 }
 
-const BuyersFooter: React.FC<BuyersFooterProps> = ({ auctionId, isSeller, status, isParticipating, remainingBidCount }) => {
+const BuyersFooter: React.FC<BuyersFooterProps> = ({
+  auctionId,
+  isSeller,
+  status,
+  isParticipated,
+  remainingBidCount,
+}) => {
   const navigate = useNavigate();
 
   const onMoveToBidHandler = () => {
@@ -21,41 +27,58 @@ const BuyersFooter: React.FC<BuyersFooterProps> = ({ auctionId, isSeller, status
 
   // 1. 판매자가 아니면서 경매 아이템이 PENDING일 경우
   if (status === 'PENDING') {
-    return <div className='p-2 text-center bg-gray-200 rounded-lg'>오픈 알림 받기</div>;
+    return (
+      <div className='p-2 text-center bg-gray-200 rounded-lg'>
+        오픈 알림 받기
+      </div>
+    );
   }
 
   // 2. 판매자가 아니면서 경매 아이템이 PROCEEDING이고, 아직 참여하지 않았을 경우
-  if (status === 'PROCEEDING' && !isParticipating) {
+  if (status === 'PROCEEDING' && !isParticipated) {
     return (
-      <button className='w-full px-4 py-2 text-white transition-colors bg-orange-500 rounded-lg hover:bg-orange-600' onClick={onMoveToBidHandler}>
+      <button
+        className='w-full px-4 py-2 text-white transition-colors bg-orange-500 rounded-lg hover:bg-orange-600'
+        onClick={onMoveToBidHandler}
+      >
         경매 참여하기
       </button>
     );
   }
 
   // 3. 판매자가 아니면서 경매 아이템이 PROCEEDING이고, 경매에 참여했으면서 가격 수정 횟수가 남아있을 때
-  if (status === 'PROCEEDING' && isParticipating && remainingBidCount > 0) {
+  if (status === 'PROCEEDING' && isParticipated && remainingBidCount && remainingBidCount > 0) {
     return (
       <div className='flex items-center justify-between p-2 rounded-lg'>
-        <button className='px-4 py-2 text-gray-600 border border-gray-400 rounded-lg'>참여 취소</button>
-        <button className='px-4 py-2 text-white transition-colors bg-orange-500 rounded-lg hover:bg-orange-600'>금액 수정({remainingBidCount}회 가능)</button>
+        <button className='px-4 py-2 text-gray-600 border border-gray-400 rounded-lg'>
+          참여 취소
+        </button>
+        <button className='px-4 py-2 text-white transition-colors bg-orange-500 rounded-lg hover:bg-orange-600'>
+          금액 수정({remainingBidCount}회 가능)
+        </button>
       </div>
     );
   }
 
   // 4. 판매자가 아니면서 경매 아이템이 PROCEEDING이고, 경매에 참여했으면서 가격 수정 횟수가 모두 소진됐을 때
-  if (status === 'PROCEEDING' && isParticipating && remainingBidCount === 0) {
+  if (status === 'PROCEEDING' && isParticipated && remainingBidCount === 0) {
     return (
       <div className='flex items-center justify-between p-2 rounded-lg'>
-        <button className='px-4 py-2 text-gray-600 border border-gray-400 rounded-lg'>참여 취소</button>
-        <button className='px-4 py-2 text-white bg-gray-400 rounded-lg cursor-not-allowed'>금액 수정(소진)</button>
+        <button className='px-4 py-2 text-gray-600 border border-gray-400 rounded-lg'>
+          참여 취소
+        </button>
+        <button className='px-4 py-2 text-white bg-gray-400 rounded-lg cursor-not-allowed'>
+          금액 수정(소진)
+        </button>
       </div>
     );
   }
 
   // 5. 경매가 종료되었을 때
-  if (status === 'COMPLETED') {
-    return <div className='p-2 text-center bg-gray-300 rounded-lg'>종료된 경매</div>;
+  if (status === 'ENDED') {
+    return (
+      <div className='p-2 text-center bg-gray-300 rounded-lg'>종료된 경매</div>
+    );
   }
 
   return null;

src/components/details/SellersFooter.tsx

@@ -4,7 +4,7 @@ import { AiOutlineHeart } from 'react-icons/ai';
 
 interface SellersFooterProps {
   isSeller: boolean;
-  status: string;
+  status?: string;
 }
 
 const SellersFooter: React.FC<SellersFooterProps> = ({ isSeller, status }) => {

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/CategoryList.tsx

@@ -1,4 +1,4 @@
-import { categories } from '../../constants/categories';
+import { CATEGORIES } from '../../constants/categories';
 import { useNavigate } from 'react-router-dom';
 
 const CategoryItem = ({ code, name, icon }: { code: string; name: string; icon: string }) => {
@@ -18,7 +18,7 @@ const CategoryItem = ({ code, name, icon }: { code: string; name: string; icon:
 const CategoryList = () => {
   return (
     <ul className='flex flex-wrap items-center gap-5'>
-      {Object.values(categories).map((el) => (
+      {Object.values(CATEGORIES).map((el) => (
         <CategoryItem key={el.value} code={el.code} name={el.value} icon={el.icon} />
       ))}
     </ul>

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/categories.ts

@@ -5,47 +5,47 @@ import FurnitureInteriorIcon from '@/assets/categories/4_interior.svg';
 import BooksMediaIcon from '@/assets/categories/5_book.svg';
 import SportsLeisureIcon from '@/assets/categories/6_sports.svg';
 import ToysHobbiesIcon from '@/assets/categories/7_toy.svg';
-import OthersIcon from '@/assets/categories/8_etc.svg';
+import OtherIcon from '@/assets/categories/8_etc.svg';
 
-export const categories = Object.freeze({
-  Electronics: {
+export const CATEGORIES: { [key: string]: { value: string; code: string; icon: string } } = Object.freeze({
+  ELECTRONICS: {
     value: '전자기기',
     code: 'ELECTRONICS',
     icon: ElectronicsIcon,
   },
-  HomeAppliances: {
+  HOME_APPLIANCES: {
     value: '가전제품',
     code: 'HOME_APPLIANCES',
     icon: HomeAppliancesIcon,
   },
-  FashionClothing: {
+  FASHION_AND_CLOTHING: {
     value: '패션 및 의류',
     code: 'FASHION_AND_CLOTHING',
     icon: FashionClothingIcon,
   },
-  FurnitureInterior: {
+  FURNITURE_AND_INTERIOR: {
     value: '가구 및 인테리어',
     code: 'FURNITURE_AND_INTERIOR',
     icon: FurnitureInteriorIcon,
   },
-  BooksMedia: {
+  BOOKS_AND_MEDIA: {
     value: '도서 및 미디어',
     code: 'BOOKS_AND_MEDIA',
     icon: BooksMediaIcon,
   },
-  SportsLeisure: {
+  SPORTS_AND_LEISURE: {
     value: '스포츠 및 레저',
     code: 'SPORTS_AND_LEISURE',
     icon: SportsLeisureIcon,
   },
-  ToysHobbies: {
+  TOYS_AND_HOBBIES: {
     value: '장난감 및 취미',
     code: 'TOYS_AND_HOBBIES',
     icon: ToysHobbiesIcon,
   },
-  Others: {
+  OTHER: {
     value: '기타',
     code: 'OTHER',
-    icon: OthersIcon,
+    icon: OtherIcon,
   },
 });

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/mocks/data/auctionDetailsData.ts

@@ -19,6 +19,7 @@ export const auctionDetailsData: IAuctionDetails[] = [
     sellerNickname: 'aaron93',
     status: 'PROCEEDING',
     timeRemaining: 25816,
+    category: 'ELECTRONICS',
   },
   {
     bidAmount: 0,
@@ -36,5 +37,6 @@ export const auctionDetailsData: IAuctionDetails[] = [
     sellerNickname: 'aaron93',
     status: 'PROCEEDING',
     timeRemaining: 25816,
+    category: 'ELECTRONICS',
   },
 ];