feat: 단가관리 페이지 마이그레이션 및 HR 관리 기능 추가
## 단가관리 (Pricing Management) - 단가 목록 페이지 (IntegratedListTemplateV2 공통 템플릿 적용) - 단가 등록/수정 폼 (원가/마진 자동 계산) - 이력 조회, 수정 이력, 최종 확정 다이얼로그 - 판매관리 > 단가관리 네비게이션 메뉴 추가 ## HR 관리 (Human Resources) - 사원관리 (목록, 등록, 수정, 상세, CSV 업로드) - 부서관리 (트리 구조) - 근태관리 (기본 구조) ## 품목관리 개선 - Radix UI Select controlled mode 버그 수정 (key prop 적용) - DynamicItemForm 파일 업로드 지원 - 수정 페이지 데이터 로딩 개선 ## 문서화 - 단가관리 마이그레이션 체크리스트 - HR 관리 구현 체크리스트 - Radix UI Select 버그 수정 가이드 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
769
src/components/pricing/PricingFormClient.tsx
Normal file
769
src/components/pricing/PricingFormClient.tsx
Normal file
@@ -0,0 +1,769 @@
|
||||
/**
|
||||
* 단가 등록/수정 폼 클라이언트 컴포넌트
|
||||
*
|
||||
* 기능:
|
||||
* - 품목 정보 표시 (읽기전용)
|
||||
* - 단가 정보 입력
|
||||
* - 원가/마진 자동 계산
|
||||
* - 반올림 규칙 적용
|
||||
* - 수정 이력 관리
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
DollarSign,
|
||||
Package,
|
||||
ArrowLeft,
|
||||
Save,
|
||||
Calculator,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
History,
|
||||
CheckCircle2,
|
||||
Lock,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import type {
|
||||
PricingData,
|
||||
PricingFormData,
|
||||
ItemInfo,
|
||||
RoundingRule,
|
||||
ItemType,
|
||||
} from './types';
|
||||
import {
|
||||
ITEM_TYPE_LABELS,
|
||||
UNIT_OPTIONS,
|
||||
ROUNDING_RULE_OPTIONS,
|
||||
ROUNDING_UNIT_OPTIONS,
|
||||
} from './types';
|
||||
|
||||
// 다이얼로그 컴포넌트들 (추후 분리)
|
||||
import { PricingHistoryDialog } from './PricingHistoryDialog';
|
||||
import { PricingRevisionDialog } from './PricingRevisionDialog';
|
||||
import { PricingFinalizeDialog } from './PricingFinalizeDialog';
|
||||
|
||||
interface PricingFormClientProps {
|
||||
mode: 'create' | 'edit';
|
||||
itemInfo?: ItemInfo;
|
||||
initialData?: PricingData;
|
||||
onSave?: (data: PricingData, isRevision?: boolean, revisionReason?: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function PricingFormClient({
|
||||
mode,
|
||||
itemInfo,
|
||||
initialData,
|
||||
onSave,
|
||||
}: PricingFormClientProps) {
|
||||
const router = useRouter();
|
||||
const isEditMode = mode === 'edit';
|
||||
|
||||
// 품목 정보 (신규: itemInfo, 수정: initialData)
|
||||
const displayItemCode = initialData?.itemCode || itemInfo?.itemCode || '';
|
||||
const displayItemName = initialData?.itemName || itemInfo?.itemName || '';
|
||||
const displayItemType = initialData?.itemType || itemInfo?.itemType || '';
|
||||
const displaySpecification = initialData?.specification || itemInfo?.specification || '';
|
||||
const displayUnit = initialData?.unit || itemInfo?.unit || 'EA';
|
||||
|
||||
// 폼 상태
|
||||
const [effectiveDate, setEffectiveDate] = useState(
|
||||
initialData?.effectiveDate || new Date().toISOString().split('T')[0]
|
||||
);
|
||||
const [receiveDate, setReceiveDate] = useState(initialData?.receiveDate || '');
|
||||
const [author, setAuthor] = useState(initialData?.author || '');
|
||||
const [purchasePrice, setPurchasePrice] = useState(initialData?.purchasePrice || 0);
|
||||
const [processingCost, setProcessingCost] = useState(initialData?.processingCost || 0);
|
||||
const [loss, setLoss] = useState(initialData?.loss || 0);
|
||||
const [roundingRule, setRoundingRule] = useState<RoundingRule>(
|
||||
initialData?.roundingRule || 'round'
|
||||
);
|
||||
const [roundingUnit, setRoundingUnit] = useState(initialData?.roundingUnit || 1);
|
||||
const [marginRate, setMarginRate] = useState(initialData?.marginRate || 0);
|
||||
const [salesPrice, setSalesPrice] = useState(initialData?.salesPrice || 0);
|
||||
const [supplier, setSupplier] = useState(initialData?.supplier || '');
|
||||
const [note, setNote] = useState(initialData?.note || '');
|
||||
const [unit, setUnit] = useState(displayUnit);
|
||||
|
||||
// 에러 상태
|
||||
const [errors, setErrors] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 다이얼로그 상태
|
||||
const [showHistoryDialog, setShowHistoryDialog] = useState(false);
|
||||
const [showRevisionDialog, setShowRevisionDialog] = useState(false);
|
||||
const [showFinalizeDialog, setShowFinalizeDialog] = useState(false);
|
||||
|
||||
// 로딩 상태
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 반올림 적용 함수
|
||||
const applyRounding = useCallback(
|
||||
(value: number, rule: RoundingRule, unit: number): number => {
|
||||
if (unit <= 0) return Math.round(value);
|
||||
switch (rule) {
|
||||
case 'ceil':
|
||||
return Math.ceil(value / unit) * unit;
|
||||
case 'floor':
|
||||
return Math.floor(value / unit) * unit;
|
||||
default:
|
||||
return Math.round(value / unit) * unit;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// LOSS 적용 원가 계산
|
||||
const costWithLoss = useMemo(() => {
|
||||
const basePrice = (purchasePrice || 0) + (processingCost || 0);
|
||||
const lossRate = (loss || 0) / 100;
|
||||
return Math.round(basePrice * (1 + lossRate));
|
||||
}, [purchasePrice, processingCost, loss]);
|
||||
|
||||
// 마진율 → 판매단가 계산
|
||||
const handleMarginRateChange = useCallback(
|
||||
(rate: number) => {
|
||||
setMarginRate(rate);
|
||||
if (costWithLoss > 0) {
|
||||
const calculatedPrice = costWithLoss * (1 + rate / 100);
|
||||
const roundedPrice = applyRounding(calculatedPrice, roundingRule, roundingUnit);
|
||||
setSalesPrice(Math.round(roundedPrice));
|
||||
} else {
|
||||
setSalesPrice(0);
|
||||
}
|
||||
},
|
||||
[costWithLoss, roundingRule, roundingUnit, applyRounding]
|
||||
);
|
||||
|
||||
// 판매단가 → 마진율 계산
|
||||
const handleSalesPriceChange = useCallback(
|
||||
(price: number) => {
|
||||
setSalesPrice(price);
|
||||
if (costWithLoss > 0) {
|
||||
const calculatedMarginRate = ((price - costWithLoss) / costWithLoss) * 100;
|
||||
setMarginRate(parseFloat(calculatedMarginRate.toFixed(1)));
|
||||
} else {
|
||||
setMarginRate(0);
|
||||
}
|
||||
},
|
||||
[costWithLoss]
|
||||
);
|
||||
|
||||
// 원가 변경 시 판매가 자동 재계산
|
||||
useEffect(() => {
|
||||
if (marginRate > 0 && (purchasePrice > 0 || processingCost > 0)) {
|
||||
const calculatedPrice = costWithLoss * (1 + marginRate / 100);
|
||||
const roundedPrice = applyRounding(calculatedPrice, roundingRule, roundingUnit);
|
||||
const finalPrice = Math.round(roundedPrice);
|
||||
if (finalPrice !== salesPrice) {
|
||||
setSalesPrice(finalPrice);
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [purchasePrice, processingCost, loss, roundingRule, roundingUnit]);
|
||||
|
||||
// 마진 금액 계산
|
||||
const marginAmount = useMemo(() => {
|
||||
return salesPrice - costWithLoss;
|
||||
}, [salesPrice, costWithLoss]);
|
||||
|
||||
// 유효성 검사
|
||||
const validateForm = useCallback(() => {
|
||||
const newErrors: Record<string, boolean> = {};
|
||||
if (!effectiveDate) newErrors.effectiveDate = true;
|
||||
if (purchasePrice <= 0 && salesPrice <= 0) {
|
||||
newErrors.purchasePrice = true;
|
||||
newErrors.salesPrice = true;
|
||||
}
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
}, [effectiveDate, purchasePrice, salesPrice]);
|
||||
|
||||
// 저장 처리
|
||||
const handleSave = async (isRevision = false, revisionReason = '') => {
|
||||
if (!validateForm()) {
|
||||
toast.error('필수 항목을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 수정 모드이고 리비전 있으면 수정 이력 다이얼로그
|
||||
if (isEditMode && initialData && !isRevision &&
|
||||
(initialData.currentRevision > 0 || initialData.isFinal)) {
|
||||
setShowRevisionDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
const pricingData: PricingData = {
|
||||
id: initialData?.id || `PR-${Date.now()}`,
|
||||
itemId: initialData?.itemId || itemInfo?.id || '',
|
||||
itemCode: displayItemCode,
|
||||
itemName: displayItemName,
|
||||
itemType: displayItemType,
|
||||
specification: displaySpecification,
|
||||
unit: unit,
|
||||
effectiveDate,
|
||||
receiveDate: receiveDate || undefined,
|
||||
author: author || undefined,
|
||||
purchasePrice: purchasePrice || undefined,
|
||||
processingCost: processingCost || undefined,
|
||||
loss: loss || undefined,
|
||||
roundingRule: roundingRule || undefined,
|
||||
roundingUnit: roundingUnit || undefined,
|
||||
marginRate: marginRate || undefined,
|
||||
salesPrice: salesPrice || undefined,
|
||||
supplier: supplier || undefined,
|
||||
note: note || undefined,
|
||||
currentRevision: isRevision
|
||||
? (initialData?.currentRevision || 0) + 1
|
||||
: initialData?.currentRevision || 0,
|
||||
isFinal: initialData?.isFinal || false,
|
||||
revisions: initialData?.revisions || [],
|
||||
status: isRevision ? 'active' : initialData?.status || 'draft',
|
||||
createdAt: initialData?.createdAt || new Date().toISOString(),
|
||||
createdBy: initialData?.createdBy || '관리자',
|
||||
updatedAt: new Date().toISOString(),
|
||||
updatedBy: '관리자',
|
||||
};
|
||||
|
||||
if (onSave) {
|
||||
await onSave(pricingData, isRevision, revisionReason);
|
||||
}
|
||||
|
||||
toast.success(isEditMode ? '단가가 수정되었습니다.' : '단가가 등록되었습니다.');
|
||||
router.push('/sales/pricing-management');
|
||||
} catch (error) {
|
||||
toast.error('저장 중 오류가 발생했습니다.');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 최종 확정 처리
|
||||
const handleFinalize = async () => {
|
||||
if (!initialData) return;
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const finalizedData: PricingData = {
|
||||
...initialData,
|
||||
effectiveDate,
|
||||
receiveDate: receiveDate || undefined,
|
||||
author: author || undefined,
|
||||
purchasePrice: purchasePrice || undefined,
|
||||
processingCost: processingCost || undefined,
|
||||
loss: loss || undefined,
|
||||
roundingRule: roundingRule || undefined,
|
||||
roundingUnit: roundingUnit || undefined,
|
||||
marginRate: marginRate || undefined,
|
||||
salesPrice: salesPrice || undefined,
|
||||
supplier: supplier || undefined,
|
||||
note: note || undefined,
|
||||
isFinal: true,
|
||||
finalizedDate: new Date().toISOString(),
|
||||
finalizedBy: '관리자',
|
||||
status: 'finalized',
|
||||
updatedAt: new Date().toISOString(),
|
||||
updatedBy: '관리자',
|
||||
};
|
||||
|
||||
if (onSave) {
|
||||
await onSave(finalizedData);
|
||||
}
|
||||
|
||||
toast.success('단가가 최종 확정되었습니다.');
|
||||
setShowFinalizeDialog(false);
|
||||
router.push('/sales/pricing-management');
|
||||
} catch (error) {
|
||||
toast.error('확정 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-6 max-w-5xl">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<DollarSign className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
단가 {isEditMode ? '수정' : '등록'}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isEditMode
|
||||
? '품목의 단가 정보를 수정합니다'
|
||||
: '새로운 품목의 단가 정보를 등록합니다'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상태 표시 (수정 모드) */}
|
||||
{isEditMode && initialData && (
|
||||
<div className="mb-4 flex gap-2 justify-end">
|
||||
{initialData.isFinal && (
|
||||
<Badge className="bg-purple-600">
|
||||
<Lock className="h-3 w-3 mr-1" />
|
||||
최종 확정됨
|
||||
</Badge>
|
||||
)}
|
||||
{initialData.currentRevision > 0 && (
|
||||
<Badge variant="outline" className="bg-blue-50 text-blue-700">
|
||||
<History className="h-3 w-3 mr-1" />
|
||||
수정 {initialData.currentRevision}차
|
||||
</Badge>
|
||||
)}
|
||||
{initialData.status === 'active' && !initialData.isFinal && (
|
||||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
|
||||
활성
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 품목 정보 카드 */}
|
||||
<Card className="mb-6 border-2 border-blue-200">
|
||||
<CardHeader className="bg-blue-50">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-blue-600" />
|
||||
품목 정보
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<Label className="text-sm text-muted-foreground">품목 코드</Label>
|
||||
<div className="mt-1 font-semibold">{displayItemCode}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm text-muted-foreground">품목명</Label>
|
||||
<div className="mt-1 font-semibold">{displayItemName}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm text-muted-foreground">품목 유형</Label>
|
||||
<div className="mt-1">
|
||||
<Badge variant="outline">
|
||||
{ITEM_TYPE_LABELS[displayItemType as ItemType] || displayItemType}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm text-muted-foreground">단위</Label>
|
||||
<div className="mt-1 font-semibold">{displayUnit}</div>
|
||||
</div>
|
||||
{displaySpecification && (
|
||||
<div className="col-span-2 md:col-span-4">
|
||||
<Label className="text-sm text-muted-foreground">규격</Label>
|
||||
<div className="mt-1">{displaySpecification}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 단가 정보 카드 */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DollarSign className="h-5 w-5" />
|
||||
단가 정보
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 적용일 */}
|
||||
<div>
|
||||
<Label>
|
||||
적용일 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={effectiveDate}
|
||||
onChange={(e) => {
|
||||
setEffectiveDate(e.target.value);
|
||||
setErrors((prev) => ({ ...prev, effectiveDate: false }));
|
||||
}}
|
||||
className={errors.effectiveDate ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.effectiveDate && (
|
||||
<p className="text-sm text-red-500 mt-1 flex items-center gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
적용일을 선택해주세요
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 공급업체 및 기본 정보 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>공급업체</Label>
|
||||
<Input
|
||||
value={supplier}
|
||||
onChange={(e) => setSupplier(e.target.value)}
|
||||
placeholder="공급업체명을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>입고일</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={receiveDate}
|
||||
onChange={(e) => setReceiveDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>작성자</Label>
|
||||
<Input
|
||||
value={author}
|
||||
onChange={(e) => setAuthor(e.target.value)}
|
||||
placeholder="작성자명을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 입고가 및 단위 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>
|
||||
입고가 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
value={purchasePrice || ''}
|
||||
onChange={(e) => {
|
||||
setPurchasePrice(parseInt(e.target.value) || 0);
|
||||
setErrors((prev) => ({ ...prev, purchasePrice: false, salesPrice: false }));
|
||||
}}
|
||||
placeholder="0"
|
||||
className={errors.purchasePrice ? 'border-red-500 pr-12' : 'pr-12'}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
원
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>단위</Label>
|
||||
<Select value={unit} onValueChange={setUnit}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="단위 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{UNIT_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
단가 적용 시 사용될 단위
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label>LOSS (%)</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
step="0.1"
|
||||
value={loss || ''}
|
||||
onChange={(e) => setLoss(parseFloat(e.target.value) || 0)}
|
||||
placeholder="0"
|
||||
className="pr-12"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
제조 과정에서 발생하는 손실율
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label>가공비</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
value={processingCost || ''}
|
||||
onChange={(e) => setProcessingCost(parseInt(e.target.value) || 0)}
|
||||
placeholder="0"
|
||||
className="pr-12"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
원
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 원가 계산 섹션 */}
|
||||
{(purchasePrice > 0 || processingCost > 0) && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Calculator className="h-4 w-4 text-blue-600" />
|
||||
<Label className="text-blue-900">원가 계산</Label>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">입고가:</span>
|
||||
<span>{(purchasePrice || 0).toLocaleString()}원</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">가공비:</span>
|
||||
<span>{(processingCost || 0).toLocaleString()}원</span>
|
||||
</div>
|
||||
<Separator className="my-2" />
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">소계:</span>
|
||||
<span>{((purchasePrice || 0) + (processingCost || 0)).toLocaleString()}원</span>
|
||||
</div>
|
||||
{loss > 0 && (
|
||||
<div className="flex justify-between text-orange-600">
|
||||
<span>LOSS ({loss}%):</span>
|
||||
<span>
|
||||
+{(((purchasePrice || 0) + (processingCost || 0)) * (loss / 100)).toLocaleString()}원
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Separator className="my-2" />
|
||||
<div className="flex justify-between font-semibold text-base">
|
||||
<span className="text-blue-900">LOSS 적용 원가:</span>
|
||||
<span className="text-blue-600">{costWithLoss.toLocaleString()}원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 반올림 설정 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>반올림 규칙</Label>
|
||||
<Select
|
||||
value={roundingRule}
|
||||
onValueChange={(value) => setRoundingRule(value as RoundingRule)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ROUNDING_RULE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label>반올림 단위</Label>
|
||||
<Select
|
||||
value={roundingUnit.toString()}
|
||||
onValueChange={(value) => setRoundingUnit(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ROUNDING_UNIT_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
단가 계산 시 적용될 반올림 단위
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 마진율/판매단가 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>마진율 (%)</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
step="0.1"
|
||||
value={marginRate || ''}
|
||||
onChange={(e) => handleMarginRateChange(parseFloat(e.target.value) || 0)}
|
||||
placeholder="0"
|
||||
className="pr-12"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
마진율을 입력하면 판매단가가 자동 계산됩니다
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label>
|
||||
판매단가 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
value={salesPrice || ''}
|
||||
onChange={(e) => {
|
||||
handleSalesPriceChange(parseInt(e.target.value) || 0);
|
||||
setErrors((prev) => ({ ...prev, purchasePrice: false, salesPrice: false }));
|
||||
}}
|
||||
placeholder="0"
|
||||
className={errors.salesPrice ? 'border-red-500 pr-12' : 'pr-12'}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
원
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
판매단가를 직접 입력하면 마진율이 자동 계산됩니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(errors.purchasePrice || errors.salesPrice) && (
|
||||
<p className="text-sm text-red-500 flex items-center gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
입고가 또는 판매단가 중 최소 하나를 입력해주세요
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 마진 계산 섹션 */}
|
||||
{salesPrice > 0 && (purchasePrice > 0 || processingCost > 0) && (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
<Label className="text-green-900">마진 계산</Label>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">LOSS 적용 원가:</span>
|
||||
<span>{costWithLoss.toLocaleString()}원</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">판매단가:</span>
|
||||
<span>{salesPrice.toLocaleString()}원</span>
|
||||
</div>
|
||||
<Separator className="my-2" />
|
||||
<div className="flex justify-between font-semibold text-base">
|
||||
<span className="text-green-900">마진:</span>
|
||||
<span className="text-green-600">
|
||||
{marginAmount.toLocaleString()}원 ({marginRate.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 비고 */}
|
||||
<div>
|
||||
<Label>비고</Label>
|
||||
<Textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
placeholder="비고사항을 입력하세요"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="flex gap-2 justify-between">
|
||||
<div className="flex gap-2">
|
||||
{isEditMode && initialData?.revisions && initialData.revisions.length > 0 && (
|
||||
<Button variant="outline" onClick={() => setShowHistoryDialog(true)}>
|
||||
<History className="h-4 w-4 mr-2" />
|
||||
이력 조회 ({initialData.currentRevision}차)
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push('/sales/pricing-management')}
|
||||
className="min-w-[100px]"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
취소
|
||||
</Button>
|
||||
{isEditMode && initialData && !initialData.isFinal && (
|
||||
<Button
|
||||
onClick={() => setShowFinalizeDialog(true)}
|
||||
className="min-w-[100px] bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<CheckCircle2 className="h-4 w-4 mr-2" />
|
||||
최종 확정
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => handleSave()}
|
||||
className="min-w-[100px] bg-blue-600 hover:bg-blue-700"
|
||||
disabled={initialData?.isFinal || isSaving}
|
||||
>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{initialData?.isFinal ? '확정됨' : '저장'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 다이얼로그들 */}
|
||||
<PricingHistoryDialog
|
||||
open={showHistoryDialog}
|
||||
onOpenChange={setShowHistoryDialog}
|
||||
pricingData={initialData}
|
||||
/>
|
||||
|
||||
<PricingRevisionDialog
|
||||
open={showRevisionDialog}
|
||||
onOpenChange={setShowRevisionDialog}
|
||||
onConfirm={(reason) => handleSave(true, reason)}
|
||||
/>
|
||||
|
||||
<PricingFinalizeDialog
|
||||
open={showFinalizeDialog}
|
||||
onOpenChange={setShowFinalizeDialog}
|
||||
onConfirm={handleFinalize}
|
||||
itemName={displayItemName}
|
||||
purchasePrice={purchasePrice}
|
||||
salesPrice={salesPrice}
|
||||
marginRate={marginRate}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingFormClient;
|
||||
Reference in New Issue
Block a user