Skip to content

[조원정] sprint8#130

Merged
gyulrangdev merged 47 commits intocodeit-sprint-fullstack:next-조원정from
jwj2087:next-조원정-sprint8
Oct 1, 2025

Hidden character warning

The head ref may contain hidden characters: "next-\uc870\uc6d0\uc815-sprint8"
Merged

[조원정] sprint8#130
gyulrangdev merged 47 commits intocodeit-sprint-fullstack:next-조원정from
jwj2087:next-조원정-sprint8

Conversation

@jwj2087
Copy link
Collaborator

@jwj2087 jwj2087 commented Sep 27, 2025

요구사항

기본

  • 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로 마이그레이션 해주세요.

주요 변경사항

  • next.js로 자유게시판 페이지 구현

멘토에게

  • 스프린트7 진행이 덜 되어서 local json server를 이용해서 진행하였습니다. " npx json-server db.json --port 4000 " 명령어를 통해서 확인 부탁드립니다
  • 백엔드는 구현이 완료되는대로 변경할 예정입니다.

@jwj2087 jwj2087 requested review from Irelander and gyulrangdev and removed request for Irelander September 27, 2025 16:48
Copy link
Collaborator

@gyulrangdev gyulrangdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 구조화된 컴포넌트 작성 정말 좋습니다!
Next.js 앱 라우터를 사용할 경우, app 하위에서는 파일 구조 기반으로 라우팅이 이루어지기 때문에, 컴포넌트 폴더를 src 하위로 이동하면 더욱 관리가 편리할 것 같습니다.
예를 들어, app 폴더에서는 라우팅 역할만 담당하고, 필요한 컴포넌트들은 src/components 등 외부 폴더에서 export하여 사용하는 방식으로 구조를 변경해보는 것은 어떨까요?

이번 과제를 통해 Next.js 라는 프레임워크와 React에 대해 한 걸음 가까워지고 SSR과 CSR의 차이점에 대해 경험해보는 기회가 되셨기를 바래요~

고생 많으셨습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번 커밋에 node_modules가 포함되어 변경사항이 매우 많아졌네요.
일반적으로 node_modules는 폴더를 .gitignore에 추가해서 git에 올리지 않으니, 참고해주시면 좋을 것 같습니다.

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React, { useState } from "react";

const TanstackProvider = ({ children }) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Provider 컴포넌트 분리하신 점 좋습니다 👍

mutate: mutateAddComment,
isPending,
error,
} = useMutation({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tanstack query 사용하셔서 서버 상태 관리하신 점이 좋습니다 👍

@gyulrangdev gyulrangdev merged commit 215013d into codeit-sprint-fullstack:next-조원정 Oct 1, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants