* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요. 디테일 페이지 파일을 만들었는데 존재하지 않는다는 오류가 떠서 질문드립니다ㅜㅜ

디테일 페이지 코드:

import React from 'react';

import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert } from 'react-native';

export default function DetailPage() {

    const tip = {

        "idx":9,

        "category":"재테크",

        "title":"렌탈 서비스 금액 비교해보기",

        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

        "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

        "date":"2020.09.09"

    }

    const popup = () => {

        Alert.alert("팝업!!")

    }

    return (

        // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고

        // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다.

        // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다.

        <ScrollView style={styles.container}>

            <Image style={styles.image} source={{uri:tip.image}}/>

            <View style={styles.textContainer}>

                <Text style={styles.title}>{tip.title}</Text>

                <Text style={styles.desc}>{tip.desc}</Text>

                <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

            </View>

        </ScrollView>

    )

}

const styles = StyleSheet.create({

    container:{

        backgroundColor:"#000"

    },

    image:{

        height:400,

        margin:10,

        marginTop:40,

        borderRadius:20

    },

    textContainer:{

        padding:20,

        justifyContent:'center',

        alignItems:'center'

    },

    title: {

        fontSize:20,

        fontWeight:'700',

        color:"#eee"

    },

    desc:{

        marginTop:10,

        color:"#eee"

    },

    button:{

        width:100,

        marginTop:20,

        padding:10,

        borderWidth:1,

        borderColor:'deeppink',

        borderRadius:7

    },

    buttonText:{

        color:'#fff',

        textAlign:'center'

    }

})

App.js 코드:

import React from 'react'

import MainPage from './pages/MainPage';

import AboutPage from './pages/AboutPage';

import DetailPage from './pages/DetailPage';

export default function App(){

  return (<MainPage/>)

  // return (<AboutPage/>)

  // return (<DetailPage/>)

}

작성한 코드 및 에러 메세지

Android Bundling failed 2847ms

Unable to resolve module ./ pages/DetailPage from C:\Users\user10\Desktop\sparta study\sparta-myhoneytip-J\App.js:

None of these files exist:

 * pages\DetailPage(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

 * pages\DetailPage\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

 2 | import MainPage from './pages/MainPage';

 3 | import AboutPage from './pages/AboutPage';

> 4 | import DetailPage from './ pages/DetailPage';

  |             ^

 5 |

 6 | export default function App(){

 7 |  return (<MainPage/>)오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!