-
Notifications
You must be signed in to change notification settings - Fork 87
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
Conversation
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
Co-authored-by: 윤정민 <[email protected]>
There was a problem hiding this 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에서 만나요~
안녕하세요 포코! 다시 만나게 돼서 반가워요😄
이번 step1은 바로 merge라고 들어서 아쉽네요..!
커밋 반영 범위
🥲아쉬운 점
아쉬운 점은 step2에서 반영해보도록 하겠습니다!
⭐ Step2에서 특히 피드백 받고 싶은 부분
학습 목표뿐만 아니라 웹 접근성과 변수/함수명 등을 이해하기 쉽게 작명하는 것에 관심이 많아서
이 부분들에 대해 많은 것을 배우고 싶습니다!
제가 웹 접근성을 놓친 부분이 있거나, 이해하기 어려운 이름(변수명, 함수명 등)이 있었다면 알려주시길 바랍니다😄