�merge: 이미지 없을 경우 로고 표시 (#107)

TRIP-SPOT · Oct 13, 2024 · 9cfa6d3 · 9cfa6d3
2 parents 696c82b + 24a66e3
commit 9cfa6d3
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/packages/react-native/src/components/common/Card.tsx b/packages/react-native/src/components/common/Card.tsx
@@ -9,6 +9,7 @@ import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 import useSpotLikeMutation from '@/apis/mutations/useSpotLikeMutation';
 import MutationLoadingModal from './MutationLoadingModal';
 import { MySpotResponse } from '@/apis/queries/mypage/useMySpotsQuery';
+import SPOTLogo from '@/assets/SPOTLogo';
 
 interface CardProps {
   data: SpotCardData | MySpotResponse;
@@ -74,7 +75,7 @@ function Default({ data, size = 260 }: CardProps) {
   return (
     <ImageBackground
       source={{ uri: posterUrl }}
-      className="rounded-2xl overflow-hidden bg-SPOT-black"
+      className={`rounded-2xl overflow-hidden ${!posterUrl ? 'bg-SPOT-red' : 'bg-SPOT-black'}`}
       style={{ width: size, aspectRatio: 3 / 4 }}
     >
       <MutationLoadingModal
@@ -87,6 +88,11 @@ function Default({ data, size = 260 }: CardProps) {
         }
         activeOpacity={1}
       >
+        {!posterUrl && (
+          <View className="items-center justify-center top-5 flex-1">
+            <SPOTLogo width={100} color="black" />
+          </View>
+        )}
         <View className="flex-row justify-end items-center">
           <TouchableOpacity
             className="flex-row items-center p-2"

diff --git a/packages/react-native/src/components/detail/AroundCard.tsx b/packages/react-native/src/components/detail/AroundCard.tsx
@@ -2,6 +2,7 @@ import { ImageBackground, TouchableOpacity, View } from 'react-native';
 import { Font, CheckBox } from 'design-system';
 import { SpotResponse } from '@/apis/queries/spot/useSpotDetailQuery';
 import DotMenuIcon from '@/assets/DotMenuIcon';
+import SPOTLogo from '@/assets/SPOTLogo';
 
 interface AroundCardProps {
   data: SpotResponse;
@@ -25,7 +26,7 @@ export default function AroundCard({
   return (
     <ImageBackground
       source={{ uri: image }}
-      className="w-[120px] h-[160px] rounded-lg overflow-hidden"
+      className={`w-[120px] h-[160px] rounded-lg overflow-hidden ${!image ? 'bg-SPOT-red' : 'bg-SPOT-black'}`}
     >
       <TouchableOpacity
         className="flex-1 justify-end bg-black/30"
@@ -43,6 +44,11 @@ export default function AroundCard({
             />
           </View>
         )}
+        {!image && (
+          <View className="items-center -top-3">
+            <SPOTLogo width={50} color="black" />
+          </View>
+        )}
         <View className="p-2 bg-[#191919]">
           <Font.Bold type="body1" color="white" ellipsis>
             {title}

diff --git a/packages/react-native/src/components/gamification/QuizCard.tsx b/packages/react-native/src/components/gamification/QuizCard.tsx
@@ -6,6 +6,7 @@ import { StackNavigation } from '@/types/navigation';
 import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 import useToggle from '@/hooks/useToggle';
 import FilterExperienceModal from './FilterExperienceModal';
+import SPOTLogo from '@/assets/SPOTLogo';
 
 interface QuizCardProps {
   quizData: QuizzesResponse;
@@ -57,7 +58,13 @@ export default function QuizCard({ quizData }: QuizCardProps) {
           borderTopLeftRadius: 25,
           borderTopRightRadius: 25,
         }}
+        className="bg-SPOT-red/30"
       />
+      {!quizData.imageUrl && (
+        <View className="items-center justify-center absolute w-full h-3/4">
+          <SPOTLogo color="black" />
+        </View>
+      )}
       <View className="bg-[#191919] rounded-b-3xl p-3">
         <View className="flex gap-1">
           <View className="justify-center items-center gap-1 flex flex-col">

diff --git a/packages/react-native/src/components/mypage/MySpotBlock.tsx b/packages/react-native/src/components/mypage/MySpotBlock.tsx
@@ -8,6 +8,7 @@ import HeartIcon from '@/assets/HeartIcon';
 import { StackNavigation } from '@/types/navigation';
 import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 import MutationLoadingModal from '../common/MutationLoadingModal';
+import SPOTLogo from '@/assets/SPOTLogo';
 
 interface MySpotBlockProps {
   mySpot: MySpotResponse;
@@ -78,7 +79,7 @@ export default function MySpotBlock({ mySpot, width, gap }: MySpotBlockProps) {
     <ImageBackground
       source={{ uri: posterUrl }}
       style={{ width, height: width * 1.3, margin: gap / 2 }}
-      className="bg-red-300 rounded-lg overflow-hidden"
+      className="bg-SPOT-red/80 rounded-lg overflow-hidden"
     >
       <MutationLoadingModal
         isSubmiting={isLikePending || isCancelLikePending}
@@ -87,6 +88,9 @@ export default function MySpotBlock({ mySpot, width, gap }: MySpotBlockProps) {
         className="flex-1 justify-end bg-black/40"
         onPress={handleClick}
       >
+        <View className="items-center">
+          <SPOTLogo width={120} color="black" />
+        </View>
         <View className="flex-row justify-end items-center">
           <TouchableOpacity
             className="flex-row items-center p-2"

diff --git a/packages/react-native/src/pages/Home/Home.tsx b/packages/react-native/src/pages/Home/Home.tsx
@@ -53,15 +53,13 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {
             renderItem={({ item }) => <Card data={item} size={180} />}
           />
         </View>
-        {nearbySpots.length > 0 && (
-          <View>
-            <CardSlider
-              title="내 주변 SPOT!"
-              data={nearbySpots}
-              renderItem={({ item }) => <Card data={item} size={180} />}
-            />
-          </View>
-        )}
+        <View>
+          <CardSlider
+            title="내 주변 SPOT!"
+            data={nearbySpots}
+            renderItem={({ item }) => <Card data={item} size={180} />}
+          />
+        </View>
         <View>
           <CardSlider
             title="이 여행지는 어때요?"