검색 영역

검색 영역은 다른 모듈과 달리 반응형 기준이 될 상위 요소를 따로 받고, 검색 범위가 같은 페이지에 표시한 큐레이션으로 제한됩니다.

검색 영역 — 쇼룸 WEB

⏱ 예상 소요 시간: 10분

📋 사전 조건: 큐레이션 모듈 1개 이상

호출

html

<header id="my-header">
  <div id="my-search-area"></div>
</header>

<script>
  window.SauceShowroomLib.loadSearchArea({
    elementId: 'my-search-area',
    topElementId: 'my-header'
  })
</script>

파라미터	타입	필수	기본값	설명
elementId	String	선택	`sauce-showroom-search-area`	검색 영역을 표시할 요소의 ID
topElementId	String	선택	`body`	반응형 기준이 될 상위 요소의 ID

topElementId 가 따로 있는 이유

다른 모듈은 마운트한 요소가 전체 너비를 차지하므로 그 폭으로 반응형을 판단합니다. 검색 영역은 헤더 안 일부만 차지해 자기 폭으로는 화면 크기를 알 수 없습니다.

	다른 모듈	검색 영역
반응형 기준	마운트한 요소	`topElementId` 요소
지정하지 않으면	—	`body` 기준

📌 검색 영역을 감싸는 헤더의 반응형 처리를 검색 영역과 같은 기준으로 맞춰야 두 영역의 레이아웃 전환 시점이 어긋나지 않습니다.

검색 범위

개별 모듈로 쓴 검색 영역은 같은 페이지에 표시한 큐레이션 안에서만 검색합니다.

VOD·CLIP 큐레이션을 먼저 호출합니다.
호출한 큐레이션 ID가 검색 범위로 등록됩니다.
loadSearchArea 를 호출합니다.

⚠️ 큐레이션을 하나도 표시하지 않으면 검색 영역이 표시되지 않습니다. 전체 페이지(load)의 헤더 검색은 이 제한을 받지 않습니다.

검색 결과 구성

구간	표시되는 것
키워드 없음	최근 검색어 (브라우저에 최대 5개 보관)
키워드 입력	클립 · 다시보기 결과를 그리드로 표시하고 스크롤에 따라 더 불러옵니다
결과 없음	결과 없음 안내

💡 검색 입력 형태는 테마의 검색 영역 유형에 따라 검색바(항상 펼침) 또는 검색 아이콘(클릭 시 펼침) 이 됩니다.

다음 단계

브릿지 이벤트 연동 — 이동·알림·로그인을 직접 처리

→

Updated about 4 hours ago

Did this page help you?