@mornya/react-social-libs
Version:
The project of React.js Social Share and Widget modules.
239 lines (211 loc) • 11.1 kB
TypeScript
// Type definitions for @mornya/react-social-libs
declare namespace Social {
// The values from Meta content with OpenGraph
interface IMetaContent {
title: string; // og:title
description: string; // og:description
url: string; // og:url
type: string; // og:type
siteName: string; // og:site_name
image: string; // og:image
keywords: string; // keywords
videoDuration: string; // video:duration (og:type = "video.movie")
musicDuration: string; // music:duration (og:type = "music.song")
}
// Common extra option settings
interface IExtra {
title?: (og: IMetaContent) => string;
message?: (og: IMetaContent) => string;
hashtags?: string[];
}
namespace Share {
type FacebookExtra = IExtra & {
appId: string;
permissions?: string[];
caption?: string;
admins?: string;
isUseOAuth?: boolean;
isDebug?: boolean;
};
// 카카오톡
// ========== 오브젝트별 인터페이스 ==========
// content 오브젝트에 대한 인터페이스 정의
interface IKakaoContent {
title: string; // 콘텐츠의 타이틀
description?: string; // 콘텐츠의 상세 설명
link: IKakaoLinkUrl; // 콘텐츠 클릭 시 이동할 링크 정보
imageUrl: string; // 콘텐츠의 이미지 URL
imageWidth?: number; // 콘텐츠의 이미지 너비 (단위: 픽셀)
imageHeight?: number; // 콘텐츠의 이미지 높이 (단위: 픽셀)
}
// 아이템 영역에 포함할 컨텐츠
interface IKakaoItemContent {
profileText?: string; // 헤더 또는 프로필 영역에 출력될 텍스트
profileImageUrl?: string; // 프로필 영역에 출력될 이미지
titleImageText?: string; // 이미지 아이템의 제목
titleImageUrl?: string; // 이미지 아이템의 이미지
titleImageCategory?: string; // 이미지 아이템의 제목 아래에 회색 글씨로 출력되는 카테고리 정보
items?: Array<{
item: string; // 아이템 이름
itemOp: string; // 아이템 가격
}>; // 각 텍스트 아이템 정보, 최대 5개의 아이템 지원
sum?: string; // 주문금액, 결제금액 등 아이템 영역의 요약 정보 제목
sumOp?: string; // 아이템 영역의 가격 합산 정보
}
// link 오브젝트에 대한 인터페이스 정의
interface IKakaoLinkUrl {
// webUrl, mobileWebUrl, androidExecParams, iosExecParams 중 하나는 필수
webUrl?: string; // 카카오톡 PC버전에서 이용, [앱 설정]에 등록된 도메인만 허용
mobileWebUrl?: string; // 카카오톡 Mobile버전에서 이용, [앱 설정]에 등록된 도메인만 허용
androidExecParams?: string; // 카카오톡 Android버전에서 이용, 해당 값이 없을 경우 mobileWebUrl로 적용
iosExecParams?: string; // 카카오톡 IOS버전에서 이용, 해당 값이 없을 경우 mobileWebUrl로 적용
}
// social 오브젝트에 대한 인터페이스 정의
interface IKakaoSocial {
likeCount?: number; // 콘텐츠의 좋아요 수
commentCount?: number; // 콘텐츠의 댓글 수
sharedCount?: number; // 콘텐츠의 공유 수
viewCount?: number; // 콘텐츠의 조회 수
subscriberCount?: number; // 콘텐츠의 구독 수
}
// buttons 오브젝트에 대한 인터페이스 정의
interface IKakaoButtons {
title: string; // 버튼의 타이틀
link: IKakaoLinkUrl; // 버튼 클릭 시 이동할 링크 정보
}
// commerce 오브젝트에 대한 인터페이스 정의
interface IKakaoCommerce {
// 가격 정보를 표현하기 위해 사용되는 오브젝트
regularPrice: number; // 정상 가격
discountPrice?: number; // 할인된 가격
discountRate?: number; // 할인율
fixedDiscountPrice?: number; // 정액 할인 가격, 할인율과 동시 사용불가
}
// ========== 템플릿 타입별 인터페이스 ==========
interface IKakaoFeedType {
content: IKakaoContent; // 메시지의 메인 콘텐츠 정보
//itemContent?: IKakaoItemContent; // 아이템 영역에 포함할 컨텐츠
social: IKakaoSocial; // 메인 콘텐츠에 대한 소셜 정보
buttonTitle?: string; // 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons?: IKakaoButtons[]; // 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoListType {
headerTitle: string; // 리스트 상단에 노출되는 메인 타이틀. 최대 200자
headerLink: IKakaoLinkUrl; // 상단 타이틀의 링크 정보
contents: IKakaoContent[]; // 리스트에 노출되는 콘텐츠 목록. 최소 2개, 최대 3개
headerImageUrl?: string; // 리스트 상단에 노출되는 이미지 URL
headerImageWidth?: number; // 리스트 상단에 노출되는 이미지 넓이(권장: 800)
headerImageHeight?: number; // 리스트 상단에 노출되는 이미지 높이(권장: 190)
buttonTitle?: string; // 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons?: IKakaoButtons[]; // 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoLocationType {
content: IKakaoContent; // 메시지의 메인 콘텐츠 정보
address: string; // 지도 뷰에서 사용 할 주소, ex.성남시 분당구 판교역로 235
addressTitle?: string; // 지도 뷰에서 사용될 주소명, ex.카카오 본사
social?: IKakaoSocial; // 메인 콘텐츠에 대한 소셜 정보
buttonTitle?: string; // 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons?: IKakaoButtons[]; // 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoCommerceType {
content: IKakaoContent; // 메시지의 메인 상품 콘텐츠 정보
commerce: IKakaoCommerce; // 상품에 대한 가격 정보
buttonTitle?: string; // 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons?: IKakaoButtons[]; // 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoTextType {
text: string; // 최대 200자의 텍스트 정보
link: IKakaoLinkUrl; // 해당 컨텐츠 클릭 시 이동 할 링크 정보
buttonTitle?: string; // 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
// buttons 없음
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoScrapType {
requestUrl: string; // 스크랩 할 사이트 URL, 해당 사이트의 메타 정보를 토대로 링크를 생성
templateId?: number; // 메시지 아이디, [앱 설정] - [메시지 템플릿 v2] 확인
templateArgs?: object; // 메시지에 전달할 Argument, {'name':'kakao', 'url':'https://developers.kakao.com'}
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
interface IKakaoCustomType {
templateId: number; // 메시지 아이디, [앱 설정] - [메시지 템플릿 v2] 확인
templateArgs?: object; // 메시지에 전달할 Argument, {'name':'kakao', 'url':'https://developers.kakao.com'}
serverCallbackArgs?: any; // 카카오톡 공유 시 전송되는 알림에 포함되는 파라미터
}
// 메시지 전송 성공시 메시지 오브젝트에 대한 인터페이스
interface IKakaoSuccessMessageObj {
template_msg: {}; // 링크 메시지 (Link JSON 참고용)
warning_msg: {}; // 링크 메시지를 검증한 결과
argument_msg: {}; // argument를 검증한 결과
}
// 템플릿 타입별 Link 전달 파라미터 인터페이스
interface IKakaoOption {
objectType?: string; // scrap, custom을 제외하고 사용
installTalk: boolean;
buttonTitle?: string;
buttons?: IKakaoButtons[];
// serverCallbackArgs 사용시 콜백 사용자 정의 파라미터 설정하기:
// @see https://developers.kakao.com/docs/latest/ko/message/js-link#set-kakaotalk-sharing-callback
//serverCallbackArgs?: any;
success (messageObj: IKakaoSuccessMessageObj): void;
fail (): void;
}
type KakaoTalkExtraTypes = '' | 'feed' | 'list' | 'location' | 'commerce' | 'text' | 'scrap' | 'custom';
type KakaoTalkExtra<T = KakaoTalkExtraTypes> = IExtra & {
// 공통
appId: string; // 카카오 디벨로퍼 사이트 JavaScript 앱 키
type: T;
isInstallTalk?: boolean; // 카카오톡이 설치되어 있지 않은 경우 마켓의 카카오톡 설치 페이지로 이동
} & (
| { type: '', value: undefined; }
| { type: 'feed'; value: IKakaoFeedType; }
| { type: 'list'; value: IKakaoListType; }
| { type: 'location'; value: IKakaoLocationType; }
| { type: 'commerce'; value: IKakaoCommerceType; }
| { type: 'text'; value: IKakaoTextType; }
| { type: 'scrap'; value: IKakaoScrapType; }
| { type: 'custom'; value: IKakaoCustomType; }
);
type SMSExtra = IExtra & {
target?: string;
};
}
namespace Widget {
type FacebookLikeExtra = IExtra & {
appId: string;
pageUrl?: string;
isDark?: boolean;
isDebug?: boolean;
onLogin? (response: any): void;
onLogout? (response: any): void;
onLike? (response: any): void;
onUnlike? (response: any): void;
};
type FlipboardFlipitExtra = IExtra & {
profileUrl?: string;
popover?: string;
};
type KakaoStoryFollow = IExtra & {
appId: string;
subscribeChannelId?: string;
showFollowerCount?: boolean;
};
type TumblrFollowExtra = IExtra & {
tumblelog?: string;
};
type TwitterFollowExtra = IExtra & {
screenName: string;
showScreenName?: boolean;
};
type TwitterMessageExtra = IExtra & {
screenName: string;
recipientId?: string;
};
type TwitterTweetExtra = IExtra & {
showScreenName?: boolean;
};
}
}