♻️ change function components

Author: deli-ght

가위바위보/minju/rspgame/src/App.js

@@ -1,119 +1,86 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import User from "./User";
 import Score from "./Score";
 import "./App.css"
 
-class App extends React.Component{
-  constructor(props){
-    super(props)
-    this.state = {
-      values : {
-        0 : {
-          value : "rock",
-          emoji : "✊"},
-        1 : {
-          value : "scissor",
-          emoji : "✌️"
-        },
-        2 : {
-          value : "paper",
-          emoji : "🖐"
-        }},
-      show : 0,
-      gamer : 0,
-      user : 0
-    }
-    this.checkResult = this.checkResult.bind(this)
-    this.restart = this.restart.bind(this)
-    this.clear = this.clear.bind(this)
+export default function App() {
+  const [values, setValues] = useState({
+    0 : {
+      value : "rock",
+      emoji : "✊"},
+    1 : {
+      value : "scissor",
+      emoji : "✌️"
+    },
+    2 : {
+      value : "paper",
+      emoji : "🖐"
+    }})
+  const [show, setShow] = useState(0);
+  const [gamer, setGamer] = useState(0)
+  const [user, setUser] = useState(0) 
+
+  let showValues;
+
+  const restart = () => {
+    showValues = setInterval(() => {
+      let newValue = show === 0 ? 1
+                 : show === 1 ? 2
+                 : show === 2 && 0
+    setShow(newValue)
+    }, 100);
   }
 
-  componentDidMount(){
-    this.restart()
+
+  const clear = () => {
+    setGamer(0)
+    setUser(0)
   }
 
-  componentWillUnmount(){
-    clearInterval(this.showValues);
+  const result = (winner) => {
+    alert(winner === "gamer" ? "졌다!!!!!" : "이겼다!!!!")
+    winner === "gamer" ? setGamer(gamer++) : setUser(user++)
   }
 
-  checkResult(num){
-    clearInterval(this.showValues)
-    if (this.state.show === num) {
+
+  const checkResult = (num) => {
+    clearInterval(showValues)
+    if (show === num) {
       alert("비겼다.")
     }
-    else if(this.state.show < 2){
-      this.state.show+1 ===  num ? this.result("gamer") : this.result("user")
+    else if(show < 2){
+      (show+1) ===  num ? result("gamer") : result("user")
     }
     else{
-      num === 0 ? this.result("gamer") : this.result("user");
+      num === 0 ? result("gamer") : result("user");
     }
     setTimeout(() => {
-      this.restart()
+      restart()
     }, 300);
   }
-  
-
-  restart(){
-    this.showValues = setInterval(() => {
-      let newValue = this.state.show === 0 ? 1
-                 : this.state.show === 1 ? 2
-                 : this.state.show === 2 && 0
-
-    this.setState({
-      show : newValue
-    })
-    }, 100);
-  }
 
-  // win(){
-  //   alert("이겼다!!!!");
-  //   this.setState((prev) => {
-  //     return {user : prev.user + 1}
-  //   })
+  useEffect(() => {
+    restart()
+    return clearInterval(showValues)
+  })
 
-  // }
-
-  // lose(){
-  //   alert("졌다!!!!!!!!");
-  //   this.setState((prev) => {
-  //     return {gamer : prev.gamer + 1}
-  //   })
-
-  // }
-
-  result(winner){
-    alert(winner === "gamer" ? "졌다!!!!!" : "이겼다!!!!")
-    this.setState((prev) => {
-      return {[winner] : prev[winner] + 1}
-    })
-  }
-
-  clear(){
-    this.setState({
-      user : 0,
-      gamer : 0
-    })
-  }
-
-  render(){
-    return (
-      <>
+  return (
+    <>
         <h1><span className = "gameName">가위바위보</span> 게임을 해봅시다.</h1>
-        <Score player = "gamer">{this.state.gamer}</Score>
+        <Score player = "gamer">{gamer}</Score>
         <div className="gamerValue">
-          {this.state.values[this.state.show].emoji}
+          {values[show].emoji}
         </div>
-        <Score player = "user">{this.state.user}</Score>
+        <Score player = "user">{user}</Score>
         <div className="btns">
-          <User onClick = {this.checkResult.bind(this, 0)}>{this.state.values[0].emoji}</User>
-          <User onClick = {this.checkResult.bind(this, 1)}>{this.state.values[1].emoji}</User>
-          <User onClick = {this.checkResult.bind(this, 2)}>{this.state.values[2].emoji}</User>
-          <User onClick = {this.clear} >🔄</User> 
+          <User onClick = {() => checkResult(0)}>{values[0].emoji}</User>
+          <User onClick = {() => checkResult(1)}>{values[1].emoji}</User>
+          <User onClick = {() => checkResult(2)}>{values[2].emoji}</User>
+          <User onClick = {clear} >🔄</User> 
         </div>
-        </>
-    )
-  }
-
+    </>
+  )
 }
 
+
 export default App;

짝맞추기/minju/src/App.js

@@ -1,5 +1,18 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+import GlobalStyles from "./reset";
+import theme from "./theme";
+import Card from "./Card";
+
 function App() {
-  return <div className="App"></div>;
+  return (
+    <>
+      <GlobalStyles />
+      <ThemeProvider theme={theme}>
+        <Card></Card>
+      </ThemeProvider>
+    </>
+  );
 }
 
 export default App;

짝맞추기/minju/src/Card.jsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import theme from "./theme";
+
+export default function Card() {
+  return (
+    <CardFrame>
+      <CardPiece>
+        <CardFront>fff</CardFront>
+        <CardBack>fff</CardBack>
+      </CardPiece>
+    </CardFrame>
+  );
+}
+
+const CardFrame = styled.div`
+  width: 100px;
+  height: 150px;
+  perspective: 600px;
+`;
+
+const CardPiece = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+`;
+
+const CardFace = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+`;
+
+const CardFront = styled(CardFace)`
+  background: ${theme.cardFront};
+`;
+
+const CardBack = styled(CardFace)`
+  background: ${theme.cardBack};
+  transform: rotateY(180deg);
+`;

짝맞추기/minju/src/reset.js

@@ -0,0 +1,16 @@
+import styled, { createGlobalStyle } from "styled-components";
+
+const GlobalStyles = createGlobalStyle`
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+ul {
+  list-style : none;
+}
+
+`;
+
+export default GlobalStyles;

짝맞추기/minju/src/theme.js

@@ -0,0 +1,9 @@
+const theme = {
+  mainColor: "#F2CEAE",
+  headerColor: "#A61A0D",
+  cardBack: "#D95D30",
+  cardFront: "#F28729",
+  btnColor: "#4F7302",
+};
+
+export default theme;