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

[장바구니 협업 Step 1] 야미(이다인) 미션 제출합니다. #113

Merged
merged 39 commits into from
May 25, 2023

Conversation

feb-dain
Copy link

@feb-dain feb-dain commented May 25, 2023

안녕하세요 포코! 다시 만나게 돼서 반가워요😄
이번 step1은 바로 merge라고 들어서 아쉽네요..!

커밋 반영 범위


🛒 장바구니 앱 실행하기 📕 스토리북 바로 보기

🥲아쉬운 점

  1. 사용성 개선을 하지 못함
  2. 렌더링 최적화를 하지 못함
  3. 리팩터링을 다 하지 못함

아쉬운 점은 step2에서 반영해보도록 하겠습니다!


⭐ Step2에서 특히 피드백 받고 싶은 부분

학습 목표뿐만 아니라 웹 접근성과 변수/함수명 등을 이해하기 쉽게 작명하는 것에 관심이 많아서
이 부분들에 대해 많은 것을 배우고 싶습니다!
제가 웹 접근성을 놓친 부분이 있거나, 이해하기 어려운 이름(변수명, 함수명 등)이 있었다면 알려주시길 바랍니다😄

feb-dain and others added 30 commits May 23, 2023 20:19
commit 4530bce
Author: Dain Lee <[email protected]>
Date:   Tue May 23 10:24:29 2023 +0900

    design: 체크박스 색상 변경

commit 8563b26
Author: Dain Lee <[email protected]>
Date:   Mon May 22 19:41:08 2023 +0900

    feat: 선택 삭제시 api delete하는 기능 구현

commit 39c9219
Author: Dain Lee <[email protected]>
Date:   Mon May 22 18:15:30 2023 +0900

    fix: 잘못된 경로 수정

commit f731da6
Author: Dain Lee <[email protected]>
Date:   Mon May 22 18:10:53 2023 +0900

    fix: 장바구니에서 수량 조절하면 아이템이 추가되는 에러 개선

commit 515e78e
Author: Dain Lee <[email protected]>
Date:   Mon May 22 18:07:14 2023 +0900

    feat: api delete 하는 기능 구현 및 필요없는 로직 제거

commit d69aa12
Author: Dain Lee <[email protected]>
Date:   Mon May 22 18:00:22 2023 +0900

    refactor: `[ERROR]` prefix 추가

commit 363fff5
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:57:46 2023 +0900

    fix: 오타 수정 (`post` → `delete`)

commit dc98873
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:45:50 2023 +0900

    delete: 상품이 이미 있는지 없는지 확인하는 로직 삭제

commit 26cbba4
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:40:45 2023 +0900

    feat: api post, patch 하는 기능 구현

    updateCart와 addToCart 함수 분리

commit 2f11a07
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:39:01 2023 +0900

    fix: 상품이 두 번 저장되는 오류 개선

commit 3868c4f
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:38:24 2023 +0900

    feat: 로딩중일 때 빈화면 대신 `로딩중...` 문구 띄우는 기능 구현

commit b8b66e3
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:37:47 2023 +0900

    feat: fetch api 추상화 및 fetchData 커스텀 훅 리팩터링

commit b452b68
Author: Dain Lee <[email protected]>
Date:   Mon May 22 17:13:06 2023 +0900

    feat: msw handler 생성

commit 37ee41c
Author: Dain Lee <[email protected]>
Date:   Mon May 22 13:08:03 2023 +0900

    refactor: `getDataFromLocalStorage`에도 타입 지정

commit 50e4503
Author: Dain Lee <[email protected]>
Date:   Mon May 22 13:01:22 2023 +0900

    refactor: 변수명 명확하게 변경

commit 5dd12b6
Author: Dain Lee <[email protected]>
Date:   Mon May 22 03:05:44 2023 +0900

    refactor: 웹 접근성 개선

commit 32838b5
Author: Dain Lee <[email protected]>
Date:   Mon May 22 02:23:06 2023 +0900

    docs: step2 README 추가

commit 0f66d83
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:57:17 2023 +0900

    fix: 자동 배포 오류 개선

commit 8e9d966
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:51:10 2023 +0900

    test: `Price` 컴포넌트 storybook 작성

commit fff319b
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:39:03 2023 +0900

    design: 장바구니 비었을 때 이미지 반응형 디자인

commit 334177d
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:34:04 2023 +0900

    test: `SelectedProductList` 컴포넌트 storybook 작성

