[#10] 상품목록 UI 작업 #24

momongss · 2021-08-12T15:19:04Z

실제 소요시간

8h

체크리스트

base branch를 확인했나요?

설명

대략적인 레이아웃을 잡았습니다.
- ul reset, box-sizing 등이 태그마다 따로 설정되어있습니다. 나중에 global 에서 처리하게되면 뺄 예정입니다.
OO순 눌렀을 때 제대로 동작
- 추천순 제외하고 동작합니다. (인기순, 최신순, 낮은가격순, 높은가격순)
페이지별로 눌렀을 때 제대로 동작

의논할 것.

~~상품 테이블에 등록일 컬럼을 추가해야할 것 같습니다.~~

- api 요청시 order, page 인자로 넘겨줌.

sanginchun

로직을 뷰와 분리해서 컨테이너에 작성하는 부분은 적용이 안 되어 있어서 조금 논의가 필요할 것 같아요. 그 때 뭔가 확실히 정하지 못해서 어려움이 있으셨을 듯 합니다. 고생하셨습니다 :)

client/src/components/ProductList/ProductList.tsx

sanginchun · 2021-08-12T15:59:22Z

client/src/components/ProductList/ProductList.tsx

+  useEffect(() => {
+    function fetchProductList() {
+      const resData = apiMock.getProductList(listOrder.current, currentPage.current);
+      totalProductCount.current = resData.totalProductCount;
+      totalPage.current = resData.totalPage;
+      setProductList(resData.productList);
+    }
+    fetchProductList();
+  }, []);
+


상품리스트 API가 나와야 구체적으로 작성할 수 있을 것 같긴 한데 커스텀 훅을 사용하면 좋을 것 같네요. 😃

훅을 잘 몰라서.. 논의하면서 진행하면 좋을 것 같습니다.

client/src/components/ProductList/ProductMock.ts

Choi-Jinwoo

수고하셨습니다 :)

상품테이블에 createdAt 컬럼은 있는데 따로 필요하신건가요?

client/index.d.ts

client/src/components/ProductList/ProductItem.tsx

Choi-Jinwoo · 2021-08-12T23:34:50Z

client/src/components/ProductList/ProductList.tsx

+    function fetchProductList() {
+      const resData = apiMock.getProductList(listOrder.current, currentPage.current);
+      totalProductCount.current = resData.totalProductCount;
+      totalPage.current = resData.totalPage;
+      setProductList(resData.productList);
+    }


함수 표현식으로 사용하기로 했었으니 수정하면 좋겠습니당 ㅎㅎ

그리고 저는 useEffect에서 사용되는 함수들은 useCallback으로 감싸서 useEffect 밖에 적어두는 편인데 다른 분들은 어떠신가요?

@sanginchun @juyoungpark718 @momongss

저는 useCallback을 잘 사용하지 않았어서, 하지만 사용하는거 좋다고 생각합니다 !

함수표현식으로 변경하겠습니다!. useCallback 으로 감싸는 얘기는 어떤 얘기인지 잘 모르겠네요. ㅠㅠ 이따 논의해보면 좋겠습니다.

useCallback 으로 감싸는 걸로 수정했습니다! 혹시 괜찮은 방식인지 봐주시면 감사하겠습니다.

Choi-Jinwoo · 2021-08-12T23:44:47Z

client/src/components/ProductList/ProductList.tsx

+  const onClickSortButton = (order: Order): void => {
+    listOrder.current = order;
+    const resData = apiMock.getProductList(listOrder.current, currentPage.current);
+    setProductList(resData.productList);
+  };
+
+  const onClickPageButton = (pageNum: number): void => {
+    currentPage.current = pageNum;
+    const resData = apiMock.getProductList(listOrder.current, currentPage.current);
+    setProductList(resData.productList);
+  };


이 부분이 중복되는걸 봐선 useEffet의 뎁스로 page, order와 같은 부분을 넣고 둘중 하나라도 상태가 바뀌면 이 부분들을 호출하도록 하는건 어떨까요?

