fix: 아바타 색상 로직 shared 승격 및 userId 기준 통일

[Kwon812]

Pull Request

작업 내용

• 화면마다 제각각이던 아바타/프로필 색상 로직을 shared 유틸로 통합하고, 전 화면에서 userId 기준으로 색상을 통일했습니다.
• 중복 정의돼 있던 색상 해시 함수(getParticipantColor, getAvatarColor 2벌)를 하나로 정리했습니다.

작업 결과

• 어느 화면에서든 같은 사용자 = 같은 색으로 표시됩니다. (사이드바 · 헤더 · 설정 멤버목록 · 스프린트 · 프로젝트보드 · 회의록 · 채팅 · 업무스케줄)
• 멤버 목록 순서가 바뀌어도 색이 변하지 않습니다. (기존 설정 멤버목록은 순서 index 기반이라 순서에 따라 색이 밀렸음)
• 담당자 미배정은 중립 회색으로 표시됩니다.
• 타입 체크(tsc --noEmit) / 린트(eslint) 통과.

변경 사항

Added

• src/shared/lib/avatar-color.ts — 단일 색상 유틸 getAvatarColor(seed) + UNASSIGNED_AVATAR_COLOR(미배정 중립 회색). seed가 없으면 회색 반환

Changed

• 중복 해시 함수 3벌 → shared 하나로 통합
• entities/meeting-note/model/meeting-note.mapper.ts — getParticipantColor/PARTICIPANT_PALETTE 제거 → shared 사용 (index.ts export 정리)
• entities/task/model/task.mapper.ts — 로컬 getAvatarColor/AVATAR_PALETTE 제거 → shared 사용
• features/manage-sprint-tasks/lib/avatar-color.ts — 파일 삭제(shared로 흡수)
• 시드를 userId로 통일 (기존: 고정색 / 리스트 index / 이름·이니셜 해시 등)
• WorkspaceSidebar · WorkspaceHeader — bg-orange-400 고정 → getAvatarColor(currentMember.userId)
• MemberList(설정) — index 순환 → getAvatarColor(member.userId) (미사용 AVATAR_COLORS/index·주석 제거)
• 스프린트 TaskCard(→ assigneeId) · TaskFormDialog(→ member.userId) · task.mapper(→ assignee_id)
• 회의록 MeetingNoteForm 참석자 드롭다운 — bg-brand 고정 → getAvatarColor(member.userId)
• 채팅 ChatMessageList(발신자 아바타) · ChatView(참여멤버 로스터) → getAvatarColor(senderId/userId)
• 업무스케줄 WorkScheduleBoard(멤버 아바타 2곳) → getAvatarColor(member.userId)

Fixed

• 같은 사용자가 화면마다 다른 색(고정 주황 / 순서색 / 이름해시)으로 보이던 아바타 색상 불일치 해소
• 설정 멤버목록에서 멤버 순서 변경 시 색이 바뀌던 문제 (index 기반 → userId 기반)

실행화면

테스트

• 로컬 실행 확인
• 주요 화면에서 같은 사용자가 동일 색으로 보이는지 확인 (사이드바/헤더/설정/스프린트/회의록/채팅/스케줄)
• 미배정 담당자 회색 표시 확인
• 영향 범위 확인 (순수 시각 변경, 기능 영향 없음)

리뷰 체크리스트

