SKRF-141 design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용 #19

colorkite10 · 2023-10-25T02:27:01Z

📝요구사항과 구현내용

아바타 공통 컴포넌트를 구현했습니다.
avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium'

rectangle: 사이드바 유저 프로필
normal: 제일 많이 쓰이는 크기
large: 클럽 생성 혹은 유저 프로필 사진 업로드 시, isEdit:true와 함께 쓰임
medium: 클럽 프로필

구현 스크린샷

✨pr포인트 & 궁금한 점

피그마 기준으로 만들긴 했는데 생각보다 이미지 사이즈들이 다 커서 조정할 필요가 있어 보입니다.
새 리팩토링 브랜치로 리액트아이콘 적용하겠습니다! 리팩토링 적용 후 컴포넌트 사용법도 주석으로 달아 놓을까요?
@SongInjae 충돌이 InputForm 컴포넌트끼리 난 것 같은데 혹시 충돌 해결 가능하실까요? 🙋‍♀️

hyesung99

고생하셨습니다 채연님! 리뷰에대한 질문있으시면 언제든 말해주세요b
주석은 지양하기로 컨벤션에서 정했으니까 최대한 코드로 표현할 수 있게 만들면 좋을것 같아요!

hyesung99 · 2023-10-25T03:45:12Z

src/components/common/Avatar/Avatar.style.ts

+const ProfileImageStyled = styled.img<AvatarProps>`
+  position: relative;
+  width: ${({ avatarShape }) => getAvatarSize(avatarShape)};
+  height: ${({ avatarShape }) => getAvatarSize(avatarShape)};
+  border-radius: ${({ avatarShape }) => (avatarShape === 'rectangle' ? '1.7rem' : '50%')};
+  object-fit: cover;
+  cursor: pointer;
+`;


벌써 이모션 사용법을 익히셨군요!b

p4;
cursor: pointer는 모든 아바타가 클릭 가능하기 때문일까요??
제 생각엔 클릭 못하는 아바타도 있을것 같아요! ex)프로필페이지에서 아바타

@colorkite10 +추가의견
그래서 아바타가 cursor를 결정하기보다는
children으로 프로필로 옮겨갈 수 있는 Link컴포넌트를 받는건 어떨까요?
그 Link컴포넌트에 cursor를 설정하는거죠!

우선 추후 접수임니다!

hyesung99 · 2023-10-25T03:49:54Z

src/components/common/Avatar/Avatar.tsx

