feat : css 수정

depromeet · Feb 12, 2024 · db18cdd · db18cdd
1 parent 3823eb8
commit db18cdd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/public/images/bg-gradient.png b/public/images/bg-gradient.png
diff --git a/src/app/record/success/page.tsx b/src/app/record/success/page.tsx
@@ -23,18 +23,7 @@ export default function MissionSuccessPage() {
       <Image className={gradientCss} src="/images/bg-gradient.png" alt="success" fill />
       <div className={containerCss}>
         <div className={contentWrapperCss}>
-          <Lottie
-            className={css({
-              position: 'absolute',
-              top: '0',
-              left: '0',
-              width: '100%',
-              height: '100%',
-            })}
-            loop
-            animationData={lottieJson}
-            play
-          />
+          <Lottie className={lottieCss} loop animationData={lottieJson} play />
 
           <div className={lottieWrapperCss}>
             <Image className={imageCss} src="/images/coin.png" alt="success" fill />
@@ -54,6 +43,14 @@ export default function MissionSuccessPage() {
   );
 }
 
+const lottieCss = css({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+});
+
 const gradientCss = css({
   height: '100vh',
   width: '100%',
@@ -114,14 +111,16 @@ const subTitleCss = css({
 });
 
 const imageCss = css({
+  width: '50%',
   background: 'transparent',
 });
 
 const lottieWrapperCss = css({
   position: 'relative',
   minHeight: '260px',
   maxWidth: '100vw',
-  width: '100%',
+  margin: '24px auto 0 auto',
+  width: '50%',
   '& img': {
     objectFit: 'contain',
   },