🎬Demo시연영상 🎤Presentation 📝Notion 🖌️Figma
- 배포 URL : http://kdt-sw-7-team08.elicecoding.com/
- Test ID : test@test.com
- Test PW : test1234!
📒 여: 여행 일정을 / 기: 기록하고 / 다: 다이어리를 쓰는 공간 여행 일정을 공유하고 관광 명소 및 코스를 스크랩 할 수 있는 서비스를 제공합니다.
|
FE 팀장 : 이다현 |
FE 팀원 : 황하연 |
FE 팀원 : 하유나 |
BE 팀장 : 구기윤 |
BE 팀원 : 김세연 |
BE 팀원 : 고정화 |
- Front : HTML, JavaScript, React, Tailwind Css, Recoil, React-Query
- Back-end : MongoDB, Express.js, JavaScript, Node.js
- 버전 및 이슈관리 : Gitlab, Gitlab Issues, Gitlab Project
- 빌드 도구, 패키지 매니저, 인증 방식 : Vite, Yarn, Cookie
- 협업 툴 : Discord, Notion
- Git Hook 관리 도구 : Husky
- 서비스 배포 환경 :
- 디자인 : Figma
- React
- 재사용성 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
- 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
- Tailwind css
- 개발시간 단축 클래스 이름을 고민하는 시간도 개발시간에 포함 된다고 생각했습니다. Tailwind CSS는 클래스 이름을 고민할 필요가 없기 때문에 빠르게 구현에 초점을 둘 수 있습니다.
- 스타일 통일성 팀 내에서 스타일 규칙을 정한다고 해도, CSS 파일을 따로 만들어 각자 작성을 하게 되면 서로의 이해 차이 때문에 페이지 혹은 컴포넌트 별 스타일의 통일성을 해칠 수 있습니다. 그러나 Tailwind CSS의 경우 사용할 수 있는 클래스 명이 이미 정해져있기 때문에 이해 차이를 줄이고 스타일에 통일성을 줄 수 있습니다.
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- Redux가 아닌 Recoil을 채택한 이유
- 낮은 러닝커브 Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
- 적은 코드량 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
- Git-flow 전략을 기반으로 master, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
- master, develop, Feat 브랜치로 나누어 개발을 하였습니다.
- master 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
- dev 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
- feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
📦src
┣ 📂assets
┣ 📂components //공통 컴포넌트 폴더
┣ 📂constants //공통 상수관리 폴더
┣ 📂hooks
┣ 📂pages //페이지 단위 폴더
┃ ┣ 📂auth
┃ ┣ 📂comment
┃ ┣ 📂detail
┃ ┣ 📂main
┃ ┣ 📂mypage
┃ ┣ 📂notification
┃ ┣ 📂setup
┃ ┣ 📜ApiErrorBoundary.jsx
┃ ┣ 📜ChangePassword.jsx
┃ ┣ 📜Filter.jsx
┃ ┣ 📜FindPassword.jsx
┃ ┣ 📜Loading.jsx
┃ ┣ 📜Login.jsx
┃ ┣ 📜Map.jsx
┃ ┣ 📜Notfound.js
┃ ┣ 📜PrivateRoute.jsx
┃ ┣ 📜Search.jsx
┃ ┗ 📜SignUp.jsx
┣ 📂recoils
┣ 📂services //API 통신 로직 폴더
┣ 📂store
┃ ┗ 📜reactQuery.js
┣ 📂utils
┣ 📜App.jsx
┣ 📜index.css
┗ 📜main.jsx
이름 | 담당 업무 |
---|---|
🍊이다현 |
|
☘️ 고정화 |
|
- 전체 개발 기간 : 2023-12-11 ~ 2022-12-29
- UI 구현 : 2022-12-11 ~ 2022-12-21
- 기능 구현 : 2022-12-22 ~ 2022-12-29
- GitLab Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
- 주간 회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 Notion에 회의 내용을 기록했습니다.
- 로그인이 필요한 페이지를 클릭할 시 로그인 페이지로 이동
- 이메일 인증 번호 확인
- 닉네임 중복 검사
- 회원가입 시 자동으로 로그인
- 유저정보를 recoil-persist를 이용해 localstorge에 저장
- accessToken을 쿠키에 세팅
이메일 회원가입 |
---|
- 카카오 API를 통한 회원가입
- 카카오 프로필 이미지를 기본 이미지로 설정 (수정 가능)
- 닉네임 중복 검사
- 회원가입 시 자동으로 로그인
- 유저정보를 recoil-persist를 이용해 localstorge에 저장
- accessToken을 쿠키에 세팅
카카오 회원가입 |
---|
- 달력을 통해 여행일정 등록
- 카카오맵 api를 이용해 키워드로 실시간 장소 검색 가능
- 등록한 장소 사이의 거리들을 custom hook을 이용해 계산
- 날짜별로 일정 등록 후 장소마다 사진과 별점을 설정 가능
- 여행 장소를 카카오 지도에 line으로 표시하여 직관적으로 일정을 알 수 있게 디자인
- 여행 tag 선택 가능
여행일정 등록 |
---|
- 날짜별 여행장소의 첫번째 이미지들을 슬라이드 형식으로 디자인
이미지 슬라이드 |
---|
- 여행일정을 공유할 수 있는 링크 복사 기능 가능
- 카카오 지도에 장소별 marker와 line을 그려 유저가 직관적으로 파악할 수 있게 디자인
- 장소별로 거리를 km로 표시
- 장소 클릭시 카카오맵 상세페이지 이동, 한번 더 클릭 시 상세정보 확인 가능
- 자신이 등록한 게시글일 경우 수정하기, 삭제하기 버튼 표시
여행일정 상세 |
---|
- 여행일정 수정
- 날짜나 장소 등 수정이 가능
여행일정 수정 |
---|
- 여행일정에 하트를 눌러 좋아요 표시 가능
- 게시글 상세 화면의 마음에 드는 장소를 스크랩 가능
게시글 좋아요, 장소 스크랩 |
---|
- 게시글에 댓글 등록, 수정, 삭제가 가능
- 대댓글 등록, 수정, 삭제 가능
댓글 |
---|
- 마이페이지에서 내가 등록한 게시글, 좋아요 누른 게시글, 스크랩한 장소, 내가 쓴 댓글들을 조회
- 게시글 수정 및 삭제 가능
- 스크랩한 장소와 좋아요 누른 게시글들을 하나씩 선택하거나 전체선택하여 일괄 삭제 가능
- 내가 쓴 댓글들은 클릭 후 게시글로 이동하여 하나씩 삭제 가능
마이페이지 조회, 삭제 |
---|
- 마이페이지에서 프로필 편집 가능
- 사진과 닉네임만 수정이 가능
- 닉네임 중복검사
프로필 수정 |
---|
- 장소를 선택하거나 검색하여 여행일정 검색 가능
여행일정 검색 |
---|
- 카카오맵 api를 이용한 실시간 주소 검색 시 디바운싱을 이용한 불필요한 트래픽 감소시키기
- 좋아요 클릭 시 바로 좋아요 갯수 +1 해서 보여주기 (낙관적 UI적용)
- 메인페이지 무한스크롤 적용하기
- 알람 삭제 시 새로고침해야 적용되는 현상 실시간 적용으로 개선하기
- 웹 반응형 작업
이름 | |
---|---|
🍊이다현 |
이 번 프로젝트를 진행하면서 개발도 중요하지만 협업하는 방식도 중요하다는 것을 배웠습니다.
매일 아침마다 디스코드로 만나 스크럼을 할 때에도
서로 감정상하지 않게 얘기하는 것, 서로의 일정을 쉽게 이해할 수 있게 공유하는 것, 문제 사항을 부끄러워하지 않고 물어보는 것 등... 개발자로서의 성장도 물론이지만 같이 소통하고 일하는 법을 배워 "동료"로써 성장했다고도 느꼈습니다. 2023년 한 해 동안 가장 치열하게 살았던 한 달인 것 같습니다. 같이 힘내준 우리 조원들 모두에게 고생했다고 전하고 싶습니다🧡 |
☘️ 고정화 | ... |