AND-SOPT-WEB · Rinakk · Nov 2, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/README.md b/README.md
diff --git a/week3_practice/index.html b/week3_practice/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Click the Numbers Game</title>
+  <link rel="stylesheet" href="./index.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
diff --git a/week3_practice/package.json b/week3_practice/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "week3_practice",
+  "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"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "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.10"
+  }
+}
diff --git a/week3_practice/public/vite.svg b/week3_practice/public/vite.svg
diff --git a/week3_practice/src/App.css b/week3_practice/src/App.css
@@ -0,0 +1,29 @@
+.app {
+  text-align: center;
+  margin-top: 80px;
+}
+
+.tab-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.tab-container button {
+  padding: 10px 20px;
+  font-size: 1em;
+  cursor: pointer;
+  margin: 0 5px;
+  border: none;
+  border-radius: 5px;
+}
+
+.tab-container .active {
+  background-color: #4caf50;
+  color: white;
+}
+
+.next-number {
+  font-weight: bold;
+  padding: 30px;
+}
diff --git a/week3_practice/src/app.jsx b/week3_practice/src/app.jsx
@@ -0,0 +1,98 @@
+// src/App.jsx
+
+import React, { useState, useRef, useEffect } from 'react';
+import Header from './components/Header';
+import Board from './components/Board';
+import RankingBoard from './components/RankingBoard';
+import './App.css';
+
+const App = () => {
+  const [selectedTab, setSelectedTab] = useState('game'); // 'game' 또는 'ranking'
+  const [isGameStarted, setIsGameStarted] = useState(false);
+  const [isGameCompleted, setIsGameCompleted] = useState(false);
+  const [time, setTime] = useState(0);
+  const [nextNumber, setNextNumber] = useState(1);
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    if (isGameStarted) {
+      timerRef.current = setInterval(() => {
+        setTime((prevTime) => prevTime + 0.01);
+      }, 10);
+    } else {
+      clearInterval(timerRef.current); // 타이머 정지
+    }
+
+
+    return () => clearInterval(timerRef.current);
+  }, [isGameStarted]);
+
+  const startGame = () => {
+    setTime(0); // 타이머 초기화
+    setNextNumber(1);
+    setIsGameStarted(false); 
+    setIsGameCompleted(false);
+  };
+
+  const startTimerOnFirstClick = () => {
+    if (!isGameStarted) {
+      setIsGameStarted(true); // 첫 숫자를 누를 때 타이머 시작
+    }
+  };
+
+  const completeGame = () => {
+    setIsGameStarted(false);
+    setIsGameCompleted(true);
+
+    // 게임 완료 시 로컬 스토리지에 기록 저장
+    const gameData = {
+      date: new Date().toLocaleString(),
+      level: "레벨 1",
+      playTime: time.toFixed(2),
+    };
+    localStorage.setItem(`gameResult_${Date.now()}`, JSON.stringify(gameData));
+
+    alert(`성공! ${time.toFixed(2)}초 소요`);
+  };
+
+  const resetGame = () => {
+    setIsGameStarted(false);
+    setTime(0);
+    setNextNumber(1);
+    setIsGameCompleted(false);
+  };
+
+  const handleTabChange = (tab) => {
+    resetGame();
+    setSelectedTab(tab);
+  };
+
+  return (
+    <>
+      <Header
+        selectedTab={selectedTab}
+        onTabChange={handleTabChange}
+        time={time}
+        isGameStarted={isGameStarted}
+      />
+      <div className="app">
+        {selectedTab === 'game' && (
+          <div className="game-container">
+            <div className="next-number">다음 숫자: {nextNumber}</div>
+            <Board
+              nextNumber={nextNumber}
+              onCorrectClick={() => {
+                startTimerOnFirstClick(); // 첫 숫자 클릭 시 타이머 시작
+                setNextNumber((prev) => prev + 1);
+              }}
+              onGameComplete={completeGame}
+            />
+          </div>
+        )}
+        {selectedTab === 'ranking' && <RankingBoard />}
+      </div>
+    </>
+  );
+};
+
+export default App;
diff --git a/week3_practice/src/assets/react.svg b/week3_practice/src/assets/react.svg
diff --git a/week3_practice/src/components/Board.css b/week3_practice/src/components/Board.css
@@ -0,0 +1,8 @@
+.board {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, 80px);
+    grid-template-rows: repeat(3, 80px);
+    justify-content: center;
+  }
+
diff --git a/week3_practice/src/components/Board.jsx b/week3_practice/src/components/Board.jsx
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import Tile from './Tile';
+import './Board.css';
+
+const Board = ({ nextNumber, onCorrectClick, onGameComplete }) => {
+  const [numbers, setNumbers] = useState([]);
+
+  useEffect(() => {
+    initializeBoard();
+  }, []);
+
+  const initializeBoard = () => {
+    const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1); // 1 to 9
+    shuffleArray(initialNumbers);
+    setNumbers(initialNumbers);
+  };
+
+  const shuffleArray = (array) => {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+  };
-  const initializeBoard = () => {
-    const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1); // 1 to 9
-    shuffleArray(initialNumbers);
-    setNumbers(initialNumbers);
-  };
-
-  const shuffleArray = (array) => {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-  };
+  const initializeBoard = () => {
+    const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1); // 1 to 9
+   const shuffledNumbers = shuffleArray(initialNumbers); 
+  setNumbers(shuffledNumbers);
+  };
+
+  const shuffleArray = (array) => {
+    const newArray = [...array]; // 원본 배열 복사
+    for (let i = newArray.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+    }
+    return newArray;
+  };
-  const initializeBoard = () => {
-    const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1); // 1 to 9
-    shuffleArray(initialNumbers);
-    setNumbers(initialNumbers);
-  };
-
-  const shuffleArray = (array) => {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-  };
+  const initializeBoard = () => {
+    const initialNumbers = Array.from({ length: 9 }, (_, i) => i + 1); // 1 to 9
+   const shuffledNumbers = shuffleArray(initialNumbers); 
+  setNumbers(shuffledNumbers);
+  };
+
+  const shuffleArray = (array) => {
+    const newArray = [...array]; // 원본 배열 복사
+    for (let i = newArray.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+    }
+    return newArray;
+  };
+
+  const handleTileClick = (number) => {
+    if (number === nextNumber) {
+      if (number === 9) { // 9가 마지막 숫자
+        onGameComplete();
+      } else {
+        onCorrectClick();
+      }
+    }
+  };
+
+  return (
+    <div className="board">
+      {numbers.map((number) => (
+        <Tile
+          key={number}
+          number={number}
+          onClick={() => handleTileClick(number)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Board;
diff --git a/week3_practice/src/components/Header.css b/week3_practice/src/components/Header.css
@@ -0,0 +1,39 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #4caf50;
+    color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  .tabs {
+    display: flex;
+    gap: 10px;
+  }
+
+  .tabs button {
+    padding: 10px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    background: none;
+    border: none;
+    color: white;
+  }
+
+  .tabs .active {
+    background-color: white;
+    color: #4caf50;
+    border-radius: 5px;
+  }
+
+  .header-right {
+    display: flex;
+    gap: 10px;
+  }
+
diff --git a/week3_practice/src/components/Header.jsx b/week3_practice/src/components/Header.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import './Header.css';
+
+const Header = ({ selectedTab, onTabChange, time }) => {
+  return (
+    <header className="header">
+      <span>1 to 50</span>
+      <div className="tabs">
+        <button
+          onClick={() => onTabChange('game')}
+          className={selectedTab === 'game' ? 'active' : ''}
+        >
+          게임
+        </button>
+        <button
+          onClick={() => onTabChange('ranking')}
+          className={selectedTab === 'ranking' ? 'active' : ''}
+        >
+          랭킹
+        </button>
+      </div>
+      {selectedTab === 'game' && (
+        <div className="header-right">
+          <select>
+            <option>레벨 1</option>
+            <option>레벨 2</option>
+            <option>레벨 3</option>
+          </select>
+          <span>타이머: {time.toFixed(2)} 초</span>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Header;
diff --git a/week3_practice/src/components/RankingBoard.css b/week3_practice/src/components/RankingBoard.css
@@ -0,0 +1,52 @@
+.ranking-board {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
+
+  .ranking-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .reset-button {
+    padding: 5px 10px;
+    font-size: 0.9em;
+    color: #4caf50;
+    background-color: #fff;
+    border: 1px solid #4caf50;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  .reset-button:hover {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .ranking-board table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .ranking-board th,
+  .ranking-board td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .ranking-board th {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .ranking-board td {
+    color: #555;
+  }
+