From 4d5f42192d4eac77f42d1e4337c40f6612a1b7fa Mon Sep 17 00:00:00 2001
From: HBSPS <wiyeong79@gmail.com>
Date: Sun, 13 Oct 2024 22:58:32 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=99=88=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=82=B4=20=EC=A3=BC=EB=B3=80=20SPOT=20=EC=97=86=EB=8A=94=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=AC=B8=EA=B5=AC=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-native/src/pages/Home/Home.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react-native/src/pages/Home/Home.tsx b/packages/react-native/src/pages/Home/Home.tsx
index c64eb1a5..9df4a7f6 100644
--- 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="이 여행지는 어때요?"

From 24a66e3a21ac43d0e7ac5a53c2ea9da34a9dedb0 Mon Sep 17 00:00:00 2001
From: HBSPS <wiyeong79@gmail.com>
Date: Sun, 13 Oct 2024 23:38:14 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=A1=9C=EA=B3=A0=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-native/src/components/common/Card.tsx      | 8 +++++++-
 .../react-native/src/components/detail/AroundCard.tsx     | 8 +++++++-
 .../react-native/src/components/gamification/QuizCard.tsx | 7 +++++++
 .../react-native/src/components/mypage/MySpotBlock.tsx    | 6 +++++-
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/src/components/common/Card.tsx b/packages/react-native/src/components/common/Card.tsx
index 6d063fff..2653e7c9 100644
--- 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
index bcc0bf9d..7ea30374 100644
--- 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
index ef15be66..e012dce2 100644
--- 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
index bb1662ec..9049b59c 100644
--- 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"