프로젝트 주제 및 선정 배경(기획의도)

사람들마다 특별한 시간을 보낸 특별한 장소가 있다. 이런 추억을 공간에 남겨 그 곳을 다시 방문할 때 열어볼 수 있고, 함께했던 사람과 공유할 수 있으면 어떨까?

[프로젝트 FILM]을 통해 우리는 특별한 시간을 보낸 장소에 기록(필름)을 남기고, 함께 시간을 보낸 사람과 이 추억(필름)을 공유하여 시공간을 넘은 소통을 할 수 있다.

프로젝트 구현 내용 요약

1. 카카오 소셜로그인 기능으로 간편 회원가입 및 로그인을 할 수 있다.
2. 지도, 위치 기반 서비스를 이용할 수 있다.
3. 필름(게시물)을 생성, 열람, 삭제할 수 있다.
4. 지도에서 필름별 위치를 파악할 수 있다.
5. 홈 화면에서 필름의 미리보기를 할 수 있다.
6. 사용자검색을 통해 필름 열람 권한을 추가 및 수정할 수 있다.
7. 마이페이지에서 내 필름과 공유받을 필름을 확인할 수 있다.

활용장비 및 재료(개발 환경)

• 공통
  • 스크럼, 회의
    • 게더타운, 디스코드, 노션, 슬랙
• 프론트
  • 개발환경설정 : react(create-react-app)(^17.0.2), craco(^6.4.2)
  • 언어 : typescript(^4.1.2)
  • 포맷터 : eslint(7.32.0), prettier(^2.5.0)
  • 테스트 라이브러리 : storybook(^6.4.1)
  • api 통신 : axios(^0.24.0)
  • 상태관리 : context api
  • 라우터 : react-router-dom(^6.0.2)
  • 스타일 라이브러리 : emotion(^11.7.0, ^11.6.0)
  • 지도 : react-map-gl(^6.1.18)
  • CI/CD : github actions
  • 배포환경 : aws s3, cloudfront
• 백엔드
  • 개발환경 : JDK 17
  • 주요 사용 라이브러리
    • Spring boot 2.5.6
    • jpa 2.6.1 hibernate
    • lombok 1.18.22
    • oauth2-client 2.5.6
    • jwt 3.18.2
  • Database
    • h2database 2.0.202
    • MySQL 8.0.25
  • CI/CD: github actions
  • 배포환경 : AWS ec2 / S3
  • 문서화 도구 : restdocs

프로젝트 구조

페이지 구조