feat(autocomplete-search-input): 필드 자동 매핑 및 저장 위치 선택 기능 추가

- 필드 자동 매핑 기능 구현
  * FieldMapping 타입 추가 (sourceField → targetField)
  * applyFieldMappings() 함수로 선택 시 자동 입력
  * 여러 필드를 한 번에 자동으로 채움 (거래처 선택 → 주소/전화 자동 입력)

- 값 필드 저장 위치 선택 기능 추가
  * ValueFieldStorage 타입 추가 (targetTable, targetColumn)
  * 기본값(화면 연결 테이블) 또는 명시적 테이블/컬럼 지정 가능
  * 중간 테이블, 이력 테이블 등 다중 테이블 저장 지원

- UI/UX 개선
  * 모든 선택 필드를 Combobox 스타일로 통일
  * 각 필드 아래 간략한 사용 설명 추가
  * 저장 위치 동작 미리보기 박스 추가

- 문서 작성
  * 사용_가이드.md 신규 작성 (실전 예제 3개 포함)
  * 빠른 시작 가이드, FAQ, 체크리스트 제공

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

@@ -0,0 +1,141 @@
+"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>
+  );
+}
+