[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (5)

[ 오늘의 작업 과정 ]

- 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기

- 3-3 경고 알림 모달창 뜨고 해당 돌 지우게 만들기

---

1. 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기

  다시 하기 버튼을 눌렀을 때의 동작은 resetBtn 함수안에서 이루어지기 때문에 먼저 오목판 상태를 담을 table state를 useState로 만들어두고 다시하기 버튼을 클릭하면 table 값을 state를 true로 변경하도록 했다. 그리고 table state가 true로 바뀌었을 때 오목판 페이지가 다시 리로드 되도록 하기 위해 window.location.reload 함수를 사용했고 안에 해당 오목판 게임의 경로를 적어주었다.  

function Game2() {
...생략
  var [modal, setModal] = useState(false); // 다시하기 모달창
  var [table, setTable] = useState(false); // 오목판 전체 상태
  
   // 다시 하기 버튼 클릭 시 modal 값을 false로 변경
  const resetBtn = () => {
    setModal(false);
    setTable(true);
  };
  
  return (
    <>
    ...생략
      {modal ? <Modal reset={resetBtn}/> : null}
      {table ? window.location.reload('/game/2'): ''}
      
       <table className="tb2" onClick={() => { 
        return setModal(true)  // 임시로 table 클릭 시 다시하기 모달창 나오도록
      .... 생략
    </>
  );
}

{/* 다시 하기 모달창 */}
function Modal(props){
  return (
    <>
      <div style={{background: "white", width: "190px",height: "145px",borderRadius: "10px",padding: "20px", position: "absolute",margin: "20% 33%"}}>
        <p style={{ marginBottom: "40px", fontSize: "17px" }}>🏆️ 흰 돌 승리! </p>
        <button style={{  marginBottom: "30px", border: "none",height: "35px", background: "#3369fe", color: "#eee", borderRadius: "5px"}}
                onClick={props.reset}>다시 하기</button>
      </div>
    </>
  )
}

 

 

[ Trouble - Shooting ]

✔️ 각 게임별로 Route 활용해 '/game/1', '/game/2'.. 이런식으로 경로 지정해야하는 문제 (App.js에서)

오목판 페이지의 경로 지정이 아직 안되어 있어 경로 지정을 하는 김에 전체 게임별로 경로 지정을 위처럼 하기로 했다. 

일단 아래 코드에서 게임별로 컨텐츠가 바뀌어 보여지는 자식 컴포넌트인 TabContent에서 Route로 경로 이동을 지정해주면 되지 않을까 라고 생각해 코드를 짜려 했지만 애초에 오류가나 동작을 하지 않았다.. 

function App() {
  let [tab, setTab] = useState(0);

  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Content />} />
        <Route
          path="/game"
          element={
            <div className="webView">

              <header>
                <h2>종합 게임</h2>
              </header>

              <div className="main">
                <div className="main_content">
                  <Nav variant="tabs" className="nav-justified">
                    <Nav.Item>
                      <Nav.Link onClick={() => setTab(0)} eventKey="link0">
                        지뢰찾기
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link onClick={() => setTab(1)} eventKey="link1">
                        오목(2인용)
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link onClick={() => setTab(2)} eventKey="link2">
                        스네이크
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link onClick={() => setTab(3)} eventKey="link3">
                        오셀로(2인용)
                      </Nav.Link>
                    </Nav.Item>
                  </Nav>

                  <div className="tab_content">
                    <TabContent tab={tab} />
                  </div>

                </div>
              </div>

              <footer>
                <h2>footer</h2>
              </footer>

            </div>
          }
        >
        </Route>
      </Routes>
    </div>
  );
}


function TabContent(props) {
  return <>{[<Game1 />, <Game2 />, <Game3 />, <Game4 />][props.tab]}</>;
}

 계속 아래 자식 컴포넌트와 연관지어 Route 함수를 사용하려 하니 복잡해서 자식 컴포넌트를 지우고 그 코드를 App 컴포넌트 안에서 Route를 이용해 한꺼번에 짜보기로 했다. 

Routes안에 Route를 사용해 페이지 별로 경로 지정을 해주었다.  그 후 nested routes안의 element들을 어디에 보여줄지 표기하는 곳인 <Outlet>을 게임이 보여질 탭 밑부분에 넣었다. 

                  <div className="tab_content">
                    <Outlet/>
                  </div>

                </div>
              </div>

              <footer>
                <h2>footer</h2>
              </footer>

            </div>
          }
        >
        <Route path="/game" element = {<Game1/>}/>
        <Route path="2" element = {<Game2/>}/>
        <Route path="3" element = {<Game3/>}/>
        <Route path="4" element = {<Game4/>}/>
        </Route>
      </Routes>

 

마지막으로 탭 메뉴를 누를 때 해당 경로로 이동할 수 있도록 리액트 라우터의  Link를 이용해서 페이지 이동시 경로를 아래와 같이 지정해줬다. 

   <Nav variant="tabs" className="nav-justified">
                    <Nav.Item>
                      <Nav.Link as = {Link} to = "/game" eventKey="link0">
                        지뢰찾기
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link as = {Link} to = "2" eventKey="link1">
                        오목(2인용)
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link as = {Link} to = "3" eventKey="link2">
                        스네이크
                      </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link as = {Link} to = "4" eventKey="link3">
                        오셀로(2인용)
                      </Nav.Link>
                    </Nav.Item>
                  </Nav>

 

아래와 같이 다시하기 버튼을 누르면 오목판이 리셋되고 탭을 누를 때 마다 지정했던 경로로 페이지 이동도 잘된다.