From c4cbb5bda56f5bea21404cc16554b9f21eae0600 Mon Sep 17 00:00:00 2001
From: hnaa0 <hnaa12@daum.net>
Date: Fri, 28 Jul 2023 16:55:47 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7calcState=20Maxlength,=20?=
 =?UTF-8?q?=F0=9F=8E=A8css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                    | 40 ++++++++++++++++++++++++++++-------
 src/components/CalcResult.jsx |  2 +-
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index b95e1e5..72d56ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,11 @@ ${reset}
 * {
   box-sizing: border-box;
 }
+
+body {
+  width: 100%;
+  height: 100vh;
+}
 `;
 
 function App() {
@@ -46,7 +51,8 @@ function App() {
   };
 
   const appendNum = (value) => {
-    if (
+    if (calcState.calcForm.length >= 20) return;
+    else if (
       (value === "0") &
       (calcState.calcForm.length === 0) &
       calcState.calcForm.charAt(calcState.calcForm.length - 1)
@@ -59,7 +65,8 @@ function App() {
   };
 
   const appendOperator = (value) => {
-    if (
+    if (calcState.calcForm.length >= 20) return;
+    else if (
       (calcState.calcForm === "") |
       isNaN(calcState.calcForm.charAt(calcState.calcForm.length - 1))
     ) {
@@ -70,6 +77,7 @@ function App() {
   };
 
   const appendPoint = (value) => {
+    if (calcState.calcForm.length >= 20) return;
     let updateform = calcState.calcForm + value;
     setCalcState({ calcForm: updateform });
   };
@@ -114,18 +122,34 @@ function App() {
   };
 
   return (
-    <>
+    <Container>
       <GlobalStyle />
-      <CalcResult form={calcState.calcForm} result={calcState.calcResult} />
-      <KeypadContainer>
-        <Keypad onClick={onClick} />
-      </KeypadContainer>
-    </>
+      <CalcContainer>
+        <CalcResult form={calcState.calcForm} result={calcState.calcResult} />
+        <KeypadContainer>
+          <Keypad onClick={onClick} />
+        </KeypadContainer>
+      </CalcContainer>
+    </Container>
   );
 }
 
 export default App;
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #ede4e0;
+`;
+
+const CalcContainer = styled.div`
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
+`;
+
 const KeypadContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
diff --git a/src/components/CalcResult.jsx b/src/components/CalcResult.jsx
index fb5230d..860821a 100644
--- a/src/components/CalcResult.jsx
+++ b/src/components/CalcResult.jsx
@@ -16,7 +16,7 @@ const ResultView = styled.div`
   align-items: flex-end;
   width: 350px;
   height: 100px;
-  padding: 12px 4px;
+  padding: 12px;
   background-color: #ecf2ff;
 `;