[장바구니 미션 Step 2] 푸만능(황준승) 미션 제출합니다. (#223)

* chore: js로 react 웹팩 + babel 설정

* chore: Webpack + babel 설정하기 (TS로 설정)

* chore: Styled-Component 설치 및 Webpack 설정

* chore: 프로젝트 절대경로 설정

* chore: react-router-dom 설정

* chore: Webpack 이미지, 폰트 로드 설정하기

* chores: eslint + prettier 설정

* chore: husky, lint-staged 설정 완료

* chore: Github Action 설정하기

* chore: recoil 설정 완료

* chore: storybook 설정 완료 [#2]

* feat: Header UX/UI 구현 [#4]

* feat: Spinner 컴포넌트 구현 [#5]

* refactor(app): step1 코드 전체 복사 및 웹팩 마이그레이션

* chore: github 액션 테스트 코드 실행 추가

* chore: msw 셋팅 [#6]

* fix(constant): 바뀐 서버 URL 수정

* feat(mocks): msw 임의의 백엔드 로직 구현

* refactor(MultiSelector): Compound Component로 MultiSelector 직접 구현

* refactor(type): Product 타입 수정 및 적용

* feat(img): 휴지통 아이콘 로컬에 저장

* feat(mock): CartHandler 코드 수정

* refactor(global): 공통된 a 태그 스타일 수정

* refactor(constant): URL 전역 상태 수정

* feat(CartItem): CartItem 컴포넌트 구현

* refactor(Header): 헤더 컴포넌트 구현

* feat(hooks): useQuery 커스텀 훅 구현

* feat(CartButton): CartButton 공통 컴포넌트 구현

* feat(CheckBox): CheckBox 공통 컴포넌트 구현

* refactor(useCart): useCart에 mock server 요청 로직 추가

* refactor(ProductList): ProductList 컴포넌트 리팩토링

* refactor(ProductItem): 공통 컴포넌트 CartButton으로 인한 코드 리팩토링

* refactor(atoms): product fetch 코드 수정

* feat(PaymentBox): PaymentBox 컴포넌트 구현

* feat(CartDetailPage): CartDetailPage 컴포넌트 구현

* feat(ProductPage): 기존에 사용하던 Suspense, ErrorBoundary 제거

* feat(fetcher): fetcher 함수 구현

* chore(eslintrc): eslintrc 설정 추가

* chore: 개발 환경 셋팅 수정

* chore: 배포 환경 설정 변경

* chore: 배포 환경 설정 변경 2

* chore: 배포 환경 설정 변경 3

* chore: 배포 개발 환경 셋팅

* chore: 배포 개발 환경 셋팅 4

* chore: 모든 파일 삭제

* fix: pull request 안되는 문제 해결

* refactor: useCart 테스트 코드 리팩토링

* feat: 에러 상황에 따른 에러 코드 보여주기 기능 추가 및 테스트 코드 추가

* refactor(useQuery): catch 구문일 때 error 처리로 코드 변경

* refactor(cartItem) 가독성을 위한 삼항연산자 제거

.babelrc

@@ -0,0 +1,36 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
+    ],
+    "@babel/react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-root-import",
+      {
+        "rootPathPrefix": "@",
+        "rootPathSuffix": "src"
+      }
+    ]
+  ],
+  "env": {
+    "development": {
+      "plugins": ["babel-plugin-styled-components"]
+    }
+  }
+}
+
+// babel로 컴파일을 할 때, target을 지정
+// 브라우저의 상위 버전 두 개(IE 11, 10)과
+// 한국 5% 이상의 점유율을 가지고 있는 브라우저에 대응하도록 컴파일 설정
+// @babel/react를 통해 react도 컴파일 할 수 있도록 설정
+// babel, babelrc 이란 무엇인가?
+// https://tecoble.techcourse.co.kr/post/2021-07-07-babel/#:~:text=.babelrc%20%EB%8A%94%20%EC%A3%BC%EB%A1%9C%20%ED%95%98%EC%9C%84%20%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC,%EB%B3%B4%EB%8B%A4%20%EB%B3%B4%ED%8E%B8%EC%A0%81%EC%9C%BC%EB%A1%9C%20%EC%82%AC%EC%9A%A9%EB%90%A9%EB%8B%88%EB%8B%A4.
+
+// babel-plugin-styled-components
+// development 환경일 경우 class 명을 구별하기 쉽도록
+// babel-plugin-styled-components를 설정
+// product환경일 경우 class명을 hash화

.eslintrc

@@ -0,0 +1,43 @@
+// eslint + prettier 설정 참조 링크 
+// https://flamingotiger.github.io/javascript/eslint-setup/
+// https://www.daleseo.com/eslint-config/
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react-hooks"],
+  "extends": [
+    "airbnb-base",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module",
+    "ecmaVersion": 11
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": ["build", "dist", "public", "webpack.config.js"],
+  "rules": {
+    "no-console": "warn",
+    "import/prefer-default-export": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "import/no-extraneous-dependencies": "off",
+    "react/prop-types": 0
+  }
+}

.github/workflows/build.yml

@@ -0,0 +1,27 @@
+name: Automatically Deployment
+
+on: 
+  push: 
+    branches:
+    - "develop"
+
+jobs: 
+  build: 
+    runs-on: ubuntu-latest
+    # 해당 Job의 이름을 아래와 같이 설정하여 Actions 탭에서 확인할 수 있게 설정합니다.
+    name: Deploying App
+
+    # Node 환경을 설정하여 npm 커맨드를 사용할 수 있도록 하는 Action을 불러옵니다.
+    steps: 
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with: 
+        node-version: '16'
+
+    # 해당 프로젝트에서 사용하는 모든 라이브러리 설치
+    - name : Install Dependencies
+      run: npm ci
+
+    # React 프로젝트 빌드
+    - name : Build App
+      run : npm run build

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Check the source code
+on:
+  pull_request:
+    branches:
+      - "develop"
+jobs:
+  test:
+    name: Check the source code
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+    # yarn install
+    - name: Install Dependencies
+      run: npm ci
+
+    # prettier test
+    - name: Prettier Test
+      run: npm run format
+
+    # eslint test
+    - name: Lint
+      run: npm run lint
+
+    # test code 
+    - name: Test
+      run: npm run test  

.gitignore

@@ -1,23 +1,2 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+/dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint-staged

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "parser": "typescript",
+  "semi": true,
+  "useTabs": true,
+  "printWidth": 80
+}

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+	],
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+  "typescript.validate.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+}

