Test / bid flow

src/components/bid/BidFooter.tsx

@@ -0,0 +1,47 @@
+import Button from '../common/Button';
+import { MAX_BID_COUNT } from '@/constants/bid';
+
+interface BidFooterProps {
+  remain: number;
+  check: boolean;
+  isSubmitting: boolean;
+  handlePost: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  handlePatch: () => void;
+}
+
+const BidFooter = ({ remain, check, isSubmitting, handlePost, handlePatch }: BidFooterProps) => {
+  if (remain === MAX_BID_COUNT) {
+    return (
+      <Button
+        type='button'
+        color='cheeseYellow'
+        className='w-full h-full transition-colors rounded text-button active:bg-black'
+        aria-label='제안하기 버튼'
+        onClick={handlePost}
+        disabled={!check || isSubmitting}
+      >
+        제안하기
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <Button type='button' color='white' className='flex-1 h-full transition-colors rounded text-button active:bg-black' onClick={handlePatch}>
+        참여 취소
+      </Button>
+      <Button
+        type='button'
+        color='cheeseYellow'
+        className='flex-[2] h-full rounded text-button active:bg-black transition-colors'
+        disabled={!check || isSubmitting || remain === 0}
+        onClick={handlePost}
+      >
+        금액 수정
+        {remain !== 0 ? `(${remain}회 가능)` : '(소진)'}
+      </Button>
+    </>
+  );
+};
+
+export default BidFooter;

src/constants/bid.ts

@@ -0,0 +1 @@
+export const MAX_BID_COUNT = 3;

src/constants/schema.ts

@@ -45,4 +45,22 @@ export const AddressBookSchema = z.object({
   bank: z.string().min(1, '은행을 선택해주세요.'),
 });
 
-export const BidSchema = RegisterSchema.pick({ minPrice: true });
+export const getBidSchema = (minPrice: number) =>
+  z.object({
+    bidAmount: z.string().superRefine((value, ctx) => {
+      const num = Number(value.replace(/[^\d]/g, ''));
+      if (Number.isNaN(num) || num <= minPrice) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `시작가보다 높은 금액을 입력해주세요.`,
+        });
+      }
+
+      if (num % 1000 !== 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '1000원 단위로 입력해 주세요.',
+        });
+      }
+    }),
+  });

src/hooks/useEditableNumberInput.ts

