From c6f186f6b0f6e59d4b5390f39d101c7add5bd97b Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 00:32:08 +0900
Subject: [PATCH 1/9] did assignment

---
 src/App.css            |  2 +-
 src/App.jsx            | 13 ++++---------
 src/component/Coin.jsx | 26 ++++++++++++++++++++++++++
 src/index.css          |  4 ++++
 4 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 src/component/Coin.jsx

diff --git a/src/App.css b/src/App.css
index b9d355d..31674db 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   text-align: center;
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index 5d62758..5a2a4e9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,11 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import Coin from "./component/Coin";
 import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
-
   return (
-    <>
-      화이팅
-    </>
+    <div>
+      <Coin/>
+    </div>
   );
 }
 
diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
new file mode 100644
index 0000000..121f0ee
--- /dev/null
+++ b/src/component/Coin.jsx
@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect } from "react";
+
+export default function Coin() {
+  const [coin, setCoin] = useState(0);
+  const div = useRef(null);
+  const text = useRef(null);
+  
+  const earn = () => {
+    if (div.current) div.current.style.backgroundColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random()%0.5})`;
+    setCoin(coin+1);
+  };
+
+  useEffect(() => {
+    if (text.current) text.current.textContent = coin;
+  }, [coin]);
+
+  return (
+    <div ref={div} style={{
+        position: "absolute",
+        inset: 0,
+      }}>
+      <p ref={text} style={{fontWeight: 'bolder'}}>0</p>
+      <button onClick={earn}>Earn</button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 08a3ac9..4c48adc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   font-weight: 500;
   color: #646cff;

From 492011c9ace018510ba428f46b6c5d2252353b11 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 15:37:59 +0900
Subject: [PATCH 2/9] =?UTF-8?q?refactor=20::=20coin=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Coin.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
index 121f0ee..ae6b127 100644
--- a/src/component/Coin.jsx
+++ b/src/component/Coin.jsx
@@ -1,25 +1,20 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 
 export default function Coin() {
   const [coin, setCoin] = useState(0);
   const div = useRef(null);
-  const text = useRef(null);
   
   const earn = () => {
     if (div.current) div.current.style.backgroundColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random()%0.5})`;
     setCoin(coin+1);
   };
 
-  useEffect(() => {
-    if (text.current) text.current.textContent = coin;
-  }, [coin]);
-
   return (
     <div ref={div} style={{
         position: "absolute",
         inset: 0,
       }}>
-      <p ref={text} style={{fontWeight: 'bolder'}}>0</p>
+      <p style={{fontWeight: 'bolder'}}>{coin}$</p>
       <button onClick={earn}>Earn</button>
     </div>
   )

From d178ff346fc14a2e6cb524f47e7741986de881a7 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 15:42:03 +0900
Subject: [PATCH 3/9] =?UTF-8?q?feat=20::=20coin=20=EC=A6=9D=EA=B0=80?=
 =?UTF-8?q?=EB=9F=89=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx            | 3 ++-
 src/component/Coin.jsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5a2a4e9..7c241c7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,9 +2,10 @@ import Coin from "./component/Coin";
 import "./App.css";
 
 function App() {
+  let power = 1;
   return (
     <div>
-      <Coin/>
+      <Coin power={1}/>
     </div>
   );
 }
diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
index ae6b127..66057df 100644
--- a/src/component/Coin.jsx
+++ b/src/component/Coin.jsx
@@ -1,12 +1,12 @@
 import { useState, useRef } from "react";
 
