[Round3] React로 웹사이트 만들기

05ovo2e/Round2/React 웹 개발 시작하기/dicegame/App.js

@@ -0,0 +1,12 @@
+import Dice from './Dice';
+
+function App() {
+    return (
+        <div>
+            <Dice />
+        </div>
+    );
+
+}
+
+export default App;

05ovo2e/Round2/React 웹 개발 시작하기/dicegame/index.js

@@ -0,0 +1,10 @@
+
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <App />, document.getElementById('root')
+);
+

05ovo2e/Round2/React 웹 개발 시작하기/hello_react/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

05ovo2e/Round2/React 웹 개발 시작하기/hello_react/App.js

@@ -0,0 +1,26 @@
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>안녕 리액트!</h1>
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

05ovo2e/Round2/React 웹 개발 시작하기/hello_react/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

05ovo2e/Round2/React 웹 개발 시작하기/hello_react/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/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;

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/Button.js

@@ -0,0 +1,8 @@
+
+
+function Button({ children, onClick }) {
+
+  return <button onClick={onClick}>{children}</button>;
+}
+
+export default Button;

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/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;
+}

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/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={onClick}>
+      <HandIcon className="HandButton-icon" value={value} />
+    </button>
+  );
+}
+
+export default HandButton;

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/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({ className, value }) {
+  const src = IMAGES[value];
+  return <img className = {className} src={src} alt={value} />;
+}
+
+export default HandIcon;

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/index.js

@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

05ovo2e/Round2/React 웹 개발 시작하기/rock-scissor-paper/utils.js

@@ -0,0 +1,22 @@
+const HANDS = ['rock', 'scissor', 'paper'];
+
+const WINS = {
+  rock: 'scissor',
+  scissor: 'paper',
+  paper: 'rock',
+};
+
+export function compareHand(a, b) {
+  if (WINS[a] === b) return 1;
+  if (WINS[b] === a) return -1;
+  return 0;
+}
+
+function random(n) {
+  return Math.floor(Math.random() * n);
+}
+
+export function generateRandomHand() {
+  const idx = random(HANDS.length);
+  return HANDS[idx];
+}