Skip to content

[feat] Avatar 컴포넌트 및 프로필 이미지 통합 - #49

Merged
ysw789 merged 16 commits into
devfrom
feat/alt-248
Jun 11, 2026
Merged

[feat] Avatar 컴포넌트 및 프로필 이미지 통합#49
ysw789 merged 16 commits into
devfrom
feat/alt-248

Conversation

@ysw789

@ysw789 ysw789 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

ID

  • ALT-248

변경 내용

  • Avatar 공통 컴포넌트 및 기본 프로필 이미지 asset 추가
  • Manager/User 타입 및 API 어댑터에 profileImageUrl 필드 추가
  • Manager 기능에 Avatar 컴포넌트 적용
  • User 기능에 Avatar 컴포넌트 적용
  • Shared UI 및 프로필 컴포넌트에 Avatar 적용
  • 남은 이미지 처리 코드 정리 및 불필요한 SubstituteProfileAvatar 제거

구현 사항

  • Avatar 컴포넌트: 사이즈 조정, 폴백 옵션(person/neutral), 이미지 로드 오류 처리를 포함한 공통 컴포넌트로 프로필 이미지 표시를 일원화
  • 기본 프로필 이미지: SVG 기본 프로필 asset을 추가해 이미지가 없거나 로드 실패 시 폴백으로 사용
  • 타입 및 API: Manager/User 타입과 API 어댑터에 profileImageUrl 필드를 추가해 서버 응답의 프로필 이미지를 전달
  • 적용 범위:
    • Manager: WorkerImageCard, StoreWorkerListItem
    • User: SubstituteRequestCard, DetailView, 워크스페이스 멤버 목록
    • Shared: WorkerListItem, ProfileCard
  • 정리: 중복 역할이던 SubstituteProfileAvatar를 제거해 프로필 이미지 처리 경로를 Avatar로 통일

시연

2026-06-11.11.36.59.mov

작업 문서

Summary by CodeRabbit

  • 리팩토링

    • 앱 전반의 프로필 이미지 표시를 통합된 Avatar로 교체해 관리자 화면, 근무자 목록, 대체 요청, 멤버 페이지, 프로필 편집 등에서 아바타 표시가 일관되고 시각적으로 개선됩니다.
    • 대체 요청·워크스페이스 등에서 프로필 이미지가 누락될 때 null로 정규화되어 표시 안정성이 향상되었습니다.
  • 기타

    • 저장소 구성(추적 제외 항목) 업데이트되었습니다.

@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
alter-client Ready Ready Preview, Comment Jun 11, 2026 2:51am

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@ysw789, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 7 minutes and 51 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d95c56a2-1d81-4f6a-b318-e79ceb2ff1cc

📥 Commits

Reviewing files that changed from the base of the PR and between b0c4360 and c9dcb02.

📒 Files selected for processing (4)
  • src/features/manager/worker-list/ui/WorkerListItem.tsx
  • src/features/user/substitute/lib/adaptUserSubstituteRequest.ts
  • src/pages/user/substitute-request/components/SubstituteRequestCard.tsx
  • src/shared/ui/common/Avatar.tsx
📝 Walkthrough

Walkthrough

공유 Avatar 컴포넌트를 추가하고 타입/어댑터/컴포넌트 전반에서 profileImageUrl 흐름을 연결해 인라인 이미지 마크업을 Avatar로 교체했습니다.

Changes

프로필 이미지 표시 표준화

