[Main-Project] Day 4 - 구현 기능 리스트화, P&R, 개발 환경 세팅, 멘토링, sprint

📗 Pre-Project, Day 4

• 구현 기능 리스트화하기
• P&R
• 멘토링
• 사용자 요구사항 정의서 구체화

📗 구현 기능 리스트화

- 메인페이지
💅 레이아웃 및 스타일
페이지 로드: get 요청
책 선택하기: 도서 상세 조회 페이지로 이동
책 등록하기: 로그인 정보 확인 후 글작성페이지 or 로그인 페이지로 이동


- 글 작성(책등록) 페이지
💅 레이아웃 및 스타일
책이름 검색 버튼: 도서 조회 API로 드랍다운 제공. 해당하는 도서 클릭시 책 이름, 저자, 출판사 자동완성
거래위치: 현재 등록된 위치로 자동완성
등록기 버튼 : post 요청


- 회원가입페이지
💅 레이아웃 및 스타일
submit: post 회원가입 요청
회원가입 성공 / 실패
약관동의 부분
유효성 검사


- 로그인페이지
💅 레이아웃 및 스타일
submit: post 로그인 요청
로그인 성공 / 실패
보안 인증
- 로그아웃
- 소셜로그인
페이스북
네이버
카카오톡


- 마이페이지
💅 레이아웃 및 스타일
페이지 로드: get 요청 (회원정보 & 찜하기 목록)
예약 목록 탭: get 요청(예약 목록)
찜하기/예약목록 스크롤: get 요청 (추가 데이터)
회원정보 수정버튼: 수정페이지로 이동


- 회원정보 수정페이지
거래위치선택: 예(현재 위치 좌표값 로드) / 아니오(글 작성 불가 알림 메시지 & 빈 값)
수정하기버튼: patch 요청
아바타 수정하기
닉네임 수정하기
주거래 지역 수정하기


- 검색페이지
💅 레이아웃 및 스타일
기본페이지 로드: get 요청 (현재 위치를 기준으로 범위 내 상인 목록)
지도 위에 마커와 지도 아래 상인 목록 렌더링
(도서명으로)검색
기본화면에서 가져온 상인 목록 중에 검색한 도서가 있는 상인만 필터링
지도 위 마커와 지도 아래 도서 목록 렌더링


- 도서 상세 조회 페이지
💅 레이아웃 및 스타일
페이지 로드: get 요청 (해당 글 id로 글 정보 출력)
찜하기 버튼: post 요청
삭제하기버튼: (상인id가 일치할 때만 렌더링됨) delete 요청
대여하기 버튼: 로그인 정보 확인 후 대여하기 페이지 or 로그인 페이지로 이동


- 대여신청 페이지
💅 레이아웃 및 스타일
페이지 로드: 이전 페이지(도서 상세 조회)에서 가져온 책 대여 상태 및 대여기간 데이터를 바탕으로 캘린더 컴포넌트 렌더링 (대여기간 날짜는 회색으로 스타일링 등)
대여신청하기 버튼(*만약 예약하기 버튼으로 진입시 예약 신청 버튼으로): 신청확인 컨펌창 띄운 후 post 요청
상인이름 버튼: 상인정보 페이지로 이동


- 상인정보 페이지
💅 레이아웃 및 스타일
페이지 로드: get 요청 (유저(상인) 데이터 및 글작성(책) 목록 출력)
리뷰 보기 탭: get 요청 (리뷰 내역)
책 목록 / 리뷰 목록 스크롤: 추가 정보 출력
책 클릭 시: 책 상세 조회 페이지로 이동
리뷰 클릭시 : 해당 유저 상인 정보 페이지로 이동


- 대여내역페이지
💅 레이아웃 및 스타일
빌린 책 - 기본
페이지 로드: get 요청(빌린 책 목록)
취소 버튼: patch  요청 (취소 확인 컨펌창 띄운 후 대여 신청 취소)
수령완료 버튼: 대여 신청 후 수령 처리(수령확인 컨펌창 띄움, 누르면 비활성화, 취소 버튼 사라짐)
리뷰남기기 버튼: 빌린 책 반납 후 리뷰 남기기(리뷰 남기면 비활성화) / 리뷰남기기 페이지로 이동


- 리뷰남기기페이지
💅 레이아웃 및 스타일
리뷰등록버튼: post 요청
빌려준 책
페이지 로드: get 요청(빌려준 책 목록)
반납완료 버튼: 빌려준 책 회수 후 반납완료 처리(컨펌 창 띄우기)


- 채팅페이지(나이트메어)
💅 레이아웃 및 스타일


