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 = () => ( -
+type Props = { + text?: string; +}; + +export const LoadingView = ({text}: Props) => ( +
+ {text && {text}}
); 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 ? ( - + ) : ( { }; return isLoading ? ( - + ) : ( { }; return isLoading || !report ? ( - + ) : (
{ for you! } - subtitle={'짠'} + subtitle={'4가지 이미지 중 하나를 선택해주세요'} /> {report && ( <> @@ -59,7 +59,9 @@ export const ResultPage = () => { - +
)} @@ -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 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', };