change design

@@ -2,8 +2,8 @@
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "packagerPort": 19001,
-  "packagerPid": 27784,
-  "expoServerNgrokUrl": "https://ru-c66.bluejoy.searchguide.exp.direct",
-  "packagerNgrokUrl": "https://packager.ru-c66.bluejoy.searchguide.exp.direct",
-  "ngrokPid": 16708
+  "packagerPid": 28304,
+  "expoServerNgrokUrl": "https://x2-7pb.anonymous.searchguide.exp.direct",
+  "packagerNgrokUrl": "https://packager.x2-7pb.anonymous.searchguide.exp.direct",
+  "ngrokPid": 9432
 }

 {
-  "hostType": "lan",
+  "hostType": "tunnel",
   "lanType": "ip",
   "dev": true,
   "minify": false,
-  "urlRandomness": "ru-c66",
+  "urlRandomness": "x2-7pb",
   "https": false
 }

@@ -10,12 +10,19 @@ const App = () => {
     const fontLoading = async () => {
       await Font.loadAsync({
         'CustomFont': require('./assets/font/NanumBarunGothic.ttf'),
-        'CustomFontBold': require('./assets/font/NanumBarunGothicBold.ttf')
+        'CustomFontBold': require('./assets/font/NanumBarunGothicBold.ttf'),
+        'Pen' : require('./assets/font/NanumBarunPen.ttf'),
+        'Son' : require('./assets/font/NanumSon.ttf'),
+        'Bold' : require('./assets/font/NanumSquareRoundBold.ttf'),
+        'ExtraBold' : require('./assets/font/NanumSquareRoundExtraBold.ttf'),
+        'Light' : require('./assets/font/NanumSquareRoundLight.ttf'),
+        'Regular' : require('./assets/font/NanumSquareRoundRegular.ttf'),
       });
       setFontLoaded(true);
     }
     fontLoading();
   }, [] )
