Skip to content

feat: 이전 메시지 불러오기 - #94

Merged
Obebe-creator merged 3 commits into
devfrom
feature/chat-message-loading-state
Aug 9, 2026
Merged

Obebe-creator merged 3 commits into
devfrom
feature/chat-message-loading-state

Conversation

@Obebe-creator

@Obebe-creator Obebe-creator commented Aug 9, 2026

Copy link
Copy Markdown
Collaborator

📋 작업 내용

  • 채팅 모달 메시지 영역의 스크롤 동작을 수정했습니다.
  • 이전 메시지 로딩 중 상태의 버튼 UI를 Figma 시안에 맞춰 보완했습니다.

🔥 변경 사항

  • 채팅 모달 본문 영역은 overflow-hidden으로 제한하고, 메시지 리스트가 직접 스크롤 컨테이너를 갖도록 변경했습니다.
  • 메시지 로딩/수신 후 하단 이동을 scrollContainerRef 기준으로 처리하도록 수정했습니다.
  • 이전 메시지 더보기 버튼이 로딩 중일 때 비활성 텍스트 색상과 aria-busy 상태를 표시하도록 했습니다.

✅ 체크리스트

  • 로컬에서 정상 동작을 확인했습니다.
  • 기존 기능에 영향을 주지 않는지 확인했습니다.
  • 불필요한 console.log를 제거했습니다.
  • lint를 통과했습니다.
  • README 또는 문서를 수정했습니다. (필요 시)
  • API 명세와 일치하는지 확인했습니다.

📷 스크린샷 (선택)

image image

🔗 관련 이슈

Closes #


💬 To Reviewer

  • 메시지가 많은 채팅방에서 모달 내부 메시지 영역을 위아래로 스크롤할 수 있는지 중점적으로 확인 부탁드립니다.
  • 이전 메시지 더보기 클릭 시 기존 하단 위치로 강제 이동하지 않는지도 함께 확인 부탁드립니다.

Summary by CodeRabbit

  • 개선 사항
    • 채팅방에서 새 메시지가 표시될 때 최신 메시지로 보다 안정적으로 자동 스크롤됩니다.
    • 메시지 목록의 스크롤 동작과 레이아웃을 개선해 채팅 내용을 더 일관되게 확인할 수 있습니다.
    • 이전 메시지 불러오는 동안 버튼이 비활성화되고 로딩 상태가 명확히 표시됩니다.
    • 키보드 사용자를 위한 포커스 표시와 접근성 안내가 개선되었습니다.

@vercel

vercel Bot commented Aug 9, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
moving-frontend Ready Ready Preview Aug 9, 2026 4:11pm
moving-frontend-p2ol Ready Ready Preview Aug 9, 2026 4:11pm

@Obebe-creator Obebe-creator changed the title Feature/chat message loading state feat: message loading state Aug 9, 2026
@Obebe-creator Obebe-creator changed the title feat: message loading state feat: 이전 메시지 불러오기 Aug 9, 2026
@coderabbitai

coderabbitai Bot commented Aug 9, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Obebe-creator, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 42 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 982539dd-e9ca-4925-bb6c-cda09ee3018a

📥 Commits

Reviewing files that changed from the base of the PR and between e4af5d3 and 1d3679f.

📒 Files selected for processing (1)
  • src/components/chat/ChatRoomModalContainer.tsx
📝 Walkthrough

Walkthrough

채팅 모달이 전용 메시지 스크롤 컨테이너를 사용하도록 변경되었습니다. 새 메시지는 requestAnimationFrame 이후 목록의 끝으로 스크롤됩니다. 이전 메시지 버튼의 로딩 상태와 메시지 레이아웃도 조정되었습니다.

Changes

채팅 메시지 스크롤 및 표시

Layer / File(s) Summary
메시지 목록 구조와 상태 표시
src/components/chat/ChatRoomModal.tsx, src/components/chat/ChatRoomModalContainer.tsx
채팅 본문에 overflow-hidden을 적용했습니다. 메시지 목록에 overflow-y-auto 컨테이너를 추가했습니다. 이전 메시지 버튼에 로딩 스타일과 aria-busy를 적용했습니다. 메시지 레이아웃과 줄바꿈 스타일을 조정했습니다.
새 메시지 자동 스크롤
src/components/chat/ChatRoomModalContainer.tsx
sentinel의 scrollIntoView 대신 컨테이너의 scrollTopscrollHeight를 사용합니다. 스크롤 처리는 requestAnimationFrame에서 실행하며 예약된 프레임을 정리합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 이전 메시지 불러오기 기능을 명확하고 간결하게 설명하며, 변경 사항의 주요 목적과 일치합니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/chat-message-loading-state

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/chat/ChatRoomModalContainer.tsx (1)

63-64: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

사용하지 않는 sentinel ref를 제거해 주세요.

자동 스크롤은 scrollContainerRef를 사용하므로 bottomRef는 읽히지 않습니다. Line 64의 ref와 Line 168의 연결 코드를 제거하면 stale sentinel을 없애고 구현 의도를 명확하게 유지할 수 있습니다.

정리 예시
@@
-  const bottomRef = useRef<HTMLDivElement | null>(null);
@@
-        <div ref={bottomRef} aria-hidden="true" />

Also applies to: 168-168

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/chat/ChatRoomModalContainer.tsx` around lines 63 - 64, Remove
the unused bottomRef sentinel from ChatRoomModalContainer, including its useRef
declaration and the JSX ref connection near the bottomRef usage. Keep
scrollContainerRef and the existing automatic-scroll behavior unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/chat/ChatRoomModalContainer.tsx`:
- Around line 109-127: 분리 이전 메시지 버튼을 감싸는 상단 영역을 추가해 `hasNextPage`일 때 목록 상단에
배치하세요. `ChatRoomModalContainer`의 메시지 컨테이너에만 `min-h-full`과 `justify-end` 또는
`mt-auto`가 적용되도록 구조를 변경해, 버튼이 하단 정렬 그룹에 포함되지 않게 하세요.
- Around line 109-110: Update the scroll container div identified by
scrollContainerRef to add tabIndex={0} and an accessible-name-bearing
role="region", while preserving its existing overflow behavior and focus styling
so keyboard users can focus the conversation area and scroll it with
PageUp/PageDown.

---

Nitpick comments:
In `@src/components/chat/ChatRoomModalContainer.tsx`:
- Around line 63-64: Remove the unused bottomRef sentinel from
ChatRoomModalContainer, including its useRef declaration and the JSX ref
connection near the bottomRef usage. Keep scrollContainerRef and the existing
automatic-scroll behavior unchanged.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b47c4d0e-2c9a-43dc-be02-6aaf9e492bb1

📥 Commits

Reviewing files that changed from the base of the PR and between 4b0167a and e4af5d3.

📒 Files selected for processing (2)
  • src/components/chat/ChatRoomModal.tsx
  • src/components/chat/ChatRoomModalContainer.tsx

Comment thread src/components/chat/ChatRoomModalContainer.tsx Outdated
Comment thread src/components/chat/ChatRoomModalContainer.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant