Skip to content

[feat/#76] products api 연동 및 더보기 버튼 핸들러 추가 #90

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

Merged
merged 8 commits into from
May 22, 2025

Conversation

hamxxn
Copy link
Collaborator

@hamxxn hamxxn commented May 21, 2025

📌 Related Issues

✅ 체크 리스트

  • PR 제목의 형식을 잘 작성했나요? e.g. [Feat/#이슈번호] PR 템플릿 작성
  • 빌드가 성공했나요? (pnpm build)
  • 컨벤션을 지켰나요?
  • 이슈는 등록했나요?
  • 리뷰어와 라벨을 지정했나요?

📄 Tasks

  • products api 연동 및 더보기 버튼 핸들러 추가
  • 더보기 버튼 클릭 시, 9개씩 더 보이게 하였습니다!

⭐ PR Point (To Reviewer)

📷 Screenshot

화면 기록 2025-05-22 오전 10 39 02

🔔 ETC

Copy link

✅ 빌드에 성공했습니다! 🎉

Copy link
Collaborator

@heesunee heesunee left a comment

Choose a reason for hiding this comment

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

image

리뷰에 지금 이거 뜨는데 괜찮은지 확인한번만 해주시고, 코멘트 달린부분답변 부탁드립니당! 고생하셨어요 ~~ ㅎㅎ 얼마안남앗네요 !!

Comment on lines 25 to 27
const searchedList = useMemo(() => {
return productListData?.productMainInfos ?? [];
}, [productListData]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기 useMemo로 감싼 이유가 있나요?

Copy link
Collaborator

Choose a reason for hiding this comment

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

단순한 값이라 불필요하지 않을까 했는데, 사용하신 기준이 궁금합니다

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

수정했습니다!

/>
))}
</div>
{!isProductListLoading && !isProductListError && (
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일때 렌더링 처리도 고려하면 더 좋을 것 같아요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Comment on lines +34 to +36
const handleShowMore = () => {
setVisibleCount(prev => prev + 9);
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

더보기 처리너무 깔끔하고 좋아요 👍

Copy link
Member

Choose a reason for hiding this comment

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

진짜 깔끔함👍

Comment on lines 14 to 19
useEffect(() => {
if (!isLoading) {
const filtered = productList.filter(card => card.categoryList.includes(selectedTag));
setFilteredCards(filtered);
}
}, [productList, selectedTag, isLoading]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

선택된 태그와 리스트에 따라 필터링된 데이터를 상태로 관리하는 로직인가요? filteredCards는 이미 productList와 selectedTag에서 계산된 결과라, 별도의 상태가 아닌 렌더링 시점에 계산하는게 직관적인 것 같은데 useEffect에 추가적인 state값으로 작성하신 이유가 있나요? 동일한 값에 대해 계속해서 필터링 함수를 적용해야 한다면 오히려 useMemo도 사용해 볼 수 있을것 같아요.

https://velog.io/@jinyoung985/React-useMemo%EB%9E%80

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵넵!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

useMemo로 바꾸겠습니당

Copy link

✅ 빌드에 성공했습니다! 🎉

Copy link

✅ 빌드에 성공했습니다! 🎉

Copy link

✅ 빌드에 성공했습니다! 🎉

Copy link
Member

@jeonghoon11 jeonghoon11 left a comment

Choose a reason for hiding this comment

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

최고인데요???

@@ -6,13 +7,90 @@ import Banner from '@/../public/img/banner_familymonth.png';
import Tag from '@/pages/home/components/Tag';
import Text from '@shared/components/text/Text';
import Card from '@shared/components/card/Card';
import CardSkeleton from '@shared/components/card/CardSkeleton';
import ProductActionButton from '@shared/components/ProductActionButton/ProductActionButton';
import { useGetProductList } from '@api/queries';
import { dummyCardsL } from '@/pages/home/mockHomeData';
Copy link
Member

Choose a reason for hiding this comment

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

더미는 이제 지워도 되겠네요!

Comment on lines +34 to +36
const handleShowMore = () => {
setVisibleCount(prev => prev + 9);
};
Copy link
Member

Choose a reason for hiding this comment

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

진짜 깔끔함👍

@hamxxn hamxxn merged commit d9f1ad4 into develop May 22, 2025
1 check passed
Copy link

✅ 빌드에 성공했습니다! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feat] 메인페이지 조회 api
3 participants