chore: 미사용 수주 등록 모듈(orderController) 삭제
- 백엔드: orderController.ts, orderRoutes.ts 삭제 - 프론트엔드: components/order/, order-registration-modal/ 삭제 - app.ts, index.ts, getComponentConfigPanel.tsx에서 참조 제거 - 현재 sales_order_mng 기반 수주 시스템 사용으로 구 모듈 불필요
This commit is contained in:
SeongHyun Kim
parent
c85841b59f
commit
11215e3316
|
|
@ -71,7 +71,6 @@ import tableCategoryValueRoutes from "./routes/tableCategoryValueRoutes"; // 카
|
||||||
import codeMergeRoutes from "./routes/codeMergeRoutes"; // 코드 병합
|
import codeMergeRoutes from "./routes/codeMergeRoutes"; // 코드 병합
|
||||||
import numberingRuleRoutes from "./routes/numberingRuleRoutes"; // 채번 규칙 관리
|
import numberingRuleRoutes from "./routes/numberingRuleRoutes"; // 채번 규칙 관리
|
||||||
import entitySearchRoutes from "./routes/entitySearchRoutes"; // 엔티티 검색
|
import entitySearchRoutes from "./routes/entitySearchRoutes"; // 엔티티 검색
|
||||||
import orderRoutes from "./routes/orderRoutes"; // 수주 관리
|
|
||||||
import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
|
import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
|
||||||
import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
|
import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
|
||||||
import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
|
import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
|
||||||
|
|
@ -249,7 +248,6 @@ app.use("/api/table-categories", tableCategoryValueRoutes); // 카테고리 값
|
||||||
app.use("/api/code-merge", codeMergeRoutes); // 코드 병합
|
app.use("/api/code-merge", codeMergeRoutes); // 코드 병합
|
||||||
app.use("/api/numbering-rules", numberingRuleRoutes); // 채번 규칙 관리
|
app.use("/api/numbering-rules", numberingRuleRoutes); // 채번 규칙 관리
|
||||||
app.use("/api/entity-search", entitySearchRoutes); // 엔티티 검색
|
app.use("/api/entity-search", entitySearchRoutes); // 엔티티 검색
|
||||||
app.use("/api/orders", orderRoutes); // 수주 관리
|
|
||||||
app.use("/api/driver", driverRoutes); // 공차중계 운전자 관리
|
app.use("/api/driver", driverRoutes); // 공차중계 운전자 관리
|
||||||
app.use("/api/tax-invoice", taxInvoiceRoutes); // 세금계산서 관리
|
app.use("/api/tax-invoice", taxInvoiceRoutes); // 세금계산서 관리
|
||||||
app.use("/api/cascading-relations", cascadingRelationRoutes); // 연쇄 드롭다운 관계 관리
|
app.use("/api/cascading-relations", cascadingRelationRoutes); // 연쇄 드롭다운 관계 관리
|
||||||
|
|
|
||||||
|
|
@ -1,276 +0,0 @@
|
||||||
import { Response } from "express";
|
|
||||||
import { AuthenticatedRequest } from "../types/auth";
|
|
||||||
import { getPool } from "../database/db";
|
|
||||||
import { logger } from "../utils/logger";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 번호 생성 함수
|
|
||||||
* 형식: ORD + YYMMDD + 4자리 시퀀스
|
|
||||||
* 예: ORD250114001
|
|
||||||
*/
|
|
||||||
async function generateOrderNumber(companyCode: string): Promise<string> {
|
|
||||||
const pool = getPool();
|
|
||||||
const today = new Date();
|
|
||||||
const year = today.getFullYear().toString().slice(2); // 25
|
|
||||||
const month = String(today.getMonth() + 1).padStart(2, "0"); // 01
|
|
||||||
const day = String(today.getDate()).padStart(2, "0"); // 14
|
|
||||||
const dateStr = `${year}${month}${day}`; // 250114
|
|
||||||
|
|
||||||
// 당일 수주 카운트 조회
|
|
||||||
const countQuery = `
|
|
||||||
SELECT COUNT(*) as count
|
|
||||||
FROM order_mng_master
|
|
||||||
WHERE objid LIKE $1
|
|
||||||
AND writer LIKE $2
|
|
||||||
`;
|
|
||||||
|
|
||||||
const pattern = `ORD${dateStr}%`;
|
|
||||||
const result = await pool.query(countQuery, [pattern, `%${companyCode}%`]);
|
|
||||||
const count = parseInt(result.rows[0]?.count || "0");
|
|
||||||
const seq = count + 1;
|
|
||||||
|
|
||||||
return `ORD${dateStr}${String(seq).padStart(4, "0")}`; // ORD250114001
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 등록 API
|
|
||||||
* POST /api/orders
|
|
||||||
*/
|
|
||||||
export async function createOrder(req: AuthenticatedRequest, res: Response) {
|
|
||||||
const pool = getPool();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
inputMode, // 입력 방식
|
|
||||||
customerCode, // 거래처 코드
|
|
||||||
deliveryDate, // 납품일
|
|
||||||
items, // 품목 목록
|
|
||||||
memo, // 메모
|
|
||||||
} = req.body;
|
|
||||||
|
|
||||||
// 멀티테넌시
|
|
||||||
const companyCode = req.user!.companyCode;
|
|
||||||
const userId = req.user!.userId;
|
|
||||||
|
|
||||||
// 유효성 검사
|
|
||||||
if (!customerCode) {
|
|
||||||
return res.status(400).json({
|
|
||||||
success: false,
|
|
||||||
message: "거래처 코드는 필수입니다",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!items || items.length === 0) {
|
|
||||||
return res.status(400).json({
|
|
||||||
success: false,
|
|
||||||
message: "품목은 최소 1개 이상 필요합니다",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 수주 번호 생성
|
|
||||||
const orderNo = await generateOrderNumber(companyCode);
|
|
||||||
|
|
||||||
// 전체 금액 계산
|
|
||||||
const totalAmount = items.reduce(
|
|
||||||
(sum: number, item: any) => sum + (item.amount || 0),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
// 수주 마스터 생성
|
|
||||||
const masterQuery = `
|
|
||||||
INSERT INTO order_mng_master (
|
|
||||||
objid,
|
|
||||||
partner_objid,
|
|
||||||
final_delivery_date,
|
|
||||||
reason,
|
|
||||||
status,
|
|
||||||
reg_date,
|
|
||||||
writer
|
|
||||||
) VALUES ($1, $2, $3, $4, $5, NOW(), $6)
|
|
||||||
RETURNING *
|
|
||||||
`;
|
|
||||||
|
|
||||||
const masterResult = await pool.query(masterQuery, [
|
|
||||||
orderNo,
|
|
||||||
customerCode,
|
|
||||||
deliveryDate || null,
|
|
||||||
memo || null,
|
|
||||||
"진행중",
|
|
||||||
`${userId}|${companyCode}`,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const masterObjid = masterResult.rows[0].objid;
|
|
||||||
|
|
||||||
// 수주 상세 (품목) 생성
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
const item = items[i];
|
|
||||||
const subObjid = `${orderNo}_${i + 1}`;
|
|
||||||
|
|
||||||
const subQuery = `
|
|
||||||
INSERT INTO order_mng_sub (
|
|
||||||
objid,
|
|
||||||
order_mng_master_objid,
|
|
||||||
part_objid,
|
|
||||||
partner_objid,
|
|
||||||
partner_price,
|
|
||||||
partner_qty,
|
|
||||||
delivery_date,
|
|
||||||
status,
|
|
||||||
regdate,
|
|
||||||
writer
|
|
||||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, NOW(), $9)
|
|
||||||
`;
|
|
||||||
|
|
||||||
await pool.query(subQuery, [
|
|
||||||
subObjid,
|
|
||||||
masterObjid,
|
|
||||||
item.item_code || item.id, // 품목 코드
|
|
||||||
customerCode,
|
|
||||||
item.unit_price || 0,
|
|
||||||
item.quantity || 0,
|
|
||||||
item.delivery_date || deliveryDate || null,
|
|
||||||
"진행중",
|
|
||||||
`${userId}|${companyCode}`,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.info("수주 등록 성공", {
|
|
||||||
companyCode,
|
|
||||||
orderNo,
|
|
||||||
masterObjid,
|
|
||||||
itemCount: items.length,
|
|
||||||
totalAmount,
|
|
||||||
});
|
|
||||||
|
|
||||||
res.json({
|
|
||||||
success: true,
|
|
||||||
data: {
|
|
||||||
orderNo,
|
|
||||||
masterObjid,
|
|
||||||
itemCount: items.length,
|
|
||||||
totalAmount,
|
|
||||||
},
|
|
||||||
message: "수주가 등록되었습니다",
|
|
||||||
});
|
|
||||||
} catch (error: any) {
|
|
||||||
logger.error("수주 등록 오류", {
|
|
||||||
error: error.message,
|
|
||||||
stack: error.stack,
|
|
||||||
});
|
|
||||||
res.status(500).json({
|
|
||||||
success: false,
|
|
||||||
message: error.message || "수주 등록 중 오류가 발생했습니다",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 목록 조회 API (마스터 + 품목 JOIN)
|
|
||||||
* GET /api/orders
|
|
||||||
*/
|
|
||||||
export async function getOrders(req: AuthenticatedRequest, res: Response) {
|
|
||||||
const pool = getPool();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { page = "1", limit = "20", searchText = "" } = req.query;
|
|
||||||
const companyCode = req.user!.companyCode;
|
|
||||||
|
|
||||||
const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
|
|
||||||
|
|
||||||
// WHERE 조건
|
|
||||||
const whereConditions: string[] = [];
|
|
||||||
const params: any[] = [];
|
|
||||||
let paramIndex = 1;
|
|
||||||
|
|
||||||
// 멀티테넌시 (writer 필드에 company_code 포함)
|
|
||||||
if (companyCode !== "*") {
|
|
||||||
whereConditions.push(`m.writer LIKE $${paramIndex}`);
|
|
||||||
params.push(`%${companyCode}%`);
|
|
||||||
paramIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 검색
|
|
||||||
if (searchText) {
|
|
||||||
whereConditions.push(`m.objid LIKE $${paramIndex}`);
|
|
||||||
params.push(`%${searchText}%`);
|
|
||||||
paramIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
const whereClause =
|
|
||||||
whereConditions.length > 0
|
|
||||||
? `WHERE ${whereConditions.join(" AND ")}`
|
|
||||||
: "";
|
|
||||||
|
|
||||||
// 카운트 쿼리 (고유한 수주 개수)
|
|
||||||
const countQuery = `
|
|
||||||
SELECT COUNT(DISTINCT m.objid) as count
|
|
||||||
FROM order_mng_master m
|
|
||||||
${whereClause}
|
|
||||||
`;
|
|
||||||
const countResult = await pool.query(countQuery, params);
|
|
||||||
const total = parseInt(countResult.rows[0]?.count || "0");
|
|
||||||
|
|
||||||
// 데이터 쿼리 (마스터 + 품목 JOIN)
|
|
||||||
const dataQuery = `
|
|
||||||
SELECT
|
|
||||||
m.objid as order_no,
|
|
||||||
m.partner_objid,
|
|
||||||
m.final_delivery_date,
|
|
||||||
m.reason,
|
|
||||||
m.status,
|
|
||||||
m.reg_date,
|
|
||||||
m.writer,
|
|
||||||
COALESCE(
|
|
||||||
json_agg(
|
|
||||||
CASE WHEN s.objid IS NOT NULL THEN
|
|
||||||
json_build_object(
|
|
||||||
'sub_objid', s.objid,
|
|
||||||
'part_objid', s.part_objid,
|
|
||||||
'partner_price', s.partner_price,
|
|
||||||
'partner_qty', s.partner_qty,
|
|
||||||
'delivery_date', s.delivery_date,
|
|
||||||
'status', s.status,
|
|
||||||
'regdate', s.regdate
|
|
||||||
)
|
|
||||||
END
|
|
||||||
ORDER BY s.regdate
|
|
||||||
) FILTER (WHERE s.objid IS NOT NULL),
|
|
||||||
'[]'::json
|
|
||||||
) as items
|
|
||||||
FROM order_mng_master m
|
|
||||||
LEFT JOIN order_mng_sub s ON m.objid = s.order_mng_master_objid
|
|
||||||
${whereClause}
|
|
||||||
GROUP BY m.objid, m.partner_objid, m.final_delivery_date, m.reason, m.status, m.reg_date, m.writer
|
|
||||||
ORDER BY m.reg_date DESC
|
|
||||||
LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
|
|
||||||
`;
|
|
||||||
|
|
||||||
params.push(parseInt(limit as string));
|
|
||||||
params.push(offset);
|
|
||||||
|
|
||||||
const dataResult = await pool.query(dataQuery, params);
|
|
||||||
|
|
||||||
logger.info("수주 목록 조회 성공", {
|
|
||||||
companyCode,
|
|
||||||
total,
|
|
||||||
page: parseInt(page as string),
|
|
||||||
itemCount: dataResult.rows.length,
|
|
||||||
});
|
|
||||||
|
|
||||||
res.json({
|
|
||||||
success: true,
|
|
||||||
data: dataResult.rows,
|
|
||||||
pagination: {
|
|
||||||
total,
|
|
||||||
page: parseInt(page as string),
|
|
||||||
limit: parseInt(limit as string),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} catch (error: any) {
|
|
||||||
logger.error("수주 목록 조회 오류", { error: error.message });
|
|
||||||
res.status(500).json({
|
|
||||||
success: false,
|
|
||||||
message: error.message,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
import { Router } from "express";
|
|
||||||
import { authenticateToken } from "../middleware/authMiddleware";
|
|
||||||
import { createOrder, getOrders } from "../controllers/orderController";
|
|
||||||
|
|
||||||
const router = Router();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 등록
|
|
||||||
* POST /api/orders
|
|
||||||
*/
|
|
||||||
router.post("/", authenticateToken, createOrder);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 목록 조회
|
|
||||||
* GET /api/orders
|
|
||||||
*/
|
|
||||||
router.get("/", authenticateToken, getOrders);
|
|
||||||
|
|
||||||
export default router;
|
|
||||||
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { AutocompleteSearchInputComponent } from "@/lib/registry/components/autocomplete-search-input";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 등록 전용 거래처 검색 컴포넌트
|
|
||||||
*
|
|
||||||
* 이 컴포넌트는 수주 등록 화면 전용이며, 설정이 고정되어 있습니다.
|
|
||||||
* 범용 AutocompleteSearchInput과 달리 customer_mng 테이블만 조회합니다.
|
|
||||||
*/
|
|
||||||
|
|
||||||
interface OrderCustomerSearchProps {
|
|
||||||
/** 현재 선택된 거래처 코드 */
|
|
||||||
value: string;
|
|
||||||
/** 거래처 선택 시 콜백 (거래처 코드, 전체 데이터) */
|
|
||||||
onChange: (customerCode: string | null, fullData?: any) => void;
|
|
||||||
/** 비활성화 여부 */
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OrderCustomerSearch({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
disabled = false,
|
|
||||||
}: OrderCustomerSearchProps) {
|
|
||||||
return (
|
|
||||||
<AutocompleteSearchInputComponent
|
|
||||||
// 고정 설정 (수주 등록 전용)
|
|
||||||
tableName="customer_mng"
|
|
||||||
displayField="customer_name"
|
|
||||||
valueField="customer_code"
|
|
||||||
searchFields={[
|
|
||||||
"customer_name",
|
|
||||||
"customer_code",
|
|
||||||
"business_number",
|
|
||||||
]}
|
|
||||||
placeholder="거래처명 입력하여 검색"
|
|
||||||
showAdditionalInfo
|
|
||||||
additionalFields={["customer_code", "address", "contact_phone"]}
|
|
||||||
|
|
||||||
// 외부에서 제어 가능한 prop
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { ModalRepeaterTableComponent } from "@/lib/registry/components/modal-repeater-table";
|
|
||||||
import type {
|
|
||||||
RepeaterColumnConfig,
|
|
||||||
CalculationRule,
|
|
||||||
} from "@/lib/registry/components/modal-repeater-table";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 수주 등록 전용 품목 반복 테이블 컴포넌트
|
|
||||||
*
|
|
||||||
* 이 컴포넌트는 수주 등록 화면 전용이며, 설정이 고정되어 있습니다.
|
|
||||||
* 범용 ModalRepeaterTable과 달리 item_info 테이블만 조회하며,
|
|
||||||
* 수주 등록에 필요한 컬럼과 계산 공식이 미리 설정되어 있습니다.
|
|
||||||
*/
|
|
||||||
|
|
||||||
interface OrderItemRepeaterTableProps {
|
|
||||||
/** 현재 선택된 품목 목록 */
|
|
||||||
value: any[];
|
|
||||||
/** 품목 목록 변경 시 콜백 */
|
|
||||||
onChange: (items: any[]) => void;
|
|
||||||
/** 비활성화 여부 */
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 수주 등록 전용 컬럼 설정 (고정)
|
|
||||||
const ORDER_COLUMNS: RepeaterColumnConfig[] = [
|
|
||||||
{
|
|
||||||
field: "item_number",
|
|
||||||
label: "품번",
|
|
||||||
editable: false,
|
|
||||||
width: "120px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "item_name",
|
|
||||||
label: "품명",
|
|
||||||
editable: false,
|
|
||||||
width: "180px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "specification",
|
|
||||||
label: "규격",
|
|
||||||
editable: false,
|
|
||||||
width: "150px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "material",
|
|
||||||
label: "재질",
|
|
||||||
editable: false,
|
|
||||||
width: "120px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "quantity",
|
|
||||||
label: "수량",
|
|
||||||
type: "number",
|
|
||||||
editable: true,
|
|
||||||
required: true,
|
|
||||||
defaultValue: 1,
|
|
||||||
width: "100px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "selling_price",
|
|
||||||
label: "단가",
|
|
||||||
type: "number",
|
|
||||||
editable: true,
|
|
||||||
required: true,
|
|
||||||
width: "120px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "amount",
|
|
||||||
label: "금액",
|
|
||||||
type: "number",
|
|
||||||
editable: false,
|
|
||||||
calculated: true,
|
|
||||||
width: "120px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "order_date",
|
|
||||||
label: "수주일",
|
|
||||||
type: "date",
|
|
||||||
editable: true,
|
|
||||||
width: "130px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "delivery_date",
|
|
||||||
label: "납기일",
|
|
||||||
type: "date",
|
|
||||||
editable: true,
|
|
||||||
width: "130px",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 수주 등록 전용 계산 공식 (고정)
|
|
||||||
const ORDER_CALCULATION_RULES: CalculationRule[] = [
|
|
||||||
{
|
|
||||||
result: "amount",
|
|
||||||
formula: "quantity * selling_price",
|
|
||||||
dependencies: ["quantity", "selling_price"],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export function OrderItemRepeaterTable({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
disabled = false,
|
|
||||||
}: OrderItemRepeaterTableProps) {
|
|
||||||
return (
|
|
||||||
<ModalRepeaterTableComponent
|
|
||||||
// 고정 설정 (수주 등록 전용)
|
|
||||||
sourceTable="item_info"
|
|
||||||
sourceColumns={[
|
|
||||||
"item_number",
|
|
||||||
"item_name",
|
|
||||||
"specification",
|
|
||||||
"material",
|
|
||||||
"unit",
|
|
||||||
"selling_price",
|
|
||||||
]}
|
|
||||||
sourceSearchFields={["item_name", "item_number", "specification"]}
|
|
||||||
modalTitle="품목 검색 및 선택"
|
|
||||||
modalButtonText="품목 검색"
|
|
||||||
multiSelect={true}
|
|
||||||
columns={ORDER_COLUMNS}
|
|
||||||
calculationRules={ORDER_CALCULATION_RULES}
|
|
||||||
uniqueField="item_number"
|
|
||||||
|
|
||||||
// 외부에서 제어 가능한 prop
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,572 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { OrderCustomerSearch } from "./OrderCustomerSearch";
|
|
||||||
import { OrderItemRepeaterTable } from "./OrderItemRepeaterTable";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { apiClient } from "@/lib/api/client";
|
|
||||||
|
|
||||||
interface OrderRegistrationModalProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onSuccess?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OrderRegistrationModal({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
onSuccess,
|
|
||||||
}: OrderRegistrationModalProps) {
|
|
||||||
// 입력 방식
|
|
||||||
const [inputMode, setInputMode] = useState<string>("customer_first");
|
|
||||||
|
|
||||||
// 판매 유형 (국내/해외)
|
|
||||||
const [salesType, setSalesType] = useState<string>("domestic");
|
|
||||||
|
|
||||||
// 단가 기준 (기준단가/거래처별단가)
|
|
||||||
const [priceType, setPriceType] = useState<string>("standard");
|
|
||||||
|
|
||||||
// 폼 데이터
|
|
||||||
const [formData, setFormData] = useState<any>({
|
|
||||||
customerCode: "",
|
|
||||||
customerName: "",
|
|
||||||
contactPerson: "",
|
|
||||||
deliveryDestination: "",
|
|
||||||
deliveryAddress: "",
|
|
||||||
deliveryDate: "",
|
|
||||||
memo: "",
|
|
||||||
// 무역 정보 (해외 판매 시)
|
|
||||||
incoterms: "",
|
|
||||||
paymentTerms: "",
|
|
||||||
currency: "KRW",
|
|
||||||
portOfLoading: "",
|
|
||||||
portOfDischarge: "",
|
|
||||||
hsCode: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
// 선택된 품목 목록
|
|
||||||
const [selectedItems, setSelectedItems] = useState<any[]>([]);
|
|
||||||
|
|
||||||
// 납기일 일괄 적용 플래그 (딱 한 번만 실행)
|
|
||||||
const [isDeliveryDateApplied, setIsDeliveryDateApplied] = useState(false);
|
|
||||||
|
|
||||||
// 저장 중
|
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
|
||||||
|
|
||||||
// 저장 처리
|
|
||||||
const handleSave = async () => {
|
|
||||||
try {
|
|
||||||
// 유효성 검사
|
|
||||||
if (!formData.customerCode) {
|
|
||||||
toast.error("거래처를 선택해주세요");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedItems.length === 0) {
|
|
||||||
toast.error("품목을 추가해주세요");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSaving(true);
|
|
||||||
|
|
||||||
// 수주 등록 API 호출
|
|
||||||
const orderData: any = {
|
|
||||||
inputMode,
|
|
||||||
salesType,
|
|
||||||
priceType,
|
|
||||||
customerCode: formData.customerCode,
|
|
||||||
contactPerson: formData.contactPerson,
|
|
||||||
deliveryDestination: formData.deliveryDestination,
|
|
||||||
deliveryAddress: formData.deliveryAddress,
|
|
||||||
deliveryDate: formData.deliveryDate,
|
|
||||||
items: selectedItems,
|
|
||||||
memo: formData.memo,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 해외 판매 시 무역 정보 추가
|
|
||||||
if (salesType === "export") {
|
|
||||||
orderData.tradeInfo = {
|
|
||||||
incoterms: formData.incoterms,
|
|
||||||
paymentTerms: formData.paymentTerms,
|
|
||||||
currency: formData.currency,
|
|
||||||
portOfLoading: formData.portOfLoading,
|
|
||||||
portOfDischarge: formData.portOfDischarge,
|
|
||||||
hsCode: formData.hsCode,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await apiClient.post("/orders", orderData);
|
|
||||||
|
|
||||||
if (response.data.success) {
|
|
||||||
toast.success("수주가 등록되었습니다");
|
|
||||||
onOpenChange(false);
|
|
||||||
onSuccess?.();
|
|
||||||
|
|
||||||
// 폼 초기화
|
|
||||||
resetForm();
|
|
||||||
} else {
|
|
||||||
toast.error(response.data.message || "수주 등록에 실패했습니다");
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error("수주 등록 오류:", error);
|
|
||||||
toast.error(
|
|
||||||
error.response?.data?.message || "수주 등록 중 오류가 발생했습니다"
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 취소 처리
|
|
||||||
const handleCancel = () => {
|
|
||||||
onOpenChange(false);
|
|
||||||
resetForm();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 폼 초기화
|
|
||||||
const resetForm = () => {
|
|
||||||
setInputMode("customer_first");
|
|
||||||
setSalesType("domestic");
|
|
||||||
setPriceType("standard");
|
|
||||||
setFormData({
|
|
||||||
customerCode: "",
|
|
||||||
customerName: "",
|
|
||||||
contactPerson: "",
|
|
||||||
deliveryDestination: "",
|
|
||||||
deliveryAddress: "",
|
|
||||||
deliveryDate: "",
|
|
||||||
memo: "",
|
|
||||||
incoterms: "",
|
|
||||||
paymentTerms: "",
|
|
||||||
currency: "KRW",
|
|
||||||
portOfLoading: "",
|
|
||||||
portOfDischarge: "",
|
|
||||||
hsCode: "",
|
|
||||||
});
|
|
||||||
setSelectedItems([]);
|
|
||||||
setIsDeliveryDateApplied(false); // 플래그 초기화
|
|
||||||
};
|
|
||||||
|
|
||||||
// 품목 목록 변경 핸들러 (납기일 일괄 적용 로직 포함)
|
|
||||||
const handleItemsChange = (newItems: any[]) => {
|
|
||||||
// 1️⃣ 플래그가 이미 true면 그냥 업데이트만 (일괄 적용 완료 상태)
|
|
||||||
if (isDeliveryDateApplied) {
|
|
||||||
setSelectedItems(newItems);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2️⃣ 품목이 없으면 그냥 업데이트
|
|
||||||
if (newItems.length === 0) {
|
|
||||||
setSelectedItems(newItems);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3️⃣ 현재 상태: 납기일이 있는 행과 없는 행 개수 체크
|
|
||||||
const itemsWithDate = newItems.filter((item) => item.delivery_date);
|
|
||||||
const itemsWithoutDate = newItems.filter((item) => !item.delivery_date);
|
|
||||||
|
|
||||||
// 4️⃣ 조건: 정확히 1개만 날짜가 있고, 나머지는 모두 비어있을 때 일괄 적용
|
|
||||||
if (itemsWithDate.length === 1 && itemsWithoutDate.length > 0) {
|
|
||||||
// 5️⃣ 전체 일괄 적용
|
|
||||||
const selectedDate = itemsWithDate[0].delivery_date;
|
|
||||||
const updatedItems = newItems.map((item) => ({
|
|
||||||
...item,
|
|
||||||
delivery_date: selectedDate, // 모든 행에 동일한 납기일 적용
|
|
||||||
}));
|
|
||||||
|
|
||||||
setSelectedItems(updatedItems);
|
|
||||||
setIsDeliveryDateApplied(true); // 플래그 활성화 (다음부터는 일괄 적용 안 함)
|
|
||||||
|
|
||||||
console.log("✅ 납기일 일괄 적용 완료:", selectedDate);
|
|
||||||
console.log(` - 대상: ${itemsWithoutDate.length}개 행에 ${selectedDate} 적용`);
|
|
||||||
} else {
|
|
||||||
// 그냥 업데이트
|
|
||||||
setSelectedItems(newItems);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 전체 금액 계산
|
|
||||||
const totalAmount = selectedItems.reduce(
|
|
||||||
(sum, item) => sum + (item.amount || 0),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-[95vw] sm:max-w-[1200px] max-h-[90vh] overflow-hidden">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="text-base sm:text-lg">수주 등록</DialogTitle>
|
|
||||||
<DialogDescription className="text-xs sm:text-sm">
|
|
||||||
새로운 수주를 등록합니다
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* 상단 셀렉트 박스 3개 */}
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
||||||
{/* 입력 방식 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="inputMode" className="text-xs sm:text-sm flex items-center gap-1">
|
|
||||||
<span className="text-amber-500">📝</span> 입력 방식
|
|
||||||
</Label>
|
|
||||||
<Select value={inputMode} onValueChange={setInputMode}>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="입력 방식 선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="customer_first">거래처 우선</SelectItem>
|
|
||||||
<SelectItem value="quotation">견대 방식</SelectItem>
|
|
||||||
<SelectItem value="unit_price">단가 방식</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 판매 유형 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="salesType" className="text-xs sm:text-sm flex items-center gap-1">
|
|
||||||
<span className="text-blue-500">🌏</span> 판매 유형
|
|
||||||
</Label>
|
|
||||||
<Select value={salesType} onValueChange={setSalesType}>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="판매 유형 선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="domestic">국내 판매</SelectItem>
|
|
||||||
<SelectItem value="export">해외 판매</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 단가 기준 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="priceType" className="text-xs sm:text-sm flex items-center gap-1">
|
|
||||||
<span className="text-green-500">💰</span> 단가 방식
|
|
||||||
</Label>
|
|
||||||
<Select value={priceType} onValueChange={setPriceType}>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="단가 방식 선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="standard">기준 단가</SelectItem>
|
|
||||||
<SelectItem value="customer">거래처별 단가</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 거래처 정보 (항상 표시) */}
|
|
||||||
{inputMode === "customer_first" && (
|
|
||||||
<div className="rounded-lg border border-gray-200 bg-gray-50/50 p-4 space-y-4">
|
|
||||||
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700">
|
|
||||||
<span>🏢</span>
|
|
||||||
<span>거래처 정보</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{/* 거래처 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">거래처 *</Label>
|
|
||||||
<OrderCustomerSearch
|
|
||||||
value={formData.customerCode}
|
|
||||||
onChange={(code, fullData) => {
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
customerCode: code || "",
|
|
||||||
customerName: fullData?.customer_name || "",
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 담당자 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="contactPerson" className="text-xs sm:text-sm">
|
|
||||||
담당자
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="contactPerson"
|
|
||||||
placeholder="담당자"
|
|
||||||
value={formData.contactPerson}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, contactPerson: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 납품처 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="deliveryDestination" className="text-xs sm:text-sm">
|
|
||||||
납품처
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="deliveryDestination"
|
|
||||||
placeholder="납품처"
|
|
||||||
value={formData.deliveryDestination}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, deliveryDestination: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 납품장소 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="deliveryAddress" className="text-xs sm:text-sm">
|
|
||||||
납품장소
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="deliveryAddress"
|
|
||||||
placeholder="납품장소"
|
|
||||||
value={formData.deliveryAddress}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, deliveryAddress: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{inputMode === "quotation" && (
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">견대 번호 *</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="견대 번호를 입력하세요"
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{inputMode === "unit_price" && (
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">단가 방식 설정</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="단가 정보 입력"
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 추가된 품목 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">추가된 품목</Label>
|
|
||||||
<OrderItemRepeaterTable
|
|
||||||
value={selectedItems}
|
|
||||||
onChange={handleItemsChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 전체 금액 표시 */}
|
|
||||||
{selectedItems.length > 0 && (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<div className="text-sm sm:text-base font-semibold">
|
|
||||||
전체 금액: {totalAmount.toLocaleString()}원
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 무역 정보 (해외 판매 시에만 표시) */}
|
|
||||||
{salesType === "export" && (
|
|
||||||
<div className="rounded-lg border border-blue-200 bg-blue-50/50 p-4 space-y-4">
|
|
||||||
<div className="flex items-center gap-2 text-sm font-semibold text-blue-700">
|
|
||||||
<span>🌏</span>
|
|
||||||
<span>무역 정보</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
||||||
{/* 인코텀즈 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="incoterms" className="text-xs sm:text-sm">
|
|
||||||
인코텀즈
|
|
||||||
</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.incoterms}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setFormData({ ...formData, incoterms: value })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="EXW">EXW</SelectItem>
|
|
||||||
<SelectItem value="FOB">FOB</SelectItem>
|
|
||||||
<SelectItem value="CIF">CIF</SelectItem>
|
|
||||||
<SelectItem value="DDP">DDP</SelectItem>
|
|
||||||
<SelectItem value="DAP">DAP</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 결제 조건 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="paymentTerms" className="text-xs sm:text-sm">
|
|
||||||
결제 조건
|
|
||||||
</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.paymentTerms}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setFormData({ ...formData, paymentTerms: value })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="advance">선결제</SelectItem>
|
|
||||||
<SelectItem value="cod">착불</SelectItem>
|
|
||||||
<SelectItem value="lc">신용장(L/C)</SelectItem>
|
|
||||||
<SelectItem value="net30">NET 30</SelectItem>
|
|
||||||
<SelectItem value="net60">NET 60</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 통화 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="currency" className="text-xs sm:text-sm">
|
|
||||||
통화
|
|
||||||
</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.currency}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setFormData({ ...formData, currency: value })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue placeholder="통화 선택" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="KRW">KRW (원)</SelectItem>
|
|
||||||
<SelectItem value="USD">USD (달러)</SelectItem>
|
|
||||||
<SelectItem value="EUR">EUR (유로)</SelectItem>
|
|
||||||
<SelectItem value="JPY">JPY (엔)</SelectItem>
|
|
||||||
<SelectItem value="CNY">CNY (위안)</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
||||||
{/* 선적항 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="portOfLoading" className="text-xs sm:text-sm">
|
|
||||||
선적항
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="portOfLoading"
|
|
||||||
placeholder="선적항"
|
|
||||||
value={formData.portOfLoading}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, portOfLoading: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 도착항 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="portOfDischarge" className="text-xs sm:text-sm">
|
|
||||||
도착항
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="portOfDischarge"
|
|
||||||
placeholder="도착항"
|
|
||||||
value={formData.portOfDischarge}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, portOfDischarge: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* HS Code */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="hsCode" className="text-xs sm:text-sm">
|
|
||||||
HS Code
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="hsCode"
|
|
||||||
placeholder="HS Code"
|
|
||||||
value={formData.hsCode}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, hsCode: e.target.value })
|
|
||||||
}
|
|
||||||
className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 메모 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="memo" className="text-xs sm:text-sm">
|
|
||||||
메모
|
|
||||||
</Label>
|
|
||||||
<textarea
|
|
||||||
id="memo"
|
|
||||||
placeholder="메모를 입력하세요"
|
|
||||||
value={formData.memo}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, memo: e.target.value })
|
|
||||||
}
|
|
||||||
className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter className="gap-2 sm:gap-0">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleCancel}
|
|
||||||
disabled={isSaving}
|
|
||||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={isSaving}
|
|
||||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
||||||
>
|
|
||||||
{isSaving ? "저장 중..." : "저장"}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,374 +0,0 @@
|
||||||
# 수주 등록 컴포넌트
|
|
||||||
|
|
||||||
## 개요
|
|
||||||
|
|
||||||
수주 등록 기능을 위한 전용 컴포넌트들입니다. 이 컴포넌트들은 범용 컴포넌트를 래핑하여 수주 등록에 최적화된 고정 설정을 제공합니다.
|
|
||||||
|
|
||||||
## 컴포넌트 구조
|
|
||||||
|
|
||||||
```
|
|
||||||
frontend/components/order/
|
|
||||||
├── OrderRegistrationModal.tsx # 수주 등록 메인 모달
|
|
||||||
├── OrderCustomerSearch.tsx # 거래처 검색 (전용)
|
|
||||||
├── OrderItemRepeaterTable.tsx # 품목 반복 테이블 (전용)
|
|
||||||
└── README.md # 문서 (현재 파일)
|
|
||||||
```
|
|
||||||
|
|
||||||
## 1. OrderRegistrationModal
|
|
||||||
|
|
||||||
수주 등록 메인 모달 컴포넌트입니다.
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface OrderRegistrationModalProps {
|
|
||||||
/** 모달 열림/닫힘 상태 */
|
|
||||||
open: boolean;
|
|
||||||
/** 모달 상태 변경 핸들러 */
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
/** 수주 등록 성공 시 콜백 */
|
|
||||||
onSuccess?: () => void;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 사용 예시
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
|
|
||||||
|
|
||||||
function MyComponent() {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button onClick={() => setIsOpen(true)}>수주 등록</Button>
|
|
||||||
|
|
||||||
<OrderRegistrationModal
|
|
||||||
open={isOpen}
|
|
||||||
onOpenChange={setIsOpen}
|
|
||||||
onSuccess={() => {
|
|
||||||
console.log("수주 등록 완료!");
|
|
||||||
// 목록 새로고침 등
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 기능
|
|
||||||
|
|
||||||
- **입력 방식 선택**: 거래처 우선, 견적 방식, 단가 방식
|
|
||||||
- **거래처 검색**: 자동완성 드롭다운으로 거래처 검색 및 선택
|
|
||||||
- **품목 관리**: 모달에서 품목 검색 및 추가, 수량/단가 입력, 금액 자동 계산
|
|
||||||
- **전체 금액 표시**: 추가된 품목들의 총 금액 계산
|
|
||||||
- **유효성 검사**: 거래처 및 품목 필수 입력 체크
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. OrderCustomerSearch
|
|
||||||
|
|
||||||
수주 등록 전용 거래처 검색 컴포넌트입니다.
|
|
||||||
|
|
||||||
### 특징
|
|
||||||
|
|
||||||
- `customer_mng` 테이블만 조회 (고정)
|
|
||||||
- 거래처명, 거래처코드, 사업자번호로 검색 (고정)
|
|
||||||
- 추가 정보 표시 (주소, 연락처)
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface OrderCustomerSearchProps {
|
|
||||||
/** 현재 선택된 거래처 코드 */
|
|
||||||
value: string;
|
|
||||||
/** 거래처 선택 시 콜백 (거래처 코드, 전체 데이터) */
|
|
||||||
onChange: (customerCode: string | null, fullData?: any) => void;
|
|
||||||
/** 비활성화 여부 */
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 사용 예시
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { OrderCustomerSearch } from "@/components/order/OrderCustomerSearch";
|
|
||||||
|
|
||||||
function MyForm() {
|
|
||||||
const [customerCode, setCustomerCode] = useState("");
|
|
||||||
const [customerName, setCustomerName] = useState("");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OrderCustomerSearch
|
|
||||||
value={customerCode}
|
|
||||||
onChange={(code, fullData) => {
|
|
||||||
setCustomerCode(code || "");
|
|
||||||
setCustomerName(fullData?.customer_name || "");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 고정 설정
|
|
||||||
|
|
||||||
| 설정 | 값 | 설명 |
|
|
||||||
|------|-----|------|
|
|
||||||
| `tableName` | `customer_mng` | 거래처 테이블 |
|
|
||||||
| `displayField` | `customer_name` | 표시 필드 |
|
|
||||||
| `valueField` | `customer_code` | 값 필드 |
|
|
||||||
| `searchFields` | `["customer_name", "customer_code", "business_number"]` | 검색 대상 필드 |
|
|
||||||
| `additionalFields` | `["customer_code", "address", "contact_phone"]` | 추가 표시 필드 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. OrderItemRepeaterTable
|
|
||||||
|
|
||||||
수주 등록 전용 품목 반복 테이블 컴포넌트입니다.
|
|
||||||
|
|
||||||
### 특징
|
|
||||||
|
|
||||||
- `item_info` 테이블만 조회 (고정)
|
|
||||||
- 수주에 필요한 컬럼만 표시 (품번, 품명, 수량, 단가, 금액 등)
|
|
||||||
- 금액 자동 계산 (`수량 * 단가`)
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface OrderItemRepeaterTableProps {
|
|
||||||
/** 현재 선택된 품목 목록 */
|
|
||||||
value: any[];
|
|
||||||
/** 품목 목록 변경 시 콜백 */
|
|
||||||
onChange: (items: any[]) => void;
|
|
||||||
/** 비활성화 여부 */
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 사용 예시
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { OrderItemRepeaterTable } from "@/components/order/OrderItemRepeaterTable";
|
|
||||||
|
|
||||||
function MyForm() {
|
|
||||||
const [items, setItems] = useState([]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OrderItemRepeaterTable
|
|
||||||
value={items}
|
|
||||||
onChange={setItems}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 고정 컬럼 설정
|
|
||||||
|
|
||||||
| 필드 | 라벨 | 타입 | 편집 | 필수 | 계산 | 설명 |
|
|
||||||
|------|------|------|------|------|------|------|
|
|
||||||
| `id` | 품번 | text | ❌ | - | - | 품목 ID |
|
|
||||||
| `item_name` | 품명 | text | ❌ | - | - | 품목명 |
|
|
||||||
| `item_number` | 품목번호 | text | ❌ | - | - | 품목 번호 |
|
|
||||||
| `quantity` | 수량 | number | ✅ | ✅ | - | 주문 수량 (기본값: 1) |
|
|
||||||
| `selling_price` | 단가 | number | ✅ | ✅ | - | 판매 단가 |
|
|
||||||
| `amount` | 금액 | number | ❌ | - | ✅ | 자동 계산 (수량 * 단가) |
|
|
||||||
| `delivery_date` | 납품일 | date | ✅ | - | - | 납품 예정일 |
|
|
||||||
| `note` | 비고 | text | ✅ | - | - | 추가 메모 |
|
|
||||||
|
|
||||||
### 계산 규칙
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
amount = quantity * selling_price
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 범용 컴포넌트 vs 전용 컴포넌트
|
|
||||||
|
|
||||||
### 왜 전용 컴포넌트를 만들었나?
|
|
||||||
|
|
||||||
| 항목 | 범용 컴포넌트 | 전용 컴포넌트 |
|
|
||||||
|------|--------------|--------------|
|
|
||||||
| **목적** | 화면 편집기에서 다양한 용도로 사용 | 수주 등록 전용 |
|
|
||||||
| **설정** | ConfigPanel에서 자유롭게 변경 가능 | 하드코딩으로 고정 |
|
|
||||||
| **유연성** | 높음 (모든 테이블/필드 지원) | 낮음 (수주에 최적화) |
|
|
||||||
| **안정성** | 사용자 실수 가능 | 설정 변경 불가로 안전 |
|
|
||||||
| **위치** | `lib/registry/components/` | `components/order/` |
|
|
||||||
|
|
||||||
### 범용 컴포넌트 (화면 편집기용)
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// ❌ 수주 등록에서 사용 금지
|
|
||||||
<AutocompleteSearchInputComponent
|
|
||||||
tableName="???" // ConfigPanel에서 변경 가능
|
|
||||||
displayField="???" // 다른 테이블로 바꿀 수 있음
|
|
||||||
valueField="???" // 필드가 맞지 않으면 에러
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**문제점:**
|
|
||||||
- 사용자가 `tableName`을 `item_info`로 변경하면 거래처가 아닌 품목이 조회됨
|
|
||||||
- `valueField`를 변경하면 `formData.customerCode`에 잘못된 값 저장
|
|
||||||
- 수주 로직이 깨짐
|
|
||||||
|
|
||||||
### 전용 컴포넌트 (수주 등록용)
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// ✅ 수주 등록에서 사용
|
|
||||||
<OrderCustomerSearch
|
|
||||||
value={customerCode} // 외부에서 제어 가능
|
|
||||||
onChange={handleChange} // 값 변경만 처리
|
|
||||||
// 나머지 설정은 내부에서 고정
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**장점:**
|
|
||||||
- 설정이 하드코딩되어 있어 변경 불가
|
|
||||||
- 수주 등록 로직에 최적화
|
|
||||||
- 안전하고 예측 가능
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## API 엔드포인트
|
|
||||||
|
|
||||||
### 거래처 검색
|
|
||||||
|
|
||||||
```
|
|
||||||
GET /api/entity-search/customer_mng
|
|
||||||
Query Parameters:
|
|
||||||
- searchText: 검색어
|
|
||||||
- searchFields: customer_name,customer_code,business_number
|
|
||||||
- page: 페이지 번호
|
|
||||||
- limit: 페이지 크기
|
|
||||||
```
|
|
||||||
|
|
||||||
### 품목 검색
|
|
||||||
|
|
||||||
```
|
|
||||||
GET /api/entity-search/item_info
|
|
||||||
Query Parameters:
|
|
||||||
- searchText: 검색어
|
|
||||||
- searchFields: item_name,id,item_number
|
|
||||||
- page: 페이지 번호
|
|
||||||
- limit: 페이지 크기
|
|
||||||
```
|
|
||||||
|
|
||||||
### 수주 등록
|
|
||||||
|
|
||||||
```
|
|
||||||
POST /api/orders
|
|
||||||
Body:
|
|
||||||
{
|
|
||||||
inputMode: "customer_first" | "quotation" | "unit_price",
|
|
||||||
customerCode: string,
|
|
||||||
deliveryDate?: string,
|
|
||||||
items: Array<{
|
|
||||||
id: string,
|
|
||||||
item_name: string,
|
|
||||||
quantity: number,
|
|
||||||
selling_price: number,
|
|
||||||
amount: number,
|
|
||||||
delivery_date?: string,
|
|
||||||
note?: string
|
|
||||||
}>,
|
|
||||||
memo?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
Response:
|
|
||||||
{
|
|
||||||
success: boolean,
|
|
||||||
data?: {
|
|
||||||
orderNumber: string,
|
|
||||||
orderId: number
|
|
||||||
},
|
|
||||||
message?: string
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 멀티테넌시 (Multi-Tenancy)
|
|
||||||
|
|
||||||
모든 API 호출은 자동으로 `company_code` 필터링이 적용됩니다.
|
|
||||||
|
|
||||||
- 거래처 검색: 현재 로그인한 사용자의 회사에 속한 거래처만 조회
|
|
||||||
- 품목 검색: 현재 로그인한 사용자의 회사에 속한 품목만 조회
|
|
||||||
- 수주 등록: 자동으로 현재 사용자의 `company_code` 추가
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 트러블슈팅
|
|
||||||
|
|
||||||
### 1. 거래처가 검색되지 않음
|
|
||||||
|
|
||||||
**원인**: `customer_mng` 테이블에 데이터가 없거나 `company_code`가 다름
|
|
||||||
|
|
||||||
**해결**:
|
|
||||||
```sql
|
|
||||||
-- 거래처 데이터 확인
|
|
||||||
SELECT * FROM customer_mng WHERE company_code = 'YOUR_COMPANY_CODE';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 품목이 검색되지 않음
|
|
||||||
|
|
||||||
**원인**: `item_info` 테이블에 데이터가 없거나 `company_code`가 다름
|
|
||||||
|
|
||||||
**해결**:
|
|
||||||
```sql
|
|
||||||
-- 품목 데이터 확인
|
|
||||||
SELECT * FROM item_info WHERE company_code = 'YOUR_COMPANY_CODE';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 수주 등록 실패
|
|
||||||
|
|
||||||
**원인**: 필수 필드 누락 또는 백엔드 API 오류
|
|
||||||
|
|
||||||
**해결**:
|
|
||||||
1. 브라우저 개발자 도구 콘솔 확인
|
|
||||||
2. 네트워크 탭에서 API 응답 확인
|
|
||||||
3. 백엔드 로그 확인
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 개발 참고 사항
|
|
||||||
|
|
||||||
### 새로운 전용 컴포넌트 추가 시
|
|
||||||
|
|
||||||
1. **범용 컴포넌트 활용**: 기존 범용 컴포넌트를 래핑
|
|
||||||
2. **설정 고정**: 비즈니스 로직에 필요한 설정을 하드코딩
|
|
||||||
3. **Props 최소화**: 외부에서 제어 가능한 최소한의 prop만 노출
|
|
||||||
4. **문서 작성**: README에 사용법 및 고정 설정 명시
|
|
||||||
|
|
||||||
### 예시: 견적 등록 전용 컴포넌트
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// QuotationCustomerSearch.tsx
|
|
||||||
export function QuotationCustomerSearch({ value, onChange }: Props) {
|
|
||||||
return (
|
|
||||||
<AutocompleteSearchInputComponent
|
|
||||||
tableName="customer_mng" // 고정
|
|
||||||
displayField="customer_name" // 고정
|
|
||||||
valueField="customer_code" // 고정
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 관련 파일
|
|
||||||
|
|
||||||
- 범용 컴포넌트:
|
|
||||||
- `lib/registry/components/autocomplete-search-input/`
|
|
||||||
- `lib/registry/components/entity-search-input/`
|
|
||||||
- `lib/registry/components/modal-repeater-table/`
|
|
||||||
|
|
||||||
- 백엔드 API:
|
|
||||||
- `backend-node/src/controllers/entitySearchController.ts`
|
|
||||||
- `backend-node/src/controllers/orderController.ts`
|
|
||||||
|
|
||||||
- 계획서:
|
|
||||||
- `수주등록_화면_개발_계획서.md`
|
|
||||||
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
export const INPUT_MODE = {
|
|
||||||
CUSTOMER_FIRST: "customer_first",
|
|
||||||
QUOTATION: "quotation",
|
|
||||||
UNIT_PRICE: "unit_price",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type InputMode = (typeof INPUT_MODE)[keyof typeof INPUT_MODE];
|
|
||||||
|
|
||||||
export const SALES_TYPE = {
|
|
||||||
DOMESTIC: "domestic",
|
|
||||||
EXPORT: "export",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type SalesType = (typeof SALES_TYPE)[keyof typeof SALES_TYPE];
|
|
||||||
|
|
||||||
export const PRICE_TYPE = {
|
|
||||||
STANDARD: "standard",
|
|
||||||
CUSTOMER: "customer",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type PriceType = (typeof PRICE_TYPE)[keyof typeof PRICE_TYPE];
|
|
||||||
|
|
@ -52,7 +52,6 @@ import "./entity-search-input/EntitySearchInputRenderer";
|
||||||
import "./modal-repeater-table/ModalRepeaterTableRenderer";
|
import "./modal-repeater-table/ModalRepeaterTableRenderer";
|
||||||
import "./simple-repeater-table/SimpleRepeaterTableRenderer"; // 🆕 단순 반복 테이블
|
import "./simple-repeater-table/SimpleRepeaterTableRenderer"; // 🆕 단순 반복 테이블
|
||||||
import "./repeat-screen-modal/RepeatScreenModalRenderer"; // 🆕 반복 화면 모달 (카드 형태)
|
import "./repeat-screen-modal/RepeatScreenModalRenderer"; // 🆕 반복 화면 모달 (카드 형태)
|
||||||
import "./order-registration-modal/OrderRegistrationModalRenderer";
|
|
||||||
|
|
||||||
// 🆕 조건부 컨테이너 컴포넌트
|
// 🆕 조건부 컨테이너 컴포넌트
|
||||||
import "./conditional-container/ConditionalContainerRenderer";
|
import "./conditional-container/ConditionalContainerRenderer";
|
||||||
|
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
||||||
|
|
||||||
interface OrderRegistrationModalConfig {
|
|
||||||
buttonText?: string;
|
|
||||||
buttonVariant?: "default" | "secondary" | "outline" | "ghost";
|
|
||||||
buttonSize?: "default" | "sm" | "lg";
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderRegistrationModalConfigPanelProps {
|
|
||||||
config: OrderRegistrationModalConfig;
|
|
||||||
onConfigChange: (config: OrderRegistrationModalConfig) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OrderRegistrationModalConfigPanel({
|
|
||||||
config,
|
|
||||||
onConfigChange,
|
|
||||||
}: OrderRegistrationModalConfigPanelProps) {
|
|
||||||
const [localConfig, setLocalConfig] = useState(config);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLocalConfig(config);
|
|
||||||
}, [config]);
|
|
||||||
|
|
||||||
const updateConfig = (updates: Partial<OrderRegistrationModalConfig>) => {
|
|
||||||
const newConfig = { ...localConfig, ...updates };
|
|
||||||
setLocalConfig(newConfig);
|
|
||||||
onConfigChange(newConfig);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4 p-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">버튼 텍스트</Label>
|
|
||||||
<Input
|
|
||||||
value={localConfig.buttonText || "수주 등록"}
|
|
||||||
onChange={(e) => updateConfig({ buttonText: e.target.value })}
|
|
||||||
placeholder="수주 등록"
|
|
||||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">버튼 스타일</Label>
|
|
||||||
<Select
|
|
||||||
value={localConfig.buttonVariant || "default"}
|
|
||||||
onValueChange={(value: any) => updateConfig({ buttonVariant: value })}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="default">기본</SelectItem>
|
|
||||||
<SelectItem value="secondary">보조</SelectItem>
|
|
||||||
<SelectItem value="outline">외곽선</SelectItem>
|
|
||||||
<SelectItem value="ghost">고스트</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs sm:text-sm">버튼 크기</Label>
|
|
||||||
<Select
|
|
||||||
value={localConfig.buttonSize || "default"}
|
|
||||||
onValueChange={(value: any) => updateConfig({ buttonSize: value })}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="sm">작게</SelectItem>
|
|
||||||
<SelectItem value="default">기본</SelectItem>
|
|
||||||
<SelectItem value="lg">크게</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
|
|
||||||
<p className="font-medium mb-2">💡 참고사항:</p>
|
|
||||||
<ul className="space-y-1 list-disc list-inside">
|
|
||||||
<li>버튼 클릭 시 수주 등록 모달이 열립니다</li>
|
|
||||||
<li>거래처 검색, 품목 선택 기능 포함</li>
|
|
||||||
<li>입력 방식: 거래처 우선/견적서/단가</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
|
|
||||||
import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
|
|
||||||
import OrderRegistrationModalDefinition from "./index";
|
|
||||||
import { OrderRegistrationModalConfigPanel } from "./OrderRegistrationModalConfigPanel";
|
|
||||||
|
|
||||||
interface OrderRegistrationModalRendererProps {
|
|
||||||
buttonText?: string;
|
|
||||||
buttonVariant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
|
|
||||||
buttonSize?: "default" | "sm" | "lg";
|
|
||||||
style?: React.CSSProperties;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OrderRegistrationModalRenderer({
|
|
||||||
buttonText = "수주 등록",
|
|
||||||
buttonVariant = "default",
|
|
||||||
buttonSize = "default",
|
|
||||||
style,
|
|
||||||
}: OrderRegistrationModalRendererProps) {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
|
|
||||||
// style에서 width, height 제거 (h-full w-full로 제어)
|
|
||||||
const { width, height, ...restStyle } = style || {};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
variant={buttonVariant}
|
|
||||||
size={buttonSize}
|
|
||||||
onClick={() => setIsOpen(true)}
|
|
||||||
className="h-full w-full"
|
|
||||||
style={restStyle}
|
|
||||||
>
|
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
|
||||||
{buttonText}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<OrderRegistrationModal open={isOpen} onOpenChange={setIsOpen} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 컴포넌트 자동 등록
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
ComponentRegistry.registerComponent({
|
|
||||||
...OrderRegistrationModalDefinition,
|
|
||||||
component: OrderRegistrationModalRenderer,
|
|
||||||
renderer: OrderRegistrationModalRenderer,
|
|
||||||
configPanel: OrderRegistrationModalConfigPanel,
|
|
||||||
} as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
/**
|
|
||||||
* 수주등록 모달 컴포넌트
|
|
||||||
* 거래처 검색, 품목 선택, 수주 정보 입력을 한 번에 처리하는 모달
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { ComponentDefinition, ComponentCategory } from "@/types/component";
|
|
||||||
|
|
||||||
export const OrderRegistrationModalDefinition: Omit<ComponentDefinition, "renderer" | "configPanel" | "component"> = {
|
|
||||||
id: "order-registration-modal",
|
|
||||||
name: "수주등록 모달",
|
|
||||||
category: ComponentCategory.ACTION,
|
|
||||||
webType: "button" as const,
|
|
||||||
description: "거래처, 품목을 선택하여 수주를 등록하는 모달",
|
|
||||||
icon: "FileText",
|
|
||||||
version: "1.0.0",
|
|
||||||
author: "WACE",
|
|
||||||
tags: ["수주", "주문", "영업", "모달"],
|
|
||||||
|
|
||||||
defaultSize: {
|
|
||||||
width: 120,
|
|
||||||
height: 40,
|
|
||||||
},
|
|
||||||
|
|
||||||
defaultConfig: {
|
|
||||||
buttonText: "수주 등록",
|
|
||||||
buttonVariant: "default",
|
|
||||||
buttonSize: "default",
|
|
||||||
},
|
|
||||||
|
|
||||||
defaultProps: {
|
|
||||||
style: {
|
|
||||||
width: "120px",
|
|
||||||
height: "40px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
configSchema: {
|
|
||||||
buttonText: {
|
|
||||||
type: "string",
|
|
||||||
label: "버튼 텍스트",
|
|
||||||
defaultValue: "수주 등록",
|
|
||||||
},
|
|
||||||
buttonVariant: {
|
|
||||||
type: "select",
|
|
||||||
label: "버튼 스타일",
|
|
||||||
options: [
|
|
||||||
{ label: "기본", value: "default" },
|
|
||||||
{ label: "보조", value: "secondary" },
|
|
||||||
{ label: "외곽선", value: "outline" },
|
|
||||||
{ label: "고스트", value: "ghost" },
|
|
||||||
],
|
|
||||||
defaultValue: "default",
|
|
||||||
},
|
|
||||||
buttonSize: {
|
|
||||||
type: "select",
|
|
||||||
label: "버튼 크기",
|
|
||||||
options: [
|
|
||||||
{ label: "작게", value: "sm" },
|
|
||||||
{ label: "기본", value: "default" },
|
|
||||||
{ label: "크게", value: "lg" },
|
|
||||||
],
|
|
||||||
defaultValue: "default",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrderRegistrationModalDefinition;
|
|
||||||
|
|
||||||
|
|
@ -32,8 +32,6 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
|
||||||
import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
|
import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
|
||||||
"entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
|
"entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
|
||||||
"modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
|
"modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
|
||||||
"order-registration-modal": () =>
|
|
||||||
import("@/lib/registry/components/order-registration-modal/OrderRegistrationModalConfigPanel"),
|
|
||||||
// 🆕 조건부 컨테이너
|
// 🆕 조건부 컨테이너
|
||||||
"conditional-container": () =>
|
"conditional-container": () =>
|
||||||
import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
|
import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
|
||||||
|
|
@ -401,7 +399,6 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
|
||||||
"autocomplete-search-input",
|
"autocomplete-search-input",
|
||||||
"entity-search-input",
|
"entity-search-input",
|
||||||
"modal-repeater-table",
|
"modal-repeater-table",
|
||||||
"order-registration-modal",
|
|
||||||
"conditional-container",
|
"conditional-container",
|
||||||
].includes(componentId);
|
].includes(componentId);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue