2025.12.16

오늘의 MC: 최효진

서기: 김다연

[오전 10시 - 오후 12시 1분]

🤝 참석자

@J074_김채영, @J278_최효진, @J213_이준섭 및 @J029_김다연

⭐ 요약

• 소켓 이벤트 및 네임스페이스
  • @J213_이준섭은 공통 타입과 네임스페이스 정의의 중요성을 강조했다.
  • 팀은 이벤트 명명 규칙에 대해 논의하며, 하이픈 사용과 카멜 케이스 간 장단점을 비교했다.
  • 상수 폴더에 소켓 이벤트 관련 상수를 정의하기로 결정했다.
• 대기방 구현 논의
  • 팀은 프로토타입 단계에서 대기방 구현의 복잡성에 대해 논의했다.
  • @J278_최효진은 대기방 문구를 띄우는 것 자체가 사실상 대기방과 다르지 않다고 지적했다.
  • 최종적으로 대기방 없이 배틀 페이지로 바로 진입하되, 참가자 상태를 UI로 표시하기로 결정했다.
• 협업 및 소켓 관리 방식
  • 팀원들은 각자 다른 소켓 관리 방식(컨텍스트, 스토어)을 공유했다.
  • @J278_최효진은 함수명만 먼저 작성하고 이후 역할 분배하는 방식을 제안했다.
  • 모든 팀원이 공통 로직 작성 후 개별 기능 구현 방식에 동의했다.

✅ 작업 항목

• @J213_이준섭은 소켓 이벤트 네임스페이스를 constants 폴더에 정의할 예정이다.
• 팀은 프로토타입에서 대기방 대신 간단한 UI로 참가자 상태를 표시하기로 했다.
• 팀원들은 점심 식사 후 1시 30분에 다시 모여 작업을 계속할 예정이다.

---

[오후 1시 30분 ~ 오후 7시 0분]

🤝 참석자

@J213_이준섭, @J074_김채영, @J278_최효진 및 @J029_김다연

⭐ 요약

• 보고서 작성 및 시니어 리뷰 준비
  • @J213_이준섭은 다른 팀의 보고서 템플릿을 참고하여 작성하자고 제안했습니다.
  • 팀은 서비스 목적, 문제 정의, 타겟 유저 등의 섹션에 대해 상세히 논의했습니다.
  • @J278_최효진은 서비스 소개와 목적을 명확하게 정리하는 데 중점을 두었습니다.
• 프로젝트 역할 분담
  • 팀은 스토리별로 역할을 나누기로 결정했습니다.

EPIC 1 - 대기실 진입 및 역할 배정

사용자는 메인 페이지에서 현재 방의 상태(인원)를 확인하고, 플레이어 또는 관전자로 배틀에 참여해야한다.

STORY 1-1: 방 상태 확인 및 입장 모달 - 이준섭

사용자는 ‘배틀 하러 가기’ 버튼을 눌렀을 때, 현재 플레이어가 몇 명 찼는지 확인하고 입장 가능한 역할을 선택할 수 있어야 한다.

TASKS:

• [FE] 메인 페이지 UI 구현
• [FE] 입장 모달 UI 컴포넌트 구현 (인원수 표시, 버튼 분기 처리)
  • 모달에서 역할 선택 (참가자/관전자)
• [FE] 모달 오픈 시 서버에 현재 인원수 요청 → 응답값에 따라 버튼 상태(Active/Disabled) 변경
• [FE] 벡엔드에서 받은 데이터를(인원수 등) 프론트에서 실시간 반영(socket.on())
• [FE] 입장 버튼 누른 후 → 서버로부터 받은 Role 정보를 전역 상태(Store)에 저장하고 배틀 페이지(/room/:id)로 이동.

STORY 1-2: 방 입장 및 역할 부여 - 김채영

사용자가 방에 입장하기 까지의 , 선착순 로직에 따라 역할(참가자/관전자)이 확정되어 방에 접속된다.

TASKS:

• [BE] 사용자에게 닉네임 랜덤으로 지정해주는 로직 (추후 로그인 구현 이후 수정)
• [BE] 서버에 방을 미리 만들어두기
• [BE] Socket 이벤트 핸들러(참가자 2명 체크, 역할 배정, 클라이언트에 배정 결과 emit)
  • 현재 인원 확인 ⇒ 2명 미만이면 role : player 할당
