약관 / 약관팝업 / 가이드 두장

App.js

@@ -13,8 +13,14 @@ import KeepAwake from 'react-native-keep-awake';
 //페이지 import 
 import LoginPage from './Src/Pages/_1_Login';
 import AcceptTerms from './Src/Pages/_2_AcceptTerms';
+import Guide1 from './Src/Pages/_3_Guide1';
+import Guide2 from './Src/Pages/_4_Guide2';
+
+
+
 
 //팝업 임포트 
+import TermsPopup from './Src/Popup/_1_TermsPopup';
 
 //다국어 
 import i18n from  "i18n-js";
@@ -24,12 +30,14 @@ i18n.locale = "ko";
 
 //모듈 임포트
 import * as RN from 'react-native'
-import * as EL from 'react-native-elements'
+import * as EL from 'react-native-elements' 
+import H from './Src/Component/Header' 
 
 import C from 'rn-class'
 
 C.addComp(RN);
 C.addComp(EL, "EL");
+C.addComp({Header : H}, "Comp" );
 
 const App = () => {
  
@@ -43,7 +51,8 @@ const App = () => {
   return (
     <Fragment>
       <C.SafeAreaView  cls="flx1">
-        <AcceptTerms/>
+        {/* <AcceptTerms/> */} 
+        <Guide2/> 
       </C.SafeAreaView>
     </Fragment>
   );

Src/Component/Header.js

@@ -0,0 +1,22 @@
+import React from 'react';
+ 
+import i18n from  "i18n-js";
+
+import C from 'rn-class'
+
+export default (props) => {
+    return (
+        <C.EL.Header 
+            ccls="bgc-color-transparent"
+            leftComponent={<C.Image source={require("../Res/header_bubble.png")}  cls="ml2 w10 h10"  resizeMode="contain" />}  
+            centerComponent={<C.Text cls="f3 fw-b ">EMPTY</C.Text>}
+            rightComponent={
+                <C.View cls="flx-row jc-sa w25 ">
+                    <C.EL.Button title="P" ccls="w10" btncls="br19.9"/>
+                    <C.EL.Button title="E" ccls="w10" btncls="br19.9"/>  
+                 </C.View>
+            }
+        >
+        </C.EL.Header>
+    )
+}

Src/I18n/ko.js

@@ -8,7 +8,13 @@ export default {
             "당사는 A 라 하며 .....",
             "개인정보는 ......",
             "수집한 정보는 ........."
-            ]
+            ],
+            agree : "전체 동의",
+            not_agree : "동의 안함",
+
+    },
+    TermsPopup : {
+        close : "닫기",
     }
 
 }

Src/Pages/_2_AcceptTerms.js

@@ -3,36 +3,55 @@ import React from 'react';
 import i18n from  "i18n-js";
 
 import C from 'rn-class'
+
 C.addColor("#03cf5d", "color-naver");
