woowacourse · hyoungnam · Apr 22, 2022 · Apr 19, 2022 · Apr 19, 2022 · Apr 19, 2022
diff --git a/.gitignore b/.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*
diff --git a/README.md b/README.md
@@ -10,5 +10,5 @@
 
 ✔️ `Boilerplate`는 `CRA`를 표준으로 사용합니다.  
 ✔️ `CSS`와 기본적인 `JavaScript` 로직은 레벨1에 있는 코드를 직접 찾아서 재활용합니다.  
-✔️  불필요한 `Third-Party` 없이 `React`에서 제공되는 것만으로 구현합니다.  
-✔️  테스트 도구 사용 및 테스트 코드 작성은 필수가 아닙니다.  
+✔️ 불필요한 `Third-Party` 없이 `React`에서 제공되는 것만으로 구현합니다.  
+✔️ 테스트 도구 사용 및 테스트 코드 작성은 필수가 아닙니다.
diff --git a/REQUIREMENTS.md b/REQUIREMENTS.md
@@ -0,0 +1,14 @@
+## 요구 사항
+
+- [x] Class Component를 사용합니다.
+- [x] 레벨1을 참고하여 REQUIREMENTS.md에 요구 사항 도출
+  - [x] 2개의 숫자에 대해 덧셈이 가능하다.
+  - [x] 2개의 숫자에 대해 뺄셈이 가능하다.
+  - [x] 2개의 숫자에 대해 곱셈이 가능하다.
+  - [x] 2개의 숫자에 대해 나눗셈이 가능하다.
+  - [x] AC(All Clear)버튼을 누르면 0으로 초기화 한다.
+  - [x] 계산 결과를 표현할 때 소수점 이하는 버림한다.
+- [x] 초기 로딩시 이전 값이 Local Storage에 존재한다면 초기 값으로 적용한다.
+- [x] 출력값 있는 상황에 사용자의 페이지 이탈시 confirm을 활용해 사용자의 이탈 여부를 확인한다.
+- [x] 항상 사용자의 이탈시 마지막 출력값을 Local Storage에 저장한다.
+- [x] 연산의 결과값이 Infinity일 경우 오류라는 문자열을 보여준다. (아이폰 참고)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-calculator",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^13.5.0",
+    "gh-pages": "^3.2.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": "https://usageness.github.io/react-calculator"
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!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" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,137 @@
+import React, { Component } from "react";
+import DisplayResult from "./component/DisplayResult";
+import CalculatorButton from "./component/CalculatorButton";
+
+export default class App extends Component {
+  state = {
+    firstNumber: 0,
+    operator: null,
+    secondNumber: 0,
+    isFirstNumber: true,
+    result: 0,
+  };
+
+  componentDidMount() {
+    const prevValue = localStorage.getItem("prevValue") || 0;
+    this.setFirstNumber(Number(prevValue));
+    this.setResult(Number(prevValue));
+
+    window.addEventListener("beforeunload", function (e) {
+      e.preventDefault();
+      e.returnValue = "";
+    });
+  }
+
+  initState = () => {
+    this.setState({
+      firstNumber: 0,
+      operator: null,
+      secondNumber: 0,
+      isFirstNumber: true,
+      result: 0,
+    });
+  };
+
+  setFirstNumber = (number) => {
+    this.setState(
+      {
+        firstNumber: Number(number),
+      },
+      localStorage.setItem("prevValue", number)
+    );
+  };
+
+  setOperator = (operator) => {
+    this.setState({ operator });
+  };
+
+  setSecondNumber = (number) => {
+    this.setState(
+      {
+        secondNumber: Number(number),
+      },
+      localStorage.setItem("prevValue", number)
+    );
+  };
+
+  setResult = (result) => {
+    this.setState({ result });
+  };
+
+  setIsFirstNumber = (isFirstNumber) => {
+    this.setState({ isFirstNumber });
+  };
+
+  calculate = () => {
+    const res = (() => {
+      switch (this.state.operator) {
+        case "+":
+          return this.add();
+        case "-":
+          return this.sub();
+        case "X":
+          return this.multiple();
+        case "/":
+          return this.divide();
+        default:
+          throw new Error("존재하지 않는 연산자입니다.");
+      }
+    })();
+
+    this.setState({ result: res }, () => {
+      this.initState();
+
+      if (res === Infinity || isNaN(res)) {
+        this.setFirstNumber(0);
+        this.setResult("오류");
+        localStorage.setItem("prevValue", "오류");
+        return;
+      }
+
+      this.setFirstNumber(res);
+      this.setResult(res);
+      localStorage.setItem("prevValue", res);
+    });
+  };
+
+  add() {
+    return this.state.firstNumber + this.state.secondNumber;
+  }
+
+  sub() {
+    return this.state.firstNumber - this.state.secondNumber;
+  }
+
+  divide() {
+    return Math.floor(this.state.firstNumber / this.state.secondNumber);
+  }
+
+  multiple() {
+    return this.state.firstNumber * this.state.secondNumber;
+  }
+
+  render() {
+    return (
+      <>
+        <div id="app">
+          <div className="calculator">
+            <DisplayResult result={this.state.result} />
+            <CalculatorButton
+              setFirstNumber={this.setFirstNumber}
+              setOperator={this.setOperator}
+              setSecondNumber={this.setSecondNumber}
+              setIsFirstNumber={this.setIsFirstNumber}
+              calculate={this.calculate}
+              setResult={this.setResult}
+              result={this.state.result}
+              initState={this.initState}
+              isFirstNumber={this.state.isFirstNumber}
+              firstNumber={this.state.firstNumber}
+              secondNumber={this.state.secondNumber}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/component/CalculatorButton.js b/src/component/CalculatorButton.js
@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+
+export default class CalculatorButton extends Component {
+  onClickNumber = (e) => {
+    const inputNumber = e.target.textContent;
+    if (this.props.result === 0) {
+      this.props.setResult(inputNumber);
+    } else {
+      this.props.setResult(this.props.result + inputNumber);
+    }
+
+    if (this.props.isFirstNumber) {
+      this.props.setFirstNumber(
+        this.props.firstNumber * 10 + Number(inputNumber)
+      );
+      return;
+    }
+    this.props.setSecondNumber(this.props.secondNumber + inputNumber);
+  };
+
+  onClickOperator = (e) => {
+    const inputOperator = e.target.textContent;
+    if (this.props.firstNumber === "") return;
+    if (inputOperator === "=" && this.props.secondNumber === "") return;
+    this.props.setResult(this.props.result + inputOperator);
+    if (inputOperator !== "=") {
+      this.props.setFirstNumber(this.props.firstNumber);
+      this.props.setOperator(inputOperator);
+      this.props.setIsFirstNumber(false);
+      return;
+    }
+
+    this.props.calculate();
+  };
+
+  onClickModifier = () => {
+    this.props.initState();
+    localStorage.setItem("prevValue", 0);
+  };
+
+  render() {
+    return (
+      <>
+        <div className="digits flex" onClick={this.onClickNumber}>
+          <button className="digit">9</button>
+          <button className="digit">8</button>
+          <button className="digit">7</button>
+          <button className="digit">6</button>
+          <button className="digit">5</button>
+          <button className="digit">4</button>
+          <button className="digit">3</button>
+          <button className="digit">2</button>
+          <button className="digit">1</button>
+          <button className="digit">0</button>
+        </div>
+        <div className="modifiers subgrid" onClick={this.onClickModifier}>
+          <button className="modifier">AC</button>
+        </div>
+        <div className="operations subgrid" onClick={this.onClickOperator}>
+          <button className="operation">/</button>
+          <button className="operation">X</button>
+          <button className="operation">-</button>
+          <button className="operation">+</button>
+          <button className="operation">=</button>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/component/DisplayResult.js b/src/component/DisplayResult.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class DisplayResult extends Component {
+  render() {
+    return <h1 id="total">{this.props.result.toString()}</h1>;
+  }
+}