# 레이아웃 커스텀(custom layout) 예제

**URL:** <https://ask.selectfromuser.com/t/custom-layout/311>\
**Category:** 사용 팁\
**Tags:** layout\
**Created:** [11월 11, 2024, 8:18오전 UTC](https://ask.selectfromuser.com/t/custom-layout/311 "2024-11-11T08:18:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [11월 11, 2024, 8:18오전 UTC](https://ask.selectfromuser.com/t/custom-layout/311/1 "2024-11-11T08:18:05Z")

</div>

셀렉트어드민에서는 pages 아래 layout 키를 통해 레이아웃을 커스텀할 수 있습니다.

> **[레이아웃 커스텀 | Select Admin Enterprise](https://docs.selectfromuser.com/guide/custom-layout#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%80%E1%85%AE%E1%84%89%E1%85%A5%E1%86%BC)**
>
> selectfromuser.com

아래 2가지 예제를 통해 사용방법에 대해 더 자세히 알아보세요.

## 예제1

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/f2e90c8316014e3efd4e0c7a88eed213ced25da5.png)

```yaml
menus:
- path: sample/layout/0001
  name: layout sample 1
pages:
- path: sample/layout/0001
  layout: 
    class: flex gap-3
    div:
      - name: left 
        class: p-5 border border-gray-100 rounded-lg bg-white grow
        style:
          min-height: calc(100vh - 200px)
      - name: right
        style:
          width: 400px
          min-height: calc(100vh - 200px)
        div:
          - name: right-top
            class: border border-zinc-100 rounded-lg bg-zinc-50
            div:
              - name: right-top-1
                class: p-5 py-2
              - name: right-top-2
                class: px-5 py-2 border-t
          - name: right-bottom
            class: p-5 rounded-lg bg-white
      
  blocks:
  - layout: left
    title: Invoice
    name: left
    type: placeholder
    
  - layout: right-top-1
    title: Account
    name: right-top-1
    type: placeholder

  - layout: right-top-2
    name: right-top-2
    type: placeholder

  - layout: right-bottom
    name: right-bottom
    type: placeholder

```

## 예제2

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/197c4b248cd359c305c14bd819d3c81864be8cfa.png)

```yaml
menus:
- path: sample/layout/0002
  name: layout sample 2
pages:
- path: sample/layout/0002
  class: bg-slate-50
  layout: 
    class: divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow
    div:
      - class: px-4 py-5 sm:px-6
        name: card1 header
      - class: px-4 py-5 sm:px-6
        name: card1 body
      - class: px-4 py-5 sm:px-6
        name: card1 footer
  
  blocks:
  - layout: card1 header
    type: markdown
    content: |
      #### Title
    
  - layout: card1 body
    name: card1 body
    type: placeholder

  - layout: card1 footer
    name: card1 footer
    type: placeholder

```

관련하여 도움이 필요하시면 문의주시기 바랍니다.

