hotfix: 배포 후 이미지 에러 수정

KUSITMS-29th-TEAM-D · May 16, 2024 · 243be14 · 243be14
1 parent eeacdf5
commit 243be14
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/components/DefineResultPage/CardSection.tsx b/src/components/DefineResultPage/CardSection.tsx
@@ -6,6 +6,7 @@ import styled, { css } from 'styled-components';
 import { ReactComponent as ChangeIcon } from '@/assets/icons/change.svg';
 import { ReactComponent as DownloadIcon } from '@/assets/icons/download.svg';
 import { ReactComponent as KakaoIcon } from '@/assets/icons/kakaoIcon.svg';
+import { CARD_IMAGE } from '@/constants/card';
 import { deviceSizes } from '@/styles/theme/device';
 
 interface CardSectionProps {
@@ -56,7 +57,11 @@ export const CardSection = ({ piece }: CardSectionProps) => {
         onClick={handleClickImage}
       >
         <img
-          src={`/src/assets/cards/${isFront ? 'front' : 'back'}/${piece.toLowerCase()}.png`}
+          src={
+            CARD_IMAGE.find((card) => card.name === piece.toLowerCase())?.[
+              isFront ? 'front' : 'back'
+            ] || ''
+          }
           alt="card"
           ref={captureRef}
         />

diff --git a/src/components/HomePage/PieceSection.tsx b/src/components/HomePage/PieceSection.tsx
@@ -2,6 +2,7 @@ import styled, { keyframes } from 'styled-components';
 
 import { ReactComponent as ArrowIcon } from '@/assets/icons/arrowDown.svg';
 import { Chip } from '@/components/common/Chip/Chip';
+import { CARD_IMAGE } from '@/constants/card';
 import { SectionContainer } from '@/styles';
 import { UserInformation } from '@/types/user.type';
 
@@ -21,7 +22,10 @@ export const PieceSection = ({ userInformation }: PieceSectionProps) => {
           <div className="subtitle">셀피스와 함께 나를 브랜딩해봐요.</div>
         </StyledTitle>
         <StyledCardContainer>
-          <img src={`/src/assets/cards/front/${userInformation.brand}.png`} alt="card" />
+          <img
+            src={CARD_IMAGE.find((card) => card.name === userInformation.brand)?.['front'] || ''}
+            alt="card"
+          />
           {userInformation.chips.map((chip, index) => (
             <StyledBubble key={chip.content} className={`b${index}`} $weight={chip.weight}>
               <span>{chip.content}</span>

diff --git a/src/constants/card.ts b/src/constants/card.ts
@@ -17,12 +17,12 @@ import FrontProjector from '@/assets/cards/front/projector.png';
 
 // TODO: 뒷면 이미지 추가
 export const CARD_IMAGE = [
-  { front: FrontCreator, back: BackCreator },
-  { front: FrontInsighter, back: BackInsighter },
-  { front: FrontInnovator, back: BackInnovator },
-  { front: FrontInventor, back: BackInventor },
-  { front: FrontProjector, back: BackProjector },
-  { front: FrontConnector, back: BackConnector },
-  { front: FrontEncourager, back: BackEncourager },
-  { front: FrontOrganizer, back: BackOrganizer },
+  { name: 'creator', front: FrontCreator, back: BackCreator },
+  { name: 'insighter', front: FrontInsighter, back: BackInsighter },
+  { name: 'innovator', front: FrontInnovator, back: BackInnovator },
+  { name: 'inventor', front: FrontInventor, back: BackInventor },
+  { name: 'projector', front: FrontProjector, back: BackProjector },
+  { name: 'connector', front: FrontConnector, back: BackConnector },
+  { name: 'encourager', front: FrontEncourager, back: BackEncourager },
+  { name: 'organizer', front: FrontOrganizer, back: BackOrganizer },
 ];