142 lines
5.0 KiB
TypeScript
142 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { AutocompleteSearchInputComponent } from "@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
export default function TestAutocompleteMapping() {
|
|
const [selectedValue, setSelectedValue] = useState("");
|
|
const [customerName, setCustomerName] = useState("");
|
|
const [address, setAddress] = useState("");
|
|
const [phone, setPhone] = useState("");
|
|
|
|
return (
|
|
<div className="container mx-auto py-8 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>AutocompleteSearchInput 필드 자동 매핑 테스트</CardTitle>
|
|
<CardDescription>
|
|
거래처를 선택하면 아래 입력 필드들이 자동으로 채워집니다
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* 검색 컴포넌트 */}
|
|
<div className="space-y-2">
|
|
<Label>거래처 검색</Label>
|
|
<AutocompleteSearchInputComponent
|
|
config={{
|
|
tableName: "customer_mng",
|
|
displayField: "customer_name",
|
|
valueField: "customer_code",
|
|
searchFields: ["customer_name", "customer_code"],
|
|
placeholder: "거래처명 또는 코드로 검색",
|
|
enableFieldMapping: true,
|
|
fieldMappings: [
|
|
{
|
|
sourceField: "customer_name",
|
|
targetField: "customer_name_input",
|
|
label: "거래처명",
|
|
},
|
|
{
|
|
sourceField: "address",
|
|
targetField: "address_input",
|
|
label: "주소",
|
|
},
|
|
{
|
|
sourceField: "phone",
|
|
targetField: "phone_input",
|
|
label: "전화번호",
|
|
},
|
|
],
|
|
}}
|
|
value={selectedValue}
|
|
onChange={(value, fullData) => {
|
|
setSelectedValue(value);
|
|
console.log("선택된 항목:", fullData);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 구분선 */}
|
|
<div className="border-t pt-6">
|
|
<h3 className="text-sm font-semibold mb-4">
|
|
자동으로 채워지는 필드들
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{/* 거래처명 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="customer_name_input">거래처명</Label>
|
|
<Input
|
|
id="customer_name_input"
|
|
value={customerName}
|
|
onChange={(e) => setCustomerName(e.target.value)}
|
|
placeholder="자동으로 채워집니다"
|
|
/>
|
|
</div>
|
|
|
|
{/* 주소 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address_input">주소</Label>
|
|
<Input
|
|
id="address_input"
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
placeholder="자동으로 채워집니다"
|
|
/>
|
|
</div>
|
|
|
|
{/* 전화번호 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone_input">전화번호</Label>
|
|
<Input
|
|
id="phone_input"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
placeholder="자동으로 채워집니다"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 상태 표시 */}
|
|
<div className="border-t pt-6">
|
|
<h3 className="text-sm font-semibold mb-2">현재 상태</h3>
|
|
<div className="p-4 bg-muted rounded-lg">
|
|
<pre className="text-xs">
|
|
{JSON.stringify(
|
|
{
|
|
selectedValue,
|
|
customerName,
|
|
address,
|
|
phone,
|
|
},
|
|
null,
|
|
2
|
|
)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 사용 안내 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">사용 방법</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2 text-sm">
|
|
<ol className="list-decimal list-inside space-y-2">
|
|
<li>위의 검색 필드에 거래처명이나 코드를 입력하세요</li>
|
|
<li>드롭다운에서 원하는 거래처를 선택하세요</li>
|
|
<li>아래 입력 필드들이 자동으로 채워지는 것을 확인하세요</li>
|
|
<li>필요한 경우 자동으로 채워진 값을 수정할 수 있습니다</li>
|
|
</ol>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|