fix: 이미지 url 만료로 인한 대체 이미지 삽입

choooz · Mar 18, 2024 · 2d86f1a · 2d86f1a
1 parent 9514bbd
commit 2d86f1a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 30 deletions.
diff --git a/apps/jurumarble/src/app/main/components/Carousel.tsx b/apps/jurumarble/src/app/main/components/Carousel.tsx
@@ -3,6 +3,7 @@ import { useRef } from 'react';
 import { ContentSwiper } from '@monorepo/ui';
 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';
@@ -44,28 +45,33 @@ function Carousel({ hotDrinkList }: Props) {
             },
             modules: [Autoplay],
           }}
-          renderItem={({ drinkId, image, name, manufactureAddress }, index) => (
-            <Slide
-              key={drinkId}
-              onClick={() => router.push(`${Path.DRINK_INFO_PAGE}/${drinkId}`)}
-            >
-              <Box>
-                <DrinkImageWrapper>
-                  <RankginMark>{index + 1}</RankginMark>
-                  <Image
-                    alt="전통주"
-                    src={image}
-                    fill
-                    style={{ borderRadius: '10px' }}
-                  />
-                </DrinkImageWrapper>
-                <DrinkText>
-                  {name}
-                  <AreaName>{manufactureAddress}</AreaName>
-                </DrinkText>
-              </Box>
-            </Slide>
-          )}
+          renderItem={({ drinkId, image, name, manufactureAddress }, index) => {
+            const imageUrl = classifyImageUrl(image);
+            return (
+              <Slide
+                key={drinkId}
+                onClick={() =>
+                  router.push(`${Path.DRINK_INFO_PAGE}/${drinkId}`)
+                }
+              >
+                <Box>
+                  <DrinkImageWrapper>
+                    <RankginMark>{index + 1}</RankginMark>
+                    <Image
+                      alt="전통주"
+                      src={imageUrl}
+                      fill
+                      style={{ borderRadius: '10px' }}
+                    />
+                  </DrinkImageWrapper>
+                  <DrinkText>
+                    {name}
+                    <AreaName>{manufactureAddress}</AreaName>
+                  </DrinkText>
+                </Box>
+              </Slide>
+            );
+          }}
         />
         <CarouselControlContainer>
           <DivideLine />

diff --git a/apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx b/apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 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';
@@ -18,6 +19,9 @@ function HotDrinkVoteContainer() {
 
   const nowTime = new Date().getHours();
 
+  const imageAUrl = classifyImageUrl(drinkAImage);
+  const imageBUrl = classifyImageUrl(drinkBImage);
+
   return (
     <>
       <H2>
@@ -33,7 +37,7 @@ function HotDrinkVoteContainer() {
             <DrinkImageWrapper>
               <Image
                 alt="A 이미지"
-                src={drinkAImage}
+                src={imageAUrl}
                 fill
                 style={{ borderRadius: '80px' }}
               />
@@ -43,7 +47,7 @@ function HotDrinkVoteContainer() {
             <DrinkImageWrapper>
               <Image
                 alt="B 이미지"
-                src={drinkBImage}
+                src={imageBUrl}
                 fill
                 style={{ borderRadius: '80px' }}
               />

diff --git a/apps/jurumarble/src/app/search/components/DrinkItem.tsx b/apps/jurumarble/src/app/search/components/DrinkItem.tsx
@@ -2,6 +2,7 @@ import { RatioFrame } from '@monorepo/ui';
 import Chip from 'components/Chip';
 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';
@@ -29,6 +30,8 @@ function DrinkItem({
 
   const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;
 
+  const imageUrl = classifyImageUrl(image);
+
   return (
     <Container
       onClick={onClickDrinkItem}
@@ -40,7 +43,7 @@ function DrinkItem({
           <Image
             loading="lazy"
             alt={name}
-            src={image}
+            src={imageUrl}
             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,5 +1,6 @@
 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';
@@ -19,6 +20,9 @@ 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();
@@ -38,7 +42,7 @@ function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) {
         isBookmark={isBookmark}
         votedCount={votedCount}
       />
-      <VoteDescription imageA={imageA} imageB={imageB} />
+      <VoteDescription imageA={imageAUrl} imageB={imageBUrl} />
     </Container>
   );
 }

diff --git a/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx
@@ -1,5 +1,6 @@
 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';
@@ -28,6 +29,8 @@ function DrinkItem({
 }: Props) {
   const { id, name, manufacturer, image } = drinkInfo;
 
+  const imageUrl = classifyImageUrl(image);
+
   const { colors } = useTheme();
 
   const { isStampedDrink, postDrinkEnjoy } = useDrinkStampService(id);
@@ -43,7 +46,7 @@ function DrinkItem({
       <ImageWrapper>
         <Image
           alt={name}
-          src={image}
+          src={imageUrl}
           width={88}
           height={88}
           style={{ borderRadius: '10px' }}

diff --git a/apps/jurumarble/src/lib/utils/classifyImageUrl.ts b/apps/jurumarble/src/lib/utils/classifyImageUrl.ts
@@ -4,12 +4,11 @@
 
 import { DrinkImage } from 'public/images';
 
-export function classifyImageUrl(imageUrl: string | null) {
+export function classifyImageUrl(imageUrl: string) {
   const regex =
     /elasticbeanstalk-ap-northeast-2-319210348301\.s3\.ap-northeast-2\.amazonaws\.com/;
   if (imageUrl && regex.test(imageUrl)) {
     return DrinkImage;
-  } else {
-    return imageUrl;
   }
+  return imageUrl;
 }