feat: 오늘의 스터디 카드에서 면접관/면접자 프로필 클릭 시 유저 프로필 모달 열림 기능 추가#108
Conversation
| } | ||
| /> | ||
| ) : ( | ||
| <InfoBox |
There was a problem hiding this comment.
디자인이 면접관일 경우에만 표시되도록 되어 있어서 면접관만 표시해두도록 했었지만 좀 의아한 부분이 있었는데,
수정해주신대로 사용자에 맞게 바꿔서 보여주는 게 더 좋은 것 같습니다b
There was a problem hiding this comment.
추가적으로 제안드리고 싶은 부분은
공통 구조는 한 번만 작성하고, 바뀌는 값만 조건 분기하는 쪽으로 가는 건 어떠신가요?
<InfoBox
label={isInterviewee ? '면접관' : '면접자'}
value={
<div className="border-border-default bg-background-default flex items-center gap-100 rounded-full border px-100 py-50">
<UserProfileModal
memberId={
isInterviewee
? todayStudyData.interviewerId
: todayStudyData.intervieweeId
}
...
이런 식으로 바뀌는 값만 조건 분기해서 작성하면 이후 div 클래스나 스타일이 바뀌는 경우 한 곳만 고쳐도 되어 조금 더 유지보수에 좋아질 것 같아 제안드립니다.
There was a problem hiding this comment.
좋습니다. 테스트 해보면서 작업할 수 있는 상황이 아니다보니 보수적으로 진행했는데, 이 방식이 더 맞다고 생각합니다. 수아님까지 확인하시고 나면 이 부분까지 반영해볼게요
| // TODO: FSD 의 import 바운더리를 넘어서 import 해야하는데, | ||
| // 해당 UI를 shared 등으로 빼던지 수정 필요 |
There was a problem hiding this comment.
혹시 이 주석에 대해 다시 한 번 설명해주실 수 있을까요?!
There was a problem hiding this comment.
FSD 구조에서 서로다른 features 에서는 import 하는 것이 맞지 않는 것 같은데, 현재 feature/study 에서 feature/my-page 에서 컴포넌트를 불러오고 있어서요. 이 부분 문제가 되는 것 같아서 추후에 작업해야하지 않을까 해서 적어뒀습니다.
제가 잘못 알고 있다면 정정해주셔도 괜찮아요!
src/shared/ui/avatar/index.tsx
Outdated
| </Avatar> | ||
| ); | ||
| } | ||
| const UserAvatar = forwardRef<HTMLSpanElement, UserAvatarProps>( |
There was a problem hiding this comment.
저희 react 19 써서 ref로 prop을 내려줘도 될 것 같은데, forwardRef 쓰신 이유가 있으실까요?!
There was a problem hiding this comment.
음 그러네요! React 19 에서 해당 API를 deprecate 한 지 몰라서 이전에 작업하던 방식으로 진행했습니다.
이 부분 수정해볼게요!
- today-study-card body 렌더링 부분 리팩토링 - user-avatar forwardRef 삭제 - modal 컴포넌트 description 부재에 관련한 접근성 워닝 제거
3 participants
🌱 연관된 이슈
https://goodmorning-cs-study.slack.com/archives/C082V7MQPB2/p1753717452394839
오늘의 스터디 카드 (스터디 매칭 진행 된 이후 오늘의 스터디 리스트 상위에 생성되는 항목) 에서 매칭된 면접자/면접관 프로필이미지
클릭 시, 해당 유저의 프로필 팝업을 띄우는 기능 추가
☘️ 작업 내용
🍀 참고사항
1. UserAvatar 컴포넌트를 리팩토링 했습니다.
기존에 단순히 default props 와 default image 분기 로직만을 추가해 래핑해서 사용하는 방식이었는데, modal 등과 결합해서 사용할 때 Radix 가 기대하는 방식을 만족하지 못해 (props 와 ref 를 넘겨주지 않아 Trigger 등으로 props 가 합성되서 사용될 수 없는 방식) 추가적으로 불필요한 HTML 태그를 필요로 해서 해당 부분을 forwardRef 처리 하고 props 를 넘겨주는 방식으로 UserAvatar 만을 넘겨주어도 사용가능 하도록 수정했습니다.
2. 면접관 / 면접자 분기를 추가했습니다.
UI 가 사용하는 유저가 면접자일 경우만을 렌더링하고 있는 것 같아, 백엔드 데이터에 맞게 분기를 하나 더 추가했습니다.
3. 해당 기능의 실제 작동을 확인하기 위해서는 매칭이 진행 된 유저가 필요한 상황입니다.
우선은 관련 UI 와 API 를 mocking 처리하고 개발 진행했습니다. 확인 가능한 분이 계시면 확인 진행해주시면 감사하겠습니다.
추가
지라 로그인이 계속 인증을 요구하는 상황이라 티켓 발행을 하지 않고 우선 진행했습니다.
➕ 추가 커밋