[대학전쟁3] 양면빙고 웹 개발 01 - 타일 list, 타일 뒤집기

대학전쟁1, 2도 재밌게 봤는데 대학전쟁3도 재밌다ㅎㅎ
 
 

☰   양면빙고 (double-sided-bingo) 개발 과정  

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

 

그나저나 노트북이 맛이 가서 vscode부터 다시 설치했다...
 

vscode 설치과정 및 node.js 설치과정은 아래 링크 참고

[vs code] Visual Studio Code download 비주얼 스튜디오 코드 설치 다운로드 하는 법 (최신.ver)

 

[vs code] Visual Studio Code download 비주얼 스튜디오 코드 설치 다운로드 하는 법 (최신.ver)

 

 

 

 

 

 

1️⃣ npm 및 yarn 설치 & 실행

 

//설치
npm start // npm
npm install --global yarn // yarn

// 설치확인
yarn --version

// 프로젝트 폴더 만들기
npx create-react-app {프로젝트이름} //npm
yarn create react-app {프로젝트이름} //yarn

// 프로젝트 폴더로 이동
cd {프로젝트이름} // npm, yarn 공통

// 실행
npm start 
yarn start

 
 
하... 다시 1학년이 된 것 같다
인내와 고통과의 싸움
 
 

 

2️⃣ 게임 룰 - 나만의 타일 (TileList)

 

📌  빙고판에 타일을 올리기 전 나는 9개의 타일을 갖고 있다.
타일 클릭 시 타일이 뒤집히도록 작업하였다.

import React, { useState } from "react";
import TileItem from "./TileItem";
import "./TileList.css";

// 초기 타일 (1,3,5 각각 3개)
const initialTiles = [
  { id: 1 }, { id: 1 }, { id: 1 },
  { id: 3 }, { id: 3 }, { id: 3 },
  { id: 5 }, { id: 5 }, { id: 5 },
];

const TileList = () => { 
  const [flippedMap, setFlippedMap] = useState({});

  // 클릭 시 뒤집힘
  const handleFlip = (index) => {
    setFlippedMap((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  return (
    <div className="TileListWrapper">
      <div className="TileList">
        {initialTiles.map((tile, index) => (
          <TileItem
            key={index}
            tileId={tile.id}
            isFlipped={!!flippedMap[index]}
            onClick={() => handleFlip(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default React.memo(TileList);

 

잘 뒤집힌다.
 
 
 
📌   화면의 크기가 작을 때는 CSS 코드 스크롤을 이용하여 모든 타일을 확인할 수 있게 작업하였다.

.TileListWrapper {
  width: 100%;
  overflow-x: auto;

  display: flex;
  justify-content: flex-start;
}

 

 

스크롤을 안 보이게 하고 싶으면 다음과 같은 CSS 코드를 추가로 작성해주면 된다.

.TileListWrapper::-webkit-scrollbar {
  display: none; /* 스크롤 안 보이게 */
}

 
 
 

3️⃣ 앞으로..

 

앞으로는 dnd-kit를 설치하여 TileList에서 타일 순서를 바꿀 수 있게 하고
BingoBoard에 착수(place)할 수 있게 할 예정이다..