AND-SOPT-WEB · Minn-Choi · Oct 26, 2024 · Nov 1, 2024 · Nov 3, 2024 · Nov 4, 2024
diff --git a/week3/.gitignore b/week3/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week3/README.md b/week3/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/week3/index.html b/week3/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="modal-root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week3/package.json b/week3/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "week3",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "styled-components": "^6.1.13"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "vite": "^5.4.9"
+  }
+}
diff --git a/week3/public/fonts/NanumSquareRoundB.ttf b/week3/public/fonts/NanumSquareRoundB.ttf
diff --git a/week3/public/fonts/NanumSquareRoundL.ttf b/week3/public/fonts/NanumSquareRoundL.ttf
diff --git a/week3/public/fonts/NanumSquareRoundR.ttf b/week3/public/fonts/NanumSquareRoundR.ttf
diff --git a/week3/public/vite.svg b/week3/public/vite.svg
diff --git a/week3/src/App.css b/week3/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/week3/src/App.jsx b/week3/src/App.jsx
@@ -0,0 +1,18 @@
+// import { useState } from 'react'
+import './App.css'
+import ProfileCard from './component/ProfileCard'
+import Game from './pages/games/game'
+import GlobalStyle from './styles/global';
+
+function App() {
+
+  return (
+    <>
+    <GlobalStyle />
+      {/* <ProfileCard /> */}
+      <Game />
+    </>
+  )
+}
+
+export default App
diff --git a/week3/src/assets/react.svg b/week3/src/assets/react.svg
diff --git a/week3/src/component/ProfileCard.jsx b/week3/src/component/ProfileCard.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { members } from "../data/member";
+import styled from "@emotion/styled"
+
+// 여기 컴포넌트에는 카드 형식만 만들고 App.jsx나 페이지에서 정보 넣고 돌리기
+
+const ProfileCard = ({  }) => {
+
+  return (
+    <MainContainer>
+      {members.map((k)=>{
+      const [count, setCount] = useState(0)
+
+      return(
+        <Container>
+        <div key={k.id}>
+        <MemberName>{k.name}</MemberName>
+        <MemberInfo>{k.englishName}</MemberInfo>
+        <MemberInfo>{k.github}</MemberInfo>
+        <Btn>
+          <div>{count}</div>
+          <button onClick={() => setCount((count) => count + 1)}>
+            Like
+          </button>
+        </Btn>
+        </div>
+        </Container>
+      )
+
+      })}
+    </MainContainer>
+  )
+}
+
+export default ProfileCard;
+
+
+
+const MainContainer= styled.div`
+  display : flex ;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap:1rem;
+`;
+
+const Container = styled.div`
+  width:10rem;
+  height:10rem;
+  background-color: #b0f0c6;
+  border-radius: 1rem;
+;`
+
+const MemberName = styled.div`
+  font-size:1.5rem;
+  padding-top: 1rem;
+;`
+
+const MemberInfo = styled.div`
+  font-size:1rem;
+;`
+
+const Btn = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap:1rem;
+  margin-top:0.5rem;
+`;
diff --git a/week3/src/component/games/gameBoard.jsx b/week3/src/component/games/gameBoard.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import * as S from './styled';
+import Modal from './modal';
+
+function GameBoard({ startTimer, stopTimer, resetTimer }) { 
+    const [cards, setCards] = useState([]);
+    const [clickedNumbers, setClickedNumbers] = useState(new Set());
+    const [currentClick, setCurrentClick] = useState(1);
+    const [usedNumbers, setUsedNumbers] = useState(new Set());
+    const [isGameOver, setIsGameOver] = useState(false);
+    const [time, setTime] = useState(0);
+    const [intervalId, setIntervalId] = useState(null);
+    const [currentLevel, setCurrentLevel] = useState(1);
+
+    const startCards = () => {
+        const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1);
+        const mixNumbers = initialNumbers.sort(() => Math.random() - 0.5);
+
+        const threeGrid = [];
+        for (let i = 0; i < 9; i += 3) {
+            threeGrid.push(mixNumbers.slice(i, i + 3));
+        }
+
+        setCards(threeGrid);
+    };
+
+    const createNewCard = () => {
+        let randomAfterNumber;
+        do {
+            randomAfterNumber = Math.floor(Math.random() * 9) + 10;
+        } while (usedNumbers.has(randomAfterNumber));
+
+        setUsedNumbers((prev) => new Set(prev).add(randomAfterNumber));
+        return randomAfterNumber;
+    };
+
+    const handleCardClick = (num, rowIndex, colIndex) => {
+        if (num === currentClick) {
+            if (currentClick === 1) {
+                const newIntervalId = setInterval(() => setTime(prev => prev + 0.01), 10);
+                setIntervalId(newIntervalId);
+                startTimer();
+            }
+
+            setClickedNumbers((prev) => new Set(prev).add(num));
+
+            if (num >= 10) {
+                const updatedCards = cards.map((row, rIdx) =>
+                    row.map((card, cIdx) => (rIdx === rowIndex && cIdx === colIndex ? '' : card))
+                );
+                setCards(updatedCards);
+            } else {
+                const randomAfterNumber = createNewCard();
+                const updatedCards = cards.map((row, rIdx) =>
+                    row.map((card, cIdx) => (rIdx === rowIndex && cIdx === colIndex ? randomAfterNumber : card))
+                );
+                setCards(updatedCards);
+            }
+
+            setCurrentClick(prev => prev + 1);
+
+            if (currentClick === 18) {
+                clearInterval(intervalId);
+                stopTimer();
+                setIsGameOver(true);
+            }
+        } else {
+            alert("틀렸어요🥲\n" + currentClick + "를 클릭하세요 !");
+
+        }
+    };
+
+    const closeModal = () => {
+        const currentTime = new Date().toLocaleString();
+        const existingData = JSON.parse(localStorage.getItem('gameData')) || [];
+        existingData.push({
+            currentTime,
+            level: currentLevel,
+            playTime: time.toFixed(2) 
+        });
+        localStorage.setItem('gameData', JSON.stringify(existingData));
+
+        setIsGameOver(false);
+        setTime(0);
+        setCurrentClick(1);
+        setClickedNumbers(new Set());
+        setUsedNumbers(new Set());
+        resetTimer(); 
+        startCards();
+    };
+
+    useEffect(() => {
+        startCards();
+    }, []);
+
+    return (
+    <S.NextNumber>다음 숫자 : {currentClick}
+        <S.Board>
+            {cards.map((row, rowIndex) => (
+                <S.Row key={rowIndex}>
+                    {row.map((num, colIndex) => (
+                        <S.Col key={colIndex} onClick={() => handleCardClick(num, rowIndex, colIndex)}>
+                            {num}
+                        </S.Col>
+                    ))}
+                </S.Row>
+            ))}
+            <Modal isOpen={isGameOver} onClose={closeModal} time={time} />
+        </S.Board>
+    </S.NextNumber>
+    );
+}
+
+export default GameBoard;
diff --git a/week3/src/component/games/header.jsx b/week3/src/component/games/header.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import * as S from "./styled";
+
+function Header({ activeButton, setActiveButton, time, resetTimer }) {
+  const [showHeaderRight, setShowHeaderRight] = useState(true);
+
+  const handleButtonClick = (button) => {
+    setActiveButton(button);
+    setShowHeaderRight(button === "game");
+  };
+
+  return (
+    <S.Header>
+      <S.HeaderLeft>
+        <S.HeaderMent>1 to 50</S.HeaderMent>
+        <S.ButtonGame 
+          onClick={() => handleButtonClick("game")}
+          isActive={activeButton === "game"}
+        >
+          게임
+        </S.ButtonGame>
+        <S.ButtonRanking 
+          onClick={() => handleButtonClick("ranking")}
+          isActive={activeButton === "ranking"}
+        >
+          랭킹
+        </S.ButtonRanking>
+      </S.HeaderLeft>
+      {showHeaderRight && ( 
+        <S.HeaderRight>
+          <S.Dropdown>
+            <select>
+              <option value="1">Level 1</option>
+              <option value="2">Level 2</option>
+              <option value="3">Level 3</option>
+            </select>
+          </S.Dropdown>
+          <S.Timer>{time}초</S.Timer>
+        </S.HeaderRight>
+      )}
+    </S.Header>
+  );
+}
+
+export default Header;