중복되고 있으니 한 곳에 몰아넣는 건 좋은 것 같은데 useEffect 의 뎁스로 넣는다는 얘기는 어떤 얘긴지 잘 모르겠네요 ㅠㅠ. 이것도 이따 논의해보면 좋겠습니다.

Choi-Jinwoo · 2021-08-12T23:46:53Z

client/src/components/ProductList/ProductList.tsx

+            onClick={() => {
+              onClickSortButton(Order.popularity);
+            }}


JSX 문법 내부에서 화살표 함수를 사용하면 컴포넌트가 랜더링을 할때마다 새로운 함수를 만들어 최적화가 깨질수 있다고 합니다 (대체론 괜찮다고 하네요)

onClickSortButton(Order.popularity); onClickSortButton(Order.recent); onClickSortButton(Order.priceLow); onClickSortButton(Order.priceHigh);

이렇게 onClickSortButton 이 인자만 다르게 여러번 사용되어서 사용되어서 화살표 함수를 사용해 인자를 다르게 넣어줬습니다.
저는 다른 인자마다 함수를 따로 만들어주는 방법외에 생각이 나지 않아서 일단 이렇게 해줬습니다..
더 좋은 방안이 생각나면 개선하겠습니다. 😂

오 지나가다 새로운 지식 하나 배워갑니다 👀

onClickSortButton() 이 함수를 뱉는 방식은 어떨까요?

function onClickSortButton(order) { return (event) => { ... } }

이런 식...?
반환되는 내부 함수가 onClickSortButton의 역할을 하니 네이밍의 차별성은 필요할 것 같기두 하네요 ㅎㅎ

client/src/components/ProductList/ProductList.tsx

Choi-Jinwoo · 2021-08-12T23:54:24Z

client/src/index.tsx

+  <div>
+    <ProductListWrapper></ProductListWrapper>
+  </div>,


이 부분은 기존처럼 해서 병합되고 나중에 App.tsx로 대체해야될것 같습니다 :)

juyoungpark718 · 2021-08-13T00:38:32Z

client/src/components/ProductList/ProductItem.tsx

+  const ProductItem = styled.li`
+    box-sizing: border-box;
+    width: 300px;
+
+    padding: 0 10px;
+    margin: 20px 0;
+
+    list-style: none;
+  `;
+
+  const Img = styled.img`
+    width: 100%;
+  `;
+
+  const Name = styled.div``;
+  const Price = styled.div``;


ProductItem 안에 styled 컴포넌트들이 컴포넌트 안에 작성 vs 바깥에 작성 이 부분에 대해서도 논의해보면 좋을 것 같네요 :)

저도 고민하던 부분입니다!. 논의해보면 좋겠습니다.!

client/src/components/ProductList/ProductList.tsx

juyoungpark718 · 2021-08-13T00:50:12Z

client/src/components/ProductList/ProductList.tsx

+    function fetchProductList() {
+      const resData = apiMock.getProductList(listOrder.current, currentPage.current);
+      totalProductCount.current = resData.totalProductCount;
+      totalPage.current = resData.totalPage;
+      setProductList(resData.productList);
+    }


저는 useCallback을 잘 사용하지 않았어서, 하지만 사용하는거 좋다고 생각합니다 !

juyoungpark718 · 2021-08-13T00:56:59Z

client/src/types/product.ts

+export enum Order {
+  popularity,
+  recent,
+  priceLow,
+  priceHigh,
+}


파스칼 케이스가 뭔가 나은거 같습니다 .. 저는 파스칼 한표

into develop

- Number 는 소수점을 버리지 않음.

hwookim

프론트까지 코드가 깔끔..!
배울 점이 참 많은 것 같습니다. 😊

저희 팀은 아직 프론트를 시작하지 않아서,
시작할 때 많이 훔쳐가도록 하겠습니다 ㅎㅎㅎㅎㅎㅎ