+
   return (
     <Provider store={Store}>
       {

@@ -5,7 +5,7 @@
     "privacy": "public",
     "sdkVersion": "35.0.0",
     "androidStatusBar": {
-      "backgroundColor": "#226557"
+      "backgroundColor": "#20272F"
     },
     "platforms": [
       "ios",

@@ -5,7 +5,7 @@ import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
 import Home from '../Home/Home';
 import Rate from '../Rate/Rate';
 
-
+ 
 const AppTabNavigator = createMaterialTopTabNavigator (
     {
         Home: Home,

@@ -38,7 +38,7 @@ const LastSlide = () => (
         <Text style={styles.subtext}>검색을 시작하세요!</Text>
     </View>
 )
-
+ 
 export default PromptSearch = () => {
     return(
         <>
@@ -46,8 +46,8 @@ export default PromptSearch = () => {
         showsButtons={true} 
         loop={false} height={400}
         activeDotColor={LIGHT_MAIN}
-        nextButton={<Text style={{color:'#3BAD87', fontSize:60}}>›</Text>}
-        prevButton={<Text style={{color:'#3BAD87', fontSize:60}}>‹</Text>}
+        nextButton={<Text style={{color:DARK_MAIN, fontSize:60}}>›</Text>}
+        prevButton={<Text style={{color:DARK_MAIN, fontSize:60}}>‹</Text>}
         >
             <FirstSlide />
             <SecondSlide />
@@ -67,18 +67,19 @@ const styles = StyleSheet.create({
     text:{
         marginBottom: 10,
         fontSize: 30,
-        fontWeight: 'bold',
         color:'#696969',
+        fontFamily:"ExtraBold"
     },
     icon: {
         marginBottom: 20,
         color: '#696969'
     },
     subtext:{
+        marginTop:10,
         marginBottom: 10,
-        fontSize: 20,
-        fontWeight: 'bold',
+        fontSize: 30,
         color:'#999999',
+        fontFamily: "Son"
     },
     wrapper: {
         flex:1,

@@ -13,7 +13,7 @@ export default RateBar = (props) => {
             {props.score.msg ?
             <>
             <View style={styles.container}>
-                <Text style={styles.Text}>총 점수 : {props.score.full}</Text>
+                <Text style={styles.Text}>총 점수 : {props.score.full}점</Text>
                 <View style={styles.colorContainer}>
                     <View style={styles.textContainer}>
                         <View style={styles.colorA}></View><Text>키워드 점수</Text>
@@ -52,10 +52,10 @@ export default RateBar = (props) => {
             valueAccessor={({ item, key }) => item[key].value}
             /> 
             <View style={styles.infoContainer}>
-                <HelperText type={'info'} visible={click==1} style={{fontSize:20}}>키워드 : {props.score.key}</HelperText>
-                <HelperText type={'info'} visible={click==2} style={{fontSize:20}}>맞춤법 : {props.score.fix}</HelperText>
+                <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>눌러서 각각의 점수를 알아보세요!</Text>
+            <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
             </>
             : <PromptSearchRate />}
         </Surface>
@@ -80,17 +80,22 @@ const styles = StyleSheet.create({
         height: 7,
         width: 7,
         marginRight: 5,
+        fontFamily:"Regular",
+        fontSize: 13,
     },
     colorB:{
-        backgroundColor:'#2cc3c2',
+        backgroundColor:'#2cc3c2', 
         height: 7,
         width: 7,
         marginRight: 5,
+        fontFamily:"Regular",
+        fontSize: 13,
     },
     textContainer:{
         flexDirection:'row',
         justifyContent:'center',
-        alignItems:'center'
+        alignItems:'center',
+        fontFamily:"Bold",
     },
     infoContainer:{
         flexDirection:'row',
@@ -105,9 +110,20 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         elevation: 2,
-        marginTop: 10
+        marginTop: 10,
+        borderRadius: 5,
     },
     Text:{
-        fontSize: 25,
+        fontSize: 22,
+        marginBottom:5,
+        fontFamily:"Bold",
+    },
+    message:{
+        fontFamily:"Son",
+        fontSize: 20,
     },
+    helper:{
+        fontFamily:"Regular",
+        fontSize:15
+    }
 });

@@ -23,11 +23,11 @@ const RateLine = ({load,pastRecords }) => {
                 {pastRecords.map((past,index)=> (
                     <View  key={index} style={styles.past}>
                         <Text style={styles.score}>{past.score}</Text>
-                        <Text style={styles.date}>{past.date.substring(5,7)+'월 '+past.date.substring(8,10)+'일'}</Text>
+                        <Text style={styles.date}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
                     </View>
                 ))} 
                 </View>
-                <Text>최근 점수 추세</Text>
+                <Text style={styles.message}>당신의 점수 변화를 확인하세요!</Text>
             </>
              : <PromptSearchRate />
             }
@@ -47,14 +47,16 @@ const styles = StyleSheet.create({
         elevation: 2,
         marginTop: 10,
         marginBottom: 10,
+        borderRadius: 5,
     },
     info:{
-        fontSize:25,
-        fontWeight:'bold',
-        marginBottom: 5
+        fontSize:22,
+        marginBottom: 5,
+        fontFamily:"Bold",
     },
     score:{
-        fontSize:20
+        fontSize:20,
+        fontFamily:"Bold",
     },
     scoreContainer:{
         flexDirection:'row',
@@ -62,12 +64,18 @@ const styles = StyleSheet.create({
         width:'100%'
     },
     data:{
-        fontSize:13,
+        fontSize:10,
         textAlign:'center',
+        fontFamily:"Regular",
     },
     past:{
         alignItems:'center',
         marginBottom:5
+    },
+    message:{
+        fontFamily:"Son",
+        marginTop : 10,
+        fontSize: 20,
     }
 });
 

@@ -17,7 +17,7 @@ const RateMessage = ({keywordText, score }) => {
             { keywordText ?
                 <>
                 <View style={{textAlign:"center", height:35}}>
-                <Text >길잡이가 교정해준 문장을 확인하세요!</Text>
+                <Text style={styles.message}>길잡이가 교정해준 문장을 확인하세요!</Text>
                 </View>
                 <View>
                 <Text style={styles.msg} >{score.msg}</Text>
@@ -40,7 +40,8 @@ const RateMessage = ({keywordText, score }) => {
         alignItems: 'center',
         justifyContent: 'center',
         elevation: 2,
-        marginTop: 10
+        marginTop: 10,
+        borderRadius: 5,
     },
     Text:{
         fontSize: 25,
@@ -53,7 +54,12 @@ const RateMessage = ({keywordText, score }) => {
     msg:{
         fontSize: 20,
         textAlign:'center',
+        fontFamily:"Bold",
     },
+    message:{
+        fontFamily:"Son",
+        fontSize: 20,
+    }
 });
 
 

@@ -29,7 +29,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
                     {count == 2 && ( <SentenceInfo Text={keywordText} info={'키워드 교정 문장'} color={'#00a676'} />) }
                 </View> 
                 <View style={{flexDirection:'column-reverse', height:50}}>
-                <Text >눌러서 변화 과정을 지켜보세요!</Text>
+                <Text style={styles.message}>눌러서 변화 과정을 지켜보세요!</Text>
                 </View>
                 
                 </>
@@ -48,7 +48,8 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
         alignItems: 'center',
         justifyContent: 'center',
         elevation: 2,
-        marginTop: 10
+        marginTop: 10,
+        borderRadius: 5,
     },
     Text:{
         fontSize: 25,
@@ -56,7 +57,12 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
     },
     infoText:{
         fontSize: 20,
-        textAlign:'center'
+        textAlign:'center',
+        fontFamily:"Bold",
+    },
+    message:{
+        fontFamily:"Son",
+        fontSize: 20,
     }
 });
 

 import React from 'react';
-import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
+import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN, BUTTON} from 'react-native-dotenv';
 import { Avatar, Button, Card, Title, Paragraph, Text } from 'react-native-paper';
 import {Linking, Image, StyleSheet } from 'react-native';
 
@@ -20,7 +20,7 @@ const SearchIcon = (props) => {
     default:
       return(<Image source={require('../../assets/img/etc-logo.png')} style={styles.image}/>)
   }
-}
+} 
   
 
 
@@ -32,8 +32,8 @@ const SearchCard = (props) => (
       <Paragraph>{props.content}</Paragraph>
     </Card.Content>
     <Card.Actions style={{flexDirection:'row', justifyContent:'space-between'}}>
-        <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)}}>
+        <Text style={{marginTop:7, marginLeft: 10,fontStyle:'italic',fontFamily:"Regular"}}>정확도 : {props.metric}%</Text>
+        <Button mode='contained' color= {BUTTON} labelStyle={{color:WHITE_MAIN,fontFamily:"Regular"}} onPress={()=>{Linking.openURL(props.url)}}>
         자세히보기
         </Button>
     </Card.Actions>