Skip to content

Conversation

@cccwon2
Copy link
Collaborator

@cccwon2 cccwon2 commented Nov 13, 2024

배포 사이트

https://next-panda-market.vercel.app

기본 요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • Next.js를 사용합니다
  • api 요청에 TanStack React Query를 활용해 주세요.
  • 모든 POST, PUT 요청에는 엑세스 토큰이 필요합니다.

체크리스트 [기본]

중고마켓

  • '상품 등록하기' 버튼을 누르면 "/additem" 로 이동합니다.
  • 각 상품 클릭 시 상품 상세 페이지로 이동합니다.
  • 상품 상세 페이지 주소는 "/items/{productId}" 입니다.

상품 상세

  • 내가 등록한 상품일 경우 상품 수정, 삭제가 가능합니다
  • 문의하기 input창에 값을 입력 후 '등록' 버튼을 누르면 댓글이 등록됩니다.
  • 내가 등록한 댓글은 수정, 삭제가 가능합니다.

상품 등록

  • 이미지를 제외하고 input 에 모든 값을 입력하면 '등록' 버튼이 활성화 됩니다.
  • 활성화된 '등록' 버튼을 누르면 상품 등록이 완료됩니다.
  • 등록이 완료되면 해당 상품 상세 페이지로 이동합니다.

자유게시판

  • '글쓰기' 버튼을 누르면 "/addArticle" 로 이동합니다.
  • 각 게시글 클릭 시 게시글 상세 페이지로 이동합니다.
  • 게시글 상세 페이지 주소는 "/community/{articleId}" 입니다.

게시글 상세

  • 내가 등록한 게시글일 경우 상품 수정, 삭제가 가능합니다
  • 댓글달기 input창에 값을 입력 후 '등록' 버튼을 누르면 댓글이 등록됩니다.
  • 내가 등록한 댓글은 수정, 삭제가 가능합니다.

게시글 등록

  • 이미지를 제외하고 input 에 모든 값을 입력하면 '등록' 버튼이 활성화 됩니다.
  • 활성화된 '등록' 버튼을 누르면 게시글 등록이 완료됩니다.
  • 등록이 완료되면 해당 게시글 상세 페이지로 이동합니다.

체크리스트 [심화]

  • api 요청에 TanStack React Query를 활용해 주세요.

주요 변경사항

  • mission 11 피드백 반영

스크린샷

회원가입 홈(로그인한 유저)
SignUp Home
상품 및 문의 등록 게시글 및 댓글 등록
Product Detail Article Detail

멘토에게

  • 이번에도 잘 부탁드립니다!

@cccwon2 cccwon2 requested a review from dongqui November 13, 2024 09:04
@cccwon2 cccwon2 self-assigned this Nov 13, 2024
@cccwon2 cccwon2 added the 순한맛🐑 마음이 많이 여립니다.. label Nov 13, 2024
@cccwon2 cccwon2 changed the title Next 김원 [김원] Sprint 12 Nov 13, 2024
@cccwon2 cccwon2 assigned dongqui and unassigned cccwon2 Nov 13, 2024
Copy link
Collaborator

@dongqui dongqui left a comment

Choose a reason for hiding this comment

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

원님 고생 많으셨습니다 :)

기능 구현 자체는 이제 너무 잘하시고, 전반적으로 상태 범위를 줄이고, 컴포넌트화를 조금만 더 해보시면 더욱 좋을 거 같습니다!! 👍

const { pathname } = request.nextUrl;

// 인증이 필요한 페이지 목록 (비공개 페이지)
const privatePages = ["/addArticle", "/addItem"];
Copy link
Collaborator

Choose a reason for hiding this comment

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

미들웨어로 인가를 처리하셨군요 👍

};

// 드롭다운 외부 클릭 처리
useEffect(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

드랍다운을 컴포넌트화 하고 해당 로직을 넣으면 좀 더 깔끔할 거 같아요!

setIsEditing(false);
} catch (error) {
console.error("댓글 수정 실패:", error);
setAlertMessage("댓글 수정에 실패했습니다.");
Copy link
Collaborator

Choose a reason for hiding this comment

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

alert상태를 하나로 관리해보는 것은 어떨까요!? 🤔

if (isLoading) return;
// Intersection Observer 설정
const observer = useRef<IntersectionObserver | null>(null);
const lastCommentRef = useCallback(
Copy link
Collaborator

Choose a reason for hiding this comment

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

observer disconnect할 수 있는 ㅂ부분이 필요하겠네요!


return (
<>
<div className="py-6 relative">
Copy link
Collaborator

Choose a reason for hiding this comment

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

컴포넌화하면 jsx부분도 훨씬 깔끔해질 거 같습니다!

import { ArticleSchema } from "@/zod/articleSchema";
import { ArticleSortOption } from "@/types/article";

export const useArticle = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

안티패턴으로 보입니다..!

모든 훅을 한 곳에 모으다보니 사용하지 않은 곳에서도 훅이 실행되죠! 가령 AllArticleSection에서는 useArticles만 필요하지만 아래 모든 훅들이 다 들어가게 됩니다..!

const { data: articleDetail } = useArticleDetail(articleId);

// 초기 좋아요 상태 설정
useEffect(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

mutation 내부에서 처리하시는 게 좀 더 깔끔할 거 같아요

}, [productDetail?.images]);

// 드롭다운 외부 클릭 처리
useEffect(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

계속 반복 되는군요 🤣 컴포넌트화를 해보죠!

@dongqui dongqui merged commit 245cd4a into codeit-bootcamp-frontend:Next-김원 Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

순한맛🐑 마음이 많이 여립니다..

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants