(김준회) basic-info-client 에서 매출정보 컴포넌트 분리 적용

1 files changed, 11 insertions, 237 deletions

diff --git a/lib/vendor-basic-info/basic-info-client.tsx b/lib/vendor-basic-info/basic-info-client.tsx
index fbf19fe9..0ef9f940 100644
--- a/lib/vendor-basic-info/basic-info-client.tsx
+++ b/lib/vendor-basic-info/basic-info-client.tsx
@@ -29,14 +29,7 @@ import { fetchVendorRegistrationStatus } from "@/lib/vendor-regular-registration
 import { getVendorAttachmentsByType, getVendorPeriodicGrade, getVendorTypeInfo } from "@/lib/vendor-info/service";
 import { useCreditIntegration } from "./use-credit-integration";
 // downloadFile은 동적으로 import
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { SalesInfoTable } from "./sales-info-table";
 
 interface BasicInfoClientProps {
   initialData: VendorData | null;
@@ -337,9 +330,7 @@ export default function BasicInfoClient({
     bestResult,
     getCurrentResult,
     handleCreditServiceChange,
-    transformCreditToSalesData,
     creditServices,
-    reload: reloadCreditData
   } = useCreditIntegration(vendorId);
 
   // 다이얼로그 상태
@@ -1224,235 +1215,18 @@ export default function BasicInfoClient({
         {/* 매출정보 */}
         <WideInfoSection
           title="매출정보"
-          subtitle="(3개년)"
           noPadding={true}
           content={
-            <div className="space-y-4">
-              {/* 신용평가사 선택 */}
-              <div className="p-4 border-b bg-muted/30">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium">신용평가사 데이터</span>
-                  {creditLoading && (
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
-                      로딩 중...
-                    </div>
-                  )}
-                </div>
-                
-                <div className="flex items-center gap-4">
-                  <Select
-                    value={selectedCreditService}
-                    onValueChange={handleCreditServiceChange}
-                  >
-                    <SelectTrigger className="w-48">
-                      <SelectValue placeholder="신용평가사 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {creditServices.map((service) => {
-                        const result = creditResults.find(r => r.code === service.code);
-                        return (
-                          <SelectItem key={service.code} value={service.code}>
-                            {service.name}
-                            {service.code !== 'auto' && result && (
-                              <span className="ml-2 text-xs text-muted-foreground">
-                                {result.success 
-                                  ? `(${result.dataCount}개 항목)`
-                                  : '(조회 실패)'
-                                }
-                              </span>
-                            )}
-                          </SelectItem>
-                        );
-                      })}
-                    </SelectContent>
-                  </Select>
-                  
-                  {getCurrentResult() && (
-                    <div className="text-sm text-muted-foreground">
-                      선택됨: <span className="font-medium">{getCurrentResult()?.name}</span>
-                      {selectedCreditService === 'auto' && bestResult && (
-                        <span className="ml-1">({bestResult.dataCount}개 항목으로 자동선택)</span>
-                      )}
-                    </div>
-                  )}
-                  
-                  {creditError && (
-                    <div className="text-sm text-destructive">
-                      {creditError}
-                    </div>
-                  )}
-                  
-                  {!creditLoading && !creditError && creditResults.length > 0 && !getCurrentResult()?.data && (
-                    <div className="text-sm text-muted-foreground">
-                      신용평가 데이터가 없습니다
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* 테이블 */}
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    기준일
-                  </TableHead>
-                  <TableHead colSpan={3} className="text-center border-r">
-                    자산 구성
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    영업이익
-                    <br />
-                    (백만원)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    당기순이익
-                    <br />
-                    (백만원)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    부채비율
-                    <br />
-                    (%)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    차입금의존도
-                    <br />
-                    (%)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    영업이익률
-                    <br />
-                    (%)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    순이익률
-                    <br />
-                    (%)
-                  </TableHead>
-                  <TableHead
-                    rowSpan={2}
-                    className="text-center border-r align-middle"
-                  >
-                    매출액증감
-                    <br />
-                    (%)
-                  </TableHead>
-                  <TableHead rowSpan={2} className="text-center align-middle">
-                    유동비율
-                    <br />
-                    (%)
-                  </TableHead>
-                </TableRow>
-                <TableRow>
-                  <TableHead className="text-center border-r">총자산</TableHead>
-                  <TableHead className="text-center border-r">
-                    부채총계
-                  </TableHead>
-                  <TableHead className="text-center border-r">
-                    자본총계
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {(() => {
-                  // 신용평가사 데이터 우선 사용, 없으면 기존 데이터 사용
-                  const currentResult = getCurrentResult();
-                  const creditTransformedData = currentResult?.data ? transformCreditToSalesData(currentResult.data) : null;
-                  
-                  const salesData = creditTransformedData?.salesInfo || initialData.salesInfo || {};
-                  const metricsData = creditTransformedData?.calculatedMetrics || initialData.calculatedMetrics || {};
-                  
-                  // 실제 데이터에서 연도 추출 (고정 연도 사용하지 않음)
-                  let years = Object.keys(salesData).sort().reverse().slice(0, 3);
-                  
-                  // 데이터가 없는 경우 빈 행 3개 생성
-                  if (years.length === 0) {
-                    years = ["", "", ""];
-                  }
-                  
-                  // 3개 미만인 경우 빈 행으로 채우기
-                  while (years.length < 3) {
-                    years.push("");
-                  }
-                  
-                  return years.map((dateKey, index) => {
-                    const formattedDate = dateKey; // YYYYMMDD 형식으로 표시 (빈 문자열일 수 있음)
-                    const yearSalesData = salesData[dateKey];
-                    const yearMetricsData = metricsData[dateKey];
-
-                    return (
-                      <TableRow key={dateKey || `empty-${index}`}>
-                        <TableCell className="text-center font-medium border-r bg-yellow-50">
-                          {formattedDate}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearSalesData && yearSalesData.totalDebt && yearSalesData.totalEquity
-                            ? (
-                                parseInt(yearSalesData.totalDebt.replace(/,/g, "")) +
-                                parseInt(yearSalesData.totalEquity.replace(/,/g, ""))
-                              ).toLocaleString()
-                            : "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearSalesData?.totalDebt || "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearSalesData?.totalEquity || "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearSalesData?.operatingProfit || "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearSalesData?.netIncome || "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearMetricsData?.debtRatio ? yearMetricsData.debtRatio.toFixed(1) : "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearMetricsData?.borrowingDependency ? yearMetricsData.borrowingDependency.toFixed(1) : "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearMetricsData?.operatingMargin ? yearMetricsData.operatingMargin.toFixed(1) : "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearMetricsData?.netMargin ? yearMetricsData.netMargin.toFixed(1) : "-"}
-                        </TableCell>
-                        <TableCell className="text-right border-r">
-                          {yearMetricsData?.salesGrowth ? yearMetricsData.salesGrowth.toFixed(1) : "-"}
-                        </TableCell>
-                        <TableCell className="text-right">
-                          {yearMetricsData?.currentRatio ? yearMetricsData.currentRatio.toFixed(1) : "-"}
-                        </TableCell>
-                      </TableRow>
-                    );
-                  });
-                })()}
-              </TableBody>
-            </Table>
-            </div>
+            <SalesInfoTable
+              creditLoading={creditLoading}
+              creditError={creditError}
+              creditResults={creditResults}
+              selectedCreditService={selectedCreditService}
+              bestResult={bestResult}
+              getCurrentResult={getCurrentResult}
+              handleCreditServiceChange={handleCreditServiceChange}
+              creditServices={creditServices}
+            />
           }
         />