Trip-Recommender

소개

특정 주소나 위치를 검색했을 때 ai에게 여행 추천을 받아서 사용자에게 보여주는 라이브러리

설치

$ npm install trip-recommender

Github

Trip-Recommender / Github

샘플

구조

// index.d.ts
declare module 'trip-recommender' {
  ...
  export const ChatResponse: React.FC<ChatResponseProps>;
  export const SelectList: React.FC<SelectListProps>;
  export const RecommendationList: React.FC<RecommendationListProps>;
  export const ChatLoading: React.FC;
  export const Error: React.FC<ErrorProps>;
}

타입

export interface ChatResponseProps {
  keyword: string;
  openAiKey: string;
}
export interface TripActivity {
  placeType: string;
  name: string;
  description: string;
  location: string;
  recommendedMenu?: string;
  link: string;
}
export interface RecommendationType {
  tripType: string;
  tripStyle: string;
  tripActivities: TripActivity[];
}
export interface RecommendationListProps {
  recommendation: RecommendationType;
}
export interface SelectListProps {
  onSelection: (who: string[], interest: string[]) => void;
}
export interface ChatResponseType {
  destination: string;
  recommendation: RecommendationType;
}

export interface ErrorProps {
  message: string;
}

ChatResponse

선택된 장소, 위치와 관련되어 ai의 여행 추천을 보여주는 컴포넌트

<ChatResponse
  keyword={keyword}
  openAiKey={OPEN_AI_KEY}
/>

Props

| 이름 | 설명 | 타입 | 기타 | | ----------- | ------------------------------- | ------ | ---- | | keyword | 여행 추천에 사용될 검색 keyword | String | | | openAiKey | open ai에서 발급받은 secret key | String | |

SelectList

사용자의 요구 조건을 최대한 근접한 답변을 내놓기 위한 추가 선택을 위한 옵션들을 보여주는 컴포넌트

<SelectList onSelection={handleSelection} />

Props

| 이름 | 설명 | 타입 | 기타 | | ----------------- | -------------------------------- | --------------- | ---- | | handleSelection | 선택되는 추가 옵션을 다루는 함수 | SelectListProps | |

예시

RecommendationList

open ai의 응답 결과 값을 이용하여 추천 일정 을 보여주는 컴포넌트

<RecommendationList response={response} />

Props

| 이름 | 설명 | 타입 | 기타 | | ---------- | -------------------------- | ---------------- | ---- | | response | open ai의 JSON 형태의 응답 | ChatResponseType | |

예시

ChatLoading

ai 답변이 오기전 로딩 화면

<ChatLoading />

예시

Error

error에 대한 화면을 보여주는 컴포넌트

<Error message={message} />

Props

| 이름 | 설명 | 타입 | 기타 | | ---------- | -------------------------- | ---------------- | ---- | | message | error 메세지 | string | |

예시