create-entity-server 0.0.9

package/template/samples/python/entity_server.py

@@ -0,0 +1,225 @@
+"""
+Entity Server 클라이언트 (Python)
+
+의존성:
+    pip install requests cryptography
+
+환경변수:
+    ENTITY_SERVER_URL          http://localhost:47200
+    ENTITY_SERVER_API_KEY      your-api-key
+    ENTITY_SERVER_HMAC_SECRET  your-hmac-secret
+    ENTITY_PACKET_MAGIC_LEN    4   (서버 packet_magic_len 과 동일)
+
+사용 예:
+    es = EntityServerClient()
+    result = es.get("account", 1)
+    items  = es.list("account", page=1, limit=20)
+    seq    = es.submit("account", {"name": "홍길동", "email": "hong@example.com"})
+
+트랜잭션 사용 예:
+    es.trans_start()
+    try:
+        order_ref = es.submit("order", {...})          # seq: "$tx.0"
+        es.submit("order_item", {"order_seq": order_ref["seq"], ...})  # "$tx.0" 자동 치환
+        result    = es.trans_commit()
+        order_seq = result["results"][0]["seq"]   # 실제 seq
+    except Exception:
+        es.trans_rollback()
+        raise
+"""
+
+from __future__ import annotations
+
+import hashlib
+import hmac
+import json
+import os
+import time
+import uuid
+from typing import Any
+
+import requests
+from cryptography.hazmat.primitives.ciphers.aead import XChaCha20Poly1305
+
+
+class EntityServerClient:
+    def __init__(
+        self,
+        base_url:    str = "",
+        api_key:     str = "",
+        hmac_secret: str = "",
+        timeout:     int = 10,
+        magic_len:   int = 4,
+    ) -> None:
+        self.base_url    = (base_url    or os.getenv("ENTITY_SERVER_URL",          "http://localhost:47200")).rstrip("/")
+        self.api_key     = api_key     or os.getenv("ENTITY_SERVER_API_KEY",     "")
+        self.hmac_secret = hmac_secret or os.getenv("ENTITY_SERVER_HMAC_SECRET", "")
+        self.timeout     = timeout
+        self.magic_len   = int(os.getenv("ENTITY_PACKET_MAGIC_LEN", magic_len))
+        self._session    = requests.Session()
+        self._active_tx_id: str | None = None
+
+    # ─── 트랜잭션 ──────────────────────────────────────────────────────────────
+
+    def trans_start(self) -> str:
+        """
+        트랜잭션 시작 — 서버에 트랜잭션 큐를 등록하고 transaction_id 를 반환합니다.
+        이후 submit / delete 가 서버 큐에 쌓이고 trans_commit() 시 일괄 처리됩니다.
+        """
+        result = self._request("POST", "/v1/transaction/start")
+        self._active_tx_id = result["transaction_id"]
+        return self._active_tx_id
+
+    def trans_rollback(self, transaction_id: str | None = None) -> dict:
+        """트랜잭션 단위로 변경사항을 롤백합니다.
+        transaction_id 생략 시 trans_start() 로 시작한 활성 트랜잭션을 사용합니다."""
+        tx_id = transaction_id or self._active_tx_id
+        if not tx_id:
+            raise RuntimeError("No active transaction. Call trans_start() first.")
+        self._active_tx_id = None
+        return self._request("POST", f"/v1/transaction/rollback/{tx_id}")
+
+    def trans_commit(self, transaction_id: str | None = None) -> dict:
+        """트랜잭션 커밋 — 서버 큐에 쌓인 작업을 단일 DB 트랜잭션으로 일괄 처리합니다.
+        transaction_id 생략 시 trans_start() 로 시작한 활성 트랜잭션을 사용합니다."""
+        tx_id = transaction_id or self._active_tx_id
+        if not tx_id:
+            raise RuntimeError("No active transaction. Call trans_start() first.")
+        self._active_tx_id = None
+        return self._request("POST", f"/v1/transaction/commit/{tx_id}")
+
+    # ─── CRUD ─────────────────────────────────────────────────────────────────
+
+    def get(self, entity: str, seq: int) -> dict:
+        """단건 조회"""
+        return self._request("GET", f"/v1/entity/{entity}/{seq}")
+
+    def list(self, entity: str, page: int = 1, limit: int = 20, order_by: str | None = None) -> dict:
+        """목록 조회"""
+        params: dict = {"page": page, "limit": limit}
+        if order_by:
+            params["order_by"] = order_by
+        return self._request("GET", f"/v1/entity/{entity}/list", params=params)
+
+    def count(self, entity: str) -> dict:
+        """건수 조회"""
+        return self._request("GET", f"/v1/entity/{entity}/count")
+
+    def query(
+        self,
+        entity:   str,
+        filter:   list[dict] | None = None,
+        page:     int = 1,
+        limit:    int = 20,
+        order_by: str | None = None,
+    ) -> dict:
+        """
+        필터 검색
+        filter 예: [{"field": "status", "op": "eq", "value": "active"}]
+        """
+        params: dict = {"page": page, "limit": limit}
+        if order_by:
+            params["order_by"] = order_by
+        return self._request("POST", f"/v1/entity/{entity}/query", body=filter or [], params=params)
+
+    def submit(self, entity: str, data: dict, *, transaction_id: str | None = None) -> dict:
+        """
+        생성 또는 수정
+        data에 'seq' 포함 시 수정, 없으면 생성
+        :param transaction_id: trans_start() 가 반환한 ID (생략 시 활성 트랜잭션 자동 사용)
+        """
+        tx_id = transaction_id or self._active_tx_id
+        extra = {"X-Transaction-ID": tx_id} if tx_id else {}
+        return self._request("POST", f"/v1/entity/{entity}/submit", body=data, extra_headers=extra)
+
+    def delete(self, entity: str, seq: int, *, transaction_id: str | None = None, hard: bool = False) -> dict:
+        """삭제
+        :param transaction_id: trans_start() 가 반환한 ID (생략 시 활성 트랜잭션 자동 사용)
+        :param hard: True 시 하드 삭제
+        """
+        params = {"hard": "true"} if hard else {}
+        tx_id = transaction_id or self._active_tx_id
+        extra = {"X-Transaction-ID": tx_id} if tx_id else {}
+        return self._request("DELETE", f"/v1/entity/{entity}/delete/{seq}", params=params, extra_headers=extra)
+
+    def history(self, entity: str, seq: int, page: int = 1, limit: int = 50) -> dict:
+        """변경 이력 조회"""
+        return self._request("GET", f"/v1/entity/{entity}/history/{seq}", params={"page": page, "limit": limit})
+
+    def rollback(self, entity: str, history_seq: int) -> dict:
+        """history seq 단위 롤백 (단건)"""
+        return self._request("POST", f"/v1/entity/{entity}/rollback/{history_seq}")
+
+    # ─── 내부 ─────────────────────────────────────────────────────────────────
+
+    def _request(
+        self,
+        method:        str,
+        path:          str,
+        body:          Any = None,
+        params:        dict | None = None,
+        extra_headers: dict | None = None,
+    ) -> dict:
+        # 쿼리스트링 포함 전체 경로 (서명 대상)
+        if params:
+            qs = "&".join(f"{k}={v}" for k, v in params.items())
+            signed_path = f"{path}?{qs}"
+        else:
+            signed_path = path
+
+        body_str  = json.dumps(body, ensure_ascii=False) if body is not None else ""
+        timestamp = str(int(time.time()))
+        nonce     = str(uuid.uuid4())
+        signature = self._sign(method, signed_path, timestamp, nonce, body_str)
+
+        headers: dict = {
+            "Content-Type": "application/json",
+            "X-API-Key":    self.api_key,
+            "X-Timestamp":  timestamp,
+            "X-Nonce":      nonce,
+            "X-Signature":  signature,
+        }
+        if extra_headers:
+            headers.update(extra_headers)
+
+        url  = self.base_url + path
+        resp = self._session.request(
+            method=method,
+            url=url,
+            headers=headers,
+            data=body_str.encode("utf-8") if body_str else None,
+            params=params,
+            timeout=self.timeout,
+        )
+
+        # 패킷 암호화 응답: application/octet-stream → 복호화
+        content_type = resp.headers.get("Content-Type", "")
+        if "application/octet-stream" in content_type:
+            data = json.loads(self._decrypt_packet(resp.content))
+        else:
+            data = resp.json()
+
+        if not data.get("ok"):
+            raise RuntimeError(f"EntityServer error: {data.get('message', 'Unknown')} (HTTP {resp.status_code})")
+
+        return data
+
+    def _decrypt_packet(self, data: bytes) -> bytes:
+        """
+        XChaCha20-Poly1305 패킷 복호화
+        포맷: [magic:magic_len][nonce:24][ciphertext+tag]
+        키: sha256(hmac_secret)
+        """
+        key        = hashlib.sha256(self.hmac_secret.encode("utf-8")).digest()
+        nonce      = data[self.magic_len : self.magic_len + 24]
+        ciphertext = data[self.magic_len + 24 :]
+        return XChaCha20Poly1305(key).decrypt(nonce, ciphertext, b"")
+
+    def _sign(self, method: str, path: str, timestamp: str, nonce: str, body: str) -> str:
+        """HMAC-SHA256 서명"""
+        payload = "|".join([method, path, timestamp, nonce, body])
+        return hmac.new(
+            key=self.hmac_secret.encode("utf-8"),
+            msg=payload.encode("utf-8"),
+            digestmod=hashlib.sha256,
+        ).hexdigest()

