feat: 2주차 실습 문제 추가

Author: minsoo-web

.pnp.cjs

@@ -8,13 +8,14 @@
   "workspaces": [
     "apps/*",
     "tools/*",
-    "packages/*"
+    "packages/**/*"
   ],
   "scripts": {
     "docs": "yarn workspace docs",
     "lint": "eslint .",
     "pre-commit": "lint-staged --config .lintstagedrc.js",
     "test": "jest",
+    "practice:fe-cafe": "yarn workspace @practice/fecrash-cafe",
     "example": "yarn workspace @nutshell/example"
   },
   "devDependencies": {

.yarn/cache/@colors-colors-npm-1.5.0-875af3a8b4-d64d5260be.zip

@@ -0,0 +1,68 @@
+var shopping_cart = []
+var shopping_cart_total = 0
+
+document.querySelectorAll('button').forEach((button) =>
+  button.addEventListener('click', ({ target }) => {
+    const name = target.parentNode.querySelector('.menu-name').textContent
+    const category = target.parentNode.querySelector('.category').textContent
+    const price = target.parentNode.querySelector('.price').textContent
+
+    add_item_to_cart({ name, category, price })
+  }),
+)
+
+function add_item_to_cart(item) {
+  shopping_cart.push(item)
+  console.log(shopping_cart)
+  calc_cart_total()
+}
+
+function calc_cart_total() {
+  shopping_cart_total = 0
+  for (var i = 0; i < shopping_cart.length; i++) {
+    var item = shopping_cart[i]
+    shopping_cart_total += item.price
+  }
+  set_cart_total_dom()
+  update_shipping_icons()
+  update_tax_dom()
+}
+
+function set_cart_total_dom() {
+  document.querySelector('.total-price').textContent = shopping_cart_total
+}
+
+function update_shipping_icons() {
+  var buy_buttons = get_buy_buttons_dom()
+  for (var i = 0; i < buy_buttons.length; i++) {
+    var item = buy_buttons[i]
+    console.log(item)
+    if (item.price + shopping_cart_total >= 20) item.show_free_shopping_icon()
+    else item.hide_free_shopping_icon()
+  }
+}
+
+function get_buy_buttons_dom() {
+  var buttons = []
+
+  for (var i = 0; i < shopping_cart.length; i++) {
+    var item = shopping_cart[i]
+    item.show_free_shopping_icon = function () {
+      console.log('DOM 의 아이콘을 보여줍니다')
+    }
+    item.hide_free_shopping_icon = function () {
+      console.log('DOM 의 아이콘을 숨깁니다')
+    }
+    buttons.push(item)
+  }
+
+  return buttons
+}
+
+function update_tax_dom() {
+  set_tax_dom(shopping_cart_total * 0.1)
+}
+
+function set_tax_dom(value) {
+  document.querySelector('.total-price').textContent = value
+}

.yarn/cache/@cypress-request-npm-2.88.11-863a69ed3c-e4b3f62e0c.zip

@@ -0,0 +1,114 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #F2EEE9;
+  font: normal 13px/1.5 Georgia, Serif;
+  color: #333;
+}
+
+.wrapper {
+  width: 705px;
+  margin: 20px auto;
+  padding: 20px;
+}
+
+.carts {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+h1 {
+  display: inline-block;
+  background-color: #333;
+  color: #fff;
+  font-size: 20px;
+  font-weight: normal;
+  text-transform: uppercase;
+  padding: 4px 20px;
+  float: left;
+}
+
+.clear {
+  clear: both;
+}
+
+.items {
+  display: block;
+  margin: 20px 0;
+}
+
+.item {
+  background-color: #fff;
+  float: left;
+  margin: 0 10px 10px 0;
+  width: 205px;
+  padding: 10px;
+  height: 310px;
+}
+
+.item img {
+  display: block;
+  margin: auto;
+}
+
+h2 {
+  font-size: 16px;
+  display: block;
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 10px 0;
+  padding: 10px 0;
+}
+
+button {
+  border: none;
+  border-radius: 8px;
+  padding: 4px 14px;
+  background-color: #00A29E;
+  color: #ffffff;
+  text-transform: uppercase;
+  float: right;
+  margin: 10px 0 5px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+
+.icons:hover {
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #00C6C2;
+}
+
+button:active {
+  background-color: #005857;
+}
+
+span {
+  float: right;
+}
+
+.shopping-cart {
+  display: inline-block;
+  background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0;
+  width: 24px;
+  height: 24px;
+  margin: 0 10px 0 0;
+}
+
+.category {
+  border-radius: 8px;
+  background-color: #fff;
+  border: 1px solid #00A29E;
+  color: #00A29E;
+  padding: 6px;
+}
+
+p, .price {
+  height: 20px;
+}

.yarn/cache/@cypress-xvfb-npm-1.2.4-396a3691f7-7bdcdaeb1b.zip

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

.yarn/cache/@types-node-npm-14.18.54-59b82113de-9fd66f91fc.zip

@@ -0,0 +1,8 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    screenshotOnRunFailure: false,
+    video: false,
+  },
+});

.yarn/cache/@types-sinonjs__fake-timers-npm-8.1.1-95ac9b59b5-ca09d54d47.zip

@@ -0,0 +1,14 @@
+describe('FECrash 카페', () => {
+  beforeEach(() => {
+    cy.visit({
+      url: 'http://localhost:5500/packages/practice/fecrash-cafe/index.html',
+      method: 'GET',
+    })
+  })
+
+  context('최초 렌더링 시', () => {
+    it('장바구니 총 가격은 0원이어야 한다.', () => {
+      cy.get('.total-price').should('have.text', '0원')
+    })
+  })
+})

.yarn/cache/@types-sizzle-npm-2.3.3-9403924950-586a9fb1f6.zip

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

.yarn/cache/@types-yauzl-npm-2.10.0-7b242343cb-55d27ae5d3.zip

@@ -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) => { ... })

.yarn/cache/ansi-colors-npm-4.1.3-8ffd0ae6c7-a9c2ec8420.zip

@@ -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')