Take A Bus (TAB)
삼성청년SW아카데미(SSAFY)
개발기간: 2023.07.04 ~ 2023.8.18
배포 주소
프론트 서버 : https://i9d111.p.ssafy.io
백엔드 서버 : https://i9d111.p.ssafy.io/tab
실시간 키오스크 : https://i9d111.p.ssafy.io/kiosk/auth
개발팀 소개
| 신지훈 | 성연석 | 송민철 |
|---|---|---|
| @wlgns1718 | @abcd9351 | @thdalscjf05 |
| BackEnd | BackEnd | BackEnd |
| 신제형 | 이정훈 |
|---|---|
| @tlswpgud22 | @wjdgns0631 |
| FrontEnd | FrontEnd |
프로젝트 소개
TAB은 승차벨 기능이 있는 버스정류장 키오스크와, 다양한 웹 서비스를 제공합니다.
탑승객은 승차벨 버튼을 눌러 탑승의사를 표현할 수 있습니다.
정류장 키오스크에 승차 버튼을 클릭하여 승객은 승차의사를 표현합니다. 교통약자 또한 하단의 버튼을 통해 승차 버튼을 클릭할 수 있습니다. 버스기사는 라즈베리파이에 전송된 데이터를 바탕으로 승차여부를 확인할 수 있습니다.
버스와 관련된 다양한 웹 서비스를 제공합니다.
- 자유게시판, 공지사항
- 승객들은 자유게시판에서 소통할 수 있으며, 공지사항을 통해 버스에 대한 정보를 얻을 수 있습니다.
- 노선 수요조사
- 승객들은 원하는 노선에 설문을 실시하여 의견을 제시할 수 있습니다.
- 수요조사 데이터 시각화
- 승객들이 실시한 설문을 히트맵 방식으로 시각화하여 관리자가 손쉽게 파악할 수 있습니다.
- 노선별 관광지/맛집 정보
- 승객들은 선택한 노선에 대한 관광지, 문화시설, 축제공연행사, 여행코스, 레포츠, 숙박, 쇼핑, 음식점에 대한 정보를 얻을 수 있습니다.
시작 가이드
Requirements
For building and running the application you need:
Installation
$ git clone https://lab.ssafy.com/s09-webmobile3-sub2/S09P12D111.gitBackend
$ cd Backend
$ [update] build.gradle
$ [Run TabApplication]Frontend
$ cd Frontend
$ npm install
$ npm run devStacks 🐈
API 키 발급
가) Kakao developers 카카오 로그인 API 설정
- 내 애플리케이션 → 애플리케이션 추가
- 카카오 로그인 동의항목 설정, 활성화 설정
- REST API 키, Redirect URL, Client Secret 키 생성
나) Naver Cloud platform direction 5 API설정
- 콘솔의 AI·NAVER API > AI·NAVER API > Application에서 애플리케이션을 등록
- AI·NAVER API > AI·NAVER API > Application에서 등록한 애플리케이션을 선택해 Client ID와 Client Secret값을 확인
- AI·NAVER API > AI·NAVER API > Application의 변경 화면에서 Direction 5가 선택
- 월 무료 횟수가 정해져 있으니 주의해서 사용
다)공공 데이터 포털API설정
- 국토교통부(TAGO) 버스정류소정보, 버스 노선 정보, 버스 의치 정보, 버스 도착 정보 활용 신청
- 한국관광공사 국문 관광정보 서비스 활용 신청
- 회원 가입시 발급 받은 개인 API 인증키 사용
라)Google Maps API 설정
- 구글 맵 플랫폼 사이트 가입, 결제카드 등록
- 키 및 사용자 인증 정보에서 API키 발급
- API 및 서비스에서 Maps JavaScript API 활성화
Environment
CI/CD
Development
Communication
화면 구성 📺
| 로그인 페이지 | 회원가입 페이지 |
|---|---|
| 정류장 키오스크 페이지 | 노선 별 관광/맛집 추천 기능 |
| 게시판 | 공지사항 |
| 게시물 작성 페이지 | 수요조사 결과 페이지 |
시연 영상 📺
정류장 키오스크 시연
웹 서비스 시연
주요 기능 📦
⭐️ 라즈베리파이를 통한 승차 알림벨 기능
- 키오스크의 승차버튼을 통해 버스기사에게 승차여부를 알릴 수 있는 기능
⭐️ 공공API를 활용한 도착정보 실시간 확인 기능
- 현재 정류장에 도착 예정인 버스를 실시간으로 조회하는 기능
⭐️ 노선 수요조사와 데이터 시각화
- 카카오맵 API를 이용하여 노선에 대한 수요조사를 실시하고 구글맵 API, 네이버 클라우드 플랫폼을 활용하여 수요조사 결과 데이터를 히트맵 방식으로 시각화 하는 기능
⭐️ 노선 별 관광/맛집 추천 기능
- 공공API와 거리 알고리즘을 활용한 정류장 별 관광/맛집 추천 기능
부가 기능 📦
🌕 카카오 로그인 기능
- OAuth를 활용하여 카카오 로그인 기능
🌕 SpringSecurity를 활용한 인증과 인가
- SpringSecurity를 활용하여 사용자 인증과 인가 기능
🌕 게시판 CRUD와 댓글 기능
- React, SpringBoot를 활용하여 게시판과 댓글 CRUD 기능
아키텍쳐
디렉토리 구조
- 프론트엔드
📦src
┣ 📂assets
┃ ┗ 📜react.svg
┣ 📂components
┃ ┣ 📂kiosk
┃ ┃ ┣ 📂ArrivalBusList
┃ ┃ ┃ ┣ 📜ArrivalBusList.css
┃ ┃ ┃ ┣ 📜ArrivalBusList.props.ts
┃ ┃ ┃ ┣ 📜ArrivalBusList.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂ArrivalBusListItem
┃ ┃ ┃ ┣ 📜ArrivalBusListItem.css
┃ ┃ ┃ ┣ 📜ArrivalBusListItem.props.ts
┃ ┃ ┃ ┣ 📜ArrivalBusListItem.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂BottomButtonBox
┃ ┃ ┃ ┣ 📜BottomButtonBox.css
┃ ┃ ┃ ┣ 📜BottomButtonBox.props.ts
┃ ┃ ┃ ┣ 📜BottomButtonBox.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂ComingSoonBusList
┃ ┃ ┃ ┣ 📜ComingSoonBusList.css
┃ ┃ ┃ ┣ 📜ComingSoonBusList.props.ts
┃ ┃ ┃ ┣ 📜ComingSoonBusList.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂KioskHeader
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜KioskHeader.css
┃ ┃ ┃ ┣ 📜KioskHeader.props.ts
┃ ┃ ┃ ┗ 📜KioskHeader.tsx
┃ ┃ ┗ 📂LivingInfomationBox
┃ ┃ ┃ ┣ 📂DustBox
┃ ┃ ┃ ┃ ┣ 📜DustBox.css
┃ ┃ ┃ ┃ ┣ 📜DustBox.props.ts
┃ ┃ ┃ ┃ ┣ 📜DustBox.tsx
┃ ┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┃ ┣ 📂QRcodeBox
┃ ┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┃ ┣ 📜QRcodeBox.css
┃ ┃ ┃ ┃ ┣ 📜QRcodeBox.props.ts
┃ ┃ ┃ ┃ ┗ 📜QRcodeBox.tsx
┃ ┃ ┃ ┣ 📂WeatherBox
┃ ┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┃ ┣ 📜WeatherBox.css
┃ ┃ ┃ ┃ ┣ 📜WeatherBox.props.ts
┃ ┃ ┃ ┃ ┗ 📜WeatherBox.tsx
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜LivingInfomationBox.css
┃ ┃ ┃ ┣ 📜LivingInfomationBox.tsx
┃ ┃ ┃ ┗ 📜LivingInformation.props.ts
┃ ┗ 📂web
┃ ┃ ┣ 📂BoardTable
┃ ┃ ┃ ┣ 📜BoardTable.props.ts
┃ ┃ ┃ ┣ 📜BoardTable.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂CommentItem
┃ ┃ ┃ ┣ 📜CommentItem.props.ts
┃ ┃ ┃ ┣ 📜CommentItem.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂NoticeTable
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜NoticeTable.props.ts
┃ ┃ ┃ ┗ 📜NoticeTable.tsx
┃ ┃ ┗ 📂WebHeader
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebHeader.css
┃ ┃ ┃ ┣ 📜WebHeader.props.ts
┃ ┃ ┃ ┗ 📜WebHeader.tsx
┣ 📂fonts
┃ ┣ 📜font.css
┃ ┗ 📜Inter.ttf
┣ 📂pages
┃ ┣ 📂kiosk
┃ ┃ ┣ 📂AuthPage
┃ ┃ ┃ ┣ 📂keyboard
┃ ┃ ┃ ┃ ┗ 📜keyBoard.tsx
┃ ┃ ┃ ┣ 📜AuthPage.css
┃ ┃ ┃ ┣ 📜AuthPage.props.ts
┃ ┃ ┃ ┣ 📜AuthPage.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┗ 📂BusInfomationPage
┃ ┃ ┃ ┣ 📜BusInfomationPage.props.ts
┃ ┃ ┃ ┣ 📜BusInfomationPage.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┣ 📂mobile
┃ ┃ ┗ 📂MobileMain
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜MobileMain.css
┃ ┃ ┃ ┣ 📜MobileMain.props.ts
┃ ┃ ┃ ┗ 📜MobileMain.tsx
┃ ┗ 📂webpage
┃ ┃ ┣ 📂Web404Page
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜Web404Page.props.ts
┃ ┃ ┃ ┗ 📜Web404Page.tsx
┃ ┃ ┣ 📂WebBoardDetailPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebBoardDetailPage.props.ts
┃ ┃ ┃ ┗ 📜WebBoardDetailPage.tsx
┃ ┃ ┣ 📂WebBoardPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebBoard.css
┃ ┃ ┃ ┣ 📜WebBoardPage.props.ts
┃ ┃ ┃ ┗ 📜WebBoardPage.tsx
┃ ┃ ┣ 📂WebBoardPostPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebBoardPostPage.css
┃ ┃ ┃ ┣ 📜WebBoardPostPage.props.ts
┃ ┃ ┃ ┗ 📜WebBoardPostPage.tsx
┃ ┃ ┣ 📂WebLoginPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebLogin.css
┃ ┃ ┃ ┣ 📜WebLoginPage.props.ts
┃ ┃ ┃ ┗ 📜WebLoginPage.tsx
┃ ┃ ┣ 📂WebMainPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebMainPage.css
┃ ┃ ┃ ┣ 📜WebMainPage.props.ts
┃ ┃ ┃ ┗ 📜WebMainPage.tsx
┃ ┃ ┣ 📂WebNoticeDetailPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebNoticeDetailPage.css
┃ ┃ ┃ ┣ 📜WebNoticeDetailPage.props.ts
┃ ┃ ┃ ┗ 📜WebNoticeDetailPage.tsx
┃ ┃ ┣ 📂WebRecommendPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebRecommendPage.props.ts
┃ ┃ ┃ ┗ 📜WebRecommendPage.tsx
┃ ┃ ┣ 📂WebSignupPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebSignup.css
┃ ┃ ┃ ┣ 📜WebSignupPage.props.ts
┃ ┃ ┃ ┗ 📜WebSignupPage.tsx
┃ ┃ ┣ 📂WebSurveyPage
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜WebSurveyPage.props.ts
┃ ┃ ┃ ┗ 📜WebSurveyPage.tsx
┃ ┃ ┗ 📜Kakaopage.tsx
┣ 📂store
┃ ┣ 📂api
┃ ┃ ┗ 📜api.ts
┃ ┣ 📂slice
┃ ┃ ┣ 📜kiosk-slice.ts
┃ ┃ ┗ 📜web-slice.ts
┃ ┗ 📜store.ts
┣ 📜App.css
┣ 📜App.tsx
┣ 📜index.css
┣ 📜main.tsx
┗ 📜vite-env.d.ts
- 백엔드
├─.gradle
│ ├─8.1.1
│ │ ├─checksums
│ │ ├─dependencies-accessors
│ │ ├─executionHistory
│ │ ├─fileChanges
│ │ ├─fileHashes
│ │ └─vcsMetadata
│ ├─buildOutputCleanup
│ └─vcs-1
├─.idea
│ └─modules
├─build
│ ├─classes
│ │ └─java
│ │ ├─main
│ │ │ └─com
│ │ │ └─ssafy
│ │ │ └─tab
│ │ │ ├─config
│ │ │ ├─controller
│ │ │ ├─domain
│ │ │ ├─exception
│ │ │ ├─repository
│ │ │ └─service
│ │ └─test
│ │ └─com
│ │ └─ssafy
│ │ └─tab
│ │ └─service
│ ├─generated
│ │ └─sources
│ │ ├─annotationProcessor
│ │ │ └─java
│ │ │ ├─main
│ │ │ └─test
│ │ └─headers
│ │ └─java
│ │ ├─main
│ │ └─test
│ ├─reports
│ │ └─tests
│ │ └─test
│ │ ├─classes
│ │ ├─css
│ │ ├─js
│ │ └─packages
│ ├─resources
│ │ ├─main
│ │ └─test
│ ├─test-results
│ │ └─test
│ │ └─binary
│ └─tmp
│ ├─compileJava
│ │ └─compileTransaction
│ │ ├─backup-dir
│ │ └─stash-dir
│ ├─compileTestJava
│ │ └─compileTransaction
│ │ ├─backup-dir
│ │ └─stash-dir
│ └─test
├─gradle
│ └─wrapper
├─out
│ ├─production
│ │ ├─classes
│ │ │ └─com
│ │ │ └─ssafy
│ │ │ └─tab
│ │ │ ├─config
│ │ │ ├─controller
│ │ │ ├─domain
│ │ │ ├─dto
│ │ │ ├─exception
│ │ │ ├─repository
│ │ │ ├─service
│ │ │ └─utils
│ │ └─resources
│ └─test
│ ├─classes
│ │ └─generated_tests
│ └─resources
└─src
├─main
│ ├─generated
│ ├─java
│ │ └─com
│ │ └─ssafy
│ │ └─tab
│ │ ├─config
│ │ ├─controller
│ │ ├─domain
│ │ ├─dto
│ │ ├─exception
│ │ ├─repository
│ │ ├─service
│ │ └─utils
│ └─resources
└─test
├─java
│ └─com
│ └─ssafy
│ └─tab
│ ├─repository
│ └─service
└─resources'👨💻프로젝트:Project' 카테고리의 다른 글
| forURtravel (0) | 2023.06.20 |
|---|---|
| 퍼스널컬러 진단 프로젝트 (0) | 2023.05.03 |
| SignLanguage (0) | 2023.05.03 |
