[1단계 - 장바구니] 호프(김문희) 미션 제출합니다.

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

.gitignore

@@ -0,0 +1,25 @@
+# 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*
+
+.env 

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  singleQuote: true, // 작은 따옴표 사용
+  trailingComma: 'all', // 꼬리 콤마 사용
+  proseWrap: 'never', // 마크다운 포매팅 제외
+  endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
+};

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,19 @@
+import { addDecorator } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import StyleTheme from '../src/style/theme';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((story) => (
+  <MemoryRouter>
+    <StyleTheme>{story()}</StyleTheme>
+  </MemoryRouter>
+));

REQUIRENMENTS.md

@@ -0,0 +1,35 @@
+# 장바구니
+
+- [x] CDD - 컴포넌트 개발
+  - [x] Header 컴포넌트 만들기
+  - [x] MenuItem 컴포넌트 만들기
+  - [x] ProductItem 컴포넌트 만들기
+  - [x] ProductsContainer 컴포넌트 만들기
+  - [x] ProductList Page 컴포넌트 만들기
+- [x] Mock Data 만들기
+
+- [x] redux 적용
+
+  - [x] redux-thunk 적용
+  - [x] axios 적용
+
+- [x] 데이터 로딩 시 스켈레톤 UI를 보여준다.
+- [x] 데이터가 비어 있을 시 비어있음 이미지를 보여준다.
+- [x] API 에러 발생 시 에러 이미지를 보여준다.
+
+- [x] 라우팅(상품목록, 상품상세, 장바구니)
+- [x] 상품 상세 페이지
+
+  - [x] UI 컴포넌트 작성
+  - [x] 상품 목록에서 상품 클릭 시 id를 받아서 해당 상품 상세 페이지로 라우팅 및 렌더링
+  - [x] product 리듀서 만들기
+
+- [x] 공통컴포넌트 레이아웃 Outlet으로 리팩토링
+- [x] 커스텀 훅 (dispatch, useSelector) 만들기
+- [x] 상품상세 페이지를 보고 뒤로가기하면 불필요하게 다시 API 요청하지 않도록 만들기
+- [x] 스토리북 정상 작동하게 만들기
+- [x] Not Found Page 작성
+
+- [x] cart 리듀서 만들기
+- [x] 장바구니 넣기 기능(같은 아이템을 중복으로 장바구니에 넣을 경우 수량을 1개씩 증가한다)
+- [ ] 장바구니 페이지

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}