파이널 프로젝트 - 오늘의 데이트(JPA, React.js, AWS, React Native, Google Play Store ...)

안녕하세요.

 

사실 파이널 프로젝트는 7월 25일에 발표를 끝으로 성공적으로 끝마쳤는데 말이죠..

저는 왜 이제야 후기 글을 쓰는 걸까요..^^..

 

꾸준히 기록하고, 발전하시는 블로거 분들 정말 정말 존경합니다.

 

파이널 프로젝트 하면서 백엔드가 정말 어려워서 초반 몇 일 팀원 분들이랑 같이 헤매면서 했었는데,

지금 생각해보면 그렇게 고생을 했었기에 가장 기억에 오래 남는 것 같기도 하네요. ㅎㅎ

 

그럼 후기 드루갑니당!

---

오늘의 데이트는 하이브리드 웹앱 애플리케이션으로

사용자가 직접 데이트 코스를 공유하는 애플리케이션 입니다.

스크린샷

모바일 첫 페이지

기타 등등.. 너무 많아서 여기까지만 올립니당 ㅜㅜ...

배포주소

• Web URL : https://todaysdate.site:8080
• App URL : https://play.google.com/store/apps/details?id=com.kh.todaysDate_react_native

오늘의 데이트 - Google Play 앱

오늘의 데이트

프로젝트 소개

오늘의 데이트는 사용자들이 직접 경험하고 만족했던 데이트 코스를 공유하는 애플리케이션 입니다.
사용자는 "경로 만들기"를 통해 데이트(여행) 경로를 직접 지정할 수 있습니다.
다른 사용자들의 경로를 보고 데이트(여행) 계획을 좀 더 쉽게 준비할 수 있습니다.
원하는 게시글은 북마크가 가능하고, SNS 공유하기를 통해 쉽게 전달할 수 있습니다.
특정 지역에 관한 최신 행사 정보를 한 눈에 볼 수 있습니다.

상세 기능

설계의 주안점

• JWT(Access Token & Refresh Token)와 Password Encoder(Spring Security) 적용하여 사용자 인증 및 권한 부여
• 모바일과 PC 환경에서 편안하게 사용할 수 있도록 미디어 쿼리 적용
• 사용자 편의를 위하여 메인 게시글 6개 단위 조회(페이지 네이션)
• 사용자 데이터의 보안과 신뢰성을 보장하기 위해 HTTPS 적용

메인 페이지

• 게시글 검색
• 인기 데이트 코스(북마크 순) 확인
• 게시글 지역 필터링
• 북마크 추가/삭제
• WebSocket을 이용한 관심 지역 게시글 업로드 푸시 알림

경로 만들기 CRUD

• 주소 검색하여 지도에 마커 추가(카카오 맵 API)
• SNS 공유하기
• 사용자 신고 및 차단, 게시글 신고
• 작성자가 지정한 경로 확인 및 장소 정보 확인
• 이미지 업로드(Firebase)
• 댓글 CRUD

멤버십 결제

• 카카오페이 간편 결제를 이용하여 멤버십 회원으로 업그레이드 가능
  (결제시 피드에 광고 제거)

지역행사 페이지

• 공공 API를 이용하여 최신 행사 정보 확인(날짜순, 인기순)
• 지역 및 시기 필터링
• 축제 키워드 검색

고객센터

• 온라인 챗봇 기능 및 관리자에게 문의사항 전송(직접 구현)

관리자 페이지

• 회원 관리(정보 조회 및 삭제)
• 게시글, 댓글 관리(전체 게시글 조회, 검색, 삭제, 바로 이동)
• 광고 관리(이미지 업로드, 삭제)
• 문의 관리(문의 내용 확인 및 상태(대기/읽음) 조정 가능)
• 신고 관리(신고 내용 확인)

회원 가입

• 이메일 인증(Java Mail API)

마이 페이지

• 나의 핀 목록(내가 작성한 글, 댓글 확인 및 삭제)
• 나의 북마크(폴더 추가 및 삭제, 확인)
• 푸시 알림 여부 설정
• 회원 정보 수정, 비밀번호 변경, 회원 탈퇴

사용 기술 및 라이브러리

• IDE : IntelliJ, Visual Studio Code, MySQLWorkbench
• OS : MAC
• Server : Tomcat
• Front End : HTML5, CSS3, React.js, React Native, Styled components, Java Script
• Back End : Java11, Spring Boot(Gradle), JPA, MySQL
• Communication : Slack, Notion, GitHub
• etc : AWS EC2

Git Repository

1. Spring Boot + React

CORS 충돌 문제를 해결하기 위하여 백엔드와 프론트엔드 통합하여 빌드

https://github.com/chicken-tender/Todaysdate

GitHub - chicken-tender/Todaysdate: 오늘의 데이트 Springboot + React

2. React Native

Google Play Store 제출용. 리액트 네이티브 이용하여 Android용 앱 배포
Expo 이용

https://github.com/chicken-tender/TodaysDate_React-Native

GitHub - chicken-tender/TodaysDate_React-Native: 오늘의 데이트 React Native(Android)