vexplor/frontend/app/test-autocomplete-mapping/page.tsx

"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>
  );
}