feat: 전역 상태 레벨에 따라서 tile 갯수 변경

src/components/Game/TileMapPanel/index.tsx

@@ -1,13 +1,15 @@
-import { useState } from "react";
 import styled from "styled-components";
-import { type LevelKeyType } from "../../../types/level";
 import generateTileMap from "../../../utils/generateTileMap";
-import { levels } from "../../../constants/level";
+
 import Tile from "./Tile";
+import useLevelSwitch from "../../../hooks/useLevelSwitch";
 
 const TileMapPanel = () => {
-  const [currentLevel] = useState<LevelKeyType>("Beginner");
-  const tileMapArr = generateTileMap(levels[currentLevel].X, levels[currentLevel].Y);
+  const { currentLevelStatus } = useLevelSwitch();
+  console.log(currentLevelStatus, "currentLevelStatus");
+  const { X, Y } = currentLevelStatus;
+
+  const tileMapArr = generateTileMap(X, Y);
   console.log(tileMapArr);
 
   return (

src/constants/level.ts

@@ -1,4 +1,33 @@
-export const levels = {
+import { LevelKeyType } from "./../types/level";
+
+interface LevelsProps {
+  Beginner: {
+    TITLE: LevelKeyType;
+    X: number;
+    Y: number;
+    MINE: number;
+  };
+  Intermediate: {
+    TITLE: LevelKeyType;
+    X: number;
+    Y: number;
+    MINE: number;
+  };
+  Expert: {
+    TITLE: LevelKeyType;
+    X: number;
+    Y: number;
+    MINE: number;
+  };
+  Custom: {
+    TITLE: LevelKeyType;
+    X: number;
+    Y: number;
+    MINE: number;
+  };
+}
+
+export const levels: LevelsProps = {
   Beginner: {
     TITLE: "Beginner",
     X: 8,

src/hooks/useLevelSwitch.ts

@@ -24,17 +24,6 @@ const useLevelSwitch = () => {
       dispatchLevel(change(name));
     }
   };
-  // const xTileAmountByLevels = levelValues.map(({ X }) => ({ X }));
-  // const yTileAmountByLevels = levelValues.map(({ Y }) => ({ Y }));
-
-  // 최근 레벨
-  // 레벨들의 키
-  //
-  // 최근 레벨의 X타일 갯수
-  // 최근 레벨의 Y타일 갯수
-  // 최근 레벨의 지뢰 갯수
-  // dispatch (레벨 변환)
-  // LevelKeyType
 
   return { currentLevel, currentLevelStatus, levelSwitchHandler, levels, levelKeys, levelValues };
 };

src/utils/generateTileMap.ts

@@ -1,8 +1,8 @@
 import { TileType } from "../types/tile";
 
 const generateTileMap = (X: number, Y: number) => {
-  const arr = new Array(X).fill([]).map(() => {
-    return new Array(Y).fill(null).map(
+  const arr = new Array(Y).fill([]).map(() => {
+    return new Array(X).fill(null).map(
       () =>
         ({
           isOpened: false,