---

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [11월 13, 2024, 6:55오전 UTC](https://ask.selectfromuser.com/t/custom-layout/311/2 "2024-11-13T06:55:17Z")

</div>

## 예제3

컬럼 3개로 영역을 나누는 레이아웃 예제입니다. 왼쪽부터 단계에 맞게 데이터를 조회하는 페이지를 구성할 수 있어요.

관련 도움이 필요하신 경우 문의주시기 바랍니다.

```yaml
menus:
- path: test/layout/search # 메뉴 경로를 정의합니다. 페이지의 URL 경로와 일치해야 합니다.
  name: layout search # 메뉴 이름을 지정합니다. 사용자에게 표시될 이름.

pages:
- path: test/layout/search # 페이지 경로를 정의합니다. 이 경로는 메뉴와 일치해야 합니다.
  layout: 
    style:
      display: flex # 페이지 레이아웃을 flexbox로 설정.
    div:
      - name: column1
        style:
          width: 33% # 왼쪽 1/3 영역. 사용자 정보를 표시하는 영역.
          # borderRight: "solid 1px #f0f0f0" # 우측에 얇은 테두리를 추가(현재 비활성화).
          # paddingRight: 1rem # 오른쪽에 여백 추가(현재 비활성화).

      - style:
          width: 1px
          borderRight: "solid 1px #f0f0f0" # 구분선 역할을 하는 얇은 세로선.
          margin: 0 1rem # 좌우 여백.

      - name: column2
        style:
          width: 33% # 중앙 1/3 영역. 팀 정보를 표시하는 영역.
          maxHeight: 90vh # 높이를 화면의 90%로 제한.
          overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
        # visible: # 조건부 표시 설정(현재 비활성화).
        # params: # 파라미터 `uid`가 있을 때만 표시.
        # uid: true

      - style:
          width: 1px
          # borderRight: "solid 1px #f0f0f0" # 구분선 추가 가능(현재 비활성화).
          margin: 0 1rem # 좌우 여백.

      - style:
          display: flex # 우측 1/3을 세로로 나눔.
          flexDirection: column # 하위 요소를 세로로 정렬.
          width: 33%
        div:
          - name: column3
            style:
              overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
              height: 45vh # 높이를 화면의 절반으로 제한.
              width: 100% # 너비를 전체로 설정.
            class: shadow-sm p-1 border bg-light # CSS 클래스를 사용해 스타일 적용.
            # visible: # 조건부 표시 설정(현재 비활성화).
            # params: # 파라미터 `tid`와 `uid`가 있을 때 표시.
            # tid: true
            # uid: true

          - style:
              width: 1px
              borderRight: "solid 1px #f0f0f0" # 구분선 역할.
              margin: 0 1rem # 좌우 여백.

          - name: column4
            style:
              overflow: scroll # 내용이 넘칠 경우 스크롤 허용.
              height: 45vh # 높이를 화면의 절반으로 제한.
            class: shadow-sm p-1 mt-2 border bg-light # CSS 클래스를 사용해 스타일 적용.
            # visible: # 조건부 표시 설정(현재 비활성화).
            # params: # 파라미터 `tid`와 `uid`가 있을 때 표시.
            # tid: true
            # uid: true

  blocks:
    - type: query
      name: users
      layout: column1 # 결과를 `column1`에 표시.
      resource: mysql.qa # 사용할 데이터베이스 리소스.
      sql: > 
        SELECT id, email, name, created_at
        FROM users 
        ORDER BY id DESC
        LIMIT 10
      showDownload: false
      params:
        - key: uid # 사용자 ID 파라미터. 다른 쿼리에서 사용.
          # usePage: true # 페이지에서 파라미터 전달 여부(현재 비활성화).
          # hidden: true # 사용자에게 파라미터 숨김 여부(현재 비활성화).
      columns:
        email:
          updateParams:
            uid: "{{id}}" # 이메일 선택 시 `uid`를 업데이트.
      searchOptions: 
        enabled: true # 검색 옵션 활성화.

    - type: query
      name: teams
      layout: column2 # 결과를 `column2`에 표시.
      resource: mysql.qa # 사용할 데이터베이스 리소스.
      sqlType: select
      sql: > 
        SELECT 
          teams.id, teams.name
        FROM teams, user_roles
        WHERE user_roles.user_id = :uid
          AND user_roles.team_row_id IS NULL
          AND teams.id = user_roles.team_id
        ORDER BY user_roles.id DESC
      params:
        - key: uid # 사용자 ID를 기반으로 데이터를 필터링.
      columns:
        name:
          updateParams:
            tid: "{{id}}" # 팀 선택 시 `tid`를 업데이트.

    - type: query
      name: team_settings
      layout: column3 # 결과를 `column3`에 표시.
      resource: mysql.qa
      sqlType: select
      sql: >
        SELECT id, created_at, name, `type`
        FROM team_settings
        WHERE team_id = :tid
        ORDER BY id DESC
      submitButton:
        type: primary
        hidden: true # 제출 버튼은 숨겨진 상태로 유지.
      params:
        - key: tid
          hidden: true # `tid` 파라미터는 사용자에게 숨김.
      columns:
        name:
          width: 300px # 설정 명칭 열의 너비를 300px로 설정.

    - type: query
      name: team_setting_logs
      layout: column4 # 결과를 `column4`에 표시.
      resource: mysql.qa
      sqlType: select
      sql: >
        SELECT id, name, created_at, json
        FROM team_setting_logs
        WHERE team_id = :tid
        ORDER BY id DESC
        LIMIT 100
      submitButton:
        type: primary
        label: 새로고침 # 새로고침 버튼 표시.
      searchOptions:
        enabled: true # 검색 옵션 활성화.
      params:
        - key: tid # `tid` 파라미터를 기반으로 데이터를 필터링.
          # hidden: true
      columns:
        json:
          format: json # JSON 형식으로 데이터를 표시.

```