[FEAT] chat room UI - #80
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough견적 상세 화면에 채팅방 진입 CTA가 추가되었습니다. CTA는 채팅방을 생성하거나 조회한 뒤 상세 화면으로 이동합니다. SENT 상태의 대기·보낸 견적에 CTA를 표시하며, 채팅 라우트와 사이드 영역 너비를 업데이트했습니다. Changes견적 채팅방 진입
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant 견적 상세 화면
participant EstimateChatAction
participant 채팅방 API
participant 라우터
견적 상세 화면->>EstimateChatAction: estimateId 전달
EstimateChatAction->>채팅방 API: 채팅방 생성 또는 조회 요청
채팅방 API-->>EstimateChatAction: roomId 반환
EstimateChatAction->>라우터: /chats/{roomId}로 이동
라우터-->>견적 상세 화면: 채팅방 상세 화면 표시
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
src/components/estimate/sent/SentEstimateChatAction.tsx (1)
11-12: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win불필요한 래퍼 컴포넌트를 제거하세요.
SentEstimateChatAction은EstimateChatAction에 같은estimateId를 전달할 뿐입니다.SentEstimateDetailPage에서EstimateChatAction을 직접 렌더링하세요. 별도 래퍼를 유지하면 공통 CTA의 API가 변경될 때 수정 지점이 늘어납니다.As per coding guidelines, “기존 공통 컴포넌트를 우선 재사용하고, 중복 컴포넌트를 만들지 않는다” 규칙을 적용했습니다.
🤖 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/components/estimate/sent/SentEstimateChatAction.tsx` around lines 11 - 12, Remove the redundant SentEstimateChatAction wrapper and update SentEstimateDetailPage to render EstimateChatAction directly with the existing estimateId prop. Update imports and references accordingly, without changing EstimateChatAction’s API or behavior.Sources: Coding guidelines, Path instructions
src/components/estimate/pending/PendingEstimateDetailView.tsx (1)
46-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win채팅 CTA 상태 조건의 단일 기준을 사용하세요.
"SENT"상태 리터럴이 두 상세 화면에 반복됩니다. 기존 견적 상태 상수 또는 상태 타입이 있으면 두 위치에서 재사용하세요. 없다면 도메인 상수를 정의하고 두 CTA 조건이 같은 값을 참조하게 하세요.
src/components/estimate/pending/PendingEstimateDetailView.tsx#L46-L46: 공통 상태 상수 또는 타입 기반 값으로 조건을 변경하세요.src/components/estimate/sent/SentEstimateDetailPage.tsx#L130-L130: 같은 공통 상태 값으로 조건을 변경하세요.As per path instructions, “매직 넘버·매직 스트링을 지양”해야 합니다.
#!/bin/bash set -euo pipefail # 기존 견적 상태 상수와 상태 타입을 찾습니다. rg -n -C 2 --glob '*.{ts,tsx}' '\bESTIMATE_STATUS\b|\bEstimateStatus\b|\bstatus\s*===\s*"SENT"' src🤖 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/components/estimate/pending/PendingEstimateDetailView.tsx` at line 46, 채팅 CTA 조건의 매직 문자열을 공통 견적 상태 상수 또는 타입 기반 값으로 대체하세요. src/components/estimate/pending/PendingEstimateDetailView.tsx 46-46의 showChatAction과 src/components/estimate/sent/SentEstimateDetailPage.tsx 130-130의 동일한 조건이 하나의 공통 상태 값을 참조하도록 기존 ESTIMATE_STATUS 또는 EstimateStatus를 재사용하고, 없다면 도메인 상태 상수를 정의해 두 위치에 적용하세요.src/components/estimate/detail/EstimateChatAction.tsx (1)
48-48: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
w-[200px]대신 spacing 유틸을 사용하세요.
w-[200px]는 공유 CTA에 임의 폭 값을 추가합니다. 구성에서 기본 spacing scale을 변경하지 않았다면w-50으로 교체하세요.수정 예시
- className={cn("w-[200px] whitespace-nowrap", buttonClassName)} + className={cn("w-50 whitespace-nowrap", buttonClassName)}As per coding guidelines, “arbitrary value를 최소화”하고 “기존 design tokens”를 사용해야 합니다.
#!/bin/bash set -euo pipefail # Tailwind spacing 유틸과 기존 CTA 폭 사용 방식을 확인합니다. rg -n -C 2 --glob '*.{ts,tsx}' 'w-\[200px\]|\bw-50\b' src fd -a 'tailwind.config.*' . -x sed -n '1,240p' {}🤖 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/components/estimate/detail/EstimateChatAction.tsx` at line 48, EstimateChatAction의 CTA className에서 임의 폭 유틸리티 w-[200px]를 기본 spacing scale 토큰인 w-50으로 교체하고, 기존 cn 조합과 buttonClassName 동작은 유지하세요.
🤖 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/components/estimate/detail/EstimateChatAction.tsx`:
- Line 48: EstimateChatAction의 CTA className에서 임의 폭 유틸리티 w-[200px]를 기본 spacing
scale 토큰인 w-50으로 교체하고, 기존 cn 조합과 buttonClassName 동작은 유지하세요.
In `@src/components/estimate/pending/PendingEstimateDetailView.tsx`:
- Line 46: 채팅 CTA 조건의 매직 문자열을 공통 견적 상태 상수 또는 타입 기반 값으로 대체하세요.
src/components/estimate/pending/PendingEstimateDetailView.tsx 46-46의
showChatAction과 src/components/estimate/sent/SentEstimateDetailPage.tsx 130-130의
동일한 조건이 하나의 공통 상태 값을 참조하도록 기존 ESTIMATE_STATUS 또는 EstimateStatus를 재사용하고, 없다면 도메인
상태 상수를 정의해 두 위치에 적용하세요.
In `@src/components/estimate/sent/SentEstimateChatAction.tsx`:
- Around line 11-12: Remove the redundant SentEstimateChatAction wrapper and
update SentEstimateDetailPage to render EstimateChatAction directly with the
existing estimateId prop. Update imports and references accordingly, without
changing EstimateChatAction’s API or behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 480ee134-a108-4eb8-8e97-5d9b66bfc044
📒 Files selected for processing (6)
src/components/estimate/detail/EstimateChatAction.tsxsrc/components/estimate/detail/EstimateDetailLayout.tsxsrc/components/estimate/pending/PendingEstimateDetailView.tsxsrc/components/estimate/sent/SentEstimateChatAction.tsxsrc/components/estimate/sent/SentEstimateDetailPage.tsxsrc/lib/constants/appRoutes.ts
juengseulki
left a comment
juengseulki
left a comment
There was a problem hiding this comment.
📋 PR 리뷰
👍 좋았던 점
- 견적 상세에서 채팅방으로 진입하는 공통 CTA를 별도 컴포넌트로 분리했습니다.
- 고객 대기 견적과 기사 보낸 견적이 동일한 채팅방 생성·조회 API 흐름을 재사용합니다.
POST /chats/rooms응답에서 반환된 실제roomId를 사용해 채팅 상세 페이지로 이동합니다.- 채팅방이 기존에 존재하는 경우와 새로 생성되는 경우를 화면에서 별도로 분기하지 않고 동일하게 처리했습니다.
- 요청 중 버튼을 비활성화해 중복 실행을 방지하고
aria-busy도 함께 제공했습니다. - API 실패 시 공통 오류 메시지 변환과 Toast를 사용해 현재 상세 화면을 유지하면서 재시도할 수 있도록 했습니다.
- 고객 대기 견적과 기사 보낸 견적 모두 조율 가능한
SENT상태에서만 채팅 CTA를 노출했습니다. - 고객 상세에서는 기존 확정·취소 액션 아래에 채팅 버튼을 배치해 기존 액션 우선순위를 유지했습니다.
- 기사 상세에서는 우측 action column에 별도 CTA를 배치해 본문 정보와 행동 영역을 구분했습니다.
- 채팅방 경로를
APP_ROUTES.CHATS.ROOM()으로 상수화했습니다. - 상세 Layout의 aside 폭을 320px로 명시해 Desktop 레이아웃 의도를 더 분명하게 했습니다.
- 보낸 견적 상세 일부 레이아웃 값을 공통 상수로 재사용하도록 정리했습니다.
- 현재 PR은 열려 있고 병합 가능한 상태이며, 변경 파일 6개로 범위가 명확합니다.
🔍 확인 및 제안
채팅방 요청 실패 후 재시도할 때 이전 Toast가 요청 중에도 유지될 수 있으므로,
재시도 시작 시 기존 오류 메시지를 초기화하면 상태 표현이 조금 더 깔끔해질 수 있습니다.
또한 이번 변경에서 공통 aside 폭을 xl:w-[320px]로 명시했지만,
보낸 견적 상세에서는 별도로 xl:w-80을 전달하고 있습니다.
현재 Tailwind 기준으로 동일한 320px라면 화면 문제는 없지만,
명시적인 320px 통일이 목적이라면 공통 asideClassName을 재사용하거나
같은 표현으로 맞추는 편이 유지보수에는 더 명확해 보입니다.
SentEstimateChatAction은 현재 단순 Wrapper이므로
향후 기사 전용 정책이나 스타일을 추가할 계획이 없다면
공통 EstimateChatAction을 직접 사용하는 방식도 고려할 수 있습니다.
전체적으로 기존 견적 기능을 변경하지 않고
채팅방 진입만 공통 CTA로 안전하게 추가한 구조로 보입니다.
수고하셨습니다! 😊
2 participants
📋 작업 내용
견적 상세에서 채팅방으로 진입할 수 있는 공통 CTA 컴포넌트를 추가했습니다.
EstimateChatActionPOST /chats/rooms호출 후 생성되거나 조회된roomId로 채팅방 페이지 이동대기 견적 상세에 채팅하기 버튼을 추가했습니다.
SENT상태에서만 노출보낸 견적 상세에 채팅하기 버튼을 추가했습니다.
SENT상태에서만 노출채팅방 페이지 이동 경로를 추가했습니다.
APP_ROUTES.CHATS.ROOM(roomId)/chats/:roomId견적 상세 aside 폭을 명시적으로 320px로 조정했습니다.
🔥 변경 사항
src/components/estimate/detail/EstimateChatAction.tsxsrc/components/estimate/pending/PendingEstimateDetailView.tsxsrc/components/estimate/sent/SentEstimateChatAction.tsxsrc/components/estimate/sent/SentEstimateDetailPage.tsxsrc/components/estimate/detail/EstimateDetailLayout.tsxsrc/lib/constants/appRoutes.ts✅ 체크리스트
📷 스크린샷 (선택)
🔗 관련 이슈
Closes #
💬 To Reviewer
Summary by CodeRabbit
새로운 기능
개선