[유선향] -sprint9

[grimza99]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[kiJu2]

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

[kiJu2]

굿굿 ! 환경변수를 잘 작성하셨군요 ! 👍

.gitignore에도 추가하셨네요 잘하셨습니다 ! 👍👍

[kiJu2]

(의견) variant라는 props를 추가해보는건 어떨까요? BestArticles와 Articles의 차이는 "스타일"로 보여서요 !

레이아웃이 전반적으로 달라지는게 아니라 일부 스타일이 달라지는 것 같아서 조심스레 제안드려봅니다 !😉:

Suggested change

	export function Articles({ article }: Props) {
	const formattedDate = useFormatDate(article.createdAt);
	const articleImg = article.image || ProfileImg;
	return (
	<div className=" flex flex-col gap-4 w-full h-[138px] bg-light-gray px-6 border-b border-gray-200">
	export default function ArticleCard({ article, variant = "normal" }: Props) {
	const formattedDate = useFormatDate(article.createdAt);
	const articleImg = article.image || DEFAULT_IMAGE;
	return (
	<div
	className={`flex flex-col gap-4 px-6 rounded-lg ${
	variant === "best"
	? "w-[384px] h-[169px] tablet:w-full tablet:h-[198px] bg-gray-50"
	: "w-full h-[138px] bg-light-gray border-b border-gray-200"
	}`}
	>
	{variant === "best" && (
	<Image className="w-[102px] h-[30px]" src={BestImage} width={102} height={30} alt="베스트" />
	)}

[kiJu2]

해당 컴포넌트에 맞는 새로운 PropType을 작성하는건 어떨까요?:

Suggested change

	export function SearchInput({ onChange, ...props }: Props) {
	return (
	<div className="relative w-full">
	<input
	onChange={onChange}
	className="
	rounded-xl border-none px-[44px] py-[16px] w-full h-[42px] bg-gray-100
	font-Pretendard text-gray-800 text-H5Regular
	placeholder:text-H5Regular placeholder:text-gray-400
	"
	/>
	<Image
	className="absolute translate-x-0 left-4 top-1/2 -translate-y-2/4"
	src={SearchIcon}
	alt="검색"
	width={15}
	height={15}
	/>
	</div>
	);
	}
	export function SearchInput({ onChange }: { onChange: (e: ChangeEvent<HTMLInputElement>) => void }) {
	return (
	<div className="relative w-full">
	<input
	onChange={onChange}
	className="
	rounded-xl border-none px-[44px] py-[16px] w-full h-[42px] bg-gray-100
	font-Pretendard text-gray-800 text-H5Regular
	placeholder:text-H5Regular placeholder:text-gray-400
	"
	/>
	<Image
	className="absolute translate-x-0 left-4 top-1/2 -translate-y-2/4"
	src={SearchIcon}
	alt="검색"
	width={15}
	height={15}
	/>
	</div>
	);
	}

현재 나머지 props도(...props) 사용하지 않는 것 같고 onChange만 사용하는 것으로 보여요. 별개의 프롭 타입을 정의하는게 어떨까요?

[kiJu2]

크으 ~ 디바이스 사이즈를 커스텀 훅으로 만드셨군요 👍

좋은 방법입니다 ! 그러나 타입을 좀 더 구체적으로 작성해볼 수 있겠네요 !:

Suggested change

	const device: string = useWindowSize();
	const device: 'mobile' | 'tablet' | 'desktop' = useWindowSize();

[kiJu2]

options는 컴포넌트에 디펜던시가 없기에 컴포넌트 바깥에 선언하시는게 좋을 것 같아요 😊

Suggested change

	}
	export function SortSelect({ onChange, ...props }: Props) {
	const device = useWindowSize();
	const options = ["최신순", "좋아요순"];
	}
	const options = ["최신순", "좋아요순"];
	export function SortSelect({ onChange, ...props }: Props) {
	const device = useWindowSize();

[kiJu2]

여긴 접근성을 위해 button을 사용해도 되겠군요 !

Suggested change

	<div
	onClick={() => setIsOpen(!isOpen)}
	className="h-6 bg-white border-none cursor-pointer"
	>
	<img src={kebabIcon} alt="케밥" />
	</div>
	<button
	type="button"
	onClick={() => setIsOpen(!isOpen)}
	className="h-6 bg-white border-none cursor-pointer"
	>
	<img src={kebabIcon} alt="케밥" />
	</button>

[kiJu2]

오우 테일윈드를 제대로 사용하고 계시군요 !

컬러, 폰트 시스템을 config로 설정하고 사용하고 계시군요 !! 👍 라이브러리 활용력이 좋으시네요 👍👍

[kiJu2]

크으 ~ 정말 수고 많으셨습니다.
테일윈드 이번에 처음 도입하신 것 같은데 폰트, 컬러 시스템 구축부터 차근차근 잘 설계하셨네요 !
이번에도 미션 수행하시느라 정말 수고 많으셨습니다 선향님 ! 😊😊