package/template/samples/python/example.py

@@ -0,0 +1,50 @@
+"""
+EntityServerClient 사용 예제
+
+실행:
+    pip install requests
+    ENTITY_SERVER_URL=http://localhost:47200 \
+    ENTITY_SERVER_API_KEY=mykey \
+    ENTITY_SERVER_HMAC_SECRET=mysecret \
+    python example.py
+"""
+
+from entity_server import EntityServerClient
+
+es = EntityServerClient()
+
+# 목록 조회
+result = es.list("product", page=1, limit=10)
+print(f"List: {len(result.get('data', []))} items")
+
+# 생성
+created = es.submit("product", {
+    "name":     "무선 마우스",
+    "price":    45000,
+    "category": "peripherals",
+})
+seq = created.get("seq")
+print(f"Created seq: {seq}")
+
+# 단건 조회
+item = es.get("product", seq)
+print(f"Get: {item['data']['name']}")
+
+# 수정 (seq 포함)
+es.submit("product", {"seq": seq, "price": 39000})
+print("Updated")
+
+# 필터 검색
+results = es.query("product",
+    filter=[{"field": "category", "op": "eq", "value": "peripherals"}],
+    page=1, limit=5,
+)
+print(f"Query: {len(results.get('data', []))} results")
+
+# 이력 조회
+hist = es.history("product", seq)
+print(f"History: {len(hist.get('data', []))} entries")
+
+# 삭제
+es.delete("product", seq)
+print("Deleted")

