feat: set default image if none

BTS-Busan-Trip-Supporter · Sep 28, 2024 · 96b8c33 · 96b8c33
1 parent bac436a
commit 96b8c33
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/public/no-image.svg b/public/no-image.svg
diff --git a/src/components/LoadingCard.tsx b/src/components/LoadingCard.tsx
@@ -1,12 +1,16 @@
 'use client';
 
 import styled from '@emotion/styled';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface Loading {
   $isLoading: boolean;
 }
 
+interface NoImage {
+  $isNoImage: boolean;
+}
+
 export function LoadingCard({
   title,
   imageUrl,
@@ -41,6 +45,7 @@ export function LoadingCard({
         />
         <styles.contents
           $isLoading={imageLoading}
+          $isNoImage={imageUrl === '/no-image.svg'}
           src={imageUrl}
           alt='card-contents'
         />
@@ -58,6 +63,7 @@ const styles = {
     align-items: center;
     gap: 0.7rem;
   `,
+
   card: styled.div<Loading>`
     width: 6.875rem;
     height: 7.6875rem;
@@ -87,17 +93,17 @@ const styles = {
     }
   `,
 
-  contents: styled.img<Loading>`
+  contents: styled.img<Loading & NoImage>`
     object-fit: cover;
     width: 100%;
     height: 100%;
     display: ${(props) => (props.$isLoading ? 'none' : 'block')};
+    scale: ${(props) => (props.$isNoImage ? 0.5 : 1)};
   `,
 
   checkIcon: styled.img`
     width: 1.25rem;
     height: 1.25rem;
-    object-fit: content;
     position: absolute;
     top: 0.5rem;
     right: 0.3rem;

diff --git a/src/components/travel/DetailCard.tsx b/src/components/travel/DetailCard.tsx
@@ -11,6 +11,10 @@ import type { TripItem } from '@/features/trip';
 
 type Times = '오전' | '오후' | '저녁' | '밤' | '기본';
 
+interface NoImage {
+  $isNoImage: boolean;
+}
+
 interface Location {
   item: TripItem;
   selected?: boolean;
@@ -111,7 +115,11 @@ export function DetailCard({
         <styles.addr>
           {tourSpot?.data.addr1} {tourSpot?.data.addr2}
         </styles.addr>
-        <styles.placeImg src={tourSpot?.data.firstImage} alt='place-image' />
+        <styles.placeImg
+          $isNoImage={tourSpot?.data.firstImage === '/no-image.svg'}
+          src={tourSpot?.data.firstImage}
+          alt='place-image'
+        />
       </styles.placeCon>
       <styles.timeCardCon>
         <TimeCard
@@ -206,11 +214,12 @@ const styles = {
     gap: 1rem;
   `,
 
-  placeImg: styled.img`
+  placeImg: styled.img<NoImage>`
     width: 100%;
     height: 16rem;
     border-radius: 8px;
     margin-top: 0.8rem;
+    scale: ${(props) => (props.$isNoImage ? 0.5 : 1)};
   `,
 
   xIcon: styled.img`

diff --git a/src/features/tour-spot/tour-spot.api.ts b/src/features/tour-spot/tour-spot.api.ts
@@ -1,8 +1,8 @@
 import axios from 'axios';
 
 import {
-  type GetTourSpotsDTO,
   type GetTourSpotContentDTO,
+  type GetTourSpotsDTO,
 } from './tour-spot.dto';
 
 export const getTourSpots = (keyword: string, sigunguCode: string) =>
@@ -19,4 +19,12 @@ export const getTourSpotContents = (contentId: string, contentTypeId: string) =>
         contentTypeId,
       },
     })
-    .then((res) => res.data);
+    .then((res) => res.data)
+    .then((res) => ({
+      ...res,
+      data: {
+        ...res.data,
+        firstImage:
+          res.data.firstImage === '' ? '/no-image.svg' : res.data.firstImage,
+      },
+    }));
diff --git a/src/features/trip/trip.api.ts b/src/features/trip/trip.api.ts
@@ -2,13 +2,13 @@ import axios from 'axios';
 
 import type {
   GetTripScheduleResponseDTO,
-  PutTripActivityHistoryDTO,
-  PutTripActivityRecommendDTO,
-  PutTripScheduleRequestDTO,
+  GetTripSchedulesResponseDTO,
   PostDayTripRequestDTO,
   PostDayTripResponseDTO,
   PostTripScheduleDTO,
-  GetTripSchedulesResponseDTO,
+  PutTripActivityHistoryDTO,
+  PutTripActivityRecommendDTO,
+  PutTripScheduleRequestDTO,
 } from './trip.dto';
 
 export const getTripSchedules = () =>
@@ -48,4 +48,12 @@ export const postTripSchedule = (body: PostTripScheduleDTO) =>
 export const postDayTrip = (body: PostDayTripRequestDTO) =>
   axios
     .post<PostDayTripResponseDTO>(`/p-travel-log/trips/day`, body)
-    .then((res) => res.data);
+    .then((res) => res.data)
+    .then((res) => ({
+      status: res.status,
+      data: res.data.map((location) =>
+        location.imageUrl === ''
+          ? { ...location, imageUrl: '/no-image.svg' }
+          : location,
+      ),
+    }));