답변 스크롤 여백 조정

[Seong-Myeong]

관련 이슈

• close 답변 스크롤 적용 #529

PR 설명

• 질문 전송 직후 최신 질문이 채팅 화면 상단 근처에 위치하도록 스크롤 동작을 조정했습니다.
• 답변 생성 중 최신 답변 흐름 아래에 동적 하단 여백을 추가해 답변 영역이 안정적으로 보이도록 했습니다.
• 첫 답변 메시지가 표시되면 답변을 생성하고 있어요 로딩 문구가 사라지도록 개선했습니다.
• 답변 완료 후에도 여백을 유지하고, 사용자가 위로 스크롤한 뒤 다시 하단으로 내려오면 여백이 제거되도록 했습니다.

테스트

• pnpm lint
• pnpm exec tsc --noEmit

[coderabbitai]

Walkthrough

ChatPage.tsx에 "응답 하단 갭(response bottom gap)" 메커니즘을 도입했습니다. useLayoutEffect와 showResponseBottomGap 플래그를 활용해 응답 생성 중 최신 사용자 질문을 화면 상단에 고정하는 scrollLatestQuestionToTop 콜백과 갭 높이 계산 로직을 추가했습니다. 소켓 연결 시작 및 메시지 제출 시 갭이 활성화되고, 사용자가 스크롤로 갭 영역에서 벗어나면 비활성화됩니다. 스피너 노출 조건은 isAwaitingResponse && !hasResponseAfterLatestQuestion으로 변경되었으며, 하단에는 responseBottomGapHeight만큼의 spacer가 조건부로 렌더링됩니다.

Possibly related PRs

• Team-SoFa/linkiving#457: 동일한 ChatPage.tsx의 handleScroll 및 스크롤 컨테이너 관련 로직을 조정하고 있어, 이번 PR의 하단 갭 기반 스크롤 처리와 같은 기능 영역(채팅 스크롤)에 직접 연결됩니다.
• Team-SoFa/linkiving#508: 동일한 ChatPage.tsx에서 AI 응답 스트리밍/제출 시 자동 스크롤 동작을 변경하고 ref/플래그(shouldScrollToBottomRef)를 활용한 조건부 스크롤 게이팅을 추가했으며, 이번 PR의 showResponseBottomGap 접근과 같은 패턴을 공유합니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 반영하고 있으며, 스크롤 여백 조정이라는 주요 변경을 간결하게 요약했습니다.
Description check	✅ Passed	PR 설명이 저장소의 템플릿을 준수하며 관련 이슈를 명시하고, 변경 사항을 구체적으로 설명하고 테스트 항목을 나열했습니다.
Linked Issues check	✅ Passed	PR의 코드 변경이 #529의 목표인 답변 스크롤 동작 개선과 여백 조정을 모두 구현했으며, 최신 질문 위치 조정과 동적 하단 여백 추가가 요구사항을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경이 ChatPage.tsx 내의 스크롤 및 여백 처리에 집중되어 있으며, #529의 범위 내에 있는 답변 디스플레이 개선에만 관련된 것으로 보입니다.

_{✏️ 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 feature/#529-apply-answer-scroll-ui

---

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/(route)/chat/[id]/ChatPage.tsx (1)

396-409: 💤 Low value

갭 높이 계산 방식 검토 권장

현재 수식 root.clientHeight - latestUserMessage.offsetHeight는 응답 콘텐츠 길이와 관계없이 동일한 갭을 생성합니다. 응답이 길어지면 실제로 필요한 것보다 더 큰 spacer가 렌더링될 수 있습니다.

현재 구현도 동작하지만, 응답 스트리밍 중 갭이 점진적으로 줄어드는 것이 더 자연스러운 UX가 될 수 있습니다:

// 예: 질문 아래 모든 콘텐츠 높이를 고려
const contentBelowQuestion = root.scrollHeight - latestUserMessage.offsetTop - latestUserMessage.offsetHeight;
const neededGap = Math.max(root.clientHeight - latestUserMessage.offsetHeight - contentBelowQuestion, 0);

다만, 현재 접근 방식도 기능적으로 문제없으므로 선택 사항입니다.

🤖 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/app/`(route)/chat/[id]/ChatPage.tsx around lines 396 - 409, The gap
height calculation in the useLayoutEffect hook does not account for content
already rendered below the user message, which can result in unnecessarily large
spacers during response streaming. Modify the nextGapHeight calculation to
consider the actual content height between the user message and the bottom of
the scroll container. Specifically, calculate the height of all content below
the question using the scroll container's total height minus the question's
position and height, then subtract this from the available space to get the true
needed gap. This will allow the gap to progressively reduce as response content
streams in, creating a more natural UX.

🤖 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.

Nitpick comments:
In `@src/app/`(route)/chat/[id]/ChatPage.tsx:
- Around line 396-409: The gap height calculation in the useLayoutEffect hook
does not account for content already rendered below the user message, which can
result in unnecessarily large spacers during response streaming. Modify the
nextGapHeight calculation to consider the actual content height between the user
message and the bottom of the scroll container. Specifically, calculate the
height of all content below the question using the scroll container's total
height minus the question's position and height, then subtract this from the
available space to get the true needed gap. This will allow the gap to
progressively reduce as response content streams in, creating a more natural UX.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: edd7ed22-6376-4f01-9e67-1648b2a4b0c9

📥 Commits

Reviewing files that changed from the base of the PR and between 958f4ee and 83ccde3.

📒 Files selected for processing (1)

• src/app/(route)/chat/[id]/ChatPage.tsx