From 3282df5eeada4fbe1e803d800162ff3850f56bb2 Mon Sep 17 00:00:00 2001
From: Yejin <orobos654@gmail.com>
Date: Sat, 2 Sep 2023 21:25:52 +0900
Subject: [PATCH 1/3] feat(front): add loading text

---
 front/src/components/common/LoadingView.tsx    | 18 ++++++++++++++++--
 front/src/components/icon/Loading.tsx          |  1 -
 .../ai_maker/ReferenceKeywordPickPage.tsx      |  2 +-
 .../pages/ai_maker/RelatedKeywordPickPage.tsx  |  2 +-
 front/src/pages/ai_maker/ResultPage.tsx        |  2 +-
 .../ai_maker/UploadReferenceImagePage.tsx      |  4 ++--
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/front/src/components/common/LoadingView.tsx b/front/src/components/common/LoadingView.tsx
index 1a249fb..e62b20f 100644
--- a/front/src/components/common/LoadingView.tsx
+++ b/front/src/components/common/LoadingView.tsx
@@ -1,8 +1,22 @@
 import {css} from '../../../styled-system/css';
 import {Loading} from '../icon/Loading.tsx';
 
-export const LoadingView = () => (
-  <div className={css({height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
+type Props = {
+  text?: string;
+};
+
+export const LoadingView = ({text}: Props) => (
+  <div
+    className={css({
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDir: 'column',
+      gap: '32px',
+    })}
+  >
     <Loading />
+    {text && <span>{text}</span>}
   </div>
 );
diff --git a/front/src/components/icon/Loading.tsx b/front/src/components/icon/Loading.tsx
index e6fa3e5..ce33bfa 100644
--- a/front/src/components/icon/Loading.tsx
+++ b/front/src/components/icon/Loading.tsx
@@ -15,7 +15,6 @@ const container = css({
   display: 'grid',
   justifyContent: 'center',
   alignItems: 'center',
-  height: '350px',
 });
 
 const spinner = css({
diff --git a/front/src/pages/ai_maker/ReferenceKeywordPickPage.tsx b/front/src/pages/ai_maker/ReferenceKeywordPickPage.tsx
index 730a992..9725517 100644
--- a/front/src/pages/ai_maker/ReferenceKeywordPickPage.tsx
+++ b/front/src/pages/ai_maker/ReferenceKeywordPickPage.tsx
@@ -23,7 +23,7 @@ export const ReferenceKeywordPickPage = () => {
   };
 
   return isLoading ? (
-    <LoadingView />
+    <LoadingView text={'업로드한 이미지와 연관된 키워드를 가져오고 있어요'} />
   ) : (
     <PickKeywordTemplate
       keywords={keywords}
diff --git a/front/src/pages/ai_maker/RelatedKeywordPickPage.tsx b/front/src/pages/ai_maker/RelatedKeywordPickPage.tsx
index a9ef504..b8c7b4a 100644
--- a/front/src/pages/ai_maker/RelatedKeywordPickPage.tsx
+++ b/front/src/pages/ai_maker/RelatedKeywordPickPage.tsx
@@ -24,7 +24,7 @@ export const RelatedKeywordPickPage = () => {
   };
 
   return isLoading ? (
-    <LoadingView />
+    <LoadingView text={'연관된 키워드를 가져오고 있어요'} />
   ) : (
     <PickKeywordTemplate
       keywords={keywords}
diff --git a/front/src/pages/ai_maker/ResultPage.tsx b/front/src/pages/ai_maker/ResultPage.tsx
index b4b4eb3..1edbadb 100644
--- a/front/src/pages/ai_maker/ResultPage.tsx
+++ b/front/src/pages/ai_maker/ResultPage.tsx
@@ -28,7 +28,7 @@ export const ResultPage = () => {
   };
 
   return isLoading || !report ? (
-    <LoadingView />
+    <LoadingView text={'당신만의 브랜드 이미지를 생성하고 있어요'} />
   ) : (
     <div className={containerStyle}>
       <TitleSection
diff --git a/front/src/pages/ai_maker/UploadReferenceImagePage.tsx b/front/src/pages/ai_maker/UploadReferenceImagePage.tsx
index 14b9d98..a443fba 100644
--- a/front/src/pages/ai_maker/UploadReferenceImagePage.tsx
+++ b/front/src/pages/ai_maker/UploadReferenceImagePage.tsx
@@ -59,7 +59,7 @@ const containerStyle = css({
   flexDir: 'column',
   justifyContent: 'space-between',
   height: '100%',
-  pb: '80px',
+  pb: '100px',
 });
 
 const imageContainerStyle = css({
@@ -83,5 +83,5 @@ const uploadButtonStyle = {
   border: '1px solid white',
   borderRadius: '37.5px',
   p: '0 37.5px',
-  m: 'auto',
+  m: '0 auto auto auto',
 };

From 2d4cafa5a2577f4c62029bedb11d05373d76fc06 Mon Sep 17 00:00:00 2001
From: Yejin <orobos654@gmail.com>
Date: Sat, 2 Sep 2023 21:27:32 +0900
Subject: [PATCH 2/3] style(front): add disabled button style

---
 front/src/pages/ai_maker/ResultPage.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/front/src/pages/ai_maker/ResultPage.tsx b/front/src/pages/ai_maker/ResultPage.tsx
index 1edbadb..f3a7a56 100644
--- a/front/src/pages/ai_maker/ResultPage.tsx
+++ b/front/src/pages/ai_maker/ResultPage.tsx
@@ -59,7 +59,9 @@ export const ResultPage = () => {
             <button className={buttonStyle} onClick={onClickDownload} disabled={!selectedImage}>
               SAVE
             </button>
-            <button className={buttonStyle}>SELL IT</button>
+            <button className={buttonStyle} disabled={true}>
+              SELL IT
+            </button>
           </div>
         </>
       )}
@@ -107,4 +109,12 @@ const buttonStyle = css({
   color: 'white',
   cursor: 'pointer',
   userSelect: 'none',
+  ['&:disabled']: {
+    cursor: 'default',
+    borderColor: 'gray',
+    color: 'gray',
+    '& svg': {
+      fill: 'gray',
+    },
+  },
 });

From 6c86fdcfe3de93299ca9ae0a424df4c848b0c7f3 Mon Sep 17 00:00:00 2001
From: Yejin <orobos654@gmail.com>
Date: Sat, 2 Sep 2023 21:30:06 +0900
Subject: [PATCH 3/3] feat(front): change result subtitle

---
 front/src/pages/ai_maker/ResultPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/pages/ai_maker/ResultPage.tsx b/front/src/pages/ai_maker/ResultPage.tsx
index f3a7a56..11339c2 100644
--- a/front/src/pages/ai_maker/ResultPage.tsx
+++ b/front/src/pages/ai_maker/ResultPage.tsx
@@ -39,7 +39,7 @@ export const ResultPage = () => {
             for you!
           </>
         }
-        subtitle={'짠'}
+        subtitle={'4가지 이미지 중 하나를 선택해주세요'}
       />
       {report && (
         <>
@@ -77,7 +77,7 @@ const containerStyle = css({
   pb: '40px',
 });
 
-const imageContainerStyle = css({display: 'flex', gap: '10px', justifyContent: 'center'});
+const imageContainerStyle = css({display: 'flex', gap: '10px', justifyContent: 'center', p: '0 40px'});
 
 const imageWrapperStyle = css({
   position: 'relative',