@thewoowon/react-native-daum-postcode
Version:
The fastest way to use Kakao Daum Postcode API in React Native
335 lines (334 loc) • 13.8 kB
TypeScript
import { StyleProp, ViewStyle } from 'react-native';
export interface OnCompleteParams {
/**
* 국가기초구역번호. 2015년 8월 1일부터 시행될 새 우편번호.
*/
zonecode: number;
/**
* 기본 주소
* (검색 결과에서 첫줄에 나오는 주소, 검색어의 타입(지번/도로명)에 따라 달라집니다.)
*/
address: string;
/**
* 기본 영문 주소
*/
addressEnglish: string;
/**
* 검색된 기본 주소 타입: R(도로명), J(지번)
*/
addressType: 'R' | 'J';
/**
* 검색 결과에서 사용자가 선택한 주소의 타입
*/
userSelectedType: 'R' | 'J';
/**
* 연관 주소에서 "선택 안함" 부분을 선택했을때를 구분할 수 있는 상태변수
*/
noSelected: 'Y' | 'N';
/**
* 검색 결과에서 사용자가 선택한 주소의 언어 타입: K(한글주소), E(영문주소)
*/
userLanguageType: 'K' | 'E';
/**
* 도로명 주소
* (지번:도로명 주소가 1:N인 경우에는 데이터가 공백으로 들어갈 수 있습니다.
* - 아래 autoRoadAddress의 자세한 설명 참고)
*/
roadAddress: string;
/**
* 영문 도로명 주소
*/
roadAddressEnglish: string;
/**
* 지번 주소
* (도로명:지번 주소가 1:N인 경우에는 데이터가 공백으로 들어갈 수 있습니다.
* - 아래 autoJibunAddress의 자세한 설명 참고)
*/
jibunAddress: string;
/**
* 영문 지번 주소
*/
jibunAddressEnglish: string;
/**
* '지번주소'에 매핑된 '도로명주소'가 여러개인 경우, 사용자가 '선택안함' 또는 '지번주소'를 클릭했을 때 연관된 도로명 주소 중 임의로 첫번째 매핑 주소를 넣어서 반환합니다.
* (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)
*/
autoRoadAddress: string;
/**
* autoRoadAddress의 영문 도로명 주소
*/
autoRoadAddressEnglish: string;
/**
* '도로명주소'에 매핑된 '지번주소'가 여러개인 경우, 사용자가 '선택안함' 또는 '도로명주소'를 클릭했을 때 연관된 지번 주소 중 임의로 첫번째 매핑 주소를 넣어서 반환합니다.
* (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)
*/
autoJibunAddress: string;
/**
* autoJibunAddress의 영문 지번 주소
*/
autoJibunAddressEnglish: string;
/**
* 건물관리번호
*/
buildingCode: number;
/**
* 건물명
*/
buildingName: string;
/**
* 공동주택 여부
* (아파트,연립주택,다세대주택 등)
*/
apartment: 'Y' | 'N';
/**
* 도/시 이름
*/
sido: string;
/**
* 도/시 이름의 영문
*/
sidoEnglish: string;
/**
* 시/군/구 이름
*/
sigungu: string;
/**
* 시/군/구 이름의 영문
*/
sigunguEnglish: string;
/**
* 시/군/구 코드
* (5자리 구성된 시/군/구 코드입니다.)
*/
sigunguCode: string;
/**
* 도로명 코드, 7자리로 구성된 도로명 코드입니다. 추후 7자리 이상으로 늘어날 수 있습니다.
*/
roadnameCode: string;
/**
* 법정동/법정리 코드
*/
bcode: string;
/**
* 도로명 값, 검색 결과 중 선택한 도로명주소의 "도로명" 값이 들어갑니다.(건물번호 제외)
*/
roadname: string;
/**
* 도로명 값, 검색 결과 중 선택한 도로명주소의 "도로명의 영문" 값이 들어갑니다.(건물번호 제외)
*/
roadnameEnglish: string;
/**
* 법정동/법정리 이름
*/
bname: string;
/**
* 법정동/법정리 이름의 영문
*/
bnameEnglish: string;
/**
* 법정리의 읍/면 이름
* ("동"지역일 경우에는 공백, "리"지역일 경우에는 "읍" 또는 "면" 정보가 들어갑니다.)
*/
bname1: string;
/**
* 법정리의 읍/면 이름의 영문
* ("동"지역일 경우에는 공백, "리"지역일 경우에는 "읍" 또는 "면" 정보가 들어갑니다.)
*/
bname1English: string;
/**
* 법정동/법정리 이름
*/
bname2: string;
/**
* 법정동/법정리 이름의 영문
*/
bname2English: string;
/**
* 행정동 이름, 검색어를 행정동으로 검색하고, 검색결과의 법정동과 검색어에 입력한 행정동과 다른 경우에 표시하고, 데이터를 내립니다.
*/
hname: string;
/**
* 사용자가 입력한 검색어
*/
query: string;
}
export interface PostcodeTheme {
/**
* 바탕 배경색
*/
bgColor?: string;
/**
* 검색창 배경색
*/
searchBgColor?: string;
/**
* 본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
*/
contentBgColor?: string;
/**
* 페이지 배경색
*/
pageBgColor?: string;
/**
* 기본 글자색
*/
textColor?: string;
/**
* 검색창 글자색
*/
queryTextColor?: string;
/**
* 우편번호 글자색
*/
postcodeTextColor?: string;
/**
* 강조 글자색
*/
emphTextColor?: string;
/**
* 테두리
*/
outlineColor?: string;
}
export interface JSOptions {
/**
* 우편번호 찾기 화면에서 애니메이션 효과를 줍니다. 기본값은 false로 설정되어 있습니다.
*/
animation?: boolean;
/**
* 우편번호 찾기가 실행된 후 검색어 입력박스에 focus를 줍니다. 단, PC 플랫폼에서만 동작하며 Mobile 플랫폼은 지원하지 않습니다. (기본값 true)
* 추가로 focus의 경우 여러 환경적 요인으로 제대로 동작하지 않을 수도 있으니 참고 부탁드립니다.
*/
focusInput?: boolean;
/**
* 기본값은 true로 설정되어 있으며, 매핑된 주소가 여러개일 경우 사용자가 '선택 안함'을 클릭할 수 있도록 합니다. 또한 연관주소를 선택하지 않고 메인주소를 선택하더라도 연관주소 중 첫번째 항목이 자동으로 데이터에 들어가게 됩니다. 데이터는 oncomplete 인자 중 autoRoadAddress 또는 autoJibunAddress 항목에 첫번째 매핑 주소가 들어갑니다.
* false로 설정을 하면 '선택 안함'이라는 항목이 노출되지 않고, 사용자가 반드시 매핑된 주소들 중 하나를 선택하도록 할 수도 있습니다. 하지만, 매핑된 주소를 정확히 모르는 사용자에게는 불편을 줄 수 있고, 1:N, M:N 관계의 주소에서는 메인주소가 선택이 되지 않기 때문에, 가급적 사용하지 않기를 권장합니다.
*/
autoMapping?: boolean;
/**
* 검색된 주소와 내려가는 데이터의 '시','도' 부분을 축약 표시합니다(한글 주소만 해당). 기본값은 true로 설정되어 있습니다.
* (서울특별시 -> 서울, 광주광역시 -> 광주, 전라북도 -> 전북, 단, '세종특별자치시' '제주특별자치도'는 지자체의 요청에 의해 제외)
*/
shorthand?: boolean;
/**
* 검색결과가 많을시 검색바 아래의 가이드 영역을 강조시켜 주는 기능입니다. 기본값은 0(비활성)입니다.
* 가이드 문구는 첫화면의 가이드 문구와 동일하며, 조합방식과 예시를 설명하여 사용자에게 재검색을 유도할 수 있도록 하는 기능입니다.
* 입력값으로는 페이지 넘버가 들어가게 되며, 3~20까지 입력 가능합니다.
*/
pleaseReadGuide?: number;
/**
* pleaseReadGuide 옵션과 같이 사용되는 옵션으로 선택사항입니다. 기본값은 1.5(1.5초간 강조)이며 입력하지 않으면 기본값으로 동작합니다.
* 입력값 설정 단위는 '초'단위로 설정할 수 있으며, 0.1~60까지 입력 가능합니다.
*/
pleaseReadGuideTimer?: number;
/**
* 검색어 입력시 검색바 아래에 뜨는 서제스트의 최대 검색 갯수를 조절할 수 있는 옵션입니다. 기본값은 10개이며 입력하지 않거나 1~10을 벗어나는 수를 입력시 기본값으로 셋팅됩니다.
*/
maxSuggestItems?: number;
/**
* 기본값은 false이며 기존보다 행정동 정보를 좀 더 많이 보여주게 하는 옵션입니다.
* 해당 기능을 활성화 하면 검색 결과의 행정동과 법정동이 다른 경우 무조건 표시를 하고 데이터를 내리게 됩니다. 그래서 법정동과 행정동이 같은 경우에는 표시하지 않으며, 데이터 또한 내리지 않습니다.
*/
showMoreHName?: boolean;
/**
* 기본값은 false이며 검색 결과의 "지도" 버튼을 가릴 수 있는 옵션입니다. 다만, 해당 기능은 자신의 주소에 익숙하지 못한 사용자들에 도움을 주는 기능으로, app에 임베딩을 해야되는 상황이거나 버튼이 눌러지면 안되는 상황일때 선택적으로 이용하시는 것을 권장합니다.
*/
hideMapBtn?: boolean;
/**
* 기본값은 false이며 검색 결과의 "영문 보기" 버튼을 가릴 수 있는 옵션입니다. 다만, 해당 기능은 자신의 주소에 익숙하지 못한 사용자들에 도움을 주는 기능으로, app에 임베딩을 해야되는 상황이거나 버튼이 눌러지면 안되는 상황일때 선택적으로 이용하시는 것을 권장합니다.
*/
hideEngBtn?: boolean;
/**
* 기본값은 false이며 검색 결과의 한글과 영문 주소를 동시에 볼 수 있게 해주는 기능입니다, 해당 기능 활성화시 "영문보기" 버튼은 감춰집니다.
* (hideEngBtn 속성의 설정 값보다 우선시 됩니다.)
*/
alwaysShowEngAddr?: boolean;
/**
* 기본값은 true이며 "form submit" 방식을 사용합니다. false로 설정 시 "location replace" 방식을 사용하게 됩니다. 우편번호 서비스로 인해 history 관련 제어가 어려우실 경우 false로 설정하여 이용하시기 바랍니다.
*/
submitMode?: boolean;
/**
* 기본값은 true이며 하단 배너에 "가이드페이지"로 이동하는 링크를 활성화 시킵니다. 링크로 인해 사용성이 저하된다고 생각하신다면 false로 설정하여 이용하시기 바랍니다.
*/
useBannerLink?: boolean;
/**
* 우편번호 찾기 화면의 색상 테마를 변경할 수 있습니다. 기본값은 null입니다.
*/
theme?: PostcodeTheme;
}
type FlexAlignType = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
export interface StyleProps {
alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
alignItems?: FlexAlignType;
alignSelf?: 'auto' | FlexAlignType;
aspectRatio?: number;
borderBottomWidth?: number;
borderEndWidth?: number | string;
borderLeftWidth?: number;
borderRightWidth?: number;
borderStartWidth?: number | string;
borderTopWidth?: number;
borderWidth?: number;
bottom?: number | string;
display?: 'none' | 'flex';
end?: number | string;
flex?: number;
flexBasis?: number | string;
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
flexGrow?: number;
flexShrink?: number;
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
height?: number | string;
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
left?: number | string;
margin?: number | string;
marginBottom?: number | string;
marginEnd?: number | string;
marginHorizontal?: number | string;
marginLeft?: number | string;
marginRight?: number | string;
marginStart?: number | string;
marginTop?: number | string;
marginVertical?: number | string;
maxHeight?: number | string;
maxWidth?: number | string;
minHeight?: number | string;
minWidth?: number | string;
overflow?: 'visible' | 'hidden' | 'scroll';
padding?: number | string;
paddingBottom?: number | string;
paddingEnd?: number | string;
paddingHorizontal?: number | string;
paddingLeft?: number | string;
paddingRight?: number | string;
paddingStart?: number | string;
paddingTop?: number | string;
paddingVertical?: number | string;
position?: 'absolute' | 'relative';
right?: number | string;
start?: number | string;
top?: number | string;
width?: number | string;
zIndex?: number;
/**
* @platform ios
*/
direction?: 'inherit' | 'ltr' | 'rtl';
}
export interface PostcodeProps {
/**
* 다음 우편번호 찾기 서비스의 옵션을 설정할 수 있습니다.
*/
jsOptions?: JSOptions;
/**
* 우편번호 검색 결과 목록에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수를 정의하는 부분입니다.(null값 또는 정의하지 않을 시에 검색은 가능하지만, 결과 항목을 클릭하면 아무 일도 일어나지 않습니다.)
* 이 함수를 정의할때 넣는 인자에는 우편번호 검색 결과 목록에서 사용자가 클릭한 주소 정보가 들어가게 됩니다.
*/
onSelected: (data: OnCompleteParams) => void;
/**
* onSelected 함수에서 오류 발생 시 실행되는 함수입니다.
*/
onError: (error: unknown) => void;
style?: StyleProp<ViewStyle>;
}
export {};