diff --git a/react_webgame/main/Ball.jsx b/react_webgame/main/Ball.jsx
deleted file mode 100644
index a2d2bffd..00000000
--- a/react_webgame/main/Ball.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { memo } from "react";
-
-const Ball = memo(({ number }) => {
-  let background;
-  if (number <= 10) {
-    background = "red";
-  } else if (number <= 20) {
-    background = "orange";
-  } else if (number <= 30) {
-    background = "yellow";
-  } else if (number <= 40) {
-    background = "blue";
-  } else {
-    background = "green";
-  }
-  return (
-    <div className="ball" style={{ background }}>
-      {number}
-    </div>
-  );
-});
-
-export default Ball;
diff --git a/react_webgame/main/Lotto-class.jsx b/react_webgame/main/Lotto-class.jsx
deleted file mode 100644
index 1db6cb5b..00000000
--- a/react_webgame/main/Lotto-class.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Component } from "react";
-import Ball from "./Ball";
-
-function getWinNumbers() {
-  console.log("getWinNumbers");
-  const candidate = Array(45)
-    .fill()
-    .map((v, i) => i + 1);
-  const shuffle = [];
-  while (candidate.length > 0) {
-    shuffle.push(
-      candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]
-    );
-  }
-  const bonusNumber = shuffle[shuffle.length - 1];
-  const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c);
-  return [...winNumbers, bonusNumber];
-}
-
-class Lotto extends Component {
-  state = {
-    winNumbers: getWinNumbers(),
-    winBalls: [],
-    bonus: null,
-    redo: false,
-  };
-
-  timeouts = [];
-
-  runTimeouts = () => {
-    const { winNumbers } = this.state;
-    for (let i = 0; i < this.state.winNumbers.length - 1; i++) {
-      this.timeouts[i] = setTimeout(() => {
-        this.setState((prevState) => {
-          return {
-            winBalls: [...prevState.winBalls, winNumbers[i]],
-          };
-        });
-      }, (i + 1) * 1000);
-    }
-    this.timeouts[6] = setTimeout(() => {
-      this.setState({
-        bonus: winNumbers[6],
-        redo: true,
-      });
-    }, 7000);
-  };
-
-  componentDidMount() {
-    this.runTimeouts();
-  }
-
-  componentWillUnmount() {
-    this.timeouts.forEach((v) => {
-      clearTimeout(v);
-    });
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.timeouts.length === 0) {
-      this.runTimeouts();
-    }
-  }
-
-  onClickRedo = () => {
-    this.setState({
-      winNumbers: getWinNumbers(),
-      winBalls: [],
-      bonus: null,
-      redo: false,
-    });
-    this.timeouts = [];
-  };
-
-  render() {
-    const { winBalls, bonus, redo } = this.state;
-    return (
-      <>
-        <div>당첨 숫자</div>
-        <div id="결과창">
-          {winBalls.map((v) => (
-            <Ball key={v} number={v} />
-          ))}
-        </div>
-        <div>보너스</div>
-        {bonus && <Ball number={bonus} />}
-        {redo && <button onClick={this.onClickRedo}>한 번 더!</button>}
-      </>
-    );
-  }
-}
-
-export default Lotto;
diff --git a/react_webgame/main/Lotto.jsx b/react_webgame/main/Lotto.jsx
deleted file mode 100644
index 1877e8b6..00000000
--- a/react_webgame/main/Lotto.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
-} from "react";
-import Ball from "./Ball";
-
-function getWinNumbers() {
-  console.log("getWinNumbers");
-  const candidate = Array(45)
-    .fill()
-    .map((v, i) => i + 1);
-  const shuffle = [];
-  while (candidate.length > 0) {
-    shuffle.push(
-      candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]
-    );
-  }
-  const bonusNumber = shuffle[shuffle.length - 1];
-  const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c);
-  return [...winNumbers, bonusNumber];
-}
-
-const Lotto = () => {
-  const lottoNumbers = useMemo(() => getWinNumbers(), []);
-  const [winNumbers, setWinNumbers] = useState(lottoNumbers);
-  const [winBalls, setWinBalls] = useState([]);
-  const [bonus, setBonus] = useState(null);
-  const [redo, setRedo] = useState(false);
-  const timeouts = useRef([]);
-
-  useEffect(() => {
-    runTimeouts();
-    return () => {
-      timeouts.current.forEach((v) => {
-        clearTimeout(v);
-      });
-    };
-  }, [timeouts.current]);
-
-  const runTimeouts = () => {
-    for (let i = 0; i < winNumbers.length - 1; i++) {
-      timeouts.current[i] = setTimeout(() => {
-        setWinBalls((prevBalls) => [...prevBalls, winNumbers[i]]);
-      }, (i + 1) * 1000);
-    }
-    timeouts.current[6] = setTimeout(() => {
-      setBonus(winNumbers[6]);
-      setRedo(true);
-    }, 7000);
-  };
-
-  const onClickRedo = useCallback(() => {
-    setWinNumbers(getWinNumbers());
-    setWinBalls([]);
-    setBonus(null);
-    setRedo(false);
-    timeouts.current = [];
-  }, [winNumbers]);
-
-  return (
-    <>
-      <div>당첨 숫자</div>
-      <div id="결과창">
-        {winBalls.map((v) => (
-          <Ball key={v} number={v} />
-        ))}
-      </div>
-      <div>보너스</div>
-      {bonus && <Ball number={bonus} />}
-      {redo && <button onClick={onClickRedo}>한 번 더!</button>}
-    </>
-  );
-};
-
-export default Lotto;
diff --git a/react_webgame/main/Table.jsx b/react_webgame/main/Table.jsx
new file mode 100644
index 00000000..b7bfda11
--- /dev/null
+++ b/react_webgame/main/Table.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Tr from "./Tr";
+
+const Table = () => {
+  return <Tr></Tr>;
+};
+
+export default Table;
diff --git a/react_webgame/main/Td.jsx b/react_webgame/main/Td.jsx
new file mode 100644
index 00000000..b0475f5d
--- /dev/null
+++ b/react_webgame/main/Td.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Td = () => {
+  return <td>{""}</td>;
+};
+
+export default Td;
diff --git a/react_webgame/main/TicTacToe.jsx b/react_webgame/main/TicTacToe.jsx
new file mode 100644
index 00000000..ff164e85
--- /dev/null
+++ b/react_webgame/main/TicTacToe.jsx
@@ -0,0 +1,34 @@
+import React, { useState, useReducer } from "react";
+import Table from "./Table";
+
+const initialState = {
+  winner: "",
+  turn: "0",
+  tableData: [
+    ["", "", ""],
+    ["", "", ""],
+    ["", "", ""],
+  ],
+};
+
+const reducer = (state, action) => {};
+
+const TicTacToe = () => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // const [winner, setWinner] = useState("initialState");
+  // const [turn, setTurn] = useState("0");
+  // const [tableData, setTableData] = useState([
+  //   ["", "", ""],
+  //   ["", "", ""],
+  //   ["", "", ""],
+  // ]);
+  return (
+    <>
+      <Table />
+      {winner && <div>{winner}님의 승리</div>}
+    </>
+  );
+};
+
+export default TicTacToe;
diff --git a/react_webgame/main/Tr.jsx b/react_webgame/main/Tr.jsx
new file mode 100644
index 00000000..cf02316e
--- /dev/null
+++ b/react_webgame/main/Tr.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Td from "./Td";
+
+const Tr = () => {
+  return <Td>{""}</Td>;
+};
+
+export default Tr;
diff --git a/react_webgame/main/index.html b/react_webgame/main/index.html
index 45540d14..2e607a56 100644
--- a/react_webgame/main/index.html
+++ b/react_webgame/main/index.html
@@ -1,18 +1,16 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>로또 추첨기</title>
+    <title>틱택토</title>
     <style>
-      .ball {
-        display: inline-block;
-        border: 1px solid black;
-        border-radius: 20px;
+      table {
+        border-collapse: collapse;
+      }
+      td {
+        border: 1ps solid black;
         width: 40px;
         height: 40px;
-        line-height: 40px;
-        font-size: 20px;
         text-align: center;
-        margin-right: 20px;
       }
     </style>
   </head>