bluejoyq

add icon to search card and change design little

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