← Kitchen Sink로 돌아가기

ScrollableContent

가로 스크롤 가능한 컨텐츠 영역 컴포넌트

💡 기본값: gap-x-8, px-16이 기본으로 적용됩니다. class prop에서 gap-x-* 또는 px-* 클래스를 제공하면 기본값이 제거되고 새로운 값이 적용됩니다.

기본 사용법 (기본값 적용)

기본값: gap-x-8, px-16
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> <div class="demo-item">Item 3</div> </ScrollableContent>

gap-x 오버라이드

gap-x-4로 변경 (기본값 gap-x-8 제거)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="gap-x-4"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>
gap-x-12로 변경
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="gap-x-12"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>

px 오버라이드

px-8로 변경 (기본값 px-16 제거)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="px-8"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>
px-24로 변경
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="px-24"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>

gap-x와 px 모두 오버라이드

gap-x-4, px-8로 변경
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="gap-x-4 px-8"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>

추가 클래스 사용

추가 클래스와 함께 사용 (기본값은 유지)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="bg-gray-100 rounded-lg"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>
오버라이드와 추가 클래스 함께 사용
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<ScrollableContent class="gap-x-4 px-8 bg-blue-50 rounded-lg"> <div class="demo-item">Item 1</div> <div class="demo-item">Item 2</div> </ScrollableContent>

실제 사용 예시

상품 목록 (기본값 사용)
Brand
Product Name 1
₩10,000
Brand
Product Name 2
₩20,000
Brand
Product Name 3
₩30,000
Brand
Product Name 4
₩40,000
Brand
Product Name 5
₩50,000
Brand
Product Name 6
₩60,000
Brand
Product Name 7
₩70,000
Brand
Product Name 8
₩80,000
<ScrollableContent> {products.map((product) => ( <ProductCard product={product} /> ))} </ScrollableContent>
상품 목록 (커스텀 간격)
Brand
Product Name 1
₩10,000
Brand
Product Name 2
₩20,000
Brand
Product Name 3
₩30,000
Brand
Product Name 4
₩40,000
Brand
Product Name 5
₩50,000
Brand
Product Name 6
₩60,000
Brand
Product Name 7
₩70,000
Brand
Product Name 8
₩80,000
<ScrollableContent class="gap-x-4 px-8"> {products.map((product) => ( <ProductCard product={product} /> ))} </ScrollableContent>

Tailwind Classes

기본 스크롤 클래스:

flex cursor-pointer overflow-x-auto [&::-webkit-scrollbar]:hidden [scrollbar-width:none]

기본값:

  • gap-x-8 - 아이템 간 가로 간격 (오버라이드 가능)
  • px-16 - 좌우 패딩 (오버라이드 가능)

오버라이드 규칙:

  • class="gap-x-4" - 기본값 gap-x-8 제거되고 gap-x-4 적용
  • class="px-8" - 기본값 px-16 제거되고 px-8 적용

Props

Prop Type Default Description
class string | string[] - 추가 CSS 클래스. gap-x-* 또는 px-* 클래스를 제공하면 기본값이 제거되고 새로운 값이 적용됩니다.
...attrs HTMLAttributes<'div'> - div 요소의 모든 표준 HTML 속성 사용 가능