Refactor(client): ProfilePopupPortal 컴포넌트 추가 및 변경#225
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
개요ProfilePopup 컴포넌트를 React Portal을 사용하여 document.body로 렌더링하는 ProfilePopupPortal 래퍼 컴포넌트를 추가하고, Sidebar에서 이를 사용하도록 변경했습니다. 기존 ProfilePopup은 형식 정리를 수행했습니다. 변경 사항
예상 코드 리뷰 노력🎯 2 (Simple) | ⏱️ ~10 분
관련 PR
제안 레이블
제안 리뷰어
시
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 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 |
jjangminii
changed the title
|
✅ Storybook chromatic 배포 확인: |
jjangminii
changed the title
constantly-dev
changed the title
| return createPortal( | ||
| <ProfilePopup | ||
| open={open} | ||
| onClose={onClose} | ||
| profileImage={profileImage} | ||
| email={email} |
There was a problem hiding this comment.
아예 포탈로 처리해서 해결하셨군요! 굿굿 확인했습니다 :)
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx (1)
49-49: Portal 사용 시 하드코딩된 위치값 검토 권장
pl-[19rem] pt-[7rem]와 같은 하드코딩된 위치값이 사용되고 있습니다. 이제document.body에 Portal로 렌더링되므로, 이러한 고정 오프셋이 다양한 화면 크기나 레이아웃 변경에 취약할 수 있습니다.향후 더 유연한 위치 지정 방식(예: 앵커 기반 위치 계산 또는 CSS 변수)을 고려해보시기 바랍니다.
apps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsx (1)
4-11: Props 타입 중복 제거 고려
ProfilePopupPortalProps가ProfilePopup.tsx의ProfilePopupProps와 동일한 구조를 가지고 있습니다. DRY 원칙을 위해 공통 타입을 추출하거나ProfilePopupProps를 export하여 재사용하는 것을 고려해보시기 바랍니다.🔎 제안하는 리팩토링
ProfilePopup.tsx에서 타입을 export:
-interface ProfilePopupProps { +export interface ProfilePopupProps { open: boolean; onClose: () => void; profileImage: string | null; email: string; name: string; remindTime?: string; }ProfilePopupPortal.tsx에서 재사용:
import { createPortal } from 'react-dom'; -import ProfilePopup from './ProfilePopup'; +import ProfilePopup, { type ProfilePopupProps } from './ProfilePopup'; -interface ProfilePopupPortalProps { - open: boolean; - onClose: () => void; - profileImage: string | null; - email: string; - name: string; - remindTime?: string; -} - export default function ProfilePopupPortal({ open, onClose, profileImage, email, name, remindTime, -}: ProfilePopupPortalProps) { +}: ProfilePopupProps) {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/client/src/shared/components/profilePopup/ProfilePopup.tsxapps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsxapps/client/src/shared/components/sidebar/Sidebar.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-15T20:00:13.756Z
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 80
File: apps/client/src/shared/components/ui/modalPop/ModalPop.tsx:36-41
Timestamp: 2025-07-15T20:00:13.756Z
Learning: In apps/client/src/shared/components/ui/modalPop/ModalPop.tsx, the InfoBox component uses hardcoded values for title, location, and icon URL as temporary test data. These should be replaced with dynamic data from props when implementing actual functionality and should be marked with TODO comments for future changes.
Applied to files:
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx
🧬 Code graph analysis (2)
apps/client/src/shared/components/sidebar/Sidebar.tsx (1)
apps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsx (1)
ProfilePopupPortal(13-34)
apps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsx (1)
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx (1)
ProfilePopup(16-83)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (4)
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx (2)
34-36: 코드 변경사항 승인이펙트 내에서 조건부로 이벤트 리스너를 추가하는 로직을 중괄호로 감싼 포맷팅 변경입니다. 동작에는 영향이 없으며 가독성이 개선되었습니다.
71-71: 좋은 정리입니다빈
className속성을 제거하여 불필요한 코드가 제거되었습니다.apps/client/src/shared/components/sidebar/Sidebar.tsx (1)
25-25: Portal 전환이 올바르게 구현되었습니다
ProfilePopup에서ProfilePopupPortal로의 전환이 정확하게 이루어졌습니다. 모든 필수 props가 올바르게 전달되고 있으며, Portal을 사용함으로써 z-index 스택 컨텍스트 문제를 방지할 수 있습니다.Also applies to: 250-257
apps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsx (1)
1-34: Portal 구현이 올바르게 작성되었습니다React Portal을 사용하여
ProfilePopup을document.body에 렌더링하는 표준 패턴이 정확하게 구현되었습니다. SSR 가드도 적절하게 추가되어 서버 사이드 렌더링 환경에서도 안전하게 동작합니다.React 19.1.1과의 호환성도 확인되었습니다.
constantly-dev
left a comment
constantly-dev
left a comment
There was a problem hiding this comment.
굿입니다~ 스프린트 작업 끝나면 12월 말중에 같이 모달 다시 개선해봅시다!
3 participants
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
fixed로만 해결하려했었는데 쌓임맥락에서 문제가 발생해 포탈로 변경했습니다
📷 Screenshot
Summary by CodeRabbit
릴리스 노트
스타일
리팩토링
✏️ Tip: You can customize this high-level summary in your review settings.