bluejoyq / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
bluejoyq
2ec23583 1 parent 1abf1151

add icon to search card and change design little

Inline Side-by-side
Showing 14 changed files with 72 additions and 34 deletions
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
2 "devToolsPort": 19002, 2 "devToolsPort": 19002,
3 "expoServerPort": 19000, 3 "expoServerPort": 19000,
4 "packagerPort": 19001, 4 "packagerPort": 19001,
5 - "packagerPid": 11640, 5 + "packagerPid": 18388,
6 "expoServerNgrokUrl": "https://cx-ky7.anonymous.searchguide.exp.direct", 6 "expoServerNgrokUrl": "https://cx-ky7.anonymous.searchguide.exp.direct",
7 "packagerNgrokUrl": "https://packager.cx-ky7.anonymous.searchguide.exp.direct", 7 "packagerNgrokUrl": "https://packager.cx-ky7.anonymous.searchguide.exp.direct",
8 - "ngrokPid": 8960 8 + "ngrokPid": 32168
9 } 9 }
......
...@@ -11,10 +11,16 @@ const Home = ({searchResults}) => { ...@@ -11,10 +11,16 @@ const Home = ({searchResults}) => {
11 return( 11 return(
12 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}> 12 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
13 <SearchBar /> 13 <SearchBar />
14 - <ScrollView> 14 + <ScrollView style={{marginBottom:10}}>
15 { searchResults.length ? ( searchResults.map((searchResult, index) => ( 15 { searchResults.length ? ( searchResults.map((searchResult, index) => (
16 - <SearchCard key={index} title={searchResult.title} content={searchResult.passage} 16 + <SearchCard
17 - url={searchResult.url} metric={Math.round(searchResult.confidence * 100)} />))) 17 + key={index}
18 + title={searchResult.title}
19 + content={searchResult.passage}
20 + url={searchResult.url}
21 + metric={Math.round(searchResult.confidence * 100)}
22 + site={searchResult.site}
23 + />)))
18 : <PromptSearch /> 24 : <PromptSearch />
19 } 25 }
20 </ScrollView> 26 </ScrollView>
......
...@@ -3,20 +3,7 @@ import { View,Text, StyleSheet, Button } from 'react-native'; ...@@ -3,20 +3,7 @@ import { View,Text, StyleSheet, Button } from 'react-native';
3 import Icon from 'react-native-vector-icons/FontAwesome'; 3 import Icon from 'react-native-vector-icons/FontAwesome';
4 import Swiper from 'react-native-swiper'; 4 import Swiper from 'react-native-swiper';
5 5
6 -export default PromptSearch = () => { 6 +const FirstSlide = () => (
7 -
8 - return(
9 - <Swiper style={styles.wrapper} showsButtons={true} loop={false}>
10 - <FirstSlide />
11 - <SecondSlide />
12 - <ThirdSlide />
13 - <LastSlide />
14 - </Swiper>
15 -
16 - )
17 -}
18 -
19 -const FirstSlide = () => {
20 <View style={styles.slide1} > 7 <View style={styles.slide1} >
21 <Icon name='search' style={styles.icon} size={50} /> 8 <Icon name='search' style={styles.icon} size={50} />
22 <Text style={styles.text}>당신이 궁금해하는</Text> 9 <Text style={styles.text}>당신이 궁금해하는</Text>
...@@ -24,8 +11,8 @@ const FirstSlide = () => { ...@@ -24,8 +11,8 @@ const FirstSlide = () => {
24 <Text style={styles.subtext}>길잡이가 당신의</Text> 11 <Text style={styles.subtext}>길잡이가 당신의</Text>
25 <Text style={styles.subtext}>질문을 이해할거에요</Text> 12 <Text style={styles.subtext}>질문을 이해할거에요</Text>
26 </View> 13 </View>
27 -} 14 +)
28 -const SecondSlide = () => { 15 +const SecondSlide = () => (
29 <View style={styles.slide2} > 16 <View style={styles.slide2} >
30 <Icon name='search' style={styles.icon} size={50} /> 17 <Icon name='search' style={styles.icon} size={50} />
31 <Text style={styles.text}>길잡이가 수정한</Text> 18 <Text style={styles.text}>길잡이가 수정한</Text>
...@@ -33,8 +20,8 @@ const SecondSlide = () => { ...@@ -33,8 +20,8 @@ const SecondSlide = () => {
33 <Text style={styles.subtext}>길잡이는 항상 최적의</Text> 20 <Text style={styles.subtext}>길잡이는 항상 최적의</Text>
34 <Text style={styles.subtext}>검색키위드를 제안합니다</Text> 21 <Text style={styles.subtext}>검색키위드를 제안합니다</Text>
35 </View> 22 </View>
36 -} 23 +)
37 -const ThirdSlide = () => { 24 +const ThirdSlide = () => (
38 <View style={styles.slide3} > 25 <View style={styles.slide3} >
39 <Icon name='search' style={styles.icon} size={50} /> 26 <Icon name='search' style={styles.icon} size={50} />
40 <Text style={styles.text}>검색 점수와 그래프로</Text> 27 <Text style={styles.text}>검색 점수와 그래프로</Text>
...@@ -42,8 +29,8 @@ const ThirdSlide = () => { ...@@ -42,8 +29,8 @@ const ThirdSlide = () => {
42 <Text style={styles.subtext}>길잡이는 당신의</Text> 29 <Text style={styles.subtext}>길잡이는 당신의</Text>
43 <Text style={styles.subtext}>검색능력 향상시킵니다</Text> 30 <Text style={styles.subtext}>검색능력 향상시킵니다</Text>
44 </View> 31 </View>
45 -} 32 +)
46 -const LastSlide = () => { 33 +const LastSlide = () => (
47 <View style={styles.slide4} > 34 <View style={styles.slide4} >
48 <Icon name='search' style={styles.icon} size={50} /> 35 <Icon name='search' style={styles.icon} size={50} />
49 <Text style={styles.text}>내 손 안의 검색 도우미</Text> 36 <Text style={styles.text}>내 손 안의 검색 도우미</Text>
...@@ -54,6 +41,20 @@ const LastSlide = () => { ...@@ -54,6 +41,20 @@ const LastSlide = () => {
54 onPress={() => Alert.alert('Simple Button pressed')} 41 onPress={() => Alert.alert('Simple Button pressed')}
55 /> 42 />
56 </View> 43 </View>
44 +)
45 +
46 +export default PromptSearch = () => {
47 + return(
48 + <>
49 + <Text>ssdd</Text>
50 + <Swiper style={styles.wrapper} showsButtons={true} loop={false}>
51 + <FirstSlide />
52 + <SecondSlide />
53 + <ThirdSlide />
54 + <LastSlide />
55 + </Swiper>
56 + </>
57 + )
57 } 58 }
58 59
59 const styles = StyleSheet.create({ 60 const styles = StyleSheet.create({
......
...@@ -4,7 +4,7 @@ import { StyleSheet,View } from 'react-native'; ...@@ -4,7 +4,7 @@ import { StyleSheet,View } from 'react-native';
4 4
5 export default PromptSearchRate = () => ( 5 export default PromptSearchRate = () => (
6 <View style={{alignItems:'center'}}> 6 <View style={{alignItems:'center'}}>
7 - <Text style={styles.Text}>아직 검색</Text> 7 + <Text style={styles.Text}>아직까지 검색</Text>
8 <Text style={styles.Text}>결과가 없습니다!</Text> 8 <Text style={styles.Text}>결과가 없습니다!</Text>
9 </View> 9 </View>
10 ) 10 )
...@@ -12,7 +12,8 @@ export default PromptSearchRate = () => ( ...@@ -12,7 +12,8 @@ export default PromptSearchRate = () => (
12 12
13 const styles = StyleSheet.create({ 13 const styles = StyleSheet.create({
14 Text:{ 14 Text:{
15 - fontSize: 25, 15 + fontSize: 20,
16 + color: '#123422'
16 }, 17 },
17 18
18 }); 19 });
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv'; 2 import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
3 import { Avatar, Button, Card, Title, Paragraph, Text } from 'react-native-paper'; 3 import { Avatar, Button, Card, Title, Paragraph, Text } from 'react-native-paper';
4 -import {Linking } from 'react-native'; 4 +import {Linking, Image, StyleSheet } from 'react-native';
5 +
6 +const SearchIcon = (props) => {
7 + switch(props.site){
8 + case 'naver.com':
9 + return(<Image source={require('../../assets/img/naver-logo.png')} style={styles.image}/>)
10 + case 'google.com':
11 + return(<Image source={require('../../assets/img/google-logo.png')} style={styles.image}/>)
12 + case 'namu.wiki':
13 + return(<Image source={require('../../assets/img/namu-logo.png')} style={styles.image}/>)
14 + case 'facebook.com':
15 + return(<Image source={require('../../assets/img/facebook-logo.png')} style={styles.image}/>)
16 + case 'ko.wikipedia.org':
17 + return(<Image source={require('../../assets/img/wiki-logo.png')} style={styles.image}/>)
18 + case 'youtube.com':
19 + return(<Image source={require('../../assets/img/youtube-logo.png')} style={styles.image}/>)
20 + default:
21 + return(<Image source={require('../../assets/img/etc-logo.png')} style={styles.image}/>)
22 + }
23 +}
24 +
25 +
5 26
6 const SearchCard = (props) => ( 27 const SearchCard = (props) => (
7 <Card style={{marginTop:10, marginLeft:10, marginRight:10}}> 28 <Card style={{marginTop:10, marginLeft:10, marginRight:10}}>
8 <Card.Title title={props.title} 29 <Card.Title title={props.title}
9 - left={ (props) => ( <Avatar.Icon {...props} icon="folder" color={WHITE_MAIN}style={{backgroundColor:LIGHT_MAIN}} /> ) } /> 30 + left={ () => ( <SearchIcon site={props.site} /> ) } />
10 <Card.Content> 31 <Card.Content>
11 <Paragraph>{props.content}</Paragraph> 32 <Paragraph>{props.content}</Paragraph>
12 </Card.Content> 33 </Card.Content>
13 <Card.Actions style={{flexDirection:'row', justifyContent:'space-between'}}> 34 <Card.Actions style={{flexDirection:'row', justifyContent:'space-between'}}>
14 - <Text style={{marginTop:7, fontStyle:'italic'}}>정확도 : {props.metric}%</Text> 35 + <Text style={{marginTop:7, marginLeft: 10,fontStyle:'italic'}}>정확도 : {props.metric}%</Text>
15 <Button mode='contained' color= {LIGHT_MAIN} labelStyle={{color:WHITE_MAIN}} onPress={()=>{Linking.openURL(props.url)}}> 36 <Button mode='contained' color= {LIGHT_MAIN} labelStyle={{color:WHITE_MAIN}} onPress={()=>{Linking.openURL(props.url)}}>
16 자세히보기 37 자세히보기
17 </Button> 38 </Button>
...@@ -19,4 +40,13 @@ const SearchCard = (props) => ( ...@@ -19,4 +40,13 @@ const SearchCard = (props) => (
19 </Card> 40 </Card>
20 ); 41 );
21 42
43 +const styles = StyleSheet.create({
44 + image:{
45 + width: 45,
46 + height: 45,
47 + borderRadius: 100
48 + }
49 +});
50 +
51 +
22 export default SearchCard; 52 export default SearchCard;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,6 @@ import filter from './filter'; ...@@ -3,7 +3,6 @@ import filter from './filter';
3 3
4 export const sendSearch = async(searchText) => { 4 export const sendSearch = async(searchText) => {
5 return new Promise((resolve,reject) => { 5 return new Promise((resolve,reject) => {
6 - let isBlank_reg = "/\s\g"
7 if(searchText=== "" || searchText.length > 30 ){ 6 if(searchText=== "" || searchText.length > 30 ){
8 resolve({ "return_code" : -1, "error_code": "검색 단어를 확인해 주세요!" }); 7 resolve({ "return_code" : -1, "error_code": "검색 단어를 확인해 주세요!" });
9 } else{ 8 } else{
...@@ -24,13 +23,14 @@ export const sendSearch = async(searchText) => { ...@@ -24,13 +23,14 @@ export const sendSearch = async(searchText) => {
24 ) 23 )
25 .then((response)=>{ 24 .then((response)=>{
26 resolve(filter(response.data)) 25 resolve(filter(response.data))
27 - return true; 26 + clearTimeout(timer);
28 }) 27 })
29 .catch(error => { 28 .catch(error => {
30 - throw new Error(err) 29 + clearTimeout(timer);
30 + throw new Error(error);
31 }); 31 });
32 } 32 }
33 - setTimeout( () => { 33 + let timer = setTimeout( () => {
34 throw new Error( "time out" );} ,10000) 34 throw new Error( "time out" );} ,10000)
35 }) 35 })
36 } 36 }
...\ No newline at end of file ...\ No newline at end of file
......