ERP-node/frontend/lib/registry/components/select-basic
kjs bb49073bf7 feat: 테이블 리스트에서 카테고리 다중 값 배지 표시 지원
문제:
- 테이블에서 'CATEGORY_218152,CATEGORY_205381' 같은 다중 값이
- 배지로 표시되지 않고 코드값 그대로 보임

원인:
- formatCellValue의 카테고리 렌더링이 단일 값만 처리
- 콤마로 구분된 다중 값 파싱 로직 없음

해결:
1. 콤마 구분자 감지 및 값 배열로 분리
2. 단일 값: 기존 로직 유지 (단일 배지)
3. 다중 값: flex-wrap gap-1로 여러 배지 렌더링
4. 각 배지는 매핑된 라벨과 색상 사용

결과:
 다중선택 저장된 데이터가 테이블에서 여러 배지로 표시됨
 각 배지에 올바른 색상과 라벨 적용
 단일 값도 기존처럼 정상 작동
2025-11-21 10:03:26 +09:00
..
README.md 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
SelectBasicComponent.tsx feat: 테이블 리스트에서 카테고리 다중 값 배지 표시 지원 2025-11-21 10:03:26 +09:00
SelectBasicConfigPanel.tsx feat: select-basic 컴포넌트에 다중선택 기능 추가 2025-11-20 18:17:08 +09:00
SelectBasicRenderer.tsx 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
config.ts 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
index.ts 분할레이아웃 2025-10-15 17:25:38 +09:00
types.ts 코드 셀렉트박스 기능 구현 2025-09-15 15:38:48 +09:00

README.md

SelectBasic 컴포넌트

select-basic 컴포넌트입니다

개요

  • ID: select-basic
  • 카테고리: input
  • 웹타입: select
  • 작성자: 개발팀
  • 버전: 1.0.0

특징

  • 자동 등록 시스템
  • 타입 안전성
  • Hot Reload 지원
  • 설정 패널 제공
  • 반응형 디자인

사용법

기본 사용법

import { SelectBasicComponent } from "@/lib/registry/components/select-basic";

<SelectBasicComponent
  component={{
    id: "my-select-basic",
    type: "widget",
    webType: "select",
    position: { x: 100, y: 100, z: 1 },
    size: { width: 200, height: 36 },
    config: {
      // 설정값들
    }
  }}
  isDesignMode={false}
/>

설정 옵션

속성 타입 기본값 설명
placeholder string "" 플레이스홀더 텍스트
disabled boolean false 비활성화 여부
required boolean false 필수 입력 여부
readonly boolean false 읽기 전용 여부

이벤트

  • onChange: 값 변경 시
  • onFocus: 포커스 시
  • onBlur: 포커스 해제 시
  • onClick: 클릭 시

스타일링

컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:

  • variant: "default" | "outlined" | "filled"
  • size: "sm" | "md" | "lg"

예시

// 기본 예시
<SelectBasicComponent
  component={{
    id: "sample-select-basic",
    config: {
      placeholder: "입력하세요",
      required: true,
      variant: "outlined"
    }
  }}
/>

개발자 정보

  • 생성일: 2025-09-11
  • CLI 명령어: node scripts/create-component.js select-basic --category=input --webType=select
  • 경로: lib/registry/components/select-basic/

관련 문서