프로젝트

N캠프에 참여한 수강생들의 프로젝트입니다.

Togother

DevOps 1기, Team Togother


팀장, 프로젝트 총괄, 로그인김재철 |  커뮤니티 동행, 와이어 프레임정선경 |  커뮤니티 플래너, 채팅방, 여행패키지명인호

나라별 상세 정보 조회김진아 |  도시 리스트, 도시 정보문이빈 |  회원가입한도연

장소 상세, 리뷰 관리박종현 |  메인페이지, 채팅이지현

[역할 상세]

김재철

명인호

문이빈

팀장 : 

- 프로젝트 총괄 및 전반적인 프로젝트 구조 설계

- 팀원의 기능구현 지원

- 코드 최적화

백엔드: 

- 포트원 API를 사용한 본인인증 구현

- JWT 로그인 구현

- javamailsender를 사용한 아이디/비밀번호 찾기 구현

- 장소 좋아요 기능 구현

- 네이버 소셜로그인

- 회원정보 수정,탈퇴 구현

- 관리자 페이지의 유저관리, 도시, 장소, 여행패키지 추가, 수정 구현

- REST API 설계

프론트엔드:

- 로그인 UI와 유효성 검사

- 아이디, 비밀번호 찾기 UI

- ZUSTAND를 통한 전역 상태 관리

- 리액트 라우터를 활용한 권한별 라우팅 제어

인프라: 

- 서버 구축 및 배포

- 도커와 젠킨스를 통한 CI/CD 구축

백엔드 : 

- NCP object storage 연결을 통한 이미지 업로드 구현

- 카카오톡 메시지 API를 사용한 메시지 전송 및 리프레시 토큰을 통한 액세스 토큰 발급

- 실시간 채팅 프론트 연결점 구현

- 채팅룸 구현

- 무한스크롤 페이지네이션 구현

프론트엔드: 

- 플래너 CRUD 및 기본 UI 구현

- 커뮤니티 기본 UI 구현

- 플래너 리스트 및 무한 스크롤 구현

- 마이페이지의 플래너, 동행, 예약내역 구현

- 전 페이지 검색 구현

- 유저 MBTI 테스트 및 매핑 

- 포트원을 사용한 결제 구현

- 여행 패키지 메인화면 구현 및 예약 페이지 구현

- 관리자 페이지 동행, 플래너, 예약 내역 구현

- 채팅 페이지 기본 UI 및 채팅 프론트 구현

- 전 페이지 CSS 세부 담당

인프라:

- ERD 클라우드를 통한 ERD 설계

- NCP object storage 설정

백엔드:

- 여행 패키지 테이블 설계

- 여행 패키지 CRUD 구현

프론트엔드:

- 도시 리스트 나열

- 도시 리스트 아코디언을 활용하여 도시 필터링

- 캐러셀로 도시 추천

- 도시 상세 페이지 정보 나열

- 여행 패키지 나열

- 여행 패키지 상세 페이지 정보 불러오기와 패키지 개수 선택 기능

- 좋아요를 클릭한 장소를 마이페이지에 나열

- 마이페이지에 좋아요 취소 기능

데이터:

- 전체 나라, 도시, 명소, 맛집, 패키지 데이터 관리

정선경

김진아

한도연

백엔드: 

- 동행 게시글 저장, 수정, 삭제 구현

- 구글 PLACES API 검색 장소 저장

프론트엔드: 

- 동행 게시글 출력

- 동행 게시글 저장, 수정, 삭제

- 동행 일정 추가 모달 구현

- 동행 일정 추가시 저장된 장소 검색

- 구글 PLACES API 연동

- 동행 일정 추가 선택한 날짜별 정렬

- 구글맵 현재위치 구현

- 동행 게시글 일정별 구글맵 위치 표시

- figma를 이용한 와이어 프레임 제작

프론트엔드:

- 미디어 쿼리를 이용한 반응형, 모바일 푸터 구현

- 도시 정보 페이지 UI

- 마이페이지 기본 UI

- 예약페이지 기본 UI

- open.er API를 이용한 나라별 환율 조회

- openweathermap API를 이용한 나라별 날씨 조회

- Sweet alert 라이브러리를 이용한 사이트 모달 통합

- 여행 패키지 페이지 캘린더 구현

백엔드:

- 회원가입 이메일 중복 체크

- Spring Validation을 이용한 회원가입 유효성 검사

- 유저 프로필 사진 수정 기능

프론트:

- 로그인 초기 UI 구상

- 회원 가입 약관 동의

- 유저 여행 취향 및 음식 취향 UI

- 모바일 헤더 구현

박종현

이지현

백엔드:

- 여행 장소 CRUD 구현

- 여행 장소 리뷰 CRUD 구현

프론트엔드:

- 장소 페이지 기본 UI 구현

- Google Map API를 이용하여 지도 출력

- 여행 장소 리뷰 무한 스크롤 구현

- 리뷰에 등록된 사진을 모달을 이용하여 출력

- 유저 프로필을 모달을 이용하여 출력

백엔드:

- WebSocket, Stomp, SockJS 환경 설정 및 1:1, 1:N 실시간 채팅

- 채팅방 나가기 기능

- 채팅방 메시지 로그 DB저장 및 불러오기

- 채팅 메시지 시간 표시

프론트엔드:

- 메인페이지 여행 지역, 국가, 도시순으로 선택 구현

- 헤더컴포넌트 구성

 

[프로젝트 설명]

여정을 더 특별하게 만들어주는 Togother는 여행 정보 및 상품 중개, 개인 여행 플래너 작성 및 공유, 동행 모집을 한곳에서 제공하는 플랫폼 입니다.



첨부파일


Github