• PR base branch가 올바릅니다. (feature/* -> develop, 배포 시 develop 또는 release/* -> main)
• 브랜치명이 Type/#issue-number/description 형식을 따릅니다.
• 커밋 메시지가 컨벤션을 따릅니다.
• 불필요한 console.log, 주석, 임시 코드를 제거했습니다.
• 타입 에러와 린트 에러를 확인했습니다.
• CodeRabbit 1차 리뷰를 확인했습니다.
• CodeRabbit 리뷰 반영 후 Discord에 공유했습니다.
• 최소 1명 이상의 approve 후 merge합니다.

리뷰 요청사항

• 시드를 userId, 팔레트를 6색으로 통일했습니다. 이 선택이 적절한지 봐주세요.
• 채팅 아바타를 "내/상대 고정색"에서 발신자 userId 색으로 바꿨습니다. 내/상대 구분은 좌우 정렬·말풍선 색으로 유지되며, 색은 이제 "누가 말했는지"를 나타냅니다.
• 담당자 미배정은 해시 대신 중립 회색으로 처리했습니다.
• (별개 이슈) 아바타 이니셜은 real_name 첫 글자 기반이라 실명/닉네임 표시 일관성은 이번 범위에서 제외했습니다.

관련 이슈

Closes #70

Summary by CodeRabbit

• 새로운 기능

  • 사용자 ID를 기반으로 아바타 색상을 일관되게 표시합니다.
  • 미지정 사용자에게는 중립적인 색상을 적용합니다.
  • 채팅, 회의록, 작업, 근무 일정 및 멤버 화면에 동일한 색상 규칙을 적용했습니다.

• 개선 사항

  • 긴 채팅 메시지가 화면 너비에 맞춰 자연스럽게 줄바꿈됩니다.
  • 사용자별 아바타 색상이 이름이나 표시 순서가 아닌 계정 기준으로 유지됩니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
syncly	Ready	Preview, Comment	Jul 20, 2026 8:06am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: c2553da1-4bae-40da-97ff-500b60b31c2f

📥 Commits

Reviewing files that changed from the base of the PR and between dab6849 and 3ac949c.

📒 Files selected for processing (14)

• src/entities/meeting-note/index.ts
• src/entities/meeting-note/model/meeting-note.mapper.ts
• src/entities/task/model/task.mapper.ts
• src/features/manage-chat/ui/ChatMessageList.tsx
• src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx
• src/features/manage-sprint-tasks/lib/avatar-color.ts
• src/features/manage-sprint-tasks/ui/TaskCard.tsx
• src/features/manage-sprint-tasks/ui/TaskFormDialog.tsx
• src/features/manage-work-schedule/ui/WorkScheduleBoard.tsx
• src/features/manage-workspace-members/ui/MemberList.tsx
• src/shared/lib/avatar-color.ts
• src/views/chat/ui/ChatView.tsx
• src/widgets/workspace-shell/ui/WorkspaceHeader.tsx
• src/widgets/workspace-shell/ui/WorkspaceSidebar.tsx

💤 Files with no reviewable changes (2)

• src/features/manage-sprint-tasks/lib/avatar-color.ts
• src/entities/meeting-note/index.ts

---

📝 Walkthrough

Walkthrough

공유 getAvatarColor 유틸을 추가하고 기존 중복 색상 로직을 제거했습니다. 회의록·작업 매퍼와 여러 아바타 UI가 사용자 ID 기반 색상을 사용하도록 변경되었으며, 채팅 메시지에 break-all이 추가되었습니다.

Changes

아바타 색상 통합

Layer / File(s)	Summary
공유 색상 유틸과 기존 구현 정리 src/shared/lib/avatar-color.ts, src/entities/meeting-note/..., src/entities/task/...	결정론적 팔레트와 미배정 색상을 제공하는 공유 유틸을 추가하고 기존 팔레트·도우미 및 getParticipantColor export를 제거했습니다.
도메인 매퍼 색상 계산 전환 src/entities/meeting-note/model/meeting-note.mapper.ts, src/entities/task/model/task.mapper.ts	회의록 참석자와 작업 담당자 색상 계산이 공유 유틸과 사용자 ID를 사용하도록 변경되었습니다.
화면별 아바타 적용 전환 src/features/..., src/views/chat/..., src/widgets/workspace-shell/...	채팅, 회의록, 작업, 근무 일정, 멤버 목록, 워크스페이스 아바타에 사용자 ID 기반 배경색을 적용했습니다. 채팅 메시지 본문에는 break-all을 추가했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• TeampleRun/syncly#52: 작업 매퍼의 담당자 색상 입력과 유틸 경로 변경과 직접 관련됩니다.
• TeampleRun/syncly#61: getParticipantColor의 meeting-note export 처리와 관련됩니다.

Suggested reviewers: wjswlgh96

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	ChatMessageList의 break-all 추가는 아바타 색상 통합과 직접 관련이 약한 별도 UI 수정입니다.	불필요한 레이아웃 변경이면 제거하고, 꼭 필요하다면 별도 이슈로 분리해 주세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 아바타 색상 로직을 shared로 통합하고 userId 기준으로 바꾸는 핵심 변경을 잘 요약합니다.
Description check	✅ Passed	요구 템플릿의 주요 섹션(작업 내용/결과/변경 사항/테스트/체크리스트/이슈)을 모두 포함해 충분히 작성됐습니다.
Linked Issues check	✅ Passed	색상 유틸을 shared로 승격하고 각 소비처를 userId 기준으로 통일해 #70의 완료 기준을 충족합니다.

✨ 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 fix/#70/unify-avatar-color

---

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

[seongjinss555]

확인했습니다~ 고생하셨습니다!