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

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

@@ -0,0 +1,30 @@
+import { AvatarShapeType } from '@/types/user';
+import { getAvatarSize } from '@/utils/getAvatarSize';
+import styled from '@emotion/styled';
+
+const AvatarContainerStyled = styled.div`
+  position: relative;
+  display: inline-flex;
+`;
+
+const ProfileImageStyled = styled.img<AvatarShapeType>`
+  position: relative;
+  width: ${({ avatarShape }) => getAvatarSize(avatarShape)};
+  height: ${({ avatarShape }) => getAvatarSize(avatarShape)};
+  border-radius: ${({ avatarShape }) => (avatarShape === 'rectangle' ? '1.7rem' : '50%')};
+  object-fit: cover;
+  cursor: ${({ avatarShape }) => (avatarShape === 'large' ? 'default' : 'pointer')};
+`;
+
+const EditButtonStyled = styled.div<AvatarShapeType>`
+  width: ${({ avatarShape }) => (avatarShape === 'large' ? '4rem' : '2rem')};
+  height: ${({ avatarShape }) => (avatarShape === 'large' ? '4rem' : '2rem')};
+  position: absolute;
+  right: 2%;
+  bottom: 2%;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 1px solid;
+`;
+
+export { getAvatarSize, AvatarContainerStyled, ProfileImageStyled, EditButtonStyled };

src/components/common/Avatar/Avatar.tsx

@@ -0,0 +1,43 @@
+import { AvatarShapeType } from '@/types/user';
+import { getAvatarSize } from '@/utils/getAvatarSize';
+
+import { AvatarContainerStyled, EditButtonStyled, ProfileImageStyled } from './Avatar.style';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatarShape: AvatarShapeType['avatarShape'];
+  profileImageSrc?: string;
+  isEditable?: boolean;
+}
+
+const Avatar = ({ avatarShape, profileImageSrc, isEditable }: AvatarProps) => {
+  const width = getAvatarSize(avatarShape);
+
+  return (
+    <div>
+      <AvatarContainerStyled>
+        {profileImageSrc ? (
+          <ProfileImageStyled
+            avatarShape={avatarShape}
+            src={profileImageSrc}
+            alt="profile image"
+            style={{ width: `${width}`, height: `${width}` }}
+          />
+        ) : (
+          <ProfileImageStyled
+            src="https://picsum.photos/200/300"
+            avatarShape={avatarShape}
+            style={{ width: `${width}`, height: `${width}` }}
+            alt="이 부분은 추후 수정 예정입니다."
+          />
+        )}
+        {isEditable && (
+          <EditButtonStyled avatarShape={avatarShape}>
+            <span>편집아이콘추가예정</span>
+          </EditButtonStyled>
+        )}
+      </AvatarContainerStyled>
+    </div>
+  );
+};
+
+export default Avatar;

src/pages/RegisterPage/RegisterPage.tsx

@@ -1,5 +1,4 @@
 import InputForm from '@/components/common/InputForm/InputForm';
-
 import { ChangeEvent, MouseEvent, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 

src/types/user.ts

@@ -2,4 +2,8 @@ interface User {
   accessToken: string;
 }
 
-export { User };
+interface AvatarShapeType {
+  avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium';
+}
+
+export { User, AvatarShapeType };

src/utils/getAvatarSize.ts

@@ -0,0 +1,18 @@
+import { AvatarShapeType } from '@/types/user';
+
+export const getAvatarSize = (avatarShape: AvatarShapeType['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';
+  }
+};