[Feature] Avatar 컴포넌트 구현 (#163)

* feat: 아바타 이미지 wowds-icons에 추가 * rename: 스피너 관련 폴더 네이밍 변경 * fix: svg 이미지 관련 스토리북 이슈 해결 * feat: Avatar 컴포넌트 구현 * feat: Avatar 컴포넌트 스토리 작성 * chore: git 캐시된 부분 삭제 * refactor: Polymorphic 타입 리팩토링 * docs: jsdoc 및 스토리 문서화 추가 * chore: tsconfig 속성 변경 * fix: Avatar 컴포넌트 타입 추론 안 되는 문제 해결 * chore: orientation props default 값 right로 지정 * feat: ImageComponent도 props로 받을 수 있게 수정 * chore: Avatar 컴포넌트 changeset 작성
GDSC-Hongik · Oct 10, 2024 · 3682ddd · 3682ddd
1 parent 61f91a1
commit 3682ddd
Show file tree

Hide file tree

Showing 21 changed files with 748 additions and 8 deletions.
diff --git a/.changeset/clever-lizards-tell.md b/.changeset/clever-lizards-tell.md
@@ -0,0 +1,6 @@
+---
+"wowds-icons": patch
+"wowds-ui": patch
+---
+
+Avatar 컴포넌트를 추가합니다.
diff --git a/packages/wow-icons/src/component/BlueAvatar.tsx b/packages/wow-icons/src/component/BlueAvatar.tsx
@@ -0,0 +1,83 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const BlueAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="blue-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1337)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#FDE6B2" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M51.7811 38.5623C54.4138 38.5623 56.9005 37.9374 59.101 36.8279C60.5332 39.5608 62.719 41.8366 65.3824 43.3794C65.9647 41.7042 66.2812 39.9046 66.2812 38.0311C66.2812 29.0393 58.9919 21.75 50 21.75C44.5407 21.75 39.7089 24.437 36.7551 28.5607C39.213 34.435 45.015 38.5623 51.7811 38.5623Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1337)"
+        />
+        <path
+          d="M83.713 45.4844C84.5605 45.6642 85.196 46.3693 85.2869 47.231L85.7765 51.8725C85.8674 52.7342 85.3931 53.5564 84.6017 53.9091L80.3387 55.8091C79.5473 56.1619 78.6188 55.9649 78.0387 55.3212L74.9144 51.8539C74.3344 51.2103 74.2348 50.2663 74.6677 49.5158L76.9998 45.4729C77.4327 44.7223 78.2997 44.3359 79.1473 44.5158L83.713 45.4844Z"
+          fill="#FDDD99"
+        />
+        <path
+          d="M22.4841 24.9364L21.6965 31.3307L27.8889 29.8728L22.8833 33.8833L28.2253 37.2844L21.9338 36.5616L23.2961 42.8293L19.4043 37.7968L15.9889 43.2596L16.7765 36.8653L10.584 38.3231L15.5897 34.3127L10.2477 30.9116L16.5392 31.6344L15.1769 25.3666L19.0686 30.3992L22.4841 24.9364Z"
+          fill="#FBBC04"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1337"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#368FF7" />
+            <stop offset="1" stopColor="#205694" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1337"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#AFD2FC" />
+            <stop offset="1" stopColor="#4792EE" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+BlueAvatar.displayName = "BlueAvatar";
+export default BlueAvatar;
diff --git a/packages/wow-icons/src/component/GreenAvatar.tsx b/packages/wow-icons/src/component/GreenAvatar.tsx
@@ -0,0 +1,87 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const GreenAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="green-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1371)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#FBD9D7" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M52.2938 37.6293C53.6522 35.3743 54.4002 32.9218 54.5853 30.4644C57.5936 30.6435 60.5993 29.9819 63.2495 28.567C60.2961 24.4398 55.4622 21.75 50.0001 21.75C41.0083 21.75 33.719 29.0393 33.719 38.0311C33.719 40.6215 34.3239 43.0705 35.4002 45.2447C41.874 46.4349 48.6964 43.6009 52.2938 37.6293Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1371)"
+        />
+        <path
+          clipRule="evenodd"
+          d="M32.0455 22.6619C31.8224 18.3739 34.9923 14.6123 39.3133 14.1527C42.3354 13.8313 45.1467 15.2073 46.7978 17.5138C47.7723 16.6429 49.0193 16.0585 50.4181 15.9097C53.9686 15.5321 57.1529 18.1042 57.5305 21.6547C57.9082 25.2052 55.336 28.3895 51.7856 28.7672C49.8575 28.9722 48.0374 28.3074 46.7161 27.0884C45.8876 28.2071 44.7754 29.1123 43.4722 29.6894C43.6953 33.9774 40.5253 37.7391 36.2043 38.1987C31.7344 38.674 27.7255 35.4359 27.2501 30.966C26.8667 27.3606 28.8993 24.0551 32.0455 22.6619Z"
+          fill="#333333"
+          fillRule="evenodd"
+        />
+        <path
+          d="M35.5136 77.6081C36.7352 79.7082 41.4661 84.2361 50.6169 85.5459C62.0554 87.1831 68.9184 79.3259 64.4424 72.2613C59.9664 65.1968 49.934 69.4345 49.9928 75.8325C50.0516 82.2304 57.973 90.4744 71.9175 83.2493C83.0731 77.4693 85.1063 64.9172 84.7285 59.3637"
+          stroke="#EA4335"
+          strokeLinecap="round"
+          strokeWidth="2.1"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1371"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#34A853" />
+            <stop offset="1" stopColor="#1F6532" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1371"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#C2E5CB" />
+            <stop offset="1" stopColor="#5DB975" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+GreenAvatar.displayName = "GreenAvatar";
+export default GreenAvatar;
diff --git a/packages/wow-icons/src/component/RedAvatar.tsx b/packages/wow-icons/src/component/RedAvatar.tsx
@@ -0,0 +1,84 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const RedAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="red-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1373)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#D7E9FD" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M64.1516 46.0869L37.4788 27.6239C40.4652 24.0348 44.9658 21.75 49.9999 21.75C58.9917 21.75 66.2811 29.0393 66.2811 38.0311C66.2811 40.9617 65.5068 43.7114 64.1516 46.0869Z"
+          fill="#5EA5F9"
+          fillRule="evenodd"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1373)"
+        />
+        <circle cx="68" cy="24" fill="#5EA5F9" r="5.25" />
+        <circle cx="76.875" cy="29.125" fill="#5EA5F9" r="3.875" />
+        <circle cx="81.125" cy="35.375" fill="#5EA5F9" r="2.625" />
+        <path
+          d="M13.5378 46.0435C12.4812 48.2314 11.3773 54.6861 15.414 63.0023C20.46 73.3974 30.8125 74.6864 34.1612 67.023C37.51 59.3596 28.3827 53.4181 23.1139 57.0481C17.8451 60.678 15.4475 71.8567 29.24 79.3678C40.274 85.3767 51.8135 80.0356 56.204 76.614"
+          stroke="#163963"
+          strokeLinecap="round"
+          strokeWidth="2.1"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1373"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#EE695D" />
+            <stop offset="1" stopColor="#EA4335" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1373"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#F9C7C2" />
+            <stop offset="1" stopColor="#F28E86" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+RedAvatar.displayName = "RedAvatar";
+export default RedAvatar;
diff --git a/packages/wow-icons/src/component/YellowAvatar.tsx b/packages/wow-icons/src/component/YellowAvatar.tsx
@@ -0,0 +1,91 @@
+import { forwardRef } from "react";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const YellowAvatar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "100",
+      height = "100",
+      viewBox = "0 0 100 100",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="yellow-avatar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <rect
+          fill="url(#paint0_linear_2077_1372)"
+          height={height}
+          rx="50"
+          width={width}
+        />
+        <circle cx="50" cy="38" fill="#D6EEDD" r="16.25" />
+        <path
+          clipRule="evenodd"
+          d="M65.2149 32.2234L33.9218 40.6083C33.7883 39.7689 33.719 38.9081 33.719 38.0311C33.719 29.0393 41.0083 21.75 50.0001 21.75C56.946 21.75 62.8759 26.0995 65.2149 32.2234Z"
+          fill="#956700"
+          fillRule="evenodd"
+        />
+        <rect
+          fill="#956700"
+          height="2.61568"
+          transform="rotate(15 37.0862 37.0522)"
+          width="37.5889"
+          x="37.0862"
+          y="37.0522"
+        />
+        <path
+          d="M80.75 85.3481C80.75 93.7773 66.9828 100 50 100C33.0172 100 19.25 93.7773 19.25 85.3481C19.25 76.9189 19.25 58.75 50 58.75C80.75 58.75 80.75 76.9189 80.75 85.3481Z"
+          fill="url(#paint1_linear_2077_1372)"
+        />
+        <path
+          d="M87.4841 41.9364L86.6965 48.3307L92.8889 46.8728L87.8833 50.8833L93.2253 54.2844L86.9338 53.5616L88.2961 59.8293L84.4043 54.7968L80.9889 60.2596L81.7765 53.8653L75.584 55.3231L80.5897 51.3127L75.2477 47.9116L81.5392 48.6344L80.1769 42.3666L84.0686 47.3992L87.4841 41.9364Z"
+          fill="#2A8642"
+        />
+        <path
+          d="M21.713 33.9844C22.5605 34.1642 23.196 34.8693 23.2869 35.731L23.7765 40.3725C23.8674 41.2342 23.3931 42.0564 22.6017 42.4091L18.3387 44.3091C17.5473 44.6619 16.6188 44.4649 16.0387 43.8212L12.9144 40.3539C12.3344 39.7103 12.2348 38.7663 12.6677 38.0158L14.9998 33.9729C15.4327 33.2223 16.2997 32.8359 17.1473 33.0158L21.713 33.9844Z"
+          fill="#1F6532"
+        />
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_2077_1372"
+            x1="50"
+            x2="50"
+            y1="0"
+            y2="100"
+          >
+            <stop stopColor="#FBBC04" />
+            <stop offset="1" stopColor="#F9AB00" />
+          </linearGradient>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint1_linear_2077_1372"
+            x1="50"
+            x2="50"
+            y1="58.75"
+            y2="100"
+          >
+            <stop stopColor="#FDE6B2" />
+            <stop offset="1" stopColor="#FDDD99" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+YellowAvatar.displayName = "YellowAvatar";
+export default YellowAvatar;
diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts
@@ -1,14 +1,18 @@
+export { default as BlueAvatar } from "./BlueAvatar.tsx";
 export { default as Calendar } from "./Calendar.tsx";
 export { default as Check } from "./Check.tsx";
 export { default as Close } from "./Close.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Edit } from "./Edit.tsx";
+export { default as GreenAvatar } from "./GreenAvatar.tsx";
 export { default as Help } from "./Help.tsx";
 export { default as LeftArrow } from "./LeftArrow.tsx";
 export { default as Link } from "./Link.tsx";
 export { default as Plus } from "./Plus.tsx";
+export { default as RedAvatar } from "./RedAvatar.tsx";
 export { default as Reload } from "./Reload.tsx";
 export { default as RightArrow } from "./RightArrow.tsx";
 export { default as Search } from "./Search.tsx";
 export { default as Trash } from "./Trash.tsx";
 export { default as Warn } from "./Warn.tsx";
+export { default as YellowAvatar } from "./YellowAvatar.tsx";
diff --git a/packages/wow-icons/src/svg/blue-avatar.svg b/packages/wow-icons/src/svg/blue-avatar.svg