commit b7b817f
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:16:49 2023 +0900

    test: 수량 변화에 따라 달라지는 `QuantityButtom` story 추가

commit f87de02
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:13:08 2023 +0900

    test: `CartPage` storybook 작성

commit 5f172c6
Author: Dain Lee <[email protected]>
Date:   Mon May 22 01:10:08 2023 +0900

    feat: 장바구니가 비었을 때 빈 목록 대신 이미지 추가

commit bd43531
Author: Dain Lee <[email protected]>
Date:   Sun May 21 23:54:55 2023 +0900

    test: `SelectedProductItem` 컴포넌트 storybook 작성

commit 62d0bde
Author: Dain Lee <[email protected]>
Date:   Sun May 21 23:40:31 2023 +0900

    test: `QuantityButton` 컴포넌트 storybook 작성

commit 6978df4
Author: Dain Lee <[email protected]>
Date:   Sun May 21 23:39:12 2023 +0900

    test: `Order` 컴포넌트 storybook 작성

commit 13e2505
Author: Dain Lee <[email protected]>
Date:   Sun May 21 23:38:34 2023 +0900

    refactor: 총 상품가격 구하는 로직 recoil `selector`로 분리

commit 0986a7f
Author: Dain Lee <[email protected]>
Date:   Sun May 21 21:14:58 2023 +0900

    test: 반복되는 코드 함수로 분리

commit b39f9d0
Author: Dain Lee <[email protected]>
Date:   Sun May 21 19:56:01 2023 +0900

    desgin: `Order` 컴포넌트 간격 조절

commit 7f6f5a2
Author: Dain Lee <[email protected]>
Date:   Sun May 21 19:45:43 2023 +0900

    design: 장바구니 모바일 패딩값 줄임

commit 72618ca
Author: Dain Lee <[email protected]>
Date:   Sun May 21 19:39:31 2023 +0900

    design: 장바구니 수량 조절 버튼 디자인 변경

commit ab564c7
Author: Dain Lee <[email protected]>
Date:   Sun May 21 18:47:38 2023 +0900

    refactor: 상수화

commit 113f307
Author: Dain Lee <[email protected]>
Date:   Sun May 21 18:41:38 2023 +0900

    feat: `QuantityButton` 컴포넌트 만들어 버튼으로만 수량 조절 가능하게 하는 기능 구현

commit 72eaec7
Author: Dain Lee <[email protected]>
Date:   Sun May 21 17:30:24 2023 +0900

    refactor: `onInput`을 이용해 input에 숫자만 허용하는 기능 구현

commit b00f438
Author: Dain Lee <[email protected]>
Date:   Sun May 21 17:05:53 2023 +0900

    feat: 휴지통 아이콘 클릭시 선택된 상품 수가 1만큼 줄어드는 기능 구현

commit a4f16f9
Author: Dain Lee <[email protected]>
Date:   Sun May 21 14:38:49 2023 +0900

    design: 반응형 디자인

commit bc042c3
Author: Dain Lee <[email protected]>
Date:   Sun May 21 14:32:09 2023 +0900

    design: 체크박스 커스텀 디자인으로 변경

commit 6ce669c
Author: Dain Lee <[email protected]>
Date:   Fri May 19 15:48:02 2023 +0900

    feat: 장바구니 선택 삭제 기능 구현

commit 0db097a
Author: Dain Lee <[email protected]>
Date:   Fri May 19 11:32:43 2023 +0900

    feat: 체크된 상품 가격만 계산하는 기능 구현

commit ecf14ce
Author: Dain Lee <[email protected]>
Date:   Fri May 19 11:28:03 2023 +0900

    feat: 장바구니 체크박스 기능 구현

    1) 전체 선택 체크박스의 체크 여부에 따라 장바구니에 담긴 모든 상품들의 체크박스가 결정된다.
    2) 각 상품의 체크박스 중 체크 안 된 박스가 있다면 전체선택 체크박스도 체크되지 않는다.

commit 3eda930
Author: Dain Lee <[email protected]>
Date:   Thu May 18 19:52:04 2023 +0900

    fix: Storybook 이미지 경로 에러 개선

commit 894083c
Author: Dain Lee <[email protected]>
Date:   Thu May 18 19:39:08 2023 +0900

    fix: Storybook msw 적용후 발생한 경로 에러 해결

commit e297b73
Author: Dain Lee <[email protected]>
Date:   Thu May 18 19:30:49 2023 +0900

    fix: 스토리북 배포 오류 개선

