Bookmark

@hua-labs/ui

v1.0.0

localStorage 지속성을 가진 북마크 토글 버튼입니다. 여러 항목의 즐겨찾기를 관리합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Bookmark } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

크기

변형

default

filled

outline

사용 예시

제품 이름

제품 설명

localStorage 지속성

북마크 상태는 localStorage에 배열로 저장됩니다. storageKey prop으로 다른 키를 사용할 수 있습니다.

Props

이름	타입	기본값	설명
`id*`	`string`	-	Unique bookmark ID
`storageKey`	`string`	`"bookmarks"`	localStorage key for storing bookmarks
`defaultBookmarked`	`boolean`	`false`	Initial bookmarked state
`onBookmarkChange`	`(bookmarked: boolean) => void`	-	Callback when bookmark state changes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Bookmark button size
`variant`	`"default" \| "filled" \| "outline"`	`"default"`	Visual variant

Code Examples

docs:common.basicUsagetsx

1import { Bookmark } from '@hua-labs/ui/data';
2 
3<Bookmark id="article-1" />

docs:components.bookmark.examples.stateChangetsx

1<Bookmark
2  id="article-1"
3  onBookmarkChange={(bookmarked) => {
4    console.log('Bookmarked:', bookmarked);
5  }}
6/>

docs:components.bookmark.examples.sizesVariantstsx

1// 크기
2<Bookmark id="item-1" size="sm" />
3<Bookmark id="item-2" size="md" />
4<Bookmark id="item-3" size="lg" />
5 
6// 변형
7<Bookmark id="item-4" variant="default" />
8<Bookmark id="item-5" variant="filled" />
9<Bookmark id="item-6" variant="outline" />

docs:components.bookmark.examples.customStorageKeytsx

1// 다른 localStorage 키 사용
2<Bookmark
3  id="product-123"
4  storageKey="favorite-products"
5/>

접근성

•포커스 링: 키보드 네비게이션용 노란색 포커스 링
•버튼 요소: 키보드 접근을 위한 네이티브 버튼 요소

SectionHeader ActionToolbar