dunji
카카오 우편번호 서비스(Kakao Postcode)의 Lustre 전용 Gleam 래퍼 라이브러리.
- Lustre TEA 패턴 통합 (
Effect(msg)반환) - 타입 안전한 주소 데이터 (
Addressrecord, 35개 필드) - Builder 패턴 옵션/테마 설정
- 카카오 CDN 스크립트 자동 로딩
- API 키 불필요
설치
gleam add dunji@1
사용법
import dunji
import dunji/address.{type Address}
import dunji/options
import dunji/theme
import gleam/option.{None, Some}
import lustre/effect
type Msg {
UserClickedSearch
GotAddress(Address)
}
fn update(model, msg) {
case msg {
// 가장 간단한 사용
UserClickedSearch ->
#(model, dunji.open_default(on_complete: GotAddress))
GotAddress(addr) ->
#(Model(..model, address: Some(addr)), effect.none())
}
}
옵션 커스터마이징
let my_theme =
theme.default()
|> theme.search_bg_color("#0B65C8")
|> theme.query_text_color("#FFFFFF")
let opts =
options.default()
|> options.width(400)
|> options.height(500)
|> options.animation(True)
|> options.theme(my_theme)
dunji.open(
options: opts,
on_complete: GotAddress,
on_close: Some(GotClose),
on_search: None,
)
Embed 모드
dunji.embed(
selector: "#postcode-container",
options: options.default()
|> options.width_percent(100)
|> options.height_percent(100),
on_complete: GotAddress,
on_close: None,
on_resize: Some(GotResize),
on_search: None,
)
API
| 함수 | 설명 |
|---|---|
dunji.open_default(on_complete:) | 기본 옵션으로 팝업 열기 |
dunji.open(options:, on_complete:, on_close:, on_search:) | 전체 옵션 팝업 열기 |
dunji.embed_default(selector:, on_complete:) | 기본 옵션으로 DOM 요소에 임베드 |
dunji.embed(selector:, options:, on_complete:, on_close:, on_resize:, on_search:) | 전체 옵션 임베드 |
모듈 구조
| 모듈 | 내용 |
|---|---|
dunji | 공개 API — open, embed, CloseState, Size, SearchData |
dunji/address | Address record, AddressType, LanguageType, 편의 함수 |
dunji/options | Options, Dimension 타입 + builder 함수 |
dunji/theme | Theme 타입 + builder 함수 |
개발
gleam build --target javascript
gleam test --target javascript
gleam format --check src test
JavaScript 타겟 전용 라이브러리입니다.