kmin 계산기 제출입니다.

.gitignore

@@ -249,7 +249,6 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
 
 # Gatsby files
 .cache/

cypress.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost:5050",
+  "env": {
+    "TOTAL": "#total",
+    "MODIFIER": ".modifier"
+  }
+}

cypress/fixtures/example.json

@@ -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"
+}

cypress/integration/sample_spec.ts

@@ -0,0 +1,43 @@
+describe("Reg form", () => {
+  const clickButtons = (values: string): void => {
+    const charFromValues = values.split("");
+    charFromValues.forEach((char) => {
+      cy.get("button").contains(char).click();
+    })
+  };
+
+  const calculate = (expression: string, expectedResult: string): void => {
+    clickButtons(expression);
+    cy.get(Cypress.env("TOTAL")).should('have.text', expectedResult);
+    cy.get(Cypress.env("MODIFIER")).click();
+  }
+  it("input numbers must be in range 0 ~ 999", () => {
+    cy.visit("/");
+    clickButtons("123111");
+    cy.get(Cypress.env("TOTAL")).should("have.text", "123");
+  })
+  it("clear board", () => {
+    cy.get(Cypress.env("MODIFIER")).click();
+    cy.get(Cypress.env("TOTAL")).should("have.text", "0");
+  })
+  it("add numbers", () => {
+    calculate("123+123=","246");
+    calculate("123+123+","246");
+    calculate("123+123+123=","369");
+  })
+  it("multiply numbers", () => {
+    calculate("123X123=","15129");
+    calculate("123X123X","15129");
+    calculate("123X123X123=","1860867");
+  })
+  it("divide numbers", () => {
+    calculate("123/123=","1");
+    calculate("123/123/","1");
+    calculate("123/123/123=","0");
+  })
+  it("subtract numbers", () => {
+    calculate("123-123=","0");
+    calculate("123-123-","0");
+    calculate("123-123-123=","-123");
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.tsfile can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.tsfile 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/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.tsfile 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.tsfile using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

dist/index.js

@@ -0,0 +1,2 @@
+import Calculator from "./tsfile/component/calculator.js";
+new Calculator(document.querySelector('.calculator'));

dist/tsfile/component/board.js

@@ -0,0 +1,23 @@
+import { isClear, isOperator } from "../../utils/utils.js";
+class BoardImpl {
+    constructor({ $element, onClick }) {
+        this.addEvent = () => {
+            this.$element.addEventListener('click', ({ target }) => {
+                if (!(target instanceof HTMLButtonElement))
+                    return;
+                const value = target.textContent;
+                if (isOperator(value)) {
+                    return this.onClick({ type: 'Operator', value });
+                }
+                if (isClear(value)) {
+                    return this.onClick({ type: 'Clear', value });
+                }
+                return this.onClick({ type: 'Number', value });
+            });
+        };
+        this.$element = $element;
+        this.onClick = onClick;
+        this.addEvent();
+    }
+}
+export default BoardImpl;

dist/tsfile/component/calculator.js

@@ -0,0 +1,65 @@
+import ScreenImpl from "./screen.js";
+import BoardImpl from "./board.js";
+import { calc } from "../../utils/utils.js";
+class Calculator {
+    constructor($element) {
+        this.$element = $element;
+        this.clear = () => {
+            this.value = '';
+            this.oper = '';
+            this.prev = '';
+        };
+        this.setState = (value) => {
+            this.value = value;
+            this.screen.setState(value);
+        };
+        this.onClick = ({ type, value }) => {
+            switch (type) {
+                case 'Operator':
+                    if (this.operatorPressed)
+                        return;
+                    this.operatorPressed = true;
+                    this.prev = calc(this.prev, this.oper, this.value);
+                    this.oper = value;
+                    this.screen.setState(this.prev);
+                    if (value === '=') {
+                        this.operatorPressed = false;
+                    }
+                    this.value = '0';
+                    break;
+                case 'Clear':
+                    this.clear();
+                    this.setState('0');
+                    break;
+                case 'Number':
+                    if (this.oper === '=')
+                        this.clear();
+                    if (this.value.length === 3)
+                        break;
+                    let newValue = this.value === '0' ? value : this.value + value;
+                    if (!this.operatorPressed) {
+                        this.setState(newValue);
+                        break;
+                    }
+                    this.operatorPressed = false;
+                    this.setState(value);
+                    break;
+                default:
+                    throw new Error('Operation fail');
+            }
+        };
+        this.value = '0';
+        this.prev = '';
+        this.oper = '';
+        this.operatorPressed = false;
+        this.screen = new ScreenImpl({
+            $element: this.$element.querySelector('#total'),
+            value: this.value
+        });
+        new BoardImpl({
+            $element: this.$element,
+            onClick: this.onClick
+        });
+    }
+}
+export default Calculator;

dist/tsfile/component/screen.js

@@ -0,0 +1,14 @@
+class ScreenImpl {
+    constructor({ $element, value }) {
+        this.setState = (value) => {
+            this.value = value;
+            this.render();
+        };
+        this.render = () => {
+            this.$element.textContent = `${this.value}`;
+        };
+        this.$element = $element;
+        this.value = value;
+    }
+}
+export default ScreenImpl;

dist/types/types.js

@@ -0,0 +1 @@
+export {};

dist/utils/utils.js

@@ -0,0 +1,30 @@
+const isOperator = (value) => {
+    const allowedKey = ['+', '-', '/', 'X', '='];
+    return allowedKey.indexOf(value) !== -1;
+};
+const isClear = (value) => {
+    const allowedKey = 'AC';
+    return allowedKey === value;
+};
+const operate = (prev, oper, value) => {
+    const num_prev = +prev;
+    const num_value = +value;
+    switch (oper) {
+        case '+':
+            return String(num_prev + num_value);
+        case '-':
+            return String(num_prev - num_value);
+        case 'X':
+            return String(num_prev * num_value);
+        case '/':
+            return String(Math.floor(num_prev / num_value));
+        default:
+            return prev;
+    }
+};
+const calc = (prev, oper, value) => {
+    if (prev === '' || oper === '')
+        return value;
+    return operate(prev, oper, value);
+};
+export { isOperator, isClear, calc };

index.html

@@ -1,38 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Calculator</title>
-        <link rel="stylesheet" type="text/css" href="src/css/index.css" />
-    </head>
-    <body>
-        <div id="app">
-            <div class="calculator">
-                <h1 id="total">0</h1>
-                <div class="digits flex">
-                    <button class="digit">9</button>
-                    <button class="digit">8</button>
-                    <button class="digit">7</button>
-                    <button class="digit">6</button>
-                    <button class="digit">5</button>
-                    <button class="digit">4</button>
-                    <button class="digit">3</button>
-                    <button class="digit">2</button>
-                    <button class="digit">1</button>
-                    <button class="digit">0</button>
-                </div>
-                <div class="modifiers subgrid">
-                    <button class="modifier">AC</button>
-                </div>
-                <div class="operations subgrid">
-                    <button class="operation">/</button>
-                    <button class="operation">X</button>
-                    <button class="operation">-</button>
-                    <button class="operation">+</button>
-                    <button class="operation">=</button>
-                </div>
-            </div>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calculator</title>
+    <link rel="stylesheet" type="text/css" href="src/css/index.css" />
+</head>
+<body>
+<div id="app">
+    <div class="calculator">
+        <h1 id="total">0</h1>
+        <div class="digits flex">
+            <button class="digit">9</button>
+            <button class="digit">8</button>
+            <button class="digit">7</button>
+            <button class="digit">6</button>
+            <button class="digit">5</button>
+            <button class="digit">4</button>
+            <button class="digit">3</button>
+            <button class="digit">2</button>
+            <button class="digit">1</button>
+            <button class="digit">0</button>
         </div>
-    </body>
-</html>
+        <div class="modifiers subgrid">
+            <button class="modifier">AC</button>
+        </div>
+        <div class="operations subgrid">
+            <button class="operation">/</button>
+            <button class="operation">X</button>
+            <button class="operation">-</button>
+            <button class="operation">+</button>
+            <button class="operation">=</button>
+        </div>
+    </div>
+</div>
+<script type="module" src="./dist/index.js"></script>
+</body>
+</html>