Movie Title Pops up

-import React, {Component} from 'react';  
-import {Platform, StyleSheet, Text,  
-  View,TouchableOpacity, AsyncStorage,  
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    AsyncStorage,
+    ScrollView,
+    //불러오기 위한 것
+    Image,
 } from 'react-native';
 } from 'react-native';
 import { Icon } from "native-base";
 import { Icon } from "native-base";
+import axios from "axios";
+const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
+const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
+const NAVER_CLIENT_SECRET = "0GRb3uya1U";
 
 
 
 
 export default class App extends Component {
 export default class App extends Component {
+    state = {
+        date: "", //날짜
+        imgurl0: [], //이미지
+        name0: [], //제목
+    };
+
+    //날짜 정하기
+    componentDidMount() {
+        var day = new Date().getDate() - 1; // 어제 날짜
+        if (day == 1) {
+          day = 30;
+        } else if (day < 10) {
+          day = "0" + day;
+        }
+        var month = new Date().getMonth() + 1; //Current Month
+        var year = new Date().getFullYear(); //Current Year
+        var date = year + "" + month + day;
+        this.getMovieList(date);
+      }
+
+    getMovieList = async date => {
+        axios
+          .get(
+            `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
+          )
+          .then(
+            response => {
+              this.setState({
+                //영화 제목
+                name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
+              });
+    
+              temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
+              fetch(
+                `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
+                {
+                  headers: {
+                    "X-Naver-Client-Id": NAVER_CLIENT_ID,
+                    "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
+                  }
+                }
+              )
+                .then(response => response.json())
+                .then(json => {
+                  this.setState({
+                    imgurl0: json.items[0].image
+                  });
+                });
+            }
+          )
+          .catch(error => {
+            console.log(error);
+          });
+      };
+    
     //네비게이션 바
     //네비게이션 바
     static navigationOptions = {
     static navigationOptions = {
         tabBarIcon: ({ tintColor }) => (
         tabBarIcon: ({ tintColor }) => (
             <Icon name='ios-star' style={{ color: tintColor }} />
             <Icon name='ios-star' style={{ color: tintColor }} />
         )
         )
     }
     }
-  saveData(){  
-    let name = "앙기모띠";  
-    AsyncStorage.setItem('user',name);  
+
+    //저장 함수
+    saveData() {
+        AsyncStorage.setItem('test', this.state.name0);
     }
     }
-  displayData = async ()=>{  
-    try{  
-      let user = await AsyncStorage.getItem('user');  
+
+    //출력 함수
+    displayData = async () => {
+        try {
+            let user = await AsyncStorage.getItem('test');
             alert(user);
             alert(user);
         }
         }
-    catch(error){  
+        catch (error) {
             alert(error)
             alert(error)
         }
         }
     }
     }
+
+
     render() {
     render() {
         return (
         return (
             <View style={styles.container}>
             <View style={styles.container}>
-        <TouchableOpacity onPress ={this.saveData}>  
-          <Text>User정보 저장</Text>  
+                <View style={styles.top}>
+                    <TouchableOpacity onPress={this.saveData.bind(this)}>
+                        <Image
+                            style={styles.poster}
+                            source={{ uri: `${this.state.imgurl0}` }}
+                        />
+                        <Text>{this.state.name0}</Text>
+                        <Text style={styles.textStyle}>영화 정보 저장</Text>
                     </TouchableOpacity>
                     </TouchableOpacity>
-        <TouchableOpacity onPress ={this.displayData}>  
-          <Text>User정보 출력</Text>  
+                </View>
+
+                <View style={styles.bottom}>
+                    <TouchableOpacity onPress={this.displayData}>
+                        <Text style={styles.textStyle}>영화 정보 출력</Text>
                     </TouchableOpacity>
                     </TouchableOpacity>
                 </View>
                 </View>
+            </View>
         );
         );
     }
     }
 }
 }
@@ -42,8 +123,23 @@ export default class App extends Component {
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
     container: {
     container: {
         flex: 1,
         flex: 1,
+        alignItems: "center"
+    },
+    top: {
+        flex: 2,
         justifyContent: 'center',
         justifyContent: 'center',
         alignItems: 'center',
         alignItems: 'center',
-    backgroundColor: '#F5FCFF',  
+    },
+    bottom: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textStyle: {
+        fontSize: 25,
+    },
+    poster: {
+        flex: 5,
+        paddingHorizontal: 50
     },
     },
 });  
 });  
\ No newline at end of file