Feat/product detail screen renewal

android/app/build.gradle

@@ -51,7 +51,7 @@ android {
 
         // 로컬 기본값(수동 관리용)
         versionCode 15
-        versionName "1.3.0"
+        versionName "1.2.2
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL",
             "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""

app.json

@@ -10,7 +10,7 @@
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": false,
-      "buildNumber": "1.3.0",
+      "buildNumber": "10",
       "bundleIdentifier": "com.podostore.dasii",
       "infoPlist": {
         "NSUserTrackingUsageDescription": "맞춤형 콘텐츠/광고 및 앱 품질 개선을 위해 사용자 활동 데이터를 사용할 수 있도록 허용해 주세요.",
@@ -80,6 +80,7 @@
     ],
     "experiments": {
       "typedRoutes": true
-    }
+    },
+    "assetBundlePatterns": ["**/*"]
   }
 }

app/(tabs)/mypage/index.tsx

@@ -129,7 +129,7 @@ export default function Mypage() {
               />
               <SettingItem
                 label='버전 정보'
-                value={`V ${Constants.expoConfig?.version || '1.3.0'}`}
+                value={`V ${Constants.expoConfig?.version || '1.4.0'}`}
               />
               <SettingItem label='문의 메일' value='podostore1111@gmail.com' />
             </SettingSection>

app/product/[id]/productDetail.tsx

@@ -9,6 +9,7 @@ import { ReviewButton } from '@/components/common/buttons/ReviewButton';
 import { ScrollToTopButton } from '@/components/common/buttons/ScrollToTopButton';
 import DefaultModal from '@/components/common/modals/DefaultModal';
 import Navigation from '@/components/layout/Navigation';
+// import AISummary from '@/components/page/product/productDetail/AISummary';
 import IngredientInfoBottomSheet from '@/components/page/product/productDetail/BottomSheet/IngredientInfoBottomSheet';
 import CoupangTabBar from '@/components/page/product/productDetail/CoupangTabBar';
 import IngredientSection from '@/components/page/product/productDetail/Ingredient/IngredientSection';
@@ -37,8 +38,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, Image, Pressable, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-const fallbackPath = (id: string) => `/product/${id}`;
-
 const tabs = [
   { key: 'ingredient', label: '성분 정보' },
   { key: 'review', label: '리뷰' },
@@ -239,11 +238,21 @@ export default function ProductDetail() {
 
             {/* 탭별 상단 콘텐츠 */}
             {activeTab === 'ingredient' ? (
-              <IngredientSection
-                product={data}
-                onPressFunctionalInfo={openFunctionalSheet}
-                onPressOtherInfo={openOtherSheet}
-              />
+              <View className='pt-4 gap-y-4'>
+                {/* <AISummary
+                  summary={[
+                    // TODO: api 연결
+                    '이 제품을 먹으면 살도 빠지고 얼굴도 좋아지고 키도 크고 완전 대박 짱일 수도 있고 아닐 수도 있고 함만 잡숴봐',
+                    '장점은 이런데 어떤가요 완전 효과 있죠 짱인 거 같죠 근데 다 좋은가',
+                    '과다 섭취하면 뭐든 다 안 좋아요 부디 아프지 마시고 오래 사세요...북세편살',
+                  ]}
+                /> */}
+                <IngredientSection
+                  product={data}
+                  onPressFunctionalInfo={openFunctionalSheet}
+                  onPressOtherInfo={openOtherSheet}
+                />
+              </View>
             ) : (
               <View className='px-5 mt-5'>
                 <View className='flex-row items-center justify-between mb-5'>

components/page/home/BannerCarousel.tsx

@@ -23,6 +23,7 @@ export default function BannerCarousel({ data }: BannerCarouselProps) {
     index: number;
   }) => {
     const isFocused = activeIndex === index;
+    console.log('banner item image:', JSON.stringify(item.image)); // 추가
 
     return (
       <Pressable

components/page/product/productDetail/AISummary.tsx

@@ -0,0 +1,41 @@
+import IC_AI_LOGO from '@/assets/icons/ic_ai_logo.svg';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Text, View } from 'react-native';
+
+type Props = {
+  summary: string[];
+};
+
+export default function AISummary({ summary }: Props) {
+  return (
+    <View className='mx-4 mb-[10px]'>
+      <View className='flex-row items-center' style={{ gap: 2 }}>
+        <IC_AI_LOGO className='w-4 h-4' />
+        <Text className='text-lg font-n-eb text-gray-800'>
+          AI 기반 제품 요약
+        </Text>
+      </View>
+      <LinearGradient
+        colors={['#FDFFFB', '#F5FDFE']}
+        locations={[0, 0.7, 0.95, 1]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        className='rounded-2xl px-4 py-4'
+        style={{
+          marginTop: 12,
+          borderWidth: 1,
+          borderColor: '#82E3AF33',
+        }}
+      >
+        <View className='gap-y-3'>
+          {summary.map((item, index) => (
+            <View key={index} className='flex-row items-start gap-x-2'>
+              <Text className='text-sm mt-[1px]'>•</Text>
+              <Text className='text-sm flex-1 leading-5'>{item}</Text>
+            </View>
+          ))}
+        </View>
+      </LinearGradient>
+    </View>
+  );
+}

components/page/product/productDetail/Ingredient/OtherIngredients.tsx

@@ -1,16 +1,23 @@
 // 기타 원료
+import ArrowRightIcon from '@/assets/icons/ic_arrow_right.svg';
 import InfoIcon from '@/assets/icons/ic_info.svg';
+import { useRouter } from 'expo-router';
 import { Pressable, Text, View } from 'react-native';
 
 interface Props {
   ingredients: string[] | undefined;
   onPressInfo: () => void;
 }
 
+// TODO: API 연결 필요 - 원료명으로 성분 ID를 조회하는 API가 필요합니다.
+const MOCK_INGREDIENT_ID = '1';
+
 export default function OtherIngredientsSection({
   ingredients,
   onPressInfo,
 }: Props) {
+  const router = useRouter();
+
   if (!ingredients || ingredients.length === 0) {
     return null;
   }
@@ -30,11 +37,22 @@ export default function OtherIngredientsSection({
         </Pressable>
       </View>
 
-      <View className='bg-[#F6F5FA] rounded-xl p-4'>
+      <View className='bg-[#F6F5FA] rounded-xl px-4 py-2'>
         {ingredients.map((item, index) => (
-          <Text key={index} className='text-b-sm font-n-bd mb-1'>
-            • {item}
-          </Text>
+          <Pressable
+            key={index}
+            onPress={() =>
+              // TODO: API 연결 필요 - item(원료명)에 해당하는 실제 성분 ID로 교체해야 합니다.
+              router.push(`/ingredient/${MOCK_INGREDIENT_ID}`)
+            }
+            className='flex-row items-center justify-between py-[10px]'
+          >
+            <View className='flex-row items-center gap-x-2'>
+              <Text className='text-b-sm font-n-bd'>•</Text>
+              <Text className='text-b-sm font-n-bd'>{item}</Text>
+            </View>
+            <ArrowRightIcon />
+          </Pressable>
         ))}
       </View>
     </View>