Merge remote-tracking branch 'origin/master'

src/components/business/DashboardSwitcher.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter, usePathname, useParams } from 'next/navigation';
 import { ChevronDown, LayoutDashboard, LayoutGrid, Target, Activity, Columns3 } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 const dashboards = [
   { path: '/dashboard', label: '보고서형', icon: LayoutDashboard },
@@ -18,11 +18,21 @@ export function DashboardSwitcher() {
   const params = useParams();
   const locale = (params.locale as string) || 'ko';
   const [open, setOpen] = useState(false);
+  const [alignRight, setAlignRight] = useState(true);
   const ref = useRef<HTMLDivElement>(null);
 
   // 현재 활성 대시보드 찾기
   const current = dashboards.find((d) => pathname.endsWith(d.path)) ?? dashboards[0];
 
+  // 드롭다운 열릴 때 버튼 위치 기반으로 정렬 방향 결정
+  const updateAlignment = useCallback(() => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    // 버튼 중심이 화면 오른쪽 절반이면 right 정렬, 아니면 left 정렬
+    setAlignRight(rect.left + rect.width / 2 > viewportWidth / 2);
+  }, []);
+
   // 외부 클릭 시 닫기
   useEffect(() => {
     function handleClick(e: MouseEvent) {
@@ -32,10 +42,15 @@ export function DashboardSwitcher() {
     return () => document.removeEventListener('mousedown', handleClick);
   }, [open]);
 
+  const handleToggle = () => {
+    if (!open) updateAlignment();
+    setOpen(!open);
+  };
+
   return (
     <div ref={ref} className="relative">
       <button
-        onClick={() => setOpen(!open)}
+        onClick={handleToggle}
         className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-background text-sm font-medium hover:bg-muted transition-colors"
       >
         <current.icon className="w-4 h-4 text-primary" />
@@ -44,7 +59,7 @@ export function DashboardSwitcher() {
       </button>
 
       {open && (
-        <div className="absolute right-0 top-full mt-1 w-44 rounded-lg border bg-background shadow-lg z-50 py-1">
+        <div className={`absolute top-full mt-1 w-44 rounded-lg border bg-background shadow-lg z-50 py-1 ${alignRight ? 'right-0' : 'left-0'}`}>
           {dashboards.map((d) => {
             const Icon = d.icon;
             const isActive = d.path === current.path;

src/components/quotes/QuoteCalculationReport.tsx

@@ -1,539 +0,0 @@
-/**
- * 견적 산출내역서 / 견적서 컴포넌트
- * - documentType="견적서": 간단한 견적서
- * - documentType="견적산출내역서": 상세 산출내역서 + 소요자재 내역
- */
-
-import { QuoteFormData } from "./types";
-import type { BomMaterial } from "./types";
-import type { CompanyFormData } from "@/components/settings/CompanyInfoManagement/types";
-
-interface QuoteCalculationReportProps {
-  quote: QuoteFormData;
-  companyInfo?: CompanyFormData | null;
-  documentType?: "견적산출내역서" | "견적서";
-  showDetailedBreakdown?: boolean;
-  showMaterialList?: boolean;
-}
-
-export function QuoteCalculationReport({
-  quote,
-  companyInfo,
-  documentType = "견적산출내역서",
-  showDetailedBreakdown = true,
-  showMaterialList = true
-}: QuoteCalculationReportProps) {
-  const formatAmount = (amount: number | null | undefined) => {
-    if (amount == null) return '0';
-    return Number(amount).toLocaleString('ko-KR');
-  };
-
-  const formatDate = (dateStr: string) => {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return `${date.getFullYear()}년 ${String(date.getMonth() + 1).padStart(2, '0')}월 ${String(date.getDate()).padStart(2, '0')}일`;
-  };
-
-  // 총 금액 계산 (totalAmount > unitPrice * quantity > inspectionFee 우선순위)
-  const totalAmount = quote.items?.reduce((sum, item) => {
-    const itemTotal = item.totalAmount ||
-      (item.unitPrice || 0) * (item.quantity || 1) ||
-      (item.inspectionFee || 0) * (item.quantity || 1);
-    return sum + itemTotal;
-  }, 0) || 0;
-
-  // 소요자재 내역 - BOM 자재 목록 (quote.bomMaterials)에서 가져옴
-  // bomMaterials가 없으면 빈 배열 (BOM 계산 데이터 없음)
-  const materialItems = (quote.bomMaterials || []).map((material, index) => ({
-    no: index + 1,
-    itemCode: material.itemCode || '-',
-    name: material.itemName || '-',
-    spec: material.specification || '-',
-    quantity: Math.floor(material.quantity || 1),
-    unit: material.unit || 'EA',
-    unitPrice: material.unitPrice || 0,
-    totalPrice: material.totalPrice || 0,
-  }));
-
-  return (
-    <>
-      <style>{`
-        @media print {
-          @page {
-            size: A4 portrait;
-            margin: 15mm;
-          }
-
-          body {
-            background: white !important;
-          }
-
-          .print\\:hidden {
-            display: none !important;
-          }
-
-          #quote-report-content {
-            background: white !important;
-            padding: 0 !important;
-          }
-
-          table {
-            page-break-inside: avoid;
-          }
-
-          .page-break-after {
-            page-break-after: always;
-          }
-        }
-
-        /* 공문서 스타일 */
-        .official-doc {
-          font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
-          background: white;
-          color: #000;
-          line-height: 1.5;
-        }
-
-        .doc-header {
-          text-align: center;
-          border-bottom: 3px double #000;
-          padding-bottom: 20px;
-          margin-bottom: 30px;
-        }
-
-        .doc-title {
-          font-size: 26px;
-          font-weight: 700;
-          letter-spacing: 2px;
-          margin-bottom: 12px;
-        }
-
-        .doc-number {
-          font-size: 14px;
-          color: #333;
-        }
-
-        .info-box {
-          border: 2px solid #000;
-          margin-bottom: 20px;
-        }
-
-        .info-box-header {
-          background: #f0f0f0;
-          border-bottom: 2px solid #000;
-          padding: 8px 12px;
-          font-weight: 700;
-          text-align: center;
-          font-size: 14px;
-        }
-
-        .info-box-content {
-          padding: 0;
-        }
-
-        .info-table {
-          width: 100%;
-          border-collapse: collapse;
-        }
-
-        .info-table th {
-          background: #f8f8f8;
-          border: 1px solid #999;
-          padding: 8px 10px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 13px;
-          width: 100px;
-        }
-
-        .info-table td {
-          border: 1px solid #999;
-          padding: 8px 10px;
-          font-size: 13px;
-        }
-
-        .amount-box {
-          border: 3px double #000;
-          padding: 20px;
-          text-align: center;
-          margin: 30px 0;
-          background: #fafafa;
-        }
-
-        .amount-label {
-          font-size: 16px;
-          font-weight: 600;
-          margin-bottom: 10px;
-        }
-
-        .amount-value {
-          font-size: 32px;
-          font-weight: 700;
-          color: #000;
-          letter-spacing: 1px;
-        }
-
-        .amount-note {
-          font-size: 13px;
-          color: #666;
-          margin-top: 8px;
-        }
-
-        .section-title {
-          background: #000;
-          color: white;
-          padding: 10px 15px;
-          font-weight: 700;
-          font-size: 15px;
-          margin: 30px 0 15px 0;
-          text-align: center;
-          letter-spacing: 1px;
-        }
-
-        .detail-table {
-          width: 100%;
-          border-collapse: collapse;
-          border: 2px solid #000;
-        }
-
-        .detail-table thead th {
-          background: #e8e8e8;
-          border: 1px solid #666;
-          padding: 10px 6px;
-          text-align: center;
-          font-weight: 700;
-          font-size: 12px;
-        }
-
-        .detail-table tbody td {
-          border: 1px solid #999;
-          padding: 8px 6px;
-          font-size: 12px;
-        }
-
-        .detail-table tbody tr:hover {
-          background: #f9f9f9;
-        }
-
-        .detail-table tfoot td {
-          background: #f0f0f0;
-          border: 1px solid #666;
-          padding: 10px;
-          font-weight: 700;
-          font-size: 13px;
-        }
-
-        .material-table {
-          width: 100%;
-          border-collapse: collapse;
-          border: 2px solid #000;
-          margin-top: 15px;
-        }
-
-        .material-table th {
-          background: #e8e8e8;
-          border: 1px solid #666;
-          padding: 8px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 12px;
-        }
-
-        .material-table td {
-          border: 1px solid #999;
-          padding: 8px;
-          font-size: 12px;
-        }
-
-        .stamp-area {
-          border: 2px solid #000;
-          width: 80px;
-          height: 80px;
-          display: inline-block;
-          position: relative;
-          margin-left: 20px;
-        }
-
-        .stamp-text {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          font-size: 10px;
-          color: #999;
-          text-align: center;
-          line-height: 1.3;
-        }
-
-        .footer-note {
-          margin-top: 40px;
-          padding-top: 20px;
-          border-top: 1px solid #ccc;
-          font-size: 11px;
-          color: #666;
-          line-height: 1.6;
-        }
-
-        .signature-section {
-          margin-top: 30px;
-          text-align: right;
-        }
-      `}</style>
-
-      {/* 문서 컴포넌트 */}
-      <div className="official-doc">
-        {/* 문서 헤더 */}
-        <div className="doc-header">
-          <div className="doc-title">
-            {documentType === "견적서" ? "견 적 서" : "견 적 산 출 내 역 서"}
-          </div>
-          <div className="doc-number">
-            문서번호: {quote.id || '-'} | 작성일자: {formatDate(quote.registrationDate || '')}
-          </div>
-        </div>
-
-        {/* 수요자 정보 */}
-        <div className="info-box">
-          <div className="info-box-header">수 요 자</div>
-          <div className="info-box-content">
-            <table className="info-table">
-              <tbody>
-                <tr>
-                  <th>업체명</th>
-                  <td colSpan={3}>{quote.clientName || '-'}</td>
-                </tr>
-                <tr>
-                  <th>현장명</th>
-                  <td>{quote.siteName || '-'}</td>
-                  <th>담당자</th>
-                  <td>{quote.manager || '-'}</td>
-                </tr>
-                <tr>
-                  <th>제품명</th>
-                  <td>{quote.items?.[0]?.productName || '-'}</td>
-                  <th>연락처</th>
-                  <td>{quote.contact || '-'}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* 공급자 정보 */}
-        <div className="info-box">
-          <div className="info-box-header">공 급 자</div>
-          <div className="info-box-content">
-            <table className="info-table">
-              <tbody>
-                <tr>
-                  <th>상호</th>
-                  <td>{companyInfo?.companyName || '-'}</td>
-                  <th>사업자등록번호</th>
-                  <td>{companyInfo?.businessNumber || '-'}</td>
-                </tr>
-                <tr>
-                  <th>대표자</th>
-                  <td>{companyInfo?.representativeName || '-'}</td>
-                  <th>업태</th>
-                  <td>{companyInfo?.businessType || '-'}</td>
-                </tr>
-                <tr>
-                  <th>종목</th>
-                  <td colSpan={3}>{companyInfo?.businessCategory || '-'}</td>
-                </tr>
-                <tr>
-                  <th>사업장주소</th>
-                  <td colSpan={3}>{companyInfo?.address || '-'}</td>
-                </tr>
-                <tr>
-                  <th>전화</th>
-                  <td>{companyInfo?.managerPhone || '-'}</td>
-                  <th>이메일</th>
-                  <td>{companyInfo?.email || '-'}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* 총 견적금액 */}
-        <div className="amount-box">
-          <div className="amount-label">총 견적금액</div>
-          <div className="amount-value">₩ {formatAmount(totalAmount)}</div>
-          <div className="amount-note">※ 부가가치세 별도</div>
-        </div>
-
-        {/* 세부 산출내역서 */}
-        {showDetailedBreakdown && quote.items && quote.items.length > 0 && (
-          <div className="page-break-after">
-            <div className="section-title">세 부 산 출 내 역</div>
-
-            <table className="detail-table">
-              <thead>
-                <tr>
-                  <th style={{ width: '40px' }}>No.</th>
-                  <th style={{ width: '200px' }}>품목명</th>
-                  <th style={{ width: '150px' }}>규격</th>
-                  <th style={{ width: '70px' }}>수량</th>
-                  <th style={{ width: '50px' }}>단위</th>
-                  <th style={{ width: '110px' }}>단가</th>
-                  <th style={{ width: '130px' }}>금액</th>
-                </tr>
-              </thead>
-              <tbody>
-                {quote.items.map((item, index) => {
-                  // 단가: unitPrice > inspectionFee 우선순위
-                  const unitPrice = item.unitPrice || item.inspectionFee || 0;
-                  // 금액: totalAmount > unitPrice * quantity 우선순위
-                  const itemTotal = item.totalAmount || unitPrice * (item.quantity || 1);
-                  return (
-                    <tr key={item.id || `item-${index}`}>
-                      <td style={{ textAlign: 'center' }}>{index + 1}</td>
-                      <td>{item.productName}</td>
-                      <td style={{ fontSize: '11px' }}>{`${item.openWidth}×${item.openHeight}mm`}</td>
-                      <td style={{ textAlign: 'right' }}>{Math.floor(item.quantity || 0)}</td>
-                      <td style={{ textAlign: 'center' }}>{item.unit || 'SET'}</td>
-                      <td style={{ textAlign: 'right' }}>{formatAmount(unitPrice)}</td>
-                      <td style={{ textAlign: 'right', fontWeight: '600' }}>{formatAmount(itemTotal)}</td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-              <tfoot>
-                <tr>
-                  <td colSpan={6} style={{ textAlign: 'right', padding: '12px', background: '#e0e0e0', fontWeight: '700' }}>공급가액 합계</td>
-                  <td style={{ textAlign: 'right', padding: '12px', background: '#e0e0e0', fontSize: '15px', fontWeight: '700' }}>{formatAmount(totalAmount)}</td>
-                </tr>
-              </tfoot>
-            </table>
-          </div>
-        )}
-
-        {/* 소요자재 내역 */}
-        {showMaterialList && documentType !== "견적서" && (
-          <div>
-            <div className="section-title">소 요 자 재 내 역</div>
-
-            {/* 제품 정보 */}
-            <div className="info-box" style={{ marginTop: '15px' }}>
-              <div className="info-box-content">
-                <table className="info-table">
-                  <tbody>
-                    <tr>
-                      <th>제품구분</th>
-                      <td>{quote.items?.[0]?.productCategory === 'steel' ? '철재' : '스크린'}</td>
-                      <th>부호</th>
-                      <td>{quote.items?.[0]?.code || '-'}</td>
-                    </tr>
-                    <tr>
-                      <th>오픈사이즈</th>
-                      <td>W {quote.items?.[0]?.openWidth || '-'} × H {quote.items?.[0]?.openHeight || '-'} (mm)</td>
-                      <th>제작사이즈</th>
-                      <td>W {Number(quote.items?.[0]?.openWidth || 0) + 100} × H {Number(quote.items?.[0]?.openHeight || 0) + 100} (mm)</td>
-                    </tr>
-                    <tr>
-                      <th>수량</th>
-                      <td>{Math.floor(quote.items?.[0]?.quantity || 1)} {quote.items?.[0]?.unit || 'SET'}</td>
-                      <th>케이스</th>
-                      <td>2438 × 550 (mm)</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* 자재 목록 테이블 */}
-            {materialItems.length > 0 ? (
-              <table className="material-table">
-                <thead>
-                  <tr>
-                    <th style={{ width: '40px' }}>No.</th>
-                    <th style={{ width: '100px' }}>품목코드</th>
-                    <th>자재명</th>
-                    <th style={{ width: '200px' }}>규격</th>
-                    <th style={{ width: '80px' }}>수량</th>
-                    <th style={{ width: '60px' }}>단위</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {materialItems.map((item, index) => (
-                    <tr key={index}>
-                      <td style={{ textAlign: 'center' }}>{index + 1}</td>
-                      <td style={{ textAlign: 'center', fontSize: '11px' }}>{item.itemCode}</td>
-                      <td>{item.name}</td>
-                      <td style={{ fontSize: '11px' }}>{item.spec}</td>
-                      <td style={{ textAlign: 'center', fontWeight: '600' }}>{item.quantity}</td>
-                      <td style={{ textAlign: 'center' }}>{item.unit}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            ) : (
-              <div style={{
-                border: '2px solid #000',
-                padding: '30px',
-                textAlign: 'center',
-                marginTop: '15px',
-                color: '#666'
-              }}>
-                소요자재 정보가 없습니다. (BOM 계산 데이터가 필요합니다)
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* 비고사항 */}
-        {quote.remarks && (
-          <div style={{ marginTop: '30px' }}>
-            <div className="section-title">비 고 사 항</div>
-            <div style={{
-              border: '2px solid #000',
-              padding: '15px',
-              minHeight: '100px',
-              whiteSpace: 'pre-wrap',
-              fontSize: '13px',
-              lineHeight: '1.8',
-              marginTop: '15px'
-            }}>
-              {quote.remarks}
-            </div>
-          </div>
-        )}
-
-        {/* 서명란 */}
-        <div className="signature-section">
-          <div style={{ display: 'inline-block', textAlign: 'left' }}>
-            <div style={{ marginBottom: '15px', fontSize: '14px' }}>
-              상기와 같이 견적합니다.
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
-              <div>
-                <div style={{ fontSize: '13px', marginBottom: '5px' }}>{formatDate(quote.registrationDate || '')}</div>
-                <div style={{ fontSize: '15px', fontWeight: '600' }}>
-                  공급자: {companyInfo?.companyName || '-'} (인)
-                </div>
-              </div>
-              <div className="stamp-area">
-                <div className="stamp-text">
-                  (인감<br/>날인)
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 하단 안내사항 */}
-        <div className="footer-note">
-          <p style={{ fontWeight: '600', marginBottom: '8px' }}>【 유의사항 】</p>
-          <p>1. 본 견적서는 {formatDate(quote.registrationDate || '')} 기준으로 작성되었으며, 자재 가격 변동 시 조정될 수 있습니다.</p>
-          <p>2. 견적 유효기간은 발행일로부터 30일이며, 기간 경과 시 재견적이 필요합니다.</p>
-          <p>3. 제작 사양 및 수량 변경 시 견적 금액이 변동될 수 있습니다.</p>
-          <p>4. 현장 여건에 따라 추가 비용이 발생할 수 있습니다.</p>
-          <p style={{ marginTop: '12px', textAlign: 'center', fontWeight: '600' }}>
-            문의: {companyInfo?.managerName || quote.manager || '담당자'} | {companyInfo?.managerPhone || '-'}
-          </p>
-        </div>
-      </div>
-    </>
-  );
-}

src/components/quotes/index.ts

@@ -8,7 +8,6 @@ export { QuoteManagementClient } from './QuoteManagementClient';
 // 컴포넌트
 export { QuoteDocument } from './QuoteDocument';
 export { QuoteRegistration } from './QuoteRegistration';
-export { QuoteCalculationReport } from './QuoteCalculationReport';
 export { PurchaseOrderDocument } from './PurchaseOrderDocument';
 
 // 타입