feat(chatroom): ChatRoom 페이지 배포설정 변경

[jaehyeok-code]

Summary by CodeRabbit

• New Features

  • Real-time, authenticated chat with automatic scrolling and infinite history loading.
  • Message search within the chatroom.
  • IME-aware input: Enter to send, Shift+Enter for newline.
  • Read receipts with smart, debounced updates.
  • Recent alerts panel for goals/assists (up to 3).
  • Left-pane scoreboard with participant rankings and a formation view grouped by position.
  • Safe cleanup on exit and preserved navigation behavior.

• Refactor

  • Overhauled chatroom architecture and UI for dynamic data sync, improved message formatting, and a comprehensive loading pipeline (user, scoreboard, roster, read state, history).

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Replaces the Chatroom page with an authenticated, real-time SockJS/STOMP chat architecture, adds axios with auth interceptors, implements data loading (user, scoreboard, roster, read-state, history, search), introduces formation and alerts UI, infinite scroll, read-receipt updates, IME-aware input handling, and cleans up connections on unmount.

Changes

Cohort / File(s)	Summary of Changes
Real-time & Networking src/pages/Chatroom.jsx	Introduces SockJS/STOMP client with dynamic WS origin resolution, connects to /topic/chat/{roomId}, handles connect/disconnect/errors, formats and appends incoming messages, and deactivates on unmount.
Auth & API Integration src/pages/Chatroom.jsx	Adds axios instance with token interceptor; implements calls for current user, scoreboard, roster, read-state (fetch/update), search, and message history.
Data Loading & State Management src/pages/Chatroom.jsx	Implements initial load pipeline: user/scoreboard preload, roster fetch on selection, read-state handling with debounced updater, initial history load, and infinite scrolling for older messages with scroll preservation.
Message Handling & Formatting src/pages/Chatroom.jsx	Adds formatMessage to map raw items to display objects with username resolution; processes ALERT/SYSTEM to refresh scoreboard and collect recent alerts (max 3).
UI/UX Restructure src/pages/Chatroom.jsx	Redesigns layout into left scoreboard/formation tabs and right chat pane with search; adds recent-alerts panel, IME-aware input (Enter vs Shift+Enter), auto-scroll logic, and load-more with indicators.
Navigation & Cleanup src/pages/Chatroom.jsx	Redirects to root when no roomId, preserves exit-room behavior, and ensures STOMP deactivation on component unmount.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant Chat as Chatroom.jsx
  participant API as REST API
  participant STOMP as SockJS/STOMP Broker

  U->>Chat: Navigate to /chat/:roomId
  Chat->>API: GET /me
  Chat->>API: GET /scoreboard
  Chat->>API: GET /chat-rooms/:roomId/messages?latest
  Chat->>STOMP: Connect (SockJS, STOMP)
  STOMP-->>Chat: onConnect

  par User selects participant
    Chat->>API: GET /roster?participant=...
  and Read-state init
    Chat->>API: GET /chat-rooms/:roomId/read-state
  end

  STOMP-->>Chat: MESSAGE /topic/chat/:roomId
  Chat->>Chat: formatMessage, append
  Chat->>API: PUT /read-state (debounced) [if near bottom]

  U->>Chat: Scroll up (load more)
  Chat->>API: GET /chat-rooms/:roomId/messages?before=...
  Chat->>Chat: Prepend, preserve scroll

Loading

sequenceDiagram
  autonumber
  participant U as User
  participant Chat as Chatroom.jsx
  participant API as REST API
  participant STOMP as SockJS/STOMP Broker

  U->>Chat: Type message (IME aware)
  alt Enter & not composing
    Chat->>API: POST /chat-rooms/:roomId/messages
    API-->>Chat: 200 Created
  else Shift+Enter or composing
    Chat->>Chat: Insert newline / continue composing
  end

  Note right of STOMP: Alerts/System
  STOMP-->>Chat: ALERT/SYSTEM
  Chat->>API: GET /scoreboard (refresh)
  Chat->>Chat: Push to recentAlerts (max 3)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• 버그들 수정 #42: Also overhauls Chatroom.jsx with SockJS/STOMP, message formatting, read-state, and UI changes—direct overlap in the same file.
• [Feat] ChatRoom 페이지 채팅방을 구현 및 환경세팅 #41: Implements similar real-time chat architecture and axios/auth setup affecting Chatroom.jsx and routing—high code-level similarity.

Suggested labels

enhancement

Suggested reviewers

• hwichoi0317
• Kim-Jaehyun0328
• wjkim9
• roode1017

Poem

A hop, a bop, I wire the chat—live!
STOMP drums thrum; the messages arrive.
I nibble bytes, scroll past the night,
With goal alerts twinkling bright.
Shift+Enter—carrot breaks!
Read receipts trail like bunny wakes.
Real-time burrow—no delay flakes. 🥕✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 35a7c12 and c323f01.

📒 Files selected for processing (1)

• src/pages/Chatroom.jsx (1 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.