From d74eb25bd431e8b7c610fa701d1b819c6805f0c4 Mon Sep 17 00:00:00 2001
From: jake0319 <shjun1411@naver.com>
Date: Sat, 18 Jan 2025 20:26:35 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/download.$type.tsx | 72 +++++++++++++++++++++++++++++++++++
 src/routes/download/index.tsx | 21 ----------
 2 files changed, 72 insertions(+), 21 deletions(-)
 create mode 100644 src/routes/download.$type.tsx
 delete mode 100644 src/routes/download/index.tsx

diff --git a/src/routes/download.$type.tsx b/src/routes/download.$type.tsx
new file mode 100644
index 0000000..bba078f
--- /dev/null
+++ b/src/routes/download.$type.tsx
@@ -0,0 +1,72 @@
+import { DecoratedBox } from '@/components/DecoratedBox';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/download/$type')({
+  component: FortuneImage,
+});
+
+function FortuneImage() {
+  // Add type to useParams
+  const { type } = Route.useParams();
+
+  const handleDownload = async () => {
+    try {
+      // 이미지 URL
+      const imageUrl = `/images/charm_${type}.png`;
+
+      // 이미지를 Blob으로 가져오기
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+
+      // 다운로드 링크 생성
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = downloadUrl;
+      link.download = `fortune_charm_${type}.png`; // 다운로드될 파일명
+
+      // 다운로드 트리거
+      document.body.appendChild(link);
+      link.click();
+
+      // 클린업
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+    } catch (error) {
+      console.error('이미지 다운로드 중 오류가 발생했습니다:', error);
+      alert('이미지 다운로드에 실패했습니다. 다시 시도해 주세요.');
+    }
+  };
+
+  return (
+    <div className="h-screen w-full">
+      <DecoratedBox>
+        <div className="h-[calc(100vh-100px)] w-full">
+          <section className="flex h-full w-full flex-col items-center justify-center gap-4 p-6">
+            <div className="text-[24px] font-bold text-[#363E76]">
+              청사(靑蛇)의 해
+            </div>
+            <div className="text-[24px] font-bold text-[#363E76]">만사형통</div>
+            <img
+              src={`/images/charm_${type}.png`}
+              alt="운세 이미지"
+              width={260}
+              height={347}
+              className="h-auto max-w-full"
+            />
+          </section>
+        </div>
+      </DecoratedBox>
+      <div className="flex h-[80px] w-full items-center justify-center">
+        <button
+          className="h-10 w-[100px] rounded-[12px] bg-[#363E76] text-white"
+          type="button"
+          onClick={handleDownload}
+        >
+          저장하기
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default FortuneImage;
diff --git a/src/routes/download/index.tsx b/src/routes/download/index.tsx
deleted file mode 100644
index ce732cb..0000000
--- a/src/routes/download/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DecoratedBox } from '@/components/DecoratedBox';
-import { createFileRoute } from '@tanstack/react-router';
-
-export const Route = createFileRoute('/download/')({
-  component: FortuneImage,
-});
-
-function FortuneImage({ imgType }: { imgType: string }) {
-  return (
-    <div className="h-full w-full">
-      <DecoratedBox>
-        <div className="h-screen w-full">
-          <section className="flex h-full w-full flex-col items-center justify-center">
-            <img src={'/' + imgType}>이미지</img>
-            <button>저장하기</button>
-          </section>
-        </div>
-      </DecoratedBox>
-    </div>
-  );
-}