104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { getFullImageUrl } from "@/lib/api/client";
|
|
import type { SignatureRendererProps, StampRendererProps } from "./types";
|
|
|
|
export function SignatureRenderer({ component }: SignatureRendererProps) {
|
|
const labelPos = component.labelPosition || "left";
|
|
const showLabel = component.showLabel !== false;
|
|
const labelText = component.labelText || "서명:";
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div
|
|
className={`flex h-full gap-2 ${
|
|
labelPos === "top"
|
|
? "flex-col"
|
|
: labelPos === "bottom"
|
|
? "flex-col-reverse"
|
|
: labelPos === "right"
|
|
? "flex-row-reverse"
|
|
: "flex-row"
|
|
}`}
|
|
>
|
|
{showLabel && (
|
|
<div
|
|
className="flex items-center justify-center text-xs font-medium"
|
|
style={{
|
|
width: labelPos === "left" || labelPos === "right" ? "auto" : "100%",
|
|
minWidth: labelPos === "left" || labelPos === "right" ? "40px" : "auto",
|
|
}}
|
|
>
|
|
{labelText}
|
|
</div>
|
|
)}
|
|
<div className="relative flex-1">
|
|
{component.imageUrl ? (
|
|
<img
|
|
src={getFullImageUrl(component.imageUrl)}
|
|
alt="서명"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: component.objectFit || "contain",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
|
|
style={{ borderColor: component.borderColor || "#cccccc" }}
|
|
>
|
|
서명 이미지
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StampRenderer({ component }: StampRendererProps) {
|
|
const showLabel = component.showLabel !== false;
|
|
const labelText = component.labelText || "(인)";
|
|
const personName = component.personName || "";
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="flex h-full gap-2">
|
|
{personName && <div className="flex items-center text-xs font-medium">{personName}</div>}
|
|
<div className="relative flex-1">
|
|
{component.imageUrl ? (
|
|
<img
|
|
src={getFullImageUrl(component.imageUrl)}
|
|
alt="도장"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: component.objectFit || "contain",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
|
|
style={{
|
|
borderColor: component.borderColor || "#cccccc",
|
|
borderRadius: "50%",
|
|
}}
|
|
>
|
|
도장 이미지
|
|
</div>
|
|
)}
|
|
{showLabel && (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center text-xs font-medium"
|
|
style={{ pointerEvents: "none" }}
|
|
>
|
|
{labelText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|