From 2bf91d64f5d3cd4788ff1874b8c69a747b99e2f4 Mon Sep 17 00:00:00 2001 From: Mina Choi Date: Mon, 3 Aug 2026 09:33:06 +0900 Subject: [PATCH] =?UTF-8?q?[refactor]=20negodata/front:=20=EA=B2=AC?= =?UTF-8?q?=EC=A0=81=EB=93=B1=EB=A1=9D=20=EB=AA=A8=EB=8B=AC=20=ED=9B=85=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20+=20=EC=8B=9C=EC=9E=A5=EA=B0=80=20?= =?UTF-8?q?=EB=AA=A8=EC=88=9C=20=EC=B9=B4=EB=93=9C=20=EC=B0=A8=EB=8B=A8(10?= =?UTF-8?q?=EB=B2=88),=20=EC=97=91=EC=85=80=20=EC=97=85=EB=A1=9C=EB=93=9C?= =?UTF-8?q?=20xlsx=20=ED=8C=8C=EC=8B=B1=C2=B7CP949=20=ED=8F=B4=EB=B0=B1(7?= =?UTF-8?q?=EB=B2=88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- negodata/front/package-lock.json | 104 ++++ negodata/front/package.json | 1 + .../cards/components/CardExcelUploadModal.tsx | 10 +- .../partners/components/ExcelUploadModal.tsx | 10 +- .../products/components/ExcelUploadModal.tsx | 10 +- .../components/QuotationCreateModal.tsx | 456 ++---------------- .../components/QuotationFormParts.tsx | 237 +++++++++ .../components/quotationForm.utils.ts | 26 + .../quotations/hooks/useCardGating.tsx | 138 ++++++ .../quotations/hooks/useTargetPrice.ts | 110 +++++ negodata/front/src/lib/excel.ts | 23 +- 11 files changed, 706 insertions(+), 419 deletions(-) create mode 100644 negodata/front/src/features/quotations/components/QuotationFormParts.tsx create mode 100644 negodata/front/src/features/quotations/components/quotationForm.utils.ts create mode 100644 negodata/front/src/features/quotations/hooks/useCardGating.tsx create mode 100644 negodata/front/src/features/quotations/hooks/useTargetPrice.ts diff --git a/negodata/front/package-lock.json b/negodata/front/package-lock.json index a999bef..bf7d847 100644 --- a/negodata/front/package-lock.json +++ b/negodata/front/package-lock.json @@ -36,6 +36,7 @@ "tw-animate-css": "^1.4.0", "vaul": "^1.1.2", "vite": "^6.2.3", + "xlsx": "^0.18.5", "zod": "^4.4.3", "zustand": "^5.0.14" }, @@ -4421,6 +4422,15 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/agent-base": { "version": "7.1.4", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz", @@ -4940,6 +4950,19 @@ ], "license": "CC-BY-4.0" }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chalk": { "version": "5.6.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", @@ -5059,6 +5082,15 @@ "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==", "license": "MIT" }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5193,6 +5225,18 @@ } } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "license": "Apache-2.0", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -6672,6 +6716,15 @@ "node": ">= 0.6" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fraction.js": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", @@ -10949,6 +11002,18 @@ "node": ">=0.10.0" } }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "license": "Apache-2.0", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/statuses": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", @@ -12501,6 +12566,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/word-wrap": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", @@ -12594,6 +12677,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/negodata/front/package.json b/negodata/front/package.json index c0d21f9..92f2b1d 100644 --- a/negodata/front/package.json +++ b/negodata/front/package.json @@ -40,6 +40,7 @@ "tw-animate-css": "^1.4.0", "vaul": "^1.1.2", "vite": "^6.2.3", + "xlsx": "^0.18.5", "zod": "^4.4.3", "zustand": "^5.0.14" }, diff --git a/negodata/front/src/features/cards/components/CardExcelUploadModal.tsx b/negodata/front/src/features/cards/components/CardExcelUploadModal.tsx index adf924d..0e158aa 100644 --- a/negodata/front/src/features/cards/components/CardExcelUploadModal.tsx +++ b/negodata/front/src/features/cards/components/CardExcelUploadModal.tsx @@ -2,7 +2,7 @@ import { useMemo, useRef, useState } from 'react'; import { Upload, X, FileSpreadsheet, CheckCircle2, Trash2 } from 'lucide-react'; import { useScrollLock } from '@/lib/useScrollLock'; import { showToast } from '@/lib/notify'; -import { downloadExcel, parseCsv, todayStamp, type BulkFailure } from '@/lib/excel'; +import { downloadExcel, readSpreadsheetRows, todayStamp, type BulkFailure } from '@/lib/excel'; import { Typography } from '@/components/ui/typography'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; @@ -102,7 +102,13 @@ export function CardExcelUploadModal({ open, onConfirm, onClose }: CardExcelUplo // 업로드된 CSV를 파싱해 원본 행으로 적재(검증은 자동 파생). 헤더는 양식과 동일해야 함. const handleFile = async (file: File) => { - const parsed = parseCsv(await file.text()); + let parsed: Record[]; + try { + parsed = await readSpreadsheetRows(file); + } catch (err) { + showToast(err instanceof Error ? err.message : '파일을 읽을 수 없습니다.', 'error'); + return; + } const loaded: RawRow[] = parsed.map((r, i) => ({ id: `row-${i + 1}`, rowNum: i + 2, diff --git a/negodata/front/src/features/partners/components/ExcelUploadModal.tsx b/negodata/front/src/features/partners/components/ExcelUploadModal.tsx index 6c09cb7..2f30a4d 100644 --- a/negodata/front/src/features/partners/components/ExcelUploadModal.tsx +++ b/negodata/front/src/features/partners/components/ExcelUploadModal.tsx @@ -3,7 +3,7 @@ import { Upload, X, FileSpreadsheet, CheckCircle2, Trash2 } from 'lucide-react'; import { useScrollLock } from '@/lib/useScrollLock'; import type { ReqCreateSupplier as SupplierCreate } from '@/api/generated/model/reqCreateSupplier'; import { showToast } from '@/lib/notify'; -import { downloadExcel, parseCsv, todayStamp, type BulkFailure } from '@/lib/excel'; +import { downloadExcel, readSpreadsheetRows, todayStamp, type BulkFailure } from '@/lib/excel'; import { customFetch } from '@/api/mutator/custom-fetch'; import { Typography } from '@/components/ui/typography'; import { Input } from '@/components/ui/input'; @@ -144,7 +144,13 @@ export function ExcelUploadModal({ open, partners, onConfirm, onClose }: ExcelUp // 업로드된 CSV를 파싱해 원본 행으로 적재(검증은 자동 파생). 헤더는 양식과 동일해야 함. const handleFile = async (file: File) => { - const parsed = parseCsv(await file.text()); + let parsed: Record[]; + try { + parsed = await readSpreadsheetRows(file); + } catch (err) { + showToast(err instanceof Error ? err.message : '파일을 읽을 수 없습니다.', 'error'); + return; + } const loaded: RawRow[] = parsed.map((r, i) => ({ id: `row-${i + 1}`, rowNum: i + 2, diff --git a/negodata/front/src/features/products/components/ExcelUploadModal.tsx b/negodata/front/src/features/products/components/ExcelUploadModal.tsx index f81be20..32a386e 100644 --- a/negodata/front/src/features/products/components/ExcelUploadModal.tsx +++ b/negodata/front/src/features/products/components/ExcelUploadModal.tsx @@ -3,7 +3,7 @@ import { Upload, X, FileSpreadsheet, CheckCircle2, Trash2 } from 'lucide-react'; import { useScrollLock } from '@/lib/useScrollLock'; import type { ReqCreateItem as ItemCreate } from '@/api/generated/model/reqCreateItem'; import { showToast } from '@/lib/notify'; -import { downloadExcel, parseCsv, todayStamp, type BulkFailure } from '@/lib/excel'; +import { downloadExcel, readSpreadsheetRows, todayStamp, type BulkFailure } from '@/lib/excel'; import { customFetch } from '@/api/mutator/custom-fetch'; import { Typography } from '@/components/ui/typography'; import { Input } from '@/components/ui/input'; @@ -344,7 +344,13 @@ export function ExcelUploadModal({ open, products, onConfirm, onClose }: ExcelUp // 업로드된 CSV를 파싱해 원본 행으로 적재(검증은 자동 파생). // 헤더는 회사 라벨과 기본 헤더(구양식) 둘 다 인식한다(aliases). const handleFile = async (file: File) => { - const parsed = parseCsv(await file.text()); + let parsed: Record[]; + try { + parsed = await readSpreadsheetRows(file); + } catch (err) { + showToast(err instanceof Error ? err.message : '파일을 읽을 수 없습니다.', 'error'); + return; + } const pick = (r: Record, c: UploadColumn): string => { for (const a of c.aliases) if (r[a] !== undefined) return r[a]; return ''; diff --git a/negodata/front/src/features/quotations/components/QuotationCreateModal.tsx b/negodata/front/src/features/quotations/components/QuotationCreateModal.tsx index b4d7e4b..d7bf64f 100644 --- a/negodata/front/src/features/quotations/components/QuotationCreateModal.tsx +++ b/negodata/front/src/features/quotations/components/QuotationCreateModal.tsx @@ -1,4 +1,4 @@ -import { useState, useMemo, useEffect, useRef } from 'react'; +import { useState, useMemo, useEffect } from 'react'; import { X, PlusSquare, ArrowRight, Loader2, Gavel, CheckCheck } from 'lucide-react'; import { useNavigate } from 'react-router'; import { useListItemSupplyTypes } from '@/api/generated/supplier-item/supplier-item'; @@ -6,8 +6,7 @@ import { useListItems, useGetItem } from '@/api/generated/item/item'; import { useListSuppliers } from '@/api/generated/supplier/supplier'; import { useListCards } from '@/api/generated/card/card'; import { mapCardData } from '@/features/cards/types'; -import { CONDITION_VARIABLE, CONDITION_LABEL } from '@/features/cards/editor/variables'; -import { useLabels, useHiddenFields } from '@/features/settings/useCompanySettings'; +import { useLabels } from '@/features/settings/useCompanySettings'; import { Button } from '@/components/ui/button'; import { Typography, typographyVariants } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; @@ -20,42 +19,16 @@ import type { CreateQuotationInput } from '../hooks/useQuotations'; import { is1v1, toQuotationType, - awardStrategySummary, PriceGateAction, DEFAULT_MID_ACTION, DEFAULT_OVER_ACTION, type QuotationMode, } from '../types'; -import { supplierTypeLabel } from '@/lib/enumLabels'; import { showToast } from '@/lib/notify'; - -const INTERNET_AVERAGE_FEE = 0.078; -const TARGET_PRICE_UNIT_LIMIT_MULTIPLIER = 2; - -// datetime-local 값: 한국시간(Asia/Seoul)의 'YYYY-MM-DDTHH:mm'. -// sv-SE 로케일이 'YYYY-MM-DD HH:mm:ss' 를 주고, timeZone 명시로 브라우저 TZ 와 무관하게 KST 로 고정한다. -function toKstLocalInput(date: Date): string { - const s = date.toLocaleString('sv-SE', { timeZone: 'Asia/Seoul' }); - return s.slice(0, 16).replace(' ', 'T'); -} - -function nowKstLocalInput(): string { - return toKstLocalInput(new Date()); -} - -function defaultDueDateLocalInput(): string { - return toKstLocalInput(new Date(Date.now() + 60 * 60 * 1000)); -} - -function isFutureLocalInput(value: string): boolean { - const time = new Date(value).getTime(); - return Number.isFinite(time) && time > Date.now(); -} - -function parsePercent(value: string | undefined): number { - const n = Number(String(value ?? '').replace('%', '').trim()); - return Number.isFinite(n) ? n / 100 : 0; -} +import { defaultDueDateLocalInput, nowKstLocalInput, isFutureLocalInput } from './quotationForm.utils'; +import { SupplyTypeBadge, SelectedPartnerTable, SelectedCardTable, Segmented, AwardLinePicker } from './QuotationFormParts'; +import { useTargetPrice } from '../hooks/useTargetPrice'; +import { useCardGating } from '../hooks/useCardGating'; type QuotationCreateModalProps = { open: boolean; @@ -141,7 +114,6 @@ export function QuotationCreateModal({ // 선택 상품의 협력사별 공급유형(제조/유통/총판/없음) — 협력사 리스트에 배지로 덧붙인다(리스트 자체는 재조회 안 함). const supplyTypeQuery = useListItemSupplyTypes(productId, { query: { enabled: !!productId } }); const label = useLabels(); // 회사 설정 용어(목표 마진 등) - const isHidden = useHiddenFields(); // 회사설정으로 감춘 상품 기본필드 — 후보 리스트에서도 제외 const supplyTypeBySupplier = useMemo(() => { const m = new Map(); (supplyTypeQuery.data?.suppliers ?? []).forEach((s) => m.set(s.supplier_id, s.supply_type)); @@ -177,153 +149,49 @@ export function QuotationCreateModal({ }); const cardRows = cardQ ? (cardSearch.data?.cards ?? []).map(mapCardData) : cards; - // ── 카드 선택 게이팅: 협상 멘트에 변수명이 노출될 카드를 선택 단계에서 막는다 ── - // (1) 조건 전략(customer_condition) 미작성 — 저장 시 조건 내용이 있으면 script 에 실제 문구가 - // 주입되고(slate.serialize), 없으면 {customer_condition} 토큰이 그대로 남는다. - const conditionUnfilled = (c: NegotiationCard) => - (c.scriptPreview ?? '').includes(`{${CONDITION_VARIABLE}}`); - // (2) 인터넷 최저가({internet_lowest_price}) 인용 카드는 선택 상품에 최저가가 수집돼 있을 때만 — - // 최저가 없는 상품(items.internet_lowest_price=NULL/0)의 견적에 넣으면 협상 시 토큰이 노출된다. - // 상품 미선택 상태에선 판정 불가라 막지 않는다(상품 선택 후에만 게이팅). - const lowestUnavailable = !!productId && !(internetLowest && internetLowest > 0); - const lowestPriceLeak = (c: NegotiationCard) => - lowestUnavailable && (c.scriptPreview ?? '').includes('{internet_lowest_price}'); - // (3) 미승인 와일드카드(INACTIVE) — 목록·순위엔 보이되 선택은 막는다(수동 승인 전). - const blockReason = (c: NegotiationCard): string | null => - c.isWildcard && c.status !== 'ACTIVE' - ? '미승인 와일드카드' - : conditionUnfilled(c) - ? `${CONDITION_LABEL} 미작성` - : lowestPriceLeak(c) - ? '인터넷 최저가 미수집' - : null; - // 성공률(사용 세션 중 타결 비율) 내림차순 — 표본 없는 카드는 뒤로. 상위 3개에 1·2·3위 배지가 붙는다. - // 미승인 와일드카드도 목록·순위엔 노출(선택은 blockReason 으로 disabled). - const rankedCards = cardRows - .slice() - .sort((a, b) => b.successRate - a.successRate || b.usedCount - a.usedCount); - const cardOptions: ComboOption[] = rankedCards - .map((card, i) => { - const reason = blockReason(card); - return { - id: card.id, - label: card.title, - disabled: !!reason, - node: ( -
-
- {card.usedCount > 0 && ( - - {i + 1}위 · 성공률 {Math.round(card.successRate * 100)}% - - )} - {card.code} - - {card.isWildcard ? '와일드' : '협상'} - - {reason && ( - - {reason} - - )} -
- {card.title} -
- ), - }; - }); - // 1·2·3위 배지가 붙는 카드(상위 3개, 사용이력 있는 것만) — 기본 선택 대상. 선택 불가(조건 미작성·최저가 미수집) 카드는 제외. - const topRankedCards = rankedCards.filter((c) => !blockReason(c)).slice(0, 3).filter((c) => c.usedCount > 0); - const topRankedKey = topRankedCards.map((c) => c.id).join(','); - const autoSelectedRef = useRef(false); - - // 모달을 열면 추천 상위 3개를 기본 선택해 둔다. 열려 있는 동안 1회만 — 이후 사용자의 추가/해제는 건드리지 않는다. - useEffect(() => { - if (!open) { - autoSelectedRef.current = false; - return; - } - if (autoSelectedRef.current || topRankedCards.length === 0) return; // 목록 로드 전이면 다음 렌더에 재시도 - autoSelectedRef.current = true; - setCardDetails((m) => { - const next = new Map(m); - topRankedCards.forEach((c) => next.set(c.id, { code: c.code, title: c.title, isWildcard: c.isWildcard })); - return next; - }); - setSelectedCardIds((prev) => (prev.length > 0 ? prev : topRankedCards.map((c) => c.id))); - // topRankedKey = 목록이 확정된 시점만 감지 (배열 재생성으로 매 렌더 도는 것 방지) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [open, topRankedKey]); - - // 이미 고른 카드 중, 상품을 최저가 미수집 상품으로 바꾸면 {internet_lowest_price} 인용 카드는 자동 해제. - // (picklist disabled 는 신규 선택만 막으므로, 상품 변경 후 잔존 선택분을 여기서 정리해 노출을 막는다.) - useEffect(() => { - if (!lowestUnavailable) return; - const leakIds = new Set( - cardRows.filter((c) => (c.scriptPreview ?? '').includes('{internet_lowest_price}')).map((c) => c.id), - ); - if (leakIds.size === 0) return; - setSelectedCardIds((prev) => (prev.some((id) => leakIds.has(id)) ? prev.filter((id) => !leakIds.has(id)) : prev)); - // productId 변경 시점에만 정리 (cardRows 재생성으로 매 렌더 도는 것 방지) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [lowestUnavailable, productId]); - - // 선택된 카드 표시행 — 캐시에서 번호/유형/카드명을 읽어 검색어와 무관하게 유지한다. - const selectedCardRows = selectedCardIds.map((id) => { - const d = cardDetails.get(id); - return { id, code: d?.code ?? '', title: d?.title ?? id, isWildcard: d?.isWildcard ?? false }; + // ── 목표가 산정 (카드 게이팅이 목표가를 참조하므로 게이팅보다 먼저 계산한다) ── + const { + settingMarginPct, + negoCandidateKey, + targetBreakdown, + autoTarget, + activeCandidateKey, + effectiveApplyNego, + effectiveMdPrice, + mdRequired, + targetReady, + targetLimitExceeded, + estimatedTargetPrice, + submitMdPrice, + } = useTargetPrice({ + quotationSettings, + settingId, + productId, + isReType, + internetLowest, + purchase, + selling, + unitPrice, + mdPrice, + mdTouched, + negoTouched, + applyNego, + selectedCandidateKey, }); - const selectedSetting = quotationSettings.find((s) => s.qt_setting_id === settingId); - const settingMargin = parsePercent(selectedSetting?.target_margin); // 세팅 네고율(비율) - const settingMarginPct = +(settingMargin * 100).toFixed(1); - // 매입가 네고율 차감 여부 — 안 건드리면 세팅값(>0이면 차감), 건드리면 체크박스값. 네고율 값은 세팅값 고정. - const negoAvailable = settingMargin > 0; - const effectiveApplyNego = negoTouched ? applyNego : negoAvailable; - const margin = effectiveApplyNego ? settingMargin : 0; // 미적용이면 0 → 매입가/판매가 그대로 - const negoLabel = (base: string) => - margin > 0 ? `${base} × (1−네고율 ${+(margin * 100).toFixed(1)}%)` : `${base} (네고율 미적용)`; - // 목표가 산정 후보(계산식+결과값) — 인터넷최저가×(1−수수료)·매입가/판매가×(1−네고율). 회사설정 숨김필드는 제외(백엔드와 동일). - const targetBreakdown = [ - { key: 'internet_lowest_price', label: `${label('item.internet_lowest_price')} × (1−수수료 ${+(INTERNET_AVERAGE_FEE * 100).toFixed(1)}%)`, raw: internetLowest, rate: INTERNET_AVERAGE_FEE, show: internetLowest != null }, - { key: 'purchase_price', label: negoLabel(label('item.purchase_price')), raw: purchase, rate: margin, show: isReType && purchase != null }, - { key: 'selling_price', label: negoLabel(label('item.selling_price')), raw: selling, rate: margin, show: isReType && selling != null }, - ] - .filter((c) => c.show && c.raw != null && c.raw > 0 && !isHidden(c.key)) - // 서버 _candidates 와 동일하게 10원 단위 반올림(IMK #11) — 후보·목표가·저장값이 다 일치. - .map((c) => ({ key: c.key, label: c.label, raw: c.raw as number, value: Math.round(((c.raw as number) * (1 - c.rate)) / 10) * 10 })); - const autoTarget = targetBreakdown.length ? Math.min(...targetBreakdown.map((c) => c.value)) : null; - // 기본 채택 후보 = 최저(동률이면 첫 후보). 네고율 체크박스는 매입가 후보(없으면 판매가)에 붙인다. - const minCandidateKey = targetBreakdown.find((c) => c.value === autoTarget)?.key ?? null; - const negoCandidateKey = negoAvailable - ? (targetBreakdown.find((c) => c.key === 'purchase_price')?.key ?? targetBreakdown.find((c) => c.key === 'selling_price')?.key ?? null) - : null; - // 채택 후보 — 사용자가 고르면 그 후보, 아니면 최저. 상품 변경 등으로 선택 키가 사라지면 최저로 폴백. - const pickedCandidate = selectedCandidateKey ? targetBreakdown.find((c) => c.key === selectedCandidateKey) : undefined; - const activeCandidateKey = pickedCandidate ? pickedCandidate.key : minCandidateKey; - const targetFromCandidate = pickedCandidate ? pickedCandidate.value : autoTarget; - // 구매담당자 제시가 필드엔 채택 후보값을 미리 보여주되(IMK #4), 담당자가 직접 건드렸을 때만 md_price 로 전송한다. - // (자동값을 md 로 보내면 서버가 'MD 입력가'로 저장해 산정내역이 매입가 대신 MD로 잡히고 후보가 안 보인다.) - const effectiveMdPrice = mdTouched ? mdPrice : (targetFromCandidate != null ? String(targetFromCandidate) : mdPrice); - const mdNum = Number(effectiveMdPrice) || 0; - // 기본(최저·세팅네고)에서 벗어난 선택/토글이면 그 목표가를 md_price 로 박아 서버 저장값과 화면을 일치시킨다. - // (서버는 세팅 rate·최저로 재계산하므로, 오버라이드를 안 보내면 후보 화면과 저장 목표가가 어긋난다.) - const divergedFromDefault = negoTouched || (!!pickedCandidate && pickedCandidate.key !== minCandidateKey); - const submitMdPrice = mdTouched && mdPrice - ? Number(mdPrice) - : divergedFromDefault && targetFromCandidate != null - ? targetFromCandidate - : null; - const hasItemCandidate = internetLowest != null || (isReType && (purchase != null || selling != null)); - const mdRequired = !!productId && !hasItemCandidate; - const targetReady = mdNum > 0 || hasItemCandidate; - // 최종 목표가 = 제시가(자동/수동) 있으면 그 값, 없으면 채택 후보값. - const estimatedTargetPrice = mdNum > 0 ? mdNum : targetFromCandidate; - const targetPriceLimit = unitPrice != null && unitPrice > 0 - ? unitPrice * TARGET_PRICE_UNIT_LIMIT_MULTIPLIER - : null; - const targetLimitExceeded = targetPriceLimit != null && estimatedTargetPrice != null && estimatedTargetPrice > targetPriceLimit; + // ── 카드 선택 게이팅 — 부적합 카드 disabled·자동 선택/해제(useCardGating 이 소유) ── + const { blockReason, cardOptions, selectedCardRows } = useCardGating({ + cardRows, + productId, + internetLowest, + estimatedTargetPrice, + open, + selectedCardIds, + cardDetails, + setSelectedCardIds, + setCardDetails, + }); if (!open) return null; const selectMode = (next: QuotationMode) => { @@ -815,235 +683,3 @@ export function QuotationCreateModal({ ); } - -// ── 헬퍼 컴포넌트 (메인 아래) ────────────────────────────────────────────── - -// 협력사 상품조달유형 배지 — type undefined = 유형 미지정(매핑 없음). 초청 협력사는 그 상품을 공급하므로 '미취급'이 아니라 '미정'. -function SupplyTypeBadge({ type }: { type?: number }) { - if (type === undefined) { - return ( - - 미정 - - ); - } - return ( - - {supplierTypeLabel(type)} - - ); -} - -// 선택된 협력사 테이블 — 콤보로 담은 협력사를 검색어와 무관하게 고정 노출한다. 취급유형 컬럼은 상품 선택 시에만. -function SelectedPartnerTable({ - rows, - supplyTypeBySupplier, - showSupplyType, - onRemove, -}: { - rows: { id: string; name: string; email: string }[]; - supplyTypeBySupplier: Map; - showSupplyType: boolean; - onRemove: (id: string) => void; -}) { - if (rows.length === 0) { - return ( -
- - 담긴 협력사가 없습니다 — 위에서 검색해 담아주세요. - -
- ); - } - return ( -
- - - - - - {showSupplyType && } - - - - {rows.map((r) => ( - - - - {showSupplyType && } - - - ))} - -
협력사명담당자 이메일상품조달유형 -
{r.name}{r.email || '-'} - -
-
- ); -} - -// 선택된 카드 테이블 — 콤보로 담은 협상/와일드카드를 검색어와 무관하게 고정 노출한다. -function SelectedCardTable({ - rows, - onRemove, -}: { - rows: { id: string; code: string; title: string; isWildcard: boolean }[]; - onRemove: (id: string) => void; -}) { - if (rows.length === 0) { - return ( -
- - 담긴 카드가 없습니다 — 위에서 검색해 담아주세요. - -
- ); - } - return ( -
- - - - - - - - - - {rows.map((r) => ( - - - - - - - ))} - -
카드번호유형카드명 -
{r.code} - - {r.isWildcard ? '와일드' : '협상'} - - {r.title} - -
-
- ); -} - -// 세그먼트 컨트롤 — 소수의 명명된 이산 선택(진행 방식·대상)에 라디오보다 명확. 값은 문자열. -function Segmented({ - options, - value, - onChange, -}: { - options: { value: string; label: string; sub?: string }[]; - value: string; - onChange: (v: string) => void; -}) { - return ( -
- {options.map((o) => { - const active = o.value === value; - return ( - - ); - })} -
- ); -} - -// 낙찰 기준 컨트롤 — 스펙트럼 선(線) 위 구간을 눌러 낙찰↔개찰 전환. 앵커 이하는 항상 낙찰(고정, 표시만) — -// '앵커~목표가'(mid_action)·'목표가 초과'(over_action) 두 구간만 사용자가 각각 낙찰/개찰로 정한다. -function AwardLinePicker({ - mid, over, onMid, onOver, -}: { - mid: number; - over: number; - onMid: (v: number) => void; - onOver: (v: number) => void; -}) { - const A = PriceGateAction.AWARD; - const O = PriceGateAction.OPEN; - const zones = [ - { label: '앵커링가 이하', win: true, locked: true, toggle: undefined }, - { label: '앵커링가~목표가', win: mid === A, locked: false, toggle: () => onMid(mid === A ? O : A) }, - { label: '목표가 초과', win: over === A, locked: false, toggle: () => onOver(over === A ? O : A) }, - ]; - return ( -
-
- 낙찰 기준 - 구간을 눌러 낙찰↔개찰 · 싸다◀▶비싸다 -
- - 협력사 최저 투찰가가 어느 구간에 오느냐로 낙찰/개찰이 정해집니다. - - {/* 스펙트럼 선: 구간이 곧 선택 버튼 */} -
- {zones.map((z, i) => { - const body = ( - <> - {z.label} - - {z.win ? '낙찰' : '개찰'}{z.locked ? ' 🔒' : ''} - - - ); - const cls = cn('flex-1 px-1 py-2', i > 0 && 'border-l border-border', z.win ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-muted'); - return z.locked ? ( -
{body}
- ) : ( - - ); - })} -
- {/* 경계 마커 — 구간 경계(1/3·2/3)에 ▲ 중앙 정렬(앵커링가·목표가) */} -
- {[ - { left: '33.3333%', label: '앵커링가' }, - { left: '66.6667%', label: '목표가' }, - ].map((mk) => ( - - ▲ - {mk.label} - - ))} -
- {/* 전략 한 줄 요약(관대/기본/엄격 전략) — 기본 전략(목표가까지 낙찰·초과 개찰)일 때만 경계가 애매하니 '목표가 포함' 부기 */} - {(() => { - const t = awardStrategySummary(mid, over); - const isBasic = mid === PriceGateAction.AWARD && over === PriceGateAction.OPEN; - return ( - - {t.strategy} - · {t.desc} - {isBasic && ( - · 목표가 포함 - )} - - ); - })()} -
- ); -} diff --git a/negodata/front/src/features/quotations/components/QuotationFormParts.tsx b/negodata/front/src/features/quotations/components/QuotationFormParts.tsx new file mode 100644 index 0000000..54f36be --- /dev/null +++ b/negodata/front/src/features/quotations/components/QuotationFormParts.tsx @@ -0,0 +1,237 @@ +import { X } from 'lucide-react'; +import { Typography } from '@/components/ui/typography'; +import { cn } from '@/lib/utils'; +import { supplierTypeLabel } from '@/lib/enumLabels'; +import { awardStrategySummary, PriceGateAction } from '../types'; + +// 견적 등록 모달의 프레젠테이션 하위 컴포넌트 모음 — 상태 없음(순수 props). QuotationCreateModal 에서 분리. + +// 협력사 상품조달유형 배지 — type undefined = 유형 미지정(매핑 없음). 초청 협력사는 그 상품을 공급하므로 '미취급'이 아니라 '미정'. +export function SupplyTypeBadge({ type }: { type?: number }) { + if (type === undefined) { + return ( + + 미정 + + ); + } + return ( + + {supplierTypeLabel(type)} + + ); +} + +// 선택된 협력사 테이블 — 콤보로 담은 협력사를 검색어와 무관하게 고정 노출한다. 취급유형 컬럼은 상품 선택 시에만. +export function SelectedPartnerTable({ + rows, + supplyTypeBySupplier, + showSupplyType, + onRemove, +}: { + rows: { id: string; name: string; email: string }[]; + supplyTypeBySupplier: Map; + showSupplyType: boolean; + onRemove: (id: string) => void; +}) { + if (rows.length === 0) { + return ( +
+ + 담긴 협력사가 없습니다 — 위에서 검색해 담아주세요. + +
+ ); + } + return ( +
+ + + + + + {showSupplyType && } + + + + {rows.map((r) => ( + + + + {showSupplyType && } + + + ))} + +
협력사명담당자 이메일상품조달유형 +
{r.name}{r.email || '-'} + +
+
+ ); +} + +// 선택된 카드 테이블 — 콤보로 담은 협상/와일드카드를 검색어와 무관하게 고정 노출한다. +export function SelectedCardTable({ + rows, + onRemove, +}: { + rows: { id: string; code: string; title: string; isWildcard: boolean }[]; + onRemove: (id: string) => void; +}) { + if (rows.length === 0) { + return ( +
+ + 담긴 카드가 없습니다 — 위에서 검색해 담아주세요. + +
+ ); + } + return ( +
+ + + + + + + + + + {rows.map((r) => ( + + + + + + + ))} + +
카드번호유형카드명 +
{r.code} + + {r.isWildcard ? '와일드' : '협상'} + + {r.title} + +
+
+ ); +} + +// 세그먼트 컨트롤 — 소수의 명명된 이산 선택(진행 방식·대상)에 라디오보다 명확. 값은 문자열. +export function Segmented({ + options, + value, + onChange, +}: { + options: { value: string; label: string; sub?: string }[]; + value: string; + onChange: (v: string) => void; +}) { + return ( +
+ {options.map((o) => { + const active = o.value === value; + return ( + + ); + })} +
+ ); +} + +// 낙찰 기준 컨트롤 — 스펙트럼 선(線) 위 구간을 눌러 낙찰↔개찰 전환. 앵커 이하는 항상 낙찰(고정, 표시만) — +// '앵커~목표가'(mid_action)·'목표가 초과'(over_action) 두 구간만 사용자가 각각 낙찰/개찰로 정한다. +export function AwardLinePicker({ + mid, over, onMid, onOver, +}: { + mid: number; + over: number; + onMid: (v: number) => void; + onOver: (v: number) => void; +}) { + const A = PriceGateAction.AWARD; + const O = PriceGateAction.OPEN; + const zones = [ + { label: '앵커링가 이하', win: true, locked: true, toggle: undefined }, + { label: '앵커링가~목표가', win: mid === A, locked: false, toggle: () => onMid(mid === A ? O : A) }, + { label: '목표가 초과', win: over === A, locked: false, toggle: () => onOver(over === A ? O : A) }, + ]; + return ( +
+
+ 낙찰 기준 + 구간을 눌러 낙찰↔개찰 · 싸다◀▶비싸다 +
+ + 협력사 최저 투찰가가 어느 구간에 오느냐로 낙찰/개찰이 정해집니다. + + {/* 스펙트럼 선: 구간이 곧 선택 버튼 */} +
+ {zones.map((z, i) => { + const body = ( + <> + {z.label} + + {z.win ? '낙찰' : '개찰'}{z.locked ? ' 🔒' : ''} + + + ); + const cls = cn('flex-1 px-1 py-2', i > 0 && 'border-l border-border', z.win ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-muted'); + return z.locked ? ( +
{body}
+ ) : ( + + ); + })} +
+ {/* 경계 마커 — 구간 경계(1/3·2/3)에 ▲ 중앙 정렬(앵커링가·목표가) */} +
+ {[ + { left: '33.3333%', label: '앵커링가' }, + { left: '66.6667%', label: '목표가' }, + ].map((mk) => ( + + ▲ + {mk.label} + + ))} +
+ {/* 전략 한 줄 요약(관대/기본/엄격 전략) — 기본 전략(목표가까지 낙찰·초과 개찰)일 때만 경계가 애매하니 '목표가 포함' 부기 */} + {(() => { + const t = awardStrategySummary(mid, over); + const isBasic = mid === PriceGateAction.AWARD && over === PriceGateAction.OPEN; + return ( + + {t.strategy} + · {t.desc} + {isBasic && ( + · 목표가 포함 + )} + + ); + })()} +
+ ); +} diff --git a/negodata/front/src/features/quotations/components/quotationForm.utils.ts b/negodata/front/src/features/quotations/components/quotationForm.utils.ts new file mode 100644 index 0000000..8f41d73 --- /dev/null +++ b/negodata/front/src/features/quotations/components/quotationForm.utils.ts @@ -0,0 +1,26 @@ +// 견적 등록 폼 공용 헬퍼 — datetime-local(KST) 변환과 퍼센트 파싱. QuotationCreateModal 에서 분리. + +// datetime-local 값: 한국시간(Asia/Seoul)의 'YYYY-MM-DDTHH:mm'. +// sv-SE 로케일이 'YYYY-MM-DD HH:mm:ss' 를 주고, timeZone 명시로 브라우저 TZ 와 무관하게 KST 로 고정한다. +function toKstLocalInput(date: Date): string { + const s = date.toLocaleString('sv-SE', { timeZone: 'Asia/Seoul' }); + return s.slice(0, 16).replace(' ', 'T'); +} + +export function nowKstLocalInput(): string { + return toKstLocalInput(new Date()); +} + +export function defaultDueDateLocalInput(): string { + return toKstLocalInput(new Date(Date.now() + 60 * 60 * 1000)); +} + +export function isFutureLocalInput(value: string): boolean { + const time = new Date(value).getTime(); + return Number.isFinite(time) && time > Date.now(); +} + +export function parsePercent(value: string | undefined): number { + const n = Number(String(value ?? '').replace('%', '').trim()); + return Number.isFinite(n) ? n / 100 : 0; +} diff --git a/negodata/front/src/features/quotations/hooks/useCardGating.tsx b/negodata/front/src/features/quotations/hooks/useCardGating.tsx new file mode 100644 index 0000000..e7dd9ba --- /dev/null +++ b/negodata/front/src/features/quotations/hooks/useCardGating.tsx @@ -0,0 +1,138 @@ +import { useEffect, useRef, type Dispatch, type SetStateAction } from 'react'; +import { Typography } from '@/components/ui/typography'; +import { type ComboOption } from '@/components/ui/combobox'; +import { CONDITION_VARIABLE, CONDITION_LABEL } from '@/features/cards/editor/variables'; +import type { NegotiationCard } from '../types'; + +type CardDetail = { code: string; title: string; isWildcard: boolean }; + +type UseCardGatingParams = { + cardRows: NegotiationCard[]; + productId: string; + internetLowest: number | null; + estimatedTargetPrice: number | null; + open: boolean; + selectedCardIds: string[]; + cardDetails: Map; + setSelectedCardIds: Dispatch>; + setCardDetails: Dispatch>>; +}; + +// 카드 선택 게이팅 — 협상 멘트에 변수 토큰이 그대로 노출되거나 논리가 모순되는 카드를 선택 단계에서 막는다. +// 추천 상위 3개 자동 선택·부적합 카드 자동 해제 effect 도 여기서 소유한다(상태는 컴포넌트가 보유, 세터로 갱신). +export function useCardGating({ + cardRows, + productId, + internetLowest, + estimatedTargetPrice, + open, + selectedCardIds, + cardDetails, + setSelectedCardIds, + setCardDetails, +}: UseCardGatingParams) { + // (1) 조건 전략(customer_condition) 미작성 — 저장 시 조건 내용이 있으면 script 에 실제 문구가 + // 주입되고(slate.serialize), 없으면 {customer_condition} 토큰이 그대로 남는다. + const conditionUnfilled = (c: NegotiationCard) => + (c.scriptPreview ?? '').includes(`{${CONDITION_VARIABLE}}`); + // 시장가(인터넷최저가) 인용 카드({internet_lowest_price} 토큰)인지 — (2)·(4) 공용 술어. + const citesInternetLowest = (c: NegotiationCard) => (c.scriptPreview ?? '').includes('{internet_lowest_price}'); + // (2) 인터넷 최저가 인용 카드는 선택 상품에 최저가가 수집돼 있을 때만 — + // 최저가 없는 상품(items.internet_lowest_price=NULL/0)의 견적에 넣으면 협상 시 토큰이 노출된다. + // 상품 미선택 상태에선 판정 불가라 막지 않는다(상품 선택 후에만 게이팅). + const lowestUnavailable = !!productId && !(internetLowest && internetLowest > 0); + const lowestPriceLeak = (c: NegotiationCard) => lowestUnavailable && citesInternetLowest(c); + // (4) 시장가 논리 모순 — 인터넷최저가 ≥ 목표가면 "시장가가 더 싸다" 근거가 성립 안 한다. + // 이런 상품에 시장가 인용 카드를 넣으면 목표가보다 높은 값을 근거로 깎으라는 모순 멘트가 나간다. + const lowestAboveTarget = internetLowest != null && estimatedTargetPrice != null && internetLowest >= estimatedTargetPrice; + const marketContradiction = (c: NegotiationCard) => lowestAboveTarget && citesInternetLowest(c); + // (3) 미승인 와일드카드(INACTIVE) — 목록·순위엔 보이되 선택은 막는다(수동 승인 전). + const blockReason = (c: NegotiationCard): string | null => + c.isWildcard && c.status !== 'ACTIVE' + ? '미승인 와일드카드' + : conditionUnfilled(c) + ? `${CONDITION_LABEL} 미작성` + : lowestPriceLeak(c) + ? '인터넷 최저가 미수집' + : marketContradiction(c) + ? '시장가 근거 성립 불가' + : null; + // 성공률(사용 세션 중 타결 비율) 내림차순 — 표본 없는 카드는 뒤로. 상위 3개에 1·2·3위 배지가 붙는다. + // 미승인 와일드카드도 목록·순위엔 노출(선택은 blockReason 으로 disabled). + const rankedCards = cardRows + .slice() + .sort((a, b) => b.successRate - a.successRate || b.usedCount - a.usedCount); + const cardOptions: ComboOption[] = rankedCards + .map((card, i) => { + const reason = blockReason(card); + return { + id: card.id, + label: card.title, + disabled: !!reason, + node: ( +
+
+ {card.usedCount > 0 && ( + + {i + 1}위 · 성공률 {Math.round(card.successRate * 100)}% + + )} + {card.code} + + {card.isWildcard ? '와일드' : '협상'} + + {reason && ( + + {reason} + + )} +
+ {card.title} +
+ ), + }; + }); + + // 1·2·3위 배지가 붙는 카드(상위 3개, 사용이력 있는 것만) — 기본 선택 대상. 선택 불가(조건 미작성·최저가 미수집) 카드는 제외. + const topRankedCards = rankedCards.filter((c) => !blockReason(c)).slice(0, 3).filter((c) => c.usedCount > 0); + const topRankedKey = topRankedCards.map((c) => c.id).join(','); + const autoSelectedRef = useRef(false); + + // 모달을 열면 추천 상위 3개를 기본 선택해 둔다. 열려 있는 동안 1회만 — 이후 사용자의 추가/해제는 건드리지 않는다. + useEffect(() => { + if (!open) { + autoSelectedRef.current = false; + return; + } + if (autoSelectedRef.current || topRankedCards.length === 0) return; // 목록 로드 전이면 다음 렌더에 재시도 + autoSelectedRef.current = true; + setCardDetails((m) => { + const next = new Map(m); + topRankedCards.forEach((c) => next.set(c.id, { code: c.code, title: c.title, isWildcard: c.isWildcard })); + return next; + }); + setSelectedCardIds((prev) => (prev.length > 0 ? prev : topRankedCards.map((c) => c.id))); + // topRankedKey = 목록이 확정된 시점만 감지 (배열 재생성으로 매 렌더 도는 것 방지) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open, topRankedKey]); + + // 이미 고른 카드 중, 시장가 인용 카드({internet_lowest_price})가 부적합해지면 자동 해제. + // 부적합 = 최저가 미수집(lowestUnavailable) 또는 인터넷최저가 ≥ 목표가(lowestAboveTarget, 시장가 근거 모순). + // (picklist disabled 는 신규 선택만 막으므로, 상품·목표가 변경 후 잔존 선택분을 여기서 정리해 노출·모순을 막는다.) + useEffect(() => { + if (!lowestUnavailable && !lowestAboveTarget) return; + const leakIds = new Set(cardRows.filter(citesInternetLowest).map((c) => c.id)); + if (leakIds.size === 0) return; + setSelectedCardIds((prev) => (prev.some((id) => leakIds.has(id)) ? prev.filter((id) => !leakIds.has(id)) : prev)); + // 상품·목표가 변경 시점에만 정리 (cardRows 재생성으로 매 렌더 도는 것 방지) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [lowestUnavailable, lowestAboveTarget, productId]); + + // 선택된 카드 표시행 — 캐시에서 번호/유형/카드명을 읽어 검색어와 무관하게 유지한다. + const selectedCardRows = selectedCardIds.map((id) => { + const d = cardDetails.get(id); + return { id, code: d?.code ?? '', title: d?.title ?? id, isWildcard: d?.isWildcard ?? false }; + }); + + return { blockReason, cardOptions, selectedCardRows }; +} diff --git a/negodata/front/src/features/quotations/hooks/useTargetPrice.ts b/negodata/front/src/features/quotations/hooks/useTargetPrice.ts new file mode 100644 index 0000000..96e4ad6 --- /dev/null +++ b/negodata/front/src/features/quotations/hooks/useTargetPrice.ts @@ -0,0 +1,110 @@ +import { useLabels, useHiddenFields } from '@/features/settings/useCompanySettings'; +import type { QuotationSetting } from '../types'; +import { parsePercent } from '../components/quotationForm.utils'; + +const INTERNET_AVERAGE_FEE = 0.078; +const TARGET_PRICE_UNIT_LIMIT_MULTIPLIER = 2; + +type UseTargetPriceParams = { + quotationSettings: QuotationSetting[]; + settingId: string; + productId: string; + isReType: boolean; + // 상품 가격 속성(읽기전용) — 상품 미선택/미수집이면 null. + internetLowest: number | null; + purchase: number | null; + selling: number | null; + unitPrice: number | null; + // 목표가 입력·후보 선택 상태. + mdPrice: string; + mdTouched: boolean; + negoTouched: boolean; + applyNego: boolean; + selectedCandidateKey: string | null; +}; + +// 견적 목표가 산정 — 세팅 네고율·상품 후보(인터넷최저가/매입가/판매가)에서 목표가 후보와 채택값을 파생한다. +// 순수 파생(부작용 없음). 카드 게이팅이 estimatedTargetPrice 를 참조하므로 그보다 먼저 호출한다. +export function useTargetPrice({ + quotationSettings, + settingId, + productId, + isReType, + internetLowest, + purchase, + selling, + unitPrice, + mdPrice, + mdTouched, + negoTouched, + applyNego, + selectedCandidateKey, +}: UseTargetPriceParams) { + const label = useLabels(); // 회사 설정 용어(목표 마진 등) + const isHidden = useHiddenFields(); // 회사설정으로 감춘 상품 기본필드 — 후보 리스트에서도 제외 + + const selectedSetting = quotationSettings.find((s) => s.qt_setting_id === settingId); + const settingMargin = parsePercent(selectedSetting?.target_margin); // 세팅 네고율(비율) + const settingMarginPct = +(settingMargin * 100).toFixed(1); + // 매입가 네고율 차감 여부 — 안 건드리면 세팅값(>0이면 차감), 건드리면 체크박스값. 네고율 값은 세팅값 고정. + const negoAvailable = settingMargin > 0; + const effectiveApplyNego = negoTouched ? applyNego : negoAvailable; + const margin = effectiveApplyNego ? settingMargin : 0; // 미적용이면 0 → 매입가/판매가 그대로 + const negoLabel = (base: string) => + margin > 0 ? `${base} × (1−네고율 ${+(margin * 100).toFixed(1)}%)` : `${base} (네고율 미적용)`; + // 목표가 산정 후보(계산식+결과값) — 인터넷최저가×(1−수수료)·매입가/판매가×(1−네고율). 회사설정 숨김필드는 제외(백엔드와 동일). + const targetBreakdown = [ + { key: 'internet_lowest_price', label: `${label('item.internet_lowest_price')} × (1−수수료 ${+(INTERNET_AVERAGE_FEE * 100).toFixed(1)}%)`, raw: internetLowest, rate: INTERNET_AVERAGE_FEE, show: internetLowest != null }, + { key: 'purchase_price', label: negoLabel(label('item.purchase_price')), raw: purchase, rate: margin, show: isReType && purchase != null }, + { key: 'selling_price', label: negoLabel(label('item.selling_price')), raw: selling, rate: margin, show: isReType && selling != null }, + ] + .filter((c) => c.show && c.raw != null && c.raw > 0 && !isHidden(c.key)) + // 서버 _candidates 와 동일하게 10원 단위 반올림(IMK #11) — 후보·목표가·저장값이 다 일치. + .map((c) => ({ key: c.key, label: c.label, raw: c.raw as number, value: Math.round(((c.raw as number) * (1 - c.rate)) / 10) * 10 })); + const autoTarget = targetBreakdown.length ? Math.min(...targetBreakdown.map((c) => c.value)) : null; + // 기본 채택 후보 = 최저(동률이면 첫 후보). 네고율 체크박스는 매입가 후보(없으면 판매가)에 붙인다. + const minCandidateKey = targetBreakdown.find((c) => c.value === autoTarget)?.key ?? null; + const negoCandidateKey = negoAvailable + ? (targetBreakdown.find((c) => c.key === 'purchase_price')?.key ?? targetBreakdown.find((c) => c.key === 'selling_price')?.key ?? null) + : null; + // 채택 후보 — 사용자가 고르면 그 후보, 아니면 최저. 상품 변경 등으로 선택 키가 사라지면 최저로 폴백. + const pickedCandidate = selectedCandidateKey ? targetBreakdown.find((c) => c.key === selectedCandidateKey) : undefined; + const activeCandidateKey = pickedCandidate ? pickedCandidate.key : minCandidateKey; + const targetFromCandidate = pickedCandidate ? pickedCandidate.value : autoTarget; + // 구매담당자 제시가 필드엔 채택 후보값을 미리 보여주되(IMK #4), 담당자가 직접 건드렸을 때만 md_price 로 전송한다. + // (자동값을 md 로 보내면 서버가 'MD 입력가'로 저장해 산정내역이 매입가 대신 MD로 잡히고 후보가 안 보인다.) + const effectiveMdPrice = mdTouched ? mdPrice : (targetFromCandidate != null ? String(targetFromCandidate) : mdPrice); + const mdNum = Number(effectiveMdPrice) || 0; + // 기본(최저·세팅네고)에서 벗어난 선택/토글이면 그 목표가를 md_price 로 박아 서버 저장값과 화면을 일치시킨다. + // (서버는 세팅 rate·최저로 재계산하므로, 오버라이드를 안 보내면 후보 화면과 저장 목표가가 어긋난다.) + const divergedFromDefault = negoTouched || (!!pickedCandidate && pickedCandidate.key !== minCandidateKey); + const submitMdPrice = mdTouched && mdPrice + ? Number(mdPrice) + : divergedFromDefault && targetFromCandidate != null + ? targetFromCandidate + : null; + const hasItemCandidate = internetLowest != null || (isReType && (purchase != null || selling != null)); + const mdRequired = !!productId && !hasItemCandidate; + const targetReady = mdNum > 0 || hasItemCandidate; + // 최종 목표가 = 제시가(자동/수동) 있으면 그 값, 없으면 채택 후보값. + const estimatedTargetPrice = mdNum > 0 ? mdNum : targetFromCandidate; + const targetPriceLimit = unitPrice != null && unitPrice > 0 + ? unitPrice * TARGET_PRICE_UNIT_LIMIT_MULTIPLIER + : null; + const targetLimitExceeded = targetPriceLimit != null && estimatedTargetPrice != null && estimatedTargetPrice > targetPriceLimit; + + return { + settingMarginPct, + negoCandidateKey, + targetBreakdown, + autoTarget, + activeCandidateKey, + effectiveApplyNego, + effectiveMdPrice, + mdRequired, + targetReady, + targetLimitExceeded, + estimatedTargetPrice, + submitMdPrice, + }; +} diff --git a/negodata/front/src/lib/excel.ts b/negodata/front/src/lib/excel.ts index d4c7516..8aba898 100644 --- a/negodata/front/src/lib/excel.ts +++ b/negodata/front/src/lib/excel.ts @@ -1,6 +1,5 @@ -// 범용 엑셀(CSV) 내보내기. 클라이언트에서 Blob 다운로드 — 의존성 없음. -// 한글이 Excel에서 깨지지 않도록 UTF-8 BOM을 붙인다. 여러 페이지에서 재사용. -// 진짜 .xlsx(서식/다중시트)가 필요해지면 이 함수 시그니처 유지한 채 SheetJS로 교체 가능. +// 범용 엑셀 내보내기(CSV, UTF-8 BOM)와 업로드 읽기(.xlsx/.xls/.csv). 여러 페이지에서 재사용. +import * as XLSX from 'xlsx'; export type ExcelColumn = { header: string; @@ -63,6 +62,24 @@ function tokenizeCsv(text: string): string[][] { return rows; } +// 업로드 파일 → 행 객체 배열. 진짜 엑셀(.xlsx/.xls)은 SheetJS 로, CSV 는 CP949 폴백으로 읽는다. +export async function readSpreadsheetRows(file: File): Promise[]> { + const buf = new Uint8Array(await file.arrayBuffer()); + const isBinary = (buf[0] === 0x50 && buf[1] === 0x4b) || (buf[0] === 0xd0 && buf[1] === 0xcf); // .xlsx=ZIP, .xls=OLE + if (isBinary) { + const wb = XLSX.read(buf, { type: 'array' }); + const sheet = wb.Sheets[wb.SheetNames[0]]; + return sheet ? parseCsv(XLSX.utils.sheet_to_csv(sheet)) : []; + } + let text: string; + try { + text = new TextDecoder('utf-8', { fatal: true }).decode(buf); + } catch { + text = new TextDecoder('euc-kr').decode(buf); // 한국 Excel 의 CSV 기본 인코딩 + } + return parseCsv(text); +} + // CSV 텍스트 → 헤더 키로 매핑된 객체 배열. 첫 행을 헤더로 본다. 여러 페이지 업로드에서 재사용. export function parseCsv(text: string): Record[] { const rows = tokenizeCsv(text);