From 902995e45a12e63a7ec9db8cac7c76c08fd7f71d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=A4=EB=A6=AC?= <1gyn093@gmail.com>
Date: Tue, 5 Aug 2025 20:53:26 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20bid-form=20=EC=82=AC=EC=9D=B4=EC=A7=95?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/auction-detail/bid-form/input.tsx    | 13 +++++++++----
 .../auction-detail/bid-table/bid-table.tsx          |  2 +-
 .../auction-detail/bid-table/bidder-avatar.tsx      |  2 +-
 .../src/components/auction-detail/bid-table/row.tsx |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/auction-detail/bid-form/input.tsx b/apps/web/src/components/auction-detail/bid-form/input.tsx
index 3d88ce20..0696f6bf 100644
--- a/apps/web/src/components/auction-detail/bid-form/input.tsx
+++ b/apps/web/src/components/auction-detail/bid-form/input.tsx
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 
 import { useAuctionDetail } from '@/hooks/queries/auction';
 
+import { cn } from '@/lib/cn';
 import { formatCurrency, formatCurrencyWithUnit, formatToKoreanUnit } from '@/lib/utils/price';
 
 import { BidInputProps } from '@/types/bid';
@@ -15,7 +16,7 @@ const bidInputWrapper = tv({
   base: 'transition-all duration-600 overflow-hidden px-1',
   variants: {
     open: {
-      true: 'pt-2 max-h-[150px] translate-y-0',
+      true: 'pt-2 max-h-[160px] translate-y-0',
       false: 'max-h-0 translate-y-4 pointer-events-none',
     },
   },
@@ -76,13 +77,17 @@ const BidFormInput = ({
   return (
     <div className={bidInputWrapper({ open: isBidInputOpen })}>
       <div className="h-25 flex w-full flex-col items-start justify-center gap-2">
-        <label htmlFor="price">
+        <label htmlFor="price" className="flex items-center gap-1">
           <p className="font-medium">희망입찰가</p>
           <span className="text-xs text-neutral-500">
             (입찰 단위: <strong>{formatCurrency(minBidUnit || 0)}</strong>원)
           </span>
         </label>
-        <div className="shadow-xs flex h-14 w-full min-w-0 items-center justify-between rounded-sm border bg-transparent p-1 text-base text-neutral-400 focus-within:border-neutral-400 focus-within:ring-[2px] focus-within:ring-neutral-400/50 md:text-sm [&>svg]:h-5 [&>svg]:w-5">
+        <div
+          className={cn(
+            `shadow-xs flex h-14 w-full min-w-0 items-center justify-between rounded-sm border bg-transparent p-1 text-base text-neutral-400 focus-within:border-neutral-400 focus-within:ring-[2px] focus-within:ring-neutral-400/50 md:text-sm [&>svg]:h-5 [&>svg]:w-5`
+          )}
+        >
           <div className="flex items-center gap-2 pl-2">
             <UserRound />
             <input
@@ -90,7 +95,7 @@ const BidFormInput = ({
               value={bidPrice ?? defaultBidPrice}
               placeholder={placeholder}
               onChange={handleChange}
-              className="aria-invalid:ring-danger-700/20 aria-invalid:border-danger-700 selection:text-primary-500 w-[270px] text-black placeholder:text-neutral-400 focus:shadow-none focus:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="aria-invalid:ring-danger-700/20 aria-invalid:border-danger-700 selection:text-primary-500 w-full text-black placeholder:text-neutral-400 focus:shadow-none focus:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
             />
           </div>
           <button
diff --git a/apps/web/src/components/auction-detail/bid-table/bid-table.tsx b/apps/web/src/components/auction-detail/bid-table/bid-table.tsx
index 09dd7709..5e26aa1a 100644
--- a/apps/web/src/components/auction-detail/bid-table/bid-table.tsx
+++ b/apps/web/src/components/auction-detail/bid-table/bid-table.tsx
@@ -47,7 +47,7 @@ const BidTable = ({ auctionId, initialBids }: BidTableProps) => {
           <BidTableHead />
           <div className="relative">
             <span className="w-7.5 absolute flex h-full items-center justify-center text-neutral-400">
-              <i className="bg-primary-100 h-9/10 block w-1"></i>
+              <i className="bg-primary-100 h-8/10 block w-1"></i>
             </span>
             <ul ref={animationParent} className="space-y-2">
               {sortedBids.map((item) => {
diff --git a/apps/web/src/components/auction-detail/bid-table/bidder-avatar.tsx b/apps/web/src/components/auction-detail/bid-table/bidder-avatar.tsx
index dd6aabd3..c3c20f3c 100644
--- a/apps/web/src/components/auction-detail/bid-table/bidder-avatar.tsx
+++ b/apps/web/src/components/auction-detail/bid-table/bidder-avatar.tsx
@@ -26,7 +26,7 @@ const BidderAvatar = ({
       src={profileImg}
       alt={nickname}
       size={'small'}
-      className={authorStyle({ author: isAuthor })}
+      className={`border-1 border-primary-100 ${authorStyle({ author: isAuthor })}`}
     />
   );
 };
diff --git a/apps/web/src/components/auction-detail/bid-table/row.tsx b/apps/web/src/components/auction-detail/bid-table/row.tsx
index 852636ba..d53c4bc3 100644
--- a/apps/web/src/components/auction-detail/bid-table/row.tsx
+++ b/apps/web/src/components/auction-detail/bid-table/row.tsx
@@ -36,7 +36,7 @@ const BidTableRow = ({ item }: { item: BidType }) => {
       />
       <div
         className={cn(
-          'ml-3 flex w-full rounded-sm bg-white py-2.5 text-sm text-neutral-600 opacity-90',
+          'border-1 border-primary-100 ml-3 flex w-full rounded-sm bg-white py-2.5 text-sm text-neutral-600 opacity-90',
           isAuthor &&
             'border-1 border-primary-500 text-primary-600 shadow-primary-300 font-bold opacity-100 shadow-sm'
         )}