__tests__/useCart.test.ts

@@ -0,0 +1,65 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import fetchMock from 'jest-fetch-mock';
+import { createMockProduct } from '../cypress/fixtures/defaultProducts';
+import { useCart } from '@/components/ProductItem/hooks/useCart';
+
+const mockProduct = createMockProduct();
+
+beforeAll(() => {
+	fetchMock.enableMocks();
+});
+
+afterAll(() => {
+	fetchMock.disableMocks();
+});
+
+// 테스트 코드
+describe('useCart', () => {
+	it('장바구니에 상품 하나를 추가한다.', async () => {
+		const { result } = renderHook(() => useCart(), {
+			wrapper: RecoilRoot,
+		});
+
+		expect(result.current.cart).toEqual([]);
+
+		await waitFor(() => {
+			result.current.addCart(mockProduct);
+		});
+
+		const { quantity, product } = result.current.cart[0];
+
+		expect(quantity).toEqual(1);
+		expect(product).toEqual(mockProduct);
+	});
+
+	it('기존에 있던 장바구니 상품의 수량을 변경한다.', async () => {
+		const { result } = renderHook(() => useCart(), {
+			wrapper: RecoilRoot,
+		});
+
+		await waitFor(() => {
+			result.current.updateCart(5, mockProduct);
+		});
+
+		const { quantity, product } = result.current.cart[0];
+
+		expect(quantity).toEqual(5);
+		expect(product).toEqual(mockProduct);
+	});
+
+	test('기존에 있던 장바구니 상품 하나를 제거한다.', async () => {
+		const { result } = renderHook(() => useCart(), {
+			wrapper: RecoilRoot,
+		});
+
+		await waitFor(() => {
+			result.current.deleteCart(mockProduct);
+		});
+
+		const { cart } = result.current;
+
+		expect(cart).toHaveLength(0);
+	});
+});

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+	e2e: {
+		setupNodeEvents(on, config) {
+			// implement node event listeners here
+		},
+	},
+});