From 630788d9ebf5b1a4b60d32a56fba6ef1f6aaa01b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= <min815371@gmail.com>
Date: Mon, 6 Jul 2026 15:53:31 +0900
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=EC=B1=84=ED=8C=85=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20=EB=81=9D=C2=B7?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EC=97=AC=EB=B0=B1=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?=EB=B3=B4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상품목록 버튼 래퍼에 pr-[16px] 추가 — 채팅 스크롤바 오른쪽 끝과 정렬
- 상단 pt-[64px] 를 스크롤 컨테이너 안쪽으로 이동 — 첫 메시지는 협상절차 카드와 높이 유지, 스크롤 시 여백 없이 맨 위까지 표시
- chat-scroll 스크롤바 트랙에 margin-top 64px — 스크롤바 시작 높이를 협상절차 카드 상단과 일치

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/features/chat/components/ChatMessage.tsx | 5 +++--
 frontend/src/features/chat/components/UserButton.tsx  | 3 ++-
 frontend/src/index.css                                | 4 ++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/chat/components/ChatMessage.tsx b/frontend/src/features/chat/components/ChatMessage.tsx
index 66fcf19..363326b 100644
--- a/frontend/src/features/chat/components/ChatMessage.tsx
+++ b/frontend/src/features/chat/components/ChatMessage.tsx
@@ -10,8 +10,9 @@ import { RejectCM } from '@/features/chat/components/templates/RejectCM'
 
 export function ChatMessage() {
   return (
-    <div className="flex-1 w-full min-h-0 pr-[16px] pt-[64px]">
-      <div className="chat-scroll h-full overflow-y-auto flex flex-col pl-[140px] pr-[126px]">
+    <div className="flex-1 w-full min-h-0 pr-[16px]">
+      {/* pt-[64px]: 첫 메시지를 우측 협상절차 카드 상단과 맞추되, 스크롤 시 여백도 함께 밀려 올라가도록 스크롤 컨테이너 안쪽에 둔다 */}
+      <div className="chat-scroll h-full overflow-y-auto flex flex-col pt-[64px] pl-[140px] pr-[126px]">
         <ChatList />
       </div>
     </div>
diff --git a/frontend/src/features/chat/components/UserButton.tsx b/frontend/src/features/chat/components/UserButton.tsx
index 3ad6a0c..480c81a 100644
--- a/frontend/src/features/chat/components/UserButton.tsx
+++ b/frontend/src/features/chat/components/UserButton.tsx
@@ -20,7 +20,8 @@ export function UserButton({ type, text, textList, priceErrorMessage }: UserButt
   if (type === '') return null
 
   return (
-    <div className="flex w-full pb-[52px]">
+    // pr-[16px]: 채팅 스크롤 영역(ChatMessage 바깥 pr-[16px])과 오른쪽 끝 정렬
+    <div className="flex w-full pb-[52px] pr-[16px]">
       <div className="grid grid-cols-[1fr_auto_1fr] items-center w-full">
         <div />
         <div className="flex justify-center">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ae917ee..994ab26 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -173,6 +173,10 @@
 }
 
 /* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
+/* 트랙 상단 64px 여백: 콘텐츠는 맨 위까지 스크롤되지만 스크롤바는 우측 협상절차 카드 상단과 같은 높이에서 시작 */
+.chat-scroll::-webkit-scrollbar-track {
+  margin-top: 64px;
+}
 .chat-scroll::-webkit-scrollbar-thumb {
   background-color: var(--neutral-40);
 }