Skip to main content
단일 페이지 안에서 목록 조회, 검색, 등록, 수정, 삭제까지 처리하는 가장 기본적인 CRUD 구조 예시입니다.
blocks:
  - type: http
    name: 목록
    method: GET
    fetchFn: |
      return [
        { id: 1, name: '서울상사',     status: 'active',   createdAt: '2025-09-01' },
        { id: 2, name: '한강물류',     status: 'inactive', createdAt: '2025-09-03' },
        { id: 3, name: '백두유통',     status: 'active',   createdAt: '2025-09-04' },
        { id: 4, name: '남산커머스',   status: 'inactive', createdAt: '2025-09-05' },
        { id: 5, name: '제주프레시',   status: 'active',   createdAt: '2025-09-06' },
        { id: 6, name: '성수마켓',     status: 'active',   createdAt: '2025-09-07' }
      ]
    params:
      - key: q
        label: 검색
        placeholder: 검색어를 입력하세요.
    searchOptions:
      enabled: true
    columns:
      name:
        openModal: edit-:id
      status:
        valueAs:
          active: 활성
          inactive: 비활성
        color:
          active: green
          inactive: red
      ' ':
        append: true
        buttons:
          - label: 삭제
            openAction: delete
    actions:
      - label: 신규 등록
        single: true
        placement: top right
        openModal: create
      - name: delete
        hidden: true
        confirm: 정말 삭제합니까?
        type: http
        method: POST
        fetchFn: |
          if (!id) { alert('ID 누락'); throw new Error('ID_REQUIRED') }
          alert(`삭제 완료: ${id}`)
          return { message: `deleted:${id}` }
        params:
          - key: id
            valueFromRow: id
    modals:
      - path: create
        blocks:
          - type: http
            method: POST
            fetchFn: |
              const nm = String(name||'').trim()
              if (!nm) return { error: 'name required' }
              const newId = 10000 + (Math.random()*90000|0)
              alert('등록 완료')
              return { id: newId, name: nm, memo: String(memo||''), status: 'active', createdAt: new Date().toISOString().slice(0,10) }
            params:
              - key: name
              - key: memo
            display: form
            submitButton:
              disabledFn: |
                const n = params.find(p => p.key==='name')?.value?.trim()
                return !n
      - path: edit-:id
        blocks:
          - type: http
            method: POST
            fetchFn: |
              if (!id) { throw new Error('ID_REQUIRED') }
              return { id, name: name || '수정됨', status: status || 'active', updatedAt: new Date().toISOString() }
            params:
              - key: id
                valueFromRow: id
              - key: name
                defaultValueFromRow: name
              - key: status
                dropdown:
                  - active
                  - inactive
            display: form