• [BE] 현재 방의 플레이어 수를 반환하는 로직 구현
• [BE] 입장 결과(본인의 Role)를 클라이언트에게 emit 하여 알려줌.

/roomlist(방 목록들) → /room/:id

• /room/:id

EPIC 2 - 실시간 배틀 화면

입장한 역할에 따라 코드를 작성하거나, 작성 중인 화면을 실시간으로 볼 수 있어야 한다.

STORY 2-1: 배틀 UI 레이아웃 (관전자, 참가자) - 김다연

플레이어는 코드를 짤 수 있는 에디터를, 관전자는 두 플레이어의 화면을 동시에(혹은 선택해서) 볼 수 있어야 한다.

TASKS

• [FE] 역할에 따른 분기 처리 (관전자일 경우 ⇒ readonly: true)
• [FE] 참가자: 코드 에디터 구현
• [FE] 참가자: 내 진행률, 상대방 진행률 UI(0%) 구현
• [FE] 관전자: 두 플레이어의 코드 화면 구현
• [FE] 좌측에 코딩테스트 문제 UI
• [FE] 우측에 채팅 UI 구현(현재는 비활성화)
• [FE] 우측, 좌측의 resize & toggle 구현
• [FE] 나가기 버튼
• [FE] Socket을 활용하여 받은 데이터 화면에 렌더링

STORY 2-2: 실시간 코드 동기화(Socket 기능) - 최효진

관전자는 플레이어들이 코드를 작성하는 모습을 실시간으로 볼 수 있어야 한다.

TASKS:

• [BE] Battle 에 관한 정보 저장(참가자, 코드, …)
• [BE] 참가자의 코드가 변경될 때마다 이벤트 발생
• [BE] 방을 나간 사용자의 연결을 끊는다(나가기에 대한 추가 소켓 연결 정리)
• [FE, BE] 현재 관전자 수 서버 로직 & 프론트 화면 (우선순위 ⬇️)

---

• 기술적 완성도 기준
  • 팀은 기술적 완성도의 주요 기준으로 예외 처리, 성능 및 반응 속도, 데이터 정합성을 논의했습니다.
  • @J278_최효진은 신입 개발자들이 가장 어려워하는 예외 처리의 중요성을 강조했습니다.

✅ 작업 항목

• @J213_이준섭은 아바타 이미지를 찾아 팀 소개 섹션에 추가하기로 했습니다.
• 팀은 저녁 식사 후 8시 30분에 다시 모여 보고서 작성을 계속하기로 했습니다.
• @J278_최효진은 타겟 유저 섹션을 수정하여 부스트캠퍼를 명시적으로 포함시키기로 했습니다.

---

[오후 8시 30분 - 오후 10시 56분] :handshake: 참석자

@J213_이준섭, @J278_최효진, @J029_김다연 및 @J074_김채영

⭐ 요약

• 기술적 구현 계획
  • @J213_이준섭은 기술적 완성도 부분에 대해 상세한 검토를 제안했다.
  • @J278_최효진는 로그인 사용자 인증 방식으로 JWT와 세션의 장단점을 논의했다.
  • 팀은 MVP 단계에서는 학습 목적으로 JWT를 사용하기로 결정했다.
• 코드 동기화 방식
  • @J278_최효진는 스냅샷과 디프 방식의 차이점을 설명했다.
  • 팀은 MVP 단계에서 스냅샷 방식을 사용하고, 추후 디프 방식을 고려하기로 했다.
• 서버 배포
  • @J029_김다연는 NCP 클라우드 플랫폼에 서버를 배포하는 과정을 상세히 공유했다.
  • 엔진엑스 설정, 도커 컴포즈, 프론트엔드 서빙 등 배포 세부 사항을 논의했다.
• 프로젝트 관리
  • @J029_김다연는 깃허브 이슈 관리 방식을 제안했다. 스토리와 서브 이슈(테스크) 구조로 관리하기로 했다. [2:16:10]
  • 이터레이션과 슬라이스 바이 기능을 활용해 백로그를 체계적으로 관리하기로 했다.

✅ 작업 항목

• @J278_최효진는 7번 섹션에 대한 추가 내용을 작성하고 팀원들의 피드백을 요청했다.
• @J029_김다연는 도커 컴포즈 파일을 업데이트하고 레포지토리에 푸시했다.
• 팀은 다음 주에 CI/CD 파이프라인 구축을 고려하기로 했다.
• @J074_김채영는 12월 11일 회의록을 작성하여 공유하기로 했다.