[Refactor] 서버 세션 리팩토링 대응하기

backend/src/room/dto/create-room.dto.ts

@@ -1,4 +1,13 @@
-import { IsEnum, IsNotEmpty, IsNumber, Max, Min } from "class-validator";
+import {
+    ArrayMaxSize,
+    ArrayMinSize,
+    IsArray,
+    IsEnum,
+    IsNotEmpty,
+    IsNumber,
+    Max,
+    Min,
+} from "class-validator";
 import { RoomStatus } from "@/room/room.entity";
 
 export class CreateRoomDto {
@@ -13,6 +22,12 @@ export class CreateRoomDto {
     @IsNotEmpty()
     nickname: string;
 
+    @IsNotEmpty()
+    @IsArray()
+    @ArrayMaxSize(3)
+    @ArrayMinSize(1)
+    category: string[];
+
     @IsNumber()
     @Min(1)
     @Max(5)
@@ -34,6 +49,12 @@ export class CreateRoomInternalDto {
     @IsNotEmpty()
     nickname: string;
 
+    @IsNotEmpty()
+    @IsArray()
+    @ArrayMaxSize(3)
+    @ArrayMinSize(1)
+    category: string[];
+
     @IsNotEmpty()
     socketId: string;
 

backend/src/room/dto/reaction.dto.ts

@@ -2,7 +2,7 @@ import { IsNotEmpty } from "class-validator";
 
 export class ReactionDto {
     @IsNotEmpty()
-    socketId: string;
+    roomId: string;
 
     @IsNotEmpty()
     reactionType: string;

backend/src/room/dto/room.dto.ts

@@ -1,17 +1,14 @@
-import { RoomStatus } from "@/room/room.entity";
-
-export interface Connection {
-    socketId: string;
-    createAt: number;
-    nickname: string;
-}
+import { Connection, RoomStatus } from "@/room/room.entity";
 
 export interface RoomDto {
-    roomId: string;
+    id: string;
     title: string;
+    category: string[];
+    inProgress: boolean;
+    host: Connection;
     status: RoomStatus;
+    participants: number;
     maxParticipants: number;
     createdAt: number;
-    host: string;
-    connectionList: Connection[];
+    connectionMap: Record<string, Connection>;
 }

backend/src/room/room.controller.ts

@@ -6,7 +6,11 @@ export class RoomController {
     constructor(private readonly roomService: RoomService) {}
 
     @Get()
-    public getPublicRoom() {
-        return this.roomService.getPublicRoom();
+    public async getPublicRoom() {
+        const rooms = await this.roomService.getPublicRoom();
+        return rooms.map((room) => ({
+            ...room,
+            connectionMap: undefined,
+        }));
     }
 }

backend/src/room/room.entity.ts

@@ -14,11 +14,17 @@ export enum RoomStatus {
 @Schema("room", {})
 export class RoomEntity extends Entity {
     @Field({ type: "string", indexed: true })
-    roomId: string;
+    id: string;
 
     @Field({ type: "string" })
     title: string;
 
+    @Field({ type: "string[]" })
+    category: string[];
+
+    @Field({ type: "boolean" })
+    inProgress: boolean;
+
     @Field({ type: "string" })
     status: RoomStatus;
 
@@ -28,9 +34,11 @@ export class RoomEntity extends Entity {
     @Field({ type: "number", sortable: true })
     createdAt: number;
 
+    // Connection
     @Field({ type: "string" })
     host: string;
 
+    // Record<string, Connection>
     @Field({ type: "string" })
-    connectionList: string;
+    connectionMap: string;
 }

backend/src/room/room.gateway.ts

@@ -73,8 +73,13 @@ export class RoomGateway implements OnGatewayDisconnect {
         @ConnectedSocket() client: Socket,
         @MessageBody() dto: ReactionDto
     ) {
-        const room = await this.roomRepository.getRoom(dto.socketId);
+        const room = await this.roomRepository.getRoom(dto.roomId);
+
         if (!room) return;
-        this.socketService.emitToRoom(room.roomId, EMIT_EVENT.REACTION, dto);
+
+        this.socketService.emitToRoom(room.id, EMIT_EVENT.REACTION, {
+            socketId: client.id,
+            reactionType: dto.reactionType,
+        });
     }
 }

backend/src/room/room.repository.ts

@@ -14,51 +14,64 @@ export class RoomRepository {
     // TODO : .from 메서드 구현 필요?
     public async getAllRoom(): Promise<RoomDto[]> {
         const allRooms = await this.roomRepository.search().return.all();
-        return allRooms.map((room: RoomEntity) => ({
-            connectionList: JSON.parse(room.connectionList),
-            createdAt: room.createdAt,
-            host: room.host,
-            maxParticipants: room.maxParticipants,
-            status: room.status,
-            title: room.title,
-            roomId: room.roomId,
-        }));
+        return allRooms.map((room: RoomEntity) => {
+            const connectionMap = JSON.parse(room.connectionMap || "{}");
+            return {
+                connectionMap: JSON.parse(room.connectionMap || "{}"),
+                createdAt: room.createdAt,
+                host: JSON.parse(room.host),
+                maxParticipants: room.maxParticipants,
+                status: room.status,
+                title: room.title,
+                id: room.id,
+                category: room.category,
+                inProgress: room.inProgress,
+                participants: Object.keys(connectionMap).length,
+            };
+        });
     }
 
     public async getRoom(id: string): Promise<RoomDto> {
-        const room = await this.roomRepository.search().where("roomId").eq(id).return.first();
+        const room = await this.roomRepository.search().where("id").eq(id).return.first();
+
+        if (!room) return null;
 
-        if (!room.roomId) return null;
+        const connectionMap = JSON.parse(room.connectionMap || "{}");
 
         return {
-            connectionList: JSON.parse(room.connectionList),
+            category: room.category,
+            inProgress: room.inProgress,
+            connectionMap,
             createdAt: room.createdAt,
-            host: room.host,
+            host: JSON.parse(room.host),
+            participants: Object.keys(connectionMap).length,
             maxParticipants: room.maxParticipants,
             status: room.status,
             title: room.title,
-            roomId: room.roomId,
+            id: room.id,
         };
     }
 
     public async setRoom(dto: RoomDto): Promise<void> {
         const room = new RoomEntity();
-        room.roomId = dto.roomId;
+        room.id = dto.id;
+        room.category = dto.category;
+        room.inProgress = dto.inProgress;
         room.title = dto.title;
         room.status = dto.status;
-        room.connectionList = JSON.stringify(dto.connectionList);
+        room.connectionMap = JSON.stringify(dto.connectionMap);
         room.maxParticipants = dto.maxParticipants;
         room.createdAt = Date.now();
-        room.host = dto.host;
+        room.host = JSON.stringify(dto.host);
 
-        await this.roomRepository.save(room.roomId, room);
+        await this.roomRepository.save(room.id, room);
     }
 
     public async removeRoom(id: string): Promise<void> {
-        const entities = await this.roomRepository.search().where("roomId").equals(id).return.all();
+        const entities = await this.roomRepository.search().where("id").equals(id).return.all();
 
         for await (const entity of entities) {
-            await this.roomRepository.remove(entity.roomId);
+            await this.roomRepository.remove(entity.id);
         }
     }
 }

backend/src/room/services/room-create.service.ts

@@ -21,26 +21,31 @@ export class RoomCreateService {
 
     public async createRoom(dto: CreateRoomInternalDto) {
         const { socketId, nickname } = dto;
-        const roomId = await this.generateRoomId();
+        const id = await this.generateRoomId();
+        const socket = this.socketService.getSocket(socketId);
         const currentTime = Date.now();
         const questionListContents = await this.questionListRepository.getContentsByQuestionListId(
             dto.questionListId
         );
 
         const roomDto = {
             ...dto,
-            roomId,
-            connectionList: [],
+            id,
+            inProgress: false,
+            connectionMap: {},
+            participants: 0,
             questionListContents,
             createdAt: currentTime,
-            host: dto.socketId,
+            host: {
+                socketId: dto.socketId,
+                nickname,
+                createAt: currentTime,
+            },
         };
 
         await this.roomRepository.setRoom(roomDto);
 
-        await this.roomJoinService.joinRoom({ roomId, socketId, nickname }, true);
-
-        this.socketService.emitToRoom(roomId, EMIT_EVENT.CREATE, roomDto);
+        socket.emit(EMIT_EVENT.CREATE, roomDto);
     }
 
     // TODO: 동시성 고려해봐야하지 않을까?

backend/src/room/services/room-host.service.ts

@@ -7,7 +7,7 @@ export class RoomHostService {
     public constructor(private readonly roomRepository: RoomRepository) {}
 
     private getNewHost(room: RoomDto) {
-        return room.connectionList[0];
+        return Object.values(room.connectionMap).sort((a, b) => a.createAt - b.createAt)[0];
     }
 
     public async delegateHost(roomId: string) {
@@ -16,12 +16,10 @@ export class RoomHostService {
 
         const newHost = this.getNewHost(room);
 
-        const found = room.connectionList.find(
-            (connection) => connection.socketId === newHost.socketId
-        );
+        const found = room.connectionMap[newHost.socketId];
         if (!found) throw new Error("invalid new host id");
 
-        room.host = newHost.socketId;
+        room.host = newHost;
 
         await this.roomRepository.setRoom(room);
         return newHost;

backend/src/room/services/room-join.service.ts

@@ -14,33 +14,36 @@ export class RoomJoinService {
         private readonly socketRepository: WebsocketRepository
     ) {}
 
-    public async joinRoom(dto: JoinRoomInternalDto, isCreate: boolean = false) {
+    public async joinRoom(dto: JoinRoomInternalDto) {
         const { roomId, socketId, nickname } = dto;
 
         const room = await this.roomRepository.getRoom(roomId);
         const socket = this.socketService.getSocket(socketId);
 
         if (!socket) throw new Error("Invalid Socket");
 
-        if (room.roomId === null) throw new Error("Redis: RoomEntity Entity type error");
+        if (!room) throw new Error("RoomEntity Not found");
 
         if (this.isFullRoom(room)) return socket.emit(EMIT_EVENT.FULL, {});
 
         socket.join(roomId);
+
         await this.socketRepository.joinRoom(socket.id, roomId);
-        room.connectionList.push({
+
+        room.connectionMap[socketId] = {
             socketId,
             createAt: Date.now(),
             nickname,
-        });
+        };
 
         await this.roomRepository.setRoom(room);
 
+        room.connectionMap[socketId] = undefined;
         // TODO: 성공 / 실패 여부를 전송하는데 있어서 결과에 따라 다르게 해야하는데.. 어떻게 관심 분리를 할까?
-        if (!isCreate) this.socketService.emitToRoom(roomId, EMIT_EVENT.JOIN, room);
+        socket.emit(EMIT_EVENT.JOIN, room);
     }
 
     private isFullRoom(room: RoomDto): boolean {
-        return room.maxParticipants <= room.connectionList.length;
+        return room.maxParticipants <= Object.keys(room.connectionMap).length;
     }
 }

backend/src/room/services/room-leave.service.ts

@@ -27,26 +27,24 @@ export class RoomLeaveService {
         const room = await this.roomRepository.getRoom(roomId);
         if (!room) return;
 
-        room.connectionList = room.connectionList.filter(
-            (connection) => connection.socketId !== socketId
-        );
+        delete room.connectionMap[socketId];
 
-        if (!room.connectionList.length) return this.deleteRoom(room.roomId);
+        if (!Object.keys(room.connectionMap).length) return this.deleteRoom(room.id);
 
         await this.roomRepository.setRoom(room);
 
-        if (room.host === socketId) return this.handleHostChange(socketId, room);
+        if (room.host.socketId === socketId) return this.handleHostChange(socketId, room);
 
-        this.socketService.emitToRoom(room.roomId, EMIT_EVENT.QUIT, { socketId });
+        this.socketService.emitToRoom(room.id, EMIT_EVENT.QUIT, { socketId });
     }
 
     private async handleHostChange(socketId: string, room: RoomDto) {
-        if (room.host !== socketId) return;
+        if (room.host.socketId !== socketId) return;
 
-        const newHost = await this.roomHostService.delegateHost(room.roomId);
+        const newHost = await this.roomHostService.delegateHost(room.id);
 
         // TODO : throw new Exception : host changed
-        this.socketService.emitToRoom(room.roomId, EMIT_EVENT.CHANGE_HOST, {
+        this.socketService.emitToRoom(room.id, EMIT_EVENT.CHANGE_HOST, {
             nickname: newHost.nickname,
             socketId: newHost.socketId,
         });

frontend/src/components/common/Select.tsx

@@ -26,11 +26,7 @@ const Select = <T,>({
         className={`rounded-custom-m ${backgroundColor} text-semibold-r text-gray-white appearance-none pl-4 pr-8 h-full`}
       >
         {options.map((option) => (
-          <option
-            key={option.value as string}
-            value={option.value as string}
-            selected={option.value === value}
-          >
+          <option key={option.value as string} value={option.value as string}>
             {option.label}
           </option>
         ))}

frontend/src/components/session/SessionHeader.tsx

@@ -1,11 +1,4 @@
-type RoomStatus = "PUBLIC" | "PRIVATE";
-interface RoomMetadata {
-  title: string;
-  status: RoomStatus;
-  maxParticipants: number;
-  createdAt: number;
-  host: string;
-}
+import { RoomMetadata } from "@hooks/type/session";
 
 interface SessionHeaderProps {
   roomMetadata: RoomMetadata | null;
@@ -18,7 +11,7 @@ const SessionHeader = ({
 }: SessionHeaderProps) => {
   return (
     <h1 className={"text-center text-medium-xl font-bold w-full pt-4 pb-2"}>
-      {roomMetadata?.title}{" "}
+      {roomMetadata?.category} {roomMetadata?.title}{" "}
       <span className={"font-light"}>
         {" "}
         {roomMetadata &&