Conversation
|
🚀 Storybook 확인 🚀 |
| "bg-green-50": part === "WA", | ||
| })} | ||
| > | ||
| <img src={iconPath} alt={part} width={30} height={30} /> |
There was a problem hiding this comment.
img 태그 대신 next에서 제공하는 image 컴포넌트를 사용하는 것이 SEO와 이미지 최적화 측면에서 더 좋을 것 같아요!
https://h-owo-ld.tistory.com/299
There was a problem hiding this comment.
보일러 플레이트의 components폴더의 Blogs.tsx 참고해도 좋을듯
There was a problem hiding this comment.
Part tag의 경우 파트별로 색이 고정이기 때문에 props로 text만 받아와서 색을 지정할 수 있을 것 같아요
| const displayValue = isAll ? name : selectedValue; // "전체"일 땐 기본 표시 | ||
|
|
||
| return ( | ||
| <div className={`relative inline-block w-32 tablet:w-40`} ref={dropdownRef}> |
There was a problem hiding this comment.
옵션 메뉴를 선택하는 컴포넌트인 만큼 div 대신 select를 사용하는게 SEO에 좋을 것 같아요
https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C
There was a problem hiding this comment.
네 저도 select 태그 사용해서 구현하려고 했는데, select 태그의 스타일을 커스텀해서 디자인을 구현하려면 한계가 있어서 불가피하게 div를 사용하여 구현하였습니다....! 요건 좀 더 찾아보고 바꿀 수 있으면 다음 PR에 반영하겠습니다!
There was a problem hiding this comment.
저희 프로젝트가 두 종류의 필터만 사용하기 때문에 옵션 목록을 매번 props로 받아오는 것보다
필터 종류를 props로 받아서 아래와 같이 내부에서 처리하는 것이 유지보수와 사용성이 더 좋을 것 같아요.
const getFilterConfig = (type: FilterType) => {
switch (type) {
case "part":
return {
name: "파트",
options: ["전체", "AI/ML", "Server/Cloud", "Web/App", "Devral", "Lead"],
};
case "generation":
return {
name: "카테고리",
options: ["전체", "1기", "2기"],
};
}
};
There was a problem hiding this comment.
아 그렇네요 ! 이것도 말씀하신대로 수정하겠습니다
There was a problem hiding this comment.
현재 페이지네이션은 totalPages가 많아질수록 모든 페이지 버튼이 한 번에 렌더링되는 구조인데, 페이지가 많아질수록 UX가 안 좋을 것 같습니다. 제 생각에는 5단위로 끊어서 페이지 그룹을 나누고, 필요한 경우에만 다음 그룹으로 넘어가도록 구현하면 사용자가 더 직관적으로 페이지를 탐색할 수 있을 것 같은데 어떻게 생각하시나요?
예를 들어: 1 2 3 4 5 → 6 7 8 9 10 → 11 12 이런 식으로요.
Taew00k
left a comment
Taew00k
left a comment
There was a problem hiding this comment.
공통 컴포넌트 잘 만들어주셔서 쉽게 사용할 수 있을 것 같습니다!
리뷰 내용만 확인해주세요
| "bg-green-50": part === "WA", | ||
| })} | ||
| > | ||
| <img src={iconPath} alt={part} width={30} height={30} /> |
There was a problem hiding this comment.
보일러 플레이트의 components폴더의 Blogs.tsx 참고해도 좋을듯
… 수정, Filter props 수정)
3 participants
관련 이슈
작업 사항
참고 사항