.

package-lock.json

@@ -7111,6 +7111,14 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-collapsible": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.5.1.tgz",
+      "integrity": "sha512-uQQ2s6l+7+L/pzJroisWsDsyVYVF5bQ+jGbLATNioRh/03SpEL8pcQEVKqVWswcNNR0B9GENixHaLzmuZIwpQg==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-native-elements": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-1.1.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "moment": "^2.24.0",
     "react": "16.8.6",
     "react-native": "0.60.3",
+    "react-native-collapsible": "^1.5.1",
     "react-native-elements": "^1.1.0",
     "react-native-fbsdk": "^1.0.1",
     "react-native-gesture-handler": "^1.3.0",

src/navigation/SwitchNavigator.js

@@ -55,7 +55,7 @@ const SwitchNavigator = createStackNavigator(
     
   },
   {
-    initialRouteName: "Login",  
+    initialRouteName: "Login",   
 
     mode: 'modal',
     headerMode: 'none',

src/popup/_10_1_AccountInfo.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
  
 import i18n from  "i18n-js";
 import C from 'rn-class'
@@ -7,9 +7,9 @@ import {LM} from '../provider/Auth'
 export default (props)=>{
     let {UpdateyourAccountDetails} = i18n.t("AccountInfo")
     let userInfoArr =[ 
-                                        { key : "자유해결사"  , icon : {type:"antdesign" , name:"user" }} , 
-                                        { key : "test@gmail.com" , icon : {type:"material-community" , name:"email-outline" } } ,
-                                        { key : "testtest" , icon : {type:"material-community" , name:"lock-outline" }  , input : true } 
+                                        { key : ""  , icon : {type:"antdesign" , name:"user" }} , 
+                                        { key : "" , icon : {type:"material-community" , name:"email-outline" } } ,
+                                        { key : "" , icon : {type:"material-community" , name:"lock-outline" }  , input : true } 
                                     ]
    
     let closeFunc  = ()=>{
@@ -20,6 +20,12 @@ export default (props)=>{
         props.navigation.navigate('Login');
 
     }
+    let getUserInfo = async ()=>{
+        // console.log(await ) 
+    }
+    useEffect(()=>{
+
+    }, [])
     return (
         <C.View cls="flx1 bgc-color-white ai-c jc-sa"> 
           <C.EL.Header 

src/popup/_10_2_Notice.js

@@ -1,20 +1,68 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {StyleSheet} from  'react-native'; 
  
 import C from 'rn-class'
+import Accordion from 'react-native-collapsible/Accordion';
+import moment  from 'moment';
 
 export default (props)=>{
+    let [activeSections , setActiveSections] = useState([0])
+    let arr = [ { title : "뉴욕 서비스가 3월 13일 시작됩니다. " , content : "뉴욕 서비스가 3월 13일 시작됩니다.  뉴욕 서비스가 3월 13일 시작됩니다.  "  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : " 서비스 장애데 대하여 알려드립니다.  " , content : "서울에서 가장 오래된 초등학교를 찾아 뒷문을 찾아보세요!!!\n주신 박카스의 은총이 깃들어 있답니다."  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : "asdf1" , content : "sadjsaljdkasjdklajsdkl"  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : "asdf1" , content : "sadjsaljdkasjdklajsdkl"  , createdAt : "2019-08-19T13:02:00.184Z"}
+                    ];
+
+
+
+    _renderHeader = (section, idx )=> {
+        return (
+        <C.View cls={`flx-row bgc-color-gray-light-v1 ma2 br3 pa2 ai-c ${activeSections[0] == idx ?  "mb0 br-bl0 br-br0" : ""}`}> 
+            <C.Text cls="flx0.7 f1.8">{section.title}</C.Text> 
+
+            <C.Text cls="flx0.2 f1.5 jc-c">{moment(section.createdAt).format("YYYY-MM-DD") }</C.Text>
+  
+            <C.View cls="flx0.1">
+                <C.EL.Icon name={activeSections[0] == idx ? "caretup":"caretdown"} type="antdesign" ccls="f3" />
+            </C.View>
+        </C.View>
+        );
+    };
+
+
+    _renderContent = section => {
+        return (
+        <C.View cls="bbw0.3 blw0.3 brw0.3 pv2 ph3  mh2 bc-color-gray-light-v1 br-bl3 br-br3 mt-1.5">
+            <C.Text>{section.content}</C.Text>
+        </C.View>
+        );
+    };
+
     return (
         <C.View cls="flx1 bgc-color-white"> 
-            <C.EL.Header 
+         <C.EL.Header 
                 ccls="bgc-color-transparent" 
                 leftComponent={<C.EL.Icon type="antdesign" name="close" onPress={()=>props.navigation.goBack()}/>}  
             >
             </C.EL.Header>
-            
+            <C.View cls="ai-c">
+                        <C.Text cls="f6 fw-b">Notice</C.Text> 
+            </C.View>
+            <C.View cls="flx1">
+                <Accordion  
+                      sections={arr} 
+                      underlayColor ={"#FFF"}
+                      activeSections={activeSections}
+                    //   renderSectionTitle={_renderSectionTitle}
+                      renderHeader={_renderHeader}
+                      renderContent={_renderContent}
+                      onChange={sections =>{setActiveSections(sections)}}
+                />
+                
+            </C.View>
+
         </C.View>
     )  
 
 
 }
-
-

src/popup/_10_3_FAQ.js

@@ -1,10 +1,66 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {StyleSheet} from  'react-native'; 
  
 import C from 'rn-class'
+import Accordion from 'react-native-collapsible/Accordion';
+import moment  from 'moment';
 
 export default (props)=>{
+    let [activeSections , setActiveSections] = useState([0])
+    let arr = [ { title : "뉴욕 서비스가 3월 13일 시작됩니다. " , content : "뉴욕 서비스가 3월 13일 시작됩니다.  뉴욕 서비스가 3월 13일 시작됩니다.  "  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : " 서비스 장애데 대하여 알려드립니다.  " , content : "서울에서 가장 오래된 초등학교를 찾아 뒷문을 찾아보세요!!!\n주신 박카스의 은총이 깃들어 있답니다."  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : "asdf1" , content : "sadjsaljdkasjdklajsdkl"  , createdAt : "2019-08-19T13:02:00.184Z"},
+                        { title : "asdf1" , content : "sadjsaljdkasjdklajsdkl"  , createdAt : "2019-08-19T13:02:00.184Z"}
+                    ];
+
+
+
+    _renderHeader = (section, idx )=> {
+        return (
+        <C.View cls={`flx-row bgc-color-gray-light-v1 ma2 br3 pa2 ai-c ${activeSections[0] == idx ?  "mb0 br-bl0 br-br0" : ""}`}> 
+            <C.Text cls="flx0.7 f1.8">{section.title}</C.Text> 
+
+            <C.Text cls="flx0.2 f1.5 jc-c">{moment(section.createdAt).format("YYYY-MM-DD") }</C.Text>
+  
+            <C.View cls="flx0.1">
+                <C.EL.Icon name={activeSections[0] == idx ? "caretup":"caretdown"} type="antdesign" ccls="f3" />
+            </C.View>
+        </C.View>
+        );
+    };
+
+
+    _renderContent = section => {
+        return (
+        <C.View cls="bbw0.3 blw0.3 brw0.3 pv2 ph3  mh2 bc-color-gray-light-v1 br-bl3 br-br3 mt-1.5">
+            <C.Text>{section.content}</C.Text>
+        </C.View>
+        );
+    };
+
     return (
         <C.View cls="flx1 bgc-color-white"> 
+         <C.EL.Header 
+                ccls="bgc-color-transparent" 
+                leftComponent={<C.EL.Icon type="antdesign" name="close" onPress={()=>props.navigation.goBack()}/>}  
+            >
+            </C.EL.Header>
+            <C.View cls="ai-c">
+                        <C.Text cls="f6 fw-b"> FaQ</C.Text> 
+            </C.View>
+            <C.View cls="flx1">
+                <Accordion  
+                      sections={arr} 
+                      underlayColor ={"#FFF"}
+                      activeSections={activeSections}
+                    //   renderSectionTitle={_renderSectionTitle}
+                      renderHeader={_renderHeader}
+                      renderContent={_renderContent}
+                      onChange={sections =>{setActiveSections(sections)}}
+                />
+                
+            </C.View>
+
         </C.View>
     )  
 

src/provider/Net.js

@@ -45,15 +45,13 @@ class Net {
         // console.log(" :::: " , data);       
     }
     async notice(){
-        // 아직 잘 모름 
-
+       // 공지 사항
         let {data} =    await axios.get("/bbs/notice");  
         console.log(data);
     }
 
     async faq(){
-        // 아직 잘 모름 
-
+        // FAQ 
         let {data} =    await axios.get("/bbs/faq");  
         console.log(data);
     }