(최겸) 구매 입찰 세부기능 수정

1 files changed, 115 insertions, 105 deletions

diff --git a/components/bidding/bidding-info-header.tsx b/components/bidding/bidding-info-header.tsx
index e109a8ca..b897187d 100644
--- a/components/bidding/bidding-info-header.tsx
+++ b/components/bidding/bidding-info-header.tsx
@@ -4,127 +4,137 @@ import { contractTypeLabels, biddingTypeLabels } from '@/db/schema/bidding'
 import { formatDate } from '@/lib/utils'
 
 interface BiddingInfoHeaderProps {
-  bidding: Bidding
+  bidding: Bidding | null
 }
 
 export function BiddingInfoHeader({ bidding }: BiddingInfoHeaderProps) {
+  if (!bidding) {
+    return (
+      <div className="bg-white border rounded-lg p-6 mb-6 shadow-sm">
+        <div className="text-center text-gray-500">입찰 정보를 불러오는 중...</div>
+      </div>
+    )
+  }
+
   return (
     <div className="bg-white border rounded-lg p-6 mb-6 shadow-sm">
-      {/* 주요 정보 섹션 */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-        {/* 프로젝트 정보 */}
-        {bidding.projectName && (
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <Building2 className="w-4 h-4" />
-              <span>프로젝트</span>
+      {/* 3개 섹션을 Grid로 배치 - 각 섹션이 동일한 width로 꽉 채움 */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* 왼쪽 섹션: 프로젝트, 품목, 담당자 정보 */}
+        <div className="w-full space-y-4">
+          {/* 프로젝트 정보 */}
+          {bidding.projectName && (
+            <div className="mb-4">
+              <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                <Building2 className="w-4 h-4" />
+                <span>프로젝트</span>
+              </div>
+              <div className="font-medium text-gray-900">{bidding.projectName}</div>
             </div>
-            <div className="font-medium text-gray-900">{bidding.projectName}</div>
-          </div>
-        )}
-
-        {/* 품목 정보 */}
-        {bidding.itemName && (
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <Package className="w-4 h-4" />
-              <span>품목</span>
+          )}
+ 
+          {/* 품목 정보 */}
+          {bidding.itemName && (
+            <div className="mb-4">
+              <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                <Package className="w-4 h-4" />
+                <span>품목</span>
+              </div>
+              <div className="font-medium text-gray-900">{bidding.itemName}</div>
             </div>
-            <div className="font-medium text-gray-900">{bidding.itemName}</div>
-          </div>
-        )}
-
-        {/* 담당자 정보 */}
-        {bidding.managerName && (
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <User className="w-4 h-4" />
-              <span>담당자</span>
+          )}
+ 
+          {/* 담당자 정보 */}
+          {bidding.managerName && (
+            <div className="mb-4">
+              <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                <User className="w-4 h-4" />
+                <span>담당자</span>
+              </div>
+              <div className="font-medium text-gray-900">{bidding.managerName}</div>
             </div>
-            <div className="font-medium text-gray-900">{bidding.managerName}</div>
-          </div>
-        )}
-
-        {/* 예산 정보 */}
-        {bidding.budget && (
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <DollarSign className="w-4 h-4" />
-              <span>예산</span>
+          )}
+ 
+          {/* 예산 정보 */}
+          {bidding.budget && (
+            <div className="mb-4">
+              <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                <DollarSign className="w-4 h-4" />
+                <span>예산</span>
+              </div>
+              <div className="font-semibold text-gray-900">
+                {new Intl.NumberFormat('ko-KR', {
+                  style: 'currency',
+                  currency: bidding.currency || 'KRW',
+                }).format(Number(bidding.budget))}
+              </div>
             </div>
-            <div className="font-semibold text-gray-900">
-              {new Intl.NumberFormat('ko-KR', {
-                style: 'currency',
-                currency: bidding.currency || 'KRW',
-              }).format(Number(bidding.budget))}
+          )}
+        </div>
+ 
+        {/* 가운데 섹션: 계약 정보 */}
+        <div className="w-full border-l border-gray-100 pl-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1">
+              <span className="text-gray-500 text-sm">계약</span>
+              <span className="font-medium">{contractTypeLabels[bidding.contractType]}</span>
+            </div>
+            
+            <div className="flex flex-col gap-1">
+              <span className="text-gray-500 text-sm">유형</span>
+              <span className="font-medium">{biddingTypeLabels[bidding.biddingType]}</span>
             </div>
-          </div>
-        )}
-      </div>
-
-      {/* 구분선 */}
-      <div className="border-t border-gray-100 pt-4 mb-4">
-        {/* 계약 정보 */}
-        <div className="flex flex-wrap gap-8 text-sm">
-          <div className="flex items-center gap-2">
-            <span className="text-gray-500">계약</span>
-            <span className="font-medium">{contractTypeLabels[bidding.contractType]}</span>
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <span className="text-gray-500">유형</span>
-            <span className="font-medium">{biddingTypeLabels[bidding.biddingType]}</span>
-          </div>
 
-          <div className="flex items-center gap-2">
-            <span className="text-gray-500">낙찰</span>
-            <span className="font-medium">{bidding.awardCount === 'single' ? '단수' : '복수'}</span>
-          </div>
+            <div className="flex flex-col gap-1">
+              <span className="text-gray-500 text-sm">낙찰</span>
+              <span className="font-medium">{bidding.awardCount === 'single' ? '단수' : '복수'}</span>
+            </div>
 
-          <div className="flex items-center gap-2">
-            <span className="text-gray-500">통화</span>
-            <span className="font-mono font-medium">{bidding.currency}</span>
+            <div className="flex flex-col gap-1">
+              <span className="text-gray-500 text-sm">통화</span>
+              <span className="font-mono font-medium">{bidding.currency}</span>
+            </div>
           </div>
         </div>
-      </div>
-
-      {/* 일정 정보 */}
-      {(bidding.submissionStartDate || bidding.evaluationDate || bidding.preQuoteDate || bidding.biddingRegistrationDate) && (
-        <div className="border-t border-gray-100 pt-4">
-          <div className="flex items-center gap-2 mb-3 text-sm text-gray-500">
-            <Calendar className="w-4 h-4" />
-            <span>일정 정보</span>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-            {bidding.submissionStartDate && bidding.submissionEndDate && (
-              <div>
-                <span className="text-gray-500">제출기간</span>
-                <div className="font-medium">
-                  {formatDate(bidding.submissionStartDate, 'KR')} ~ {formatDate(bidding.submissionEndDate, 'KR')}
+ 
+        {/* 오른쪽 섹션: 일정 정보 */}
+        {(bidding.submissionStartDate || bidding.evaluationDate || bidding.preQuoteDate || bidding.biddingRegistrationDate) && (
+          <div className="w-full border-l border-gray-100 pl-6">
+            <div className="flex items-center gap-2 mb-3 text-sm text-gray-500">
+              <Calendar className="w-4 h-4" />
+              <span>일정 정보</span>
+            </div>
+            <div className="space-y-3">
+              {bidding.submissionStartDate && bidding.submissionEndDate && (
+                <div>
+                  <span className="text-gray-500 text-sm">제출기간</span>
+                  <div className="font-medium">
+                    {formatDate(bidding.submissionStartDate, 'KR')} ~ {formatDate(bidding.submissionEndDate, 'KR')}
+                  </div>
                 </div>
-              </div>
-            )}
-            {bidding.biddingRegistrationDate && (
-              <div>
-                <span className="text-gray-500">입찰등록일</span>
-                <div className="font-medium">{formatDate(bidding.biddingRegistrationDate, 'KR')}</div>
-              </div>
-            )}
-            {bidding.preQuoteDate && (
-              <div>
-                <span className="text-gray-500">사전견적일</span>
-                <div className="font-medium">{formatDate(bidding.preQuoteDate, 'KR')}</div>
-              </div>
-            )}
-            {bidding.evaluationDate && (
-              <div>
-                <span className="text-gray-500">평가일</span>
-                <div className="font-medium">{formatDate(bidding.evaluationDate, 'KR')}</div>
-              </div>
-            )}
+              )}
+              {bidding.biddingRegistrationDate && (
+                <div>
+                  <span className="text-gray-500 text-sm">입찰등록일</span>
+                  <div className="font-medium">{formatDate(bidding.biddingRegistrationDate, 'KR')}</div>
+                </div>
+              )}
+              {bidding.preQuoteDate && (
+                <div>
+                  <span className="text-gray-500 text-sm">사전견적일</span>
+                  <div className="font-medium">{formatDate(bidding.preQuoteDate, 'KR')}</div>
+                </div>
+              )}
+              {bidding.evaluationDate && (
+                <div>
+                  <span className="text-gray-500 text-sm">평가일</span>
+                  <div className="font-medium">{formatDate(bidding.evaluationDate, 'KR')}</div>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   )
 }