Merge pull request #1 from WeConnection/dev-onting

로그인 뷰 및 메인 뷰 구현

App.js

@@ -1,11 +1,67 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View, Image, TouchableHighlight } from 'react-native';
+import LoginView from './compo/loginview';
+import FeedView from './compo/feedview';
+import OrgView from './compo/orgview';
+import NoticeView from './compo/noticeview';
+import ProfileView from './compo/profileview';
+
+const MainView = () => {
+ const [state, setState] = React.useState('feed');
+ const target = {feed: <FeedView />, org: <OrgView />, notice: <NoticeView />, profile: <ProfileView />}[state];
+
+ return(
+ <View style={{
+ flex: 1,
+ flexDirection: 'column',
+ }}>
+ <View style={{
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'cornsilk',
+ }}>
+ {target}
+ </View>
+ <View style={{
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ paddingVertical: 5,
+ paddingHorizontal: 20,
+ backgroundColor: 'darkseagreen',
+ }}>
+ <TouchableHighlight onPress={() => setState('feed')}>
+ <Image source={require('./assets/article.png')} />
+ </TouchableHighlight>
+ <TouchableHighlight onPress={() => setState('org')}>
+ <Image source={require('./assets/organization.png')} />
+ </TouchableHighlight>
+ <TouchableHighlight onPress={() => setState('notice')}>
+ <Image source={require('./assets/notification.png')} />
+ </TouchableHighlight>
+ <TouchableHighlight onPress={() => setState('profile')}>
+ <Image source={require('./assets/account.png')} />
+ </TouchableHighlight>
+ </View>
+ </View>
+ );
+};
 
 export default function App() {
+ const [logined, setLogin] = React.useState(true);
+ const loginCheck = () => {
+ AsyncStorage.getItem('username')
+ .then((username) => {setLogin(Boolean(username))});
+ };
+
+ loginCheck();
+
  return (
  <View style={styles.container}>
- <Text>Open up App.js to start working on your app!ppppp</Text>
+ {logined ? <MainView /> : <LoginView onLogin={loginCheck} />}
  <StatusBar style="auto" />
  </View>
  );
@@ -15,7 +71,5 @@ const styles = StyleSheet.create({
  container: {
  flex: 1,
  backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
  },
 });

compo/feedview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import hostaddr from '../config'
+
+const FeedView = () => {
+ return (
+ <View>
+
+ </View>
+ );
+};
+
+export default FeedView;

compo/loginview.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert } from 'react-native';
+import hostaddr from '../config'
+
+export default function LoginView(props) {
+ const [username, setUsername] = React.useState('');
+ const [password, setPassword] = React.useState('');
+
+ const login = () => {
+ props.onLogin();
+ fetch(hostaddr + '/login', {
+ method: 'POST',
+ credentials: 'same-origin',
+ body: JSON.stringify({
+ username: username,
+ password: password
+ }),
+ }).then(res => {
+ if(!res.ok){
+ Alert.alert(
+ '로그인 실패',
+ '아이디와 비밀번호를 확인해주세요',
+ [
+ {
+ text: '닫기',
+ style: 'cancle',
+ },
+ ],
+ {cancelable: false},
+ );
+ }
+ return res.text();
+ }).then(text => console.log(text))
+ .catch((err) => {
+ Alert.alert(
+ '로그인 실패',
+ String(err),
+ [
+ {
+ text: '닫기',
+ style: 'cancle',
+ },
+ ],
+ {cancelable: false},
+ );
+ console.log(err);
+ });
+ }
+
+ return (
+ <View style={styles.container}>
+ <View style={{
+ width: 200,
+ marginVertical: 100,
+ }}>
+ <Text style={{
+ textAlign: 'center',
+ fontSize: 60,
+ marginVertical: 40,
+ }}>
+ Login
+ </Text>
+ <TextInput 
+ style={{height: 40, borderColor: 'gray', borderWidth: 1}}
+ placeholder='아이디'
+ onChangeText={text => setUsername(text)}
+ value={username}
+ />
+ <TextInput 
+ style={{height: 40, borderColor: 'gray', borderWidth: 1}}
+ placeholder='비밀번호'
+ onChangeText={text => setPassword(text)}
+ value={password}
+ secureTextEntry={true}
+ />
+ <Button
+ title='로그인'
+ onPress={login}
+ />
+ </View>
+ <View style={{
+ marginVertical: 100,
+ }}>
+ <TouchableHighlight>
+ <Text style={{
+ marginVertical: 10,
+ color: 'darkorange',
+ }}>
+ 계정을 아직 만들지 않으셨나요?
+ </Text>
+ </TouchableHighlight>
+ <TouchableHighlight>
+ <Text style={{
+ marginVertical: 10,
+ color: 'darkorange',
+ }}>
+ 계정을 잃어버렸습니까?
+ </Text>
+ </TouchableHighlight>
+ </View>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignSelf: 'center',
+ flexDirection: 'column',
+ width: 200,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+});

compo/noticeview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import hostaddr from '../config'
+
+const NoticeView = () => {
+ return (
+ <View>
+
+ </View>
+ );
+};
+
+export default NoticeView;

