feat: 설정 페이지 입장 API 구현

- joinSetting 이벤트 추가
- 설정 페이지 입장시 프로젝트의 이름, 주제, 회원 데이터 응답 구현
  - 설정페이지 응답 DTO 추가
- E2E테스트 추가

backend/src/project/dto/setting-page/InitSettingResponse.dto.ts

@@ -0,0 +1,57 @@
+import { Member } from 'src/member/entity/member.entity';
+import { Project } from 'src/project/entity/project.entity';
+import { MemberRole } from 'src/project/enum/MemberRole.enum';
+
+class ProjectMemberDto {
+  id: number;
+  username: string;
+  imageUrl: string;
+  role: MemberRole;
+
+  static of(member: Member): ProjectMemberDto {
+    const dto = new ProjectMemberDto();
+    dto.id = member.id;
+    dto.username = member.username;
+    dto.imageUrl = member.github_image_url;
+    dto.role = member.projectToMember[0].role;
+    return dto;
+  }
+}
+
+class ProjectDto {
+  title: string;
+  subject: string;
+
+  static of(project: Project): ProjectDto {
+    const dto = new ProjectDto();
+    dto.title = project.title;
+    dto.subject = project.subject;
+    return dto;
+  }
+}
+
+class ProjectInfoDto {
+  project: ProjectDto;
+  member: ProjectMemberDto[];
+
+  static of(project: Project, memberList: Member[]): ProjectInfoDto {
+    const dto = new ProjectInfoDto();
+    dto.project = ProjectDto.of(project);
+    dto.member = memberList.map((member) => ProjectMemberDto.of(member));
+    return dto;
+  }
+}
+
+export class InitSettingResponseDto {
+  domain: string;
+  action: string;
+  content: ProjectInfoDto;
+
+  static of(project: Project, memberList: Member[]): InitSettingResponseDto {
+    const dto = new InitSettingResponseDto();
+    dto.domain = 'setting';
+    dto.action = 'init';
+    dto.content = ProjectInfoDto.of(project, memberList);
+    return dto;
+  }
+}

backend/src/project/websocket.gateway.ts

@@ -176,6 +176,10 @@ export class ProjectWebsocketGateway
       this.wsProjectTaskController.updateTask(client, data);
     }
   }
+  @SubscribeMessage('joinSetting')
+  async handleJoinSettingEvent(@ConnectedSocket() client: ClientSocket) {
+    this.wsProjectController.joinSettingPage(client);
+  }
 
   notifyJoinToConnectedMembers(projectId: number, member: Member) {
     const projectNamespace = this.namespaceMap.get(projectId);

backend/src/project/ws-controller/ws-project.controller.ts

@@ -5,6 +5,7 @@ import { MemberUpdateNotifyDto } from '../dto/member/MemberUpdateNotify.dto';
 import { MemberStatus } from '../enum/MemberStatus.enum';
 import { ProjectService } from '../service/project.service';
 import { ClientSocket } from '../type/ClientSocket.type';
+import { InitSettingResponseDto } from '../dto/setting-page/InitSettingResponse.dto';
 
 @Injectable()
 export class WsProjectController {
@@ -39,6 +40,9 @@ export class WsProjectController {
       linkList,
     );
     client.emit('landing', response);
+
+    client.leave('landing');
+    client.leave('setting');
     client.join('landing');
 
     if (sameMemberSocket) return;
@@ -53,9 +57,26 @@ export class WsProjectController {
 
   async joinBacklogPage(client: ClientSocket) {
     client.leave('landing');
+    client.leave('setting');
     client.join('backlog');
     const backlog = await this.projectService.getProjectBacklog(client.project);
 
     client.emit('backlog', InitBacklogResponseDto.of(backlog));
   }
+
+  async joinSettingPage(client: ClientSocket) {
+    client.leave('landing');
+    client.leave('backlog');
+    client.join('setting');
+
+    const [project, projectMemberList] = await Promise.all([
+      this.projectService.getProject(client.projectId),
+      this.projectService.getProjectMemberList(client.project),
+    ]);
+
+    client.emit(
+      'setting',
+      InitSettingResponseDto.of(project, projectMemberList),
+    );
+  }
 }

backend/test/project/ws-setting-page/ws-project-landing-page.e2e-spec.ts

@@ -0,0 +1,75 @@
+import { Socket } from 'socket.io-client';
+import {
+  app,
+  appInit,
+  connectServer,
+  createMember,
+  createProject,
+  getMemberByAccessToken,
+  getProjectLinkId,
+  joinProject,
+  listenAppAndSetPortEnv,
+  memberFixture,
+  memberFixture2,
+  projectPayload,
+} from 'test/setup';
+import { emitJoinLanding, handleConnectErrorWithReject } from '../ws-common';
+import { MemberRole } from 'src/project/enum/MemberRole.enum';
+
+describe('WS Setting', () => {
+  beforeEach(async () => {
+    await app.close();
+    await appInit();
+    await listenAppAndSetPortEnv(app);
+  });
+
+  it('Should return project setting data when leader enters setting page', async () => {
+    let socket1: Socket;
+
+    return new Promise<void>(async (resolve, reject) => {
+      const accessToken1 = (await createMember(memberFixture, app)).accessToken;
+      const member1 = await getMemberByAccessToken(accessToken1);
+      const project = await createProject(accessToken1, projectPayload, app);
+      const projectLinkId = await getProjectLinkId(accessToken1, project.id);
+
+      const accessToken2 = (await createMember(memberFixture2, app))
+        .accessToken;
+      const member2 = await getMemberByAccessToken(accessToken2);
+      await joinProject(accessToken2, projectLinkId);
+
+      socket1 = connectServer(project.id, accessToken1);
+      handleConnectErrorWithReject(socket1, reject);
+      await emitJoinLanding(socket1);
+
+      socket1.emit('joinSetting');
+      socket1.on('error', (e) => reject(e));
+
+      socket1.on('setting', (data) => {
+        const { action, domain, content } = data;
+        expect(domain).toBe('setting');
+        expect(action).toBe('init');
+
+        expect(content.project.title).toBe(projectPayload.title);
+        expect(content.project.subject).toBe(projectPayload.subject);
+        expect(content.member.length).toBe(2);
+
+        const responseMember1 = content.member.find(
+          (member) => member.id === member1.id,
+        );
+        expect(responseMember1.username).toBe(member1.username);
+        expect(responseMember1.imageUrl).toBe(member1.github_image_url);
+        expect(responseMember1.role).toBe(MemberRole.LEADER);
+
+        const responseMember2 = content.member.find(
+          (member) => member.id === member2.id,
+        );
+        expect(responseMember2.username).toBe(member2.username);
+        expect(responseMember2.imageUrl).toBe(member2.github_image_url);
+        expect(responseMember2.role).toBe(MemberRole.MEMBER);
+        resolve();
+      });
+    }).finally(() => {
+      socket1.close();
+    });
+  });
+});