fix: qa 적용

packages/react-native/src/pages/Home.tsx

@@ -42,13 +42,14 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {
             renderItem={({ item }) => <Card data={item} size={180} />}
           />
         </View>
+        {/* FIXME: 추후 주석 제거
         <View>
           <CardSlider
             title="이 여행지는 어때요?"
             data={homeSpots}
             renderItem={({ item }) => <Card data={item} size={180} />}
           />
-        </View>
+        </View> */}
       </View>
     </BackGroundGradient>
   );

packages/react-native/src/pages/Landing/Landing1.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing1() {
   return (
     <View className="flex-1 items-center">
@@ -23,8 +25,12 @@ export default function Landing1() {
         />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing1.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing1.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing2.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing2() {
   return (
     <View className="flex-1 items-center">
@@ -25,8 +27,12 @@ export default function Landing2() {
         />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing2.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing2.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing3.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing3() {
   return (
     <View className="flex-1 items-center">
@@ -18,8 +20,12 @@ export default function Landing3() {
         <WordBreak width={300} type="body2" color="white" content="" />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing3.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing3.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing4.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing4() {
   return (
     <View className="flex-1 items-center">
@@ -24,8 +26,12 @@ export default function Landing4() {
         <WordBreak width={300} type="body2" color="white" content="" />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing4.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing4.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing5.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing5() {
   return (
     <View className="flex-1 items-center">
@@ -24,8 +26,12 @@ export default function Landing5() {
         <WordBreak width={300} type="body2" color="white" content="" />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing5.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing5.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing6.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing6() {
   return (
     <View className="flex-1 items-center">
@@ -24,8 +26,12 @@ export default function Landing6() {
         <WordBreak width={300} type="body2" color="white" content="" />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing6.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing6.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/Landing/Landing7.tsx

@@ -1,7 +1,9 @@
 import { Font } from 'design-system';
-import { Image, View } from 'react-native';
+import { Dimensions, Image, View } from 'react-native';
 import WordBreak from '@/components/common/WordBreak';
 
+const { width } = Dimensions.get('window');
+
 export default function Landing7() {
   return (
     <View className="flex-1 items-center">
@@ -23,8 +25,12 @@ export default function Landing7() {
         />
       </View>
       <View>
-        {/* eslint-disable-next-line global-require */}
-        <Image source={require('../../assets/landing/landing7.png')} />
+        <Image
+          // eslint-disable-next-line global-require
+          source={require('../../assets/landing/landing7.png')}
+          style={{ width, height: undefined, aspectRatio: 2.9 / 5 }}
+          resizeMode="contain"
+        />
       </View>
     </View>
   );

packages/react-native/src/pages/TOS.tsx

@@ -20,10 +20,17 @@ export default function TOS() {
   const [selectedAgree, setSelectedAgree] = useState<keyof Agree>();
   const navigation = useNavigation<StackNavigation<'TOS'>>();
 
+  const selectedAll = agree.TOS && agree.marketing && agree.privacyCollection;
+
   const toggleAgree = (agreeType: keyof Agree) => {
     setAgree((prev) => ({ ...prev, [agreeType]: !prev[agreeType] }));
   };
 
+  const toggleAll = () => {
+    if (selectedAll) setAgree({});
+    else setAgree({ TOS: true, marketing: true, privacyCollection: true });
+  };
+
   const isInValid = !agree.TOS || !agree.privacyCollection;
 
   const handlePressButton = () => {
@@ -92,11 +99,9 @@ export default function TOS() {
           <View className="mt-6 flex flex-row gap-2.5 items-center justify-start">
             <View>
               <CheckBox
-                selected={
-                  agree.TOS && agree.marketing && agree.privacyCollection
-                }
+                selected={selectedAll}
                 iconSize={20}
-                onPress={() => setAgree({})}
+                onPress={toggleAll}
               />
             </View>
             <View>

packages/react-native/src/pages/TripPlanner/TripPlannerDetail.tsx

@@ -11,6 +11,7 @@ import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 import AroundCard from '@/components/detail/AroundCard';
 import SpotDetailBottomSheet from '@/components/common/SpotDetailBottomSheet';
 import useTripPlanMySpotQuery from '@/apis/queries/tripPlan/useTripPlanMySpotQuery';
+import Spacing from '@/components/common/Spacing';
 
 export default withSuspense(function TripPlannerDetail() {
   const route = useRoute<StackRouteProps<'TripPlanner/Detail'>>();
@@ -35,62 +36,72 @@ export default withSuspense(function TripPlannerDetail() {
           })}
         </Font>
       </View>
-      <View className="rounded-2xl bg-SPOT-white h-full mt-5 ">
-        <ScrollView className="px-5 py-6">
+      <View className="rounded-t-2xl bg-SPOT-white flex-1 mt-5 ">
+        <Spacing height={10} />
+        <ScrollView className="px-5 flex-1 ">
+          <Font.Bold type="body1" color="black">
+            일정
+          </Font.Bold>
+          <Spacing height={10} />
           <TouchableOpacity
+            className="rounded-md overflow-hidden"
             onPress={() =>
               navigation.navigate('TripPlanner/EditPlan', { tripId })
             }
           >
-            {/* eslint-disable-next-line global-require */}
-            <Image source={require('../../assets/plan.png')} />
+            <Image
+              // eslint-disable-next-line global-require
+              source={require('../../assets/plan.png')}
+              style={{ width: 'auto', height: undefined, aspectRatio: 5 / 2 }}
+            />
           </TouchableOpacity>
+          <Spacing height={10} />
           <View>
-            {data.restaurant.length > 0 && (
-              <CardSlider
-                gap={8}
-                title="담은 음식점"
-                titleColor="black"
-                data={data.restaurant}
-                titleGap={4}
-                renderItem={({ item }) => (
-                  <AroundCard
-                    data={item}
-                    onCardClick={() => setSelectedSpot(item.contentId)}
-                  />
-                )}
-              />
-            )}
-            {data.attraction.length > 0 && (
-              <CardSlider
-                gap={8}
-                title="담은 관광지"
-                titleColor="black"
-                data={data.attraction}
-                titleGap={4}
-                renderItem={({ item }) => (
-                  <AroundCard
-                    data={item}
-                    onCardClick={() => setSelectedSpot(item.contentId)}
-                  />
-                )}
-              />
-            )}
-            {data.accommodation.length > 0 && (
-              <CardSlider
-                gap={8}
-                title="담은 숙소"
-                titleColor="black"
-                data={data.accommodation}
-                titleGap={4}
-                renderItem={({ item }) => (
-                  <AroundCard
-                    data={item}
-                    onCardClick={() => setSelectedSpot(item.contentId)}
-                  />
-                )}
-              />
-            )}
+            <CardSlider
+              gap={8}
+              title="담은 음식점"
+              titleColor="black"
+              data={data.restaurant}
+              titleGap={4}
+              renderItem={({ item }) => (
+                <AroundCard
+                  data={item}
+                  onCardClick={() => setSelectedSpot(item.contentId)}
+                />
+              )}
+            />
+            {data.restaurant.length === 0 && <Spacing height={160} />}
+            <Spacing height={10} />
+            <CardSlider
+              gap={8}
+              title="담은 관광지"
+              titleColor="black"
+              data={data.attraction}
+              titleGap={4}
+              renderItem={({ item }) => (
+                <AroundCard
+                  data={item}
+                  onCardClick={() => setSelectedSpot(item.contentId)}
+                />
+              )}
+            />
+            {data.attraction.length === 0 && <Spacing height={160} />}
+            <Spacing height={10} />
+            <CardSlider
+              gap={8}
+              title="담은 숙소"
+              titleColor="black"
+              data={data.accommodation}
+              titleGap={4}
+              renderItem={({ item }) => (
+                <AroundCard
+                  data={item}
+                  onCardClick={() => setSelectedSpot(item.contentId)}
+                />
+              )}
+            />
+            {data.accommodation.length === 0 && <Spacing height={160} />}
+            <Spacing height={10} />
           </View>
         </ScrollView>
       </View>