Layer / File(s) Summary
Shared Avatar 컴포넌트 기초
src/shared/ui/common/Avatar.tsx
새로운 공유 Avatar 컴포넌트는 src/alt/size/fallback/className을 지원하며, 로딩 실패 시 기본 프로필 이미지로 대체됩니다.
프로필 이미지 데이터 모델 확장
src/features/manager/home/types/worker.ts, src/features/user/substitute/types.ts, src/features/user/home/workspace/types/workspaceMembers.ts, ...
여러 DTO와 뷰모델에 profileImageUrl?: string | null / imageUrl?: string | null 필드를 추가했습니다.
DTO 매퍼에서 profileImageUrl 매핑
src/features/manager/home/lib/worker.ts, src/features/user/home/workspace/api/workspaceMembers.ts
어댑터에서 DTO의 profileImageUrl을 UI 모델로 매핑하고 undefined/null 처리를 정규화했습니다.
매니저 기능 영역 Avatar 마이그레이션
src/features/manager/home/ui/StoreWorkerListItem.tsx, src/features/manager/home/ui/TodayWorkerList.tsx, src/features/manager/worker-list/ui/WorkerListItem.tsx
매니저 관련 UI 컴포넌트 3곳에서 div/img 기반 아바타 렌더링을 Avatar로 교체했습니다.
공유 UI 컴포넌트 Avatar 적용
src/shared/ui/home/WorkerListItem.tsx, src/shared/ui/manager/SubstituteApprovalCard.tsx, src/shared/ui/manager/WorkerImageCard.tsx, ...
재사용 컴포넌트들의 이미지 영역을 Avatar로 표준화했습니다.
대타 요청 관련 마이그레이션
src/pages/user/substitute-request/components/SubstituteRequestCard.tsx, SubstituteRequestDetailView.tsx, SubstituteStoreSelectModal.tsx
SubstituteProfileAvatar 사용을 중단하고 모든 관련 컴포넌트에서 Avatar를 사용하도록 변경했습니다.
사용자 프로필 페이지 Avatar 교체
src/pages/my/components/ProfileCard.tsx, src/pages/my/profile/index.tsx
개인 프로필 카드/편집 페이지에서 기존 img/div 기반 렌더링을 Avatar로 교체했습니다.
워크스페이스 멤버 목록 통합
src/pages/user/workspace-detail/index.tsx, src/pages/user/workspace-members/components/ManagersSection.tsx, WorkersSection.tsx
WorkerListItem에 imageUrl을 전달하고 Managers/Workers 섹션에서 profileImageUrl을 Avatar로 렌더링하도록 통합했습니다.
근무자 선택 섹션
src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx
placeholder 아바타를 제거하고 실제 worker.profileImageUrl을 사용하는 Avatar로 교체했습니다.
대타 어댑터 및 테스트
src/features/user/substitute/lib/adaptUserSubstituteRequest.ts, .../adaptUserSubstituteRequest.test.ts
sent/received 대타 매핑에서 이미지 선택 로직(resolveSentPersonImage)을 추가하고, 관련 단위 테스트를 추가했습니다.
저장소 설정
.gitignore
.serena, CLAUDE.md, .claude 항목을 무시하도록 추가했습니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • alter-app/alter-client#7: 메인 PR이 src/shared/ui/manager/SubstituteApprovalCard.tsxsrc/shared/ui/manager/WorkerImageCard.tsx에서 기존 아바타 렌더링을 공용 Avatar로 교체한 변경은, 검색된 PR #7에서 해당 컴포넌트들을 추가한 작업과 동일 코드 경로/컴포넌트에 직접적으로 이어져 관련됩니다.
  • alter-app/alter-client#37: 검색된 PR #37이 대타 요청 페이지/컴포넌트(SubstituteRequestCard/DetailView/StoreSelectModal 등)와 SubstituteProfileAvatar를 추가한 흐름 위에서, 메인 PR이 동일 컴포넌트들에서 SubstituteProfileAvatar 대신 공용 AvatarprofileImageUrl 매핑을 연결하도록 변경했습니다.
  • alter-app/alter-client#34: 메인 PR이 src/pages/manager/worker-schedule/components/WorkerSelectSection.tsx에서 더미 WorkerAvatar를 제거하고 공용 Avatar(예: worker.profileImageUrl)로 바꾸는 반면, 검색된 PR은 해당 파일/컴포넌트를 고정 스케줄 관리 페이지 흐름에 새로(더미 아바타 포함) 추가해 같은 컴포넌트 구현을 서로 직접 건드려 연관됩니다.

