Skip to content

[✨ Feat/#64] Profile 컴포넌트 구현#65

Merged
Lseojeong merged 7 commits into
devfrom
feat/#64
Jul 5, 2026
Merged

[✨ Feat/#64] Profile 컴포넌트 구현#65
Lseojeong merged 7 commits into
devfrom
feat/#64

Conversation

@Lseojeong

@Lseojeong Lseojeong commented Jul 5, 2026

Copy link
Copy Markdown
Member

#️⃣연관된 이슈

체크 사항

  • UI 동작 및 레이아웃 확인
  • 불필요한 console 제거
  • 기능 정상 동작
  • 팀 컨벤션에 맞게 구현했는지
  • 관련 문서 또는 주석을 갱신했는지

📝작업 내용

사용자 프로필 컴포넌트 추가

  • 백엔드에서 전달받는 사용자 이름과 프로필 이미지 URL을 표시하는 Profile 컴포넌트를 추가했습니다.
  • 프로필 이미지는 헤더 노출을 고려해 next/image를 사용하고 loading="eager", fetchPriority="high"를 적용했습니다.

Storybook 예시 추가

  • Profile 컴포넌트 Storybook 문서를 추가했습니다.
  • inline SVG mock 이미지를 사용하도록 했습니다.

프로필 이미지 호스트 TODO 추가

  • 백엔드 프로필 이미지 호스트 확정 후 images.remotePatterns에 허용 도메인을 추가해야 한다는 TODO를 next.config.ts에 남겼습니다.

스크린샷 (선택)

image

추가한 라이브러리 (선택)

없음

💬리뷰 요구사항(선택)

  • 없음

Summary by CodeRabbit

  • New Features
    • 사용자 프로필을 표시하는 프로필 컴포넌트와 프로필 타입이 공개되었습니다.
    • 프로필 컴포넌트 Storybook 스토리가 추가되어 기본 및 대체 이미지 상태를 시각적으로 확인할 수 있습니다.
  • Bug Fixes
    • 프로필 이미지 로드 실패 시 대체 이미지로 자동 전환되도록 개선했습니다.
  • Chores
    • 기본 프로필 이미지 자산을 공유용으로 정리해 제공하고, PNG 임포트 타입을 Next.js용으로 보강했습니다.

@Lseojeong Lseojeong self-assigned this Jul 5, 2026
@Lseojeong Lseojeong added the ✨Feature 새로운 기능 구현 label Jul 5, 2026
@Lseojeong Lseojeong linked an issue Jul 5, 2026 that may be closed by this pull request
5 tasks
@vercel

vercel Bot commented Jul 5, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
rewrite Ready Ready Preview, Comment Jul 5, 2026 7:53am

@coderabbitai

coderabbitai Bot commented Jul 5, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 352b6ebe-dbc0-479f-bca8-7f810d77a36a

📥 Commits

Reviewing files that changed from the base of the PR and between a0b9cba and b12c415.

📒 Files selected for processing (1)
  • src/shared/types/images.d.ts
✅ Files skipped from review due to trivial changes (1)
  • src/shared/types/images.d.ts

Walkthrough

UserProfile 타입, 프로필 이미지 폴백 처리, Profile 컴포넌트, Storybook 스토리, 공개 export가 추가되었습니다. 기본 프로필 이미지 자산 export와 next.config.ts의 이미지 도메인 TODO 주석도 포함됩니다.

Changes

User Profile 컴포넌트 구현

Layer / File(s) Summary
타입과 공개 진입점
src/entities/user/model/types.ts, src/entities/user/index.ts, src/shared/assets/images/index.ts, src/shared/types/images.d.ts
UserProfile 인터페이스가 추가되고, ProfileUserProfile이 모듈 진입점에서 export되며, 기본 프로필 이미지와 PNG 타입 선언이 추가됩니다.
프로필 이미지 폴백
src/entities/user/ui/ProfileImage.tsx
next/image 기반 ProfileImage가 추가되고, 이미지 로드 실패 시 fallbackSrc로 전환하는 상태와 onError 처리가 들어갑니다.
Profile 렌더링
src/entities/user/ui/Profile.tsx
UserProfile을 기반으로 ProfileProps를 정의하고, 기본 폴백 이미지와 대체 alt 텍스트를 적용해 프로필 이미지와 이름을 함께 렌더링합니다.
스토리와 설정 주석
src/entities/user/ui/Profile.stories.tsx, next.config.ts
기본 렌더와 폴백 상태를 보여주는 Storybook 스토리가 추가되고, 이미지 원격 도메인 추가 TODO 주석이 next.config.ts에 들어갑니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Profile
  participant ProfileImage
  participant NextImage

  Profile->>ProfileImage: src, fallbackSrc, alt 전달
  ProfileImage->>NextImage: 현재 imageSrc로 렌더링
  NextImage-->>ProfileImage: onError 발생
  ProfileImage->>ProfileImage: failedImageSrc 저장
  ProfileImage->>NextImage: fallbackSrc로 다시 렌더링
Loading

Related issues: #64 [✨ Feature] Header Profile 컴포넌트 구현

Suggested labels: feature, frontend, entities/user

Suggested reviewers: 팀 리뷰어 확인 필요

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 Profile 컴포넌트 구현이라는 핵심 변경을 간결하게 잘 요약합니다.
Linked Issues check ✅ Passed 프로필 이미지, 기본 이미지(Fallback), 사용자 이름 표시, Storybook 작성 요구사항을 모두 충족합니다.
Out of Scope Changes check ✅ Passed 추가된 타입 선언과 이미지 설정 보완은 Profile 컴포넌트 구현을 위한 범위 안의 변경입니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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/#64

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

@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown

🧪 테스트 결과

항목 결과
✅ Jest 테스트 success

@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown

🚦 CI 검증 결과

항목 결과
🧠 TypeScript 타입 체크 success
🧹 ESLint 검사 success
🎨 Prettier 검사 success
🏗️ Build 검증 success

@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/entities/user/ui/Profile.tsx`:
- Around line 32-40: The Profile image rendering in Profile.tsx is missing
fallback handling for failed profileImageUrl loads. Update the Image usage in
the Profile component to provide a default avatar source when the primary image
fails, using a stable handler such as an onError-based fallback or equivalent
state in the Profile component. Make sure the fallback is wired through the
existing image props/variables like profileImageUrl and imageAlt so broken
remote images do not render.
🪄 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: a72c258f-c916-453d-97b3-04471d70212e

📥 Commits

Reviewing files that changed from the base of the PR and between 0ad8f3e and 568ba54.

📒 Files selected for processing (5)
  • next.config.ts
  • src/entities/user/index.ts
  • src/entities/user/model/types.ts
  • src/entities/user/ui/Profile.stories.tsx
  • src/entities/user/ui/Profile.tsx

Comment thread src/entities/user/ui/Profile.tsx Outdated

@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/shared/assets/images/index.ts`:
- Around line 1-3: The build is failing because the DefaultProfileImage import
in the assets index points to a missing PNG module. Verify the image asset
actually exists and is committed, then either restore the missing file or update
the import path in the DefaultProfileImage export to the correct location so
TypeScript can resolve it during build.
🪄 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: 567d2f17-6f50-4da7-9234-8a51f662c7d7

📥 Commits

Reviewing files that changed from the base of the PR and between 568ba54 and a0b9cba.

⛔ Files ignored due to path filters (1)
  • src/shared/assets/images/img-default-profile.png is excluded by !**/*.png
📒 Files selected for processing (4)
  • src/entities/user/ui/Profile.stories.tsx
  • src/entities/user/ui/Profile.tsx
  • src/entities/user/ui/ProfileImage.tsx
  • src/shared/assets/images/index.ts

Comment thread src/shared/assets/images/index.ts
@Lseojeong Lseojeong merged commit 54c28b5 into dev Jul 5, 2026
5 checks passed
@Lseojeong Lseojeong deleted the feat/#64 branch July 5, 2026 07:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨Feature 새로운 기능 구현

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[✨ Feature] Header Profile 컴포넌트 구현

1 participant