Intro 😥 (조금 길어요)

이번 프로젝트를 진행하면서 미니게임은 제 아픈 손가락이라고 할 수 있습니다.
홈페이지에 미니게임 기능을 넣기로 이야기가 진행되었기 때문에 뭘 넣을까 생각하다가
옛날에 만들어 둔 테트리스가 있다는 생각을 하고, 자신만만하게 테트리스를 넣자고 주장했습니다.
다음은 구현하기 전 figma에서 디자인한 모습입니다.

여기서 제가 간과한 사실은 만들어둔 테트리스는 리액트가 아닌 html, css, js로만 만들어졌다는 것이었습니다.
테트리스 작업을 들어갔을 당시에 전 리액트의 기초를 공부하고 있는 입장이라서 코드를 어떤식으로 리액트 코드로 변환해야할지도 익숙치 않았던 상황이었습니다.
며칠밤을 새가면서 작업을 해도 오류가 너무 많이 났으며 이 테트리스 페이지로 인해 프로젝트 마감을 못지킨 것 같아서 팀원분들께 정말 죄송했습니다.

사진에 다 담을 수 없을정도로 수많은 커밋을 하며 좌절도 많이 했고... 네, 그렇습니다.
결과만 말하자면 테트리스 구현을 못했습니다..😭
변명을 조금 하자면 마지막 한 기능만 수정하면됐던 상태였지만 그게 잘 안됐고 프로젝트 마감을 더이상 미룰 수도 없던 상황이라 테트리스는 나중에 개인적으로 구현하기로 하고, 다른 게임을 구현해야겠다 생각하며 고른 것은 가위바위보 게임입니다!
테트리스는 추후에 꼭 구현에 성공해서 벨로그에 기록하러 오겠습니다!

가위바위보 게임 ✌✊🖐

• 게임 원리

  가위바위보 게임은 플레이어와 컴퓨터가 가위바위보를 하는 것입니다.
  플레이어는 가위, 바위, 보 중 한 개를 선택할 수 있으며 컴퓨터는 랜덤으로 선택됩니다.
  비겼을 경우 게임오버가 되지 않으며, 질 경우에만 게임오버가 됩니다.
  이길 경우 score 점수를 +1씩 획득하게 됩니다.

• 코드

  Box.js 파일과 RPS.js 파일로 나누어주었습니다.
  Box에서는 가위, 바위, 보에 해당하는 이미지를 보여줍니다. (사진은 제가 포토샵으로 직접 그린거라 삐뚤빼뚤한 점 이해바랍니다..😂)
  RPS에서는 각각의 결과에 따라 화면에 보여지는 요소를 정해줍니다.
  전체 코드는 너무 길어서 일부만 첨부하겠습니다!

const Box = (props) => {
  const item = props.item || { img: Paper };
  const flipImage = props.flipImage; // 이 속성을 통해 이미지를 좌우 반전 여부를 제어합니다.
  console.log(flipImage);
  return (
    <Stack
      className={"box " + props.className}
      style={{ alignItems: "center", marginTop: "25%" }}
      spacing={5}
    >
      <Stack>{props.title}</Stack>
      <Stack>
        <img
          className="item-img"
          src={item.img}
          style={{
            width: "100%",
            height: "200px",
            transform: flipImage ? "scaleX(-1)" : "none", // 이미지를 좌우 반전으로 표시
          }}
        />
      </Stack>
    </Stack>
  );
};

export default Box;

 				<Box
                    title="나인데!"
                    className={result}
                    img={choice.scissors.img}
                    item={userSelect}
                    flipImage={true}
                  />
                </Stack>
                <Stack justifyContent="center" fontSize="50px">
                  VS
                </Stack>
                <Stack direction="row">
                  <Box
                    title="컴퓨터인데!"
                    className={comResult}
                    item={ComputerSelect}
                  />