-export default function Coin() {
+export default function Coin({power}) {
   const [coin, setCoin] = useState(0);
   const div = useRef(null);
   
   const earn = () => {
     if (div.current) div.current.style.backgroundColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random()%0.5})`;
-    setCoin(coin+1);
+    setCoin(coin+power);
   };
 
   return (

From 313935ea897307a458d1ccbc75fd74a40ce9a577 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 15:48:08 +0900
Subject: [PATCH 4/9] refactor :: all feat:: upgrade Power

---
 src/App.jsx            |  9 +++++++--
 src/component/Coin.jsx | 19 ++++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7c241c7..fc2120b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,16 @@
 import Coin from "./component/Coin";
+import Upgrade from "./component/Upgrade";
+import { useState } from "react";
 import "./App.css";
 
 function App() {
-  let power = 1;
+  const [coin, setCoin] = useState(0);
+  const [power, setPower] = useState(1);
+
   return (
     <div>
-      <Coin power={1}/>
+      <Coin coin={coin} setCoin={setCoin} power={power} />
+      <Upgrade coin={coin} setCoin={setCoin} power={power} setPower={setPower} />
     </div>
   );
 }
diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
index 66057df..452e42e 100644
--- a/src/component/Coin.jsx
+++ b/src/component/Coin.jsx
@@ -1,21 +1,18 @@
-import { useState, useRef } from "react";
+import { useRef } from "react";
 
-export default function Coin({power}) {
-  const [coin, setCoin] = useState(0);
+export default function Coin({ coin, setCoin, power }) {
   const div = useRef(null);
-  
+
   const earn = () => {
     if (div.current) div.current.style.backgroundColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random()%0.5})`;
-    setCoin(coin+power);
+    setCoin(coin + power);
   };
 
   return (
-    <div ref={div} style={{
-        position: "absolute",
-        inset: 0,
-      }}>
-      <p style={{fontWeight: 'bolder'}}>{coin}$</p>
+    <div ref={div} style={{ position: "absolute", inset: 0 }}>
+      <p style={{ fontWeight: 'bolder' }}>{coin}$</p>
       <button onClick={earn}>Earn</button>
+      <p>Power: {power}</p>
     </div>
-  )
+  );
 }
\ No newline at end of file

From 7c008073c908b2654d4669f2f375c7f6a0bf9624 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 15:49:10 +0900
Subject: [PATCH 5/9] feat:: upgrade

---
 src/component/Upgrade.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/component/Upgrade.jsx

diff --git a/src/component/Upgrade.jsx b/src/component/Upgrade.jsx
new file mode 100644
index 0000000..656109a
--- /dev/null
+++ b/src/component/Upgrade.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function Upgrade({ coin, setCoin, power, setPower }) {
+  const handleUpgrade = () => {
+    if (coin >= 10) {
+      setCoin(coin - 10);
+      setPower(power + 1);
+    } else {
+      alert("10원이 필요합니다!");
+    }
+  };
+
+  return (
+    <div style={{ position: "absolute", top: 100, left: 20 }}>
+      <button onClick={handleUpgrade}>업그레드 (+1 Power, 10원 소모)</button>
+    </div>
+  );
+}
\ No newline at end of file

From 9595e7d383481282031a7ce3a39a9039b668a6ef Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 15:51:47 +0900
Subject: [PATCH 6/9] refactor :: power p

---
 src/component/Coin.jsx    | 1 -
 src/component/Upgrade.jsx | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
