[김성은] sprint8

[seongEun95]

요구사항

기본 요구사항

공통

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

자유 게시판 페이지

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

게시글 등록 & 수정 페이지

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

게시글 상세 페이지

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

심화 요구사항

공통

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

기능테스트

default.mp4

반응형테스트

1.mp4

로컬에서 벡엔드를 실행하여 진행했습니다.

사용한 api는 아래와 같습니다

게시글 (Articles) 라우트

• GET /articles - 게시글 목록 조회
• GET /best-articles - 인기 게시글 3개 조회
• GET /articles/:id - 게시글 상세 조회
• POST /articles - 게시글 등록
• PATCH /articles/:id - 게시글 수정
• DELETE /articles/:id - 게시글 삭제

댓글 (Comments) 라우트

• GET /articles/:articleId/comments - 게시글 댓글 목록 조회
• POST /articles/:articleId/comments - 게시글 댓글 등록
• PATCH /articles/:articleId/comments/:commentId - 게시글 댓글 수정
• DELETE /articles/:articleId/comments/:commentId - 게시글 댓글 삭제

[seongEun95]

https://github.com/codeit-sprint-fullstack/8-sprint-mission-be/tree/express-%EA%B9%80%EC%84%B1%EC%9D%80

벡엔드 스프린트 했던 주소입니다!

프론트엔드 루트 위치에 API_USAGE.md라는 파일에 벡엔드 정보와 관련하여 넣어두었습니다!

[Irelander]

전반적으로 코드 품질이 정말 훌륭합니다, 역시 👍 👍

TypeScript, React Query, Atomic Design Pattern을 사용한 점이 너무 좋았습니다.
특히 컴포넌트를 계층별로 분리해서 재사용성과 유지보수성을 높인 점, React Query로 서버 상태를 관리하며 자동 캐싱과 재요청을 처리하는 점, API 레이어를 완벽하게 분리한 점, 커스텀 훅으로 비즈니스 로직을 분리한 점이 눈에 띄었어요! 러닝 커브가 확실히 빠르셔서 짧은기간 습득하기 어려웠을텐데 너무 훌륭하게 해주고 계신거 같아요. JSDoc 주석습관도 칭찬 드립니다 :)

다만 몇 가지 개선하면 더 좋을 부분이 있어요. TypeScript any 타입 대신 정확한 타입을 정의하고, 로딩과 에러 상태를 Skeleton UI와 명확한 에러 메시지로 개선하면 좋겠어요. 사용자 피드백은 console.log 대신 Toast 메시지를 사용하고, 입력 검증에 trim과 빈 값 체크를 추가한다면 더 좋을꺼 같아요!

이번 스프린트도 고생많으셨어요 !