[CLIENT] 공통 컴포넌트 - 아바타, 커뮤니티 아바타, 유저 아바타 작성 (#45)

* feat: 공통 컴포넌트 - 아바타 작성 #41

* feat: 공통 컴포넌트 - 커뮤니티 아바타 작성 #41

* feat: 공통 컴포넌트 - 유저 아바타 #41

* refactor: 공통 컴포넌트 아바타의 이미지에서 필요없는 block 속성 삭제 #41

* feat: 유저 아바타, 커뮤니티 아바타 - `variant`, `size` props를 default parameter로 지정 #41

client/src/common/components/Avatar/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface AvatarProps {
+  size: 'small' | 'medium';
+  variant: 'circle' | 'rectangle';
+  name: string;
+  url?: string;
+}
+
+const ROUNDED = {
+  rectangle: 'rounded-2xl',
+  circle: 'rounded-full',
+};
+
+const WH = {
+  small: 'w-[57px] h-[57px]',
+  medium: 'w-[65px] h-[65px]',
+};
+
+const Avatar: React.FC<AvatarProps> = ({ name, url, size, variant }) => {
+  return (
+    <div
+      className={`flex justify-center items-center ${WH[size]} border border-line ${ROUNDED[variant]} text-s24 italic font-bold overflow-hidden select-none`}
+    >
+      {url ? (
+        <img
+          className="object-cover"
+          src={url}
+          alt={`커뮤니티 ${name}의 프로필 이미지`}
+        />
+      ) : (
+        name.at(0)
+      )}
+    </div>
+  );
+};
+
+export default Avatar;

client/src/common/components/CommunityAvatar/index.tsx

@@ -0,0 +1,13 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const CommunityAvatar: React.FC<AvatarProps> = ({
+  variant = 'rectangle',
+  size = 'medium',
+  name,
+  url,
+}) => {
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
+};
+
+export default CommunityAvatar;

client/src/common/components/UserAvatar/index.tsx

@@ -0,0 +1,13 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const UserAvatar: React.FC<AvatarProps> = ({
+  variant = 'circle',
+  size = 'small',
+  name,
+  url,
+}) => {
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
+};
+
+export default UserAvatar;