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

[NEXTLEVEL 클린코드 리액트 조기문] 장바구니 미션 Step3 #12

Open
wants to merge 117 commits into
base: guymoon
Choose a base branch
from

Conversation

guymoon
Copy link
Member

@guymoon guymoon commented Mar 24, 2022

안녕하세요 스텝3 올립니다!
테스트는 조금 더 추가 할 예정이고 진행하면서 느낀 부분 조금 더 리팩터링 할 예정입니다!
아직 리팩터링을 마치지 못한 부분이 있네요!!

감사합니다!!

Storybook

바로가기

웹 VSCODE

바로가기

Test Coverage

File % Stmts % Branch % Funcs % Lines Uncovered Line #s
All files 83.56 54.74 65.78 85.23
components/@atom/BottomUpModal 75 41.66 66.66 77.77
BottomUpModal.tsx 75 41.66 66.66 77.77 18-23
components/@atom/Button 62.96 31.57 100 62.96
Button.tsx 62.96 31.57 100 62.96 13-27
components/@atom/ScrollBottomObserver 72.22 0 50 72.22
ScrollBottomObserver.tsx 72.22 0 50 72.22 11-13,16-17
components/@atom/Spinner 62.96 23.52 100 62.96
Spinner.tsx 62.96 23.52 100 62.96 13-27
components/Carts/CartList 61.64 37.5 23.52 68.25
CartList.tsx 61.64 37.5 23.52 68.25 28,35,40-47,51,55,58,63-65,68-72,100
components/Carts/CartListContainer 100 75 100 100
CartListContainer.tsx 100 75 100 100 11
components/Carts/CartListItem 96 75 83.33 96
CartListItem.tsx 96 75 83.33 96 31
components/ConfirmAddCartsModal 100 75 100 100
ConfirmAddCartsModal.tsx 100 75 100 100 11
components/GNB 100 75 100 100
GNB.tsx 100 75 100 100 12
components/Orders/OrderList 100 87.5 100 100
OrderList.tsx 100 87.5 100 100 12
components/Orders/OrderListContainer 100 75 100 100
OrderListContainer.tsx 100 75 100 100 11
components/Orders/OrderListItem 100 75 100 100
OrderListItem.tsx 100 75 100 100 11
components/Orders/OrderedProduct 88 75 40 88
OrderedProduct.tsx 88 75 40 88 25-59
components/Products/ProductItem 100 75 100 100
ProductItem.tsx 100 75 100 100 12
components/Products/ProductList 90.62 83.33 57.14 93.33
ProductList.tsx 90.62 83.33 57.14 93.33 24,50
components/Products/ProductListContainer 100 75 100 100
ProductListContainer.tsx 100 75 100 100 12
hooks/service 88.6 83.33 52.94 95.89
useCarts.ts 88.88 83.33 62.5 94.11 25,49
useOrders.ts 86.95 100 40 95.23 24
useProducts.ts 90 100 50 100
service 97.72 100 94.44 100
cartsService.ts 95.65 100 87.5 100
ordersService.ts 100 100 100 100
service/apis 56.41 100 0 56.41
carts.ts 53.84 100 0 53.84 10-19
orders.ts 53.33 100 0 53.33 11-23
products.ts 63.63 100 0 63.63 10-15
shared/constants 64.28 100 28.57 64.28
css.ts 100 100 100 100
url.ts 54.54 100 28.57 54.54 19-64
shared/fixtures 100 100 100 100
cartItem.ts 100 100 100 100
carts.ts 100 100 100 100
cartsFromServer.ts 100 100 100 100
cartsReducerInitialState.ts 100 100 100 100
cartsWithQuantity.ts 100 100 100 100
orderItem.ts 100 100 100 100
orders.ts 100 100 100 100
product.ts 100 100 100 100
shared/utils 80 62.5 66.66 78.26
createMockRouter.ts 100 100 100 100
fetcher.ts 60 50 50 60 16-23
redux.ts 83.33 100 60 81.81 9-15
test-utils.ts 100 100 100 100
store 96.87 66.66 100 96.77
index.ts 96.87 66.66 100 96.77 25
store/modules 96.42 66.66 100 96.42
index.ts 96.42 66.66 100 96.42 36
store/modules/carts 80.24 50 72.72 83.56
saga.ts 82.14 50 80 82.14 46-53
slice.ts 77.55 50 70.58 82.92 55-65,89-90
types.ts 100 100 100 100
store/modules/orders 66.66 37.5 42.85 66.66
saga.ts 47.36 37.5 50 47.36 15-36
slice.ts 78.94 100 33.33 78.94 28-32
types.ts 100 100 100 100
store/modules/products 100 66.66 100 100
saga.ts 100 66.66 100 100 10-21
slice.ts 100 100 100 100
types.ts 100 100 100 100

  - feat: cartsAsyncActions 생성
    - getCarts
    - deleteCartItemId
    - addCartItem

  - feat: deleteCardItemById(id값으로 장바구니 아이템 삭제) 기능 추가

  - feat: increaseCartItemQuantityById(id값으로 장바구니 아이템 수량 증가) 기능 추가

  - feat: decreaseCartItemQuantityById(id값으로 장바구니 아이템 수량 감소)

  - feat: getCarts(장바구니 정보 불러오기) 기능 추가

  - feat: deleteCartItemById(장바구니 아이템 삭제하기)
   기능 추가

  - feat: addCartItem(장바구니 아이템 담기) 기능 추가
  -feat: getCartsSaga(장바구니 정보 가져오기) 기능 추가

  -feat: deleteCartItemByIdSaga(장바구니 아이템 삭제) 추가

  -feat: addNewCartItemSaga(장바구니 아이템 추가) 기능 추가
  - CARTS: 'carts' 상수

  - GetCartsSuccessPayload: getCarts 성공 시 payload
  DeleteCartItemRequestPayload: deleteCartItem 요청 시 paylaod

  - DeleteCartItemSuccessPayload: deleteCartItem 성공 시 payload

  - CartsReducerState: cartsReducer 의 상태 타입

  - AddCartItemRequestPayload: addCartItem 요청 시 payload

  - AddCartItemSuccessPayload: addCartItem 성공 시 paylaod
  - 아무 key나 들어올 수 있는 형태에서 타입 고정하는 방식으로 수정

  - refactor: GetProductsResponseType key값 products로 고정

  - refactor: GetProductsErrorType 타입 삭제하고, BaseRequestFailure 타입으로 재사용 가능하도록 수정
  - feat: GET_ORDERS method와 url 추가
  - feat: POST_ORDER method와 url 추가
  - feat: GET_ORDER_BY_ID method와 url 추가
  - cartsFromServer: 리듀서에서 정재된 데이터 만들 기 전 원본 서버 데이터 형태를 가진 고정물

  - cartsReducerInitialState: cartsReducer의 초기 상태 값 고정물

  - cartsWithQuantity: getCarts.success에서 기본 값 quantity를 추가한 carts 데이터 고정물
  -feat: createCartItem(장바구니 아이템의 id값과 quantity의 값을 받아 장바구니 아이템을 만들어주는 유틸 함수) 추가. (기본값은 id:1, quantity: 1)

  -feat: createCartsReducerStateHasValue(carts.value의 value값을 입력으로 받아 입력 받은 값을 갖는 cartsReducerState를 반환해주는 유틸 함수) 추가.
  - feat: rootReducer에 cartsReducer 추가
  - feat: rootReducer에 ordersReducer 추가

  - feat: rootSaga에 cartsSaga 추가
  - feat: rootSaga에 ordersSaga 추가
  - feat: rootReducer에 cartsReducer 추가
  - feat: rootReducer에 ordersReducer 추가

  - feat: rootSaga에 cartsSaga 추가
  - feat: rootSaga에 ordersSaga 추가
  - feat: carts 상태 셀렉터 추가(carts,isLoadingCarts,hasErrorCarts,errorCarts)

  - feat: getCarts(dispatch - getCarts.request)

  - feat: addCarts(dispatch - addCarts.request)

  - feat: increaseCartItemQuantityById(장바구니 아이템 최대 값이 아닌 경우 dispatch increaseCartItemQuantityById)

  - feat: decreaseCartItemQuantityById(장바구니 아이템 최소값이 아닌 경우 dispatch decreaseCartItemQuantityById)

  - feat: deleteCartItemById(아이디 값을 이용해 장바구니 아이템 삭제하는 기능, dispatch deleteCartItemById)
  - feat: addSelectedItemToCarts(선택된 아이템을 장바구니로 추가)

  - feat: removeSelectedItemFromCarts(선택된 장바구니 아이템을 삭제)

  - feat: mutateSelectedCartItems(선택된 장바구니 아이템을 수정, 수량 조절)

  - feat: deleteSelectedCartItem(선택된 장바구니 아이템을 삭제)

  - feat: clearSelectedCartItems(장바구니 아이템을 모두 삭제)

  - feat: selectAllCartItems(모든 장바구니 아이템을 선택)

  - feat: orderSelectedCartItem(선택된 장바구니 아이템을 주문)
  - feat: 초기에 getCarts 액션을 디스패치해 redux 스토어에carts 값을 저장
  - feat: 선택 여부에 따라 checkbox 달리 보이게 하는 기능 추가

  - feat: 선택되었을 때 선택된 장바구니 정보에 추가해주는 기능 추가

  - feat: + 버튼을 누르면 장바구니 아이템 수량을 증가시켜주는 기능 추가

  - feat: - 버튼을 누르면 장바구니 아이템 수량을 감소시켜주는 기능 추가
  - it('로딩중인 상태에는 로딩중 상태를 보인다)
  - it('로딩중이 아닌 경우 장바구니 정보가 나타난다.')
  - it('장바구니에 담긴 아이템 정보를 보여준다.)

  - it('선택 checkbox input을 누르면 props로 전달 받은 핸들러가 호출된다.')

  - it('장바구니 수량 버튼(+)을 누르면 액션이 dispatch 된다.)

  - it('장바구니 수량 버튼(-)을 누르면 액션이 dispatch 된다.')
- it('cartsReducer는 초깃값을 갖는다')

- describe('deleteCartItemById')
  - it('일치하는 id가 있는 경우 cartItem을 삭제')

- describe('increaseCartItemQuantityById')
  - it('일치하는 id가 있는 경우 quantity를 증가')

- describe('decreaseCartItemQuantityById')
  - it('일치하는 id가 있는 경우 quantity를 감소')
    - it('store의 state는 초깃값을 가지고 있다.')
    - it('deleteCartItemByIdSaga success')
    - it('deleteCartItemByIdSaga failure')
    - it('store의 state는 초깃값을 가지고 있다.')

    - it('getCarts success 시 carts 상태를 저장 할 수 있다.'

    - it('getCarts failure')
- feat: ordersAsyncActions 액션 생성
  - getOrders(주문 목록 받아오기)

- feat: getOrders.success 시 서버에서 온 데이터 orderDetails 값 변경해서 스토어에 저장(OrderItem[])
  - feat: getOrdersSaga(주문 목록 받아오는 작업) 추가
  - ORDERS: 'orders' 상수 값

  - GetOrdersSuccessPayload: getOrders 성공 시 payalod 타입 선언

  - OrdersReducerState: ordersReducer 상태 타입 선언

  - OrderDetailFromServer: 서버에서 받아오는 원본orderDetail 타입 선언

  - OrderItemFromServer: 서버에서 받아오는 원본 타입 orderDetail 타입 선언
- feat: orders 상태 셀렉터 추가(orders,isLoadingOrders, hasErrorOrders, errorOrders)

- feat: getOrders(dispatch getOrders.request) orders 데이터 받아오는 액션 디스패치
  - feat: getOrders: 주문 목록 request
…디렉토리 제거하고, 기존 __test__ 디렉토리 위치에 test 코드 위치하도록 변경

  [example]

    (before)
    components/ExampleComponent/__test__/ExampleComponent.test.tsx

    (after)
      components/ExampleComponent/ExampleComponent 아래 ExampleComponent.tsx, ExampleComponent.test.tsx, ExampleComponent.stories 모두 위치
  - it('버튼이 렌더링 된다.')

  - it('버튼을 클릭하면 props로 받은 onClick 핸들러가 호출된다.')
  it('처음에 추가할 것인지 묻는 메시지와 담기 버튼이 렌더링 된다.')

  it('담기 버튼을 클릭하면 dispatch와 props로 받아온 closeModal 함수가 호출된다.')
  - feat: Default
  - feat: SmallButton(size props가 BUTTON_SIZE.SMALL) 추가
  - feat: MediumButton(size props가 BUTTON_SIZE.MEDIUM) 추가
  - feat: LargeButton(size props가 BUTTON_SIZE.LARGE) 추가
  - feat: Default 추가
  - feat: NoneCartItem(carts props이 빈 배열([])인 경우 화면) 추가
  - feat: Loading(isLoading props가 true, 로딩중 화면) 추가
  it('주문된 상품 정보를 보여준다.')
    - 상품 이름, 상품 가격, 상품 수량, 장바구니 담기 버튼
…주문 액수는 보여주는 상태에서 주문 내역이 없음을 알려주는 방식으로 변경

  - feat: renderOrderListItem(주문 목록이 0개라면 메시지를 보여주고, 아닌 경우 주문 아이템을 렌더링 하는 함수) 추가

  - refactor: renderOrderListItem을 이용해 주문 내역을 렌더링 하는 방식으로 변경
  - feat: Default(주문 정보가 있고, 로딩 상태가 아닌 경우) 추가
  - feat: NoneOrders(주문 정보가 없는 경우) 추가
  - feat: Loading(로딩중인 경우) 추가
@guymoon guymoon requested a review from woobottle March 24, 2022 16:57
@guymoon guymoon changed the title step3 [NEXTLEVEL 클린코드 리액트 조기문] 장바구니 미션 Step3 Mar 24, 2022
guymoon and others added 7 commits March 25, 2022 14:44
…부를 테스트하는 부분을 renderCartListItem에 추가해 선언적으로 테스트 작성하도록 수정

  - feat: renderCartListItem에 notCalledDispatch(유저 액션 후 dispatch 되지 않음) 추가
  - feat: renderCartListItem에 calledDispatch(유저 액션 후 dispatch 됨) 추가

  - refacotr: 수량에 따라 유저 액션(클릭) 후 액션이 dispatch 하는지를  expect(useDispatch).toHaveBeenCalledTimes(2)에서 calledDispatch() 를 사용해 테스트 하는 방식으로 수정

  - refacotr: 수량에 따라 유저 액션(클릭) 후 액션이 dispatch 하지 않는지를 expect(useDispatch).toHaveBeenCalledTimes(1)에서 notCalledDispatch() 를 사용해 테스트 하는 방식으로 수정
…MESSAGE 객체(상수)를 이용해 관리하는 방식으로 변경

  [message.ts]
    - feat: ALERT_MESSAGE(alert 관련 message를 담고 있는 객체) 추가
    - feat: CONFIRM_MESSAGE(confirm 관련 message를 담고 있는 객체) 추가

  [CartList.tsx]
    - refactor: 선택된 상품이 없을 때 ALERT_MESSAGE.EMPTY_SELECTED_CART_ITEM로 alert 하는 방식으로 수정

    - refactor: 결제를 할 것인지 확인 할 때 CONFIRM_MESSAGE.CONFIRM_PAY_IN_CARTS로 confirm 하는 방식으로 수정

  [useCarts.ts]

    - refactor: 장바구니에 상품을 추가 할때 이미 존재하는 아이템이면 ALERT_MESSAGE.ALREADY_EXIST_CART_ITEM로 alert 하는 방식으로 수정

    - refactor: 장바구니에 상품 추가를 완료했을 때 ALERT_MESSAGE.ADD_CART_SUCCESS로 alert 하는 방식으로 수정

    - refactor: 장바구니 상품 수량을 증가시킬 때 이미 최대면 ALERT_MESSAGE.MAX_CART_ITEM_QUANTITY로 alert 하는 방식으로 수정

    - refactor: 장바구니 상품 수량을 감소시킬 때 이미 최소면 ALERT_MESSAGE.MIN_CART_ITEM_QUANTITY로 alert 하는 방식으로 수정
…ntity 함수에서 최대/최소 값을 직접 참조하는 형태에서 인자로 최대/최소 값을 받아 평가하는 형태로 변경

  - refactor: isMaxCartItemQuantity에 최대 값을 나타내는 maxCartItemQuantity 인자 추가

   - refactor: isMinCartItemQuantity에 최대 값을 나타내는 minCartItemQuantity 인자 추가
…ervice에 상수 값을 두고, 이 값으로 모든 곳에서 최대/최소 값을 사용하는 방식으로 수정(최대/최소 값 변경에 유연한 대처 가능하도록 수정)

  [cartsService.ts]
    - feat: MAX_CART_ITEM_QUANTITY(장바구니 상품 최대 수량) 상수 추가
    - feat: MIN_CART_ITEM_QUANTITY(장바구니 상품 최소 수량) 상수 추가

  [cartsService.test.ts]
    - refactor: it('수량이 최대가 아니라면(유효한 수량이라면) false를 리턴한다.')에서 validQuantities(유효 값)을 임의로 만들어 테스트하던 방식에서 MAX_CART_ITEM_QUANTITY 값을 사용해 만들어 테스트하는 방식으로 수정

    - refactor: it('수량이 최소가 아니라면 false를 리턴한다') 에서 validQuantities(유효 값)을 임의로 만들어 테스트하던 방식에서 MAX_CART_ITEM_QUANTITY 값을 사용해 만들어 테스트하는 방식으로 수정
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants