add:iconboard 에 소셜 아이콘 추가 완료

Ocean-Portfolio · Nov 10, 2023 · ee394d2 · ee394d2
1 parent 23f380c
commit ee394d2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/components/storybook/IconBoard.tsx b/src/components/storybook/IconBoard.tsx
@@ -11,6 +11,7 @@ const IconBoard = () => {
       templateColumns="repeat(16, 2rem)"
       templateRows="repeat(19, 2rem)"
       style={{
+        width: 'fit-content',
         justifyItems: 'center',
         alignItems: 'center',
         rowGap: '1rem',
@@ -26,6 +27,16 @@ const IconBoard = () => {
       <IconBoard.Social company="LINKEDIN" />
       <IconBoard.Social company="INSTAGRAM" />
       <IconBoard.Social company="YOUTUBE" />
+      <IconBoard.Social company="PINTEREST" />
+      <IconBoard.Social company="MEDIUM" />
+      <IconBoard.Social company="GITHUB" />
+      <IconBoard.Social company="FIGMA" />
+      <IconBoard.Social company="DRIBBBLE" />
+      <IconBoard.Social company="TIKTOK" />
+      <IconBoard.Social company="WHATSAPP" />
+      <IconBoard.Social company="BEHANCE" />
+      <IconBoard.Social company="NOTION" />
+      <IconBoard.Social company="DISQUITE" />
     </Grid>
   );
 };

diff --git a/src/composable/Icon/Icon.tsx b/src/composable/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import Image, { ImageProps } from 'next/image';
-import React from 'react';
+import React, { useRef } from 'react';
 import { ASSET_ENDPOINT } from '@/const/endpoint';
 import iconResourceSrcFormat from '@/utils/string/iconResourceSrcFormat';
 
@@ -17,6 +17,8 @@ const Icon = ({
   format,
   ...props
 }: Props) => {
+  const imageRef = useRef<HTMLImageElement>(null);
+
   const resource = iconResourceSrcFormat({
     company,
     color,
@@ -29,7 +31,12 @@ const Icon = ({
   return (
     <Image
       {...props}
+      ref={imageRef}
       src={`${path}/${resource}.${format || 'png'}`}
+      onError={(e) => {
+        const target = e.target as HTMLImageElement;
+        target.style.opacity = '0';
+      }}
       alt={company}
     />
   );