- 알림페이지(나이트메어)
💅 레이아웃 및 스타일

→ 우리가 구현하고자 하는 기능들을 모든 팀원이 이해를 하고, UX를 고려했을 때 누락된 부분은 없는지 확인하기 위해 구현 기능들을 리스트화하는 시간을 가졌다.

📗 개발 환경 세팅 및 파일 구성

→ 차주에 본격적으로 기능 구현에 들어가기 전에 팀원이 모두 모여 개발 환경 세팅을 하는 시간을 가졌다. 혼자 작업하는 것이 아니라 협업이니 개발 환경 세팅에서도 논의하고 결정해야하는 부분들이 많았다.


패키지 설치 검색 사이트

📗 P&R

→ 리스트화 한 기능들에 대해 역할 분담을 하였는데, 당장 백엔드 측에서 API가 완성되기 전까지 틀을 잡고 CSS 작업을 역할 분담을 하였다. 구체적인 마일스톤이 작성되지는 않았지만, 월-화 이틀동안 모든 CSS와 UI를 완성하는 것이 1차 목표이다.

추후에 주요 기능들 구현에 있어서는 페어식으로 진행해보려고 논의중이다.

📗 멘토링

→ 처음으로 멘토님을 뵙고 멘토링하는 시간을 가졌다. 오전에 프론트엔드 측 회의와 백엔드와의 전체 회의를 통해 방향을 못 잡고 있는 부분들이 많았는데 방향성을 잡는데 많은 도움이 되었다.

질문을 통해 얻은 답변에서 우리가 적용할 부분을 체크하고 바로 적용하였다.

📗 멘토링 -> 적용한 부분

⭐️⭐️⭐️⭐️⭐️

• <멘토링 답변>
  우리가 선택한 기술 스택을 사용함으로 얻을 수 있는 장점에 대해 생각해보기
  <적용 부분>
  👉🏻 그런 부분도 정리해보기
  👉🏻 해당 스택을 왜 사용했는지
  
  
• <멘토링 답변>
  개발 환경 세팅 후에 먼저 기능이 잘 작동하는지 확인하고 시작하기
  <적용 부분>
  👉🏻sprint로 개발 및 검토를 하며 효율적인 협업하는 방법을 선택했다. 1주 단위로 할 예정.
• 참고자료 - 애자일 스크럼 이해하기
  
  
• <멘토링 답변>
  타입스크립트 사용하기
  <적용 부분>
  👉🏻 우리 프로젝트의 볼륨을 2-3주 안에 새로운 언어로 할 수 있을까하는 고민이 있었지만, 여러모로 TypeScript를 사용하는 것이 좋을 것 같아 팀원들과 논의 후 도전하기로 하였다.
  개인적으로 TypeScript를 고민 끝에 선택한 이유는 크게 2가지이다.
  먼저, JavaScript는 Dynamic Typing이 가능하지만 우리와 같이 프로젝트와 코드를 길게 짤 때는, 이러한 자바스크립트의 자유도와 유연성은 해가 될 수 있다고 판단하였고, 타입을 엄격하게 검사해주는 TypeScript가 도움이 될 것이라 생각이 들었다.
  다음으로, 취업을 희망하고자 하는 회사들이 모두 TypeScript를 사용하고 있었다. 본인이 일하고자하는 회사에서 사용하는 언어에 대한 이해는 필수라는 생각이 들었다.
  
  
• <멘토링 답변>
  프로젝트 기간동안 개인이 느낀 것이 중요하다
  <적용 부분>
  👉🏻 프로젝트 기간 동안 느낀 것들, 기술을 쓰며 배운 것, 팀원들과 협업한 내용, 좋은 결과를 위해 노력한 것들 기록하기
  
  
• <멘토링 답변>
  반응형으로 웹앱 만들어라
  <적용 부분>
  👉🏻 우리 팀원은 반응형까지 고려하여 데스크탑 버전도 만들기로 하였으며, 이에 대한 피그마도 바로 작업에 들어가기로 하였다. 추후에 시간이 남으면 자연스럽게 UX를 고려하여 테블릿 버전도 작업해볼 예정이다.
  
  
• <멘토링 답변>
  일관성 있는 코드를 위해 코딩 컨벤션을 미리 정해둬라
  <적용 부분>
  👉🏻 import 순서와 같은 코딩 컨벤션을 차일에 정하기로 하였다.
  
  
• <멘토링 답변>
  사용자 요구사항 정의서 구체화해라
  <적용 부분>
  👉🏻 백엔드와의 원활한 소통을 위해 사용자 요구사항 정의서 작성 또한 구체적으로 작성하기로 하였다.