🎨Design: stomp-test.html 추가

[angoroa]

#️⃣ Issue Number

• closed #

📝 요약(Summary)

• stomp-test.html 테스트 파일 추가

🛠️ PR 유형

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• [x ] 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

📸스크린샷 (선택)

💬 공유사항 to 리뷰어

✅ PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• 커밋 메시지 컨벤션에 맞게 작성했습니다.
• 변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).

Summary by CodeRabbit

새로운 기능

• 실시간 그룹 채팅 인터페이스: 메시지 송수신, 방별 구독, 사용자 입장/퇴장 알림
• 웹소켓 기반 연결로 지연 없는 메시지 전송 및 수신 지원
• 개별 메시지와 시스템 메시지 구분, 타임스탬프 자동 표시
• 채팅방 설정(방 ID, 사용자 ID, 닉네임) 및 연결 상태 실시간 관리
• 중복 전송 방지 및 입력 검증 기능
• 디버그 로그 및 패널 포함

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

새로운 standalone HTML 채팅 UI를 구현하여 SockJS 및 STOMP 프로토콜을 통한 그룹 채팅을 지원합니다. 좌측 패널에서 연결 설정을 관리하고 우측 패널에서 메시지를 송수신하는 이중 패널 레이아웃을 포함합니다.

Changes

Cohort / File(s)	변경 사항 요약
그룹 채팅 UI 구현 assets/stomp-test.html	SockJS/STOMP 기반 채팅 인터페이스 추가: 연결 관리(Connect/Disconnect), 룸 구독, 메시지 송수신, 시스템 메시지(JOIN/LEAVE) 처리, 타임스탐프 포맷팅, IME 조합 문자 처리, 중복 전송 방지(200ms 가드), 디버그 패널 포함

Sequence Diagram(s)

sequenceDiagram
    participant User as 사용자
    participant Browser as 브라우저<br/>(HTML Chat UI)
    participant SockJS as SockJS<br/>Endpoint
    participant Server as 서버<br/>(STOMP)
    
    User->>Browser: 채팅 설정 입력<br/>(roomId, userId, nickname)
    User->>Browser: Connect 버튼 클릭
    Browser->>SockJS: WebSocket 연결<br/>(http://localhost:8080/ws)
    SockJS->>Server: 연결 수립
    Server-->>SockJS: CONNECTED
    SockJS-->>Browser: 연결 상태 업데이트
    Browser->>Browser: UI 상태 변경<br/>(CONNECTED 표시)
    
    User->>Browser: Subscribe 버튼 클릭
    Browser->>Server: /app/chat.join 전송<br/>(roomId, userId, nickname)
    Browser->>Server: /topic/chat/rooms/{roomId}<br/>구독 요청
    Server-->>Browser: 과거 메시지 전달 및<br/>구독 확인
    Browser->>Browser: 채팅창 업데이트<br/>(룸 제목, 메시지 표시)
    
    User->>Browser: 메시지 입력 및 Enter 키
    Browser->>Browser: 중복 전송 가드 확인<br/>(200ms 검사)
    Browser->>Server: /app/chat.send<br/>(roomId, content)
    Server-->>Browser: /topic/chat/rooms/{roomId}에<br/>메시지 브로드캐스트
    Browser->>Browser: 채팅 버블로<br/>메시지 표시
    
    User->>Browser: Disconnect 버튼 클릭
    Browser->>Server: /app/chat.leave<br/>(roomId, userId)
    Browser->>SockJS: 연결 해제
    SockJS->>Server: 연결 종료
    Browser->>Browser: UI 상태 리셋<br/>(DISCONNECTED 표시)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 새로운 채팅 UI가 반짝이네,
STOMP의 매직으로 메시지 춤을 춘다,
연결과 구독, 송수신의 정원,
토끼는 웹소켓 위를 달린다!

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}