package/template/samples/react/src/api/entityServerClient.ts

@@ -0,0 +1,290 @@
+/**
+ * Entity Server API 클라이언트 (React / 브라우저)
+ *
+ * 브라우저 환경에서는 HMAC secret을 노출할 수 없으므로 JWT Bearer 토큰 방식을 사용합니다.
+ *
+ * 패킷 암호화 지원:
+ *   서버가 application/octet-stream 으로 응답하면 자동으로 복호화합니다.
+ *   복호화 키: sha256(access_token)
+ *   의존성: @noble/ciphers, @noble/hashes  (npm install @noble/ciphers @noble/hashes)
+ *
+ * 환경변수 (Vite):
+ *   VITE_ENTITY_SERVER_URL=http://localhost:47200
+ *   VITE_PACKET_MAGIC_LEN=4  (서버 packet_magic_len 과 동일하게)
+ *
+ * 트랜잭션 사용 예:
+ *   await es.transStart();
+ *   try {
+ *     const orderRef  = await es.submit('order', { user_seq: 1, total: 9900 });        // seq: "$tx.0"
+ *     await es.submit('order_item', { order_seq: orderRef.seq, item_seq: 5 });          // "$tx.0" 자동 치환
+ *     const result    = await es.transCommit();
+ *     const orderSeq  = result.results[0].seq;                                          // 실제 seq
+ *   } catch (e) {
+ *     await es.transRollback();
+ *   }
+ */
+
+import { xchacha20_poly1305 } from "@noble/ciphers/chacha";
+import { sha256 } from "@noble/hashes/sha2";
+
+export interface EntityListParams {
+    page?: number;
+    limit?: number;
+    orderBy?: string;
+}
+
+export interface EntityQueryFilter {
+    field: string;
+    op: "eq" | "ne" | "gt" | "gte" | "lt" | "lte" | "like" | "in";
+    value: unknown;
+}
+
+export class EntityServerClient {
+    private baseUrl: string;
+    private token: string;
+    private magicLen: number;
+    private activeTxId: string | null = null;
+
+    constructor(baseUrl?: string, token?: string) {
+        this.baseUrl = (
+            baseUrl ??
+            (import.meta as unknown as Record<string, Record<string, string>>)
+                .env?.VITE_ENTITY_SERVER_URL ??
+            "http://localhost:47200"
+        ).replace(/\/$/, "");
+        this.token = token ?? "";
+        const envMagic = (
+            import.meta as unknown as Record<string, Record<string, string>>
+        ).env?.VITE_PACKET_MAGIC_LEN;
+        this.magicLen = envMagic ? Number(envMagic) : 4;
+    }
+
+    setToken(token: string): void {
+        this.token = token;
+    }
+
+    // ─── 인증 ────────────────────────────────────────────────────────────────
+
+    async login(
+        email: string,
+        password: string,
+    ): Promise<{
+        access_token: string;
+        refresh_token: string;
+        expires_in: number;
+    }> {
+        const data = await this.request<{
+            data: {
+                access_token: string;
+                refresh_token: string;
+                expires_in: number;
+            };
+        }>("POST", "/v1/auth/login", { email, passwd: password }, false);
+        this.token = data.data.access_token;
+        return data.data;
+    }
+
+    async refreshToken(
+        refreshToken: string,
+    ): Promise<{ access_token: string; expires_in: number }> {
+        const data = await this.request<{
+            data: { access_token: string; expires_in: number };
+        }>("POST", "/v1/auth/refresh", { refresh_token: refreshToken }, false);
+        this.token = data.data.access_token;
+        return data.data;
+    }
+
+    // ─── 트랜잭션 ──────────────────────────────────────────────────────────────
+
+    /**
+     * 트랜잭션 시작 — 서버에 트랜잭션 큐를 등록하고 transaction_id 를 반환합니다.
+     * 이후 submit / delete 가 서버 큐에 쌓이고 transCommit() 시 일괄 처리됩니다.
+     */
+    async transStart(): Promise<string> {
+        const res = await this.request<{ ok: boolean; transaction_id: string }>(
+            "POST",
+            "/v1/transaction/start",
+            undefined,
+            false,
+        );
+        this.activeTxId = res.transaction_id;
+        return this.activeTxId;
+    }
+
+    /**
+     * 트랜잭션 단위로 변경사항을 롤백합니다.
+     * transactionId 생략 시 transStart() 로 시작한 활성 트랜잭션을 사용합니다.
+     */
+    transRollback(transactionId?: string): Promise<{ ok: boolean }> {
+        const txId = transactionId ?? this.activeTxId;
+        if (!txId)
+            return Promise.reject(
+                new Error("No active transaction. Call transStart() first."),
+            );
+        this.activeTxId = null;
+        return this.request("POST", `/v1/transaction/rollback/${txId}`);
+    }
+
+    /**
+     * 트랜잭션 커밋 — 서버 큐에 쌓인 작업을 단일 DB 트랜잭션으로 일괄 처리합니다.
+     * transactionId 생략 시 transStart() 로 시작한 활성 트랜잭션을 사용합니다.
+     */
+    transCommit(
+        transactionId?: string,
+    ): Promise<{ ok: boolean; results: unknown[] }> {
+        const txId = transactionId ?? this.activeTxId;
+        if (!txId)
+            return Promise.reject(
+                new Error("No active transaction. Call transStart() first."),
+            );
+        this.activeTxId = null;
+        return this.request("POST", `/v1/transaction/commit/${txId}`);
+    }
+
+    // ─── CRUD ────────────────────────────────────────────────────────────────
+
+    get<T = unknown>(
+        entity: string,
+        seq: number,
+    ): Promise<{ ok: boolean; data: T }> {
+        return this.request("GET", `/v1/entity/${entity}/${seq}`);
+    }
+
+    list<T = unknown>(
+        entity: string,
+        params: EntityListParams = {},
+    ): Promise<{ ok: boolean; data: T[]; total: number }> {
+        const q = buildQuery({ page: 1, limit: 20, ...params });
+        return this.request("GET", `/v1/entity/${entity}/list?${q}`);
+    }
+
+    count(entity: string): Promise<{ ok: boolean; count: number }> {
+        return this.request("GET", `/v1/entity/${entity}/count`);
+    }
+
+    query<T = unknown>(
+        entity: string,
+        filter: EntityQueryFilter[] = [],
+        params: EntityListParams = {},
+    ): Promise<{ ok: boolean; data: T[]; total: number }> {
+        const q = buildQuery({ page: 1, limit: 20, ...params });
+        return this.request("POST", `/v1/entity/${entity}/query?${q}`, filter);
+    }
+
+    submit<T = unknown>(
+        entity: string,
+        data: Record<string, unknown>,
+        opts: { transactionId?: string } = {},
+    ): Promise<{ ok: boolean; seq?: number; data?: T }> {
+        const txId = opts.transactionId ?? this.activeTxId;
+        const extra = txId ? { "X-Transaction-ID": txId } : {};
+        return this.request(
+            "POST",
+            `/v1/entity/${entity}/submit`,
+            data,
+            true,
+            extra,
+        );
+    }
+
+    delete(
+        entity: string,
+        seq: number,
+        opts: { transactionId?: string; hard?: boolean } = {},
+    ): Promise<{ ok: boolean }> {
+        const q = opts.hard ? "?hard=true" : "";
+        const txId = opts.transactionId ?? this.activeTxId;
+        const extra = txId ? { "X-Transaction-ID": txId } : {};
+        return this.request(
+            "DELETE",
+            `/v1/entity/${entity}/delete/${seq}${q}`,
+            undefined,
+            true,
+            extra,
+        );
+    }
+
+    history<T = unknown>(
+        entity: string,
+        seq: number,
+        params: EntityListParams = {},
+    ): Promise<{ ok: boolean; data: T[] }> {
+        const q = buildQuery({ page: 1, limit: 50, ...params });
+        return this.request("GET", `/v1/entity/${entity}/history/${seq}?${q}`);
+    }
+
+    rollback(entity: string, historySeq: number): Promise<{ ok: boolean }> {
+        return this.request(
+            "POST",
+            `/v1/entity/${entity}/rollback/${historySeq}`,
+        );
+    }
+
+    private async request<T>(
+        method: string,
+        path: string,
+        body?: unknown,
+        withAuth = true,
+        extraHeaders: Record<string, string> = {},
+    ): Promise<T> {
+        const headers: Record<string, string> = {
+            "Content-Type": "application/json",
+            ...extraHeaders,
+        };
+        if (withAuth && this.token) {
+            headers["Authorization"] = `Bearer ${this.token}`;
+        }
+
+        const res = await fetch(this.baseUrl + path, {
+            method,
+            headers,
+            ...(body != null ? { body: JSON.stringify(body) } : {}),
+        });
+
+        const contentType = res.headers.get("Content-Type") ?? "";
+
+        // 패킷 암호화 응답: application/octet-stream → 복호화
+        if (contentType.includes("application/octet-stream")) {
+            const buffer = await res.arrayBuffer();
+            return this.decryptPacket<T>(buffer);
+        }
+
+        const data = await res.json();
+        if (!data.ok) {
+            const err = new Error(
+                data.message ?? `EntityServer error (HTTP ${res.status})`,
+            );
+            (err as { status?: number }).status = res.status;
+            throw err;
+        }
+        return data as T;
+    }
+
+    /**
+     * XChaCha20-Poly1305 패킷 복호화
+     * 포맷: [magic:magicLen][nonce:24][ciphertext+tag]
+     * 키: sha256(access_token)
+     */
+    private decryptPacket<T>(buffer: ArrayBuffer): T {
+        const key = sha256(new TextEncoder().encode(this.token));
+        const data = new Uint8Array(buffer);
+        const nonce = data.slice(this.magicLen, this.magicLen + 24);
+        const ciphertext = data.slice(this.magicLen + 24);
+        const cipher = xchacha20_poly1305(key, nonce);
+        const plaintext = cipher.decrypt(ciphertext);
+        return JSON.parse(new TextDecoder().decode(plaintext)) as T;
+    }
+}
+
+function buildQuery(params: Record<string, unknown>): string {
+    return Object.entries(params)
+        .filter(([, v]) => v != null)
+        .map(
+            ([k, v]) =>
+                `${encodeURIComponent(k === "orderBy" ? "order_by" : k)}=${encodeURIComponent(String(v))}`,
+        )
+        .join("&");
+}
+
+/** 싱글턴 인스턴스 (앱 전체 공유) */
+export const entityServer = new EntityServerClient();

