Skip to content

[박수훈] sprint7#78

Open
mdeeno wants to merge 22 commits intocodeit-sprint-fullstack:react-박수훈from
mdeeno:react-박수훈-sprint7

Hidden character warning

The head ref may contain hidden characters: "react-\ubc15\uc218\ud6c8-sprint7"
Open

[박수훈] sprint7#78
mdeeno wants to merge 22 commits intocodeit-sprint-fullstack:react-박수훈from
mdeeno:react-박수훈-sprint7

Conversation

@mdeeno
Copy link
Collaborator

@mdeeno mdeeno commented Feb 21, 2026

1. 스프린트 미션 요구사항

기본 요구사항

공통

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

2. 주요 변경사항

  • React -> NextJS로 마이그레이션 완료

3. 멘토님에게 남길 메시지

  • 모르는 부분이 많아 AI 활용해서 많은 부분을 클론코딩했습니다.
  • NextJS 터보팩? 에러로 매번 Next를 지우고 pnpm dev를 했습니다. 이에 별도 해결책이 있는지 궁급합니다.
  • 뭔가 연결연결 하다보니 오류가 발생했는데 해당 부분을 해결을 못했습니다. 현재 자유게시판에 게시글을 만들고 해당 게시글에 댓글을 달면 댓글이 아래 생성되나, 새로고침 혹은 뒤로갔다가 다시 해당 게시글을 들어가면 댓글이 사라지는 오류가 있습니다.. 수정하면 수정할 수록 더 깊은 오류를 만나서 혹시 어떤 부분을 수정하면 될지 여쭙습니다..

@mdeeno mdeeno self-assigned this Feb 21, 2026
@mdeeno mdeeno added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 진행중 아직 스프린트 미션 제출일이 아닙니다. 새로 커밋된 내용에 대해 코드리뷰 해주세요! (2주 이상의 스프린트 미션 중간점검 PR 제출시 사용합니다.) labels Feb 21, 2026
@mdeeno mdeeno changed the title 박수훈 sprint7 [박수훈] sprint7 Feb 21, 2026
@mdeeno mdeeno requested a review from wseungjin February 22, 2026 06:38
@mdeeno mdeeno added 최종제출 스프린트 미션 최종 제출 PR입니다. 코드리뷰 및 평가해주세요! and removed 진행중 아직 스프린트 미션 제출일이 아닙니다. 새로 커밋된 내용에 대해 코드리뷰 해주세요! (2주 이상의 스프린트 미션 중간점검 PR 제출시 사용합니다.) labels Feb 22, 2026
Copy link
Collaborator

@wseungjin wseungjin left a comment

Choose a reason for hiding this comment

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

수고하셨습니다~

const response = await fetch(`${BASE_URL}/products?${query}`);

if (!response.ok) {
throw new Error(`데이터 로딩 실패: ${response.status}`);
Copy link
Collaborator

Choose a reason for hiding this comment

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

실패해서 에러 던지면 서버에서 html을 send해줄 수 있나요?
예외처리가 필요하지 않을까요?

// (구 signup.html) 회원가입 화면 ('/signup')

import Link from 'next/link';
import '../../../styles/Login.css';
Copy link
Collaborator

Choose a reason for hiding this comment

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

alias나 ../../../를 지양하면 좋을거 같네요

const [content, setContent] = useState('');

useEffect(() => {
const loadArticle = async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

훅으로 빼는건 어떨까요?
로딩, 에러를 추가해보는건 어떨까요?

서버컴포넌트로 뺼 여지도 좀 있는거 같은데 그런 부분도 고민해보세요

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5001/api';

// 상대 시간 변환 함수
const getRelativeTime = (dateString) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런건 시간 utils로 빼도 좋을거 같아요

createComment,
updateComment,
deleteComment,
} from '../../../../../api/api';
Copy link
Collaborator

Choose a reason for hiding this comment

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

왜 api폴더 안에 api파일이 있는걸까요?
index로도 충분해보입니다.


// 1. 유효성 검사 규칙 (심화 요구사항 반영)
// - 상품명: 10자 이내
const validateName = (val) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

val보다는 그냥 name이 들어오면 좋을거 같아요

!priceInput.error;

// 5. 제출 핸들러
const handleSubmit = async (e) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

form 관련 로직만 전부 커스텀 훅으로 뺴보는건 어떨까요?

import styles from '../App.module.css';

const BestProductList = () => {
const [bestProducts, setBestProducts] = useState([]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

로딩, 에러 상태가 들어가면 좋을거 같아요 + 커스텀 훅도요

const [totalCount, setTotalCount] = useState(0);
const [order, setOrder] = useState('recent');
const [keyword, setKeyword] = useState('');
const [page, setPage] = useState(1);
Copy link
Collaborator

Choose a reason for hiding this comment

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

page말고 index 써주시고 0부터 해주시면 더 좋을거 같아요


const ProductList = () => {
const [products, setProducts] = useState([]);
const [totalCount, setTotalCount] = useState(0);
Copy link
Collaborator

Choose a reason for hiding this comment

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

totalCount가 따로 필요한가요?
products.length를 사용하면 안되나요?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종제출 스프린트 미션 최종 제출 PR입니다. 코드리뷰 및 평가해주세요!

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants