방 관리 시스템 개선

기존의 방 관리 시스템에서 발생한 중복 코드와 타입 안정성 문제를 해결하기 위해 리팩토링 적용

1. 방 상태 관리 중앙화
2. WebSocket 통신 로직 통합
3. 타입 시스템 강화
4. 이벤트 처리 시스템 개선

---

1. RoomManager 클래스 개선

💡 주요 변경사항

• 싱글톤 패턴 적용

• WebSocket 통신 통합

• 이벤트 기반 상태 관리

• 타입 안정성 강화

주요 기능:

• 방 상태 관리(roomInfo)
• 사용자 상태 관리(users)
• 이벤트 처리(eventEmitter)
• WebSocket 통신 (webSocket)

2. 타입 시스템 개선

typescript
// Room.ts 에 추가된 타입
export type RoomStatus = "OPEN" | "IN_PROGRESS" | "CLOSED";
export type UserStatusType ="READY" | "NOT_READY";

3. 이벤트 시스템 구현

typescript
// EventEmitter.ts
export class EventEmitter {
	private events : {[key: string] : Function[] } = {};
	
	on(event: string, callback: Function) : void;
	off(event: string, callback: Function) : void
	emit(event: string, data?: any): void
	removeAllListeners(event?: string): void
}

4. RoomPreparePage 컴포넌트 개선

💡 주요 변경 사항

• RoomManager 통합

• WebSocket 로직 제거

• 상태 관리 단순화

• 이벤트 기반 업데이트

5. 삭제된 코드

1. useRoomSocket.ts

typescript
//기존 WebSocket 관련 로직이 RoomManager로 통합됨
export const useRoomSocket = (roomId: number, handlers: {[key: string]: (data: any} => void}) => {
	const { subscribe, unsubscribe, connected, topics } = useWebSocket();
}
//... 삭제

1. RoomPreparePage.tsx의 WebSocket 관련 코드

typescript
// 삭제된 부분
const { subscribe, unsubscribe, send, connected, topics, messageTypes } = useWebSocket();
// WebSocket 메시지 처리 로직 삭제
const handleWebSocketMessage = useCallback (
	(message: RoomMessage) => {
		switch (message.type) {
			case messageTypes.ROOM.INFO:
			// 삭제 된 코드
		}
	},
	[currentUserId, navigate, fetchRoomInfo, messageTypes.ROOM]
)

6. 통합된 코드

1. RoomManager로 통합된 WebSocket 로직

typescript
// RoomManager.ts에 추가된 코드
private webSocket = useWebSocket();

private initializeWebSocket() {
  const { subscribe, topics } = this.webSocket;
  subscribe(topics.ROOM(""), (message) => {
    try {
      const data = JSON.parse(message.body) as RoomMessage;
      this.handleWebSocketMessage(data);
    } catch (error) {
      console.error("WebSocket 메시지 처리 실패:", error);
    }
  });
}

1. 이벤트 처리 통합

typescript
// RoomManager.ts에 통합된 이벤트 처리
private eventEmitter = new EventEmitter();

// 이벤트 발생
this.eventEmitter.emit("roomInfoUpdated", info);
this.eventEmitter.emit("usersUpdated", users);

// 이벤트 구독
subscribe(event: string, callback: Function) {
  this.eventEmitter.on(event, callback);
}

7. 타입 변경사항

1. Room.ts의 타입 정의 개선

typescript
// 변경 전
export interface RoomInfo {
  status: "OPEN" | "IN_PROGRESS" | "CLOSED";
  // ... 기타 필드
}

// 변경 후
export type RoomStatus = "OPEN" | "IN_PROGRESS" | "CLOSED";

export interface RoomInfo {
  status: RoomStatus;
  // ... 기타 필드
}

1. UserStatus 관련 타입 변경

typescript
// 변경 전
export interface RoomMember {
  status: "READY" | "NOT_READY";
  // ... 기타 필드
}

// 변경 후
export type UserStatusType = "READY" | "NOT_READY";

export interface RoomMember {
  status: UserStatusType;
  // ... 기타 필드
}

1. RoomMessage 타입 개선

typescript
// 변경 전
interface RoomMessage {
  type: string;
  roomId: number;
  data?: any;
}

// 변경 후
export interface RoomMessage {
  type: RoomMessageType;
  roomId: number;
  data?: {
    roomInfo?: RoomInfo;
    member?: RoomMember;
    message?: string;
  };
}

---

주요 변경 효과

1. 코드 구조화
   • 방 관리 로직이 RoomManager로 중앙화 됨
   • 컴포넌트와 비즈니스 로직의 분리
   • 재사용성 향상
2. 타입 안정성
   • 명확한 타입 정의
   • 컴파일 시점 오류 감지
   • 코드 품질 향상
3. 이벤트 처리
   • 이벤트 기반 상태 관리
   • 느슨한 결합
   • 확장성 향상
4. 유지보수성
   • 코드 중복 제거
   • 명확한 책임 분리
   • 테스트 용이성