0208 QA

src/components/Common/LoadingComponent.tsx

@@ -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/components/Loading/Loading.Style.ts

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

src/components/Loading/Loading.tsx

@@ -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/components/Page/Home/Ranking/Ranking.Style.ts

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

src/components/Page/Home/Ranking/Ranking.tsx

@@ -3,7 +3,7 @@ import { STOCK_COUNTRY_MAP, StockCountryKey } from '@ts/StockCountry';
 import useRouter from '@router/useRouter';
 import { useStockTableInfoQuery } from '@controllers/stocks/query';
 import { StockTableInfo } from '@controllers/stocks/types';
-import LoadingWEBM from '@assets/Loading.webm';
+import LoadingGIF from '@assets/loading.gif';
 import ItemTitle from '../Common';
 import { HomeItemContainer } from '../Common.Style';
 import { RankingContent, RankingLoading, RankingTabContainer, RankingTabLabel, RankingTable } from './Ranking.Style';
@@ -69,7 +69,7 @@ const HomeRanking = ({ country }: { country: StockCountryKey }) => {
         </RankingTable>
         {isLoading && (
           <RankingLoading>
-            <video src={LoadingWEBM} autoPlay loop muted playsInline />
+            <img src={LoadingGIF} />
           </RankingLoading>
         )}
       </RankingContent>

src/components/Page/ShortView/Empty/Empty.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { theme } from '@styles/themes';
-import LoadingWEBM from '@assets/Loading.webm';
 import AlertSVG from '@assets/icons/alert.svg?react';
+import LoadingGIF from '@assets/loading.gif';
 
 const ShortViewEmptyContainer = styled.div({
   position: 'relative',
@@ -31,7 +31,7 @@ const ShortViewEmptyContent = styled.div({
     border: 'none',
     cursor: 'pointer',
   },
-  ['>svg, >video']: {
+  ['>svg, >img']: {
     width: '80px',
     height: 'auto',
     aspectRatio: '1 / 1',
@@ -50,10 +50,7 @@ const ShortViewEmpty = ({
 }) => {
   const LoadingComponent = () => (
     <ShortViewEmptyContent>
-      <video autoPlay muted loop playsInline preload="auto">
-        <source src={LoadingWEBM} type="video/webm" />
-        브라우저가 비디오 태그를 지원하지 않습니다.
-      </video>
+      <img src={LoadingGIF} />
       <p>새로운 종목을 불러오는 중...</p>
     </ShortViewEmptyContent>
   );

src/pages/OAuthCallback/OAuthCallback.tsx

@@ -1,6 +1,6 @@
 import { useSocialAuth } from '@hooks/useSocialAuth';
 import BlueAlert from '@assets/blueAlert.svg?react';
-import Loading from '@assets/loading.png';
+import LoadingGIF from '@assets/loading.gif';
 import { OAuthCallbackContainer, StatusDesc, StatusTitle } from './OAuthCallback.Style';
 
 const OAuthCallback = () => {
@@ -16,7 +16,7 @@ const OAuthCallback = () => {
         </>
       ) : (
         <>
-          <img src={Loading} alt="Loading" />
+          <img src={LoadingGIF} alt="Loading" />
           <StatusTitle>잠시만 기다려주세요</StatusTitle>
           <StatusDesc>로그인 정보를 불러오고 있어요</StatusDesc>
         </>

src/pages/Term/Term.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { TermItem, TermKey, TermList } from '@ts/Term';
 import Button from '@components/Common/Button';
 import Header from '@components/Common/Header';
@@ -32,15 +32,17 @@ const RegisterTermList = ({ termItem }: { termItem: TermItem }) => {
 
 const RegisterTerm = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-  const termKey = location.state?.termKey as TermKey;
-
-  const { title, name, contents } = TermList[termKey];
+  const [searchParams] = useSearchParams();
+  const termKey = searchParams.get('term') as TermKey;
 
   const handleClose = () => {
     navigate(-1);
   };
 
+  if (!termKey) return;
+
+  const { title, name, contents } = TermList[termKey];
+
   return (
     <TermContainer>
       <Header title={title} beforeIconType="close" onBefore={handleClose} />

src/router/useRouter.ts

@@ -1,10 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 import { StockCountryKey } from '@ts/StockCountry';
 import { TermKey } from '@ts/Term';
+import { useIsMobile } from '@hooks/useIsMobile';
 import { webPath } from '.';
 
 const useRouter = () => {
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
 
   const navToBack = () => navigate(-1);
 
@@ -32,11 +34,26 @@ const useRouter = () => {
   const navToAbout = () => navigate(webPath.about);
   const navToTerm = (termKey: TermKey) => navigate(`${webPath.term}?term=${termKey}`);
 
-  const openBusinessProposal = () => window.open('mailto:humanzipyo2024@gmail.com?cc=anyany3151@naver.com');
-  const openServiceCenter = () => window.open('https://forms.gle/eus2xRNHGxbSBaAK9');
-  const openInstagram = () => window.open('https://www.instagram.com/humanzipyo/');
-  const openLinkedIn = () => window.open('https://www.linkedin.com/company/humanzipyo');
-  const openThreads = () => window.open('https://www.threads.net/@humanzipyo');
+  const openBusinessProposal = () => {
+    window.location.href = 'mailto:humanzipyo2024@gmail.com?cc=anyany3151@naver.com';
+  };
+  const openServiceCenter = () => {
+    window.location.href = 'https://forms.gle/eus2xRNHGxbSBaAK9';
+  };
+  const openInstagram = () => {
+    window.location.href = 'https://www.instagram.com/humanzipyo/';
+  };
+  const openLinkedIn = () => {
+    if (isMobile) {
+      window.location.href = 'linkedin://profile/humanzipyo';
+      return;
+    }
+
+    window.location.href = 'https://www.linkedin.com/company/humanzipyo';
+  };
+  const openThreads = () => {
+    window.location.href = 'https://www.threads.net/@humanzipyo';
+  };
 
   return {
     navToBack,