First List printed Wants to See

@@ -58,16 +58,17 @@ export default class MovieRankingTab extends Component {
       .then(
         response => {
           this.setState({
+            //영화 제목
             name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
             name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
-            name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
+            /*name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
             name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
             name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
             name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
             name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
             name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
             name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
-            name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
+            name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,*/
             info: response.data.boxOfficeResult.dailyBoxOfficeList
           });
 
@@ -96,13 +97,14 @@ export default class MovieRankingTab extends Component {
                 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
               }
             }
-          )
+          ) 
             .then(response => response.json())
             .then(json => {
               this.setState({
                 imgurl1: json.items[0].image
               });
             });
+            /*
           name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
           fetch(
             `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
@@ -112,7 +114,7 @@ export default class MovieRankingTab extends Component {
                 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
               }
             }
-          )
+          ) 
             .then(response => response.json())
             .then(json => {
               this.setState({
@@ -230,7 +232,7 @@ export default class MovieRankingTab extends Component {
               this.setState({
                 imgurl9: json.items[0].image
               });
-            });
+            });*/
         }
         //   {
         //   for (var i = 0; i < 10; i++) {
@@ -257,38 +259,45 @@ export default class MovieRankingTab extends Component {
     this.getMovieList(date);
   }
 
+  //눌렀을 때 동작
   _onPressButton = () => {
-    Alert.alert("image pressed the car");
+    Alert.alert("Image Pressed");
   };
+
   render() {
     return (
       <SafeAreaView style={style.container}>
         <ScrollView style={style.scrollView}>
           <Text style={style.title}>MovieRanking</Text>
+
           <View style={style.lowContainer}>
-            <TouchableOpacity onPress={this._onPressButton}>
-              <View>
+            <View style={style.halfContainer}>
+              <TouchableOpacity
+                style={style.button}
+                onPress={this._onPressButton}//누르는 동작
+              >
                 <Image
                   style={style.poster}
                   source={{ uri: `${this.state.imgurl0}` }}
                 />
                 <Text>{this.state.name0}</Text>
-              </View>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={style.button}
-              onPress={this._onPressButton}
-            >
-              <View>
+              </TouchableOpacity>
+            </View>
+            <View style={style.halfContainer}>
+              <TouchableOpacity
+                style={style.button}
+                onPress={this._onPressButton}//누르는 동작
+              >
                 <Image
                   style={style.poster}
                   source={{ uri: `${this.state.imgurl1}` }}
                 />
                 <Text>{this.state.name1}</Text>
-              </View>
-            </TouchableOpacity>
+              </TouchableOpacity>
+            </View>
           </View>
-          <View style={style.lowContainer}>
+
+          {/* <View style={style.lowContainer}>
             <View style={style.halfContainer}>
               <Image
                 style={style.poster}
@@ -351,7 +360,7 @@ export default class MovieRankingTab extends Component {
               />
               <Text>{this.state.name9}</Text>
             </View>
-          </View>
+          </View> */}
         </ScrollView>
       </SafeAreaView>
     );
@@ -391,4 +400,4 @@ const style = StyleSheet.create({
     // justifyContent: "center",
     alignItems: "center"
   }
-});
+});
\ No newline at end of file

 import React, { Component } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+    StyleSheet,
+    Text,
+    View,
+    ScrollView,
+    TouchableOpacity,
+    Image,
+    Alert,
+    AsyncStorage
+  } from 'react-native';
 import { Icon } from 'native-base';
+import axios from "axios";
+const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
+const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
+const NAVER_CLIENT_SECRET = "0GRb3uya1U";
+import uuidv1 from "uuid/v1"; //ID 만들기위해 import
+
 
 export default class WantToWatchTab extends Component {
-    
+    //네비게이션 바
     static navigationOptions = {
         tabBarIcon: ({ tintColor }) => (
             <Icon name='ios-star' style={{ color: tintColor }} />
         )
     }
+
+    state = {
+        isLoading: true,
+        info: [],
+        date: "",
+        imgur1: []
+    };
+
+    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,
+                info: response.data.boxOfficeResult.dailyBoxOfficeList
+              });
+    
+              name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
+              fetch(
+                `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
+                {
+                  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);
+          });
+      };
+
+      //날짜 정하기
+      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);
+      }
+    
+      //눌렀을 때 동작
+      _onPressButton = () => {
+        Alert.alert("Image Pressed");
+        
+      };
+
+      
+
     render() {
         return (
-            <View style={style.container}>
-                <Text>WantToWatchTab</Text>
-            </View>
+            <ScrollView style={style.scrollView}>
+                <Text style={style.title}>MovieRanking</Text>
+                <View style={style.lowContainer}>
+                    <TouchableOpacity
+                        style={style.button}
+                        onPress={this._onPressButton}//누르는 동작
+                    >
+                        <Image
+                            style={style.poster}
+                            source={{ uri: `${this.state.imgurl0}` }}
+                        />
+                        <Text>{this.state.name0}</Text>
+                    </TouchableOpacity>
+                </View>
+            </ScrollView>
         );
     }
 }
 
+
 const style = StyleSheet.create({
     container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    }
-});
\ No newline at end of file
+      flex: 1
+    },
+    scrollView: {
+      // backgroundColor: "black",
+      // justifyContent: "center",
+      // alignItems: "center"
+    },
+    title: {
+      fontSize: 20,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    lowContainer: {
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    poster: {
+      // resizeMode: "cover",
+      flex: 10,
+      width: "90%",
+      height: 200,
+      paddingHorizontal: 50
+      // alignItems: "stretch"
+    },
+  });
\ No newline at end of file