Toggle navigation
Toggle navigation
This project
Loading...
Sign in
김서영
/
searchGuide
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
bluejoyq
2019-12-10 02:48:59 +0900
Browse Files
Options
Browse Files
Download
Plain Diff
Commit
81763fb65ea8e9bc758032dd3e9b979883e795e6
81763fb6
2 parents
32f2a1ca
e580a251
Merge branch 'design3' into 'master'
Design3 rate 디자인 거의 완성!! See merge request !12
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
85 additions
and
51 deletions
searchGuide/components/PromptSearch/PromptSearchRate.js
searchGuide/components/RateBar/RateBar.js
searchGuide/components/RateLine/RateLine.js
searchGuide/components/RateMessage/RateMessage.js
searchGuide/components/RateSentence/RateSentence.js
searchGuide/components/PromptSearch/PromptSearchRate.js
View file @
81763fb
...
...
@@ -3,7 +3,7 @@ import { Text } from 'react-native-paper';
import
{
StyleSheet
,
View
}
from
'react-native'
;
export
default
PromptSearchRate
=
()
=>
(
<
View
style
=
{{
alignItems
:
'center'
}}
>
<
View
style
=
{{
alignItems
:
'center'
,
justifyContent
:
'center'
}}
>
<
Text
style
=
{
styles
.
Text
}
>
아직까지
검색
<
/Text
>
<
Text
style
=
{
styles
.
Text
}
>
결과가
없습니다
!<
/Text
>
<
/View
>
...
...
searchGuide/components/RateBar/RateBar.js
View file @
81763fb
import
React
,{
useState
}
from
'react'
;
import
{
Surface
,
Text
,
HelperText
}
from
'react-native-paper'
;
import
{
StyleSheet
,
View
}
from
'react-native'
;
import
{
StackedBarChart
}
from
'react-native-svg-charts'
;
import
{
PieChart
}
from
'react-native-svg-charts'
;
import
PromptSearchRate
from
'../PromptSearch/PromptSearchRate'
;
export
default
RateBar
=
(
props
)
=>
{
...
...
@@ -14,48 +14,54 @@ export default RateBar = (props) => {
<>
<
View
style
=
{
styles
.
container
}
>
<
Text
style
=
{
styles
.
Text
}
>
총
점수
:
{
props
.
score
.
full
}
점
<
/Text
>
<
View
style
=
{
styles
.
colorContainer
}
>
<
View
style
=
{
styles
.
textContainer
}
>
<
View
style
=
{
styles
.
colorA
}
><
/View><Text>키워드 점수</
Text
>
<
/View
>
<
View
style
=
{
styles
.
textContainer
}
>
<
View
style
=
{
styles
.
colorB
}
><
/View><Text>맞춤법 점수</
Text
>
<
/View
>
<
View
style
=
{
styles
.
container
}
>
<
Text
style
=
{
styles
.
message
}
>
눌러서
각각의
점수를
알아보세요
!<
/Text>
<
/View
>
<
View
style
=
{
styles
.
infoContainer
}
>
<
HelperText
type
=
{
'info'
}
visible
=
{
click
==
2
}
style
=
{
styles
.
helper
}
>
맞춤법
:
{
props
.
score
.
fix
}
<
/HelperText
>
<
HelperText
type
=
{
'info'
}
visible
=
{
click
==
1
}
style
=
{
styles
.
helper
}
>
키워드
:
{
props
.
score
.
key
}
<
/HelperText>
<
/View
>
<
StackedBarChart
data
=
{
[{
keyword
:
{
<
View
style
=
{
styles
.
chartContatiner
}
>
<
View
>
<
PieChart
style
=
{
styles
.
chart
}
data
=
{[{
value
:
props
.
score
.
key
,
svg
:
{
svg
:{
fill
:
'#e85a71'
,
onPressIn
:
()
=>
{
setClick
(
1
)},
onPressOut
:
()
=>
{
setClick
(
0
)}
},
key
:
"키워드"
},
korean
:
{
{
value
:
props
.
score
.
fix
,
svg
:
{
fill
:
'#d8e9ef'
,
onPressIn
:
()
=>
{
setClick
(
2
)},
onPressOut
:
()
=>
{
setClick
(
0
)}
},
key
:
"맞춤법"
},
rest
:
{
{
value
:
(
100
-
(
props
.
score
.
key
+
props
.
score
.
fix
)),
key
:
""
}
}]}
style
=
{{
height
:
50
,
width
:
'90%'
}}
keys
=
{[
'keyword'
,
'korean'
,
'rest'
]}
colors
=
{[
'#f98a1a'
,
'#14a986'
,
'#ffffff'
]}
showGrid
=
{
false
}
horizontal
=
{
true
}
contentInset
=
{
{
top
:
10
}
}
valueAccessor
=
{({
item
,
key
})
=>
item
[
key
].
value
}
]}
innerRadius
=
{
"50%"
}
/
>
<
View
style
=
{
styles
.
infoContainer
}
>
<
HelperText
type
=
{
'info'
}
visible
=
{
click
==
1
}
style
=
{
styles
.
helper
}
>
키워드
:
{
props
.
score
.
key
}
<
/HelperText
>
<
HelperText
type
=
{
'info'
}
visible
=
{
click
==
2
}
style
=
{
styles
.
helper
}
>
맞춤법
:
{
props
.
score
.
fix
}
<
/HelperText
>
<
/View>
<
Text
style
=
{
styles
.
message
}
>
눌러서
각각의
점수를
알아보세요
!<
/Text
>
<
View
style
=
{
styles
.
colorContainer
}
>
<
View
style
=
{
styles
.
textContainer
}
>
<
View
style
=
{
styles
.
colorA
}
><
/View><Text>키워드 점수</
Text
>
<
/View
>
<
View
style
=
{
styles
.
textContainer
}
>
<
View
style
=
{
styles
.
colorB
}
><
/View><Text>맞춤법 점수</
Text
>
<
/View>
<
/View
>
<
/View
>
<
/
>
:
<
PromptSearchRate
/>
}
<
/Surface
>
...
...
@@ -70,13 +76,14 @@ const styles = StyleSheet.create({
width
:
'100%'
,
flexDirection
:
'row'
,
justifyContent
:
'center'
,
marginTop
:
8
,
},
colorContainer
:{
position
:
"absolute"
,
right
:
0
,
right
:
2
0
,
},
colorA
:{
backgroundColor
:
'#
f98a1a
'
,
backgroundColor
:
'#
e85a71
'
,
height
:
7
,
width
:
7
,
marginRight
:
5
,
...
...
@@ -84,13 +91,23 @@ const styles = StyleSheet.create({
fontSize
:
13
,
},
colorB
:{
backgroundColor
:
'#
2cc3c2
'
,
backgroundColor
:
'#
d8e9ef
'
,
height
:
7
,
width
:
7
,
marginRight
:
5
,
fontFamily
:
"Regular"
,
fontSize
:
13
,
},
chartContatiner
:{
flexDirection
:
'row'
,
justifyContent
:
"flex-start"
,
alignItems
:
'flex-start'
,
},
chart
:{
height
:
125
,
width
:
"100%"
,
position
:
"absolute"
,
},
textContainer
:{
flexDirection
:
'row'
,
justifyContent
:
'center'
,
...
...
@@ -104,11 +121,13 @@ const styles = StyleSheet.create({
width
:
'100%'
},
surface
:
{
padding
:
8
,
flex
:
0.3
,
paddingTop
:
10
,
paddingBottom
:
0
,
flex
:
0.55
,
width
:
'95%'
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
flexDirection
:
'column'
,
alignItems
:
"center"
,
justifyContent
:
'flex-start'
,
elevation
:
2
,
marginTop
:
10
,
borderRadius
:
5
...
...
@@ -121,9 +140,10 @@ const styles = StyleSheet.create({
message
:{
fontFamily
:
"Son"
,
fontSize
:
20
,
marginBottom
:
10
,
},
helper
:{
fontFamily
:
"
Regular
"
,
fontFamily
:
"
Bold
"
,
fontSize
:
15
}
});
...
...
searchGuide/components/RateLine/RateLine.js
View file @
81763fb
...
...
@@ -15,16 +15,22 @@ const RateLine = ({load,pastRecords }) => {
<
Surface
style
=
{
styles
.
surface
}
>
{
pastRecords
.
length
?
<>
<
Text
style
=
{
styles
.
info
}
>
점수
변화
<
/Text
>
<
Text
style
=
{
styles
.
message
}
>
당신의
점수
변화를
확인하세요
!
<
/Text
>
<
View
style
=
{
styles
.
scoreContainer
}
>
{
pastRecords
.
map
((
past
,
index
)
=>
(
pastRecords
.
length
-
1
>
index
?
<
View
key
=
{
index
}
style
=
{
styles
.
past
}
>
<
Text
style
=
{
styles
.
date
,
{
fontSize
:
11
}}
>
{
past
.
date
.
substring
(
5
,
7
)
+
'/'
+
past
.
date
.
substring
(
8
,
10
)}
<
/Text
>
<
Text
style
=
{
styles
.
score
}
>
{
past
.
score
}
<
/Text>
<
Text
style
=
{
styles
.
date
}
>
{
past
.
date
.
substring
(
5
,
7
)
+
'/'
+
past
.
date
.
substring
(
8
,
10
)}
<
/Text
>
<
/View
>
:
<
View
key
=
{
index
}
style
=
{
styles
.
past
}
>
<
Text
style
=
{
styles
.
date
,
{
fontSize
:
15
}}
>
{
past
.
date
.
substring
(
5
,
7
)
+
'/'
+
past
.
date
.
substring
(
8
,
10
)}
<
/Text
>
<
Text
style
=
{
styles
.
score
,
{
fontFamily
:
"ExtraBold"
,
fontSize
:
25
,
color
:
"#4ea1d3"
}}
>
{
past
.
score
}
<
/Text>
<
/View
>
))}
<
/View>
<
Text
style
=
{
styles
.
message
}
>
당신의
점수
변화를
확인하세요
!<
/Text
>
<
/
>
:
<
PromptSearchRate
/>
}
...
...
@@ -33,9 +39,10 @@ const RateLine = ({load,pastRecords }) => {
}
const
styles
=
StyleSheet
.
create
({
surface
:
{
padding
:
8
,
padding
:
5
,
flex
:
0.3
,
width
:
'95%'
,
flexDirection
:
'column'
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
elevation
:
2
,
...
...
@@ -44,23 +51,29 @@ const styles = StyleSheet.create({
borderRadius
:
5
,
},
info
:{
fontSize
:
22
,
marginBottom
:
5
,
fontFamily
:
"Bold"
,
},
score
:{
fontSize
:
20
,
fontSize
:
21
,
marginBottom
:
10
,
fontFamily
:
"Bold"
,
},
scoreContainer
:{
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'space-around'
,
width
:
'100%'
width
:
'100%'
,
backgroundColor
:
'#ececf8'
,
padding
:
5
,
marginTop
:
10
,
marginBottom
:
10
,
borderRadius
:
5
,
},
data
:{
font
Size
:
10
,
font
Family
:
"Son"
,
textAlign
:
'center'
,
fontFamily
:
"Regular"
,
marginBottom
:
10
,
},
score
:{
fontSize
:
20
,
fontFamily
:
"Bold"
},
past
:{
alignItems
:
'center'
,
...
...
@@ -68,8 +81,9 @@ const styles = StyleSheet.create({
},
message
:{
fontFamily
:
"Son"
,
marginTop
:
10
,
fontSize
:
20
,
margin
:
5
,
fontSize
:
25
,
justifyContent
:
'flex-start'
,
}
});
const
RateLineContainer
=
(
{
load
,
pastRecords
}
)
=>
(
...
...
searchGuide/components/RateMessage/RateMessage.js
View file @
81763fb
...
...
@@ -35,7 +35,7 @@ const RateMessage = ({keywordText, score }) => {
const
styles
=
StyleSheet
.
create
({
surface
:
{
padding
:
8
,
flex
:
0.2
,
flex
:
0.2
25
,
width
:
'95%'
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
...
...
searchGuide/components/RateSentence/RateSentence.js
View file @
81763fb
...
...
@@ -43,7 +43,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
const
styles
=
StyleSheet
.
create
({
surface
:
{
padding
:
8
,
flex
:
0.2
,
flex
:
0.2
25
,
width
:
'95%'
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
...
...
Please
register
or
login
to post a comment