Suggested reviewers

  • limtjdghks
  • dohy-eon
  • kim3360
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 5.71% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 변경의 핵심(Avatar 컴포넌트 추가 및 프로필 이미지 통합)을 명확하게 요약하고 있습니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed PR 설명이 필수 템플릿 항목을 충실히 포함하고 있으며, 변경 내용과 구현 사항이 명확하게 기술되어 있습니다.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/alt-248

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@ysw789

ysw789 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

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

Inline comments:
In
`@src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx`:
- Around line 108-112: The Avatar in SubstituteRequestDetailView is missing the
src prop so it always renders the default image; update the Avatar usage to pass
the profile image (e.g., src={detail.imageUrl} or src={detail.avatarUrl}) and
include a safe fallback (e.g., undefined or a placeholder) when detail.imageUrl
is falsy; locate the Avatar JSX inside SubstituteRequestDetailView and add the
src prop referencing the appropriate detail field to ensure the user's profile
image is displayed.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 51f69117-f653-4779-b995-15aa12e7004d

📥 Commits

Reviewing files that changed from the base of the PR and between 9a33315 and 2e5fb9f.

⛔ Files ignored due to path filters (1)
  • src/assets/default-profile.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • .gitignore
  • src/features/manager/home/lib/worker.ts
  • src/features/manager/home/types/worker.ts
  • src/features/manager/home/ui/StoreWorkerListItem.tsx
  • src/features/manager/home/ui/TodayWorkerList.tsx
  • src/features/manager/worker-list/ui/WorkerListItem.tsx
  • src/features/user/home/workspace/api/workspaceMembers.ts
  • src/features/user/home/workspace/types/workspaceMembers.ts
  • src/pages/manager/substitute-request/index.tsx
  • src/pages/my/components/ProfileCard.tsx
  • src/pages/my/profile/index.tsx
  • src/pages/user/substitute-request/components/SubstituteProfileAvatar.tsx
  • src/pages/user/substitute-request/components/SubstituteRequestCard.tsx
  • src/pages/user/substitute-request/components/SubstituteRequestDetailView.tsx
  • src/pages/user/substitute-request/components/SubstituteStoreSelectModal.tsx
  • src/pages/user/workspace-detail/index.tsx
  • src/pages/user/workspace-members/components/ManagersSection.tsx
  • src/pages/user/workspace-members/components/WorkersSection.tsx
  • src/shared/ui/common/Avatar.tsx
  • src/shared/ui/home/WorkerListItem.tsx
  • src/shared/ui/manager/SubstituteApprovalCard.tsx
  • src/shared/ui/manager/WorkerImageCard.tsx
💤 Files with no reviewable changes (1)
  • src/pages/user/substitute-request/components/SubstituteProfileAvatar.tsx

@ysw789

ysw789 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ysw789

ysw789 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ysw789
ysw789 marked this pull request as ready for review June 10, 2026 04:37
@ysw789 ysw789 self-assigned this Jun 10, 2026
@ysw789

ysw789 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@dohy-eon dohy-eon left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하 뭔가 빡세게 리뷰 달아야지 생각했는데 클로드한테 진 기분이네요.. 추가로 로컬에서 실행하는 영상도 같이 첨부해주시면 좋겠습니다. 수고 많으셨습니다.. 👍

Comment thread src/features/user/substitute/lib/adaptUserSubstituteRequest.ts Outdated
Comment thread src/shared/ui/common/Avatar.tsx
Comment thread src/shared/ui/home/WorkerListItem.tsx
Comment thread .gitignore

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

마지막으로 순수 궁금증,,, 저는 클로드는 글로벌(~/.gitignore_global)로 따로 빼두는 편인데 요거 보통 공유해서 쓰시나요?

아님 루트에 놓고 쓰는게 편한데 깃헙에 올리기는 좀 그래서 추가하셨나여?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

별다른 이유는 없고 공용으로 만들어서 팀에서 공유하는 경우도 있고 스킬은 자기 입맛에 따라 바꿔서 쓰는 경우도 있어서 내부적으로 정해서 쓰면 될듯용~

@dohy-eon dohy-eon left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@ysw789
ysw789 merged commit 3f6edac into dev Jun 11, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants