- 팀 명 : 걸어볼래
- 프로젝트 명 : 걸어볼래
- 프로젝트 기간 : 2023.04.28 - 2023.05.25
- 한줄 소개 : 바쁘다 바빠 현대 사회 속, 걸으며 생각할 수 있는 여유를 제공하는 산책 기록 서비스
- 팀원 : 허상범(팀장), 김승철(부팀장), 김성수, 박설화, 이재환, 하종승
- 배포 링크 : https://would-you-walk.com/
세상은 점점 빨라지고 있습니다.
유튜브에는 호기심을 자극하는 썸네일이 하루에도 몇십개씩 보이고,
걸어서 20분이면 갈 거리인데도 우리는 시간을 아낀다는 이유로 킥보드를 빌립니다.
SNS에 누가누가 1km를 빨리 달렸나 자랑하는 피드는 많이 보이지만,
천천히 걷다가 우연히 발견한 벽의 낙서나 신기하게 생긴 나무의 사진은 찾아보기 힘듭니다.
저희는 사용자들이 여유롭게 걸으며 생각할 수 있는 시간을 제공하고자 합니다.
이렇게나 빠른 세상에서 걸어볼래의 서비스가 여러분들에게 보다 느리고 소중한 시간이 되기를 바랍니다.
산책을 하며 바라보는 풍경을 사진으로 담고, 떠오른 생각을 기록할 수 있습니다.
그날의 산책을 마치면, 걸은 경로와 남긴 순간들은 모두 자신의 기록 탭에 남게 됩니다.
피드 탭에서는 전체 공개로 설정되어 있는 다른 유저의 기록들도 확인할 수 있습니다.
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 허상범 | 박설화 | 하종승 | 김승철 | 김성수 | 이재환 |
| FE (팀장) | FE | FE | BE (부팀장) | BE | BE |
허상범
-
기능 외
- Vercel 배포 환경 설정/관리
- 회의 진행 및 회의록 작성
- (프로젝트 기획, 데일리 스크럼 등)
- User Flow Chart 작성
- 화면 정의서(UI) 작성
- 프로젝트 주제 기획
- 서비스명 선정
-
기능
- Map 컴포넌트 구현 (현재 위치 주소 표기, 현재위치-시작위치 마커, 경로)
- PWA(Progressive Web Application) 구현
- Router 객체 관리 / 공통 레이아웃 구현
- SCSS 디자인 시스템 작성
- Sprite SVG Icon 컴포넌트 구현
- 랜딩페이지 구현
- 걷기 중 페이지 / 걷기 종료 페이지 구현
- 걷기 기능 구현 (걷기 시작 ~ 종료)
박설화
-
기능 외
- 프로젝트 주제 기획
- 서비스명 선정
- 서비스 매뉴얼 슬라이드 작성
-
기능
- 걷는 중 기록을 남기는 글, 사진 작성 페이지
- 카메라 또는 앨범에 접근하여 사진 첨부하기
- 기록 리스트에서 내가 남긴 전체 기록을 최신순, 월별, 일자별 조회
- 달력 구현
- 기록 상세 페이지 RUD
- 사진 클릭시 원본 크기의 사진 모달 조회
- 공개설정 드롭다운
- date-fns로 한국 시간 구현
- 로딩 중 화면 skeleton css 적용
하종승
-
기능 외
- 프로젝트 아이디어 제안
- 프로젝트 주제 기획
- 서비스명 선정
- PT 영상 편집
- 앱 캐릭터 디자인
-
기능
- 구글 맵 렌더링 및 걸은 경로 그리기 테스트
- 로그인 / 회원가입 / 로그아웃 / 회원탈퇴
- 마이페이지 레이아웃
- 유저 정보 CRUD 구현
- 비밀번호 변경, 비밀번호 찾기 기능 구현
- 헤더, 모달, 드롭다운 컴포넌트 구현
- 피드 페이지 레이아웃, 걸은 기록 READ
- canvas를 이용해 걸은 경로를 그려주는 리액트 훅 구현
- 페이지 이동 및 새로고침 시에 실행되는 Authorization 구현
- 모바일 환경에 맞춘 디자인 (safe-area, status-bar, user-scalable 등)
김승철
-
기능 외
- 프로젝트 주제 기획
- 서비스명 선정
- 테이블 명세서, ERD 다이어그램 작성
- github action을 이용한 CI/CD 파이프라인 설정
- API 계층, 서비스 계층에 대한 슬라이스 테스트 코드 작성
- Spring Rest Docs를 활용한 API 문서화
-
기능
- 웹소켓을 이용한 좌표 전송 기능
- 걷기 중 순간기록 CRUD
- JWT를 이용한 회원 인증 기능
- Refresh Token을 이용한 자동 로그인 기능
- AWS S3를 이용한 이미지 업로드 기능
- 비회원 걷기 기록 관련 API 구현
김성수
-
기능 외
- 프로젝트 주제 기획
- 서비스명 선정
- Route53, EC2를 이용한 프론트 및 백엔드 도메인 설정
- ERD, API명세서, 테이블 명세서 작성
- Spring Rest Docs를 이용한 API문서화
- Github Action을 이용한 CI/CD 파이프라인 구축
- API 계층, 서비스 계층에 대한 슬라이스 테스트 코드 작성
- EC2, RDS연결
- 효율적인 쿼리 로그 조회를 위한 p6spy 적용 및 N+1 문제 해결
-
기능
- 걷기기록 년,월,일별 조회 API구현
- 걷기 기록 CRUD 구현
이재환
-
기능 외
- 프로젝트 주제 기획
- 서비스명 선정
- 테이블 명세서, ERD 다이어그램 작성
- github action을 이용한 CI/CD 파이프라인 설정
- API 계층, 서비스 계층에 대한 슬라이스 테스트 코드 작성
- Spring Rest Docs를 활용한 API 문서화
- AWS IAM 유저설정 및 권한 추가 설정
- 배포 레포지토리 synk fork를 통한 정기적 업데이트
-
기능
- 회원 CRUD
- 회원 임시비밀번호 이메일 전송 기능
- 임시 비밀번호 관련 이메일 템플릿 .html 작성
- 예외 처리
- 프로필, 순간기록 이미지 용량 4MB 제한
- 회원 자동 삭제 기능
- 주제
- PWA -
하종승 - 리액트 쿼리 Infinite Query 활용기 -
박설화 - 리액트 훅으로 재사용하는 구글 맵 만들기 -
허상범 - 멤버쉽 -
이재환 - CI/CD파이프라인 및 도메인연결 -
김성수 - 웹소켓 -
김승철
- PWA -
main: 서비스 운영 브랜치입니다.fe-dev: 프론트 개발 환경(CI) 브랜치. 이슈 또는 기능 단위로 작업했던 내용을 합치고 검토합니다.be-dev: 백엔드 개발 환경(CI) 브랜치. 이슈 또는 기능 단위로 작업했던 내용을 합치고 검토합니다.feat: FE, BE 세부 작업 브랜치입니다.
{이슈넘버}-{팀}-{태그}-{브랜치명}
ex) 171-be-chore-개발환경설정
| Tag | Title |
|---|---|
Feat |
새로운 기능 추가 |
Fix |
버그 수정 |
Docs |
문서 수정 |
Formatting |
세미콜론 누락 등. 코드 자체에는 변경이 없는 경우 |
Refactor |
코드 리팩토링 |
Chore |
패키지 매니저 수정 및 기타 수정. ex) .gitignore |
Design |
styled-components 등 UI 디자인 수정 |
Rename |
파일 또는 폴더 명을 수정하거나 옮기는 작업만 수행한 경우 |
Remove |
파일을 수정하는 작업만 수행한 경우 |
Comment |
필요한 주석 추가 및 변경 |
Setting |
기본 세팅 변경의 경우(ESLint 등) |
Test |
테스트 코드, 리팩토링 테스트 코드 추가 |
!HOTFIX |
급하게 치명적인 버그를 고치는 경우 |
!BREAKING CHANGE |
API 변경을 크게 한 경우 |