Components - Data Panel

comment

  • 기본 구조: data-panel 클래스를 사용하여 데이터 패널 컨테이너 구성
  • Body: data-panel__body 클래스를 사용
  • Items: data-panel__items 클래스를 사용하여 데이터 행 그룹 구성, 여러 개의 data-panel__items를 사용하여 섹션 구분 가능
  • Split 모디파이어: data-panel--split 클래스로 좌우 분할 레이아웃 구성
  • Description: data-panel__description 클래스로 설명 텍스트 표시
  • Data Row: data-row 컴포넌트와 함께 사용하여 데이터 행 구성
  • Dense 모디파이어: data-row--dense 클래스로 더 조밀한 간격의 행 구성
  • Column 모디파이어: data-row--column 클래스로 세로 레이아웃 구성 (레이블이 위, 필드가 아래)
  • Field Block: data-row__field-block 클래스로 필드 내부 블록 구성
Data Panel - 기본
광고계정명
CTTD_CTTD
캠페인 ID
1234
캠페인명
12/256
HTML 구조
<div class="data-panel">
  <div class="data-panel__body">
    <div class="data-panel__items">
      <div class="data-row">
        <div class="data-row__label">
          <span class="data-row__label-text is-required">광고계정명</span>
        </div>
        <div class="data-row__field">
          <span class="data-row__field-value">CTTD_CTTD</span>
        </div>
      </div>
      <!-- ... 기타 data-row들 ... -->
    </div>
  </div>
</div>
Data Panel - Split
광고그룹 ID
CTTD_CTTD
광고그룹명
12/256
좌측 컨텐츠
HTML 구조
<div class="data-panel data-panel--split">
  <div class="data-panel__body">
    <div class="data-panel__items">
      <!-- data-row들 -->
    </div>
  </div>
</div>
Data Panel - 여러 Items 그룹
광고그룹 ID
CTTD_CTTD
광고그룹명
12/256
타겟팅
성별
HTML 구조
<div class="data-panel">
  <div class="data-panel__body">
    <div class="data-panel__items">
      <!-- 첫 번째 그룹의 data-row들 -->
    </div>
    <div class="data-panel__items">
      <!-- 두 번째 그룹의 data-row들 -->
    </div>
  </div>
</div>
Data Panel - Description
DMP를 활용해 다양한 소스로부터 수집된 오디언스 데이터를 카테고리화하여 제공합니다.
카테고리는 하나 이상 선택할 수 있으며, 모수는 합집합으로 추출합니다.
맞춤 타겟명
0/64
HTML 구조
<div class="data-panel">
  <div class="data-panel__body">
    <div class="data-panel__items">
      <div class="data-panel__description">
        설명 텍스트가 여기에 표시됩니다.
      </div>
    </div>
    <div class="data-panel__items">
      <!-- data-row들 -->
    </div>
  </div>
</div>
Data Panel - Dense Row
픽셀 스크립트
공통(필수) 
<!-- 스크립트 코드 예시 -->
<script>
  console.log('Hello World');
</script>
HTML 구조
<div class="data-panel">
  <div class="data-panel__items">
    <div class="data-row data-row--dense">
      <div class="data-row__label data-row__label--split">
        <span class="data-row__label-text">픽셀 스크립트</span>
        <button type="button" class="ui-button ui-button--outline ui-button--icon-download">
          픽셀 스크립트 설치 가이드
        </button>
      </div>
    </div>
    <div class="data-row data-row--dense data-row--column">
      <div class="data-row__label data-row__label--split">
        <span class="data-row__label-text">공통<strong class="is-emphasis">(필수)</strong></span>
        <div class="action-box action-box--block">
          <button type="button" class="ui-button-text ui-button-text--primary">스크립트 복사</button>
        </div>
      </div>
      <div class="data-row__field">
        <div class="data-row__field-block">
          <!-- 콘텐츠 -->
        </div>
      </div>
    </div>
  </div>
</div>
Data Panel - Column Layout (세로 레이아웃)
전환 설정
전환
전환
핵심 전환
HTML 구조
<div class="data-panel">
  <div class="data-panel__items">
    <div class="data-row data-row--column">
      <div class="data-row__label">
        <span class="data-row__label-text is-required">전환 설정</span>
      </div>
      <div class="data-row__field">
        <div class="data-row__field-block">
          <!-- 콘텐츠 -->
        </div>
      </div>
    </div>
  </div>
</div>