김서영 / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
bluejoyq
81763fb6 2 parents 32f2a1ca e580a251

Merge branch 'design3' into 'master' 

Design3

rate 디자인 거의 완성!!

See merge request !12
Inline Side-by-side
Showing 5 changed files with 103 additions and 69 deletions
...@@ -3,7 +3,7 @@ import { Text } from 'react-native-paper'; ...@@ -3,7 +3,7 @@ import { Text } from 'react-native-paper';
3 import { StyleSheet,View } from 'react-native'; 3 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',justifyContent: '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>
......
1 import React,{ useState } from 'react'; 1 import React,{ useState } from 'react';
2 import { Surface, Text ,HelperText} from 'react-native-paper'; 2 import { Surface, Text ,HelperText} from 'react-native-paper';
3 import { StyleSheet,View } from 'react-native'; 3 import { StyleSheet,View } from 'react-native';
4 -import { StackedBarChart } from 'react-native-svg-charts'; 4 +import { PieChart } from 'react-native-svg-charts';
5 import PromptSearchRate from '../PromptSearch/PromptSearchRate'; 5 import PromptSearchRate from '../PromptSearch/PromptSearchRate';
6 6
7 export default RateBar = (props) => { 7 export default RateBar = (props) => {
...@@ -14,48 +14,54 @@ export default RateBar = (props) => { ...@@ -14,48 +14,54 @@ export default RateBar = (props) => {
14 <> 14 <>
15 <View style={styles.container}> 15 <View style={styles.container}>
16 <Text style={styles.Text}>총 점수 : {props.score.full}점</Text> 16 <Text style={styles.Text}>총 점수 : {props.score.full}점</Text>
17 - <View style={styles.colorContainer}>
18 - <View style={styles.textContainer}>
19 - <View style={styles.colorA}></View><Text>키워드 점수</Text>
20 - </View>
21 - <View style={styles.textContainer}>
22 - <View style={styles.colorB}></View><Text>맞춤법 점수</Text>
23 - </View>
24 - </View>
25 </View> 17 </View>
26 - <StackedBarChart 18 +
27 - data={ [{ 19 + <View style={styles.container}>
28 - keyword: { 20 + <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
29 - value: props.score.key, 21 + </View>
30 - svg: {
31 - onPressIn: () => {setClick(1)},
32 - onPressOut: ()=>{setClick(0)}
33 - },
34 - },
35 - korean: {
36 - value: props.score.fix,
37 - svg: {
38 - onPressIn: () => {setClick(2)},
39 - onPressOut: ()=>{setClick(0)}
40 - },
41 - },
42 - rest: {
43 - value: (100-(props.score.key+props.score.fix)),
44 - }
45 - }]}
46 - style={{height:50, width:'90%'}}
47 - keys={['keyword','korean','rest']}
48 - colors={['#f98a1a','#14a986','#ffffff']}
49 - showGrid={ false }
50 - horizontal={ true }
51 - contentInset={ { top: 10 } }
52 - valueAccessor={({ item, key }) => item[key].value}
53 - />
54 <View style={styles.infoContainer}> 22 <View style={styles.infoContainer}>
55 - <HelperText type={'info'} visible={click==1} style={styles.helper}>키워드 : {props.score.key}</HelperText>
56 <HelperText type={'info'} visible={click==2} style={styles.helper}>맞춤법 : {props.score.fix}</HelperText> 23 <HelperText type={'info'} visible={click==2} style={styles.helper}>맞춤법 : {props.score.fix}</HelperText>
24 + <HelperText type={'info'} visible={click==1} style={styles.helper}>키워드 : {props.score.key}</HelperText>
25 + </View>
26 + <View style={styles.chartContatiner}>
27 + <View>
28 + <PieChart
29 + style={ styles.chart }
30 + data={[{
31 + value: props.score.key,
32 + svg:{
33 + fill : '#e85a71',
34 + onPressIn: () => {setClick(1)},
35 + onPressOut: ()=>{setClick(0)}
36 + },
37 + key: "키워드"
38 + },
39 + {
40 + value: props.score.fix,
41 + svg: {
42 + fill : '#d8e9ef',
43 + onPressIn: () => {setClick(2)},
44 + onPressOut: ()=>{setClick(0)}
45 + },
46 + key: "맞춤법"
47 + },
48 + {
49 + value: (100-(props.score.key+props.score.fix)),
50 + key : ""
51 + }
52 + ]}
53 + innerRadius={"50%"}
54 + />
55 + </View>
56 + <View style={styles.colorContainer}>
57 + <View style={styles.textContainer}>
58 + <View style={styles.colorA}></View><Text>키워드 점수</Text>
59 + </View>
60 + <View style={styles.textContainer}>
61 + <View style={styles.colorB}></View><Text>맞춤법 점수</Text>
62 + </View>
63 + </View>
57 </View> 64 </View>
58 - <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
59 </> 65 </>
60 : <PromptSearchRate />} 66 : <PromptSearchRate />}
61 </Surface> 67 </Surface>
...@@ -70,13 +76,14 @@ const styles = StyleSheet.create({ ...@@ -70,13 +76,14 @@ const styles = StyleSheet.create({
70 width: '100%', 76 width: '100%',
71 flexDirection:'row', 77 flexDirection:'row',
72 justifyContent:'center', 78 justifyContent:'center',
79 + marginTop : 8,
73 }, 80 },
74 colorContainer:{ 81 colorContainer:{
75 position:"absolute", 82 position:"absolute",
76 - right:0, 83 + right:20,
77 }, 84 },
78 colorA:{ 85 colorA:{
79 - backgroundColor:'#f98a1a', 86 + backgroundColor:'#e85a71',
80 height: 7, 87 height: 7,
81 width: 7, 88 width: 7,
82 marginRight: 5, 89 marginRight: 5,
...@@ -84,13 +91,23 @@ const styles = StyleSheet.create({ ...@@ -84,13 +91,23 @@ const styles = StyleSheet.create({
84 fontSize: 13, 91 fontSize: 13,
85 }, 92 },
86 colorB:{ 93 colorB:{
87 - backgroundColor:'#2cc3c2', 94 + backgroundColor:'#d8e9ef',
88 height: 7, 95 height: 7,
89 width: 7, 96 width: 7,
90 marginRight: 5, 97 marginRight: 5,
91 fontFamily:"Regular", 98 fontFamily:"Regular",
92 fontSize: 13, 99 fontSize: 13,
93 }, 100 },
101 + chartContatiner:{
102 + flexDirection:'row',
103 + justifyContent:"flex-start",
104 + alignItems:'flex-start',
105 + },
106 + chart:{
107 + height: 125,
108 + width:"100%",
109 + position:"absolute",
110 + },
94 textContainer:{ 111 textContainer:{
95 flexDirection:'row', 112 flexDirection:'row',
96 justifyContent:'center', 113 justifyContent:'center',
...@@ -104,11 +121,13 @@ const styles = StyleSheet.create({ ...@@ -104,11 +121,13 @@ const styles = StyleSheet.create({
104 width: '100%' 121 width: '100%'
105 }, 122 },
106 surface: { 123 surface: {
107 - padding: 8, 124 + paddingTop: 10,
108 - flex: 0.3, 125 + paddingBottom:0,
126 + flex: 0.55,
109 width: '95%', 127 width: '95%',
110 - alignItems: 'center', 128 + flexDirection:'column',
111 - justifyContent: 'center', 129 + alignItems: "center",
130 + justifyContent: 'flex-start',
112 elevation: 2, 131 elevation: 2,
113 marginTop: 10, 132 marginTop: 10,
114 borderRadius: 5 133 borderRadius: 5
...@@ -121,9 +140,10 @@ const styles = StyleSheet.create({ ...@@ -121,9 +140,10 @@ const styles = StyleSheet.create({
121 message:{ 140 message:{
122 fontFamily:"Son", 141 fontFamily:"Son",
123 fontSize: 20, 142 fontSize: 20,
143 + marginBottom: 10,
124 }, 144 },
125 helper:{ 145 helper:{
126 - fontFamily:"Regular", 146 + fontFamily:"Bold",
127 fontSize:15 147 fontSize:15
128 } 148 }
129 }); 149 });
......
...@@ -15,16 +15,22 @@ const RateLine = ({load,pastRecords }) => { ...@@ -15,16 +15,22 @@ const RateLine = ({load,pastRecords }) => {
15 <Surface style={styles.surface}> 15 <Surface style={styles.surface}>
16 {pastRecords.length ? 16 {pastRecords.length ?
17 <> 17 <>
18 - <Text style={styles.info}>점수 변화</Text> 18 + <Text style={styles.message}>당신의 점수 변화를 확인하세요!</Text>
19 <View style={styles.scoreContainer}> 19 <View style={styles.scoreContainer}>
20 {pastRecords.map((past,index)=> ( 20 {pastRecords.map((past,index)=> (
21 + pastRecords.length - 1 > index ?
21 <View key={index} style={styles.past}> 22 <View key={index} style={styles.past}>
22 - <Text style={styles.score}>{past.score}</Text> 23 + <Text style={styles.date, {fontSize:11}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
23 - <Text style={styles.date}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text> 24 + <Text style={styles.score}>{past.score}</Text>
24 </View> 25 </View>
25 - ))} 26 + :
27 + <View key={index} style={styles.past}>
28 + <Text style={styles.date, {fontSize:15}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
29 + <Text style={styles.score, {fontFamily:"ExtraBold", fontSize:25, color: "#4ea1d3"}}>{past.score}</Text>
26 </View> 30 </View>
27 - <Text style={styles.message}>당신의 점수 변화를 확인하세요!</Text> 31 + ))}
32 +
33 + </View>
28 </> 34 </>
29 : <PromptSearchRate /> 35 : <PromptSearchRate />
30 } 36 }
...@@ -32,10 +38,11 @@ const RateLine = ({load,pastRecords }) => { ...@@ -32,10 +38,11 @@ const RateLine = ({load,pastRecords }) => {
32 ); 38 );
33 } 39 }
34 const styles = StyleSheet.create({ 40 const styles = StyleSheet.create({
35 - surface: { 41 + surface: {
36 - padding: 8, 42 + padding :5,
37 flex: 0.3, 43 flex: 0.3,
38 width: '95%', 44 width: '95%',
45 + flexDirection:'column',
39 alignItems: 'center', 46 alignItems: 'center',
40 justifyContent: 'center', 47 justifyContent: 'center',
41 elevation: 2, 48 elevation: 2,
...@@ -44,23 +51,29 @@ const styles = StyleSheet.create({ ...@@ -44,23 +51,29 @@ const styles = StyleSheet.create({
44 borderRadius: 5, 51 borderRadius: 5,
45 }, 52 },
46 info:{ 53 info:{
47 - fontSize:22, 54 + fontSize:21,
48 - marginBottom: 5, 55 + marginBottom: 10,
49 - fontFamily:"Bold",
50 - },
51 - score:{
52 - fontSize:20,
53 fontFamily:"Bold", 56 fontFamily:"Bold",
54 }, 57 },
55 scoreContainer:{ 58 scoreContainer:{
56 flexDirection:'row', 59 flexDirection:'row',
60 + alignItems : 'center',
57 justifyContent: 'space-around', 61 justifyContent: 'space-around',
58 - width:'100%' 62 + width:'100%',
63 + backgroundColor :'#ececf8',
64 + padding : 5,
65 + marginTop : 10,
66 + marginBottom : 10,
67 + borderRadius:5,
59 }, 68 },
60 data:{ 69 data:{
61 - fontSize:10, 70 + fontFamily:"Son",
62 - textAlign:'center', 71 + textAlign:'center',
63 - fontFamily:"Regular", 72 + marginBottom:10,
73 + },
74 + score:{
75 + fontSize:20,
76 + fontFamily:"Bold"
64 }, 77 },
65 past:{ 78 past:{
66 alignItems:'center', 79 alignItems:'center',
...@@ -68,8 +81,9 @@ const styles = StyleSheet.create({ ...@@ -68,8 +81,9 @@ const styles = StyleSheet.create({
68 }, 81 },
69 message:{ 82 message:{
70 fontFamily:"Son", 83 fontFamily:"Son",
71 - marginTop : 10, 84 + margin : 5,
72 - fontSize: 20, 85 + fontSize: 25,
86 + justifyContent: 'flex-start',
73 } 87 }
74 }); 88 });
75 const RateLineContainer = ( {load,pastRecords } ) => ( 89 const RateLineContainer = ( {load,pastRecords } ) => (
......
...@@ -35,7 +35,7 @@ const RateMessage = ({keywordText, score }) => { ...@@ -35,7 +35,7 @@ const RateMessage = ({keywordText, score }) => {
35 const styles = StyleSheet.create({ 35 const styles = StyleSheet.create({
36 surface: { 36 surface: {
37 padding: 8, 37 padding: 8,
38 - flex: 0.2, 38 + flex: 0.225,
39 width: '95%', 39 width: '95%',
40 alignItems: 'center', 40 alignItems: 'center',
41 justifyContent: 'center', 41 justifyContent: 'center',
......
...@@ -43,7 +43,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => { ...@@ -43,7 +43,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
43 const styles = StyleSheet.create({ 43 const styles = StyleSheet.create({
44 surface: { 44 surface: {
45 padding: 8, 45 padding: 8,
46 - flex: 0.2, 46 + flex: 0.225,
47 width: '95%', 47 width: '95%',
48 alignItems: 'center', 48 alignItems: 'center',
49 justifyContent: 'center', 49 justifyContent: 'center',
......