client/src/components/ProductList/ProductItem.tsx

hwookim · 2021-08-13T05:50:32Z

client/src/components/ProductList/ProductList.tsx

+          <SortButton
+            onClick={() => {
+              onClickSortButton(Order.popularity);
+            }}
+          >
+            인기순
+          </SortButton>
+          <SortButton
+            onClick={() => {
+              onClickSortButton(Order.recent);
+            }}
+          >
+            최신순
+          </SortButton>
+          <SortButton
+            onClick={() => {
+              onClickSortButton(Order.priceLow);
+            }}
+          >
+            낮은가격순
+          </SortButton>
+          <SortButton
+            onClick={() => {
+              onClickSortButton(Order.priceHigh);
+            }}
+          >
+            높은가격순
+          </SortButton>


텍스트와 함수에 넘기는 인자를 매칭시킨 object를 만들어서 map을 활용하면 중복을 좀 줄일 수도 있을 것 같은데 어떠신가요? 😄

오.. 그런 식으로 할 수 있겠네요. 정말 좋은 생각인 것 같습니다.

<SortButtonList> <SortButton onClick={onClickSortButton(Order.popularity)}>인기순</SortButton> <SortButton onClick={onClickSortButton(Order.recent)}>최신순</SortButton> <SortButton onClick={onClickSortButton(Order.priceLow)}>낮은가격순</SortButton> <SortButton onClick={onClickSortButton(Order.priceHigh)}>높은가격순</SortButton> </SortButtonList>

저는 위 경우에는 sort 버튼들이 추가되거나 삭제되는 일 없이 보통 정적으로 유지되고, 숫자도 많지 않아서 일단 위와 같이 명시하는게 좋다고 생각해서 이번엔 그대로 유지하겠지만 다음번에 중복을 줄일 때 유용하게 활용할 수 있을 것 같습니다. 감사합니다. 👍

hwookim · 2021-08-13T06:00:25Z

client/src/components/ProductList/ProductList.tsx

