여행의 순간을 더 간편하고 아름답게 기억할 수 있도록, 생성형AI여행기록 서비스
- OAuth를 통해 카카오, 네이버, 구글 회원가입 및 로그인이 가능합니다.
- 대표사진, 여행 이름, 여행 기간, 지역을 입력해 여행을 등록합니다.
- react-calendar 라이브러리를 사용해 여행 기간 선택 컴포넌트를 구현했습니다.
- 여행 수정 및 삭제가 가능합니다.
- 메인 페이지의 여행 아이템을 클릭해 일기 리스트를 확인할 수 있습니다.
- '일기 등록하기'를 통해 일기를 작성할 수 있으며 사진 첨부가 가능합니다.
- 일기 수정 및 삭제가 가능합니다.
- '일행 추가' 버튼을 통해 여행에 친구를 초대할 수 있습니다. '일행 추가' 시 랜덤 코드가 부여되며, 친구들은 이 코드를 통해 여행에 들어올 수 있습니다.
- 메인 페이지에 '여행 추가하기' 버튼을 클릭하면 나오는 '친구 여행 참여하기' 를 통해 친구 여행에 참여할 수 있습니다. 친구에게 받은 랜덤 코드를 입력하면 참여가 완료됩니다.
- 초대된 여행에도 일기를 작성할 수 있으며 일기 내용은 친구들과 공유됩니다.
- 내가 포함된 여행들을 지도로 모아볼 수 있습니다.
- 해당 지역 위에 대표 사진이 포함된 마커가 떠있고, 마커 클릭 시 바텀시트로 여행의 대표 정보들이 표시됩니다.
- '여행 보러가기' 버튼을 통해 여행 페이지로 이동할 수 있습니다.
- 내가 참여한 여행 속 일기들을 날짜별로 모아볼 수 있습니다.
- 각 날짜의 일기에 첨부된 사진이 대표 이미지로 표시됩니다.
- 날짜를 눌러 원하는 일기로 넘어갈 수 있습니다.
- 일기에 첨부된 사진들은 ai를 통해 자동으로 태그가 부여됩니다.
- 부여된 태그에 따라 사진첩이 만들어지며 메인 페이지에서 확인할 수 있습니다.
- 내 정보(프로필 사진, 이름)를 수정할 수 있습니다.
- 로그아웃하거나 회원 탈퇴할 수 있으며 회원 탈퇴 시 회원과 관련된 모든 정보가 DB에서 영구 삭제됩니다.
이채영 |
강서영 |
남궁희 |
김은지 |
김민주 |
TL, Frontend |
Frontend |
Frontend, AI |
Backend |
Backend |
역할 | 종류 |
---|---|
Library | |
Programming Language | |
Styling | |
State Management | |
Formatting | |
Package Manager | |
Version Control |
프론트엔드
📦TripTory_client
┣ 📂AI
┃ ┗ 📜ImageTagAnalyze.py
┣ 📂public
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📂fonts
┃ ┃ ┣ 📂icons
┃ ┃ ┗ 📂images
┃ ┣ 📂components
┃ ┃ ┗ 📂common
┃ ┃ ┃ ┣ 📂map
┃ ┣ 📂data
┃ ┣ 📂layout
┃ ┣ 📂pages
┃ ┣ 📂recoil
┃ ┣ 📂routes
┃ ┃ ┗ 📜router.js
┃ ┣ 📂styles
┃ ┃ ┣ 📜color.js
┃ ┃ ┗ 📜globalStyle.js
┃ ┣ 📜App.css
┃ ┣ 📜App.js
┃ ┣ 📜App.test.js
┃ ┣ 📜index.css
┃ ┣ 📜index.js
┃ ┣ 📜reportWebVitals.js
┃ ┗ 📜setupTests.js
┣ 📜.eslintignore
┣ 📜.eslintrc.yml
┣ 📜.gitignore
┣ 📜.gitmessage(ko).txt
┣ 📜.gitmessage.txt
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜LICENSE
┣ 📜netlify.toml
┣ 📜package.json
┣ 📜README.md
┗ 📜yarn.lock
백엔드
📦TripTory_server
┣ 📂.git
┣ 📂src
┃ ┣ 📂AI
┃ ┣ 📂diary
┃ ┣ 📂login
┃ ┣ 📂travel
┃ ┣ 📂user
┃ ┗ 📜oauth.js
┣ 📜.gitignore
┣ 📜index.js
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜README.md