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

[#67] 상품목록 페이지 UI , API 연동 #91

Merged
merged 43 commits into from
Aug 22, 2021

Conversation

juyoungpark718
Copy link
Collaborator

@juyoungpark718 juyoungpark718 commented Aug 19, 2021

관련이슈

실제 소요시간

5h

체크리스트

  • base branch를 확인했나요?

설명

  • optionStore을 구독
  • option에 따라서 상품 목록 요청 후 렌더링
  • 1개월이내인 경우 new 라벨 추가
  • 할인이 있는 경우 sale라벨 추가

참고

상품목록1

- api를 component에서 직접 사용하지 않고 store를 거치게 수정
@juyoungpark718 juyoungpark718 linked an issue Aug 19, 2021 that may be closed by this pull request
7 tasks
Copy link
Member

@Choi-Jinwoo Choi-Jinwoo left a comment

Choose a reason for hiding this comment

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

고생 많으셨어요 ㅎㅎ

client/src/components/ProductList/ProductItem.test.tsx Outdated Show resolved Hide resolved
client/src/components/ProductList/ProductList.test.tsx Outdated Show resolved Hide resolved
client/src/components/ProductList/ProductList.tsx Outdated Show resolved Hide resolved
client/src/components/ProductList/ProductListHeader.tsx Outdated Show resolved Hide resolved
client/src/models/product.ts Outdated Show resolved Hide resolved
Comment on lines +5 to +6
.filter((key) => query[key])
.map((key) => `${key}=${query[key] || ''}`)
Copy link
Member

Choose a reason for hiding this comment

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

query[key]가 있는 부분만 사용한다는건 length가 0인 문자열은 사용하지 않는다는 의미이죠?

해당 부분도 length로 비교하는 편인데 짧아서 이점도 있는듯 하네요
다른 분들은 어떠신가요?

Copy link
Collaborator

Choose a reason for hiding this comment

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

QueryObject의 value로 number도 올 수 있어서 지금 방법도 괜찮다고 생각합니다. 그런데 또 숫자 0을 쿼리 스트링으로 만들고 싶을 때는 어떡하지.. 싶기도 하네요. ㅎㅎ

Copy link
Collaborator Author

@juyoungpark718 juyoungpark718 Aug 22, 2021

Choose a reason for hiding this comment

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

흠 우선, 현재 상태로 남겨놓고 후에 한번 더 이야기 해보는게 좋겠네요 ..ㅎㅎ 사실 저는 filter만 추가하고 백앤드에서 복붙을 ..

Copy link
Collaborator

@sanginchun sanginchun left a comment

Choose a reason for hiding this comment

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

저의 레거시 코드들을 수정하신게 많이 보이는군요.. 😢 고생하셨습니다.

Comment on lines 28 to 38

const AD_TITLE = '선물하기 딱 좋아요!';

const descendingDate = (a: MockProductItemType, b: MockProductItemType) => {
return a.uploadDate.localeCompare(b.uploadDate);
const descendingDate = (a: Product, b: Product) => {
return b.createdAt.getTime() - a.createdAt.getTime();
};

const descendingDiscountRate = (a: MockProductItemType, b: MockProductItemType) => {
const descendingDiscountRate = (a: Product, b: Product) => {
return b.discountRate - a.discountRate;
};

Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분은 게더에서 논의한대로 따로 API가 필요하긴 하겠군요..

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

따로 api가 추가되면 고쳐야할 부분 같네요 .. ㅎㅎ

client/src/components/MainProductSections/mock/index.ts Outdated Show resolved Hide resolved
client/src/components/ProductList/ProductList.test.tsx Outdated Show resolved Hide resolved
Comment on lines +10 to +15
return {
products: products.map((product: Product) => new Product(product)),
totalPages,
totalProductCount,
};
}
Copy link
Collaborator

@sanginchun sanginchun Aug 20, 2021

Choose a reason for hiding this comment

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

runInAction 사용해서 상태로 관리하는걸로 안하신 이유가 있을까요? 🤔 보통 mobX에서 이런 식으로 store에서 직접 리턴을 하기도 하는지 잘 모르겠네요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

mobx로 product를 상태관리 하지 않아서 이런 식으로 작성해봤습니다.
그런데 api를 직접 가져와서 컴포넌트에서 통신하는 것보다 ProductStore를 만들고 거기서 api를 호출하는게 더 맞다고 생각했습니다.
이 부분은 논의를 한번 해보면 좋겠네요 .. ㅎㅎ

Copy link
Member

@Choi-Jinwoo Choi-Jinwoo left a comment

Choose a reason for hiding this comment

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

수고하셨습니당 ㅎㅎ

@juyoungpark718 juyoungpark718 merged commit 89ded26 into develop Aug 22, 2021
@juyoungpark718 juyoungpark718 deleted the feat/product-list-page branch August 23, 2021 07:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature 기능 frontend 프론트엔드
Projects
None yet
Development

Successfully merging this pull request may close these issues.

상품 목록 페이지 (UI + API 연동)
5 participants