<aside>

</aside>

들어가며

"게임 로직이 한 곳에 모여 있으면 얼마나 편할까?”

복잡한 멀티플레이어 게임을 개발하면서 현재는 큰 문제가 없지만, 게임의 로직이 여러 컴포넌트에 분산되어 있어 향후 기능 확장이나 수정 시 관리가 어려워질 것이 예상되었습니다.

게임 로직을 game/hooks에 한 곳에 모아두면 훨씬 편하게 작업할 수 있을 것 같아서 리팩토링을 진행하게 되었습니다.

문제 상황: 조금 불편한 개발 경험

기존 프로젝트는 큰 문제는 없지만, 개발하면서 불편함을 느끼는 구조였습니다:

components/
├── chat/
│   └── ChatInput.tsx        // 📍 채팅 관리 로직
├── lobby/
│   └── StartButton.tsx      // 📍 게임 시작 조건 검증 및 시작 로직
├── modal/
│   ├── RoundEndModal.tsx    // 📍 라운드 결과 시 승패 표시 로직
│   └── RoleModal.tsx        // 📍 라운드 시작 시 플레이어 역할 배정 로직
├── quiz/
│   └── QuizStage.tsx        // 📍 퀴즈 진행 관리 로직
└── ...

개발하면서 느낀 불편한 점들

1. 컴포넌트 파일이 길어짐

실제로 아래 QuizStage 컴포넌트에서는 게임 상태와 역할(방해꾼, 그림꾼, 구경꾼) 에 따라 UI를 다르게 보여주는 로직이 존재했습니다. 이러다보니 모든 로직을 컴포넌트 파일 안에 작성했을 때 코드가 길어져 JSX에 집중하기 어려웠습니다.

const QuizStage = () => {
	// ... 

  const checkShouldHideCanvas = () => {
	  // ...
  }

  const checkShouldHideQuizTitle = () => {
	  // ...
  }

  const checkShouldHideSizzlingTimer = () => {
		// ...
  }

  const getRemainingTime = () => {
		// ... 
  }

  const
   getQuizTitleText = () => {
	   // ...
  }

  return (
    <>
			// jsx 
    </>
  );
};

export default QuizStage

2. 게임 로직 전체 검토의 불편함

"게임 플로우가 제대로 구현되어 있나 전체적으로 확인해보자"라고 생각했을 때:

게임의 전체 흐름을 파악하고 로직이 올바르게 구현되어 있는지 코드를 검토하려면 5개 이상의 분산된 파일을 계속 왔다갔다 해야 했습니다.

그러다 보니, 우리 게임 로직에 빠진 부분이나 문제가 있는 부분은 없을까?"를 확인하고 싶을 때, 게임 로직이 여러 컴포넌트에 흩어져 있어서 체계적으로 검토하기 어려웠습니다. 한 곳에 모여 있다면 쭉 읽어보면서 전체적인 일관성이나 누락된 부분을 쉽게 찾을 수 있을 텐데말입니다.

// 게임 시작 → lobby/StartButton.tsx 확인
// 역할 배정 → modal/RoleModal.tsx 확인  
// 퀴즈 진행 → quiz/QuizStage.tsx 확인
// 라운드 종료 → modal/RoundEndModal.tsx 확인
// ...

해결 방안: 흩어진 게임 로직 한 곳으로 모으기