Merge pull request #12 from gunh0/front

Front: add loading text & disabled button styles
gunh0 · Sep 2, 2023 · 728e104 · 728e104
2 parents d7dcdf9 + 6c86fdc
commit 728e104
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -28,7 +28,7 @@ export const ResultPage = () => {
   };
 
   return isLoading || !report ? (
-    <LoadingView />
+    <LoadingView text={'당신만의 브랜드 이미지를 생성하고 있어요'} />
   ) : (
     <div className={containerStyle}>
       <TitleSection
@@ -39,7 +39,7 @@ export const ResultPage = () => {
             for you!
           </>
         }
-        subtitle={'짠'}
+        subtitle={'4가지 이미지 중 하나를 선택해주세요'}
       />
       {report && (
         <>
@@ -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>
         </>
       )}
@@ -75,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',
@@ -107,4 +109,12 @@ const buttonStyle = css({
   color: 'white',
   cursor: 'pointer',
   userSelect: 'none',
+  ['&:disabled']: {
+    cursor: 'default',
+    borderColor: 'gray',
+    color: 'gray',
+    '& svg': {
+      fill: 'gray',
+    },
+  },
 });
diff --git 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',
 };