[FE] feat : 이미지 스켈레톤 적용

frontend/src/components/index.tsx

@@ -3,3 +3,4 @@ export * from './common';
 export * from './error';
 export * from './highlight/components';
 export * from './login';
+export * from './skeleton';

frontend/src/components/skeleton/ImgWithSkeleton/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+import * as S from './style';
+
+interface ImgWithSkeletonProps {
+  children: React.ReactElement<React.ImgHTMLAttributes<HTMLImageElement>>;
+  imgWidth: string;
+  imgHeight: string;
+}
+
+const ImgWithSkeleton = ({ children, imgWidth, imgHeight }: ImgWithSkeletonProps) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const handleImgLoad = () => {
+    setIsLoaded(true);
+  };
+
+  return (
+    <S.Container $width={imgWidth} $height={imgHeight}>
+      {!isLoaded && <S.ImgSkeleton />}
+      <S.ImgWrapper $isLoaded={isLoaded}>
+        {React.cloneElement(children, {
+          onLoad: handleImgLoad,
+        })}
+      </S.ImgWrapper>
+    </S.Container>
+  );
+};
+
+export default ImgWithSkeleton;

frontend/src/components/skeleton/ImgWithSkeleton/style.ts

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+interface ContainerProps {
+  $width: string;
+  $height: string;
+}
+export const Container = styled.div<ContainerProps>`
+  position: relative;
+  width: ${(props) => props.$width};
+  height: ${(props) => props.$height};
+`;
+export const ImgWrapper = styled.div<{ $isLoaded: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: ${(props) => (props.$isLoaded ? 1 : 0)};
+
+  transition: opacity 300ms;
+`;
+export const ImgSkeleton = styled.div`
+  width: 100%;
+  height: 100%;
+
+  background-image: linear-gradient(
+    135deg,
+    ${({ theme }) => theme.colors.lightGray} 40%,
+    rgba(246, 246, 246, 0.89) 50%,
+    ${({ theme }) => theme.colors.lightGray} 85%
+  );
+  background-size: 200% 100%;
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+
+  animation: skeleton-animation 1.5s infinite linear;
+
+  @keyframes skeleton-animation {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+`;

frontend/src/components/skeleton/index.tsx

@@ -0,0 +1 @@
+export { default as ImgWithSkeleton } from './ImgWithSkeleton';

frontend/src/pages/HomePage/components/InfinityCarousel/index.tsx

@@ -2,8 +2,11 @@ import { useRef, useState, useEffect } from 'react';
 
 import nextArrowIcon from '@/assets/nextArrow.svg';
 import prevArrowIcon from '@/assets/prevArrow.svg';
+import { ImgWithSkeleton } from '@/components';
 import { breakpoints } from '@/styles/theme';
 
+import useSlideImgSize from '../../hooks/useSlideImgSize';
+
 import * as S from './styles';
 
 export interface Slide {
@@ -37,6 +40,7 @@ const InfinityCarousel = ({ slideList }: InfinityCarouselProps) => {
   const [deltaX, setDeltaX] = useState(0); // 현재 드래그 중인 위치와 시작 위치 사이의 차이
 
   const slideRef = useRef<HTMLDivElement>(null);
+  const { imgSize } = useSlideImgSize({ slideRef });
 
   const slideLength = slideList.length;
   // 첫 슬라이드와 마지막 슬라이드의 복제본을 각각 맨 뒤, 맨 처음에 추가
@@ -151,7 +155,9 @@ const InfinityCarousel = ({ slideList }: InfinityCarouselProps) => {
         {clonedSlideList.map((slide, index) => (
           <S.SlideItem key={index}>
             <S.SlideContent>
-              <img src={slide.imageSrc} alt={slide.alt} />
+              <ImgWithSkeleton imgHeight={imgSize.height} imgWidth={imgSize.width}>
+                <S.SlideContentImg src={slide.imageSrc} alt={slide.alt} />
+              </ImgWithSkeleton>
             </S.SlideContent>
           </S.SlideItem>
         ))}

frontend/src/pages/HomePage/components/InfinityCarousel/styles.ts

@@ -46,10 +46,10 @@ export const SlideContent = styled.div`
   justify-content: space-between;
 
   width: 100%;
+`;
 
-  img {
-    width: 80%;
-  }
+export const SlideContentImg = styled.img`
+  width: 100%;
 `;
 
 export const PrevButton = styled.button`

frontend/src/pages/HomePage/hooks/useSlideImgSize.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+import { debounce } from '@/utils';
+
+const DEBOUNCE_TIME = 300;
+
+interface UseSlideImgSizeProps {
+  slideRef: React.RefObject<HTMLDivElement>;
+}
+const useSlideImgSize = ({ slideRef }: UseSlideImgSizeProps) => {
+  interface ImgSize {
+    width: string;
+    height: string;
+  }
+  const [imgSize, setImgSize] = useState<ImgSize>({ width: '', height: '' });
+
+  const updateImgSize = () => {
+    if (!slideRef.current) return;
+    const slideDomRect = slideRef.current.getBoundingClientRect();
+    const width = Math.ceil(slideDomRect.width * 0.8 * 0.1);
+    const height = width * 0.61;
+    setImgSize({ width: `${width}rem`, height: `${height}rem` });
+  };
+  const debouncedUpdateImgSize = debounce(updateImgSize, DEBOUNCE_TIME);
+
+  useEffect(() => {
+    updateImgSize();
+    document.addEventListener('resize', debouncedUpdateImgSize);
+
+    return () => {
+      document.removeEventListener('resize', debouncedUpdateImgSize);
+    };
+  }, [slideRef]);
+
+  return { imgSize };
+};
+
+export default useSlideImgSize;

frontend/src/pages/ReviewZonePage/index.tsx

@@ -3,7 +3,8 @@ import { useNavigate } from 'react-router';
 import { useRecoilState } from 'recoil';
 
 import ReviewZoneIcon from '@/assets/reviewZone.svg';
-import { Button } from '@/components';
+import { Button, ImgWithSkeleton } from '@/components';
+// TODO: ROUTE 상수명을 단수로 고치기
 import { ROUTE } from '@/constants/route';
 import { useGetReviewGroupData, useSearchParamAndQuery, useModals } from '@/hooks';
 import { reviewRequestCodeAtom } from '@/recoil';
@@ -15,6 +16,11 @@ import * as S from './styles';
 const MODAL_KEYS = {
   content: 'CONTENT_MODAL',
 };
+const BUTTON_SIZE = {
+  width: '28rem',
+  height: '8.5rem',
+};
+const IMG_HEIGHT = '15rem';
 
 const ReviewZonePage = () => {
   const { isOpen, openModal, closeModal } = useModals();
@@ -46,29 +52,21 @@ const ReviewZonePage = () => {
 
   return (
     <S.ReviewZonePage>
-      <S.ReviewZoneMainImg src={ReviewZoneIcon} alt="" />
+      <ImgWithSkeleton imgWidth={BUTTON_SIZE.width} imgHeight={IMG_HEIGHT}>
+        <S.ReviewZoneMainImg src={ReviewZoneIcon} alt="" $height={IMG_HEIGHT} />
+      </ImgWithSkeleton>
       <S.ReviewGuideContainer>
         <S.ReviewGuide>{`${reviewGroupData.projectName}${calculateParticle({ target: reviewGroupData.projectName, particles: { withFinalConsonant: '을', withoutFinalConsonant: '를' } })} 함께한`}</S.ReviewGuide>
         <S.ReviewGuide>{`${reviewGroupData.revieweeName}의 리뷰 공간이에요`}</S.ReviewGuide>
       </S.ReviewGuideContainer>
       <S.ButtonContainer>
-        <Button
-          styleType="primary"
-          type="button"
-          onClick={handleReviewWritingButtonClick}
-          style={{ width: '28rem', height: '8.5rem' }}
-        >
+        <Button styleType="primary" type="button" onClick={handleReviewWritingButtonClick} style={BUTTON_SIZE}>
           <S.ButtonTextContainer>
             <S.ButtonText>리뷰 쓰기</S.ButtonText>
             <S.ButtonDescription>작성한 리뷰는 익명으로 제출돼요</S.ButtonDescription>
           </S.ButtonTextContainer>
         </Button>
-        <Button
-          styleType="secondary"
-          type="button"
-          onClick={handleReviewListButtonClick}
-          style={{ width: '28rem', height: '8.5rem' }}
-        >
+        <Button styleType="secondary" type="button" onClick={handleReviewListButtonClick} style={BUTTON_SIZE}>
           <S.ButtonTextContainer>
             <S.ButtonText>리뷰 확인하기</S.ButtonText>
             <S.ButtonDescription>비밀번호로 내가 받은 리뷰를 확인할 수 있어요</S.ButtonDescription>

frontend/src/pages/ReviewZonePage/styles.ts

@@ -14,9 +14,9 @@ export const ReviewZonePage = styled.div`
   justify-content: center;
 `;
 
-export const ReviewZoneMainImg = styled.img`
+export const ReviewZoneMainImg = styled.img<{ $height: string }>`
   width: 43rem;
-  height: 23rem;
+  height: ${(props) => props.$height};
 `;
 
 export const ReviewGuideContainer = styled.div`
@@ -25,6 +25,7 @@ export const ReviewGuideContainer = styled.div`
   align-items: center;
   justify-content: center;
 
+  margin-top: 3rem;
   padding-left: 0.2rem;
 `;