From 88f2e31da40758cb6db31ebc9b8ae80fff84431b Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Tue, 15 Nov 2022 20:27:05 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20-=20=EC=95=84=EB=B0=94=ED=83=80?=
 =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20#41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/common/components/Avatar/index.tsx | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 client/src/common/components/Avatar/index.tsx

diff --git a/client/src/common/components/Avatar/index.tsx b/client/src/common/components/Avatar/index.tsx
new file mode 100644
index 00000000..6165374e
--- /dev/null
+++ b/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="block object-cover"
+          src={url}
+          alt={`커뮤니티 ${name}의 프로필 이미지`}
+        />
+      ) : (
+        name.at(0)
+      )}
+    </div>
+  );
+};
+
+export default Avatar;

From e6a202866494acd289c8beef1ca44f9f06de1ed6 Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Tue, 15 Nov 2022 20:27:34 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20-=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EC=95=84=EB=B0=94=ED=83=80=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?#41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/CommunityAvatar/index.tsx   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 client/src/common/components/CommunityAvatar/index.tsx

diff --git a/client/src/common/components/CommunityAvatar/index.tsx b/client/src/common/components/CommunityAvatar/index.tsx
new file mode 100644
index 00000000..8b1ca6b7
--- /dev/null
+++ b/client/src/common/components/CommunityAvatar/index.tsx
@@ -0,0 +1,11 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const CommunityAvatar: React.FC<Pick<AvatarProps, 'name' | 'url'>> = ({
+  name,
+  url,
+}) => {
+  return <Avatar variant="rectangle" size="medium" name={name} url={url} />;
+};
+
+export default CommunityAvatar;

From a57a62d8c4643f77a757b389151cc246b418dd45 Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Tue, 15 Nov 2022 20:27:46 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20-=20=EC=9C=A0=EC=A0=80=20?=
 =?UTF-8?q?=EC=95=84=EB=B0=94=ED=83=80=20#41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/common/components/UserAvatar/index.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 client/src/common/components/UserAvatar/index.tsx

diff --git a/client/src/common/components/UserAvatar/index.tsx b/client/src/common/components/UserAvatar/index.tsx
new file mode 100644
index 00000000..e826be91
--- /dev/null
+++ b/client/src/common/components/UserAvatar/index.tsx
@@ -0,0 +1,11 @@
+import Avatar, { AvatarProps } from '@components/Avatar';
+import React from 'react';
+
+const UserAvatar: React.FC<Pick<AvatarProps, 'name' | 'url'>> = ({
+  name,
+  url,
+}) => {
+  return <Avatar variant="circle" size="small" name={name} url={url} />;
+};
+
+export default UserAvatar;

From eedee7128f4467bfe4dd575d8d5fbad43dff6bcc Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Tue, 15 Nov 2022 20:48:36 +0900
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=95=84=EB=B0=94=ED=83=80?=
 =?UTF-8?q?=EC=9D=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20block=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=82=AD=EC=A0=9C=20#41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/common/components/Avatar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/common/components/Avatar/index.tsx b/client/src/common/components/Avatar/index.tsx
index 6165374e..8968a8da 100644
--- a/client/src/common/components/Avatar/index.tsx
+++ b/client/src/common/components/Avatar/index.tsx
@@ -24,7 +24,7 @@ const Avatar: React.FC<AvatarProps> = ({ name, url, size, variant }) => {
     >
       {url ? (
         <img
-          className="block object-cover"
+          className="object-cover"
           src={url}
           alt={`커뮤니티 ${name}의 프로필 이미지`}
         />

From c6cd88204c3ba5c433d82e868bf3aceab9d50dd5 Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Thu, 17 Nov 2022 01:41:04 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EC=95=84?=
 =?UTF-8?q?=EB=B0=94=ED=83=80,=20=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=20?=
 =?UTF-8?q?=EC=95=84=EB=B0=94=ED=83=80=20-=20`variant`,=20`size`=20props?=
 =?UTF-8?q?=EB=A5=BC=20default=20parameter=EB=A1=9C=20=EC=A7=80=EC=A0=95?=
 =?UTF-8?q?=20#41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/common/components/CommunityAvatar/index.tsx | 6 ++++--
 client/src/common/components/UserAvatar/index.tsx      | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/common/components/CommunityAvatar/index.tsx b/client/src/common/components/CommunityAvatar/index.tsx
index 8b1ca6b7..bc0306f7 100644
--- a/client/src/common/components/CommunityAvatar/index.tsx
+++ b/client/src/common/components/CommunityAvatar/index.tsx
@@ -1,11 +1,13 @@
 import Avatar, { AvatarProps } from '@components/Avatar';
 import React from 'react';
 
-const CommunityAvatar: React.FC<Pick<AvatarProps, 'name' | 'url'>> = ({
+const CommunityAvatar: React.FC<AvatarProps> = ({
+  variant = 'rectangle',
+  size = 'medium',
   name,
   url,
 }) => {
-  return <Avatar variant="rectangle" size="medium" name={name} url={url} />;
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
 };
 
 export default CommunityAvatar;
diff --git a/client/src/common/components/UserAvatar/index.tsx b/client/src/common/components/UserAvatar/index.tsx
index e826be91..2f7dbaa4 100644
--- a/client/src/common/components/UserAvatar/index.tsx
+++ b/client/src/common/components/UserAvatar/index.tsx
@@ -1,11 +1,13 @@
 import Avatar, { AvatarProps } from '@components/Avatar';
 import React from 'react';
 
-const UserAvatar: React.FC<Pick<AvatarProps, 'name' | 'url'>> = ({
+const UserAvatar: React.FC<AvatarProps> = ({
+  variant = 'circle',
+  size = 'small',
   name,
   url,
 }) => {
-  return <Avatar variant="circle" size="small" name={name} url={url} />;
+  return <Avatar variant={variant} size={size} name={name} url={url} />;
 };
 
 export default UserAvatar;