Feat(#280): 채팅 화면 UI/UX 디자인 개선

[stringnine]

📌 관련 이슈

• Closes [Feat] 채팅 화면 UI/UX 디자인 개선 #280

🏷️ PR 타입

• ✨ 기능 추가 (Feature)
• 🐛 버그 수정 (Bug Fix)
• ♻️ 리팩토링 (Refactoring)
• 🗑️ 코드 제거 (Chore)
• 📝 문서 수정 (Documentation)
• 🎨 스타일 변경 (Style)
• ✅ 테스트 추가 (Test)

📝 작업 내용

채팅 메시지 영역 디자인 개선

• 사용자 메시지: 우측 프로필 아이콘(ProfileIcon) 제거, 메시지 내부 패딩 10px → 16px 조정
• 답변(assistant) 메시지: 아이콘 50px 원형 래퍼 제거 후 30px 아이콘으로 변경, 아이콘-본문 간격 24px 적용
• 답변 박스 최대 너비 540px 고정, 메시지 영역에 px-30px 적용 및 항상 가운데 정렬되도록 조정
• 질문 다음 답변 사이 간격(mt-24px) 분기 추가로 메시지 그룹 간 여백 정돈
• 최종 응답 로딩 바 패딩 10px → 16px 통일

AI 도구 실행 상태바 추가 (ToolStatusBar)

• 파이썬 코드 생성/계산, 변형 문제 생성 등 AI 도구 실행 상태를 표시하는 ToolStatusBar 컴포넌트 신규 추가 (python / transform 아이콘)
• ChatMessage 타입에 toolStatuses 필드 및 ToolStatus 인터페이스 추가
• 스트리밍 중 도구 상태 목록을 메시지에 함께 렌더링하도록 ChatMessages / useChatMessages 연동
• 개발 환경 한정 목업: ?toolStatusMock=true 쿼리 파라미터로 도구 상태바 UI 확인 가능

기타

• 뷰어 열림/닫힘 분기 설정 및 화면 조절기(divider) 사용 시 채팅 입력창 최소 패딩값 세부 조정
• useChatMessages의 미리보기 URL 정리 로직에서 cleanup 시점의 ref 스냅샷을 사용하도록 수정 (exhaustive-deps 경고 해소)

📸 스크린샷 (UI 변경 시 필수)

• AI 도구 실행 상태 표시 상태바들 -> 추후 SSE 연결하면서 이벤트별로 바꿈
• http://localhost:5173/app/chat/123?toolStatusMock=true -> 확인 경로

• 채팅 디자인 화면 개선

⚠️ 스크린샷은 PR 작성자가 직접 첨부해주세요.

✅ 체크리스트

공통

• 셀프 리뷰를 완료했습니다
• 코드 리뷰를 받을 준비가 완료되었습니다
• pnpm tsc --noEmit 타입 체크를 통과했습니다
• 브랜치명 컨벤션을 준수했습니다 (type/이슈번호-작업명)

UI/레이아웃 변경 시

• 태블릿(768px~) / 데스크탑(1280px~) / 와이드(1360px~) 반응형을 확인했습니다
• PageContainer / ContentGrid 공통 컴포넌트를 활용했습니다

📎 기타 참고사항

• 도구 상태바(ToolStatusBar)는 현재 개발 환경 목업(?toolStatusMock=true) 기준으로 동작합니다. 실제 SSE 이벤트 연동은 후속 작업에서 진행 예정입니다.

Summary by CodeRabbit

• New Features

  • 어시스턴트 메시지에 도구 실행 상태 바 추가 및 스트리밍 중 상태/로딩 표시 개선
  • 개발환경용 도구 상태 목업 지원

• Style

  • 사용자/어시스턴트 말풍선 패딩 확대 및 아이콘/간격 조정
  • 메시지 리스트 및 입력 영역 좌우 여백 확대
  • 채팅 패널 배경색 적용 및 메시지 그룹 간 간격 개선

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cfe2ad00-d9c0-45dd-a3e3-6e7e47d0eb57

📥 Commits

Reviewing files that changed from the base of the PR and between d1b1a46 and f7eaaae.

📒 Files selected for processing (1)

• src/features/chat/components/rightpanel/ChatMessages.tsx

---

📝 Walkthrough

Walkthrough

ToolStatusBar를 추가하고 assistant 메시지 렌더를 확장해 streaming/빈 콘텐츠 상황에서 toolStatuses를 조건부 표시합니다. 채팅 말풍선·아이콘·패딩·컨테이너 여백과 리사이저 제약을 조정하고, 개발용 목업 toolStatuses 주입 유틸과 훅 연동을 도입했습니다.

Changes

Tool Status Feature and Chat Layout Enhancement

Layer / File(s)	Summary
Tool Status type contract src/features/chat/types/chat_types.ts	ToolStatusIconType 및 ToolStatus 인터페이스 추가. ChatMessage에 toolStatuses?: ToolStatus[] 필드 추가.
ToolStatusBar component and export src/features/chat/components/rightpanel/ToolStatusBar.tsx, src/features/chat/components/rightpanel/index.ts	ToolStatusBar 컴포넌트(PythonIcon, TransformIcon, ICON_BY_TYPE 매핑) 추가 및 rightpanel index에서 재수출.
Status bar styles & ThinkingBar src/features/chat/components/rightpanel/status_bar_styles.ts, src/features/chat/components/rightpanel/ThinkingBar.tsx	STATUS_BAR_BASE_CLASS 상수 추가로 상태바 공통 클래스화, ThinkingBar 및 관련 바의 내부 패딩을 16px로 변경.
Message rendering with tool statuses src/features/chat/components/rightpanel/ChatMessages.tsx	UserMessage 레이아웃 단순화(아이콘 제거) 및 버블 패딩 16px; AssistantMessage가 toolStatuses? 수용, 스트리밍·빈 컨텐츠·toolStatuses 조합에 따라 ToolStatusBar 목록 또는 ThinkingBar/FinalResponseLoadingBar 분기 확장; 메시지 그룹 간격과 스크롤 패딩 조정; 메시지 데이터에서 toolStatuses 전달.
UI layout and spacing refinements src/features/chat/components/rightpanel/RightPanel.tsx, src/pages/ChatPage.tsx, src/features/chat/hooks/useChatPanel.ts	RightPanel 입력 래퍼 및 채팅 스크롤 컨테이너 수평 패딩 16→30px, ChatPage에 bg-[#F1F4F8] 추가, useChatPanel의 rightMinPx 302→330 상향.
Development mock tool status data src/features/chat/hooks/tool_status_mock.ts, src/features/chat/hooks/useChatMessages.ts	MOCK_TOOL_STATUSES와 withMockToolStatuses 추가. useChatMessages에서 쿼리 파라미터/DEV 환경 기반 shouldUseToolStatusMock 플래그를 사용해 병합된 메시지에 목 데이터 주입, 전송 시 생성되는 임시 어시스턴트 메시지에 toolStatuses 포함 및 훅 의존성/언마운트 정리 개선.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Team-Proovy/Proovy-front#194: assistant content 빈 상태 처리 및 메시지 렌더/스트리밍 분기 관련 교차 영향.
• Team-Proovy/Proovy-front#169: managedPreviewUrlsRef 언마운트 정리 로직 변경과 중복 연관.
• Team-Proovy/Proovy-front#95: ChatMessages/RightPanel 초기 UI 구조와 기능적 연속성.

Suggested reviewers

• L0521
• haein45
• Mingyeong-Kang

Poem

🐰 봄밤에 껑충 뛴 토끼가 말하네,
버블은 넓어져 속삭임도 편해졌고,
작은 아이콘이 도구의 길을 비추네,
스트리밍 중엔 상태가 반짝이며 춤추고,
개발 목업으로 미리 웃음을 지었네.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 '채팅 화면 UI/UX 디자인 개선'으로 변경사항의 핵심(채팅 UI/UX 개선)을 명확히 요약하고 있습니다.
Description check	✅ Passed	PR 설명은 템플릿의 주요 섹션(관련 이슈, PR 타입, 작업 내용, 스크린샷, 체크리스트, 참고사항)을 모두 포함하고 있으며 변경사항을 명확하게 문서화했습니다.
Linked Issues check	✅ Passed	PR의 변경사항이 #280의 주요 요구사항들을 충족합니다: 사용자 메시지 아이콘 제거 및 패딩 조정, AI 응답 도구 실행 상태 표시 UI 추가(ToolStatusBar), 메시지 버블 간격 및 레이아웃 정리, 스타일 통일 등이 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 #280의 요구범위 내입니다. ChatMessages/RightPanel/ToolStatusBar 컴포넌트, 채팅 타입 확장, 레이아웃 패딩 조정, 드래그 리사이징 최소값 조정 등이 모두 디자인 개선 또는 관련 기능 구현에 해당합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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 feat/280-chat-ui-enhancement

---

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

[stringnine]

@CodeRabbit 코드 리뷰 부탁합니다

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read the changed files for review
echo "=== ChatMessages.tsx ==="
cat src/features/chat/components/rightpanel/ChatMessages.tsx

echo ""
echo "=== ToolStatusBar.tsx ==="
cat src/features/chat/components/rightpanel/ToolStatusBar.tsx

echo ""
echo "=== chat_types.ts ==="
cat src/features/chat/types/chat_types.ts

echo ""
echo "=== useChatMessages.ts ==="
cat src/features/chat/hooks/useChatMessages.ts

echo ""
echo "=== useChatPanel.ts ==="
cat src/features/chat/hooks/useChatPanel.ts

echo ""
echo "=== RightPanel.tsx ==="
cat src/features/chat/components/rightpanel/RightPanel.tsx

echo ""
echo "=== ThinkingBar.tsx ==="
cat src/features/chat/components/rightpanel/ThinkingBar.tsx

echo ""
echo "=== index.ts ==="
cat src/features/chat/components/rightpanel/index.ts

echo ""
echo "=== ChatPage.tsx ==="
cat src/pages/ChatPage.tsx

Length of output: 51297

---

---

첫 번째 PR 설명 이미지는 ToolStatusBar UI를 보여줍니다 — "파이썬 코드 생성 중...", "파이썬 코드로 문제의 정답 계산 중...", "변형 문제가 생성되는 중..."의 세 가지 상태 바가 표시되고 있습니다.

두 번째 PR 설명 이미지는 채팅 메시지 레이아웃을 보여줍니다 — 어시스턴트 아이콘의 크기가 두 메시지에서 다르게 보이는 문제를 빨간 박스로 표시하고 있습니다 (위 메시지는 아이콘이 더 크고, 아래 메시지는 더 작게 보임).

---

@stringnine 코드 리뷰입니다.

요약

전반적으로 UI 개선 목표가 잘 구현되었습니다. 스트리밍 분기 처리 로직과 스크롤 앵커링 로직이 잘 유지되었습니다. 다만 아래 몇 가지 버그와 개선 사항을 확인했습니다.

---

🔴 버그

1. TransformIcon SVG Gradient ID 충돌 (ToolStatusBar.tsx)

linearGradient의 id가 "transform-icon-gradient"로 하드코딩되어 있습니다. ToolStatusBar가 transform 아이콘으로 여러 개 동시에 렌더링되면 SVG <defs> ID가 문서 전체에서 중복되어, 첫 번째 gradient만 적용되고 나머지는 깨져 보이거나 투명하게 표시됩니다 (PR 첨부 이미지 1에서 transform 아이콘이 3개 나타나는 경우가 바로 이 케이스입니다).

React 18의 useId() 훅으로 유니크 ID를 생성하거나, 컴포넌트 수준에서 prop으로 주입하는 방식으로 수정이 필요합니다.

// ToolStatusBar.tsx 내 TransformIcon을 함수형 컴포넌트로 분리
const TransformIcon = (props: SVGProps<SVGSVGElement> & { gradientId: string }) => {
  const { gradientId, ...rest } = props;
  return (
    <svg ... {...rest}>
      <path ... fill={`url(#${gradientId})`} />
      <defs>
        <linearGradient id={gradientId} ...>
          ...
        </linearGradient>
      </defs>
    </svg>
  );
};

// ToolStatusBar 컴포넌트 내에서
import { useId } from "react";

export const ToolStatusBar = ({ icon, label, className = "" }: ToolStatusBarProps) => {
  const gradientId = useId(); // e.g. ":r0:"
  const Icon = icon === "transform"
    ? (props: SVGProps<SVGSVGElement>) => <TransformIcon {...props} gradientId={gradientId} />
    : ICON_BY_TYPE[icon];
  // ...
};

---

2. 빈 content 말풍선 렌더링 (ChatMessages.tsx, Line 111~118)

비스트리밍 분기의 렌더 조건:

{(content.trim() || !toolStatuses?.length) && (
  <div className="... p-[16px]">
    ...
  </div>
)}

content = ""이고 toolStatuses가 undefined 또는 빈 배열일 때:

• content.trim() → "" → falsy
• !toolStatuses?.length → !0 또는 !undefined → true

결과적으로 빈 흰색 말풍선이 렌더링됩니다. 에러 발생 후 메시지 복구 로직에서 content가 있는 경우는 괜찮지만, 예외 케이스에서 빈 버블이 표시될 수 있습니다.

// 수정 제안
{(content.trim()) && (
  <div className="... p-[16px]">...</div>
)}
{!content.trim() && !toolStatuses?.length && (
  // fallback: 빈 상태 처리 (예: 스켈레톤 or 숨김)
  null
)}

---

🟡 코드 품질

3. Mock 모듈이 항상 번들에 포함됨 (useChatMessages.ts, Line 25)

import { MOCK_TOOL_STATUSES, withMockToolStatuses } from "./tool_status_mock";

런타임에는 import.meta.env.DEV 조건으로 보호되지만, tool_status_mock.ts는 프로덕션 빌드에도 번들링됩니다. Vite의 tree-shaking이 완전히 제거하지 못할 수 있습니다.

// 프로덕션 빌드에서 완전히 제외하려면 dynamic import 고려
const { MOCK_TOOL_STATUSES, withMockToolStatuses } = import.meta.env.DEV
  ? await import("./tool_status_mock")
  : { MOCK_TOOL_STATUSES: [], withMockToolStatuses: (m: ChatMessage[]) => m };

또는 vite-plugin-istanbul이나 /* @vite-ignore */ 주석을 활용할 수 있습니다.

---

4. AssistantMessage Props 타입 명확화 (ChatMessages.tsx, Line 95)

toolStatuses?: ChatMessage["toolStatuses"];

ToolStatus 타입을 직접 임포트하면 더 명확하고 ChatMessage 타입 변경에 독립적입니다:

import type { ChatMessage, ToolStatus } from "../../types/chat_types";

// ...
toolStatuses?: ToolStatus[];

---

🟢 잘된 점

• managedPreviewUrls 스냅샷 패턴: cleanup 시점에 ref.current를 로컬 변수로 캡처하여 exhaustive-deps 경고를 올바르게 해소했습니다.
• isAnswerAfterQuestion 분기: 질문-답변 전환 간격(mt-[24px])을 별도로 계산한 로직이 명확합니다.
• ToolStatusIconType 분리: chat_types.ts에서 "python" | "transform" 타입을 ToolStatusIconType으로 별도 export한 설계가 깔끔합니다.
• aria-hidden="true": SVG 아이콘에 접근성 속성이 올바르게 적용되어 있고, 텍스트 레이블이 label prop으로 제공됩니다.

---

🧠 Learnings used

Learnt from: CR
Repo: Team-Proovy/Proovy-front PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-01-25T06:38:36.720Z
Learning: Respond in Korean (한국어) when providing code reviews or code generation

[coderabbitai]

🧹 Nitpick comments (1)

src/features/chat/components/rightpanel/status_bar_styles.ts (1)

7-8: 💤 Low value

하드코딩된 색상 값을 테마로 추출하면 더 유지보수하기 좋습니다.

#D1D6DE와 #E3E7ED 같은 색상 값을 직접 사용하는 대신, Tailwind의 색상 팔레트나 CSS 변수로 정의하면 일관성 있는 디자인 시스템 관리가 가능합니다.

예를 들어:

// 색상을 theme에 정의한 후
export const STATUS_BAR_BASE_CLASS =
  "flex min-h-[30px] w-full items-center gap-[8px] overflow-hidden rounded-[12px] border-[0.5px] border-gray-300 bg-gray-100";

또는 CSS 변수 사용 시:

// Tailwind v4에서는 괄호 사용
export const STATUS_BAR_BASE_CLASS =
  "flex min-h-[30px] w-full items-center gap-[8px] overflow-hidden rounded-[12px] border-[0.5px] border-(--status-bar-border) bg-(--status-bar-bg)";

하지만 현재 구조도 충분히 작동하며, 개선은 선택사항입니다.

🤖 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/features/chat/components/rightpanel/status_bar_styles.ts` around lines 7
- 8, STATUS_BAR_BASE_CLASS currently embeds hardcoded hex colors
(border-[`#D1D6DE`], bg-[`#E3E7ED`]); replace those with theme-aware tokens to
improve maintainability by either using Tailwind palette classes (e.g.,
border-gray-300 and bg-gray-100) or CSS variables (e.g.,
border-(--status-bar-border) and bg-(--status-bar-bg)) and ensure the
corresponding theme entries or CSS variables are defined in your global styles
or Tailwind config so STATUS_BAR_BASE_CLASS references theme values rather than
raw hex codes.

🤖 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/features/chat/components/rightpanel/status_bar_styles.ts`:
- Around line 7-8: STATUS_BAR_BASE_CLASS currently embeds hardcoded hex colors
(border-[`#D1D6DE`], bg-[`#E3E7ED`]); replace those with theme-aware tokens to
improve maintainability by either using Tailwind palette classes (e.g.,
border-gray-300 and bg-gray-100) or CSS variables (e.g.,
border-(--status-bar-border) and bg-(--status-bar-bg)) and ensure the
corresponding theme entries or CSS variables are defined in your global styles
or Tailwind config so STATUS_BAR_BASE_CLASS references theme values rather than
raw hex codes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5646764a-c273-4eba-8788-bfe816eefd19

📥 Commits

Reviewing files that changed from the base of the PR and between e7d555d and d1b1a46.

📒 Files selected for processing (7)

• src/features/chat/components/rightpanel/ChatMessages.tsx
• src/features/chat/components/rightpanel/ThinkingBar.tsx
• src/features/chat/components/rightpanel/ToolStatusBar.tsx
• src/features/chat/components/rightpanel/status_bar_styles.ts
• src/features/chat/hooks/tool_status_mock.ts
• src/features/chat/hooks/useChatMessages.ts
• src/features/chat/types/chat_types.ts

🚧 Files skipped from review as they are similar to previous changes (5)

• src/features/chat/types/chat_types.ts
• src/features/chat/components/rightpanel/ToolStatusBar.tsx
• src/features/chat/components/rightpanel/ThinkingBar.tsx
• src/features/chat/components/rightpanel/ChatMessages.tsx
• src/features/chat/hooks/useChatMessages.ts