[김성종] Sprint9

[KimLuka]

요구사항

기본

• 자유 게시판 페이지 주소는 “/boards” 입니다.
• [] 전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
• 게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
• [] 게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

• [] 반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
• [] next의 prefetch 기능을 사용해봅니다.

주요 변경사항

• 베스트 게시글 외 일반 게시글 api 연동
• pc view 기준 default css 완성

스크린샷

멘토에게

• 베스트 게시글은 좋아요 수를 기준으로 걸러 보여줘야 할 거 같은데, 해당 부분 구현 방법이 궁금합니다! 단순히 좋아요 순으로 정렬 후 3개만 잘라서 보여주면 될까요?
• 반응형 css 로 베스트 게시글 숫자 줄여서(?) 보여주는 방법 알고 싶습니다! grid, repeat 등으로 하는 거 같은데 다양하게 적용해봐도 잘 작동되지 않아 여쭙습니다.
• commit 은 잘게 나눠보려 했는데, 중간부터 반영했습니다

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

베스트 게시글은 좋아요 수를 기준으로 걸러 보여줘야 할 거 같은데, 해당 부분 구현 방법이 궁금합니다! 단순히 좋아요 순으로 정렬 후 3개만 잘라서 보여주면 될까요?

• 넵 만약 페이지네이션에 limit 혹은 offset이 있다면 해당 파라메터를 사용하여 서버로부터 잘라서 가져올 수도 있을 것 같아요 ! 😊 말씀주신대로 정렬은 되어야 할 것으로 보여요.
• 요구사항에 대한 자세한 문의는 운영 QnA로 문의주시면 감사드리겠습니다 !

[kiJu2]

반응형 css 로 베스트 게시글 숫자 줄여서(?) 보여주는 방법 알고 싶습니다! grid, repeat 등으로 하는 거 같은데 다양하게 적용해봐도 잘 작동되지 않아 여쭙습니다.

• "베스트 게시글 숫자 줄여서"라는게 혹시 반응형에 따른 아이템 수를 의미하는게 맞으실까요? 만약 맞다면 출력할 때 말씀 주신 것처럼 grid의 아이템 수를 조절할 수 있을 것 같아요 !

[kiJu2]

commit 은 잘게 나눠보려 했는데, 중간부터 반영했습니다

• 넵넵 ! 👍😊

[kiJu2]

크으 환경변수 지정 잘 하셨습니다 👍👍

[kiJu2]

form은 분리하면 어떨까요 ?

현재 해당 컴포넌트는 input을 의미하는 것으로 보이나, 최종적으로 form 내부에 input이 있는 것으로 보입니다.
예를 들어서 다음과 같은 상황에서 사용될 수 있을까요 ?:

<form>
  <Input />
  <Input />
  <Input />
</form>

위와 같은 상황일 때 중첩 form이 생기게 될거예요. 최종적으로 다음과 같이 input을 반환시키면 어떨지 제안드립니다.(의사 코드입니다 !):

  function Input({image}: {image: ReactNode}) { 
    if (image) return (
  // 이미지가 존재할 경우 컴포넌트
    )
    return (<input {...props} />) 
  }

[kiJu2]

위 코드에서 Image또한 props로 받는다면 다음과 같은 코드가 될 수 있습니다:

Suggested change

	interface ImageProps extends InputProps {
	src?: string;
	alt?: string;
	width?: number;
	height?: number;
	}
	export default function Input({
	placeholder,
	type = "text",
	className = "",
	src,
	alt,
	width,
	height,
	}: ImageProps) {
	interface ImageProps extends React.InputHTMLAttributes<HTMLInputElement> {}
	export default function Input({
	placeholder,
	type = "text",
	className = "",
	width,
	height,
	}: ImageProps) {

[kiJu2]

굳굳 날짜 포매팅 라이브러리를 사용 하셨군요? 👍👍

JS에서 날짜 포매팅은 정말 어렵죠 ㅠㅠㅠ

[kiJu2]

훌륭합니다. Link를 통하여 내부 라우팅을 하셨군요 👍

[kiJu2]

콘솔은 지우셔도 될 듯 합니다 !

Suggested change

console.log(articles);

[kiJu2]

수고하셨습니다 성종님 !
Input 리팩토링 한 번 진행해보세요 ! 분명 좋은 학습 경험이 될거라고 확신합니다 ! 😊😊