codeit-boost-ds-1 · yyrin · Jul 28, 2024
diff --git a/rock-scissor-paper/package.json b/rock-scissor-paper/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "rock-scissor-paper",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts 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"
+    ]
+  }
+}
diff --git a/rock-scissor-paper/public/index.html b/rock-scissor-paper/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>가위바위보</title>
+    <style>
+      body {
+        background-color: #40089a;
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/rock-scissor-paper/src/App.js b/rock-scissor-paper/src/App.js
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import Button from './Button';
+import HandButton from './HandButton';
+import HandIcon from './HandIcon';
+import { compareHand, generateRandomHand } from './utils';
+
+const INITIAL_VALUE = 'rock';
+
+function getResult(me, other) {
+  const comparison = compareHand(me, other);
+  if (comparison > 0) return '승리';
+  if (comparison < 0) return '패배';
+  return '무승부';
+}
+
+function App() {
+  const [hand, setHand] = useState(INITIAL_VALUE);
+  const [otherHand, setOtherHand] = useState(INITIAL_VALUE);
+  const [gameHistory, setGameHistory] = useState([]);
+  const [score, setScore] = useState(0);
+  const [otherScore, setOtherScore] = useState(0);
+  const [bet, setBet] = useState(1);
+
+  const handleButtonClick = (nextHand) => {
+    const nextOtherHand = generateRandomHand();
+    const nextHistoryItem = getResult(nextHand, nextOtherHand);
+    const comparison = compareHand(nextHand, nextOtherHand);
+    setHand(nextHand);
+    setOtherHand(nextOtherHand);
+    setGameHistory([...gameHistory, nextHistoryItem]);
+    if (comparison > 0) setScore(score + bet);
+    if (comparison < 0) setOtherScore(otherScore + bet);
+  };
+
+  const handleClearClick = () => {
+    setHand(INITIAL_VALUE);
+    setOtherHand(INITIAL_VALUE);
+    setGameHistory([]);
+    setScore(0);
+    setOtherScore(0);
+    setBet(1);
+  };
+
+  const handleBetChange = (e) => {
+    let num = Number(e.target.value);
+    if (num > 9) num %= 10;
+    if (num < 1) num = 1;
+    num = Math.floor(num);
+    setBet(num);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClearClick}>처음부터</Button>
+      <div>
+        {score} : {otherScore}
+      </div>
+      <div>
+        <HandIcon value={hand} />
+        VS
+        <HandIcon value={otherHand} />
+      </div>
+      <div>
+        <input type="number" value={bet} min={1} max={9} onChange={handleBetChange}></input>
+      </div>
+      <p>승부 기록: {gameHistory.join(', ')}</p>
+      <div>
+        <HandButton value="rock" onClick={handleButtonClick} />
+        <HandButton value="scissor" onClick={handleButtonClick} />
+        <HandButton value="paper" onClick={handleButtonClick} />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/rock-scissor-paper/src/Button.js b/rock-scissor-paper/src/Button.js
@@ -0,0 +1,5 @@
+function Button({ children, onClick }) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+export default Button;
diff --git a/rock-scissor-paper/src/HandButton.css b/rock-scissor-paper/src/HandButton.css
@@ -0,0 +1,27 @@
+.HandButton {
+  width: 166px;
+  height: 166px;
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: url('./assets/purple.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.HandButton .HandButton-icon {
+  opacity: 0.45;
+  width: 55px;
+  height: 55px;
+}
+
+.HandButton:hover {
+  background-image: url('./assets/yellow.svg');
+}
+
+.HandButton:hover .HandButton-icon {
+  opacity: 0.87;
+}
diff --git a/rock-scissor-paper/src/HandButton.js b/rock-scissor-paper/src/HandButton.js
@@ -0,0 +1,14 @@
+import HandIcon from './HandIcon';
+import './HandButton.css';
+
+// CSS 파일로 스타일을 적용해 주세요
+function HandButton({ value, onClick }) {
+  const handleClick = () => onClick(value);
+  return (
+    <button className="HandButton" onClick={handleClick}>
+      <HandIcon className="HandButton-icon" value={value} />
+    </button>
+  );
+}
+
+export default HandButton;
diff --git a/rock-scissor-paper/src/HandIcon.js b/rock-scissor-paper/src/HandIcon.js
@@ -0,0 +1,17 @@
+import rockImg from './assets/rock.svg';
+import scissorImg from './assets/scissor.svg';
+import paperImg from './assets/paper.svg';
+
+const IMAGES = {
+  rock: rockImg,
+  scissor: scissorImg,
+  paper: paperImg,
+};
+
+// className prop을 추가하고, img 태그에 적용해주세요
+function HandIcon({ value, className }) {
+  const src = IMAGES[value];
+  return <img className={className} src={src} alt={value} />;
+}
+
+export default HandIcon;
diff --git a/rock-scissor-paper/src/assets/ic-reset.svg b/rock-scissor-paper/src/assets/ic-reset.svg
diff --git a/rock-scissor-paper/src/assets/logo.svg b/rock-scissor-paper/src/assets/logo.svg
diff --git a/rock-scissor-paper/src/assets/paper.svg b/rock-scissor-paper/src/assets/paper.svg
diff --git a/rock-scissor-paper/src/assets/purple.svg b/rock-scissor-paper/src/assets/purple.svg
diff --git a/rock-scissor-paper/src/assets/rock.svg b/rock-scissor-paper/src/assets/rock.svg
diff --git a/rock-scissor-paper/src/assets/scissor.svg b/rock-scissor-paper/src/assets/scissor.svg
diff --git a/rock-scissor-paper/src/assets/yellow-win.svg b/rock-scissor-paper/src/assets/yellow-win.svg