Merge pull request #458 from FunD-StockProject/feat/#404-qa

0208 QA

Author: Jadest13

package-lock.json

@@ -1,10 +1,10 @@
-import LoadingSVG from '@assets/loading.svg?react';
+import LoadingGIF from '@assets/loading.gif';
 import { Container } from './Common';
 
 const LoadingComponent = () => {
   return (
     <Container>
-      <LoadingSVG />
+      <img src={LoadingGIF} />
     </Container>
   );
 };

src/assets/Loading.mov

@@ -35,7 +35,7 @@ const LoadingContent = styled.div({
   justifyContent: 'center',
   gap: '16px',
 
-  ['>video']: {
+  ['>img']: {
     width: '80px',
     height: 'auto',
     aspectRatio: '1 / 1',

src/assets/Loading.webm

@@ -1,6 +1,5 @@
-import LoadingMOV from '@assets/Loading.mov';
-import LoadingWEBM from '@assets/Loading.webm';
 import BackgroundSVG from '@assets/background.svg?react';
+import LoadingGIF from '@assets/loading.gif';
 import { LoadingContainer, LoadingContent } from './Loading.Style';
 
 const Loading = ({ isLoading, title, desc }: { isLoading?: boolean; title: string; desc?: string }) => {
@@ -12,11 +11,7 @@ const Loading = ({ isLoading, title, desc }: { isLoading?: boolean; title: strin
     <LoadingContainer bottom="96px">
       <BackgroundSVG />
       <LoadingContent>
-        <video autoPlay loop muted playsInline preload="auto">
-          <source src={LoadingMOV} type='video/quicktime; codecs="hvc1"' />
-          <source src={LoadingWEBM} type="video/webm" />
-          <p>브라우저가 비디오 태그를 지원하지 않습니다.</p>
-        </video>
+        <img src={LoadingGIF} />
         <div>
           <p className="title">{title}</p>
           {desc && <p className="desc">{desc}</p>}

src/assets/loading.gif

@@ -153,6 +153,12 @@ const RankingLoading = styled.div({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  padding: '32px',
+
+  ['>img']: {
+    width: '128px',
+    aspectRatio: '1 / 1',
+  },
 });
 
 export {