김서영 / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
김서영
e580a251 1 parent 9e7bf1e5

rate design change

Inline Side-by-side
Showing 6 changed files with 41 additions and 46 deletions
1 -{
2 - "devToolsPort": 19002,
3 - "expoServerPort": 19000,
4 - "packagerPort": 19001,
5 - "packagerPid": 2240,
6 - "expoServerNgrokUrl": "https://bm-jd7.anonymous.searchguide.exp.direct",
7 - "packagerNgrokUrl": "https://packager.bm-jd7.anonymous.searchguide.exp.direct",
8 - "ngrokPid": 21352
9 -}
1 -{
2 - "hostType": "lan",
3 - "lanType": "ip",
4 - "dev": true,
5 - "minify": false,
6 - "urlRandomness": "bm-jd7",
7 - "https": false
8 -}
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, PieChart } 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) => {
...@@ -50,7 +50,7 @@ export default RateBar = (props) => { ...@@ -50,7 +50,7 @@ export default RateBar = (props) => {
50 key : "" 50 key : ""
51 } 51 }
52 ]} 52 ]}
53 - innerRadius={"60%"} 53 + innerRadius={"50%"}
54 /> 54 />
55 </View> 55 </View>
56 <View style={styles.colorContainer}> 56 <View style={styles.colorContainer}>
...@@ -76,10 +76,11 @@ const styles = StyleSheet.create({ ...@@ -76,10 +76,11 @@ const styles = StyleSheet.create({
76 width: '100%', 76 width: '100%',
77 flexDirection:'row', 77 flexDirection:'row',
78 justifyContent:'center', 78 justifyContent:'center',
79 + marginTop : 8,
79 }, 80 },
80 colorContainer:{ 81 colorContainer:{
81 position:"absolute", 82 position:"absolute",
82 - right:10, 83 + right:20,
83 }, 84 },
84 colorA:{ 85 colorA:{
85 backgroundColor:'#e85a71', 86 backgroundColor:'#e85a71',
...@@ -103,8 +104,8 @@ const styles = StyleSheet.create({ ...@@ -103,8 +104,8 @@ const styles = StyleSheet.create({
103 alignItems:'flex-start', 104 alignItems:'flex-start',
104 }, 105 },
105 chart:{ 106 chart:{
106 - height: 120, 107 + height: 125,
107 - width:"90%", 108 + width:"100%",
108 position:"absolute", 109 position:"absolute",
109 }, 110 },
110 textContainer:{ 111 textContainer:{
...@@ -120,9 +121,9 @@ const styles = StyleSheet.create({ ...@@ -120,9 +121,9 @@ const styles = StyleSheet.create({
120 width: '100%' 121 width: '100%'
121 }, 122 },
122 surface: { 123 surface: {
123 - paddingTop: 8, 124 + paddingTop: 10,
124 - paddingBottom:5, 125 + paddingBottom:0,
125 - flex: 0.45, 126 + flex: 0.55,
126 width: '95%', 127 width: '95%',
127 flexDirection:'column', 128 flexDirection:'column',
128 alignItems: "center", 129 alignItems: "center",
......
...@@ -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,11 +38,11 @@ const RateLine = ({load,pastRecords }) => { ...@@ -32,11 +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 - paddingTop: 5, 42 + padding :5,
37 - paddingBottom:5,
38 flex: 0.3, 43 flex: 0.3,
39 width: '95%', 44 width: '95%',
45 + flexDirection:'column',
40 alignItems: 'center', 46 alignItems: 'center',
41 justifyContent: 'center', 47 justifyContent: 'center',
42 elevation: 2, 48 elevation: 2,
...@@ -45,34 +51,39 @@ const styles = StyleSheet.create({ ...@@ -45,34 +51,39 @@ const styles = StyleSheet.create({
45 borderRadius: 5, 51 borderRadius: 5,
46 }, 52 },
47 info:{ 53 info:{
48 - fontSize:22, 54 + fontSize:21,
49 marginBottom: 10, 55 marginBottom: 10,
50 fontFamily:"Bold", 56 fontFamily:"Bold",
51 }, 57 },
52 - score:{
53 - fontSize:20,
54 - fontFamily:"Bold",
55 - },
56 scoreContainer:{ 58 scoreContainer:{
57 flexDirection:'row', 59 flexDirection:'row',
60 + alignItems : 'center',
58 justifyContent: 'space-around', 61 justifyContent: 'space-around',
59 width:'100%', 62 width:'100%',
60 backgroundColor :'#ececf8', 63 backgroundColor :'#ececf8',
64 + padding : 5,
65 + marginTop : 10,
66 + marginBottom : 10,
67 + borderRadius:5,
61 }, 68 },
62 data:{ 69 data:{
63 - fontSize:10, 70 + fontFamily:"Son",
64 - textAlign:'center', 71 + textAlign:'center',
65 - fontFamily:"Regular", 72 + marginBottom:10,
73 + },
74 + score:{
75 + fontSize:20,
76 + fontFamily:"Bold"
66 }, 77 },
67 past:{ 78 past:{
68 - backgroundColor :'#ececf8',
69 alignItems:'center', 79 alignItems:'center',
70 marginBottom:5 80 marginBottom:5
71 }, 81 },
72 message:{ 82 message:{
73 fontFamily:"Son", 83 fontFamily:"Son",
74 - marginTop : 10, 84 + margin : 5,
75 - fontSize: 20, 85 + fontSize: 25,
86 + justifyContent: 'flex-start',
76 } 87 }
77 }); 88 });
78 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',
......