compo/orgview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import hostaddr from '../config'
+
+const OrgView = () => {
+ return (
+ <View>
+
+ </View>
+ );
+};
+
+export default OrgView;

compo/profileview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import hostaddr from '../config'
+
+const ProfileView = () => {
+ return (
+ <View>
+
+ </View>
+ );
+};
+
+export default ProfileView;

config.js

@@ -0,0 +1,3 @@
+const hostaddr = 'http:https://127.0.0.1:5000';
+
+export {hostaddr};

package.json

@@ -8,11 +8,17 @@
  "eject": "expo eject"
  },
  "dependencies": {
+ "@react-native-community/async-storage": "^1.11.0",
+ "@react-native-community/masked-view": "0.1.10",
  "expo": "~38.0.8",
  "expo-status-bar": "^1.0.2",
  "react": "~16.11.0",
  "react-dom": "~16.11.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz",
+ "react-native-gesture-handler": "~1.6.0",
+ "react-native-reanimated": "~1.9.0",
+ "react-native-safe-area-context": "~3.0.7",
+ "react-native-screens": "~2.9.0",
  "react-native-web": "~0.11.7"
  },
  "devDependencies": {

yarn.lock

@@ -951,6 +951,13 @@
  exec-sh "^0.3.2"
  minimist "^1.2.0"
 
+"@egjs/hammerjs@^2.0.17":
+ version "2.0.17"
+ resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+ integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+ dependencies:
+ "@types/hammerjs" "^2.0.36"
+
 "@expo/configure-splash-screen@~0.1.0":
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.1.12.tgz#8d8889fc98e87cececdb48af45bc8d6447ce699d"
@@ -1072,6 +1079,13 @@
  "@types/yargs" "^15.0.0"
  chalk "^3.0.0"
 
+"@react-native-community/async-storage@^1.11.0":
+ version "1.11.0"
+ resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.11.0.tgz#bf81b8813080846f150c67f531987c429b442166"
+ integrity sha512-Pq9LlmvtCEKAGdkyrgTcRxNh2fnHFykEj2qnRYijOl1pDIl2MkD5IxaXu5eOL0wgOtAl4U//ff4z40Td6XR5rw==
+ dependencies:
+ deep-assign "^3.0.0"
+
 "@react-native-community/cli-debugger-ui@^4.9.0":
  version "4.9.0"
  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz#4177764ba69243c97aa26829d59d9501acb2bd71"
@@ -1208,11 +1222,21 @@
  sudo-prompt "^9.0.0"
  wcwidth "^1.0.1"
 
+"@react-native-community/[email protected]":
+ version "0.1.10"
+ resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
+ integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
+
 "@types/color-name@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/hammerjs@^2.0.36":
+ version "2.0.36"
+ resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
+ integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -3159,6 +3183,11 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.0.0.tgz#6a65954646b5e32c87aa998dee16152c0c904cd6"
  integrity sha512-q5DP4aUe6LnfMaLsxFP1cCY5qA0Ca5Qm2JQ/OgKi3sTfPpXth79AQ7vViXh/RRML53EpokDewMLJmI31RioBAA==
 
+hoist-non-react-statics@^2.3.1:
+ version "2.5.5"
+ resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+ integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
 http-errors@~1.7.2:
  version "1.7.3"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -4882,11 +4911,33 @@ react-native-appearance@~0.3.3:
  invariant "^2.2.4"
  use-subscription "^1.0.0"
 
+react-native-gesture-handler@~1.6.0:
+ version "1.6.1"
+ resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17"
+ integrity sha512-gQgIKhDiYf754yzhhliagLuLupvGb6ZyBdzYzr7aus3Fyi87TLOw63ers+r4kGw0h26oAWTAdHd34JnF4NeL6Q==
+ dependencies:
+ "@egjs/hammerjs" "^2.0.17"
+ hoist-non-react-statics "^2.3.1"
+ invariant "^2.2.4"
+ prop-types "^15.7.2"
+
+react-native-reanimated@~1.9.0:
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz#38676c99dd585504fdc7331efb45e5f48ec7339a"
+ integrity sha512-Aj+spgIHRiVv7ezGADxnSH1EoKrQRD2+XaSiGY0MiB/pvRNNrZPSJ+3NVpvLwWf9lZMOP7dwqqyJIzoZgBDt8w==
+ dependencies:
+ fbjs "^1.0.0"
+
 react-native-safe-area-context@~3.0.7:
  version "3.0.7"
  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz#0f53de7a30d626d82936000f3f6db374ecc4b800"
  integrity sha512-dqhRTlIFe5+P1yxitj0C9XVUxLqOmjomeqzUSSY8sNOWVjtIhEY/fl4ZKYpAVnktd8dt3zl13XmJTmRmy3d0uA==
 
+react-native-screens@~2.9.0:
+ version "2.9.0"
+ resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.9.0.tgz#ead2843107ba00fee259aa377582e457c74f1f3b"
+ integrity sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg==
+
 react-native-web@~0.11.7:
  version "0.11.7"
  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.7.tgz#d173d5a9b58db23b6d442c4bc4c81e9939adac23"