이 프로젝트는 한국관광공사 x Kakao 주최 '2024 관광데이터 활용 공모전' 출품작입니다. (장려상 수상)
yarn install
yarn dev
yarn sb
VITE_SERVER_URL={SERVER_URL}
VITE_KAKAO_JS_KEY={KAKAO_JS_KEY}
VITE_KAKAO_REST_KEY={KAKAO_REST_KEY}
NodeJS-18.18.0
yarn-1.22.21
- React 18.x
- TypeScript 5.x
- React Query (TanStack Query) ^5.56.2
- MUI (Material-UI) ^5.16.7
- Emotion (CSS-in-JS) ^11.13.0
- Framer Motion ^11.3.30
- React Hook Form ^7.53.0
- Yup (Schema Validation) ^1.4.0
- Vite ^5.4.1 (Development & Build Tool)
- Storybook ^8.2.9 (Component Development Environment)
- ESLint & Prettier (Linting & Formatting)
- Chromatic (Visual Testing)
카카오 OAuth 로그인 기능은 다음과 같이 구현되었습니다:
- 사용자가 클라이언트에서 카카오 로그인을 요청하면 서버에 해당 요청이 전달됩니다.
- 서버는 카카오 인증 서버에 인가 코드를 요청합니다.
- 카카오 인증 서버는 사용자의 카카오 계정 로그인을 위해 클라이언트로 리다이렉션합니다.
- 사용자는 클라이언트에서 카카오 계정으로 로그인합니다.
- 로그인 성공 시, 카카오 인증 서버는 설정된 리다이렉트 URI를 통해 인가 코드를 서버로 전달합니다.
- 서버는 이 인가 코드를 사용하여 카카오 인증 서버에 액세스 토큰 발급을 요청합니다.
- 카카오 인증 서버는 서버에 액세스 토큰을 발급해줍니다.
- 서버는 발급받은 토큰 정보를 클라이언트에 전달하며, 클라이언트는 쿠키(
set-cookie)로 토큰을 저장하여 이후 인증에 활용할 수 있습니다.
이러한 과정으로 클라이언트와 카카오 인증 서버 간의 인증 및 토큰 교환이 이뤄져 안전한 로그인 및 인증이 가능합니다.
회원가입은 최초 로그인 여부에 따라 진행됩니다.
- 로그인 요청: 사용자가 로그인 버튼을 누르면 프로세스가 시작됩니다.
- 최초 로그인 여부 확인:
- 사용자가 처음 로그인하는 경우 회원가입 페이지로 리다이렉트됩니다.
- 이미 회원 가입이 되어 있는 경우에는 바로 "로그인 완료"로 이동합니다.
- 회원 정보 입력:
- 최초 로그인일 경우, 이름, 나이, 성별 등 필수 정보를 입력받는 단계로 이동합니다.
- 회원가입 완료:
- 정보 입력이 완료되면 회원가입이 완료됩니다.
- 이 과정 이후에 로그인 상태로 전환되어 "로그인 완료" 단계로 이동합니다.
- 로그인 완료:
- 회원가입이 완료된 경우나 기존 회원일 경우 모두 이 단계로 이동하며, 최종적으로 로그인 상태가 유지됩니다.
이러한 흐름은 사용자가 최초로 로그인하는지 여부를 판단하여 필요한 경우 추가 정보를 입력하게 하고, 그렇지 않다면 바로 로그인 완료 상태로 이동합니다
- 코스 데이터 요청 및 응답:
- 클라이언트는 서버에 추천 경로와 관련된 데이터를 요청하고 서버는 그에 맞는 코스 데이터를 응답합니다. 이 데이터는 사용자의 요구에 맞는 경로 추천 정보를 포함하고 있습니다.
- 다중 경유지 길찾기 API 사용:
- 클라이언트는 서버로부터 받은 코스 데이터를 기반으로 카카오의 다중 경유지 길찾기 API를 호출하여 경로를 계산합니다. 이때 API는 경유지를 모두 포함한 최적 경로의 좌표값을 반환합니다.
- 경로 시각화:
- 클라이언트는 받은 좌표값을 바탕으로 카카오 맵 API를 활용해 지도에 경로를 시각화합니다. 맵 API를 요청하면 카카오 서버는 해당 경로를 지도로 렌더링해 클라이언트에 전달합니다.
이러한 과정으로 사용자는 추천된 코스와 최적화된 경로를 지도로 확인할 수 있습니다.
여행 코스 추천은 서비스내에서 그룹이라는 단위로 이루어집니다.
- 인원/여행일/선호도 조사: 여행을 함께할 인원, 여행 날짜, 선호도 등에 대한 조사를 통해 사용자의 요구사항을 수집합니다.
- 그룹 생성: 수집된 정보를 바탕으로 함께 여행할 그룹을 구성하거나, 그룹에 사용자를 추가합니다.
- 추천 코스 제공: 사용자 선호도 및 그룹 특성을 기반으로 최적화된 추천 코스를 제공합니다.
- 재검사 여부 확인: 추천된 코스가 만족스러운지 확인하는 단계입니다.
true: 만족스럽지 않은 경우, 다시 선호도 및 인원 등의 조사를 거쳐 재추천 과정을 진행합니다.false: 만족스러운 경우, 추천된 코스로 바로 여행을 시작합니다. (아래 4번)
- 여행하기: 최종적으로 결정된 추천 코스를 기반으로 여행을 시작할 수 있습니다.
이 흐름을 통해 사용자에게 맞춤형 코스가 제공되며, 필요에 따라 재검사와 수정이 가능합니다.
- 데이터 수집 및 저장 (데이터 파이프라인 구축): 외부 데이터와 API를 활용해 수집한 관광 데이터를 전처리 후 로컬 DB에 일괄 저장 및 자동화했습니다.
- 코스 분석 및 세부 점수 산출: 코스 데이터의 카테고리를 분석해 초기에는 메타 정보로, 이후 유저 데이터로 세부 점수를 산출하는 방향으로 확장할 수 있습니다.
- 가중치 기반 맞춤형 추천 제공: 유저 타입에 따른 가중치를 기반으로 개인화된 코스 추천을 백엔드에서 제공합니다
- DB 업데이트 및 가중치 동기화: 관광 정보의 정기적 업데이트 및 가중치 동기화로 최신 개인화 추천을 제공합니다
사용자가 코스를 담은 이후의 흐름입니다:
- 코스 담기: 사용자가 관심 있는 장소나 코스를 담기 시작합니다.
- 코스 편집 여부: 담은 코스를 편집할지 선택하는 단계입니다.
true: 코스 편집이 필요한 경우.false: 편집이 필요 없을 경우 바로 다음 단계로 진행됩니다.
- 장소 추가/삭제/순서 변경: 편집이 필요한 경우 사용자가 코스에 장소를 추가하거나 삭제하고, 순서를 변경할 수 있습니다.
- 여행 시작: 코스 편집이 완료되면 최종적으로 확정된 코스로 여행을 시작할 수 있게 됩니다.
이러한 흐름을 통해 사용자는 여행 코스를 유연하게 편집하고, 준비가 되면 바로 여행을 시작할 수 있습니다.
여행을 시작하면 사용자는 코스를 공유할 수 있습니다. 클라이언트에서 코스를 공유하는 기능은 다음과 같은 프로세스로 이루어집니다:
- 코스 데이터 공유:
- 사용자가 공유하기 버튼을 클릭하면, 서버는 코스 데이터를 base64로 인코딩해 반환합니다. 이 인코딩된 데이터는 URL로 변환되어 공유가 용이하도록 합니다.
- URL 복사 및 공유:
- 클라이언트는 인코딩된 코스 데이터를 클립보드에 복사하고 공유할 수 있게 합니다. 이렇게 하면 사용자가 특정 코스에 대한 링크를 쉽게 전송할 수 있습니다.
- 코스 데이터 디코딩:
- 공유된 URL의 데이터를 다시 사용하려면 클라이언트는 인코딩된 값을 서버로 전송합니다. 서버는 해당 값을 디코딩하여 JSON 형태의 원래 코스 데이터를 반환합니다.
이러한 과정으로 사용자 간에 코스 공유와 데이터 복원이 간편하게 이루어집니다.
운영 종료 티끌모아강원 바로가기