index 452e42e..842faaf 100644
--- a/src/component/Coin.jsx
+++ b/src/component/Coin.jsx
@@ -12,7 +12,6 @@ export default function Coin({ coin, setCoin, power }) {
     <div ref={div} style={{ position: "absolute", inset: 0 }}>
       <p style={{ fontWeight: 'bolder' }}>{coin}$</p>
       <button onClick={earn}>Earn</button>
-      <p>Power: {power}</p>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/component/Upgrade.jsx b/src/component/Upgrade.jsx
index 656109a..ac6ca40 100644
--- a/src/component/Upgrade.jsx
+++ b/src/component/Upgrade.jsx
@@ -11,7 +11,8 @@ export default function Upgrade({ coin, setCoin, power, setPower }) {
   };
 
   return (
-    <div style={{ position: "absolute", top: 100, left: 20 }}>
+    <div>
+      <p>Power: {power}</p>
       <button onClick={handleUpgrade}>업그레드 (+1 Power, 10원 소모)</button>
     </div>
   );

From 41695a04b9b0e2c6794335a013b8875619b80994 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 16:09:09 +0900
Subject: [PATCH 7/9] fix :: upgrade

---
 src/App.jsx               |  2 +-
 src/component/Coin.jsx    |  2 +-
 src/component/Upgrade.jsx | 14 ++++++--------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index fc2120b..029ae17 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,8 +9,8 @@ function App() {
 
   return (
     <div>
-      <Coin coin={coin} setCoin={setCoin} power={power} />
       <Upgrade coin={coin} setCoin={setCoin} power={power} setPower={setPower} />
+      <Coin coin={coin} setCoin={setCoin} power={power} />
     </div>
   );
 }
diff --git a/src/component/Coin.jsx b/src/component/Coin.jsx
index 842faaf..da15d0a 100644
--- a/src/component/Coin.jsx
+++ b/src/component/Coin.jsx
@@ -9,7 +9,7 @@ export default function Coin({ coin, setCoin, power }) {
   };
 
   return (
-    <div ref={div} style={{ position: "absolute", inset: 0 }}>
+    <div ref={div} style={{ position: "absolute", inset: 0, zIndex: 0}}>
       <p style={{ fontWeight: 'bolder' }}>{coin}$</p>
       <button onClick={earn}>Earn</button>
     </div>
diff --git a/src/component/Upgrade.jsx b/src/component/Upgrade.jsx
index ac6ca40..eacfc6a 100644
--- a/src/component/Upgrade.jsx
+++ b/src/component/Upgrade.jsx
@@ -1,19 +1,17 @@
-import React from "react";
-
 export default function Upgrade({ coin, setCoin, power, setPower }) {
   const handleUpgrade = () => {
-    if (coin >= 10) {
-      setCoin(coin - 10);
+    if (coin >= (10 * power)) {
+      setCoin(coin - (10 * power));
       setPower(power + 1);
     } else {
-      alert("10원이 필요합니다!");
+      alert(`${10 * power}원이 필요합니다!`);
     }
   };
 
   return (
-    <div>
-      <p>Power: {power}</p>
-      <button onClick={handleUpgrade}>업그레드 (+1 Power, 10원 소모)</button>
+    <div style={{ position: "absolute", left: "42vw", zIndex: 1}}>
+      <p>Power: {power}</p> 
+      <button onClick={handleUpgrade}>업그레드 (+1 Power, {10 * power}원 소모)</button>
     </div>
   );
 }
\ No newline at end of file

From b5ff47d3f2b8292cf9d6f1bb38ad6a403bc59aa7 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 16:12:51 +0900
Subject: [PATCH 8/9] feat:: useEffect

---
 src/App.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 029ae17..8b9eab6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,16 @@
 import Coin from "./component/Coin";
 import Upgrade from "./component/Upgrade";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./App.css";
 
 function App() {
   const [coin, setCoin] = useState(0);
   const [power, setPower] = useState(1);
 
+  useEffect(() => {
+    alert(`Power가 ${power}로 업그레이드 되었습니다!`);
+  }, [power]);
+
   return (
     <div>
       <Upgrade coin={coin} setCoin={setCoin} power={power} setPower={setPower} />

From c3f676eeccbd8107af1b596b658bbd69157db1c5 Mon Sep 17 00:00:00 2001
From: Kr-Verified <dmschd0573@gmail.com>
Date: Thu, 31 Jul 2025 16:13:55 +0900
Subject: [PATCH 9/9] docs:: button context

---
 src/component/Upgrade.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component/Upgrade.jsx b/src/component/Upgrade.jsx
index eacfc6a..add8d82 100644
--- a/src/component/Upgrade.jsx
+++ b/src/component/Upgrade.jsx
@@ -11,7 +11,7 @@ export default function Upgrade({ coin, setCoin, power, setPower }) {
   return (
     <div style={{ position: "absolute", left: "42vw", zIndex: 1}}>
       <p>Power: {power}</p> 
-      <button onClick={handleUpgrade}>업그레드 (+1 Power, {10 * power}원 소모)</button>
+      <button onClick={handleUpgrade}>{10 * power}coin으로 power 증가</button>
     </div>
   );
 }
\ No newline at end of file