chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

라벨표시 수정

Browse Source
This commit is contained in:
kjs
2025-09-22 14:13:05 +09:00
parent 4b28530fec
commit 0258c2a76c
14 changed files with 235 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
View File

@@ -77,7 +77,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
return (
<div style={componentStyle} className={className} {...domProps}>
{/* 라벨 렌더링 */}
{component.label && (
{component.label && component.style?.labelDisplay !== false && (
<label
style={{
position: "absolute",
@@ -92,11 +92,13 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
>
{component.label}
{component.required && (
<span style={{
color: "#ef4444",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}>
<span
style={{
color: "#ef4444",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}
>
*
</span>
)}
@@ -104,7 +106,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
)}
<label
style={{display: "flex",
style={{
display: "flex",
alignItems: "center",
gap: "8px",
cursor: "pointer",
@@ -112,7 +115,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
height: "100%",
fontSize: "14px",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),}}
...(isInteractive && component.style ? component.style : {}),
}}
onClick={handleClick}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
@@ -122,20 +126,28 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
checked={component.value === true || component.value === "true"}
disabled={componentConfig.disabled || false}
required={componentConfig.required || false}
style={{width: "16px",
style={{
width: "16px",
height: "16px",
accentColor: "#3b82f6",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),}}
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}
onChange={(e) => {
if (component.onChange) {
component.onChange(e.target.checked);
}
}}
/>
<span style={{color: "#374151",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),}}>{componentConfig.checkboxLabel || component.text || "체크박스"}</span>
<span
style={{
color: "#374151",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}
>
{componentConfig.checkboxLabel || component.text || "체크박스"}
</span>
</label>
</div>
);