Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[장수경] sprint10 #310

Conversation

Sookyeong02
Copy link
Collaborator

@Sookyeong02 Sookyeong02 commented Nov 30, 2024

요구사항

기본

상품 등록 페이지

  • [] 상품 등록 페이지 주소는 "/addboard" 입니다.
  • [] 게시판 이미지는 최대 한개 업로드가 가능합니다.
  • [] 각 input의 placeholder 값을 정확히 입력해주세요.
  • [] 이미지를 제외하고 input 에 모든 값을 입력하면 '등록' 버튼이 활성화 됩니다.

상품 상세 페이지

  • [] 상품 상세 페이지 주소는 "/board/{id}" 입니다.
  • [] 댓글 input 값을 입력하면 '등록' 버튼이 활성화 됩니다.
  • [] 활성화된 '등록' 버튼을 누르면 댓글이 등록됩니다.

심화

  • [] 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
  • [] '등록' 버튼을 누르면 게시물 상세 페이지로 이동합니다.

주요 변경사항

스크린샷

image

멘토에게

  • Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 서버 오류가 발생했는데, 해결이 안되고 있습니다.
  • 서버 에러로 인해 작성한 코드 중 HomePage만 확인 가능한 상태입니다.
  • 일부에만 css 적용한 상태입니다.
  • 계속 수정해 나가겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Sookyeong02 Sookyeong02 added the 미완성🫠 죄송합니다.. label Nov 30, 2024
@Sookyeong02 Sookyeong02 requested a review from baeggmin November 30, 2024 13:26
Copy link
Collaborator

@baeggmin baeggmin left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 서버 오류가 발생했는데, 해결이 안되고 있습니다.
-> 요건 어디서 발생하는지 알 수 있을까요? dm 주시면 같이 확인해드리도록 하겠습니당

const [loading, setLoading] = useState<boolean>(true); // 로딩 상태 추가

// URL에서 가져온 id 값은 문자열로 되어 있을 수 있기 때문에, 이를 Number()를 사용하여 숫자로 변환
const articleId = Number(id);
Copy link
Collaborator

Choose a reason for hiding this comment

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

router.query 로 id 를 가져오는 부분은 잘 구현해주셨습니다! 👍
Number 로 변환하는 과정도 훌륭한데, id가 존재하지 않거나 변환이 실패했을 때에도 대비할 수 있게 로직을 추가해주시면 더 좋을 것 같아요.

const articleId = id && !isNaN(Number(id)) ? Number(id) : null;

useEffect(() => {
  if (!articleId) {
    setError("유효하지 않은 게시글 ID입니다.");
    setLoading(false);
    return;
  }

  // 데이터 로딩 로직...
}, [articleId]);

if (error) return <div>에러: {error}</div>;

// id가 없거나 article 데이터가 로드되지 않았다면 null을 반환
if (!id || !article) return null;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 줄은 불필요해 보여요. 기본적으로 loading과 error 상태로 처리되는 상황일 것 같네용?

initialArticles: Article[];
}

const AllArticle = ({ initialArticles }: AllArticlesProps) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

props 로 받아오는 initialArticles과 useState로 관리하는 articles 가 동일한 데이터로 보이는데요, 꼭 두 개의 state로 관리할 필요가 있을까요? 하나의 state 로도 통일할 수 있을 것 같습니다!

};

//
const handleSearch = (searchKeyword: string) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

searchParam 을 이용한 검색이 페이지 기반 라우트에서도 잘 동작하는군용?
로직 잘 작성해주셨습니다👏

Copy link
Collaborator

Choose a reason for hiding this comment

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

한 파일 당 하나의 컴포넌트만 존재하게 수정해주세용~
그리고 custom hook 도 별도의 파일로 분리해주시는게 좋습니다!

@baeggmin baeggmin merged commit 2a28fdf into codeit-bootcamp-frontend:Next-장수경 Dec 3, 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