Feat: user profile Avatar 공통 컴포넌트 구현 #15
Open
+35
−1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
seobbang
approved these changes
Jan 24, 2025
Comment on lines
+3
to
+6
| type UserProfileAvatarProps = Omit< | ||
| AvatarProps, | ||
| "radius" | "variant" | "color" | "fallback" | ||
| >; |
There was a problem hiding this comment.
연서언니가 달아준 제 pr 코리 내용에서의 이점과 결론처럼 interface 사용하는건 어떤가용?
Suggested change
| type UserProfileAvatarProps = Omit< | |
| AvatarProps, | |
| "radius" | "variant" | "color" | "fallback" | |
| >; | |
| interface UserProfileAvatarProps extends Omit< | |
| AvatarProps, | |
| "radius" | "variant" | "color" | "fallback" | |
| >{}; |
이것도 강제할 필요까지는 없겠지만 컨벤션 얘기할 때 한 번 얘기하고 가면 좋겠네요 ㅎㅎ
| "radius" | "variant" | "color" | "fallback" | ||
| >; | ||
|
|
||
| const UserProfileAvatar = ({ ...props }: UserProfileAvatarProps) => { |
There was a problem hiding this comment.
여긴 다른 prop이 없어서 이렇게 해도 괜찮을 것 같네용
개인 취향이니 참고만 해주셔요!
Suggested change
| const UserProfileAvatar = ({ ...props }: UserProfileAvatarProps) => { | |
| const UserProfileAvatar = (props: UserProfileAvatarProps) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
close #13
☑️ 완료 태스크
🔎 PR 내용
UserProfileAvatar component
<UserProfileAvatar>라고 네이밍 했습니다!prop: radix의 Avatar 컴포넌트 props 중, 공통으로 고정해두고 사용할 속성(radius, varaint, color, fallback) 제외한 prop들(radix) Avatar 컴포넌트의 세부 동작
➡ img 관련 attribute들 (ex. alt 등) 적용 가능
➡ 이 span 태그의 background === color prop에 의존하므로, 로딩 시 color prop으로 지정해준 색상의 태그가 보여지게 됨 (스켈레톤처럼 동작!)
🙋🏻♀️ 논의가 필요한 점
color prop으로 gray가 적절할지?: Avatar 컴포넌트 설계 구조상, 스켈레톤 동작처럼 이미지 source가 로드되기 전까지 color에 넘겨준 color 값으로 보여지게 되어요.
이때 넘길 수 있는 값이 enum으로 제한되어 있어, gray scale 색상으로 사용하기로 한 Slate 색상을 사용할수 없어 gray로 지정했는데 어떤것 같나욤?
다른 main color를 사용하는것보다 gray 계열을 사용하는 것이 자연스러운것 같아 우선 gray로 지정해놨어요
fallback img로 어떤걸 보여줄지: 요건 구두로 짧게 논의해보면 좋을것 같아 회의 안건으로 올려두겠습니둥~
📷 스크린샷
menu 페이지에 테스트 코드를 추가해두었습니당 (fallback인 경우 / 이미지를 성공적으로 받아왔을 경우)
2025-01-22.22.30.46.mov