react web game : useContext

react_webgame/main/Form.jsx

@@ -16,12 +16,9 @@ const Form = () => {
   const onChangeMine = useCallback((e) => {
     setMine(e.target.value);
   }, []);
-  const onClickBtn = useCallback(
+  const onClickBtn = useCallback(() => {
-    (e) => {
+    dispatch({ type: START_GAME, row, cell, mine });
-      dispatch({ type: START_GAME, row, cell, mine });
+  }, [row, cell, mine]);
-    },
-    [row, cell, mine]
-  );
 
   return (
     <div>

react_webgame/main/MineSearch.jsx

@@ -27,6 +27,46 @@ const initialState = {
   result: "",
 };
 
+// 지뢰 심는 함수
+const plantMine = (row, cell, mine) => {
+  console.log(row, cell, mine);
+  const candidate = Array(row * cell)
+    .fill()
+    .map((arr, i) => {
+      // 0 ~ 가로*세로 만큼 숫자 배열 생성
+      return i;
+    });
+  const shuffle = [];
+  // 지뢰 갯수 만큼 지뢰 생성
+  while (candidate.length > row * cell - mine) {
+    const chosen = candidate.splice(
+      Math.floor(Math.random() * candidate.length),
+      1
+    )[0];
+    shuffle.push(chosen);
+  }
+
+  // 가로 * 세로 만큼의 2차원 배열 생성
+  const data = [];
+  for (let i = 0; i < row; i++) {
+    const rowData = [];
+    data.push(rowData);
+    for (let j = 0; j < cell; j++) {
+      rowData.push(CODE.NORMAL);
+    }
+  }
+
+  // 지뢰 심기
+  for (let k = 0; k < shuffle.length; k++) {
+    const ver = Math.floor(shuffle[k] / cell);
+    const hor = shuffle[k] % cell;
+    data[ver][hor] = CODE.MINE;
+  }
+
+  console.log(data);
+  return data;
+};
+
 // action 명
 export const START_GAME = "START_GAME";
 
@@ -36,7 +76,7 @@ const reducer = (state, action) => {
     case START_GAME:
       return {
         ...state,
-        tableDate: plantMine(action.row, action.cell, action.mine),
+        tableData: plantMine(action.row, action.cell, action.mine),
       };
     default:
       return state;
@@ -46,16 +86,16 @@ const reducer = (state, action) => {
 const MineSearch = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const value = useMemo(() => {
+  const value = useMemo(() => ({ tableData: state.tableData, dispatch }), [
-    tableData: state.tableData, dispatch;
+    state.tableData,
-  }, [state.tableData]);
+  ]);
 
   return (
     <TableContext.Provider value={value}>
       <Form />
-      <div>{timer}</div>
+      <div>{state.timer}</div>
       <Table />
-      <div>{result}</div>
+      <div>{state.result}</div>
     </TableContext.Provider>
   );
 };

react_webgame/main/Table.jsx

@@ -1,7 +1,18 @@
-import React from "react";
+import React, { useContext } from "react";
+import { TableContext } from "./MineSearch";
+import Tr from "./Tr";
 
 const Table = () => {
-  return <div></div>;
+  const { tableData } = useContext(TableContext);
+  return (
+    <table>
+      {Array(tableData.length)
+        .fill()
+        .map((tr, i) => (
+          <Tr rowIndex={i} />
+        ))}
+    </table>
+  );
 };
 
 export default Table;

react_webgame/main/Td.jsx

@@ -1,7 +1,42 @@
-import React from "react";
+import React, { useContext } from "react";
+import { CODE, TableContext } from "./MineSearch";
 
-const Td = () => {
+const getTdStyle = (code) => {
-  return <div></div>;
+  switch (code) {
+    case CODE.NORMAL:
+    case CODE.MINE:
+      return {
+        background: "#444",
+      };
+    case CODE.OPENED:
+      return {
+        background: "white",
+      };
+    default:
+      return {
+        background: "white",
+      };
+  }
+};
+
+const getTdText = (code) => {
+  switch (code) {
+    case CODE.NORMAL:
+      return "";
+    case CODE.MINE:
+      return "X";
+    default:
+      return "";
+  }
+};
+
+const Td = ({ rowIndex, cellIndex }) => {
+  const { tableData } = useContext(TableContext);
+  return (
+    <td style={getTdStyle(tableData[rowIndex][cellIndex])}>
+      {getTdText(tableData[rowIndex][cellIndex])}
+    </td>
+  );
 };
 
 export default Td;

react_webgame/main/Tr.jsx

@@ -1,7 +1,17 @@
-import React from "react";
+import React, { useContext } from "react";
+import { TableContext } from "./MineSearch";
+import Td from "./Td";
 
-const Tr = () => {
+const Tr = ({ rowIndex }) => {
-  return <div></div>;
+  const { tableData } = useContext(TableContext);
+  return (
+    <tr>
+      {tableData[0] &&
+        Array(tableData[0].length)
+          .fill()
+          .map((td, i) => <Td rowIndex={rowIndex} cellIndex={i} />)}
+    </tr>
+  );
 };
 
 export default Tr;

react_webgame/main/client.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDom from "react-dom";
+import MineSearch from "./MineSearch";
 
-import TicTacToe from "./TicTacToe";
+ReactDom.render(<MineSearch />, document.querySelector("#root"));
-
-ReactDom.render(<TicTacToe />, document.querySelector("#root"));

react_webgame/main/index.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>틱택토</title>
+    <title>지뢰찾기</title>
     <style>
       table {
         border-collapse: collapse;