- 목적 : TBTI 테스트 기반으로 여행 취향 분석을 하여 여행 숙소를 추천해 주고 커뮤니트를 통해 여행자들과 상호 작용합니다.
- 목표
- TBTI를 통해 유저들의 여행 성향을 분석하고 선택한 답변을 통해 여행지 숙소를 추천합니다.
- 숙소 카테고리를 통해 원하는 숙소 리스트를 볼 수 있습니다.
- 커뮤니티를 통해 유저들간의 상호작용이 가능합니다.
- 작업 계획
- 주제 정하기 -> 기획 -> 피그마디자인 -> 백엔드 스키마 정의 -> API 명세서 작성 -> 백엔드 개발 -> 미들웨어 추가 -> 퍼블리싱 -> 프론트 개발
1.공통 헤더,푸터 컴포넌트
- 원하는 메뉴를 선택해서 이동합니다.
- 검색 기능을 통해 빠르게 원하는 숙소를 볼 수 있습니다.
2.메인 페이지
- 인기 숙소 확인이 가능합니다.
- 신규 숙소 확인이 가능합니다.
- 테스트 페이지로 이동이 가능합니다.
- 좋아요 기능이 가능합니다.
3.로그인 페이지
- 로그인 페이지는 이메일 형식과 비밀번호 형식 확인, 로그인 후 메인페이지로 이동합니다.
- 회원가입 페이지는 닉네임, 이메일 중복확인 / 비밀번호 확인 후 회원가입이 이루어집니다.
4.관리자 숙소, 카테고리 페이지
- 두가지 메뉴로 나뉘며 숙소 페이지는 숙소 CRUD를 통해 원하는 숙소들을 관리 할 수 있습니다.
- 카테고리 페이지는 숙소 종류를 관리 하는 페이지고 카테고리 CRUD가 가능합니다.
- 추가, 수정, 삭제는 모달창을 통해 관리가 가능합니다.
5.마이 페이지
- 이메일, 닉네임, 비밀번호 변경이 가능합니다.
- 좋아요를 표시한 목록을 확인할 수 있습니다.
6.테스트 페이지
- 테스트 질문지가 보여지며 선택을 할 수 있습니다.
- 선택한 항목을 계산하여 테스트 결과가 보여지며 추천 숙소를 확인 할 수 있습니다.
7.숙소 리스트 페이지
- 숙소 리스트를 확인이 가능하며 카테고리별로 필터링을 하여 원하는 항목을 확인 할 수 있습니다.
8.숙소 상세 페이지
- 선택한 숙소의 정보를 나타내는 페이지로 숙소 이미지, 상세설명을 확인 할 수 있습니다.
9.커뮤니티 페이지
- 로그인 이후에 사용이 가능합니다.
- 게시글 작성한 목록을 확인 할 수 있습니다.
- 게시글 좋아요가 가능합니다.
- 게시글 추가시 카테고리 검색을 통해 원하는 숙소에 관련된 게시글 추가가 가능합니다.
10.커뮤니티 상세 페이지
- 게시글 수정,삭제가 가능합니다.
- 댓글 CRUD가 가능합니다.
| FE | BE | Infra |
|---|---|---|
| Scss | React.js | VM |
| React.js | TypeScript | |
| TypeScript | mysql |
FE
- 팀장을 맡아 전체적인 회의록, 일정, 기획, 컨벤션 등 팀원간의 커뮤니케이션에 필요한 내용 노션에 정리하였습니다.
- 피그마로 전체적인 디자인 작업을 하고 컴포넌트 분리를 하여 팀원에게 역할분담을 담당했습니다.
- 원활한 작업을 위해 초기 프로젝트 세팅 작업을 진행했습니다.
- 로그인, 회원가입, 관리자 페이지를 담당하였습니다.
- 해당 API 호출 작업을 진행했습니다.
- 공통 모달 창을 개발하여 중복되는 모달창 작업을 줄였습니다.
- Notion : 스터디 기간, 사용 기술 스택, 참고 문서, 업무 진행 사항, 회의록
- Discord : 음성 채팅방 활용 의견 제시및 문제 해결
- GitHub : Code Repository
- Postman Teams : API 테스트 진행
- 변수 : 카멜 케이스(camelCase)
- 변수(스키마) : 파스칼 케이스(PascalCase)
- 함수 : 카멜 케이스(camelCase)
- 상수 : 대문자
- 파일 : 파스칼 케이스(PascalCase)
- 스타일 : 케밥 케이스(kebab-case)
- feat : 새로운 기능 추가
- fix : 오류 수정
- style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우, css 작업
- refactor : 코드 로직 수정 (리팩토링)
- docs : 문서 수정
- test : 테스트 코드 추가
- chore : 빌드 업무 수정, 패키지 매니저 수정 (module 추가 시)