@@ -1,6 +1,7 @@
-import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
-import { FocusEvent, useState } from 'react';
 import { FieldValues, Path, PathValue, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
+import { FocusEvent, useState } from 'react';
+
+import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
 
 interface UseEditableNumberProps<T extends FieldValues> {
   name: Path<T>;
@@ -15,7 +16,7 @@ export const useEditableNumberInput = <T extends FieldValues>({ name, setValue,
     const { value } = e.target;
     const num = Number(value.replace(/,/g, ''));
     if (!Number.isNaN(num)) {
-      setValue(name, formatCurrencyWithWon(num) as PathValue<T, Path<T>>);
+      setValue(name, num === 0 ? ('' as PathValue<T, Path<T>>) : (formatCurrencyWithWon(num) as PathValue<T, Path<T>>));
       setIsEditing(false);
     }
   };

src/pages/Bid.tsx

@@ -1,59 +1,57 @@
-import { LoaderFunction, useLoaderData, useNavigate } from 'react-router-dom';
+import { LoaderFunction, useLoaderData } from 'react-router-dom';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { usePatchBid, usePostBid } from '@/components/bid/queries';
 
 import AuctionItem from '@/components/common/item/AuctionItem';
 import BidCaution from '@/components/bid/BidCaution';
-import { BidSchema } from '@/constants/schema';
-import Button from '@/components/common/Button';
+import BidFooter from '@/components/bid/BidFooter';
 import FormField from '@/components/common/form/FormField';
 import { Input } from '@/components/ui/input';
 import Layout from '@/components/layout/Layout';
 import { convertCurrencyToNumber } from '@/utils/convertCurrencyToNumber';
 import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
+import { getBidSchema } from '@/constants/schema';
 import { useEditableNumberInput } from '@/hooks/useEditableNumberInput';
 import { useGetAuctionDetails } from '@/components/details/queries';
 import { useState } from 'react';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-type FormFields = z.infer<typeof BidSchema>;
-
 const Bid = () => {
-  const navigate = useNavigate();
   const [check, setCheck] = useState<boolean>(false);
   const toggleCheckBox = () => setCheck((state) => !state);
   const auctionId = useLoaderData() as number;
   const { auctionDetails } = useGetAuctionDetails(auctionId);
   const { mutate: postBid } = usePostBid(auctionId);
   const { mutate: patchBid } = usePatchBid(auctionId);
 
+  const { imageList, name, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipating, bidId } = auctionDetails;
+  const title = isParticipating ? '금액 수정하기' : '경매 참여하기';
+
+  const BidSchema = getBidSchema(minPrice);
+  type FormFields = z.infer<typeof BidSchema>;
+
   const {
     control,
     formState: { errors, isSubmitting },
     setValue,
     getValues,
     handleSubmit,
   } = useForm<FormFields>({
-    defaultValues: { minPrice: '' },
+    defaultValues: { bidAmount: '' },
     resolver: zodResolver(BidSchema),
   });
 
   const { isEditing, handleBlur, handleFocus } = useEditableNumberInput({
-    name: 'minPrice',
+    name: 'bidAmount',
     setValue,
     getValues,
   });
 
-  const { imageList, name, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipating, bidId } = auctionDetails;
-
-  const buttonName = isSubmitting ? '제안 중...' : '제안하기';
-  const title = isParticipating ? '금액 수정하기' : '경매 참여하기';
-
   const onPostSubmit: SubmitHandler<FormFields> = async (data) => {
     const bidData = {
       auctionId: Number(auctionId),
-      amount: convertCurrencyToNumber(data.minPrice),
+      amount: convertCurrencyToNumber(data.bidAmount),
     };
 
     postBid(bidData);
@@ -64,12 +62,12 @@ const Bid = () => {
 
   return (
     <Layout>
-      <Layout.Header title={title} handleBack={() => navigate(-1)} />
+      <Layout.Header title={title} />
       <Layout.Main>
         <div className='flex flex-col gap-8'>
           <AuctionItem axis='row' label='입찰 상품'>
             <AuctionItem.Image src={imageList[0]} time={timeRemaining} />
-            <AuctionItem.Main kind='register' name={name} count={participantCount} price={minPrice} />
+            <AuctionItem.Main kind='register' name={name} count={participantCount} price={bidAmount} />
           </AuctionItem>
           {isParticipating && (
             <div className='flex flex-col gap-2'>
@@ -81,14 +79,14 @@ const Bid = () => {
           )}
           <FormField
             label='가격 제안하기'
-            name='minPrice'
+            name='bidAmount'
             control={control}
-            error={errors.minPrice?.message}
+            error={errors.bidAmount?.message}
             render={(field) => (
               <Input
                 id='가격 제안하기'
                 type={isEditing ? 'number' : 'text'}
-                placeholder='최소 입찰가는 1,000원 입니다.'
+                placeholder={`최소 입찰가는 ${formatCurrencyWithWon(minPrice + 1000)} 입니다.`}
                 className=' focus-visible:ring-cheeseYellow'
                 {...field}
                 onBlur={handleBlur}
@@ -100,34 +98,7 @@ const Bid = () => {
         </div>
       </Layout.Main>
       <Layout.Footer type={isParticipating ? 'double' : 'single'}>
-        {!isParticipating ? (
-          <Button
-            type='button'
-            color='cheeseYellow'
-            className='w-full h-full transition-colors rounded text-button active:bg-black'
-            aria-label='제안하기 버튼'
-            onClick={handleSubmit(onPostSubmit)}
-            disabled={!check || isSubmitting}
-          >
-            {buttonName}
-          </Button>
-        ) : (
-          <>
-            <Button type='button' color='white' className='flex-1 h-full transition-colors rounded text-button active:bg-black' onClick={onPatchSubmit}>
-              참여 취소
-            </Button>
-            <Button
-              type='button'
-              color='cheeseYellow'
-              className='flex-[2] h-full rounded text-button active:bg-black transition-colors'
-              disabled={!check || isSubmitting}
-              onClick={handleSubmit(onPostSubmit)}
-            >
-              금액 수정
-              {isParticipating && remainingBidCount !== 0 ? `(${remainingBidCount}회 가능)` : '(소진)'}
-            </Button>
-          </>
-        )}
+        <BidFooter remain={remainingBidCount} check={check} isSubmitting={isSubmitting} handlePatch={onPatchSubmit} handlePost={handleSubmit(onPostSubmit)} />
       </Layout.Footer>
     </Layout>
   );

src/pages/BidderList.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunction, useLoaderData, useNavigate } from 'react-router-dom';
+import { LoaderFunction, useLoaderData } from 'react-router-dom';
 
 import AuctionItem from '@/components/common/item/AuctionItem';
 import { BIDDER_LIST_PRICE_FILTER } from '@/constants/filter';
@@ -11,7 +11,6 @@ import { useGetBidderList } from '@/components/bidderList/queries';
 import { useState } from 'react';
 
 const BidderList = () => {
-  const navigate = useNavigate();
   const auctionId = useLoaderData() as number;
   const [filterState, setFilterState] = useState(BIDDER_LIST_PRICE_FILTER.HIGH);
   const handleFilterState = () =>
@@ -24,7 +23,7 @@ const BidderList = () => {
 
   return (
     <Layout>
-      <Layout.Header title='경매 참여자 목록' handleBack={() => navigate(-1)} />
+      <Layout.Header title='경매 참여자 목록' />
       <Layout.Main>
         <div className='flex flex-col gap-8 pt-4'>
           <AuctionItem axis='row' label='입찰자 목록 상품'>