[클린코드 리액트 3기 임대호] 장바구니 미션 Step1 (next-step#57)

* initial commit

* chore: @tanstack/react-query, @tanstack/react-router

* chore: storybook

* chore: 환경변수 세팅

* chore: msw

* style: add css templates

* chore: @vanilla-css, axios, classnames

* feat: Button 컴포넌트

* feat: Checkbox 컴포넌트

* feat: NumberInput 컴포넌트

* feat: GNB 컴포넌트

* feat: 상품 목록, 상품 상세, 장바구니, 주문 목록, 주문 상세 페이지 추가

* feat: PageTitle 컴포넌트

* feat: HighlightText 컴포넌트

* refactor: 컴포넌트 선언 방식 변경, index 컴포넌트 추가

* feat: 장바구니 추가, 삭제 기능 추가

* refactor: NumberInput 컴포넌트 value 핸들링 수정

* feat: 장바구니 선택, 결제예상금액 기능 추가

* chore: vite-plugin-svgr

* fix: mocking전 data fetching이 시작되는 오류

* feat: useModal, useClickAway hook 추가

* feat: 주문상세 > 장바구니 추가 기능

* refactor: asset directory 변경

* refactor: msw request intercept 되는 주소 수정

* chore: storybook react-docgen-typescript 설정

* feat: Modal storybook 추가

* feat: SnackBar 컴포넌트

* feat: 장바구니 추가 버튼 클릭시 snackbar 노출

* refactor: mocking parameter 수정

* feat: 주문상세페이지 장바구니 모달 추가

* feat: Badge 컴포넌트

* feat: 장바구니 Optimistic UI 적용

* feat: Skeleton 컴포넌트

* chore: zod

* feat: params type checking

* feat: loading 환경 개선

* feat: delay 설정 및 오류 수정

* feat: queryFunction validation

* feat: 상품 삭제 optimistic UI 적용

* refactor: zod type, scheme 정의

* refactor: 불필요파일 삭제

* refactor: gnb query

* fix: build error

* chore: package.json

* fix: prod msw 실행

* fix: development 환경으로 배포

* chore: chromatic

* chore: publish storybook

* refactor: Snackbar duration 추가

* refactor: NumberInput 중복 state 제거

* refactor: useClickAway

* refactor: useSelectItems Set 객체로 변경

* refactor: 컴포넌트 분리 및 삭제

.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+};

.github/workflows/publish-storybook.yaml

@@ -0,0 +1,51 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on:
+  push:
+    branches:
+      - main
+      - step1
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - run: pnpm install
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.TOKEN }}

.gitignore

@@ -148,4 +148,32 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# End of https://www.toptal.com/developers/gitignore/api/macos,windows,jetbrains+all
+# End of https://www.toptal.com/developers/gitignore/api/macos,windows,jetbrains+all
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log
+.env

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles/index.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Clean Code Shopping Cart</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,15 +1,60 @@
 {
-  "name": "server",
+  "name": "shopping-cart",
   "version": "1.0.0",
-  "main": "index.js",
-  "type": "commonjs",
+  "type": "module",
   "license": "MIT",
-  "devDependencies": {
-    "json-server": "^0.17.0",
-    "lowdb": "^1.0.0"
-  },
   "scripts": {
-    "server": "node server.js"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.28.6",
+    "@tanstack/react-router": "^1.22.2",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/recipes": "^0.5.2",
+    "axios": "^1.6.8",
+    "classnames": "^2.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@tanstack/react-query-devtools": "^5.28.6",
+    "@tanstack/router-devtools": "^1.22.2",
+    "@tanstack/router-vite-plugin": "^1.20.5",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vanilla-extract/vite-plugin": "^4.0.6",
+    "@vitejs/plugin-react": "^4.2.1",
+    "chromatic": "^11.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.8.0",
+    "msw": "^2.2.10",
+    "storybook": "^8.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "vite-plugin-svgr": "^4.2.0"
   },
-  "dependencies": {}
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
 }