Merge pull request #219 from choooz/JR-898-fix-fail-to-load-image

[JR-898] 전통주 이미지가 로드되지 않는 이슈 해결
choooz · Mar 22, 2024 · 42db088 · 42db088
2 parents 234e6e5 + 6016add
commit 42db088
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 64 deletions.
diff --git a/apps/jurumarble/src/app/main/components/Carousel.tsx b/apps/jurumarble/src/app/main/components/Carousel.tsx
@@ -1,10 +1,9 @@
 import { useRef } from 'react';
 
 import { ContentSwiper } from '@monorepo/ui';
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
 import Path from 'lib/Path';
 import { GetHotDrinkResponse } from 'lib/apis/drink';
-import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { SvgIcPrevious, SvgNext } from 'src/assets/icons/components';
 import styled, { css } from 'styled-components';
@@ -46,7 +45,6 @@ function Carousel({ hotDrinkList }: Props) {
             modules: [Autoplay],
           }}
           renderItem={({ drinkId, image, name, manufactureAddress }, index) => {
-            const imageUrl = classifyImageUrl(image);
             return (
               <Slide
                 key={drinkId}
@@ -55,15 +53,15 @@ function Carousel({ hotDrinkList }: Props) {
                 }
               >
                 <Box>
-                  <DrinkImageWrapper>
+                  <DrinkImageContainer>
                     <RankginMark>{index + 1}</RankginMark>
-                    <Image
-                      alt="전통주"
-                      src={imageUrl}
+                    <DrinkImageWrapper
+                      alt={name}
+                      src={image}
                       fill
                       style={{ borderRadius: '10px' }}
                     />
-                  </DrinkImageWrapper>
+                  </DrinkImageContainer>
                   <DrinkText>
                     {name}
                     <AreaName>{manufactureAddress}</AreaName>
@@ -113,7 +111,7 @@ const Box = styled.div`
     `}
 `;
 
-const DrinkImageWrapper = styled.div`
+const DrinkImageContainer = styled.div`
   width: 100px;
   height: 100px;
   position: relative;

diff --git a/apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx b/apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx
@@ -1,8 +1,7 @@
 'use client';
 
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
 import Path from 'lib/Path';
-import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import styled, { css } from 'styled-components';
 
@@ -19,9 +18,6 @@ function HotDrinkVoteContainer() {
 
   const nowTime = new Date().getHours();
 
-  const imageAUrl = classifyImageUrl(drinkAImage);
-  const imageBUrl = classifyImageUrl(drinkBImage);
-
   return (
     <>
       <H2>
@@ -34,24 +30,24 @@ function HotDrinkVoteContainer() {
       >
         <VoteImages>
           <DrinkImageBox color="orange">
-            <DrinkImageWrapper>
-              <Image
-                alt="A 이미지"
-                src={imageAUrl}
+            <ImageWrapper>
+              <DrinkImageWrapper
+                alt="A이미지"
+                src={drinkAImage}
                 fill
                 style={{ borderRadius: '80px' }}
               />
-            </DrinkImageWrapper>
+            </ImageWrapper>
           </DrinkImageBox>
           <DrinkImageBox color="mint">
-            <DrinkImageWrapper>
-              <Image
-                alt="B 이미지"
-                src={imageBUrl}
+            <ImageWrapper>
+              <DrinkImageWrapper
+                alt="B이미지"
+                src={drinkBImage}
                 fill
                 style={{ borderRadius: '80px' }}
               />
-            </DrinkImageWrapper>
+            </ImageWrapper>
           </DrinkImageBox>
         </VoteImages>
         <VoteTitleWrapper>
@@ -120,7 +116,7 @@ const DrinkImageBox = styled.div<{ color: string }>`
     `}
 `;
 
-const DrinkImageWrapper = styled.div`
+const ImageWrapper = styled.div`
   width: 80px;
   height: 80px;
   position: relative;

diff --git a/apps/jurumarble/src/app/my/components/VoteDescription.tsx b/apps/jurumarble/src/app/my/components/VoteDescription.tsx
@@ -1,5 +1,6 @@
 import AorBMark from 'components/AorBMark';
-import Image, { StaticImageData } from 'next/image';
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
+import { StaticImageData } from 'next/image';
 import styled, { css } from 'styled-components';
 
 interface Props {
@@ -13,7 +14,7 @@ function VoteDescription({ imageA, imageB }: Props) {
       <ImageContainer>
         <ImageWrapper>
           {imageA ? (
-            <Image
+            <DrinkImageWrapper
               src={imageA}
               alt="A이미지"
               fill
@@ -29,7 +30,7 @@ function VoteDescription({ imageA, imageB }: Props) {
         </ImageWrapper>
         <ImageWrapper>
           {imageB ? (
-            <Image
+            <DrinkImageWrapper
               src={imageB}
               alt="B이미지"
               fill

diff --git a/apps/jurumarble/src/app/search/components/DrinkItem.tsx b/apps/jurumarble/src/app/search/components/DrinkItem.tsx
@@ -1,9 +1,8 @@
 import { RatioFrame } from '@monorepo/ui';
 import Chip from 'components/Chip';
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
 import { transitions } from 'lib/styles';
 import { isLogin } from 'lib/utils/auth';
-import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
-import Image from 'next/image';
 import useDrinkStampService from 'services/useDrinkStampService';
 import SvgStamp from 'src/assets/icons/components/IcStamp';
 import { DrinkInfo } from 'src/types/drink';
@@ -30,8 +29,6 @@ function DrinkItem({
 
   const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;
 
-  const imageUrl = classifyImageUrl(image);
-
   return (
     <Container
       onClick={onClickDrinkItem}
@@ -40,10 +37,10 @@ function DrinkItem({
     >
       <ImageWrapper>
         <RatioFrame ratio="square">
-          <Image
+          <DrinkImageWrapper
             loading="lazy"
             alt={name}
-            src={imageUrl}
+            src={image}
             fill
             style={{ borderRadius: '10px' }}
           />

diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx
@@ -1,6 +1,5 @@
 import Path from 'lib/Path';
 import { isLogin } from 'lib/utils/auth';
-import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
 import { useRouter } from 'next/navigation';
 import useBookmarkService from 'services/useBookmarkService';
 import { Content } from 'src/types/vote';
@@ -20,9 +19,6 @@ interface Props {
 function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) {
   const { voteId, region, title, imageA, imageB, votedCount } = voteDrink;
 
-  const imageAUrl = classifyImageUrl(imageA);
-  const imageBUrl = classifyImageUrl(imageB);
-
   const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
 
   const router = useRouter();
@@ -42,7 +38,7 @@ function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) {
         isBookmark={isBookmark}
         votedCount={votedCount}
       />
-      <VoteDescription imageA={imageAUrl} imageB={imageBUrl} />
+      <VoteDescription imageA={imageA} imageB={imageB} />
     </Container>
   );
 }

diff --git a/apps/jurumarble/src/app/search/components/VoteDescription.tsx b/apps/jurumarble/src/app/search/components/VoteDescription.tsx
@@ -1,20 +1,20 @@
-import Image, { StaticImageData } from 'next/image';
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
 import styled from 'styled-components';
 
 interface Props {
-  imageA: string | StaticImageData;
-  imageB: string | StaticImageData;
+  imageA: string;
+  imageB: string;
 }
 
 function VoteDescription({ imageA, imageB }: Props) {
   return (
     <Container>
       <ImageWrapper>
         <LeftVote>
-          <Image src={imageA} alt="A 이미지" fill />
+          <DrinkImageWrapper src={imageA} alt="A 이미지" fill />
         </LeftVote>
         <RightVote>
-          <Image src={imageB} alt="B 이미지" fill />
+          <DrinkImageWrapper src={imageB} alt="B 이미지" fill />
         </RightVote>
       </ImageWrapper>
     </Container>

diff --git a/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx
@@ -1,7 +1,6 @@
+import DrinkImageWrapper from 'components/DrinkImageWrapper';
 import { transitions } from 'lib/styles';
 import { isLogin } from 'lib/utils/auth';
-import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
-import Image from 'next/image';
 import useDrinkStampService from 'services/useDrinkStampService';
 import SvgStamp from 'src/assets/icons/components/IcStamp';
 import { DrinkInfo } from 'src/types/drink';
@@ -29,8 +28,6 @@ function DrinkItem({
 }: Props) {
   const { id, name, manufacturer, image } = drinkInfo;
 
-  const imageUrl = classifyImageUrl(image);
-
   const { colors } = useTheme();
 
   const { isStampedDrink, postDrinkEnjoy } = useDrinkStampService(id);
@@ -44,9 +41,9 @@ function DrinkItem({
       selected={selectedDrinkList?.includes(name)}
     >
       <ImageWrapper>
-        <Image
+        <DrinkImageWrapper
           alt={name}
-          src={imageUrl}
+          src={image}
           width={88}
           height={88}
           style={{ borderRadius: '10px' }}

diff --git a/apps/jurumarble/src/components/DrinkImageWrapper.tsx b/apps/jurumarble/src/components/DrinkImageWrapper.tsx
@@ -0,0 +1,10 @@
+import { ImageProps } from 'next/image';
+import { DrinkImage } from 'public/images';
+
+import FallbackImage from './FallbackImage';
+
+function DrinkImageWrapper({ ...rest }: ImageProps) {
+  return <FallbackImage fallbackSrc={DrinkImage} {...rest} />;
+}
+
+export default DrinkImageWrapper;
diff --git a/apps/jurumarble/src/components/FallbackImage.tsx b/apps/jurumarble/src/components/FallbackImage.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import Image, { ImageProps, StaticImageData } from 'next/image';
+
+interface Props extends ImageProps {
+  fallbackSrc: string | StaticImageData;
+}
+
+function FallbackImage({ alt, src, fallbackSrc, ...rest }: Props) {
+  const [error, setError] = useState(false);
+  return (
+    <Image
+      alt={alt}
+      src={error === true ? fallbackSrc : src}
+      onError={() => setError(true)}
+      {...rest}
+    />
+  );
+}
+
+export default FallbackImage;
diff --git a/apps/jurumarble/src/lib/utils/classifyImageUrl.ts b/apps/jurumarble/src/lib/utils/classifyImageUrl.ts