commit b12618a
Author: Dain Lee <[email protected]>
Date:   Thu May 18 18:53:52 2023 +0900

    refactor: 필요없는 코드 제거

commit c899444
Author: Dain Lee <[email protected]>
Date:   Thu May 18 18:51:16 2023 +0900

    chore: msw 적용

commit 883f88b
Author: Dain Lee <[email protected]>
Date:   Thu May 18 10:59:41 2023 +0900

    refactor: `div` → `section` 태그로 변경 (시맨틱 태그 사용)

commit 02ccfbd
Author: Dain Lee <[email protected]>
Date:   Wed May 17 23:46:00 2023 +0900

    refactor: useHandleQuantityInput 커스텀 훅 만들어 중복 코드 제거

commit 59f5ad2
Author: Dain Lee <[email protected]>
Date:   Wed May 17 15:43:05 2023 +0900

    feat: 휴지통 아이콘 누르면 장바구니에서 해당 상품 삭제되는 기능 구현

commit 485386c
Author: Dain Lee <[email protected]>
Date:   Wed May 17 15:42:19 2023 +0900

    feat: 장바구니에서도 수량 조절할 수 있는 기능 추가

commit d39a8fd
Author: Dain Lee <[email protected]>
Date:   Wed May 17 14:26:38 2023 +0900

    design: 장바구니 페이지 전반적으로 글자 크기 줄임

commit 4e39369
Author: Dain Lee <[email protected]>
Date:   Wed May 17 13:47:25 2023 +0900

    refactor: Price 컴포넌트 범용성 증진

commit 1a8735b
Author: Dain Lee <[email protected]>
Date:   Wed May 17 11:23:56 2023 +0900

    feat: 장바구니에 담긴 총 상품 가격 계산하는 기능 구현

commit bca32e0
Author: Dain Lee <[email protected]>
Date:   Wed May 17 10:54:11 2023 +0900

    feat: 장바구니에 담은 상품 가격 계산하는 기능 구현

commit 3acb86c
Author: Dain Lee <[email protected]>
Date:   Wed May 17 10:53:08 2023 +0900

    feat: 장바구니에 담은 상품 수 UI랑 연동

commit 5b7f1ba
Author: Dain Lee <[email protected]>
Date:   Wed May 17 10:47:05 2023 +0900

    feat: Price 컴포넌트 구현

commit 008d3f6
Author: Dain Lee <[email protected]>
Date:   Wed May 17 10:00:04 2023 +0900

    feat: SelectedProductItem 컴포넌트 구현

commit 2f9771c
Author: Dain Lee <[email protected]>
Date:   Wed May 17 09:57:03 2023 +0900

    fix: Storybook autodocs에서 QuantityInput의 증감 버튼이 보이지 않는 오류 개선

    Storybook autodocs의 바탕 영역이 `z-index: 0`이라 `z-index:
    1`이었던 QuantityInput의 증감 버튼이 보이지 않았던 것.

commit 3a5daf6
Author: Dain Lee <[email protected]>
Date:   Tue May 16 21:21:32 2023 +0900

    refactor: Product 타입 재사용

commit 79a0bba
Author: Dain Lee <[email protected]>
Date:   Tue May 16 21:18:21 2023 +0900

    feat: TrashCanIcon 컴포넌트 구현

commit 8aa6fc4
Author: Dain Lee <[email protected]>
Date:   Tue May 16 16:54:06 2023 +0900

    feat: SelectedProductList 컴포넌트 UI 구현

commit 70d24c3
Author: Dain Lee <[email protected]>
Date:   Tue May 16 15:50:40 2023 +0900

    rename: 컴포넌트 안에 페이지별 폴더 생성 후 파일 이동

commit 1740f2b
Author: Dain Lee <[email protected]>
Date:   Tue May 16 14:46:06 2023 +0900

    feat: Order 컴포넌트 UI 구현

commit fe4dad2
Author: Dain Lee <[email protected]>
Date:   Tue May 16 12:35:25 2023 +0900

    test: Storybook에 Router 추가

commit 0df6232
Author: Dain Lee <[email protected]>
Date:   Tue May 16 12:10:11 2023 +0900

    refactor: `div` 태그 대신 `main` 태그 사용

commit 6c36b68
Author: Dain Lee <[email protected]>
Date:   Tue May 16 12:08:45 2023 +0900

    feat: Button 컴포넌트 구현

