+ `;
+ }
+
+ setEvent() {
+ const {
+ changeInputMoney,
+ purchaseProduct,
+ coinList,
+ holdingMoney,
+ chargeChange,
+ returnChange,
+ } = this.props;
+
+ $('#charge-button').addEventListener('click', () => {
+ const $inputMoney = Number($('#charge-input').value);
+
+ if (!isPositiveInteger($inputMoney) || !isMultipleOfTen($inputMoney)) {
+ alert('ν¬μ
κΈμ‘μ μμμ΄λ©° 10μμΌλ‘ λλμ΄ λ¨μ΄μ§λ κΈμ‘λ§ κ°λ₯ν©λλ€.');
+ return;
+ }
+
+ changeInputMoney(this.inputMoney + $inputMoney);
+ });
+
+ $('table').addEventListener('click', ({ target }) => {
+ if (target.className !== 'purchase-button') return;
+
+ const $purchaseTargetFirstElement = target.closest('tr').firstElementChild;
+ const productName = $purchaseTargetFirstElement.dataset.productName;
+ const productPrice = Number(
+ $purchaseTargetFirstElement.nextElementSibling.dataset.productPrice
+ );
+
+ if (this.inputMoney < productPrice) {
+ alert('ꡬ맀νκΈ° μν ν¬μ
κΈμ‘μ΄ λΆμ‘±ν©λλ€.');
+ return;
+ }
+
+ let cost = 0;
+
+ const newProductList = this.productList.map(({ name, price, quantity }) => {
+ if (name === productName) {
+ cost = price;
+ return { name, price, quantity: quantity - 1 };
+ } else {
+ return { name, price, quantity };
+ }
+ });
+
+ purchaseProduct(newProductList, cost);
+ });
+
+ $('#coin-return-button').addEventListener('click', () => {
+ if (this.inputMoney <= 0) {
+ alert('λ°νν ν¬μ
κΈμ‘μ΄ μμ΅λλ€.');
+ return;
+ }
+
+ // μλμ λ°νν μ μλ κ²½μ° μλμΌλ‘ λ°νν μ μλ κΈμ‘λ§ λ°ν
+ if (holdingMoney < this.inputMoney) {
+ changeInputMoney(0);
+ returnChange({ ...coinList });
+ chargeChange(0, { ...INITIAL_COIN_LIST });
+ }
+
+ const payCoinList = generatePayCoinList(this.inputMoney, coinList);
+ const newCoinList = { ...coinList };
+
+ [10, 50, 100, 500].forEach(coin => {
+ newCoinList[coin] -= payCoinList[coin];
+ });
+
+ changeInputMoney(0);
+ returnChange(payCoinList);
+ chargeChange(holdingMoney - this.inputMoney, newCoinList);
+ });
+ }
+
+ get inputMoney() {
+ return this.props.inputMoney;
+ }
+
+ get productList() {
+ return this.props.productList;
+ }
+
+ get payCoinList() {
+ return this.props.payCoinList;
+ }
+}
diff --git a/javascript-vendingmachine-precourse/src/js/components/index.js b/javascript-vendingmachine-precourse/src/js/components/index.js
new file mode 100644
index 0000000..a8617cd
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/components/index.js
@@ -0,0 +1,4 @@
+export { default as NavButton } from "./NavButton.js";
+export { default as ProductManage } from "./ProductManage.js";
+export { default as ChangeFill } from "./ChangeFill.js";
+export { default as ProductPurchase } from "./ProductPurchase.js";
diff --git a/javascript-vendingmachine-precourse/src/js/constant/constants.js b/javascript-vendingmachine-precourse/src/js/constant/constants.js
new file mode 100644
index 0000000..a801780
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/constant/constants.js
@@ -0,0 +1,14 @@
+export const INITIAL_CURRENT_TAB = "product-add-menu";
+
+export const INITIAL_PRODUCT_LIST = [];
+
+export const INITIAL_HOLDING_MONEY = 0;
+
+export const INITIAL_COIN_LIST = Object.freeze({
+ 500: 0,
+ 100: 0,
+ 50: 0,
+ 10: 0,
+});
+
+export const INITIAL_INPUT_MONEY = 0;
diff --git a/javascript-vendingmachine-precourse/src/js/constant/index.js b/javascript-vendingmachine-precourse/src/js/constant/index.js
new file mode 100644
index 0000000..548d69e
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/constant/index.js
@@ -0,0 +1 @@
+export * from "./constants.js";
diff --git a/javascript-vendingmachine-precourse/src/js/core/Component.js b/javascript-vendingmachine-precourse/src/js/core/Component.js
new file mode 100644
index 0000000..e2e11cf
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/core/Component.js
@@ -0,0 +1,33 @@
+export default class Component {
+ domNode;
+
+ state;
+
+ props;
+
+ constructor(domNode, props) {
+ this.domNode = domNode;
+ this.props = props;
+ this.init();
+ this.render();
+ this.setEvent();
+ }
+
+ init() {}
+
+ template() {}
+
+ componentDidMount() {}
+
+ render() {
+ this.domNode.innerHTML = this.template();
+ this.componentDidMount();
+ }
+
+ setEvent() {}
+
+ setState(newState) {
+ this.state = newState;
+ this.render();
+ }
+}
diff --git a/javascript-vendingmachine-precourse/src/js/index.js b/javascript-vendingmachine-precourse/src/js/index.js
new file mode 100644
index 0000000..5536db7
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/index.js
@@ -0,0 +1,21 @@
+import App from "./app.js";
+import {
+ INITIAL_COIN_LIST,
+ INITIAL_CURRENT_TAB,
+ INITIAL_HOLDING_MONEY,
+ INITIAL_INPUT_MONEY,
+ INITIAL_PRODUCT_LIST,
+} from "./constant/index.js";
+import { $ } from "./utils/index.js";
+
+new App(
+ $("#app"),
+ JSON.parse(localStorage.getItem("vending-machine-state")) || {
+ currentTab: INITIAL_CURRENT_TAB,
+ productList: INITIAL_PRODUCT_LIST,
+ holdingMoney: INITIAL_HOLDING_MONEY,
+ coinList: { ...INITIAL_COIN_LIST },
+ inputMoney: INITIAL_INPUT_MONEY,
+ payCoinList: { ...INITIAL_COIN_LIST },
+ }
+);
diff --git a/javascript-vendingmachine-precourse/src/js/utils/dom.js b/javascript-vendingmachine-precourse/src/js/utils/dom.js
new file mode 100644
index 0000000..8df86b0
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/utils/dom.js
@@ -0,0 +1 @@
+export const $ = (selector) => document.querySelector(selector);
diff --git a/javascript-vendingmachine-precourse/src/js/utils/index.js b/javascript-vendingmachine-precourse/src/js/utils/index.js
new file mode 100644
index 0000000..c89dc50
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/utils/index.js
@@ -0,0 +1,2 @@
+export * from "./dom.js";
+export * from "./math.js";
diff --git a/javascript-vendingmachine-precourse/src/js/utils/math.js b/javascript-vendingmachine-precourse/src/js/utils/math.js
new file mode 100644
index 0000000..e61840a
--- /dev/null
+++ b/javascript-vendingmachine-precourse/src/js/utils/math.js
@@ -0,0 +1,46 @@
+import { INITIAL_COIN_LIST } from "../constant/index.js";
+
+export const isPositiveInteger = (number) =>
+ Number.isInteger(number) && number > 0;
+
+export const isMinimumPrice = (number) => number >= 100;
+
+export const isMultipleOfTen = (number) => number % 10 === 0;
+
+export const generateCoinList = (restAmount) => {
+ const list = { ...INITIAL_COIN_LIST };
+
+ while (restAmount !== 0) {
+ const randomNumber = MissionUtils.Random.pickNumberInList([
+ 10, 50, 100, 500,
+ ]);
+ if (restAmount < randomNumber) continue;
+
+ restAmount -= randomNumber;
+ list[randomNumber] += 1;
+ }
+
+ return list;
+};
+
+export const generatePayCoinList = (inputMoney, coinList) => {
+ const list = { ...coinList };
+
+ const payCoinList = { ...INITIAL_COIN_LIST };
+
+ Object.entries(list)
+ .reverse()
+ .forEach(([key, val]) => {
+ let coin = key;
+ let count = val;
+ // μ½μΈμ΄ μ΄κ²λ³΄λ€ μκ±°λ μΉ΄μ΄νΈκ° 0μ΄ μλλ©΄
+ // console.log(count);
+ while (inputMoney >= coin && count > 0) {
+ inputMoney -= coin;
+ payCoinList[coin] += 1;
+ count -= 1;
+ }
+ });
+
+ return payCoinList;
+};
diff --git a/javascript-vendingmachine-precourse/test/app.spec.js b/javascript-vendingmachine-precourse/test/app.spec.js
new file mode 100644
index 0000000..0a09605
--- /dev/null
+++ b/javascript-vendingmachine-precourse/test/app.spec.js
@@ -0,0 +1,116 @@
+describe("ꡬν κ²°κ³Όκ° μꡬμ¬νκ³Ό μΌμΉν΄μΌ νλ€.", () => {
+ const baseUrl = "../index.html";
+ const SELECTOR = {
+ COIN_MENU: "#vending-machine-manage-menu",
+ COIN_CHARGE_INPUT: "#vending-machine-charge-input",
+ COIN_CHARGE_BUTTON: "#vending-machine-charge-button",
+ COIN_500: "#vending-machine-coin-500-quantity",
+ COIN_100: "#vending-machine-coin-100-quantity",
+ COIN_50: "#vending-machine-coin-50-quantity",
+ COIN_10: "#vending-machine-coin-10-quantity",
+ PRODUCT_MENU: "#product-add-menu",
+ PRODUCT_NAME_INPUT: "#product-name-input",
+ PRODUCT_PRICE_INPUT: "#product-price-input",
+ PRODUCT_QUANTITY_INPUT: "#product-quantity-input",
+ PRODUCT_ADD_BUTTON: "#product-add-button",
+ PURCHASE_MENU: "#product-purchase-menu",
+ PURCHASE_CHARGE_INPUT: "#charge-input",
+ PURCHASE_CHARGE_AMOUNT: "#charge-amount",
+ PURCHASE_CHARGE_BUTTON: "#charge-button",
+ PURCHASE_ITEM_BUTTON: ".purchase-button",
+ PURCHASE_ITEM_QUANTITY: ".product-purchase-quantity",
+ };
+
+ before(() => {
+ Cypress.Commands.add("stubRandomReturns", (returnValues = []) => {
+ const randomStub = cy.stub();
+
+ returnValues.forEach((value, index) => {
+ randomStub.onCall(index).returns(value);
+ });
+
+ cy.visit(baseUrl, {
+ onBeforeLoad: (window) => {
+ window.MissionUtils = {
+ Random: {
+ pickNumberInList: randomStub,
+ },
+ };
+ },
+ });
+ });
+
+ Cypress.Commands.add("addProduct", (name, price, quantity) => {
+ cy.get(SELECTOR.PRODUCT_NAME_INPUT).type(name);
+ cy.get(SELECTOR.PRODUCT_PRICE_INPUT).type(price);
+ cy.get(SELECTOR.PRODUCT_QUANTITY_INPUT).type(quantity);
+ cy.get(SELECTOR.PRODUCT_ADD_BUTTON).click();
+ });
+ });
+
+ beforeEach(() => {
+ cy.stubRandomReturns([100, 100, 100, 100, 50]);
+ });
+
+ it("μν 1κ°λ₯Ό ꡬ맀ν μ μμ΄μΌ νλ€.", () => {
+ // given
+ const name = "μ½λΌ";
+ const price = 1500;
+ const quantity = 20;
+ const coinAmount = 450;
+ const chargeAmount = 3000;
+
+ // μν μΆκ°
+ cy.get(SELECTOR.PRODUCT_MENU).click();
+ cy.addProduct(name, price, quantity);
+ cy.addProduct("μ¬μ΄λ€", 1000, 10);
+
+ // μλ μΆ©μ
+ cy.get(SELECTOR.COIN_MENU).click();
+ cy.get(SELECTOR.COIN_CHARGE_INPUT).type(coinAmount);
+ cy.get(SELECTOR.COIN_CHARGE_BUTTON).click();
+
+ // κΈμ‘ ν¬μ
+ cy.get(SELECTOR.PURCHASE_MENU).click();
+ cy.get(SELECTOR.PURCHASE_CHARGE_INPUT).type(chargeAmount);
+ cy.get(SELECTOR.PURCHASE_CHARGE_BUTTON).click();
+
+ // when
+ cy.get("[data-product-name='μ½λΌ']")
+ .parent()
+ .find(SELECTOR.PURCHASE_ITEM_BUTTON)
+ .click();
+
+ // then
+ cy.get(SELECTOR.PURCHASE_CHARGE_AMOUNT).should(
+ "have.text",
+ chargeAmount - price
+ );
+ cy.get("[data-product-name='μ½λΌ']")
+ .parent()
+ .find(SELECTOR.PURCHASE_ITEM_QUANTITY)
+ .should("have.text", quantity - 1);
+ cy.get(SELECTOR.COIN_MENU).click();
+ cy.get(SELECTOR.COIN_100).should("have.text", "4κ°");
+ cy.get(SELECTOR.COIN_50).should("have.text", "1κ°");
+ });
+
+ it("μλͺ»λ μ
λ ₯κ°μΌλ‘ μλ μΆ©μ μ μλνλ κ²½μ° alertμ΄ νΈμΆλμ΄μΌ νλ€.", () => {
+ // given
+ const alertStub = cy.stub();
+ const invalidInput = -1;
+
+ cy.on("window:alert", alertStub);
+
+ // when
+ cy.get(SELECTOR.COIN_MENU).click();
+ cy.get(SELECTOR.COIN_CHARGE_INPUT).type(invalidInput);
+
+ // then
+ cy.get(SELECTOR.COIN_CHARGE_BUTTON)
+ .click()
+ .then(() => {
+ expect(alertStub).to.be.called;
+ });
+ });
+});
+
+
+#### μλ μΆ©μ
+
+
+#### μν ꡬ맀 λ° μλ λ°ν
+
+
+---
+
+## β
νλ‘κ·Έλλ° μꡬ μ¬ν
+
+### DOM μ νμ
+κ° μμμ μλμ κ°μ μ νμλ₯Ό λ°λμ μ§μ νλ€.
+
+**ν λ©λ΄ λ²νΌ**
+
+- `μν ꡬ맀` νμΌλ‘ μ΄λνλ λ©λ΄ λ²νΌ idλΒ `product-purchase-menu`μ΄λ€.
+- `μλ μΆ©μ `νμΌλ‘ μ΄λνλ λ©λ΄ λ²νΌ idλΒ `vending-machine-manage-menu`μ΄λ€.
+- `μν κ΄λ¦¬`νμΌλ‘ μ΄λνλ λ©λ΄ λ²νΌ idλΒ `product-add-menu`μ΄λ€.
+
+**μν κ΄λ¦¬(μΆκ°) λ©λ΄**
+
+- μν μΆκ° μ
λ ₯ νΌμ μνλͺ
μ
λ ₯ μμμ idλΒ `product-name-input`μ΄λ€.
+- μν μΆκ° μ
λ ₯ νΌμ μν κ°κ²© μ
λ ₯ μμμ idλΒ `product-price-input`μ΄λ€.
+- μν μΆκ° μ
λ ₯ νΌμ μλ μ
λ ₯ μμμ idλΒ `product-quantity-input`μ΄λ€.
+- μν `μΆκ°νκΈ°` λ²νΌ μμμ idλΒ `product-add-button`μ΄λ€.
+- μΆκ°ν κ° μν μμμ classλͺ
μ `product-manage-item`μ΄λ©°, νμμ μλ μμλ€μ κ°λλ€.
+ - μνλͺ
μ ν΄λΉνλ μμμ classλͺ
μΒ `product-manage-name`μ΄λ€.
+ - κ°κ²©μ ν΄λΉνλ μμμ classλͺ
μΒ `product-manage-price`μ΄λ€.
+ - μλμ ν΄λΉνλ μμμ classλͺ
μΒ `product-manage-quantity`μ΄λ€.
+
+**μλ μΆ©μ (μνκΈ° 보μ λμ ) λ©λ΄**
+
+- μνκΈ°κ° λ³΄μ ν κΈμ‘μ μΆ©μ ν μμμ idλΒ `vending-machine-charge-input`μ΄λ€.
+- `μΆ©μ νκΈ°`Β λ²νΌμ ν΄λΉνλ μμμ idλΒ `vending-machine-charge-button`μ΄λ€.
+- μΆ©μ λ κΈμ‘μ νμΈνλ μμμ idλΒ `vending-machine-charge-amount`Β μ΄λ€.
+- 보μ ν κ° λμ μ κ°μμ ν΄λΉνλ μμμ idλ λ€μκ³Ό κ°λ€.
+ - 500μ:Β `vending-machine-coin-500-quantity`
+ - 100μ:Β `vending-machine-coin-100-quantity`
+ - 50μ:Β `vending-machine-coin-50-quantity`
+ - 10μ:Β `vending-machine-coin-10-quantity`
+
+**μν ꡬ맀 λ©λ΄**
+
+- ν¬μ
κΈμ‘ μ
λ ₯ μμμ idλΒ `charge-input`μ΄λ€.
+- ν¬μ
νκΈ° λ²νΌ μμμ idλΒ `charge-button`μ΄λ€.
+- ν¬μ
ν κΈμ‘μ νμΈνλ μμμ idλΒ `charge-amount`μ΄λ€.
+- λ°ννκΈ° λ²νΌ μμμ idλΒ `coin-return-button`μ΄λ€.
+- λ°νλ κ° λμ μ κ°μμ ν΄λΉνλ μμμ idλ λ€μκ³Ό κ°λ€.
+ - 500μ:Β `coin-500-quantity`
+ - 100μ:Β `coin-100-quantity`
+ - 50μ:Β `coin-50-quantity`
+ - 10μ:Β `coin-10-quantity`
+- κ° μν μμμ classλͺ
μ `product-purchase-item`μ΄κ³ , νμμ μλ μμλ€μ κ°λλ€.
+ - ꡬ맀 λ²νΌμ ν΄λΉνλ μμμ classλͺ
μΒ `purchase-button`μ΄λ€.
+ - μνλͺ
μ ν΄λΉνλ μμμ classλͺ
μΒ `product-purchase-name`μ΄λ€.
+ - κ°κ²©μ ν΄λΉνλ μμμ classλͺ
μΒ `product-purchase-price`μ΄λ€.
+ - μλμ ν΄λΉνλ μμμ classλͺ
μΒ `product-purchase-quantity`μ΄λ€.
+ - μνλͺ
μ `dataset`Β μμ±μ μ¬μ©νκ³ Β `data-product-name`Β νμμΌλ‘ μ μ₯νλ€.
+ - κ°κ²©μΒ `dataset`Β μμ±μ μ¬μ©νκ³ Β `data-product-price`Β νμμΌλ‘ μ μ₯νλ€.
+ - μλμΒ `dataset`Β μμ±μ μ¬μ©νκ³ Β `data-product-quantity`Β νμμΌλ‘ μ μ₯νλ€.
+
+
+---
+
+### λΌμ΄λΈλ¬λ¦¬
+- μλμ 무μμλ‘ μμ±νλ κΈ°λ₯μ [`MissionUtils` λΌμ΄λΈλ¬λ¦¬](https://github.com/woowacourse-projects/javascript-mission-utils#mission-utils)μ `Random.pickNumberInList`λ₯Ό μ¬μ©ν΄ ꡬνλ€.
+ - `MissionUtils` λΌμ΄λΈλ¬λ¦¬ μ€ν¬λ¦½νΈλ `index.html`μ μ΄λ―Έ ν¬ν¨λμ΄ μ μ κ°μ²΄μ μΆκ°λμ΄ μμΌλ―λ‘, λ°λ‘ `import` νμ§ μμλ ꡬν μ½λ μ΄λμμλ μ¬μ©ν μ μλ€.
+
+ ```javascript
+ // ex)
+ const randomNumber = Random.pickNumberInList([10, 50, 100, 500]);
+ ```
+
+---
+
+### κ³΅ν΅ μꡬμ¬ν
+
+- μ€ν¬λ¦½νΈ μΆκ° μΈμ μ£Όμ΄μ§Β `index.html`νμΌμ μμ ν μ μλ€.
+ - μ€νμΌ(css)μ μ±μ μμκ° μλλ€.
+- λͺ¨λ μμΈ λ°μ μν©μ `alert`λ©μλλ₯Ό μ΄μ©νμ¬ μ²λ¦¬νλ€.
+- μΈλΆ λΌμ΄λΈλ¬λ¦¬(jQuery, Lodash λ±)λ₯Ό μ¬μ©νμ§ μκ³ , μμ Vanilla JSλ‘λ§ κ΅¬ννλ€.
+- **[μλ°μ€ν¬λ¦½νΈ μ½λ 컨벀μ
](https://github.com/woowacourse/woowacourse-docs/tree/feature/styleguide/styleguide/javascript)μ μ§ν€λ©΄μ νλ‘κ·Έλλ°** νλ€.
+- **indent(μΈλ΄νΈ, λ€μ¬μ°κΈ°) depthλ₯Ό 3μ΄ λμ§ μλλ‘ κ΅¬ννλ€. 2κΉμ§λ§ νμ©**νλ€.
+ - μλ₯Ό λ€μ΄ whileλ¬Έ μμ ifλ¬Έμ΄ μμΌλ©΄ λ€μ¬μ°κΈ°λ 2μ΄λ€.
+ - ννΈ: indent(μΈλ΄νΈ, λ€μ¬μ°κΈ°) depthλ₯Ό μ€μ΄λ μ’μ λ°©λ²μ ν¨μ(λλ λ©μλ)λ₯Ό λΆλ¦¬νλ©΄ λλ€.
+- **ν¨μ(λλ λ©μλ)κ° ν κ°μ§ μΌλ§ νλλ‘ μ΅λν μκ²** λ§λ€μ΄λΌ.
+- λ³μ μ μΈμ `var` λ₯Ό μ¬μ©νμ§ μλλ€. `const` μ `let` μ μ¬μ©νλ€.
+ - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
+ - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
+- `import` λ¬Έμ μ΄μ©ν΄ μ€ν¬λ¦½νΈλ₯Ό λͺ¨λννκ³ λΆλ¬μ¬ μ μκ² λ§λ λ€.
+ - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
+- **ν¨μ(λλ λ©μλ)μ κΈΈμ΄κ° 15λΌμΈμ λμ΄κ°μ§ μλλ‘ κ΅¬ννλ€.**
+ - ν¨μ(λλ λ©μλ)κ° ν κ°μ§ μΌλ§ μ νλλ‘ κ΅¬ννλ€.
+
+---
+
+## π κ³Όμ μ§ν μꡬμ¬ν
+- λ―Έμ
μ [javascript-vendingmachine-precourse](https://github.com/woowacourse/javascript-vendingmachine-precourse/) μ μ₯μλ₯Ό Fork/Cloneν΄ μμνλ€.
+- **κΈ°λ₯μ ꡬννκΈ° μ μ javascript-vendingmachine-precourse/docs/README.md νμΌμ ꡬνν κΈ°λ₯ λͺ©λ‘μ μ 리**ν΄ μΆκ°νλ€.
+- **Gitμ μ»€λ° λ¨μλ μ λ¨κ³μμ README.md νμΌμ μ 리ν κΈ°λ₯ λͺ©λ‘ λ¨μ**λ‘ μΆκ°νλ€.
+ - [AngularJS Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) μ°Έκ³ ν΄ commit logλ₯Ό λ¨κΈ΄λ€.
+- κ³Όμ μ§ν λ° μ μΆ λ°©λ²μ [ν리μ½μ€ κ³Όμ μ μΆ λ¬Έμ](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) λ₯Ό μ°Έκ³ νλ€.
+
+## βοΈ λ―Έμ
μ μΆ λ°©λ²
+
+- λ―Έμ
ꡬνμ μλ£ν ν GitHubμ ν΅ν΄ μ μΆν΄μΌ νλ€.
+ - GitHubμ νμ©ν μ μΆ λ°©λ²μ [ν리μ½μ€ κ³Όμ μ μΆ λ¬Έμ](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) λ₯Ό μ°Έκ³ ν΄ μ μΆνλ€.
+- GitHubμ λ―Έμ
μ μ μΆν ν [μ°μνν
ν¬μ½μ€ μ§μ νλ«νΌ](https://apply.techcourse.co.kr) μ μ μνμ¬ ν리μ½μ€ κ³Όμ λ₯Ό μ μΆνλ€.
+ - μμΈν λ°©λ²μ [λ§ν¬](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse#μ μΆ-κ°μ΄λ) λ₯Ό μ°Έκ³ νλ€.
+ - **Pull Requestλ§ λ³΄λ΄κ³ , μ§μ νλ«νΌμμ κ³Όμ λ₯Ό μ μΆνμ§ μμΌλ©΄ μ΅μ’
μ μΆνμ§ μμ κ²μΌλ‘ μ²λ¦¬λλ μ£Όμνλ€.**
+
+
+### π¨ κ³Όμ μ μΆ μ 체ν¬λ¦¬μ€νΈ - 0μ λ°©μ§λ₯Ό μν μ£Όμμ¬ν
+- μꡬμ¬νμ λͺ
μλ μΆλ ₯κ° νμμ μ§ν€μ§ μμ κ²½μ° κΈ°λ₯ ꡬνμ λͺ¨λ μ μμ μΌλ‘ νλλΌλ 0μ μΌλ‘ μ²λ¦¬λλ€.
+- κΈ°λ₯ ꡬνμ μλ£ν λ€ μλ κ°μ΄λμ λ°λΌ ν
μ€νΈλ₯Ό μ€ννμ λ λͺ¨λ ν
μ€νΈκ° μ±κ³΅νλ μ§ νμΈνλ€. **ν
μ€νΈκ° μ€ν¨ν κ²½μ° 0μ μΌλ‘ μ²λ¦¬λλ―λ‘, λ°λμ νμΈ ν μ μΆνλ€.**
+
+### βοΈ ν
μ€νΈ μ€ν κ°μ΄λ
+- ν
μ€νΈ μ€νμ νμν ν¨ν€μ§ μ€μΉλ₯Ό μν΄ `Node.js` λ²μ `14` μ΄μμ΄ νμνλ€.
+- λ€μ λͺ
λ Ήμ΄λ₯Ό μ
λ ₯ν΄ ν¨ν€μ§λ₯Ό μ€μΉνλ€.
+```bash
+// {ν΄λ κ²½λ‘}/javascript-vendingmachine-precourse/ μμ
+npm install
+```
+
+- μ€μΉκ° μλ£λμλ€λ©΄, λ€μ λͺ
λ Ήμ΄λ₯Ό μ
λ ₯ν΄ ν
μ€νΈλ₯Ό μ€ννλ€.
+```bash
+// {ν΄λ κ²½λ‘}/javascript-vendingmachine-precourse/ μμ
+npm run test
+```
+
+- μλμ κ°μ νλ©΄μ΄ λμ€λ©° λͺ¨λ ν
μ€νΈκ° passνλ€λ©΄ μ±κ³΅!
+
+
diff --git a/javascript-vendingmachine-precourse/cypress.json b/javascript-vendingmachine-precourse/cypress.json
new file mode 100644
index 0000000..a78fa83
--- /dev/null
+++ b/javascript-vendingmachine-precourse/cypress.json
@@ -0,0 +1,9 @@
+{
+ "integrationFolder": "test",
+ "testFiles": "*.spec.js",
+ "screenshotOnRunFailure": false,
+ "video": false,
+ "pluginsFile": false,
+ "supportFile": false,
+ "blockHosts": ["cdn.jsdelivr.net"]
+}
diff --git a/javascript-vendingmachine-precourse/images/beverage_icon.png b/javascript-vendingmachine-precourse/images/beverage_icon.png
new file mode 100644
index 0000000..cfed9e2
Binary files /dev/null and b/javascript-vendingmachine-precourse/images/beverage_icon.png differ
diff --git a/javascript-vendingmachine-precourse/images/demo_coin.gif b/javascript-vendingmachine-precourse/images/demo_coin.gif
new file mode 100644
index 0000000..05457a2
Binary files /dev/null and b/javascript-vendingmachine-precourse/images/demo_coin.gif differ
diff --git a/javascript-vendingmachine-precourse/images/demo_product.gif b/javascript-vendingmachine-precourse/images/demo_product.gif
new file mode 100644
index 0000000..ce631e2
Binary files /dev/null and b/javascript-vendingmachine-precourse/images/demo_product.gif differ
diff --git a/javascript-vendingmachine-precourse/images/demo_purchase.gif b/javascript-vendingmachine-precourse/images/demo_purchase.gif
new file mode 100644
index 0000000..12e4470
Binary files /dev/null and b/javascript-vendingmachine-precourse/images/demo_purchase.gif differ
diff --git a/javascript-vendingmachine-precourse/images/test_result.png b/javascript-vendingmachine-precourse/images/test_result.png
new file mode 100644
index 0000000..c987571
Binary files /dev/null and b/javascript-vendingmachine-precourse/images/test_result.png differ
diff --git a/javascript-vendingmachine-precourse/index.html b/javascript-vendingmachine-precourse/index.html
new file mode 100644
index 0000000..f17c898
--- /dev/null
+++ b/javascript-vendingmachine-precourse/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+