[2일차] 신은총 과제 제출합니다.

src/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   text-align: center;
 }
 

src/App.jsx

@@ -1,16 +1,21 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import Coin from "./component/Coin";
+import Upgrade from "./component/Upgrade";
+import { useState, useEffect } from "react";
 import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
+  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} />
+      <Coin coin={coin} setCoin={setCoin} power={power} />
+    </div>
   );
 }
 

src/component/Coin.jsx

@@ -0,0 +1,17 @@
+import { useRef } from "react";
+
+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);
+  };
+
+  return (
+    <div ref={div} style={{ position: "absolute", inset: 0, zIndex: 0}}>
+      <p style={{ fontWeight: 'bolder' }}>{coin}$</p>
+      <button onClick={earn}>Earn</button>
+    </div>
+  );
+}

src/component/Upgrade.jsx

@@ -0,0 +1,17 @@
+export default function Upgrade({ coin, setCoin, power, setPower }) {
+  const handleUpgrade = () => {
+    if (coin >= (10 * power)) {
+      setCoin(coin - (10 * power));
+      setPower(power + 1);
+    } else {
+      alert(`${10 * power}원이 필요합니다!`);
+    }
+  };
+
+  return (
+    <div style={{ position: "absolute", left: "42vw", zIndex: 1}}>
+      <p>Power: {power}</p> 
+      <button onClick={handleUpgrade}>{10 * power}coin으로 power 증가</button>
+    </div>
+  );
+}

src/index.css

@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   font-weight: 500;
   color: #646cff;