+  }
+};
+
+const Avatar = ({ avatarShape, profileImage, isEdit, onClick }: AvatarProps) => {


p3;
profileImage보다는 좀 더 명확하게 profileImageSrc는 어떨까요?

hyesung99 · 2023-10-25T04:16:51Z

src/components/common/Avatar/Avatar.tsx

+const getAvatarSize = (avatarShape: AvatarProps['avatarShape']) => {
+  switch (avatarShape) {
+    case 'small':
+      return '1.5rem';
+    case 'normal':
+      return '4rem';
+    case 'rectangle':
+      return '4.5rem';
+    case 'medium':
+      return '6.875rem';
+    case 'large':
+      return '16.3rem';
+    default:
+      return '4rem';
+  }
+};


p2;
getAvatarSize가 두 파일에 각각 선언되어 있네요! 컴포넌트 외부에 함수를 선언하기보다는 uitils폴더에 만들면 코드 가독성이 더 좋아질 것 같아요! 모듈화하면 다른 컴포넌트에서도 재사용할 수 있다는 장점이 있구요!

utils폴더에 만드려다가 utils내부 폴더 구조를 어떻게 작성할지 고민되어서 안 해버렸네요... 하하! util함수들을 어떻게 묶어서 폴더로 만들까요?

저는 utils는 여러 도메인에서 사용할 수 있을것 같아서 폴더구조 생성안하고 그냥 파일로했어요!

hyesung99 · 2023-10-25T04:20:22Z

src/components/common/Avatar/Avatar.tsx

+  const width = getAvatarSize(avatarShape);
+  const height = getAvatarSize(avatarShape);


p3;

const width = height = getAvatarSize(avatarShape);

이렇게 표현할수도있어요! 함수호출을 한번만 해도 되는거죠..!

p2;
그리고 style파일 안에서 이미 avatarShape을 기준으로 width와 height를 계산하고 있어서 여기서 한번 더 하는 이유가 없을듯 하네요...!
제가 잘못이해했다면 댓글남겨주세요^.^!

여기서 받는 이유는 리액트 아이콘의 기본이미지 아이콘 크기를 설정해주기 위함이었습니다! 이 부분은 라이브러리 이용 후 확인해보겠습니다

hyesung99 · 2023-10-25T04:23:30Z

src/components/common/Avatar/Avatar.tsx

+import { AvatarContainerStyled, EditButtonStyled, ProfileImageStyled } from './Avatar.style';
+
+interface AvatarProps {
+  avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium';


p4;
avatarType은 어떨까요?

뭔가 타입스크립트의 타입이랑 헷갈릴 것 같아서 shape으로 지정했습니다!

hyesung99 · 2023-10-25T04:31:40Z

src/components/common/Avatar/Avatar.tsx

+        {profileImage ? (
+          <ProfileImageStyled
+            avatarShape={avatarShape}
+            src={profileImage}
+            alt="profile image"
+            style={{ width: `${width}`, height: `${width}` }}
+          />
+        ) : (
+          <img
+            src="https://picsum.photos/200/300"
+            width={width}
+            height={height}
+            style={{ width: `${width}`, height: `${width}` }}
+            alt="리액트 아이콘 기본이미지로 바꿀 부분"
+          />
+        )}


Suggested change

{profileImage ? (

<ProfileImageStyled

avatarShape={avatarShape}

src={profileImage}

alt="profile image"

style={{ width: `${width}`, height: `${width}` }}

/>

) : (

<img

src="https://picsum.photos/200/300"

width={width}

height={height}

style={{ width: `${width}`, height: `${width}` }}

alt="리액트 아이콘 기본이미지로 바꿀 부분"

/>

)}

<ProfileImageStyled

avatarShape={avatarShape}

src={profileImage ? profileImage : '기본이미지'}

alt="profile image"

/>

이렇게 줄일수 있지 않을까요?

hyesung99 · 2023-10-25T04:33:39Z

src/components/common/Avatar/Avatar.tsx

+interface AvatarProps {
+  avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium';
+  profileImage?: string;
+  isEdit?: boolean;


p5;
isEditable은 어떨까요?

hyesung99 · 2023-10-25T06:38:05Z

src/components/common/Avatar/Avatar.tsx

+interface AvatarProps {
+  avatarShape: AvatarShapeType['avatarShape'];
+  profileImageSrc?: string;
+  isEditable?: boolean;
+  onClick?: () => void;
+}


@colorkite10 p1;
채연님도 onClick에 대한 타입 정의때문에 고민 많이 하셨을 것 같아요!

Suggested change

interface AvatarProps {

avatarShape: AvatarShapeType['avatarShape'];

profileImageSrc?: string;

isEditable?: boolean;

onClick?: () => void;

}

interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {

avatarShape: AvatarShapeType['avatarShape'];

profileImageSrc?: string;

isEditable?: boolean;

}

이렇게 하면 onClick의 타입을 HTMLDivElement에서 상속받아 사용할 수 있습니다!

1.HTMLDivElement 설명 https://developer.mozilla.org/ko/docs/Web/API/HTMLDivElement
2.HTMLDIvElement에 선언된 타입들
https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.htmldivelement.html#onclick

오옹~ 저도 활용해야겠군요! 꿀팁 감사합니다

SongInjae

고생하셨습니다:)

SongInjae · 2023-10-25T06:43:43Z

src/components/common/Avatar/Avatar.tsx

+interface AvatarProps {
+  avatarShape: AvatarShapeType['avatarShape'];
+  profileImageSrc?: string;
+  isEditable?: boolean;
+  onClick?: () => void;
+}


오옹~ 저도 활용해야겠군요! 꿀팁 감사합니다

SongInjae

고생하셨습니다:)

hyesung99

찐승인

design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용

82d57a5

colorkite10 requested review from hyesung99 and SongInjae October 25, 2023 02:27

colorkite10 self-assigned this Oct 25, 2023

hyesung99 requested changes Oct 25, 2023

View reviewed changes

colorkite10 added 6 commits October 25, 2023 14:25

refactor: 클릭하지 못하는 아바타 설정, 편집버튼 크기 조정

434f21c

fix: 편집버튼 prop 추가

703f582

refactor: profileImage->profileImageSrc

769d2b0

refactor: util함수 분리, 아바타 모양 타입 분리

e0cfee4

fix: 안 쓰는 import 제거

44ffb76

conflict: user타입에 User interface추가

9d767af

hyesung99 requested changes Oct 25, 2023

View reviewed changes

SongInjae previously approved these changes Oct 25, 2023

View reviewed changes

Merge branch 'main' into SKRF-141-design-avatar-component

7841ca6

SongInjae dismissed their stale review via 7841ca6 October 25, 2023 06:50

hyesung99 previously approved these changes Oct 25, 2023

View reviewed changes

refactor: onClick 타입 재설정

db7c52a

colorkite10 dismissed hyesung99’s stale review via db7c52a October 25, 2023 07:12

SongInjae approved these changes Oct 25, 2023

View reviewed changes

hyesung99 approved these changes Oct 25, 2023

View reviewed changes

colorkite10 merged commit 94f78c6 into main Oct 25, 2023
2 checks passed

colorkite10 deleted the SKRF-141-design-avatar-component branch October 25, 2023 07:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SKRF-141 design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용 #19

SKRF-141 design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용 #19

colorkite10 commented Oct 25, 2023 •

edited

Loading

hyesung99 left a comment

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

colorkite10 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

colorkite10 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

colorkite10 Oct 25, 2023

hyesung99 Oct 25, 2023

colorkite10 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

hyesung99 Oct 25, 2023

SongInjae Oct 25, 2023

SongInjae left a comment

SongInjae Oct 25, 2023

SongInjae left a comment

hyesung99 left a comment

		const width = getAvatarSize(avatarShape);
		const height = getAvatarSize(avatarShape);

SKRF-141 design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용 #19

SKRF-141 design: 아바타 공통 컴포넌트 구현-리액트 아이콘 미사용 #19

Conversation

colorkite10 commented Oct 25, 2023 • edited Loading

📝요구사항과 구현내용

구현 스크린샷

✨pr포인트 & 궁금한 점

hyesung99 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SongInjae left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SongInjae left a comment

Choose a reason for hiding this comment

hyesung99 left a comment

Choose a reason for hiding this comment

colorkite10 commented Oct 25, 2023 •

edited

Loading