commit 0617340
Author: Dain Lee <[email protected]>
Date:   Tue May 16 11:42:19 2023 +0900

    refactor: 페이지 이동 기능 useGoToAnotherPage 커스텀 훅으로 분리능

commit 37c3ca7
Author: Dain Lee <[email protected]>
Date:   Tue May 16 11:26:28 2023 +0900

    feat: 장바구니 페이지가 아닌 페이지에서 장바구니 클릭시 장바구니 페이지로 이동하는 기능 구현

commit 94a84af
Author: Dain Lee <[email protected]>
Date:   Tue May 16 11:26:01 2023 +0900

    feat: 메인 페이지가 아닌 페이지에서 로고 클릭시 메인 페이지로 이동하는 기능 구현

commit 630c3cd
Author: Dain Lee <[email protected]>
Date:   Tue May 16 11:17:51 2023 +0900

    feat: CartPage 생성

commit bb22c44
Author: Dain Lee <[email protected]>
Date:   Mon May 15 18:07:16 2023 +0900

    refactor: 필요없는 코드 제거

commit 6f13553
Author: Dain Lee <[email protected]>
Date:   Mon May 15 14:46:50 2023 +0900

    refactor: 접근성 개선 및 상품명 1줄만 나오도록 변경

commit abf8436
Author: Dain Lee <[email protected]>
Date:   Mon May 15 14:36:49 2023 +0900

    chore: 자동 배포 브랜치 stpe2로 변경

