woowacourse · hyoungnam · Apr 26, 2022 · Apr 22, 2022 · Apr 25, 2022 · Apr 25, 2022
diff --git a/.gitignore b/.gitignore
@@ -2,8 +2,6 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # testing
 /coverage

diff --git a/REQUIREMENTS.md b/REQUIREMENTS.md
@@ -1,5 +1,7 @@
 ## 요구 사항
 
+### Step 1
+
 - [x] Class Component를 사용합니다.
 - [x] 레벨1을 참고하여 REQUIREMENTS.md에 요구 사항 도출
   - [x] 2개의 숫자에 대해 덧셈이 가능하다.
@@ -12,3 +14,9 @@
 - [x] 출력값 있는 상황에 사용자의 페이지 이탈시 confirm을 활용해 사용자의 이탈 여부를 확인한다.
 - [x] 항상 사용자의 이탈시 마지막 출력값을 Local Storage에 저장한다.
 - [x] 연산의 결과값이 Infinity일 경우 오류라는 문자열을 보여준다. (아이폰 참고)
+
+### Step 2
+
+- [x] Step1의 Class Component를 Function Component로 마이그레이션 합니다.
+- [x] Step1에서의 피드백을 적용합니다.
+- [x] 전체 코드를 리팩토링 합니다.
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,20 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <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"
+      content="react-calculator 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>
+    <title>리액트 계산기</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>자바스크립트를 "사용"으로 설정해주세요.</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/robots.txt b/public/robots.txt
@@ -1,3 +1,2 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
diff --git a/src/App.js b/src/App.js
diff --git a/src/Calculator.js b/src/Calculator.js
@@ -0,0 +1,97 @@
+import React, { useEffect, useState, useCallback } from "react";
+import DisplayResult from "./component/DisplayResult";
+import NumberButton from "./component/buttons/NumberButton";
+import ModifierButton from "./component/buttons/ModifierButton";
+import OperatorButton from "./component/buttons/OperatorButton";
+import calculate from "./utils/calculate";
+
+import "./css/calculator.css";
+
+export default function App() {
+  const [firstNumber, setFirstNumber] = useState(0);
+  const [operator, setOperator] = useState(null);
+  const [secondNumber, setSecondNumber] = useState(0);
+  const [isFirstNumber, setIsFirstNumber] = useState(true);
+  const [result, setResult] = useState(0);
+
+  useEffect(() => {
+    const prevValue = localStorage.getItem("prevValue") || result;
+    setFirstNumber(Number(prevValue));
+    setResult(Number(prevValue));
+
+    window.addEventListener("beforeunload", function (e) {
+      e.preventDefault();
+      e.returnValue = "";
+    });
+  }, []);
+
+  const onClickNumber = (e) => {
+    const inputNumber = e.target.textContent;
+    const resultNumber = result === 0 ? inputNumber : result + inputNumber;
+    setResult(resultNumber);
+
+    if (isFirstNumber) {
+      setFirstNumber(firstNumber * 10 + Number(inputNumber));
+      return;
+    }
+
+    setSecondNumber(secondNumber * 10 + Number(inputNumber));
+  };
+
+  const onClickOperator = (e) => {
+    if (firstNumber === "") return;
+
+    const inputOperator = e.target.textContent;
+    if (inputOperator === "=" && secondNumber === "") return;
+
+    if (inputOperator !== "=") {
+      setResult(result + inputOperator);
+      setOperator(inputOperator);
+      setIsFirstNumber(false);
+      return;
+    }
+
+    onCalculate();
+  };
+
+  const onClickModifier = useCallback(() => {
+    setFirstNumber(0);
+    setSecondNumber(0);
+    setOperator(null);
+    setIsFirstNumber(true);
+    setResult(0);
+    localStorage.setItem("prevValue", 0);
+  }, []);
+
+  const onCalculate = () => {
+    const res = calculate(firstNumber, secondNumber, operator);
+
+    if (res === Infinity || isNaN(res)) {
+      setFirstNumber(0);
+      setSecondNumber(0);
+      setResult("오류");
+      setOperator(null);
+      setIsFirstNumber(true);
+      localStorage.setItem("prevValue", "오류");
+      return;
+    }
+
+    setFirstNumber(res);
+    setSecondNumber(0);
+    setResult(res);
+    setOperator(null);
+    setIsFirstNumber(true);
+    localStorage.setItem("prevValue", res);
+  };
+
+  return (
+    <div id="app">
+      <div className="calculator">
+        <DisplayResult result={result} />
+        <NumberButton onClick={onClickNumber} />
+        <ModifierButton onClick={onClickModifier} />
+        <OperatorButton onClick={onClickOperator} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/component/CalculatorButton.js b/src/component/CalculatorButton.js
diff --git a/src/component/DisplayResult.js b/src/component/DisplayResult.js
@@ -1,7 +1,5 @@
-import React, { Component } from "react";
+import React from "react";
 
-export default class DisplayResult extends Component {
-  render() {
-    return <h1 id="total">{this.props.result.toString()}</h1>;
-  }
+export default function DisplayResult(props) {
+  return <h1 id="total">{props.result.toString()}</h1>;
 }