[박세정] sprint8

[celina823]

※ 무한스크롤 구현안됨 + 디자인 수정중으로, 완료 시 이 문장 삭제하겠습니다 !
→디자인 수정은 완료하였으나 무한스크롤 구현이 안되어서 전체 게시글 데이터가 한번에 다 보이게 해두었습니다.ㅠ
※ render배포 시 계속 오류가 나서 해결되는대로 배포링크 공유드리겠습니다.
→ npm run dev시에는 로컬에서 페이지가 잘 보이는데, build에서 수많은 오류가 나서 배포링크를 못올렸습니다.

배포 성공했습니다!
배포링크: https://five-sprint-mission-fe.onrender.com

요구사항

기본 요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• Next.js를 사용해 진행합니다.

자유 게시판 페이지

• 게시글 목록에서 드롭다운을 사용하여 "최신 순"으로 정렬할 수 있도록 합니다.
• 본인이 이전 미션에서 생성한 게시글 목록 조회 API를 활용해 GET 메서드로 데이터를 가져옵니다.
• 게시글 제목에 검색어가 일부 포함되면 해당 게시글을 검색할 수 있도록 합니다.
• 이미지는 디폴트 이미지로 프론트엔드에서 처리해 주세요.
• 게시글 닉네임 및 좋아요 개수 역시 임의값으로 프론트엔드에서 처리해주세요.
  → 백엔드에서 임의 숫자 집어넣음. 새로 게시글 생성 시 기본값 0
• 베스트 게시글은 최신순 3개 게시글을 요청으로 데이터를 가져와 구현해주세요.
• 자유게시판 페이지에서 특정 게시글을 클릭하면 해당 게시물의 상세 페이지로 이동합니다.

게시글 등록 & 수정 페이지

• 각 input 필드에 정확한 placeholder 값을 입력합니다.
• 모든 input 필드에 값을 입력하면 '등록' 버튼이 활성화됩니다.
• 본인이 이전 미션에서 생성한 게시글 생성 API를 활용해 POST 메서드로 게시글을 등록합니다.
• '등록' 버튼을 누르면 해당 게시물 상세 페이지로 이동합니다.
• 게시글 수정 페이지 UI는 게시글 등록 페이지와 동일합니다.
• 본인이 이전 미션에서 생성한 게시글 상세 API의 PATCH 메소드를 사용하여 게시물을 수정합니다.

게시글 상세 페이지

• 본인이 이전 미션에서 생성한 게시글 상세 API의 GET 메소드를 사용하여 데이터를 가져옵니다.
• 본인이 이전 미션에서 생성한 게시글 상세 API의 DELETE 메소드를 사용하여 게시물을 삭제합니다.
• 댓글 input에 값을 입력하면 '등록' 버튼이 활성화됩니다.
• 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 POST 메소드로 댓글을 등록합니다.
• 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 PATCH 메소드로 댓글을 수정합니다.
• 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 DELETE 메소드로 댓글을 삭제합니다.

심화 요구사항

공통

• 디자인 시안에 따라 반응형 디자인을 구현합니다.
• (생략 가능) 원한다면 지금까지 진행한 모든 React 코드를 Next.js로 마이그레이션 해주세요.
  마이그레이션에 상당한 시간이 소요될 수 있으므로 진행을 권장하지 않습니다.

주요 변경사항

스크린샷

멘토에게

• 지금까지 만든 모든 판다마켓을 모두 마이그레이션 하기에는 엄두가 안납니다.ㅠㅠ 마이그레이션 팁이 있다면 궁금합니다..
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dennis2311]

잘 하셨습니다.

• 주석! 주석을 적극적으로 활용해 주세요! JSDoc 형식을 활용할 것을 강력히 권장합니다.
• 타입 정의, 데이터 fetching, 데이터 정합성 관리 등, 각 기능별로 그룹을 나누고 모듈화하는 힘을 길러주세요.
  • freeboard.tsx 파일에서 해당 필요성이 잘 드러나고 있는데, CustomDropdown을 import 하여 사용한 것을 제외하면 데이터 조회, 타입 정의, 날짜 표시 방식 변경을 위한 util 함수 등 다른 곳에서 재사용 될 수 있거나, 재사용 되지 않더라도 개념적으로 분리되는 것이 적절한 내용들이 많이 포함되어 있어 파일의 크기가 커지고 가독성이 떨어집니다.
  • 가능한 하나의 파일은 하나의 기능을 담당하도록 하여, 핵심적인 부분만 스스로 처리하고 다른 기능들은 다른 파일들에 '외주'를 맡길 수 있도록 모듈화를 연습해보시면 좋을 것 같습니다.