commit 942a11c
Author: Dain Lee <[email protected]>
Date:   Mon May 15 01:22:02 2023 +0900

    [장바구니 미션 Step 1] 야미(이다인) 미션 제출합니다. (woowacourse#168)

    * docs: 기능 목록 작성

    Co-authored-by: 박정규 <[email protected]>

    * chore: react 초기 설정 및 recoil 설치

    Co-authored-by: 박정규 <[email protected]>

    * feat: input 컴포넌트 구현

    Co-authored-by: 박정규 <[email protected]>

    * fix: styled-components 설치 안 되는 에러 해결

    styled-components를 최신 버전으로 설치하여 에러 해결 (@latest)

    * design: reset.css 추가 및 글로벌 스타일 적용

    * feat: QuantityInput 컴포넌트 구현

    * test: Input 컴포넌트 storybook 작성

    * feat: Icon 컴포넌트 구현

    * feat: ProductItem 컴포넌트 구현

    * feat: ProductList 컴포넌트 생성

    * feat: type number `input`에 스크롤 방지 기능 구현

    * feat: 카트 아이콘 클릭시 수량 조절 인풋으로 바뀌는 기능 구현

    * feat: 데이터 불러오는 유틸 함수 생성성

    * refactor: fetchData 함수 타입도 유틸화

    * feat: 수량이 1개일 때 ▼ 버튼 클릭시 카트 아이콘으로 변하는 기능 구현

    * refactor: props 축약

    * test: 아이콘 컴포넌트 storybook 작성

    * refactor: `useState` → `useRecoilState`로 변경

    * feat: Header 컴포넌트 구현

    * feat: Cart 컴포넌트 구현

    * feat: 장바구니에 담은 상품 가짓수만큼 상품 수 배지 숫자 변하는 기능 구현

    * design: 전체적인 CSS 개선

    * test: Header storybook 작성

    * test: Icon에 Header Icon story 추가

    * test: storybook에 배경색 지정할 수 있는 기능 구현

    * refactor: Recoil state를 읽기 전용, 쓰기 전용으로 구체화

    * feat: 장바구니에 추가한 상품 목록 로컬스토리지에에 저장하는 기능 구현

    * feat: 수량 조절시 로컬스토리지에 수량 저장하는 기능 구현

    * refactor: 메인 페이지로 분리

    * test: MainPage storybook 작성

    * test: 필요없는 코드 및 any 타입 제거

    * chore: 자동 배포 설정

    * fix: 자동 배포시 404 오류 개선

    * fix: 상품명과 수량 조절 인풋이 겹치는 현상 개선

    * docs: README 작성

    * fix: 자동 배포시 404 오류 개선

    * refactor: 중복 상속 제거

    * refactor: 불필요한 타입 지정 제거

    * fix: 상품명과 수량 조절 인풋이 겹치는 현상 개선

    * refactor: 상수명 명확하게 변경 및 비슷한 상수 객체로 묶음

    * design: 화면 크기마다 하나의 행에 보여지는 아이템 개수 변경

    * refactor: `aria-label` 추가해 접근성 개선

    * test: MainPage Interaction test 작성

    * design: Product Item 이름과 가격 반응형으로 크기 조절

    * feat: CartIcon 컴포넌트 구현

    - refactor: 필요없는 코드 삭제

    * test: story 제목 `Cart` → `Header`로 변경

    * test: MainPage Interaction 상수명 명확화

    * refactor: Input 컴포넌트 범용성 증진

    * refactor: 타입 단언(as) 및 필요없는 개행 제거

    * refactor: fetchData 유틸 범용성 증진

    * feat: fetchData 유틸을 이용한 useSetFetchedData 커스텀 훅 구현

    * refactor: 관심사 분리 (productListUrl 상수화)

    * refactor: localStorage getter/setter 한 곳에 관리 및 key 상수화

    * rename: `useSetCart` -> `useCart` 커스텀 훅 이름 변경

    * refactor: recoil의 atom, selector 분리

    * refactor: `selectorFamily` 사용 및 필요없는 코드 제거

    * fix: input 비우고 새로고침시 카트 아이콘이 아니라 input에 0이 나오는 에러 개선

    * refactor: 함수 분리 및 조건문 상수로 선언 (가독성 증진)

    * fix: `input type=number`에 한글이 입력되는 에러 개선

    * refactor: Input 컴포넌트 CSS Prop 이름 `styled` → `css`로 변경

    * refactor: Icon 컴포넌트 CSS Prop 이름 `svgStyle/styled` → `css`로 변경

    * refactor: 중복 코드 줄임

    * refactor: `useLoadCart` 커스텀 훅으로 분리

    + 상수화, 개행 수정

    * docs: README에 이미지 추가

    * docs: README에 storybook 배포 링크 추가

    * docs: README에 설명 추가

    * docs: README 수정

    * fix: @storybook/jest 관련 자동 배포 오류 개선

    * style: `;` 추가

    * refactor: 유효성 검사 강화

    유효하지 않은 값은 localStorage에 저장되지 않도록 함

    * design: Header 로고와 이름 반응형으로 크기 조절

    * refactor: 필요없는 코드 제거

    * refactor: 웹 접근성 향상

    * fix: 한 개의 input 값을 모두 지웠을 때 장바구니가 모두 비워지는 오류 수정

    * chore: eslint로 import 순서 정리

    * refactor: `storybook-addon-a11y` 이용해 접근성 개선

    * feat: favicon 추가 및 ios 모바일에서 input 클릭시 화면 확대 방지 기능 구현

    * feat: `react-router-dom` 설치 후 `Router` 사용

    ---------

    Co-authored-by: 박정규 <[email protected]>

commit 0191f7c
Author: Poco <[email protected]>
Date:   Mon May 9 00:30:52 2022 +0900

    feat: remove requirements

commit 322cbb6
Author: 장현석 <[email protected]>
Date:   Tue May 4 13:09:25 2021 +0900

    fix typos

commit bbb5e8c
Author: devJang <[email protected]>
Date:   Tue May 4 13:04:27 2021 +0900

    feat: add contents
@feb-dain feb-dain changed the base branch from main to feb-dain May 25, 2023 08:58
@pocojang pocojang self-requested a review May 25, 2023 11:49
@pocojang pocojang self-assigned this May 25, 2023
Copy link

@pocojang pocojang left a comment

Choose a reason for hiding this comment

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

@feb-dain 👋
또 만나서 반갑습니다!

아주 컴포넌트를 잘게 나누고 시멘틱하게 선언하셨네요.
고민 많으셨을 것 같은데 훌륭합니다.
다만 너무 잘게 나누다보니 뭔가 붕뜨는 부분도 있는 것 같아요.

미션에서 navigator.onLine을 사용하는건 .. 처음 보는군요 대단합니다!!
접근성은 최고네요.. 대신 접근성은 웬만하면 ESLint 확장을 통해 의존하셨으면 좋겠습니다 :)
또한 학습할 것도 많은데 너무~~ 접근성에 신경쓰시지는 않으셨으면 좋겠어요!
잘못은 없지만 뭐든지 적당한게 최고니까요!

마지막으로 비동기 함수를 작성하실때 async & return await를 쓰시던데 반환과 await를 함께 쓰는게 의미가 있는지 알아보시는게 좋겠어요!

그럼 스텝2에서 만나요~

@pocojang pocojang merged commit 0ba8b70 into woowacourse:feb-dain May 25, 2023
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