merge: 홈화면 콘텐츠 추가 (#102)

merge: 홈화면 콘텐츠 추가 (#102)

packages/react-native/.eslintrc.js

@@ -23,7 +23,10 @@ module.exports = {
     'no-console': 'error',
     'import/prefer-default-export': 'off',
     '@typescript-eslint/no-unused-vars': 'warn',
+    'global-require': 'off',
     'react/no-array-index-key': 'off',
+    'react/no-unescaped-entities': 'off',
+    'react/jsx-key': 'error',
   },
   ignorePatterns: [
     'index.js',

packages/react-native/src/components/home/ContentImage.tsx

@@ -0,0 +1,25 @@
+import { Dimensions, Image, ImageSourcePropType, View } from 'react-native';
+
+type ImageType = 'wide' | 'poster';
+
+interface ContentImageProps {
+  type: ImageType;
+  asset: ImageSourcePropType;
+}
+
+const { width } = Dimensions.get('window');
+
+export default function ContentImage({ type, asset }: ContentImageProps) {
+  if (type === 'poster')
+    return (
+      <View className="mt-4">
+        <Image style={{ aspectRatio: 3 / 4, height: 500 }} source={asset} />
+      </View>
+    );
+
+  return (
+    <View className="mt-4">
+      <Image style={{ width: width - 16 }} source={asset} />
+    </View>
+  );
+}

packages/react-native/src/components/home/ContentTitle.tsx

@@ -0,0 +1,27 @@
+import { Font } from 'design-system';
+import { View } from 'react-native';
+
+interface ContentTitleProps {
+  mainTitle: string;
+  subTitle: string;
+}
+
+export default function ContentTitle({
+  mainTitle,
+  subTitle,
+}: ContentTitleProps) {
+  return (
+    <View className="mt-4 justify-center items-center flex-col">
+      <View>
+        <Font.Bold type="mainTitle" color="black">
+          {mainTitle}
+        </Font.Bold>
+      </View>
+      <View className="mt-2">
+        <Font.Bold type="title1" color="black">
+          {subTitle}
+        </Font.Bold>
+      </View>
+    </View>
+  );
+}

packages/react-native/src/components/home/SetJettingContent.tsx

@@ -0,0 +1,31 @@
+import { Font } from 'design-system';
+import { ImageSourcePropType, View } from 'react-native';
+import ContentImage from './ContentImage';
+
+interface SetJettingContentProps {
+  title: string;
+  image?: ImageSourcePropType;
+  content: string;
+}
+
+export default function SetJettingContent({
+  title,
+  content,
+  image,
+}: SetJettingContentProps) {
+  return (
+    <View>
+      <View className="mt-4 w-full justify-start">
+        <Font.Bold type="body1" color="black">
+          {title}
+        </Font.Bold>
+      </View>
+      {image && <ContentImage type="wide" asset={image} />}
+      <View className="mt-4">
+        <Font type="body2" color="black">
+          {content}
+        </Font>
+      </View>
+    </View>
+  );
+}

packages/react-native/src/components/home/contents/PopularSpot.tsx

@@ -0,0 +1,93 @@
+import { Font } from 'design-system';
+import { Image, ImageSourcePropType, View } from 'react-native';
+import ContentTitle from '../ContentTitle';
+import ContentImage from '../ContentImage';
+
+interface PopularSpotContent {
+  title: string;
+  subtitle: string;
+  content: string;
+  image: ImageSourcePropType;
+  imageType: 'poster' | 'wide';
+}
+
+const CONTENTS: PopularSpotContent[] = [
+  {
+    title: '동백꽃 필무렵',
+    subtitle: '포항 구룡포 일본인 가옥거리',
+    content:
+      "구룡포 일본인 가옥거리는 '동백꽃 필 무렵'의 주요 촬영지 중 하나로, 드라 마의 포스터에도 등장한 바로 그 장소입니다. 이곳에는 주인공 동백이가 운영하던 까멜리아도 자리하고 있어, 드라마 속 장면들이 현실에서 그대로 펼쳐지는 듯한 분위기를 자아냅니다. 좁은 골목길과 고즈넉한 건물들이 어우러져 동백이의 일상과 따뜻한 사랑 이야기가 그려졌던 공간의 감성을 고스란히 느낄 수 있으며, 동백이의 삶 이 우리 눈앞에 펼쳐지는 듯한 특별한 경험을 할 수 있습니다.",
+    image: require('../../../assets/home/dongbaek.png'),
+    imageType: 'poster',
+  },
+  {
+    title: '도깨비',
+    subtitle: '주문진 방파제',
+    content:
+      "'도깨비' 하면 떠오르는 가장 기억에 남는 장면 중 하나가 바로 주문진 방파제를 배경으로 한 이 장면입니다. 이곳은 도깨비 김신과 지은탁이 처음 만난 장소로, 지은탁이 붉은 목도리를 두르고 김신과의 운명적인 만남을 가졌던 그 순간이 많은 팬들에게 깊은 인상을 남겼습니다. 푸른 바다와 파도가 어우러진 방파제는 그 자체로도 낭만적이지만, 드라마 속 장면 덕분에 더 특별한 분위기를 자아냅니다. SPOT! 필터를 이용해 도깨비와 함께하는 그 순간을 재현해보세요. 드라마의 감동을 직접 느끼며 잊지 못할 추억을 남길 수 있습니다.",
+    image: require('../../../assets/home/dokaebi.png'),
+    imageType: 'wide',
+  },
+  {
+    title: '미스터 선샤인',
+    subtitle: '만휴정',
+    content: `'미스터 션샤인' 속 웅장한 자연과 고즈넉한 한옥이 조화를 이루는 만휴정 은 주인공들의 깊은 감정이 오고 갔던 중요한 장면이 촬영된 곳입니다. 으 히 "합시다. 러브. 나랑 같이."라는 명대사가 담긴 장면으로, 드라마 팬들에 게 더욱 특별한 의미를 갖는 명소입니다. 고요하고 아름다운 자연을 느낄 수 있는 만휴정은 사계절 내내 매력적인 경치로 많은 여행객들의 사랑을인 받고 있습니다. 이곳에서 SPOT! 필터를 사용해 주인공처럼 드라마 속 장 면을 재현해보고, 드라마의 감동을 직접 느껴보세요.`,
+    image: require('../../../assets/home/mrsunshine.png'),
+    imageType: 'wide',
+  },
+  {
+    title: '사랑의 불시착',
+    subtitle: '포천 한탄강 하늘다리',
+    content: `한탄강 하늘다리는 ‘사랑의 불시착’ 속 윤세리와 리정혁이 자신들이 이전 에 스위스에서 만났다는 운명적인 첫 인연을 서로에게 이야기하는 중요한 장면이 촬영된 곳입니다. 이 다리는 두 주인공의 이야기가 깊어지는 낭만 적인 순간을 담아내며, 많은 팬들이 그 감동을 되새기기 위해 이곳을 찾습 니다. 한탄강 협곡 위에 놓여진 하늘다리는 웅장한 자연경관을 자랑하며, 방문객들에게도 사랑받는 명소입니다. 탁 트인 한탄강의 경치와 어우러진 이 다리를 건너며, 드라마의 감동을 생생하게 체험하고 특별한 순간을 기록해보세요.`,
+    image: require('../../../assets/home/sarang.png'),
+    imageType: 'wide',
+  },
+];
+
+export default function PopularSpot() {
+  return (
+    <View className="mt-4 flex flex-col items-center justify-center px-2 pb-4">
+      <View className="flex-col justify-center items-center">
+        <Font.Bold color="red" type="title1">
+          Spot! 필터와 함께하는
+        </Font.Bold>
+        <Font.Bold color="black" type="title1">
+          인기 드라마 촬영지 모음
+        </Font.Bold>
+      </View>
+      <View className="justify-center flex items-center mt-4">
+        <Font.Light color="black" type="body3">
+          Spot! | 2024-10-01
+        </Font.Light>
+      </View>
+      <View className="mt-4">
+        <Image
+          style={{ aspectRatio: 3 / 4, height: 500 }}
+          source={require('../../../assets/home/popular-spot.png')}
+        />
+      </View>
+      <View className="mt-4">
+        <Font type="body2" color="black">
+          드라마 속 촬영지를 직접 만나보고, 그 감동을 다시 느껴볼 수 있는 특별한
+          기회! 이번에 소개할 여행지들은 한국의 대표적인 인기 드라마 속 명장면
+          이 담긴 장소들로, 많은 이들에게 사랑받아온 곳들입니다. SPOT! 필터와
+          함께라면, 우리도 드라마 속 주인공이 될 수 있어요! 촬영지 에서 주인공과
+          함께 사진을 찍은 듯한 SPOT! 필터를 적용해, 드라마의 감 동을 사진으로
+          남겨보세요. 잊지 못할 순간을 기록하며, 현실 속에서 드라 마의 한 장면을
+          직접 재현할 수 있는 절호의 기회입니다.
+        </Font>
+      </View>
+      {CONTENTS.map((item) => (
+        <View key={item.title}>
+          <ContentTitle mainTitle={item.title} subTitle={item.subtitle} />
+          <ContentImage type={item.imageType} asset={item.image} />
+          <View className="mt-4">
+            <Font type="body2" color="black">
+              {item.content}
+            </Font>
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}

packages/react-native/src/components/home/contents/SetJetting.tsx

@@ -0,0 +1,103 @@
+import { Font } from 'design-system';
+import { Image, ImageSourcePropType, View } from 'react-native';
+import ContentImage from '../ContentImage';
+import SetJettingContent from '../SetJettingContent';
+
+interface SetJettingContent {
+  title: string;
+  image?: ImageSourcePropType;
+  content: string;
+}
+
+const SET_JETTING_CONTENTS: SetJettingContent[] = [
+  {
+    title: 'Set-Jetting 트렌드',
+    content: `최근 여행 트렌드 중 하나로 떠오르고 있는 ‘Set-Jetting’은 전 세계 여행 자들 사이에서 하나의 관광 형태로 빠르게 인기를 얻고 있습니다. Set-Jetting이란 드라마나 영화에 등장한 실제 촬영지를 직접 여행하는 것을 의미하는 신조어로, 콘텐츠 소비 방식이 여행 선택에까지 영향을 미 치는 현상을 반영하고 있습니다. American Express의 2023 Global Travel Trends Report에 따르면, 'Set-Jetting'은 주목해야 할 4가지 여행 트렌드 중 하나로 선정되었으며, Expedia의 2023 여행 트렌드 보고서 또한 2023년 주목해야 할 트렌드 중 하나로 ‘Set-Jetters’를 꼽았습니다. 관련 조사에 따르면, 전 세계 여행자들 중 2/3가 여행 전 'Set-Jetting'을 고려했으며, 그 중 39%는 드라마나 영화와 같은 미디어 콘텐츠 속 장면에 서 영감을 받아 여행을 떠난 경험이 있다고 응답했습니다. 이는 TV와 영화 같은 미디어 콘텐츠가 이제 하나의 여행 동기이자 테마로 발전하고 있음을 보여줍니다.`,
+    image: require('../../../assets/home/setjettingtrend.png'),
+  },
+  {
+    title: 'K-Contents 열풍과 한국 내 Set-Jetting 여행의 확산',
+    content:
+      '특히 K-드라마와 영화의 전 세계적인 인기가 높아지면서 한국의 촬영 장소 로 향하는 관광객이 급증하고 있습니다. 예를 들어, 드라마 도깨비에서 등장한 강릉의 주문진 방파제는 ‘도깨비 방파제’라는 이름으로 포토존으로 자리 잡았고, 수많은 팬들이 드라마 속 한 장면을 재현하기 위해 이곳을 찾고 있습니다.',
+    image: require('../../../assets/home/tv.png'),
+  },
+  {
+    title: '여행과 이야기가 만나는 순간',
+    content:
+      'Set-Jetting의 가장 큰 매력은 단순한 여행을 넘어 자신이 사랑한 이야기 속으로 들어가는 듯한 몰입감을 선사한다는 점입니다. 아름다운 자연 경관 이나 도시를 배경으로 내가 좋아하는 드라마/영화 속 장면을 떠올리며, 그 공간에 서 있는 것만으로도 특별한 감동을 느낄 수 있습니다. 뿐만 아니라 촬영지가 제공하는 고유의 분위기를 직접 경험하며, 작품 속 인물들과 더 가까워지는 기분도 느낄 수 있죠.',
+  },
+  {
+    title: 'Spot!과 함께하는 Set-Jetting 여행 팁',
+    content:
+      '이러한 Set-Jetting 여행을 즐기기 위해서는, 자신이 좋아하는 작품 속 촬 영지 저보를 사전에 조사하고, 이를 바탕으로 여행을 계획하는 것이 중요 합니다. 그리고 Spot!은 이러한 Set-Jetter들을 위해 단순히 촬영지 정보 획득을 넘어 더욱 다채로운 여행을 경험할 수 있도록 도와줍니다. 촬영지 를 중심으로 하되, 그 주변의 관광 명소와 주변맛집, 숙소를 함께 탐험할 수 있도록 도와줌으로써, 촬영지 방문을 핵심으로 하면서도 현지의 고유한 매력까지 놓치지 않는 풍부한 여행 경험을 즐길 수 있습니다. 그럼 Spot!을 활용해 Set-Jetting 여행을 단계별로 준비하는 방법을 소 개합니다. 홈 탭에서 촬영지 탐색',
+  },
+  {
+    title: '1. 홈탭에서 촬영지 검색',
+    content:
+      'Spot!의 홈 탭에서는 좋아하는 드라마나 영화를 검색해 해당 콘텐츠의 촬영지를 한눈에 확인할 수 있습니다. 드라마 속 주요 촬영지를 추천받고, 각 장소에 대한 상세 정보와 위치, 주소까지 모두 제공됩니다. 이뿐만 아니라, 주변 관광명소, 맛집, 숙소까지 추천받을 수 있어 한 번에 다양한 여행 정 보를 얻고 계획을 세울 수 있습니다. 원하는 장소를 내 여행에 담아 Trip Planner 탭의 My Trip(내 여행)에 저장해두는 것도 잊지 마세요.',
+    image: require('../../../assets/home/homecapture.png'),
+  },
+  {
+    title: '2. Trip Planner로 맞춤형 여행 경로 설계',
+    content:
+      '촬영지 탐색이 끝났다면, Trip Planner 탭에서 모아둔 장소들을 활용해 나만의 여행 경로를 설계할 차례입니다. 담은 촬영지와 관광 명소, 맛집, 숙소를 한곳에 모아보고, 그 장소들을 중심으로 여행 일정을 자유롭게 편 집할 수 있습니다. 나아가 새로운 장소를 직접 추가할 수도 있어요! 일정에 따라 장소를 추가, 삭제하고 순서를 편집하며 나만의 최적의 여행 루트를 완성해보세요.',
+    image: require('../../../assets/home/tripcapture.png'),
+  },
+  {
+    title: '3. Quiz & Filter로 촬영지에서의 특별한 체험',
+    content:
+      '실제 촬영지에 도착했다면 Quiz & Filter 탭을 활용해 반경 20km 내에 있 는 촬영지들을 탐색해보세요. 해당 장소에서만 사용할 수 있는 필터 카메 라를 통해 드라마의 주인공과 함께 사진을 찍은 것 같은 특별한 경험을 남 길 수 있습니다. 또한, 각 촬영지에서 퀴즈를 풀고 정답을 맞출 경우, 여행 뱃지도 획득할 수 있으니 놓치지 마세요!',
+  },
+  {
+    title: '4. Travel Log로 나만의 여행 기록 남기기',
+    content:
+      '여행이 끝난 후에는 Travel Log 탭에서 방문한 촬영지와 여행 경험을 기 록하고 저장해보세요. 한국 지도에서 지역별로 대표사진을 설정해 나의 여 행 사진들로 나만의 지도를 완성할 수 있으며, 각 지역별로 여행의 추억들 기록할 수 있어요. 이 기능을 통해 여행지에서의 특별한 순간을 오래도록 간직하고 추억할 수 있겠죠.',
+    image: require('../../../assets/home/travellogcapture.png'),
+  },
+  {
+    title: '5.마이페이지에서 뱃지 확인과 레벨업',
+    content: `Spot! 앱을 통해 모은 여행 뱃지들을 마이페이지 탭에서 확인해보세요. 대한민국 행정구역 별로 촬영지 방문 여부에 따라 뱃지를 수집하고, 뱃지 를 클릭해 어느 지역에서 뱃지를 획득했는지도 확인할 수 있습니다.할 배지를 많이 모을수록 나의 프로필 레벨이 올라가며, Set-Jetting 여행자 로서의 성장을 확인할 수 있습니다. 최종적으로는 최상위의 Set-Jetter 여행자인 'Director's Cut' 레벨까지 도전해보세요!`,
+  },
+];
+
+export default function SetJetting() {
+  return (
+    <View className="mt-4 flex flex-col items-center justify-center px-2 pb-4">
+      <View className="flex-col justify-center items-center">
+        <View className="flex flex-row">
+          <Font.Bold color="red" type="title1">
+            Spot!
+          </Font.Bold>
+          <Font.Bold color="black" type="title1">
+            과 함께 떠나는
+          </Font.Bold>
+        </View>
+        <Font.Bold color="black" type="title1">
+          Set-Jetting 여행
+        </Font.Bold>
+        <Font.Bold color="black" type="title1">
+          : 드라마와 영화 속 그 장소로!
+        </Font.Bold>
+      </View>
+      <View className="justify-center flex items-center mt-4">
+        <Font.Light color="black" type="body3">
+          Spot! | 2024-10-01
+        </Font.Light>
+      </View>
+      <View className="mt-4">
+        <Image
+          style={{ aspectRatio: 3 / 4, height: 500 }}
+          source={require('../../../assets/home/set-jetting.png')}
+        />
+      </View>
+      {SET_JETTING_CONTENTS.map((item) => (
+        <SetJettingContent
+          key={item.content}
+          title={item.title}
+          content={item.content}
+          image={item.image}
+        />
+      ))}
+    </View>
+  );
+}

packages/react-native/src/constants/HOME_CONTENTS.ts

@@ -0,0 +1,21 @@
+import { ImageSourcePropType } from 'react-native';
+
+export type ContentTitle = 'popular-spot' | 'set-jetting';
+
+interface Content {
+  title: ContentTitle;
+  image: ImageSourcePropType;
+}
+
+const HOME_CONTENTS: Content[] = [
+  {
+    title: 'popular-spot',
+    image: require('../assets/home/popular-spot.png'),
+  },
+  {
+    title: 'set-jetting',
+    image: require('../assets/home/set-jetting.png'),
+  },
+];
+
+export default HOME_CONTENTS;

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

@@ -0,0 +1,19 @@
+import { useRoute } from '@react-navigation/native';
+import { SafeAreaView, ScrollView } from 'react-native';
+
+import { StackRouteProps } from '@/types/navigation';
+import PopularSpot from '@/components/home/contents/PopularSpot';
+import SetJetting from '@/components/home/contents/SetJetting';
+
+export default function Content() {
+  const route = useRoute<StackRouteProps<'Home/Content'>>();
+  const { title } = route.params;
+
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        {title === 'popular-spot' ? <PopularSpot /> : <SetJetting />}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { ImageBackground, TouchableOpacity, View } from 'react-native';
 import { Font } from 'design-system';
 import SearchBar from '@components/common/SearchBar';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
@@ -10,6 +10,7 @@ import Header from '@/components/common/Header';
 import withSuspense from '@/components/HOC/withSuspense';
 import useHomeSpotQuery from '@/apis/queries/home/useHomeSpotQuery';
 import SPOTLogo from '@/assets/SPOTLogo';
+import HOME_CONTENTS from '@/constants/HOME_CONTENTS';
 
 interface HomeScreenProps {
   navigation: StackNavigation<'Home/Main'>;
@@ -29,7 +30,7 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {
           </View>
         }
       />
-      <View className="flex flex-col gap-10 px-4">
+      <View className="flex flex-col gap-10 px-4 pb-4">
         <View>
           <Font type="title1" color="white">
             안녕하세요, {profile?.nickname}님{'\n'}오늘은 어디로 가 볼까요?
@@ -50,14 +51,27 @@ 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} />}
+            data={HOME_CONTENTS}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                onPress={() =>
+                  navigation.navigate('Home/Content', {
+                    title: item.title,
+                  })
+                }
+              >
+                <ImageBackground
+                  source={item.image}
+                  className="rounded-2xl overflow-hidden bg-SPOT-black"
+                  style={{ width: 180, aspectRatio: 3 / 4 }}
+                />
+              </TouchableOpacity>
+            )}
           />
-        </View> */}
+        </View>
       </View>
     </BackGroundGradient>
   );