package/template/samples/react/src/example.tsx

@@ -0,0 +1,127 @@
+/**
+ * React 컴포넌트 사용 예제
+ *
+ * 설정:
+ *   1. .env 에 VITE_ENTITY_SERVER_URL=http://localhost:47200 추가
+ *   2. 로그인 시 entityServer.login(email, password) 호출
+ *   3. 이후 훅으로 데이터 조회/수정
+ */
+
+import { useState } from "react";
+import {
+    useEntityDelete,
+    useEntityGet,
+    useEntityList,
+    useEntitySubmit,
+} from "./hooks/useEntity";
+
+interface Product {
+    seq: number;
+    name: string;
+    price: number;
+    category: string;
+}
+
+// ─── 목록 컴포넌트 ─────────────────────────────────────────────────────────
+
+export function ProductList() {
+    const [page, setPage] = useState(1);
+    const { data, isLoading, error } = useEntityList<Product>("product", {
+        page,
+        limit: 20,
+    });
+    const deleteMut = useEntityDelete("product");
+
+    if (isLoading) return <p>로딩 중...</p>;
+    if (error) return <p>에러: {(error as Error).message}</p>;
+
+    return (
+        <div>
+            <h2>상품 목록 ({data?.total ?? 0}건)</h2>
+            <ul>
+                {data?.data.map((item) => (
+                    <li key={item.seq}>
+                        [{item.seq}] {item.name} — {item.price.toLocaleString()}
+                        원
+                        <button
+                            onClick={() => deleteMut.mutate(item.seq)}
+                            disabled={deleteMut.isPending}
+                        >
+                            삭제
+                        </button>
+                    </li>
+                ))}
+            </ul>
+            <button
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+            >
+                이전
+            </button>
+            <span> {page} </span>
+            <button onClick={() => setPage((p) => p + 1)}>다음</button>
+        </div>
+    );
+}
+
+// ─── 단건 조회 컴포넌트 ─────────────────────────────────────────────────────
+
+export function ProductDetail({ seq }: { seq: number }) {
+    const { data, isLoading } = useEntityGet<Product>("product", seq);
+
+    if (isLoading) return <p>로딩 중...</p>;
+    const item = data?.data;
+    if (!item) return <p>상품을 찾을 수 없습니다.</p>;
+
+    return (
+        <div>
+            <h3>{item.name}</h3>
+            <p>가격: {item.price.toLocaleString()}원</p>
+            <p>카테고리: {item.category}</p>
+        </div>
+    );
+}
+
+// ─── 생성/수정 폼 컴포넌트 ──────────────────────────────────────────────────
+
+export function ProductForm({ seq }: { seq?: number }) {
+    const submitMut = useEntitySubmit("product");
+    const [form, setForm] = useState({ name: "", price: 0, category: "" });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        // seq 있으면 수정, 없으면 생성
+        await submitMut.mutateAsync(seq ? { ...form, seq } : form);
+        alert(seq ? "수정 완료" : "등록 완료");
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <input
+                placeholder="상품명"
+                value={form.name}
+                onChange={(e) =>
+                    setForm((f) => ({ ...f, name: e.target.value }))
+                }
+            />
+            <input
+                type="number"
+                placeholder="가격"
+                value={form.price}
+                onChange={(e) =>
+                    setForm((f) => ({ ...f, price: +e.target.value }))
+                }
+            />
+            <input
+                placeholder="카테고리"
+                value={form.category}
+                onChange={(e) =>
+                    setForm((f) => ({ ...f, category: e.target.value }))
+                }
+            />
+            <button type="submit" disabled={submitMut.isPending}>
+                {seq ? "수정" : "등록"}
+            </button>
+        </form>
+    );
+}