Skip to content
@hyundai-autoever-third-project-team2

타볼카 (TABOLKA)

현대오토에버 모빌리티 SW 스쿨 웹/앱 1기 - 중고차 거래 앱 프로젝트 타볼카

🖼️ 프로젝트 기획 배경

  1. 커뮤니티 기능(피드)과 사용자 중심의 데이터 기반 추천 시스템을 통해 거래 과정에서의 즐거움과 편리함을 제공하고자 했습니다.
  2. 알림 기능을 통해 관심 차량의 매물 정보 및 거래 상태에 대한 정보를 실시간으로 사용자에게 전달하고자 했습니다.

🎯 핵심 기능

✅ 추천 기능

  • 최초 로그인 시, 설문조사를 통해 차량을 추천 기능을 제공합니다.
  • 일주일마다 전체 사용자 중 활동이 누적된 사용자의 추천 차량 리스트를 갱신합니다.

image

✅ 차량 등록 및 관리

  • 유효한 차량 번호를 입력 받은 후 자동으로 차량 정보를 불러옵니다.
  • 차량의 외부/내부 사진들과 부가 설명을 입력 받고 판매할 차량을 등록할 수 있습니다.
  • 차량 등록 후, 관리자의 시세 측정이 끝나면 사용자는 판매 취소/승인 여부를 결정할 수 있습니다.

image

✅ 차량 조회

  • 국내/해외/할인/인기 카테고리 별로 차량 매물 리스트를 조회할 수 있습니다.
  • 브랜드, 모델 이름의 입력을 통한 검색 기능을 제공합니다.
  • 차량의 색상, 연식, 주행 거리, 가격을 설정하여 차량을 조회할 수 있습니다.
  • 정해진 주기마다 판매가 되지 않은 차량의 가격 할인을 진행합니다.

image

✅ 커뮤니티

  • 피드(스토리)를 작성할 수 있고 삭제할 수 있습니다.
  • 다른 사용자들의 피드를 볼 수 있고, 좋아요 및 좋아요 취소를 누를 수 있습니다.

image

✅ 편의 기능

  • 관심 차량을 등록/취소 할 수 있으며 관심 차량 목록에서 여러 차량들을 비교할 수 있습니다.
  • 관심 차량의 가격 하락/관심 차량 매물 등록/판매 차량의 시세 결과 알림을 제공합니다.
  • 구매하고자 하는 차량이 존재하는 지점을 확인할 수 있습니다.
  • 방문 예약을 접수할 수 있습니다.

image

✅ 관리자

  • 회원과 1:1 상담 기능을 제공합니다.
  • 회원의 리스트를 조회하고 회원 정보를 조회할 수 있습니다.
  • 회원이 등록한 차량의 심사와 판매할 매물을 등록할 수 있습니다.

image image image


🚨 트러블 슈팅

❗ 웹 소켓 채팅

  • 문제: 웹 소켓으로 채팅 초기 구현 시, 관리자와 사용자가 동시 입장한 후에 채팅을 하지 않으면 둘 중 한 명만 입장했을 때 보낸 메시지를 볼 수 없었습니다.
  • 해결: STOMP와 DB를 사용하여 이전 채팅을 보관하도록 구현하여 해당 문제를 해결했습니다.

❗ WebView - Android 상호작용

  • 문제: 하이브리드 앱 개발 과정에서 웹(React)과 네이티브(Android) 간의 상호작용 구현에 어려움을 겪었습니다. 특히, 네이티브 기능을 웹에서 호출할 때 데이터가 정확하게 전달되지 않거나 동기화 문제로 예상치 못한 동작이 발생하는 경우가 있었습니다.
  • 해결: JavaScriptInterface를 활용해 원활한 통신을 구현했으며, 정확한 타입 정의를 통해 데이터를 보다 안정적이고 효율적으로 전달할 수 있도록 개선했습니다.

❗ 모바일 UI

  • 문제: 네이티브 앱 내부에서 렌더링되는 웹뷰의 특성에 맞게 모바일부터 태블릿까지 다양한 크기의 해상도를 고려하여 개발해야 하는 어려움이 있었습니다.
  • 해결: 처음 웹뷰 프로젝트를 초기 설정할 때, GlobalStyle과 레이아웃을 설정해두고 개발을 진행하여 개발 시 큰 어려움 없이 다양한 해상도에 맞는 UI를 개발할 수 있었습니다.

❗ 토큰 처리 / 로그인

  • 문제: 백엔드/프론트 서버의 도메인 주소가 달라서 서버에서 프론트로 토큰을 전송하는 과정에서 어려움이 있었습니다.
  • 해결: 프론트(유저)와 백엔드(관리자) 서버의 토큰 전달 방식과 검증을 다르게 처리하여 문제를 해결했습니다. 역할 별로 로그인 리다이렉션 URL이 달랐기 때문에 쿼리 파라미터/쿠키 방식을 섞어서 사용했습니다.

⚙️ 시스템 아키텍쳐

프론트엔드

FE ARCH

백엔드

BE ARCH


🛠️ 기술 스택

분야 기술 스택
공통 Puppeteer Firebase
FE Android Studio Yarn React Styled Components React Query
BE Java Spring MySQL
인프라 AWS Amazon S3 Docker NginX GitHub Actions

👨‍👩‍👧‍👦 팀원 소개

김홍빈 송지웅 전우정
@vinvin153 @moaangel @friend5hip
FE FE FE
오은솔 오인우 장준혁
@eunsol037 @inwoo0808 @itcuna0617
BE BE BE

Pinned Loading

  1. BE BE Public

    타볼카 BE

    Java

  2. FE FE Public

    타볼카 FE

    Kotlin

  3. webview webview Public

    타볼카 웹뷰

    TypeScript 1

Repositories

Showing 4 of 4 repositories
  • webview Public

    타볼카 웹뷰

    hyundai-autoever-third-project-team2/webview’s past year of commit activity
    TypeScript 1 0 0 0 Updated Jan 26, 2025
  • .github Public
    hyundai-autoever-third-project-team2/.github’s past year of commit activity
    0 0 0 0 Updated Jan 22, 2025
  • BE Public

    타볼카 BE

    hyundai-autoever-third-project-team2/BE’s past year of commit activity
    Java 0 0 3 0 Updated Jan 21, 2025
  • FE Public

    타볼카 FE

    hyundai-autoever-third-project-team2/FE’s past year of commit activity
    Kotlin 0 0 0 0 Updated Jan 20, 2025

Top languages

Loading…

Most used topics

Loading…