신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
e4864a8b 1 parent f61b7bc7

v1.1.0 +코드 리팩토링 -봤던 영화 목록

Inline Side-by-side
Showing 19 changed files with 510 additions and 974 deletions
......@@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import MainScreen from "./Components/MainScreen";
import Detail from "./Components/AppTabNavigator/Detail"
import Detail from "./Components/AppTabNavigator/Detail";
// import MovieInfo from "./Components/MovieInfo";
const AppStackNavigator = createStackNavigator({
Main: {
screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
},
Datail:{
Datail: {
screen: Detail
}
});
......
......@@ -3,92 +3,117 @@ import {
View,
Text,
StyleSheet,
Button,
Alert,
Image,
TouchableOpacity
TouchableOpacity,
AsyncStorage
} from "react-native";
import { Icon } from "native-base";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import {
NavigationActions,
createStackNavigator,
withNavigation,
SafeAreaView,
ScrollView
} from "react-navigation";
import { AntDesign } from "@expo/vector-icons";
import { SafeAreaView, ScrollView } from "react-navigation";
import axios from "axios";
import { AsyncStorage } from "react-native";
import * as API from "../../API_Key.js";
const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
export default class Detail extends Component {
constructor(props) {
super(props);
this.state = {
key: []
};
}
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-reorder" style={{ color: tintColor }} />
)
};
state = {
_AllKeys = async () => {
try {
tempKey = await AsyncStorage.getAllKeys();
this.setState({
key: tempKey
});
} catch (error) {}
};
_onPressButton = async title => {
await this._AllKeys(); // 현재 키 this.state.key 에 초기화
for (var value of this.state.key) {
if (value == title) {
Alert.alert(
"알림",
`즐겨찾기에 있는 영화입니다.`,
[
{
text: "넹"
}
],
{ cancelable: true }
);
return;
}
}
AsyncStorage.setItem(title, title);
Alert.alert(
"알림",
`즐겨찾기에 추가되었습니다.`,
[
{
text: "넹"
}
],
{ cancelable: true }
);
await this._AllKeys();
var temp = {
title: "",
overview: "",
release_date: "",
url: "",
back: "",
key: ""
backdrop_path: ""
};
var tempList = [];
currkeys = this.state.key;
getDB = async search => {
axios
for (let i = 0; i < currkeys.length; i++) {
temp = {
title: "",
backdrop_path: ""
};
temp.title = currkeys[i];
await axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp.title}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
title: response.data.results[0].title,
overview: response.data.results[0].overview + "\n\n\n",
release_date: response.data.results[0].release_date,
url: response.data.results[0].poster_path,
back: response.data.results[0].backdrop_path
temp.backdrop_path = response.data.results[0].backdrop_path;
tempList.push(temp);
if (i == this.state.key.length - 1) {
this.props.navigation.navigate("WantToWatchTab", {
keys: tempList
});
}
});
};
getNaverApi = async search => {
fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
})
.then(response => response.json())
.then(json => this.setState({ items: json.items }));
};
_AllKeys = async () => {
try {
this.state.key = await AsyncStorage.getAllKeys();
console.log(this.state.key);
} catch (error) {}
};
componentDidMount() {
this._AllKeys();
}
_onPressButton() {
this._AllKeys();
for (var value of this.state.key) {
if (value == this.state.title) {
AsyncStorage.removeItem(this.state.title);
console.log("1");
return;
}
}
AsyncStorage.setItem(this.state.title, this.state.title);
console.log("2");
}
render() {
const { navigation } = this.props;
var temp = navigation.getParam("title", "");
this.getDB(temp);
var title = navigation.getParam("title", ""); // title 변수를 전달 받아옴, default 값은 "" 으로 설정
var overview = navigation.getParam("overview", ""); // overview 변수를 전달 받아옴, default 값은 "" 으로 설정
var release_date = navigation.getParam("release_date", "");
var url = navigation.getParam("url", "");
var back = navigation.getParam("back", "");
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
......@@ -97,7 +122,7 @@ export default class Detail extends Component {
<View style={styles.backgroundContainer}>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original${this.state.back}`
uri: `https://image.tmdb.org/t/p/original${back}`
}}
style={styles.posterBack}
/>
......@@ -105,33 +130,29 @@ export default class Detail extends Component {
<View style={styles.overlay}>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original${this.state.url}`
uri: `https://image.tmdb.org/t/p/original${url}`
}}
style={styles.posterFront}
/>
<View style={styles.posterTitle}>
<Text style={styles.Title}>{this.state.title}</Text>
<Text style={styles.Title}>{title}</Text>
</View>
</View>
</View>
</View>
<View style={styles.container2}>
<View>
<Text style={styles.name}>{this.state.title}</Text>
<Text style={styles.name}>{title}</Text>
</View>
<View style={styles.lowContainer}>
<Text style={styles.overview}>{this.state.release_date}</Text>
<Text style={styles.overview}>{release_date}</Text>
<View style={styles.buttonLayout}>
<TouchableOpacity
// title="추가 "
onPress={() => this._onPressButton()}
>
<TouchableOpacity onPress={() => this._onPressButton(title)}>
<AntDesign name="star" color="yellow" style={styles.button} />
</TouchableOpacity>
</View>
</View>
<Text style={styles.overview}>{this.state.overview}</Text>
{/* <Text style={styles.overview}>{this.state.url}</Text> */}
<Text style={styles.overview}>{overview}</Text>
</View>
</ScrollView>
</SafeAreaView>
......@@ -139,8 +160,6 @@ export default class Detail extends Component {
}
}
//export default withNavigation(Detail);
const styles = StyleSheet.create({
container: {
flex: 1,
......@@ -164,10 +183,6 @@ const styles = StyleSheet.create({
},
overlay: {
flexDirection: "row"
// opacity: 0.5,
// backgroundColor: "#000000"
// alignItems: "center",
// justifyContent: "flex-end"
},
posterContainer: {
flex: 1,
......@@ -180,43 +195,25 @@ const styles = StyleSheet.create({
justifyContent: "flex-end"
},
posterBack: {
// resizeMode: "cover",
// flex: 10,
width: "100%",
height: "100%"
// marginLeft: 10,
// paddingHorizontal: 50
// alignItems: "stretch",
// alignItems: "center"
// borderRadius: 7
},
posterFront: {
// resizeMode: "cover",
// alignItems: "center",
// justifyContent: "flex-end",
// flex: 10,
marginTop: 100,
marginLeft: 10,
marginBottom: 10,
width: 120,
height: 160
// marginLeft: 10,
// paddingHorizontal: 45,
// alignItems: "stretch",
// borderRadius: 7
},
buttonLayout: {
marginLeft: "auto",
marginRight: 20,
justifyContent: "space-around",
// marginBottom: 10,
flexDirection: "row"
},
button: {
fontSize: 30
// width: 30,
// height: 30
},
searchContainer: {
backgroundColor: "black",
......@@ -248,8 +245,6 @@ const styles = StyleSheet.create({
backgroundColor: "black",
flex: 1,
flexDirection: "row"
// justifyContent: "center",
// alignItems: "center"
},
leftContainer: {
flex: 1,
......
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Image,
SafeAreaView,
ScrollView,
Alert,
TouchableOpacity
FlatList,
AsyncStorage
} from "react-native";
import { Icon } from "native-base";
import { AsyncStorage } from "react-native";
import axios from "axios";
import WantToWatchTab from "./WantToWatchTab";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
import RankUI from "./RankUI";
import * as API from "../../API_Key.js";
//List 전역변수 선언하기
//list = "";
const API_KEY = API.getAPI_KEY1(); // 영하 순위 받아오기
const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
export default class MovieRankingTab extends Component {
state = {
list: "", //Add하고 싶은 정보 list
flag: false, //WantToWatchTab을 새로고침 할지 말지 여부
isLoading: true,
info: [],
date: "",
name0: [],
name1: [],
name2: [],
name3: [],
name4: [],
name5: [],
name6: [],
name7: [],
name8: [],
name9: [],
imgur0: [],
imgurl: [],
imgur2: [],
imgur3: [],
imgur4: [],
imgur5: [],
imgur6: [],
imgur7: [],
imgur8: [],
imgur9: [],
overview0: [],
overview1: [],
overview2: [],
overview3: [],
overview4: [],
overview5: [],
overview6: [],
overview7: [],
overview8: [],
overview9: []
rankingList: []
};
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
......@@ -70,132 +31,45 @@ export default class MovieRankingTab extends Component {
`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,
name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].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,
info: response.data.boxOfficeResult.dailyBoxOfficeList
});
var ranking = response.data.boxOfficeResult.dailyBoxOfficeList;
name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl0: response.data.results[0].poster_path,
overview0: response.data.results[0].overview
});
});
var infos = []; // 전체 정보
name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl1: response.data.results[0].poster_path,
overview1: response.data.results[0].overview
});
});
var info = {
// 객체 생성
name: "",
url: "",
overview: ""
};
name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl2: response.data.results[0].poster_path,
overview2: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl3: response.data.results[0].poster_path,
overview3: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl4: response.data.results[0].poster_path,
overview4: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl5: response.data.results[0].poster_path,
overview5: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl6: response.data.results[0].poster_path,
overview6: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl7: response.data.results[0].poster_path,
overview7: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl8: response.data.results[0].poster_path,
overview8: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
// 랭킹 순으로 이름 정보 가져오기
for (let i = 0; i < 10; i++) {
info.name = ranking[i].movieNm;
infos.push(info);
info = {
name: "",
url: "",
overview: ""
};
}
// 영화이름으로 포스터 url, 줄거리 가져오기
for (let i = 0; i < 10; i++) {
name = infos[i].name;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${name}&language=ko-KR&page=1`
)
.then(response => {
infos[i].url = response.data.results[0].poster_path;
infos[i].overview = response.data.results[0].overview;
if (i == 9) {
this.setState({
imgurl9: response.data.results[0].poster_path,
overview9: response.data.results[0].overview
rankingList: infos
});
}
});
}
})
.catch(error => {
console.log(error);
......@@ -206,522 +80,73 @@ export default class MovieRankingTab extends Component {
value = await AsyncStorage.getItem(key);
console.log(value);
};
componentDidMount() {
var day = new Date().getDate() - 1; // 어제 날짜
var month = new Date().getMonth() + 1; //Current Month
if (month < 10) {
month = "0" + month;
}
var day = new Date().getDate() - 1; // 어제 일짜
if (day == 1) {
day = 30;
month = month - 1;
if (month == 0) {
month == 12;
}
} 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);
//this.printData('쥬만지: 넥스트 레벨')
}
//눌렀을 때 저장함수
_onPressButton(temp) {
//this.state.list = ""; //초기화(On Off 기능으로 짜놨습니당, 누적되는거 보고싶으면 이부분 주석달면 돼여)
// Alert.alert(temp); //메시지 띄우고
// this.state.list = this.state.list + temp + "\n"; //list 누적해준다(endl으로 구분)
// console.log(this.state.list); //콘솔에 log 띄운다
// AsyncStorage.setItem(`${temp}`, temp); //DB에 저장한다
this.props.navigation.navigate("Detail", { title: temp });
//WantToWatchTab.render(); //새로고침
}
//눌렀을 때 디테일 텝으로 이동
_onPressButton = async temp => {
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
)
.then(response => {
var data = response.data.results[0];
this.props.navigation.navigate("Detail", {
title: data.title,
overview: data.overview + "\n\n\n",
release_date: data.release_date,
url: data.poster_path,
back: data.backdrop_path
});
});
};
render() {
return (
<SafeAreaView style={style.container}>
<ScrollView style={style.scrollView}>
{/* ----- 1위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name0}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl0}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text style={style.name}>{this.state.name0}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text style={style.overview}>
{this.state.overview0.length < 60
? `${this.state.overview0}`
: `${this.state.overview0.substring(0, 57)}...\n `}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 2위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.overview}>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 3위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text style={style.name}>{this.state.name2}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text style={style.overview}>
{this.state.overview2.length < 60
? `${this.state.overview2}`
: `${this.state.overview2.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 4위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name3}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name3}`
)}
>
<Text style={style.name}>{this.state.name3}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name3}`
)}
>
<Text style={style.overview}>
{this.state.overview3.length < 60
? `${this.state.overview3}`
: `${this.state.overview3.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 5위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
)}
>
<Text style={style.name}>{this.state.name4}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.overview}>
{this.state.overview4.length < 60
? `${this.state.overview4}`
: `${this.state.overview4.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 6위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name5}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name5}`
)}
>
<Text style={style.name}>{this.state.name5}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name5}`
)}
>
<Text style={style.overview}>
{this.state.overview5.length < 60
? `${this.state.overview5}`
: `${this.state.overview5.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 7위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name6}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name6}`
)}
>
<Text style={style.name}>{this.state.name6}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name6}`
)}
>
<Text style={style.overview}>
{this.state.overview6.length < 60
? `${this.state.overview6}`
: `${this.state.overview6.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 8위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name7}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name7}`
)}
>
<Text style={style.name}>{this.state.name7}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name7}`
)}
>
<Text style={style.overview}>
{this.state.overview7.length < 60
? `${this.state.overview7}`
: `${this.state.overview7.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 9위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name8}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
}}
<ScrollView>
<FlatList
data={this.state.rankingList}
renderItem={({ item }) => {
return (
<View>
<RankUI
name={item.name}
imgur={item.url}
overview={item.overview}
_onPress={this._onPressButton.bind(this, `${item.name}`)}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name8}`
)}
>
<Text style={style.name}>{this.state.name8}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name8}`
)}
>
<Text style={style.overview}>
{this.state.overview8.length < 60
? `${this.state.overview8}`
: `${this.state.overview8.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 10위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name9}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}`
);
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name9}`
)}
>
<Text style={style.name}>{this.state.name9}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name9}`
)}
>
<Text style={style.overview}>
{this.state.overview9.length < 60
? `${this.state.overview9}`
: `${this.state.overview9.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black"
},
scrollView: {
// backgroundColor: "black",
// justifyContent: "center",
// alignItems: "center"
},
title: {
fontSize: 20,
justifyContent: "center",
alignItems: "center"
},
lowContainer: {
flex: 1,
flexDirection: "row",
// backgroundColor: "black",
// alignContent: "space-around",
justifyContent: "center",
alignItems: "center",
marginLeft: 10,
marginTop: 10,
marginBottom: 20
},
leftContainer: {
flex: 1,
// backgroundColor: "yellow",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2
// flexDirection: "column",
// backgroundColor: "yellow"
},
rightUpContainer: {
flex: 1,
paddingTop: 15,
// backgroundColor: "blue",
justifyContent: "center",
marginLeft: 20
// alignItems: "center"
},
rightDownContainer: {
flex: 3,
// backgroundColor: "red",
// margin: "5%"
paddingTop: 20,
paddingBottom: 10,
padding: 15
// justifyContent: "center",
// alignItems: "center"
},
poster: {
resizeMode: "cover",
flex: 10,
width: "40%",
height: 40,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
name: {
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
......
import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
import { CardItem } from "native-base";
export default class MyList extends Component {
static defaultProps = {
name: "",
backdrop_path: "",
_onPress: () => null
};
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<TouchableOpacity onPress={this.props._onPress}>
<Image
style={styles.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.props.backdrop_path}`
}}
/>
</TouchableOpacity>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<CardItem style={styles.container}>
<View style={styles.container}>
<TouchableOpacity onPress={this.props._onPress}>
<Text style={styles.textStyle}>{this.props.name}</Text>
</TouchableOpacity>
</View>
</CardItem>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1
},
lowContainer: {
marginLeft: 15,
backgroundColor: "black",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
leftContainer: {
flex: 1,
backgroundColor: "black",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2,
backgroundColor: "black"
},
poster: {
resizeMode: "cover",
flex: 10,
width: "40%",
height: 80,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
textStyle: {
fontSize: 16,
color: "white"
}
});
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
export default class RankUI extends Component {
static defaultProps = {
name: "",
imgur: "",
overview: "",
_onPress: () => null
};
constructor(props) {
super(props);
}
render() {
return (
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity onPress={this.props._onPress}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.props.imgur}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity onPress={this.props._onPress}>
<Text style={style.name}>{this.props.name}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity onPress={this.props._onPress}>
<Text style={style.overview}>
{this.props.overview.length < 60
? `${this.props.overview}`
: `${this.props.overview.substring(0, 57)}...\n `}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const style = StyleSheet.create({
title: {
fontSize: 20,
justifyContent: "center",
alignItems: "center"
},
lowContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginLeft: 10,
marginTop: 10,
marginBottom: 20
},
leftContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2
},
rightUpContainer: {
flex: 1,
paddingTop: 15,
justifyContent: "center",
marginLeft: 20
},
rightDownContainer: {
flex: 3,
paddingTop: 20,
paddingBottom: 10,
padding: 15
},
poster: {
resizeMode: "cover",
flex: 10,
width: "40%",
height: 40,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
name: {
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
......@@ -11,10 +11,11 @@ import {
} from "react-native";
import { Card, CardItem, Icon } from "native-base";
import axios from "axios";
import * as API from "../../API_Key.js";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
const NAVER_CLIENT_ID = API.getNAVER_CLIENT_ID();
const NAVER_CLIENT_SECRET = API.getNAVER_CLIENT_SECRET();
export default class Search extends Component {
static navigationOptions = {
......@@ -61,6 +62,23 @@ export default class Search extends Component {
this.getDB(typing);
};
_onPressButton = async temp => {
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
)
.then(response => {
var data = response.data.results[0];
this.props.navigation.navigate("Detail", {
title: data.title,
overview: data.overview + "\n\n\n",
release_date: data.release_date,
url: data.poster_path,
back: data.backdrop_path
});
});
};
render() {
console.log("1");
return (
......@@ -94,9 +112,7 @@ export default class Search extends Component {
{
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail", {
title: result.title
})
this._onPressButton(result.title)
}
>
<Image
......@@ -111,15 +127,28 @@ export default class Search extends Component {
</View>
<View style={styles.rightContainer}>
<View style={styles.rightUpContainer}>
<TouchableOpacity
onPress={() => this._onPressButton(result.title)}
>
<Text style={styles.name}>{result.title}</Text>
</TouchableOpacity>
</View>
<View style={styles.rightDownContainer}>
<CardItem style={styles.container}>
<TouchableOpacity
onPress={() =>
this._onPressButton(result.title)
}
>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...\n`}
: `${result.overview.substring(
0,
57
)}...\n`}
</Text>
</TouchableOpacity>
</CardItem>
</View>
</View>
......
import React, { Component } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import { Icon } from "native-base";
import { withNavigation } from 'react-navigation';
import { navigation, StackActions, NavigationActions } from 'react-navigation';
import 'react-native-gesture-handler'
import Detail from './Detail'
import "react-native-gesture-handler";
export default class SeenMovieTab extends Component {
static navigationOptions = {
......@@ -17,13 +14,15 @@ export default class SeenMovieTab extends Component {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
<Button title = 'hi' onPress = { () => this.props.navigation.navigate('Detail')} />
<Button
title="hi"
onPress={() => this.props.navigation.navigate("Detail")}
/>
</View>
);
}
}
const style = StyleSheet.create({
container: {
backgroundColor: "black",
......
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
AsyncStorage,
SafeAreaView,
ScrollView,
RefreshControl,
Alert,
Image
FlatList
} from "react-native";
import { Card, CardItem, Icon } from "native-base";
import { Icon } from "native-base";
import axios from "axios";
import MovieRankingTab from "./MovieRankingTab";
import { symbol } from "prop-types";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
import MyList from "./MyList";
import * as API from "../../API_Key.js";
const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
export default class App extends Component {
static defaultProps = {
title: []
};
constructor(props) {
super(props);
}
state = {
list: [], //영화 제목 list
date: "", //날짜
names: [], // api로 받아오 영화 제목
imgurls: [], //이미지
name0: [], //제목
results: [], // json 오브젝트
title: ""
addDate: [],
flag: true
};
//네비게이션 바
......@@ -37,69 +38,33 @@ export default class App extends Component {
)
};
//Data 설정함수
// 로컬스토리지 초기화
_AllKeys = async () => {
try {
tempKey = await AsyncStorage.getAllKeys();
this.setState({
list: tempKey
});
} catch (error) {}
};
// 초기 스토리지값 불러오기
setData = async () => {
try {
//요거 바꿔봤다
// this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다
// console.log(this.state.list); //잘 뜨는데??
// const value = await AsyncStorage.getItem("@movieName:key");
// if (value !== null) {
// We have data!!
// await AsyncStorage.getAllKeys().then(console.log);
this.state.list = await AsyncStorage.getAllKeys();
// this.setState({
// name0: this.state.list[0].name
// });
// console.log("확인용", this.state.list);
// var cnt = this.state.list.length;
// console.log(cnt);
// var temp1 = [];
// var temp2 = [];
for (var i = 0; i < this.state.list.length; i++) {
await this._AllKeys(); // 로컬스토리지에서 this.state.list로 이름 받아오기
var length = this.state.list.length;
for (let i = 0; i < length; i++) {
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${this.state.list[i]}&language=ko-KR&page=1`
)
.then(response => {
var joined = this.state.imgurls.concat(
response.data.results[0].poster_path
);
// var joined = response.data.results[0].poster_path;
// var name = response.data.results[0].title;
// var name = this.state.list.concat(response.data.results[0].title);
// temp1.push(joined);
// temp2.push(name);
// var temp = this.state.list.concat(response.data.results[0].title);
var result = this.state.results.concat(response.data.results[0]);
// var temp = [joined, name];
// var tempObj = this.state.results.concat(temp);
// this.setState({ imgurls: joined, names: name, results: tempObj });
this.setState({
imgurls: joined,
results: result
// results: [this.state.list, imgurls]
});
console.log("list", this.state.list);
console.log("imgurls", this.state.imgurls);
// console.log("results", this.state.imgurls);
// var temp = [];
// console.log(newobj);
// console.log(joined);
// console.log(response.data.results[0].title);
// console.log(response.data.results[0].poster_path);
// console.log(response.data.results);
});
// var newobj = [temp1, temp2];
// this.setState({ results: newobj });
// console.log(newobj);
// var a = [1, 3, 4];
// var b = [3, 4, 5];
// var newobj = [a, b];
// var newobj = [...this.state.imgurls, ...this.state.names];
// console.log(newobj);
}
} catch (error) {
alert(error);
......@@ -108,51 +73,78 @@ export default class App extends Component {
componentDidMount() {
this.setData();
// var cnt = this.state.list.length;
// console.log(cnt);
// this.getDB();
}
// 해당 영화에 detail로 이동
_onPressButton = async temp => {
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
)
.then(response => {
var data = response.data.results[0];
this.props.navigation.navigate("Detail", {
title: data.title,
overview: data.overview + "\n\n\n",
release_date: data.release_date,
url: data.poster_path,
back: data.backdrop_path
});
});
};
// props를 받아온 후 (새로운 데이터 추가된 후) 부터는 초기화면으로 안 감
componentWillReceiveProps() {
this.setState({
flag: false
});
}
render() {
//AsyncStorage.clear();
const { navigation } = this.props;
var addlist = navigation.getParam("keys", ""); // 새로 넘겨 받은 리스트
const { flag } = this.state;
return (
<View style={styles.container}>
{/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<View style={styles.container}>
{/* <Card> */}
{this.state.results.map(item => (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail", {
title: item.title
})
}
>
<Image
style={styles.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
<SafeAreaView>
<ScrollView>
<View>
{flag === true ? (
<FlatList
data={this.state.results}
renderItem={({ item }) => {
return (
<MyList
name={item.title}
backdrop_path={item.backdrop_path}
_onPress={this._onPressButton.bind(
this,
`${item.title}`
)}
/>
);
}}
/>
</TouchableOpacity>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<CardItem style={styles.container}>
<View style={styles.container}>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</CardItem>
</View>
</View>
))}
{/* </Card> */}
) : (
<FlatList
data={addlist}
renderItem={({ item }) => {
return (
<MyList
name={item.title}
backdrop_path={item.backdrop_path}
_onPress={this._onPressButton.bind(
this,
`${item.title}`
)}
/>
);
}}
/>
)}
</View>
</ScrollView>
</SafeAreaView>
......@@ -165,54 +157,5 @@ const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1
// alignItems: "center",
// justifyContent: "center"
},
lowContainer: {
marginLeft: 15,
backgroundColor: "black",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
leftContainer: {
flex: 1,
backgroundColor: "black",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2,
backgroundColor: "black"
},
rightUpContainer: {
flex: 1,
backgroundColor: "black",
paddingTop: 35,
justifyContent: "center",
marginLeft: 20
},
rightDownContainer: {
flex: 3,
backgroundColor: "black",
paddingBottom: 10
},
poster: {
resizeMode: "cover",
flex: 10,
width: "40%",
height: 80,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
textStyle: {
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
......
import React, { Component } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { StyleSheet } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
import MovieRankingTab from "./AppTabNavigator/MovieRankingTab";
import WantToWatchTab from "./AppTabNavigator/WantToWatchTab";
import Search from ".//AppTabNavigator/Search";
import Detail from "./AppTabNavigator/Detail";
import { Platform } from "react-native";
import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
const AppTabNavigator = createMaterialTopTabNavigator(
{
SeenMovieTab: { screen: SeenMovieTab },
MovieRankingTab: { screen: MovieRankingTab },
WantToWatchTab: { screen: WantToWatchTab },
//SeenMovieTab: { screen: SeenMovieTab },
Search: { screen: Search },
Detail: { screen: Detail }
},
......@@ -48,7 +45,7 @@ export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: " Poket Movie",
title: " Pocket Movie",
headerStyle: {
backgroundColor: "black"
},
......
import React from "react";
import { StyleSheet, Text, View, StatusBar } from "react-native";
export default function Loading() {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text style={styles.text}>Getting the current weather</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-end",
paddingHorizontal: 30,
paddingVertical: 100,
backgroundColor: "#FDF6AA"
},
text: {
color: "#2c2c2c",
fontSize: 30
}
});
......@@ -18,7 +18,12 @@
},
"assetBundlePatterns": ["**/*"],
"ios": {
"bundleIdentifier": "com.hj.pocketMovie",
"supportsTablet": true
}
},
"android": {
"package": "com.hj.pocketMovie"
},
"description": ""
}
}
......

7.01 KB | W: | H:

15.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -22,7 +22,7 @@
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-axios": "^0.17.1",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.5.2",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.2.0",
"react-native-screens": "~1.0.0-alpha.23",
"react-native-stack": "^1.0.0-alpha11",
......@@ -36,5 +36,5 @@
"babel-preset-expo": "^7.1.0"
},
"private": true,
"version": "0.0.0"
"version": "1.0.0"
}
......
No preview for this file type
......@@ -2726,11 +2726,6 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
......@@ -4716,15 +4711,14 @@ react-native-elements@^1.2.7:
react-native-ratings "^6.3.0"
react-native-status-bar-height "^2.2.0"
react-native-gesture-handler@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz#281111550bf1eee10b7feba5278d142169892731"
integrity sha512-Xp03dq4XYVTD0xmWx4DW4eX+ox1NQLjHmbykspTdS5FCNIVIOekVXRLFCw1698/v8dYUHApNo6K3s3BCD8fqPA==
react-native-gesture-handler@~1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
dependencies:
hammerjs "^2.0.8"
hoist-non-react-statics "^2.3.1"
invariant "^2.2.4"
prop-types "^15.7.2"
invariant "^2.2.2"
prop-types "^15.5.10"
react-native-iphone-x-helper@^1.0.3:
version "1.2.1"
......
메인 화면에서는
영화진흥위원회에서 제공하는 Open API를 통해 어제 날짜 기준으로 영화 순위를 1위부터 10위까지 받아왔고,
해당 API가 따로 포스터 이미지를 제공하지 않아 더 무비라는 해외 사이트에서 포스터와 줄거리를 가져왔습니다.
각 영화 리스트를 클릭하면 영화의 상세 페이지로 넘어가 자세한 정보를 볼 수 있고, 옆에 보시는 즐겨찾기 버튼을 통해 나중에 볼 영화 목록를 등록할 수 있습니다.
My movie탭을 누르면 영화가 추가 된것을 볼 수 있습니다.
밑에 검색탭을 보시면 영화 이름 검색시 해당 단어가 들어간 영화의 정보를 받아 오는 것을 볼 수 있습니다,
이상으로 발표 마치겠습니다.
\ No newline at end of file