페이지별 중간점검 사항
메인 페이지
구현 완료
- 최근 등록한 책 4개 최근 스터디가 등록된 책 4개를 보여줍니다.
- 책을 클릭하면 책 상세 페이지로 이동
책 상세 페이지
URI : /book/[id]
구현 완료
- url id 파라미터로 책정보 와 해당 책의 스터디 정보 요청
- 스터디 정보를 렌더링
- 무한스크롤로 스터디 정보 로딩
- 스터디 카드 클릭시 스터디 모집 정보 모달 렌더링
- 스터디 모집 정보 모달의 공유버튼 클릭시, 스터디 상세 정보 페이지 URL을 클립모드로 복사
구현중
- 스터디 개설하기 버튼 클릭시 스터디 개설 페이지로 이동
- 만약 로그인 안되어있을시 로그인 모달 띄우기
- 스터디 상세 모달 클릭후 참여하기 버튼 클릭시 스터디 참여 api 호출후 스낵바로 스터디 참여 여부 출력
- 만약 로그인이 안되어있다면 로그인 모달 띄우기
검색 페이지
완료사항
- Topbar에 책 이름을 검색하면 검색 페이지로 이동
- url에 담긴 정보로 네이버 북 API 조회 후 응답 데이터를 북카드로 렌더링
- 북카드 클릭 시 우리DB에 책 있는지 조회
- 있으면 책 상세 페이지로 이동
- 우리 DB에 없으면
- 비로그인이면 책 등록은 회원 기능이니 로그인 유도
- 로그인이면 책 등록하고 책 상세 페이지로 이동
예정 사항
- 로딩에 따른 북카드 스켈레톤 추가
유저 프로필 페이지
구현완료
URI: /userProfile/[id]
이 페이지에 접속하려면 로그인이 필요합니다. (FAKE 로그인 권장)
로그인을 안할시 Skeleton이 영원히 뜹니다.
/userProfile/7 ⇒ 7번 유저가 페이크 유저입니다.
로그인한 본인 프로필 페이지여야 프로필 수정 버튼이 뜹니다.
유저가 개설한 스터디, 참여한 스터디, 완료한 스터디도 띄워줍니다.
⇒ 구현했으나 아직 dev에 반영안되있어서 dummy가 뜹니다.
유저 프로필 수정 페이지
구현완료
URI: /userProfileEdit
유저가 프로필 이미지와 프로필 이름을 수정할 수 있습니다.
수정하기를 누르면 유저 프로필 페이지 화면으로 넘어갑니다.
스터디 상세 페이지
URI: /study/[id]
구현중
- 스터디 상세 정보를 가져와서 게시판 탭 별로 게시글을 무한스크롤로 보여줍니다.
- 게시글을 클릭하면 게시글 상세 페이지로 이동합니다.
- 신청자 목록 보기를 클릭하면 신청한 유저 리스트를 보여줍니다. (승락/거절 기능)
- 스터디 정보 수정을 클릭하면 스터디 정보 수정 페이지로 이동합니다.
- 글 작성 버튼을 클릭하면 게시글 작성 페이지로 이동합니다.
스터디 개설 페이지
URI : /studyOpen/[bookId]
- 구현 완료 페이지 UI 구현 : text inputs, image uploader input validation 개설하기 버튼 클릭 시 createStudy api 호출
- 구현 필요 userContext를 사용하여 현재 로그인한 유저의 토큰으로 스터디 개설 페이지 접속 시 userContext에 현재 로그인한 유저가 없다면 접속 불가 (리다이렉트 또는 로그인 모달 띄우기)
- 구현 예정 스켈레톤 반응형
스터디 수정 페이지
- 미구현
- 스터디 개설 페이지를 재사용하여 구현 예정
게시글 상세 페이지
URI: /post/[id]
- 구현중
댓글 목록을 가져와서 무한스크롤
댓글 인풋으로 댓글을 작성합니다.
게시물 생성 페이지
URI: /postCreate
게시물 생성할 때 쓸 페이지 입니다.
피그마
질문사항
- axios 전역 error를 보통 어떻게 처리해야 할까요?
- 현재는 axios error에 대해 try-catch
피드백
- 첫 페이지 4개만 보여주는게 매력이 떨어진다 (어떤 스터디가 있는지 탐색하는 유저에겐 불편함)
⇒ carousel로 좀더 유저가 볼 수 있으면 좋겠다
- 스터디가 목적인데
최근 추가된 책은 유저는 별로 궁금해하지 않는다
- 뒤로가기 시 요청을 다시 보내는데 요청을 줄일 방법이 추가되면 좋겠다
- 책1 페이지 ⇒ 책2페이지 ⇒ 뒤로가기 하면 책1에 대한 정보 캐싱
⇒ 전역 스토어가 필요한데 react-query 같은거 도입하면 편함
- 클릭이 가능한 요소들에 대해서 hover css 등 티가 나게 추가하면 좋다
- 스터디를 전체로 받고
전체 보기, 진행중 스터디 보기, 모집중 스터디 보기등 필터링 추가하면 좋다
- 모집 완료 스터디도
참여하기가 보인다
- 검색 페이지 책 제목이 페이지 이동마다 들쑥날쑥하다
- 일반적으로 url은 카멜케이스말고 케밥케이스를 많이 사용한다
- Next.js 실무에서 pages 폴더는 라우팅 용으로 쓰고 로직은 src/pages 폴더를 만들어 구분한다.
- axios error try-catch하는거 일반적으로 맞다
- axios Interceptor error 처리는 일반적인 error 401, 403같은거 처리
- api에 토큰을 인자로 넘기는 형태는 사용하는쪽에서 토큰을 넘겨야함을 의미한다
⇒ 토큰 사용 api들을 따로 분리하고 감싸서 api에서 토큰을 읽어오는쪽을 추천한다