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

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

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+interface AvatarProps {
+  avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium';
+}
+
+const getAvatarSize = (avatarShape: AvatarProps['avatarShape']) => {
+  switch (avatarShape) {
+    case 'normal':
+      return '4rem';
+    case 'large':
+      return '16.3rem';
+    case 'small':
+      return '1.5rem';
+    case 'medium':
+      return '6.875rem';
+    case 'rectangle':
+      return '4.5rem';
+    default:
+      return '4rem';
+  }
+};
+
+const AvatarContainerStyled = styled.div`
+  position: relative;
+  display: inline-flex;
+`;
+
+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;
+`;
+
+const EditButtonStyled = styled.div`
+  width: 4rem;
+  height: 4rem;
+  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,60 @@
+import { AvatarContainerStyled, EditButtonStyled, ProfileImageStyled } from './Avatar.style';
+
+interface AvatarProps {
+  avatarShape: 'rectangle' | 'normal' | 'large' | 'small' | 'medium';
+  profileImage?: string;
+  isEdit?: boolean;
+  onClick?: () => void;
+}
+
+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';
+  }
+};
+
+const Avatar = ({ avatarShape, profileImage, isEdit, onClick }: AvatarProps) => {
+  const width = getAvatarSize(avatarShape);
+  const height = getAvatarSize(avatarShape);
+
+  return (
+    <div>
+      <AvatarContainerStyled onClick={onClick}>
+        {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="리액트 아이콘 기본이미지로 바꿀 부분"
+          />
+        )}
+        {isEdit && (
+          <EditButtonStyled>
+            <span>편집아이콘추가예정</span>
+          </EditButtonStyled>
+        )}
+      </AvatarContainerStyled>
+    </div>
+  );
+};
+
+export default Avatar;

src/pages/RegisterPage/RegisterPage.tsx

@@ -1,4 +1,4 @@
-import InputForm from '@/componenets/common/InputForm/InputForm';
+import InputForm from '@/components/common/InputForm/InputForm';
 
 import { Container, SubmitBtn, Title } from './RegisterPage.style';