채팅화면 스크롤 조정

[Seong-Myeong]

관련 이슈

• close 채팅화면 스크롤 위치 조정 #456

PR 설명

• .ChatPage.tsx에서 스크롤이 바깥쪽으로 옮겼습니다.
• 현재 도커를 통해 로컬로 실행했을때 채팅이 구현되지않아 mock-chat으로 테스트해볼 수 있도록 구현해뒀습니다.

[coderabbitai]

Walkthrough

채팅 페이지의 스크롤 컨테이너 구조를 리팩토링하는 변경사항입니다. MockChatPage.tsx에서는 모의 응답 데이터의 요약 내용을 업데이트하고, MockChatPage.tsx와 ChatPage.tsx 두 파일 모두에서 스크롤 관련 속성(ref, onScroll, overflow-y-auto)을 내부 메시지 목록 래퍼에서 외부 컨테이너 래퍼로 이동했습니다. 이에 따라 custom-scrollbar, overflow-x-hidden, overflow-y-auto, pr-1 클래스를 외부 래퍼에 추가하고 내부 래퍼의 스크롤 관련 스타일링을 제거했습니다.

Possibly related PRs

• 답변탭 컴포넌트 디자인 수정 #385: MockChatPage.tsx와 ChatPage.tsx 동일 파일을 수정하며 스크롤 처리를 외부 컨테이너로 이동하고 overflow/custom-scrollbar 클래스를 조정하는 관련된 레이아웃 변경사항을 포함합니다.
• QueryBox Layout 수정 #360: ChatPage.tsx의 스크롤 핸들러, 패딩, overflow 속성 등을 래퍼 간에 재배치하는 유사한 레이아웃 및 스크롤 동작 수정이 포함됩니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항인 채팅화면의 스크롤 조정을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 필수 템플릿의 모든 섹션(관련 이슈, PR 설명)을 포함하고 있으며, 변경사항을 적절히 설명하고 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 연결된 이슈 #456의 목표인 '채팅 내역의 스크롤 위치를 조정하여 화면 표시 개선'을 충족하고 있습니다.
Out of Scope Changes check	✅ Passed	ChatPage.tsx의 스크롤 조정과 mock-chat 구현은 모두 연결된 이슈 #456의 범위 내에 있으며, 범위를 벗어난 변경사항이 없습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch featrue/#456-adjust-chatting-scroll-position

---

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

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

[coderabbitai]

🧹 Nitpick comments (1)

src/app/(dev)/mock-chat/MockChatPage.tsx (1)

44-45: 긴 요약 텍스트는 UI 테스트용으로 적절합니다.

반복된 긴 텍스트가 의도적으로 추가된 것으로 보입니다. 스크롤 동작과 긴 콘텐츠 처리를 테스트하는 데 유용합니다. 다만, 동일 문장의 단순 반복보다는 다양한 케이스(줄바꿈, 특수문자 등)를 포함하면 더 포괄적인 테스트가 가능할 수 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(dev)/mock-chat/MockChatPage.tsx around lines 44 - 45, The long
summary field in MockChatPage's mock data is just a repeated sentence; replace
that single repeated string with a more varied test payload in the summary field
(in MockChatPage.tsx) that includes multiple different sentences, deliberate
line breaks, some special characters (e.g. •, —, ?, !), and varying lengths to
exercise scrolling and rendering edge cases; keep it human-readable, maintain
the same property name (summary) and ensure the mock object shape isn't changed
so consumers (components/functions that read summary) continue to work.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/app/`(dev)/mock-chat/MockChatPage.tsx:
- Around line 44-45: The long summary field in MockChatPage's mock data is just
a repeated sentence; replace that single repeated string with a more varied test
payload in the summary field (in MockChatPage.tsx) that includes multiple
different sentences, deliberate line breaks, some special characters (e.g. •, —,
?, !), and varying lengths to exercise scrolling and rendering edge cases; keep
it human-readable, maintain the same property name (summary) and ensure the mock
object shape isn't changed so consumers (components/functions that read summary)
continue to work.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c05cfc1d-c40c-4662-8a13-bf008732b0a8

📥 Commits

Reviewing files that changed from the base of the PR and between 488e088 and 3a29741.

📒 Files selected for processing (2)

• src/app/(dev)/mock-chat/MockChatPage.tsx
• src/app/(route)/chat/[id]/ChatPage.tsx