Merge pull request #16 from Chanwoo-Jeong/Week3/matchCardsGame

Week3/match cards game

Week3-0422/MatchCardsGame/src/App.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import "./App.css";
 import MatchCardsGame from "./Pages/MatchCardsGame";
 import { createGlobalStyle } from "styled-components";
 import { ThemeProvider } from "styled-components";

Week3-0422/MatchCardsGame/src/Pages/layout/DifficultySection.jsx

@@ -6,29 +6,34 @@ const Wrapper = styled.section`
   flex-direction: row;
   justify-content: center;
 
-  padding: 1rem 0;
-
   height: 10rem;
+  padding: 1rem 0;
 `;
 
 const DifficultyType = ["Easy", "Normal", "Hard"];
 
 const DifficultySection = (props) => {
-  const { currentDifficulty , setDifficulty ,reset} = props;
+  const { currentDifficulty, setDifficulty, reset } = props;
 
   return (
     <Wrapper>
-      {DifficultyType.map((difficulty, i) => (
-        <DifficultyButton
-          key={i}
-          difficulty={difficulty}
-          setDifficulty={setDifficulty}
-          currentDifficulty={currentDifficulty}
-          reset={reset}
-        />
-      ))}
+      {DifficultyType.map((difficulty, i) => {
+        return (
+          <DifficultyButton
+            key={i}
+            onClick={() => {
+              setDifficulty(difficulty);
+              reset();
+            }}
+            difficulty={difficulty}
+            currentDifficulty={currentDifficulty}
+          >
+            {difficulty}
+          </DifficultyButton>
+        );
+      })}
     </Wrapper>
   );
 };
 
-export default DifficultySection;
+export default DifficultySection;

Week3-0422/MatchCardsGame/src/Pages/layout/Header.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import { ChangeThemeBtn, ResetButton } from "../../components/Buttons";
-import { useEffect, useState } from "react";
+import { BigButton } from "../../components/Buttons";
+import { useEffect } from "react";
 import { ProgressBar } from "react-progressbar-fancy";
 
 const Wrapper = styled.header`
@@ -32,10 +32,10 @@ const ScoreBoard = styled.div`
 
 const StyledProgressBar = styled(ProgressBar)`
   width: 60%;
-  .number{
+  .number {
     display: none;
   }
-`
+`;
 
 const ButtonBox = styled.div`
   display: flex;
@@ -62,13 +62,15 @@ const Header = (props) => {
     if (goalCount === howManyCorrect) setIsModalOpen(true);
   }, [howManyCorrect, setIsModalOpen, goalCount]);
 
-  const percent = howManyCorrect / goalCount * 100
+  const percent = (howManyCorrect / goalCount) * 100;
 
   return (
     <>
       <Wrapper>
         <ButtonBox>
-          <ChangeThemeBtn setIsDark={setIsDark} />
+          <BigButton onClick={() => setIsDark((prev) => !prev)}>
+            Theme
+          </BigButton>
         </ButtonBox>
         <MainCenterBox>
           <h1>🐣포켓몬 카드 맞추기 게임🐣</h1>
@@ -82,12 +84,10 @@ const Header = (props) => {
               }[currentDifficulty]
             }
           </ScoreBoard>
-          <StyledProgressBar
-            score={percent}
-          />
+          <StyledProgressBar score={percent} />
         </MainCenterBox>
         <ButtonBox>
-          <ResetButton allReset={allReset} />
+          <BigButton onClick={allReset}>AllReset</BigButton>
         </ButtonBox>
       </Wrapper>
     </>

Week3-0422/MatchCardsGame/src/components/Buttons.jsx

@@ -20,26 +20,9 @@ const ResetBtnWrapper = styled.button`
   }
 `;
 
-
-/** 전체 리셋 버튼 **/
-const ResetButton = (props) => {
-  const { allReset } = props;
-
-  return <ResetBtnWrapper onClick={allReset}>RESET</ResetBtnWrapper>;
-};
-
-const ChangeThemeWrapper = styled(ResetBtnWrapper)``;
-
-
-/** 테마 변경 버튼 **/  
-const ChangeThemeBtn = (props) => {
-  const { setIsDark } = props;
-
-  return (
-    <ChangeThemeWrapper onClick={() => setIsDark((prev) => !prev)}>
-      Theme
-    </ChangeThemeWrapper>
-  );
+/** 헤더에 들어가는 큰 버튼 **/
+const BigButton = ({ children, ...props }) => {
+  return <ResetBtnWrapper {...props}>{children}</ResetBtnWrapper>;
 };
 
 const DifficultyBtnWrapper = styled.button`
@@ -67,27 +50,9 @@ const DifficultyBtnWrapper = styled.button`
     `};
 `;
 
-
 /** 난이도 변경 버튼 **/
-const DifficultyButton = (props) => {
-  const { difficulty, setDifficulty, currentDifficulty, reset } = props;
-
-  const changeGameDifficulty = () => {
-    setDifficulty(difficulty);
-  };
-
-  return (
-    <DifficultyBtnWrapper
-      onClick={() => {
-        changeGameDifficulty();
-        reset();
-      }}
-      difficulty={difficulty}
-      currentDifficulty={currentDifficulty}
-    >
-      {difficulty}
-    </DifficultyBtnWrapper>
-  );
+const DifficultyButton = ({ children, ...props }) => {
+  return <DifficultyBtnWrapper {...props}>{children}</DifficultyBtnWrapper>;
 };
 
-export { ChangeThemeBtn, ResetButton, DifficultyButton };
+export { BigButton, DifficultyButton };

Week3-0422/MatchCardsGame/src/main.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>