+  );
+};
+
+function creatPageNumbers(totalPage: number): number[] {


이 친구만 함수가 별도로 분리되어있는 기준이 있나욤??👀

컴포넌트의 state 에 종속된 부분이 없어서 분리했습니다!

SecretJuJu · 2021-08-13T06:32:12Z

client/src/components/ProductList/ProductItem.tsx

+    box-sizing: border-box;
+    width: 300px;
+
+    padding: 0 10px;
+    margin: 20px 0;
+
+    list-style: none;


오 스타일의 역할(?) 마다 분리를 하신건가요?

넵. 관련있어보이는 것들끼리 모아봤습니다 ㅎㅎ

SecretJuJu · 2021-08-13T06:34:07Z

client/src/components/ProductList/ProductList.tsx

+    case Order.priceLow:
+      return productList.sort((a: ProductItemType, b: ProductItemType) => a.price - b.price);
+    case Order.priceHigh:
+      return productList.sort((a: ProductItemType, b: ProductItemType) => b.price - a.price);
+    case Order.recent:
+      return productList.sort(
+        (a: ProductItemType, b: ProductItemType) =>
+          new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()


가격, 최신순의 정렬은 백엔드에서 해당 방법대로 정렬된 데이터를 보내줘야 할 것 같아요!

SecretJuJu · 2021-08-13T06:37:44Z

client/src/components/ProductList/ProductList.tsx

+  width: 1200px;
+  display: flex;
+  flex-wrap: wrap;


위에서는 margin, width 등을 \n 으로 분리해서 넣어줬었는데 여기는 아니네요..
통일 하면 좋을 듯 합니다.

아 좋은 지적이네요. 반영하겠습니다. 👍

chaeeun037 · 2021-08-13T06:42:25Z

client/src/components/ProductList/ProductList.tsx

+
+const Main = styled.div`
+  width: 1200px;
+


style 작성하실 때 한줄 띄우는건 어떤 의도이신가요?

아 연관이 있어보이는 것들끼리 모아두려는 의도입니다.
그런데 엄격한 기준이 있는게 아니라 습관적으로 하는 거라 통일성이 없어보일 때도 있을 겁니다. 😂😂😂

- 관련성 있는 것들끼리

juyoungpark718

고생하셨습니다 :) 다만, lint에서 warning이 뜨는 부분이 있는거 같은데, 확인해서 지울 수 있으면 지우면 좋겠습니다 ! mock/api.ts missing return type, fetchProductList missing dependency 두 개가 있습니다 ! 😄

sanginchun · 2021-08-13T17:21:50Z

client/src/utils/moneyFormater.ts

+export const getKoreanMoneyFormat = (amount: number): string => {
+  return `${amount.toLocaleString()}원`;
+};


단순히 포맷팅하는 함수니까 toLocaleString처럼 앞에 to를 붙이는게 조금 더 적절하지 않을까 생각이 들지만, 지금 작성하신 이름도 의미는 충분히 전달되는 것 같습니다. util 함수들이 더 다양해지면 prefix를 잘 맞춰보면 좋을 것 같네요. 😄

너도 get보단 to나 format이 조금 더 알맞지 않나 싶네요 ㅎㅎ

저도 to가 더 알맞아 보이네요. to로 수정하겠습니다.

sanginchun

첫 프론트작업을 맡으셔서 리뷰가 상당히 많아졌군요. 그만큼 수정도 많이 하시고... 그래도 덕분에 팀원들 간에 각자 그동안 리액트를 어떻게 사용해왔는지도 공유되고, 저 개인적으로는 몰랐던 것들도 많이 배웠습니다. 고생 많으셨습니다!! 😃

into develop

- totalPage, totalPageCount, productList => productListResponse 로 합침. - useEffect, useCallback 뎁스 지정. - map return 밖으로 분리

Choi-Jinwoo

수고하셨어요 ㅎㅎ 단위 포맷하는 부분 코멘트 하나 남겨뒀는데 approve 해두겠습니당 :)

Choi-Jinwoo · 2021-08-15T09:51:12Z

client/src/utils/moneyFormater.ts

+export const getKoreanMoneyFormat = (amount: number): string => {
+  return `${amount.toLocaleString()}원`;
+};


너도 get보단 to나 format이 조금 더 알맞지 않나 싶네요 ㅎㅎ

Kwongiseok · 2021-08-20T05:40:05Z

client/src/components/ProductList/ProductList.tsx

+
+  return (
+    <>
+      {productListResponse === null ? (
+        <div>로딩중..</div>
+      ) : (


if (productListResponse === null) return Loading

return ( .... )

이렇게도 괜찮을 것 같아요! 개인 취향인듯합니다! :)

momongss added 5 commits August 12, 2021 16:36

chore: styled-components 설치

99d5ad3

chore: img import 가능하게 설정 추가

61193ea

add: mock 데이터

d8abbfc

feat: 상품 리스트 sorting 기능 구현

bf970bd

feat: 페이지네이션 동작 수정 (서버에서 처리하게.)

958af4e

- api 요청시 order, page 인자로 넘겨줌.

momongss added feature 기능 frontend 프론트엔드 labels Aug 12, 2021

momongss added this to the 1주차 스프린트 milestone Aug 12, 2021

momongss self-assigned this Aug 12, 2021

juyoungpark718 requested review from Choi-Jinwoo and sanginchun August 12, 2021 15:19

momongss requested a review from juyoungpark718 August 12, 2021 15:20

momongss changed the title ~~Feat/frontend product list~~ [#10] 상품목록 UI 작업 Aug 12, 2021

sanginchun reviewed Aug 12, 2021

View reviewed changes

Choi-Jinwoo reviewed Aug 12, 2021

View reviewed changes

juyoungpark718 reviewed Aug 13, 2021

View reviewed changes

momongss added 7 commits August 13, 2021 10:33

Merge branch 'develop' of https://github.com/woowa-techcamp-2021/store-4

2d7e3c7

into develop

add: money 포멧터 분리

3116525

fix: 이벤트 핸들러 커링 적용, 오타 수정, 화살표함수로 수정

c9b2621

fix: 소수점 버리기 : Number -> Math.floor 로 변경

e39f730

- Number 는 소수점을 버리지 않음.

add: svg import 설정 추가

ba50330

add: ProductItemPropsType 타입 추가.

04fe7b7

fix: mock 데이터 분리 (mockApi / mockData)

5ffe25d

hwookim reviewed Aug 13, 2021

View reviewed changes

hwookim mentioned this pull request Aug 13, 2021

팀간 기술리뷰 2팀 모여라! #27

Closed

fix: onClickPageButton 핸들러에 커링 적용.

10377c1

SecretJuJu reviewed Aug 13, 2021

View reviewed changes

chaeeun037 reviewed Aug 13, 2021

View reviewed changes

momongss added 7 commits August 13, 2021 15:50

fix: style 선언 방식 통일

7f1a3e4

- 관련성 있는 것들끼리

fix: 데이터 sort 시 원본 데이터 유지하도록 변경

bb30618

fix: 마운트시 api 요청함수 useCallback 으로 감싸 분리.

78bdc45

fix: JSX 내부 map 함수 리턴 밖으로 분리.

2d2f925

fix: type 네이밍 카멜 -> 파스칼 변경.

37aadca

fix: type 네이밍 변경 : Order -> ProductListOrder

cf8dfac

fix: totalPage, totalProductCount 변경 ref -> state

f92c4e3

juyoungpark718 approved these changes Aug 13, 2021

View reviewed changes

sanginchun reviewed Aug 13, 2021

View reviewed changes

sanginchun approved these changes Aug 13, 2021

View reviewed changes

Merge branch 'develop' of https://github.com/woowa-techcamp-2021/store-4

dca39a7

into develop

momongss closed this Aug 15, 2021

momongss reopened this Aug 15, 2021

juyoungpark718 requested review from Choi-Jinwoo, juyoungpark718 and sanginchun August 15, 2021 06:26

momongss added 5 commits August 15, 2021 16:44

Merge branch 'develop' into feat/frontend-product-list

c49a593

fix: productItemProps 타입 선언 위치 변경.

ed33273

add: util range 함수 추가.

b589e47

fix: eslint warning 제거. 메소드 리턴 타입 명시

af0f45d

fix: ProductList 코드 개선

2fb7b00

- totalPage, totalPageCount, productList => productListResponse 로 합침. - useEffect, useCallback 뎁스 지정. - map return 밖으로 분리

Choi-Jinwoo approved these changes Aug 15, 2021

View reviewed changes

sanginchun approved these changes Aug 15, 2021

View reviewed changes

juyoungpark718 approved these changes Aug 15, 2021

View reviewed changes

fix: 네이밍 get => toKoreanMoneyFormat

f0a9fe5

momongss merged commit 8fe818f into develop Aug 16, 2021

momongss deleted the feat/frontend-product-list branch August 16, 2021 03:32

Kwongiseok reviewed Aug 20, 2021

View reviewed changes

Kwongiseok mentioned this pull request Aug 20, 2021

5팀의 리뷰입니다. 👀 #95

Closed

[#10] 상품목록 UI 작업 #24

[#10] 상품목록 UI 작업 #24

Conversation

momongss commented Aug 12, 2021 • edited Loading

관련이슈

실제 소요시간

체크리스트

설명

의논할 것.

sanginchun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choi-Jinwoo left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwookim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

momongss Aug 13, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juyoungpark718 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sanginchun left a comment

Choose a reason for hiding this comment

Choi-Jinwoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

momongss commented Aug 12, 2021 •

edited

Loading

Choi-Jinwoo left a comment •

edited

Loading

momongss Aug 13, 2021 •

edited

Loading