[1단계 - 장바구니 미션] 엘라(김현주) 미션 제출합니다

.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": ["react-app", "react-app/jest", "prettier", "airbnb"],
+  "plugins": ["prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.stories.*"],
+      "rules": {}
+    }
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "import/no-anonymous-default-export": "off",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    "react/react-in-jsx-scope": 0,
+    "comma-dangle": "off",
+    "react/jsx-props-no-spreading": "off",
+    "arrow-parens": "off",
+    "import/prefer-default-export": "off",
+    "object-curly-newline": "off",
+    "max-len": "off",
+    "operator-linebreak": "off",
+    "consistent-return": "off",
+    "implicit-arrow-linebreak": "off",
+    "function-paren-newline": "off",
+    "no-alert": "off",
+    "no-param-reassign": "off"
+  }
+}

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react-shopping-cart-6509f"
+  }
+}

.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*
+
+/.firebase

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

.storybook/main.js

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

.storybook/preview.js

@@ -0,0 +1,23 @@
+import { configure, addDecorator } from '@storybook/react';
+import * as React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import GlobalStyles from '../src/GlobalStyles';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator(style => (
+  <>
+    <GlobalStyles />
+    <Router>{style()}</Router>
+  </>
+));
+
+configure(require.context('../src', true, /\.stories\.js?$/), module);

REQUIREMENTS.md

@@ -0,0 +1,82 @@
+## 👏 Step1 기능 요구사항
+
+### 공통
+
+- [x] 금액은 세자리마다 comma로 구분한다.
+
+### GNB
+
+- [x] "로고"를 누르면 상품목록 페이지로 이동한다.
+- [x] "장바구니" 버튼을 누르면 장바구니 페이지로 이동한다.
+- [x] "주문목록" 버튼을 누르면 주문목록 페이지로 이동한다.
+
+### 상품목록
+
+- [x] 상품들은 nx4 레이아웃으로 보여진다.
+  - [x] 반응형 레이아웃을 구현한다.
+- [x] 상품들에는 사진, 이름, 금액이 보여진다.
+- [x] 장바구니 버튼을 클릭하면 장바구니 이동 선택 모달이 보여진다.
+  - [x] 장바구니 이동 버튼을 클릭하면 장바구니 페이지로 이동한다.
+  - [x] 추천 상품 3개를 보여준다.
+- [ ] 페이징을 적용한다.
+
+### 장바구니
+
+- [x] 해당 상품의 수량을 변경할 수 있다.
+  - [x] 상품의 수량은 항상 1이상, 20이하여야 한다
+    - [x] 상품의 수량이 1이면 상품 수량 감소할 수 없다.
+    - [x] 상품의 수량이 20이면 상품 수량 증가할 수 없다.
+  - [x] 해당 상품의 총 금액이 변경된다.
+  - [x] 해당 상품이 체크되어있으면, 결제예상금액도 변경된다.
+- [x] 모두선택 버튼이 체크되면, 상품들이 모두 선택된다.
+  - [x] 모두선택 버튼이 체크가 풀리면, 상품들의 선택이 모두 해제된다.
+- [x] 상품 삭제 버튼을 누르면, confirm 메시지가 보여진다.
+  - [x] 확인을 누르면, 선택된 상품이 모두 삭제된다.
+  - [x] 결제예상금액이 0원이 된다.
+- [x] 🗑 버튼을 누르면 confirm 메시지가 보여진다.
+  - [x] 확인을 누르면, 해당 상품이 삭제된다.
+- [x] 체크된 상품 개수에 따라 주문하기 버튼 내부에 수량이 변경된다.
+- [x] 주문하기 버튼을 누르면, confirm 메시지가 보여진다.
+  - [x] 확인을 누르면, 주문/결제 페이지로 이동한다.
+  - [x] 확인을 누르면, 장바구니에서 선택된 상품들이 삭제된다.
+  - [x] 확인을 누르면, 체크된 상품들을 데이터베이스에서 제거한다.
+- [x] 주문할 상품이 0개이면 버튼이 비활성화된다.
+
+### 주문/결제
+
+- [x] 주문할 상품들의 정보가 보여진다.
+- [x] 총 결제금액을 보여준다.
+- [x] 결제하기 버튼을 클릭하면, confirm 메시지가 보여진다.
+  - [x] 확인 버튼을 누르면, 주문 목록페이지로 이동한다.
+
+### 주문목록
+
+- [x] 주문 정보들이 보여진다.
+- [x] 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
+  - [x] 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.
+
+### 👏👏 Step2
+
+### 상품상세
+
+- [ ] 페이지에는 상품 사진, 이름, 금액 정보가 보여진다.
+- [ ] 장바구니 버튼을 클릭하면 장바구니 페이지로 이동한다.
+- [ ] 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.
+
+### 주문목록 상세
+
+- [ ] 주문 정보가 보여진다.
+- [ ] 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
+  - [ ] 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.
+
+### 상품목록
+
+- [ ] 상품을 클릭하면, 해당 상품 상세페이지로 이동한다.
+
+### 주문목록
+
+- [ ] 주문 상세 보기 버튼을 클릭하면 주문 목록 상세 페이지로 이동한다.
+
+### 장바구니
+
+- [ ] 상품 이미지를 클릭하면 해당 상품 상세 페이지로 이동한다.

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "react-shopping-cart",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.3.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "firebase": "^8.5.0",
+    "firebase-tools": "^9.10.2",
+    "immer": "^9.0.2",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.3.0",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "eslintConfig": {},
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.3.0-alpha.19",
+    "@storybook/addon-essentials": "^6.3.0-alpha.19",
+    "@storybook/addon-links": "^6.3.0-alpha.19",
+    "@storybook/node-logger": "^6.3.0-alpha.19",
+    "@storybook/preset-create-react-app": "^3.1.7",
+    "@storybook/react": "^6.3.0-alpha.19",
+    "babel-loader": "8.1.0",
+    "eslint": "^7.25.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "firebase-mock": "^2.3.2",
+    "firestore-jest-mock": "^0.11.1",
+    "prettier": "^2.2.1"
+  }
+}

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <title>Ella ShoppingCart</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/App.js

@@ -0,0 +1,35 @@
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import GlobalStyles from './GlobalStyles';
+import NavBar from './components/NavBar/NavBar';
+import { ROUTE } from './constants';
+import { getMyShoppingCartAsync } from './redux/action';
+import { OrderCheckoutPage, OrderListPage, ProductListPage, ShoppingCartPage } from './pages';
+
+const App = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getMyShoppingCartAsync());
+  }, []);
+
+  return (
+    <>
+      <GlobalStyles />
+      <Router>
+        <NavBar />
+
+        <Switch>
+          <Route exact path={ROUTE.HOME} component={ProductListPage} />
+          <Route exact path={ROUTE.ORDER_LIST} component={OrderListPage} />
+          <Route exact path={ROUTE.ORDER_CHECKOUT} component={OrderCheckoutPage} />
+          <Route exact path={ROUTE.SHOPPING_CART} component={ShoppingCartPage} />
+          <Route component={() => <Redirect to={ROUTE.HOME} />} />
+        </Switch>
+      </Router>
+    </>
+  );
+};
+
+export default App;