[장바구니 미션 Step 1] 코난(윤정민) 미션 제출합니다.

.gitignore

@@ -0,0 +1,23 @@
+# 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*

REQUIREMENTS.md

@@ -0,0 +1,40 @@
+## 기능 목록
+
+- Header 구현
+
+  - 장바구니에 담긴 상품 전체의 갯수 구현
+
+- 상품 목록 구현
+
+  - 상품 목록 레이아웃 구현 (grid)
+  - mock 데이터를 기반으로 정렬하기
+
+- 상품 아이템 구현
+
+  - img 파일 import 하기
+
+- 장바구니 버튼
+  - 장바구니 버튼을 클릭하면 상품이 1개가 담긴다.
+  - 장바구니 버튼이 숫자 인풋으로 바뀐다.
+  - 장바구니에 담을 상품의 갯수를 조절할 수 있다.
+
+## mock 데이터
+
+- Products
+
+```json
+[
+  {
+    "id": 1,
+    "name": "치킨",
+    "price": 10000,
+    "imageUrl": "<http://example.com/chicken.jpg>"
+  },
+  {
+    "id": 2,
+    "name": "피자",
+    "price": 20000,
+    "imageUrl": "<http://example.com/pizza.jpg>"
+  }
+]
+```

cypress.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/fetchProduct.cy.tsx

@@ -0,0 +1,30 @@
+describe('장바구니 e2e 테스트', () => {
+  beforeEach(() => {
+    cy.intercept(
+      {
+        method: 'GET',
+        url: /^https:\/\/json-server-4140.onrender.com\/cart-itmes\/?.*/,
+      },
+      {
+        fixture: 'mockProducts.json',
+      },
+    ).as('fetchProduct');
+
+    cy.visit('http://localhost:3000/');
+  });
+
+  it('페이지에 접속하면 상품 목록(목 데이터) 8개를 렌더링한다.', () => {
+    cy.get('[data-cy=product-item]').should('have.length', 8);
+  });
+
+  it('장바구니 버튼을 클릭하면 상품을 장바구니에 1개 추가한다.', () => {
+    cy.get('[data-cy=add-cart').first().click();
+    cy.get('[data-cy=cart-amount').should('contain', 1);
+  });
+
+  it('장바구니 버튼에 상품 개수를 12개로 수정 시 헤더의 장바구니에 개수가 반영된다.', () => {
+    cy.get('[data-cy=add-cart').first().click();
+    cy.get('input').type('2');
+    cy.get('[data-cy=cart-amount').should('contain', 12);
+  });
+});

cypress/fixtures/mockProducts.json

@@ -0,0 +1,50 @@
+[
+  {
+    "id": 1,
+    "name": "정사각(420ml)",
+    "price": 43400,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 2,
+    "name": "밀크티(370ml)",
+    "price": 73400,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 3,
+    "name": "정사각(370ml)",
+    "price": 41000,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 4,
+    "name": "납작(450ml)",
+    "price": 39900,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 5,
+    "name": "단지(480ml)",
+    "price": 38000,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 6,
+    "name": "납작(260ml)",
+    "price": 40200,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 7,
+    "name": "원형(500ml)",
+    "price": 50200,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  },
+  {
+    "id": 8,
+    "name": "원형(600ml)",
+    "price": 62400,
+    "imageUrl": "https://item.kakaocdn.net/do/d0abc6fe74e616536cf07626699bbc707154249a3890514a43687a85e6b6cc82"
+  }
+]

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts", "../cypress.d.ts", "e2e/fetchProduct.cy.tsx"],
+  "compilerOptions": {
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"],
+    "target": "es5",
+    "jsx": "preserve",
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true
+  }
+}

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};