Release v1.0.7 (#127)

* 메인 페이지 대용량 Gif 네트워크 용량 절약 및 LCP 개선 (#120) * 렌더링 최적화 및 이미지 최적화 (#106) * Refac: 이미지 최적화 및 경로 최적화 * Refac: 어드민 페이지별 레이지 로딩 적용 * Refac: 루트 페이지 레이지 로딩 적용 * Design: carousel css 분리 * Feat: 캐러셀 컴포넌트 분리 * Refac: 캐러셀 레이지 로딩 적용 * Feat/issue #107 (#108) * Feat: 예외 에러창 추가 * Desing: ErrorElement수정 * Design: 반응형 css 추가 * Fix: 모바일 화면내에서 로그인 페이지 무한루프 버그 픽스 * comming soon 화면 제작 (#113) * Feat: CommingSoonPage구현 * Feat: 미구현 라우터 comming soon 페이지 추가 * Design: 반응형 css 수정 * Feat: 컴포넌트 분리 * Fix: NavLink -> Link 수정 * Fix: 모바일 헤더 안 닫기는 버그 수정 * Feat: Navigation Mobile lazy loading적용 * Feat: 슬라이드 lazyloading 적용 * 지원 서류 modal 직렬별 질문-답변란 수정 (#114) * Fix: 지원 서류 modal 직렬별 질문-답변란 수정 * Fix: 직렬별 질문지 수정 * Fix: Table 관련 오류 수정 * Fix/issue #111 : Instagram, Kakao In App Browser 에서 구글 OAuth 가 동작하지 않는 버그 픽스 (#115) * chore: babel/preset-typescript 적용 * chore: jest 테스트 환경설정 * chore: USER_AGENT 정규표현식 상수 추가 * feature: user agent 감지 유틸리티 함수 구현 및 단위테스트 * feature: http, https 프로토콜을 제외한 url 파싱 함수 구현 및 단위테스트 * feature: 인앱 브라우저에서 외부 브라우저 호출 함수 구현 * fix: 로그인 페이지 마운트시, user agent 에 따라 외부 브라우저로 전환되도록 수정 * ci: github aciton 테스트 자동화 스크립트 작성 * chore: gif 에서 webm 으로 변환한 Earth.webm 에셋추가 * fix: EarthVideo 로 수정 및 clip-path 로 background 제거 --------- Co-authored-by: 김규회 <[email protected]> Co-authored-by: 김강민 <[email protected]> * 모바일 화면 최적화 로딩 (#121) * Feat: Link태그 달기 * Design: font swap 추가하기 * Refac: memoization 적용 * Feat: star lazyloading 적용 * Pagination 기능 수정 (#126) --------- Co-authored-by: KimDaeGeon <[email protected]> Co-authored-by: 김강민 <[email protected]>
GDG-on-Campus-KNU · Aug 22, 2024 · 2678753 · 2678753
1 parent ab75eb3
commit 2678753
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 52 deletions.
diff --git a/src/assets/Earth.webm b/src/assets/Earth.webm
diff --git a/src/components/common/typography/Text.tsx b/src/components/common/typography/Text.tsx
@@ -13,6 +13,7 @@ const Text = styled.span<IText>`
     text-align: center;
   } */
   display: inline;
+  font-display: swap;
 
   font-weight: ${(props) => props.weight ?? 'normal'};
 

diff --git a/src/pages/admin/components/docs/AdminConfirmTable.tsx b/src/pages/admin/components/docs/AdminConfirmTable.tsx
@@ -76,12 +76,12 @@ const AdminConfirmTable = ({
 
       setConfirmList({
         data: searchFilteredData,
-        totalPage: Math.ceil(searchFilteredData.length / 10),
+        totalPage: searchData.totalPage,
       });
     } else {
       setConfirmList({
         data: filteredData,
-        totalPage: Math.ceil(filteredData.length / 10),
+        totalPage: data.totalPage,
       });
     }
   }, [searchData, data, isMarked, track]);

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -4,7 +4,6 @@ import { useMediaQuery } from 'react-responsive';
 
 import Content from '@gdsc/pages/main/components/Content';
 import MainRound from '@gdsc/pages/main/components/MainRound';
-import Star from '@gdsc/pages/main/components/Star';
 
 import { DisplayLayout } from '@gdsc/styles/LayoutStyle';
 
@@ -17,6 +16,8 @@ const MainFooter = lazy(
   () => import('@gdsc/components/feature/footer/MainFooter')
 );
 
+const Star = lazy(() => import('@gdsc/pages/main/components/Star'));
+
 const DisplayMainLayout = styled(DisplayLayout)`
   display: flex;
   flex-direction: column;

diff --git a/src/pages/main/components/PCRotateCarousel.tsx b/src/pages/main/components/PCRotateCarousel.tsx
@@ -1,10 +1,12 @@
+import { memo } from 'react';
+import { Link } from 'react-router-dom';
+
 import CompleteBtn from '@gdsc/components/common/button/CompleteBtn';
-import { LazyLoadImg } from '@gdsc/components/common/img/LazyLoadingImg';
 import Text from '@gdsc/components/common/typography/Text';
 
 import { useColTz } from '@gdsc/hooks/useColTz';
 
-import Earth from '@gdsc/assets/Earth.gif';
+import EarthWebM from '@gdsc/assets/Earth.webm';
 import LeftArrow from '@gdsc/assets/LeftArrow.svg';
 import RightArrow from '@gdsc/assets/RightArrow.svg';
 
@@ -20,8 +22,8 @@ import {
   CompleteBtnWrapper,
   Container,
   ContentText,
-  EarthImageWrapper,
   Scene,
+  EarthVideo,
 } from './RotateCarousel.style';
 
 export interface RotateCarouselProps {
@@ -44,17 +46,7 @@ const PCRotateCarousel = ({
         <ArrowImg src={LeftArrow} alt='arrow' />
       </Button>
       <Scene>
-        <EarthImageWrapper>
-          <LazyLoadImg
-            image={{
-              src: Earth,
-              alt: 'earth',
-              width: '150%',
-              height: 'auto',
-            }}
-          />
-        </EarthImageWrapper>
-        {/* <EarthImage src={Earth} alt='earth' /> */}
+        <EarthVideo src={EarthWebM} autoPlay={true} muted={true} loop={true} />
         <Carousel style={{ transform: `rotateY(${-angle}deg)` }}>
           {[...Array(6)].map((_, index) => (
             <Card
@@ -92,15 +84,17 @@ const PCRotateCarousel = ({
                 {cardData[index].contentText}
               </ContentText>
               <CompleteBtnWrapper>
-                <CompleteBtn
-                  size='md'
-                  type='button'
-                  color='blue'
-                  backgroundColor='blue'
-                  hoverColor='blue'
-                >
-                  팀블로그 바로가기
-                </CompleteBtn>
+                <Link to='/techblog'>
+                  <CompleteBtn
+                    size='md'
+                    type='button'
+                    color='blue'
+                    backgroundColor='blue'
+                    hoverColor='blue'
+                  >
+                    팀블로그 바로가기
+                  </CompleteBtn>
+                </Link>
               </CompleteBtnWrapper>
             </Card>
           ))}
@@ -113,4 +107,7 @@ const PCRotateCarousel = ({
   );
 };
 
-export default PCRotateCarousel;
+const MemoizedRotateCarousel = memo(PCRotateCarousel);
+MemoizedRotateCarousel.displayName = 'PCRotateCarousel';
+
+export default MemoizedRotateCarousel;
diff --git a/src/pages/main/components/RotateCarousel.style.ts b/src/pages/main/components/RotateCarousel.style.ts
@@ -109,3 +109,13 @@ export const ArrowImg = styled.img`
 export const CompleteBtnWrapper = styled.div`
   width: 90%;
 `;
+
+export const EarthVideo = styled.video`
+  width: 150%;
+  height: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  clip-path: view-box ellipse(44% 44%);
+`;
diff --git a/src/pages/main/components/RotateCarousel.tsx b/src/pages/main/components/RotateCarousel.tsx
@@ -3,8 +3,8 @@ import { useMediaQuery } from 'react-responsive';
 
 import { useCarouselStore } from '@gdsc/store/useCarouselStore';
 
-const PCRotateCarousel = lazy(() => import('./PCRotateCarousel'));
-const TabletRotateCarousel = lazy(
+const MemoizedRotateCarousel = lazy(() => import('./PCRotateCarousel'));
+const MemoizedTabletRotateCarousel = lazy(
   () => import('./Tablet/TabletRotateCarousel')
 );
 
@@ -38,13 +38,13 @@ const RotateCarousel = () => {
   return (
     <>
       {isNotPC ? (
-        <TabletRotateCarousel
+        <MemoizedTabletRotateCarousel
           handlePrevClick={handlePrevClick}
           handleNextClick={handleNextClick}
           rotateAngle={rotateAngle}
         />
       ) : (
-        <PCRotateCarousel
+        <MemoizedRotateCarousel
           handlePrevClick={handlePrevClick}
           handleNextClick={handleNextClick}
           rotateAngle={rotateAngle}

diff --git a/src/pages/main/components/Tablet/TabletRotateCarousel.tsx b/src/pages/main/components/Tablet/TabletRotateCarousel.tsx
@@ -1,10 +1,11 @@
+import { memo } from 'react';
+
 import CompleteBtn from '@gdsc/components/common/button/CompleteBtn';
-import { LazyLoadImg } from '@gdsc/components/common/img/LazyLoadingImg';
 import Text from '@gdsc/components/common/typography/Text';
 
 import { useColTz } from '@gdsc/hooks/useColTz';
 
-import Earth from '@gdsc/assets/Earth.gif';
+import EarthWebM from '@gdsc/assets/Earth.webm';
 import LeftArrow from '@gdsc/assets/LeftArrow.svg';
 import RightArrow from '@gdsc/assets/RightArrow.svg';
 
@@ -21,6 +22,7 @@ import {
   CompleteBtnWrapper,
   ContentText,
   Scene,
+  EarthVideo,
 } from '../RotateCarousel.style';
 import styled from '@emotion/styled';
 
@@ -32,20 +34,13 @@ const TabletRotateCarousel = ({
   const { angle, opacityArray } = useCarouselStore();
   const colTz = useColTz();
 
+  const carouselTransform = `rotateY(${-angle}deg)`;
+
   return (
     <NotPCContainer>
       <Scene>
-        <EarthImageTabletWrapper>
-          <LazyLoadImg
-            image={{
-              src: Earth,
-              alt: 'earth',
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </EarthImageTabletWrapper>
-        <Carousel style={{ transform: `rotateY(${-angle}deg)` }}>
+        <EarthVideo src={EarthWebM} autoPlay={true} muted={true} loop={true} />
+        <Carousel style={{ transform: carouselTransform }}>
           {[...Array(6)].map((_, index) => (
             <Card
               key={index}
@@ -108,7 +103,10 @@ const TabletRotateCarousel = ({
   );
 };
 
-export default TabletRotateCarousel;
+const MemoizedTabletRotateCarousel = memo(TabletRotateCarousel);
+MemoizedTabletRotateCarousel.displayName = 'TabletRotateCarousel';
+
+export default MemoizedTabletRotateCarousel;
 
 const NotPCContainer = styled.div`
   display: flex;
@@ -130,13 +128,6 @@ const ButtonLayout = styled.div`
   transform: translate(-50%, 0%);
 `;
 
-const EarthImageTabletWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 0%;
-  transform: translate(0%, -40%);
-`;
-
 const MobileContentText = styled(ContentText)`
   padding: 10px;
   width: calc(100% - 20px);