✨ 이미지 저장시 Spinner 추가 구현

dnd-side-project · Feb 20, 2024 · 9bbdc86 · 9bbdc86
1 parent 56f69ee
commit 9bbdc86
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/src/app/test/result/_components/ImageBox.tsx b/src/app/test/result/_components/ImageBox.tsx
@@ -6,30 +6,35 @@ import FirstResultType from '@/assets/images/result/firstResultType.svg';
 import ForthResultType from '@/assets/images/result/forthResultType.svg';
 import SecondResultType from '@/assets/images/result/secondResultType.svg';
 import ThirdResultType from '@/assets/images/result/thirdResultType.svg';
-import { Icon } from '@/components/common/icon';
+import { Button } from '@/components/common/button';
+import { Spinner } from '@/components/common/spinner';
 import { Typography } from '@/foundations/typography';
 import { useDownloadImage } from '@/hooks/useDownloadImage';
 import { Range } from '@/types/util';
 
 // TODO : 백엔드와 논의하여 resultTypeId 프로퍼티 결정
 const ImageBox = ({ resultTypeId = 4 }: { resultTypeId: Range<1, 5> }) => {
-  const imageRef = useRef<HTMLButtonElement>(null);
-  const { onDownloadImage } = useDownloadImage({ imageRef });
+  const imageRef = useRef<HTMLDivElement>(null);
+  const { isDownloading, onDownloadImage } = useDownloadImage({ imageRef });
 
   const handleDownloadImage = async () => {
     await onDownloadImage();
   };
   return (
     <article className="flex flex-col items-center justify-center px-2xs">
-      <button onClick={handleDownloadImage} ref={imageRef}>
-        {resultTypeMap[resultTypeId]}
-      </button>
-      <div className="flex items-center gap-5xs py-3xs">
-        <Icon icon="caretUp" color="gray-300" size={12} />
-        <Typography type="body2" className="text-gray-500">
-          이미지 꾹 - 눌러서 저장하기
-        </Typography>
-        <Icon icon="caretUp" color="gray-300" size={12} />
+      <div ref={imageRef}>{resultTypeMap[resultTypeId]}</div>
+      <div className="flex items-center gap-5xs py-xs">
+        <Button variant="empty" onClick={handleDownloadImage} className="h-[30px]">
+          {isDownloading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Typography type="body2" className=" border-b-2 border-gray-500 text-gray-500">
+                이미지 저장하기
+              </Typography>
+            </>
+          )}
+        </Button>
       </div>
     </article>
   );