QueryBox Layout 수정

[Bangdayeon]

관련 이슈

• close [Bug] 채팅 페이지 TextArea 위치 조정 #358

PR 설명

• HomePage 로딩 중 화면, ChatPage에서의 QueryBox 레이아웃이 깨지는 문제 수정

변경 내용

변경 전

2026-02-11.5.17.57.mov

변경 후

2026-02-11.5.17.19.mov

[coderabbitai]

Walkthrough

ChatQueryBox의 위치 및 래퍼 구조가 조정되었습니다. ChatPage에서는 고정된 하단 오버레이에서 문서 흐름 내의 하단 정렬 요소로 변경되었고, HomePage에서는 고정(bottom-10)에서 절대(bottom-0, mb-15) 위치로 전환하여 내부에 최대 너비(816px)를 가지는 래퍼를 추가했습니다. 스크롤 영역의 하단 패딩도 기존 대형 값에서 pb-42로 축소되었습니다. 채팅 로직 및 공개 API 선언에는 변경이 없습니다.

Possibly related PRs

• linkiving PR 288: HomePage/ChatPage에서 QueryBox/ChatQueryBox의 배치 및 래퍼 변경을 다루는 코드 레벨 유사 수정 사항 포함.
• linkiving PR 304: HomePage의 QueryBox 래퍼 클래스 및 정렬 관련 변경으로 동일 컴포넌트의 레이아웃 처리와 직접적인 연관성 있음.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 변경 사항의 핵심(QueryBox 레이아웃 수정)을 명확하고 간결하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명은 필수 섹션(관련 이슈, PR 설명)을 포함하고 있으며, 문제 상황과 변경 내용을 명확히 제시하고 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항은 #358 이슈의 목표를 충족합니다: ChatPage와 HomePage의 QueryBox 레이아웃이 SideNavigation에 영향받지 않도록 위치 조정되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항은 QueryBox 레이아웃 수정과 관련된 스타일 조정으로, 이슈 #358의 범위 내에 있습니다.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#358-chatpage-textarea-layout

---

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]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/app/`(route)/chat/[id]/ChatPage.tsx:
- Around line 148-149: In ChatPage.tsx, the outer wrapper div that currently has
className "z-10 mb-15 flex w-full justify-center px-4" is using z-10 without a
positioned context; either remove "z-10" or add a positioning class (e.g.,
"relative") to that same div so the z-index takes effect; update the className
on the div with "z-10 mb-15 flex w-full justify-center px-4" accordingly and
ensure no other layout relies on that z-index.

🧹 Nitpick comments (1)

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

106-106: pb-[10.5rem]이 현재 레이아웃에서 과도할 수 있습니다.

이전에 QueryBox가 fixed 위치였을 때는 스크롤 영역 하단에 큰 패딩이 필요했지만, 현재는 QueryBox가 일반 문서 흐름(normal flow)에 있으므로 flex 레이아웃이 이미 공간을 확보해 줍니다. 10.5rem(168px)의 하단 패딩이 스크롤 영역 하단에 불필요한 빈 공간을 만들 수 있으니, 적절한 값으로 줄이는 것을 검토해 주세요.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@src/app/`(route)/chat/[id]/ChatPage.tsx:
- Line 106: The Tailwind utility classes pb-42 and mb-15 used in ChatPage.tsx
(see the className with "pb-42" around the ChatPage component and the "mb-15"
usage later) are not defined in your Tailwind/theme, so they have no effect; fix
this by either adding corresponding custom spacing tokens to your globals.css
`@theme` block (define --spacing-42 and --spacing-15 matching the project's
pattern used in src/styles/custom/colors.css) so Tailwind can map pb-42 and
mb-15, or replace the classes in ChatPage.tsx with arbitrary-value syntax
(pb-[10.5rem] and mb-[3.75rem]) so the intended spacing is applied immediately.

[Seong-Myeong]

코드래빗 리뷰 확인부탁드립니다 @Bangdayeon

[Bangdayeon]

코드래빗 리뷰 확인부탁드립니다 @Bangdayeon

해결했습니다