From 36aac72628536c567dea729585472cea41c55e5b Mon Sep 17 00:00:00 2001
From: nka21 <133028205+nka21@users.noreply.github.com>
Date: Sun, 27 Jul 2025 14:52:04 +0900
Subject: [PATCH 1/3] =?UTF-8?q?style:=20=E7=B5=90=E6=9E=9C=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AE=E4=BD=99=E7=99=BD=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/result/ResultScreen.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/result/ResultScreen.module.css b/apps/web/src/components/result/ResultScreen.module.css
index 24a6dd5..44ebf63 100644
--- a/apps/web/src/components/result/ResultScreen.module.css
+++ b/apps/web/src/components/result/ResultScreen.module.css
@@ -93,8 +93,8 @@
 }
 
 .character-image {
-  width: 52%;
-  height: 52%;
+  width: 42%;
+  height: 42%;
   object-fit: contain;
   object-position: center;
   border-radius: 64px;

From 28859bcd47a5365a10e84a8cfa13a42663b6c3fe Mon Sep 17 00:00:00 2001
From: nka21 <133028205+nka21@users.noreply.github.com>
Date: Sun, 27 Jul 2025 14:59:36 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E3=83=AD=E3=83=BC=E3=83=87?=
 =?UTF-8?q?=E3=82=A3=E3=83=B3=E3=82=B0=E7=8A=B6=E6=85=8B=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E3=81=A8=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/photo/PhotoPreview.module.css  | 30 ++++++++++++
 .../web/src/components/photo/PhotoPreview.tsx | 47 +++++++++++++------
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/photo/PhotoPreview.module.css b/apps/web/src/components/photo/PhotoPreview.module.css
index 0b69b5f..9c6c58e 100644
--- a/apps/web/src/components/photo/PhotoPreview.module.css
+++ b/apps/web/src/components/photo/PhotoPreview.module.css
@@ -132,3 +132,33 @@
   background: var(--accent-bg);
   transform: translateY(-2px);
 }
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--accent-bg);
+  border-top: 4px solid var(--warm-brown);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  font-size: 16px;
+  color: var(--text-primary);
+  font-weight: 500;
+  text-align: center;
+  margin: 0;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/apps/web/src/components/photo/PhotoPreview.tsx b/apps/web/src/components/photo/PhotoPreview.tsx
index 83e921f..7a7c2b3 100644
--- a/apps/web/src/components/photo/PhotoPreview.tsx
+++ b/apps/web/src/components/photo/PhotoPreview.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import clsx from 'clsx';
@@ -17,12 +17,16 @@ interface PhotoPreviewProps {
 export const PhotoPreview = (props: PhotoPreviewProps) => {
   const { onConfirm, onRetake } = props;
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const navigate = useNavigate();
   const handleConfirm = useCallback(() => {
     if (onConfirm) {
       onConfirm();
     }
 
+    setIsLoading(true);
+
     // localStorage から theme と difficulty と base64 のデータを取得し、リクエストボディに含める
     const themesData = JSON.parse(
       localStorage.getItem('currentThemes') || '{"themes": []}',
@@ -67,6 +71,7 @@ export const PhotoPreview = (props: PhotoPreviewProps) => {
         navigate('/result');
       } catch (e) {
         console.error(e);
+        setIsLoading(false);
       }
     };
 
@@ -119,19 +124,33 @@ export const PhotoPreview = (props: PhotoPreviewProps) => {
 
           {/* アクションボタン */}
           <div className={styles['preview-actions']}>
-            <button
-              className={clsx(styles['preview-button'], styles['btn-confirm'])}
-              onClick={handleConfirm}
-            >
-              この写真で決定！
-            </button>
-            {parseInt(localStorage.getItem('countDown') || '0', 10) > 1 && (
-              <button
-                className={clsx(styles['preview-button'], styles['btn-retake'])}
-                onClick={handleRetake}
-              >
-                撮り直す
-              </button>
+            {isLoading ? (
+              <div className={styles['loading-container']}>
+                <div className={styles['loading-spinner']}></div>
+              </div>
+            ) : (
+              <>
+                <button
+                  className={clsx(
+                    styles['preview-button'],
+                    styles['btn-confirm'],
+                  )}
+                  onClick={handleConfirm}
+                >
+                  この写真で決定！
+                </button>
+                {parseInt(localStorage.getItem('countDown') || '0', 10) > 1 && (
+                  <button
+                    className={clsx(
+                      styles['preview-button'],
+                      styles['btn-retake'],
+                    )}
+                    onClick={handleRetake}
+                  >
+                    撮り直す
+                  </button>
+                )}
+              </>
             )}
           </div>
         </div>

From 03c5ef9fb08420753229911dfdc3d400603b62a4 Mon Sep 17 00:00:00 2001
From: nka21 <133028205+nka21@users.noreply.github.com>
Date: Sun, 27 Jul 2025 15:00:32 +0900
Subject: [PATCH 3/3] fix: linter error

---
 apps/web/src/components/photo/PhotoPreview.module.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/photo/PhotoPreview.module.css b/apps/web/src/components/photo/PhotoPreview.module.css
index 9c6c58e..0048f90 100644
--- a/apps/web/src/components/photo/PhotoPreview.module.css
+++ b/apps/web/src/components/photo/PhotoPreview.module.css
@@ -159,6 +159,10 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }