[클린코드 리액트 3기 조용준] 장바구니 미션 Step1 (#55)

* init: 장바구니 미션 초기 설정

* chore: barrels config 추가

* feat: msw handler, Product, Cart, Order 추가

* feat: panda css 적용

* feat: tanstack-query, tanstack-router 설정 추가

* feat: route 설정 추가

* feat: GlobalNavigation 컴포넌트 추가

* feat: Button 컴포넌트 추가

* feat: Typography 컴포넌트 추가

* feat: Layout 컴포넌트 추가

* refactor: GlobalNavigation 로고, 텍스트 개선

* refactor: Layout Root, Header, Body 분리

* feat: Products, Product 컴포넌트 추가

* fix: allCarts 데이터는 Array로 변경 및 관련 API 로직 데이터 형식에 맞게 개선

* feat: generateQueryKey, generateQueryParams, localStorageUtils 유틸 함수 추가

* feat: react queryKeys 추가

* feat: product queries 추가

* feat: cart queries 추가

* chore: chromatic 연동

* feat: 레이아웃 및 상품 페이지 리스트 추가

* chore: build dev 모드로 변경

* refactor: 상품의 장바구니 추가, 삭제 queries 디렉토리 변경

* remove: reference css 파일 삭제

* refactor: 카트의 add, remove localStorage 동작을 queries에 반영

* feat: Alert 추가

* feat: ProductDetail 페이지, useAddCart custom hook 추가

* refactor: 상품 리스트 상품의 장바구니 기능은 추가 후 Alert이 노출되도록 개선

* refactor: Alert message에 Typography 적용 및 useAlertStore 사용 개선

* fix: 상품리스트, 상세 페이지가 unmount 되는경우, Alert 비활성화 되도록 개선

* chore: ErrorBoundary 패키지 추가

* refactor: ProductDetail 컴포넌트를 Compound로 개선

* refactor: 상품 상세 페이지의 ProductDetail 컴포넌트 내 ErrorBoundry 적용

* feat: EmptyDescription 컴포넌트 추가

* feat: 상품목록, 상품상세, 장바구니, 주문 페이지의 정보가 없는경우 EmptyDescription 표기

* feat: useOverlay 추가

* feat: useAlert 추가

* refactor: useAlertStore를 useAlert를 활용하도록 변경

* refactor: Alert 컴포넌트에서 Overlay 컴포넌트 분리

* feat: IconButton, UnderlineButton, Divider 컴포넌트 추가

* feat: OrdeRHistory 컴포넌트 추가

* feat: 주문내역 페이지, OrderHistory 컴포넌트 추가

* refactor: 주문목록 API 연동 및 로딩 UI 추가

* feat: Google Analytics 적용

* feat: Google Tag Manager 적용

.eslintignore

@@ -0,0 +1 @@
+src/routeTree.gen.ts

.eslintrc.json

@@ -0,0 +1,141 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "unused-imports"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "import/extensions": [
+      "off"
+    ],
+    "import/prefer-default-export": "off",
+    "no-plusplus": "off",
+    "semi": [
+      "error",
+      "always"
+    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [
+          ".tsx",
+          ".jsx"
+        ]
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "@[a-zA-Z]*/[a-zA-Z]*",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "builtin"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "@typescript-eslint/type-annotation-spacing": [
+      "error"
+    ],
+    "@typescript-eslint/method-signature-style": [
+      "error"
+    ],
+    "unused-imports/no-unused-imports": [
+      "error"
+    ],
+    "react/jsx-indent-props": [
+      "error",
+      "first"
+    ],
+    "react/jsx-curly-newline": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-wrap-multilines": "off",
+    "no-unused-vars": "off",
+    "no-proto": "off",
+    "camelcase": "off",
+    "class-methods-use-this": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "max-classes-per-file": "off",
+    "max-len": "off",
+    "no-param-reassign": "off",
+    "no-shadow": "off",
+    "no-undef": "off",
+    "no-underscore-dangle": "off",
+    "no-use-before-define": "off",
+    "no-useless-escape": "off",
+    "react/jsx-no-useless-fragment": "off",
+    "react/no-array-index-key": "off",
+    "react/no-unused-prop-types": "off",
+    "react/require-default-props": "off",
+    "react/function-component-definition": "off",
+    "react/react-in-jsx-scope": "off",
+    "no-console": "off",
+    "no-alert": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  },
+  "overrides": [
+    {
+      "files": [
+        "src/**/*.spec.ts",
+        "src/**/*.spec.tsx"
+      ],
+      "plugins": [
+        "vitest"
+      ],
+      "extends": [
+        "plugin:vitest/recommended"
+      ],
+      "rules": {
+        "vitest/expect-expect": "off"
+      },
+      "globals": {
+        "globalThis": true,
+        "describe": true,
+        "it": true,
+        "expect": true,
+        "beforeEach": true,
+        "afterEach": true,
+        "beforeAll": true,
+        "afterAll": true,
+        "vi": true
+      }
+    }
+  ]
+}

.github/workflows/chromatic.yaml

@@ -0,0 +1,33 @@
+name: Chromatic Deployment
+
+on:
+  push:
+    branches:
+      - main
+      - bytrustu
+    paths:
+      - 'src/components/**'
+      - 'src/styles/**'
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Run Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: chpt_806b995c8415312
+          projectToken: chpt_806b995c8415312
+          exitZeroOnChanges: true