+C.addColor("#6280ba", "color-agreeBtn");
+C.addColor("#c87320" , "color-not_agreeBtn");
+
 
 
 export default (props)=>{
     // 다국어 처리 영역 
-    let {termsTitle}  = i18n.t("AcceptTerms");
+    let {termsTitle, agree , not_agree}  = i18n.t("AcceptTerms");
 
-    console.log(termsTitle);
     return (
         <C.View cls="flx1 bgc-color-white"> 
-            <C.EL.Header
-                
-            />
+            <C.Comp.Header />
             {/* body */}
 
-            <C.View cls="w100% ai-c"> 
-
+            <C.View cls="w100% ai-c flx1"> 
+                <C.View cls="flx0.8 ai-c w100% jc-sa">
                 {
                     termsTitle.map((title , idx)=>{
 
                         return (
-                            <C.View key={`terms_${idx}`} cls="w80% pt5"> 
-                                <C.Text cls="f2" >{title}</C.Text>  
-                                <C.EL.Button title={title} ccls="w100% "/>
-                                <C.EL.CheckBox title='동의합니다'/>
+                            <C.View key={`terms_${idx}`} cls="w80% bw0.2 jc-sa br5 pa2 sdof_0_5 sdo2 bc-color-gray-light-v3 el2"> 
+
+                                <C.Text cls="f2 fw-b" >{title}</C.Text>  
+                                
+                                <C.EL.Divider cls="ma1"/> 
+
+                                <C.EL.Button  title={title} ccls="w100%"
+                                    tcls="flx0.9"
+                                    iconRight icon={
+                                        <C.EL.Icon
+                                        ccls="ml3"
+                                        name="popup"
+                                        type="entypo"
+                                        color="white"
+                                        />
+                                    }/>
+                                <C.EL.CheckBox title='동의합니다' ccls="bgc-color-transparent bw0"/>
                             </C.View> 
 
                         )
                     })
                 }
+                </C.View>
+                <C.View cls="flx0.2 ai-c w100% flx-row jc-c"> 
+                    <C.EL.Button title={agree} ccls="w40% mr3" btncls="bgc-color-agreeBtn"/>
+                    <C.EL.Button title={not_agree} ccls="w40%" btncls="bgc-color-not_agreeBtn"/> 
+                </C.View>
 
             </C.View>
         </C.View>

Src/Pages/_3_Guide1.js

@@ -0,0 +1,57 @@
+import React from 'react';
+ 
+import C from 'rn-class'
+C.addColor("#d7d7d7", "color-listbg");
+
+
+export default (props)=>{
+    let datas = [
+        {title:"행선", sub:"Working\nmeditation", contens:"하루 20분 정도 걸으면서 하는 행선은 좌선 1시간 이상의 효과를 가져옵니다.", img : require("../Res/Working_meditation.png")},
+        {title:"주선", sub:"Standing\nmeditation", contens:"일상생활 속에 잠시 머무름은 인생에서 쉬어가는 의미를 가집니다. 바쁜 일상 속에서 잠시 머무름을 가지고 짧게 마음의 고요함을 찾으시길 바랍니다.", img : require("../Res/Standing_meditation.png")},
+        {title:"좌선", sub:"Seat and\nmeditation", contens:"가부좌가 아니더라도 일상생활 속에서 편한 자세로 앉아서 정신을 집중하여 무념무상의 상태로 들어가는 선수행을 말합니다.", img : require("../Res/Seatand_meditation.png")},
+        {title:"와선", sub:"Lying\nmeditation", contens:"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO", img : require("../Res/Lying_meditation.png")},
+    ]
+
+    return (
+        <C.View cls="flx1 bgc-color-white"> 
+            <C.Comp.Header />
+            <C.View cls="w100% ai-c flx1 jc-sa"> 
+                <C.Text cls="f9 fw-b">BODY(身)</C.Text>
+
+                {
+                    datas.map((data, idx)=>{
+
+                        return (
+                                <C.View key={`list${idx}`} cls="w95% flx0.2 br50 bgc-color-gray-light-v3 jc-sa flx-row ai-c ph3"> 
+                                    <C.View cls="flx0.3 ai-c"> 
+                                        <C.Text cls="f3.2">{data.title}</C.Text>
+                                        <C.Text cls="f1.7 ta-c">{data.sub}</C.Text>
+                                    </C.View>
+
+                                    <C.View cls="flx0.7">
+                                        <C.Text cls="flx-w f1.9">
+                                        {data.contens}
+                                        </C.Text>
+                                    </C.View>
+
+                                    <C.View cls="flx0.2"> 
+                                        <C.Image source={data.img} resizeMode="contain" 
+                                        cls="w14" />
+                                        {/* Working_meditation.png */}
+                                    </C.View>
+
+                                </C.View>
+                            )
+                    })
+                }
+
+                <C.Button title="계속"/> 
+            </C.View>  
+
+        </C.View>
+    )
+
+
+}
+
+

Src/Pages/_4_Guide2.js

@@ -0,0 +1,57 @@
+import React from 'react';
+ 
+import C from 'rn-class'
+C.addColor("#d7d7d7", "color-listbg");
+
+
+export default (props)=>{
+    let datas = [
+        {title:"사랑", sub:"Working\nmeditation", contens:"우리는 우리와 가까운, 우리가 원하는, 우리가 좋아하는, 우리를 편리하게 해 주고 행복하게 해 주던 많은 것들과 이별을 해야 하는 괴로움을 버려야 합니다.", img : require("../Res/Working_meditation.png")},
+        {title:"미움", sub:"Standing\nmeditation", contens:"싫어하는 것을 해야 하는 것, 싫어하는 사람과 함께 있는 것이란 얼마나 큰 괴로움인가. 이는 가장 큰 괴로움이며 여기서 벗어나야 합니다.", img : require("../Res/Standing_meditation.png")},
+        {title:"탐욕", sub:"Seat and\nmeditation", contens:"좋아하는 사람, 물건, 재산, 명예, 권력, 지위, 출세, 행복, 건강 등 얻고자 하고 바라지만 마음대로 구할 수 없는데서 괴로움은 시작된다.", img : require("../Res/Seatand_meditation.png")},
+        {title:"탐식", sub:"Lying\nmeditation", contens:"현대사회에서 물질적 풍요와 상반되게 정신적 빈곤으로 인한 강박장애, 불안장애 같은 정신적 증상은 얻고자 하는 욕심으로 인하여 나타나는 화병의 일환", img : require("../Res/Lying_meditation.png")},
+    ]
+ 
+    return (
+        <C.View cls="flx1 bgc-color-white"> 
+            <C.Comp.Header />
+            <C.View cls="w100% ai-c flx1 jc-sa"> 
+                <C.Text cls="f9 fw-b">MIND(心)</C.Text>
+
+                {
+                    datas.map((data, idx)=>{
+
+                        return (
+                                <C.View key={`list${idx}`} cls="w95% flx0.2 br50 bgc-color-gray-light-v3 jc-sa flx-row ai-c ph3"> 
+                                    <C.View cls="flx0.3 ai-c"> 
+                                        <C.Text cls="f3.2">{data.title}</C.Text>
+                                        <C.Text cls="f1.7 ta-c">{data.sub}</C.Text>
+                                    </C.View>
+
+                                    <C.View cls="flx0.7">
+                                        <C.Text cls="flx-w f1.9">
+                                        {data.contens}
+                                        </C.Text>
+                                    </C.View>
+
+                                    <C.View cls="flx0.2"> 
+                                        <C.Image source={data.img} resizeMode="contain" 
+                                        cls="w14" />
+                                        {/* Working_meditation.png */}
+                                    </C.View>
+
+                                </C.View>
+                            )
+                    })
+                }
+
+                <C.Button title="확인"/>  
+            </C.View>  
+
+        </C.View>
+    )
+
+
+}
+
+

Src/Popup/_1_TermsPopup.js

@@ -0,0 +1,73 @@
+import React from 'react';
+ 
+import i18n from  "i18n-js";
+
+import C from 'rn-class'
+
+C.addColor("#03cf5d", "color-naver");
+C.addColor("#6280ba", "color-agreeBtn");
+C.addColor("#c87320" , "color-not_agreeBtn");
+
+ 
+
+export default (props)=>{
+    // 다국어 처리 영역 
+    let {termsTitle, termsContents, agree , not_agree}  = i18n.t("AcceptTerms");
+    let {close}  = i18n.t("TermsPopup");
+    
+
+    return (
+        <C.SafeAreaView cls="po-full jc-c ai-c"> 
+            <C.View cls="flx0.8 w80% ai-c sdof_0_5 sdo2 bc-color-gray-light-v3 el2 pa2"> 
+                <C.Text cls="f4 fw-b">{termsTitle[0]}</C.Text> 
+                <C.EL.Divider cls="ma1 w100%"/> 
+                <C.View cls="flx1 jc-sa">
+                    <C.ScrollView>
+                        <C.Text>
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}{termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}{termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        {termsContents}
+                        </C.Text>
+                    </C.ScrollView>
+
+                    <C.EL.Button ccls="mt1"  btncls="bgc-color-agreeBtn" title={close}/>
+                </C.View>
+
+            </C.View>
+        </C.SafeAreaView>
+    )
+
+
+}
+