diff --git a/App.js b/App.js index 3c66de9..630ecd6 100644 --- a/App.js +++ b/App.js @@ -1,10 +1,10 @@ import React from 'react'; -import DidStackNavigator from './src/navigation/stack/DidStackNavigator'; +import MainStackNavigator from './src/navigation/stack/MainStackNavigator'; function App() { return ( <> - + ); } diff --git a/package-lock.json b/package-lock.json index 5ccaf37..91fab6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,16 +5,20 @@ "requires": true, "packages": { "": { + "name": "DuckBox", "version": "0.0.1", "dependencies": { "@react-native-masked-view/masked-view": "^0.2.6", + "@react-navigation/material-top-tabs": "^6.0.6", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "react": "17.0.2", "react-native": "0.66.4", "react-native-gesture-handler": "^2.1.0", + "react-native-pager-view": "^5.4.9", "react-native-safe-area-context": "^3.3.2", "react-native-safe-area-view": "^1.1.1", + "react-native-tab-view": "^3.1.1", "validator": "^13.7.0" }, "devDependencies": { @@ -2160,6 +2164,22 @@ "react-native-safe-area-context": ">= 3.0.0" } }, + "node_modules/@react-navigation/material-top-tabs": { + "version": "6.0.6", + "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz", + "integrity": "sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g==", + "dependencies": { + "color": "^3.1.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-pager-view": ">= 4.0.0", + "react-native-tab-view": ">= 3.0.0" + } + }, "node_modules/@react-navigation/native": { "version": "6.0.6", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.6.tgz", @@ -9406,6 +9426,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-native-pager-view": { + "version": "5.4.9", + "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz", + "integrity": "sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz", @@ -9428,6 +9457,16 @@ "react-native-safe-area-context": "*" } }, + "node_modules/react-native-tab-view": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz", + "integrity": "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==", + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-pager-view": "*" + } + }, "node_modules/react-native/node_modules/@jest/types": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", @@ -13087,6 +13126,15 @@ "integrity": "sha512-EnmAbKMsptrliRKf95rdgS6BhMjML+mIns06+G1Vdih6BrEo7/0iytThUv3WBf99AI76dyEq/cqLUwHPiFzXWg==", "requires": {} }, + "@react-navigation/material-top-tabs": { + "version": "6.0.6", + "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz", + "integrity": "sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g==", + "requires": { + "color": "^3.1.3", + "warn-once": "^0.1.0" + } + }, "@react-navigation/native": { "version": "6.0.6", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.6.tgz", @@ -18718,6 +18766,12 @@ } } }, + "react-native-pager-view": { + "version": "5.4.9", + "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz", + "integrity": "sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA==", + "requires": {} + }, "react-native-safe-area-context": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz", @@ -18732,6 +18786,12 @@ "hoist-non-react-statics": "^2.3.1" } }, + "react-native-tab-view": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz", + "integrity": "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==", + "requires": {} + }, "react-refresh": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz", diff --git a/package.json b/package.json index 7899f26..f69acc4 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,16 @@ }, "dependencies": { "@react-native-masked-view/masked-view": "^0.2.6", + "@react-navigation/material-top-tabs": "^6.0.6", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "react": "17.0.2", "react-native": "0.66.4", "react-native-gesture-handler": "^2.1.0", + "react-native-pager-view": "^5.4.9", "react-native-safe-area-context": "^3.3.2", "react-native-safe-area-view": "^1.1.1", + "react-native-tab-view": "^3.1.1", "validator": "^13.7.0" }, "devDependencies": { diff --git a/src/asset/icon/backWhite.png b/src/asset/icon/backWhite.png new file mode 100644 index 0000000..56686a4 Binary files /dev/null and b/src/asset/icon/backWhite.png differ diff --git a/src/asset/icon/bellRing.png b/src/asset/icon/bellRing.png new file mode 100644 index 0000000..9c89ba4 Binary files /dev/null and b/src/asset/icon/bellRing.png differ diff --git a/src/asset/icon/create.png b/src/asset/icon/create.png new file mode 100644 index 0000000..7d7bbb4 Binary files /dev/null and b/src/asset/icon/create.png differ diff --git a/src/asset/icon/getPicture.png b/src/asset/icon/getPicture.png new file mode 100644 index 0000000..01a32b5 Binary files /dev/null and b/src/asset/icon/getPicture.png differ diff --git a/src/asset/icon/groupOut.png b/src/asset/icon/groupOut.png new file mode 100644 index 0000000..49cf8c4 Binary files /dev/null and b/src/asset/icon/groupOut.png differ diff --git a/src/asset/icon/pencil.png b/src/asset/icon/pencil.png new file mode 100644 index 0000000..cb93d8f Binary files /dev/null and b/src/asset/icon/pencil.png differ diff --git a/src/asset/icon/setting.png b/src/asset/icon/setting.png new file mode 100644 index 0000000..250c3d6 Binary files /dev/null and b/src/asset/icon/setting.png differ diff --git a/src/asset/icon/time.png b/src/asset/icon/time.png new file mode 100644 index 0000000..dfe795d Binary files /dev/null and b/src/asset/icon/time.png differ diff --git a/src/asset/icon/trash.png b/src/asset/icon/trash.png new file mode 100644 index 0000000..5f57dfb Binary files /dev/null and b/src/asset/icon/trash.png differ diff --git a/src/asset/icon/user.png b/src/asset/icon/user.png new file mode 100644 index 0000000..a88db1a Binary files /dev/null and b/src/asset/icon/user.png differ diff --git a/src/asset/icon/userAdd.png b/src/asset/icon/userAdd.png new file mode 100644 index 0000000..3a79e80 Binary files /dev/null and b/src/asset/icon/userAdd.png differ diff --git a/src/asset/image/black50.png b/src/asset/image/black50.png new file mode 100644 index 0000000..fde1608 Binary files /dev/null and b/src/asset/image/black50.png differ diff --git a/src/asset/image/konkuk.jpg b/src/asset/image/konkuk.jpg new file mode 100644 index 0000000..9837fab Binary files /dev/null and b/src/asset/image/konkuk.jpg differ diff --git a/src/asset/image/konkukLogo.png b/src/asset/image/konkukLogo.png new file mode 100644 index 0000000..e23d38f Binary files /dev/null and b/src/asset/image/konkukLogo.png differ diff --git a/src/asset/image/konkukVote.jpg b/src/asset/image/konkukVote.jpg new file mode 100644 index 0000000..57e72b6 Binary files /dev/null and b/src/asset/image/konkukVote.jpg differ diff --git a/src/containers/common/ContentListBox.js b/src/containers/common/ContentListBox.js new file mode 100644 index 0000000..863dde8 --- /dev/null +++ b/src/containers/common/ContentListBox.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { StyleSheet, Text, View, Image, } from 'react-native'; +import Colors from '../../theme/Colors'; +import { type } from '../../theme/Fonts'; + +const ContentListBox = ({ type, data, isOpen }) => { + return ( + + + + {data.title} + + + {data.group} + + + + + {isOpen? {data.date} 남음 : 종료되었습니다} + + + + {type ? + 투표 + : 설문 + } + + 참여율 + {data.ratio}% + ({data.numOfPeople}명) + + + + + ); +}; +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + paddingHorizontal: 15, + paddingVertical: 22, + borderColor: Colors.gray2, + borderBottomWidth: 1, + }, + closedContainer: { + flexDirection: 'row', + paddingHorizontal: 15, + paddingVertical: 22, + borderColor: Colors.gray2, + borderBottomWidth: 1, + backgroundColor: Colors.gray, + }, + textContainer: { + paddingLeft: 10, + flex: 1 + }, + imageTextContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + tagTextContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'baseline', + }, + image: { + resizeMode: 'cover', + width: 100, + height: 100, + borderRadius: 10, + }, + font1: { + color: Colors.black, + fontFamily: type.Roboto_Regular, + fontSize: 16, + }, + font2: { + color: Colors.black, + fontFamily: type.Roboto_Regular, + fontSize: 14, + }, + font3: { + color: Colors.darkGray, + fontFamily: type.Roboto_Regular, + fontSize: 14, + }, + font4: { + color: Colors.main, + fontFamily: type.Roboto_Regular, + fontSize: 14, + }, + icon: { + resizeMode: 'contain', + width: 14, + height: 14, + marginRight: 4, + }, + voteBox: { + backgroundColor: Colors.sub4, + paddingHorizontal: 6, + paddingVertical: 4, + fontFamily: type.Roboto_Bold, + borderRadius: 4, + fontSize: 12, + }, + surveyBox: { + backgroundColor: Colors.sub2, + paddingHorizontal: 6, + paddingVertical: 4, + fontFamily: type.Roboto_Bold, + borderRadius: 4, + fontSize: 12, + }, +}); + +export default ContentListBox; diff --git a/src/containers/common/Radius10Button.js b/src/containers/common/Radius10Button.js new file mode 100644 index 0000000..a96650c --- /dev/null +++ b/src/containers/common/Radius10Button.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; + +import colors from '../../theme/Colors'; +import { type } from '../../theme/Fonts'; + +function Radius10Button({ text, moveTo }) { + const navigateTo = useNavigation(); + + return ( + { navigateTo.navigate(moveTo); }}> + {text} + + ); +} + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.main, + borderRadius: 10, + paddingVertical: 8, + paddingHorizontal: 16, + }, + font1: { + fontSize: 16, + color: colors.white, + fontFamily: type.Roboto_Medium, + }, +}); + +export default Radius10Button; diff --git a/src/containers/group/detail/DetailGroupScreen.js b/src/containers/group/detail/DetailGroupScreen.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/containers/group/detail/GroupDetailResultScreen.js b/src/containers/group/detail/GroupDetailResultScreen.js new file mode 100644 index 0000000..88995e6 --- /dev/null +++ b/src/containers/group/detail/GroupDetailResultScreen.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { ScrollView } from 'react-native-gesture-handler'; +import colors from '../../../theme/Colors'; +import ContentListBox from '../../common/ContentListBox'; + +const GroupDetailResultScreen = () => { + const resultList = [ + { + type: false, // true:vote, false:servey + data: { + title: "2022 중간고사 간식어택", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: true + }, + { + type: false, // true:vote, false:servey + data: { + title: "2022 기말고사 간식어택 사전조사", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: false + }, + ]; + + return ( + + {resultList.map((item, index) => ())} + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + }, +}); + +export default GroupDetailResultScreen; diff --git a/src/containers/group/detail/GroupDetailScreen.js b/src/containers/group/detail/GroupDetailScreen.js new file mode 100644 index 0000000..a779f65 --- /dev/null +++ b/src/containers/group/detail/GroupDetailScreen.js @@ -0,0 +1,120 @@ +import React, { useState } from 'react'; +import { StyleSheet, Text, ImageBackground, View, Image, TouchableOpacity } from 'react-native'; +import colors from '../../../theme/Colors'; +import { type } from '../../../theme/Fonts'; +import { useNavigation } from '@react-navigation/native'; + +import Radius10Button from '../../common/Radius10Button'; +import GroupDetailTabNavigator from '../../../navigation/tab/GroupDetailTabNavigator'; + +const GroupDetailScreen = () => { + const navigateTo = useNavigation(); + const [isMember, setIsMember] = useState(true); + + const groupData = { + name: "KU 총학생회", + introduction: "2022 건국대학교 총학생회입니다.", + numOfMember: 2752 + } + + return ( + <> + + + + { navigateTo.goBack() }} source={require('../../../asset/icon/backWhite.png')} /> + + {isMember ? : null} + { navigateTo.navigate("GroupInfoScreen"); }} style={styles.icon} source={require('../../../asset/icon/setting.png')} /> + + + + {groupData.name} + {groupData.introduction} + 그룹원 {groupData.numOfMember} + {isMember ? null : + + + + } + + + + + {isMember ? + + + + : null + } + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + paddingHorizontal: 30, + }, + topContainer: { + justifyContent: 'space-between', + flexDirection: 'row', + padding: 20, + alignItems: 'center', + }, + textContainer: { + padding: 25, + }, + buttonContainer: { + alignItems: 'flex-end', + }, + createContainer: { + position: 'absolute', + right: 20, + bottom: 30, + }, + image: { + resizeMode: 'cover', + }, + icon: { + resizeMode: 'contain', + width: 22, + height: 22, + marginLeft: 16, + }, + font1: { + fontFamily: type.Roboto_Bold, + fontSize: 26, + color: colors.white, + }, + font2: { + fontFamily: type.Roboto_Medium, + fontSize: 18, + color: colors.white, + }, + font3: { + fontFamily: type.Roboto_Medium, + fontSize: 16, + color: colors.white, + marginTop: 24, + }, + createButton: { + resizeMode: 'contain', + width: 70, + height: 70, + }, + backBtn:{ + padding: 4, + } +}); + +export default GroupDetailScreen; diff --git a/src/containers/group/detail/GroupDetailSurveyScreen.js b/src/containers/group/detail/GroupDetailSurveyScreen.js new file mode 100644 index 0000000..beab593 --- /dev/null +++ b/src/containers/group/detail/GroupDetailSurveyScreen.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { StyleSheet, ScrollView } from 'react-native'; +import colors from '../../../theme/Colors'; +import ContentListBox from '../../common/ContentListBox'; + +const GroupDetailSurveyScreen = () => { + const surveyList = [ + { + type: false, // true:vote, false:servey + data: { + title: "2022 중간고사 간식어택", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: true + }, + { + type: false, // true:vote, false:servey + data: { + title: "2022 기말고사 간식어택 사전조사", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: true + }, + ]; + + return ( + + {surveyList.map((item, index) => ())} + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + }, +}); + +export default GroupDetailSurveyScreen; diff --git a/src/containers/group/detail/GroupDetailVoteScreen.js b/src/containers/group/detail/GroupDetailVoteScreen.js new file mode 100644 index 0000000..8d5d4fc --- /dev/null +++ b/src/containers/group/detail/GroupDetailVoteScreen.js @@ -0,0 +1,44 @@ +import React from 'react'; +import { StyleSheet, ScrollView } from 'react-native'; +import colors from '../../../theme/Colors'; +import ContentListBox from '../../common/ContentListBox'; + +const GroupDetailVoteScreen = () => { + const voteList = [ + { + type: true, // true:vote, false:servey + data: { + title: "건국대학교 제47회 공과대학 학생회 투표", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: true + }, + { + type: true, // true:vote, false:servey + data: { + title: "건국대학교 제47회 인문대학 학생회 투표", + group: "KU 총학생회", + date: "3일 06:11:23", + ratio: 20.36, + numOfPeople: 851 + }, + isOpen: true + }, + ]; + return ( + + {voteList.map((item, index) => ())} + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + }, +}); + +export default GroupDetailVoteScreen; diff --git a/src/containers/group/detail/GroupInfoScreen.js b/src/containers/group/detail/GroupInfoScreen.js new file mode 100644 index 0000000..941d348 --- /dev/null +++ b/src/containers/group/detail/GroupInfoScreen.js @@ -0,0 +1,168 @@ +import React, { useState } from 'react'; +import { StyleSheet, ScrollView, Text, ImageBackground, Image, View } from 'react-native'; +import colors from '../../../theme/Colors'; +import { type } from '../../../theme/Fonts'; +import { useNavigation } from '@react-navigation/native'; +import SubButton from '../../common/SubButton'; + +const GroupInfoScreen = () => { + const navigateTo = useNavigation(); + const [isMaster, setIsMaster] = useState(true); + const [isMember, setIsMember] = useState(false); + + const groupData = { + name: "KU 총학생회", + introduction: "2022 건국대학교 총학생회입니다.", + numOfMember: 2752, + authentication: true, + } + + return ( + + + + + + + { navigateTo.goBack() }} source={require('../../../asset/icon/backWhite.png')} /> + 그룹 정보 + + {isMaster ? { navigateTo.navigate("GroupInfoUpdateScreen"); }} style={styles.icon} source={require('../../../asset/icon/pencil.png')} /> : null} + + + + + + {groupData.name} + + + 소개 + 그룹원 + 그룹인증 + + + {groupData.introduction} + + {groupData.numOfMember} + {isMaster ? : null} + + {groupData.authentication ? "완료" : "대기중"} + + + + + {isMember ? + + + 그룹 탈퇴 + + : null} + {isMaster ? + + + 그룹 삭제 + + : + + 그룹 신고 + } + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + }, + topContainer: { + justifyContent: 'space-between', + flexDirection: 'row', + padding: 20, + alignItems: 'center', + }, + absoluteContainer: { + height: 220, + }, + textContainer: { + flexDirection: 'row', + paddingHorizontal: 30, + paddingVertical: 20, + borderBottomWidth: 1, + borderColor: colors.gray2, + }, + iconContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + bottomContainer: { + alignItems: 'flex-end', + paddingHorizontal: 30, + paddingVertical: 12, + }, + image: { + resizeMode: 'cover', + height: 200, + }, + logo: { + resizeMode: 'cover', + position: 'absolute', + width: 80, + height: 80, + bottom: 0, + borderRadius: 50, + left: 30, + }, + icon: { + resizeMode: 'contain', + width: 22, + height: 22, + }, + smallIcon: { + resizeMode: 'contain', + width: 14, + height: 14, + marginRight: 4, + marginLeft: 16, + }, + font1: { + fontFamily: type.Roboto_Medium, + fontSize: 20, + color: colors.white, + marginLeft: 14, + }, + font2: { + fontFamily: type.Roboto_Bold, + fontSize: 22, + color: colors.black, + paddingHorizontal: 30, + marginTop: 10, + }, + font3: { + fontFamily: type.Roboto_Regular, + fontSize: 16, + color: colors.darkGray2, + marginBottom: 20, + }, + font4: { + fontFamily: type.Roboto_Regular, + fontSize: 16, + color: colors.black, + marginBottom: 20, + }, + font5: { + fontFamily: type.Roboto_Regular, + fontSize: 14, + color: colors.darkGray, + }, + backBtn:{ + padding: 4, + } +}); + +export default GroupInfoScreen; diff --git a/src/containers/group/detail/GroupInfoUpdateScreen.js b/src/containers/group/detail/GroupInfoUpdateScreen.js new file mode 100644 index 0000000..d2e7106 --- /dev/null +++ b/src/containers/group/detail/GroupInfoUpdateScreen.js @@ -0,0 +1,116 @@ +import React, { useState } from 'react'; +import { StyleSheet, ScrollView, Text, ImageBackground, Image, View } from 'react-native'; +import colors from '../../../theme/Colors'; +import { type } from '../../../theme/Fonts'; +import { useNavigation } from '@react-navigation/native'; +import InputBox from '../../common/InputBox'; + +const GroupInfoUpdateScreen = () => { + const groupData = { + name: "KU 총학생회", + introduction: "2022 건국대학교 총학생회입니다.", + } + const navigateTo = useNavigation(); + + const [groupName, setGroupName] = useState(groupData.name); + const [introduction, setIntroduction] = useState(groupData.introduction); + + const [isCorrect, setIsCorrect] = useState(true); + + return ( + + + + + + + { navigateTo.goBack() }} source={require('../../../asset/icon/backWhite.png')} /> + 그룹 정보 수정 + + 완료 + + + + + + + + + 그룹명 + + 소개 + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.white, + }, + topContainer: { + justifyContent: 'space-between', + flexDirection: 'row', + padding: 20, + alignItems: 'center', + }, + absoluteContainer: { + height: 220, + }, + image: { + resizeMode: 'cover', + height: 200, + }, + logo: { + resizeMode: 'cover', + position: 'absolute', + width: 80, + height: 80, + bottom: 0, + borderRadius: 50, + left: 30, + }, + icon: { + resizeMode: 'contain', + width: 22, + height: 22, + }, + bigIcon: { + position: 'absolute', + resizeMode: 'contain', + width: 42, + height: 42, + bottom: 10, + right: 10, + }, + smallIcon: { + position: 'absolute', + resizeMode: 'contain', + width: 30, + height: 30, + bottom: 0, + left: 82, + }, + font1: { + fontFamily: type.Roboto_Medium, + fontSize: 20, + color: colors.white, + marginLeft: 14, + }, + font2: { + fontFamily: type.Roboto_Regular, + fontSize: 14, + color: colors.black, + marginBottom: 6, + }, + backBtn:{ + padding: 4, + } +}); + +export default GroupInfoUpdateScreen; diff --git a/src/containers/home/HomeScreen.js b/src/containers/home/HomeScreen.js index e69de29..991f3a4 100644 --- a/src/containers/home/HomeScreen.js +++ b/src/containers/home/HomeScreen.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { ScrollView, StyleSheet, Text } from 'react-native'; +import { Colors } from 'react-native/Libraries/NewAppScreen'; +import { useNavigation } from '@react-navigation/native'; + +const HomeScreen = () => { + const navigateTo = useNavigation(); + + return ( + <> + + { navigateTo.navigate("DidStackNavigator"); }}>회원가입 + { navigateTo.navigate("GroupDetailStackNavigator"); }}>그룹 상세화면 + + + + ); +}; +const styles = StyleSheet.create({ + container: { + backgroundColor: Colors.white, + paddingHorizontal: 30, + }, +}); + +export default HomeScreen; diff --git a/src/navigation/stack/DidStackNavigator.js b/src/navigation/stack/DidStackNavigator.js index 552448f..ee118af 100644 --- a/src/navigation/stack/DidStackNavigator.js +++ b/src/navigation/stack/DidStackNavigator.js @@ -1,6 +1,5 @@ import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; -import { NavigationContainer } from '@react-navigation/native'; import CheckEmailScreen from '../../containers/user/did/CheckEmailScreen'; import EmailCodeScreen from '../../containers/user/did/EmailCodeScreen'; import TermsOfUseScreen from '../../containers/user/did/TermsOfUseScreen'; @@ -17,115 +16,113 @@ const DidStack = createStackNavigator(); const DidStackNavigator = () => { return ( - - - ({ - headerStyle: styles.headerStyle, - title: '이메일 인증하기', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '이메일 인증하기', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '이용약관', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '개인정보처리방침', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '학생증 인증하기', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '학생증 인증하기', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '추가정보 입력하기', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - })} - /> - ({ - headerStyle: styles.headerStyle, - title: '회원가입 완료', - headerTintColor: Colors.black, - headerTitleAlign: 'center', - headerTitleStyle: { - fontSize: 18, - }, - headerLeft: null, - })} - /> - - + + ({ + headerStyle: styles.headerStyle, + title: '이메일 인증하기', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '이메일 인증하기', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '이용약관', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '개인정보처리방침', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '학생증 인증하기', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '학생증 인증하기', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '추가정보 입력하기', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + })} + /> + ({ + headerStyle: styles.headerStyle, + title: '회원가입 완료', + headerTintColor: Colors.black, + headerTitleAlign: 'center', + headerTitleStyle: { + fontSize: 18, + }, + headerLeft: null, + })} + /> + ); }; diff --git a/src/navigation/stack/GroupDetailStackNavigator.js b/src/navigation/stack/GroupDetailStackNavigator.js new file mode 100644 index 0000000..abdea6d --- /dev/null +++ b/src/navigation/stack/GroupDetailStackNavigator.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; + +import GroupDetailScreen from '../../containers/group/detail/GroupDetailScreen'; +import GroupInfoScreen from '../../containers/group/detail/GroupInfoScreen'; +import GroupInfoUpdateScreen from '../../containers/group/detail/GroupInfoUpdateScreen'; + +const GroupDetailStack = createStackNavigator(); + +const GroupDetailStackNavigator = () => { + return ( + + + + + + ); +}; + +export default GroupDetailStackNavigator; diff --git a/src/navigation/stack/MainStackNavigator.js b/src/navigation/stack/MainStackNavigator.js new file mode 100644 index 0000000..6d6aa11 --- /dev/null +++ b/src/navigation/stack/MainStackNavigator.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; +import { NavigationContainer } from '@react-navigation/native'; + +import HomeScreen from '../../containers/home/HomeScreen'; +import DidStackNavigator from './DidStackNavigator'; +import GroupDetailStackNavigator from './GroupDetailStackNavigator'; +const MainStack = createStackNavigator(); + +const MainStackNavigator = () => { + return ( + + + + + + + + ); +}; + +export default MainStackNavigator; diff --git a/src/navigation/tab/GroupDetailTabNavigator.js b/src/navigation/tab/GroupDetailTabNavigator.js new file mode 100644 index 0000000..abd508a --- /dev/null +++ b/src/navigation/tab/GroupDetailTabNavigator.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; +import Colors from '../../theme/Colors'; +import { type } from '../../theme/Fonts'; + +import GroupDetailSurveyScreen from '../../containers/group/detail/GroupDetailSurveyScreen'; +import GroupDetailVoteScreen from '../../containers/group/detail/GroupDetailVoteScreen'; +import GroupDetailResultScreen from '../../containers/group/detail/GroupDetailResultScreen'; + +const Tab = createMaterialTopTabNavigator(); + +const GroupDetailTabNavigator = () => { + return ( + + + + + + ); +} + +export default GroupDetailTabNavigator; diff --git a/src/theme/Colors.js b/src/theme/Colors.js index 98f60a4..807de71 100644 --- a/src/theme/Colors.js +++ b/src/theme/Colors.js @@ -7,6 +7,7 @@ const Colors = { gray: '#F2F4F7', gray2: '#E5E5E5', darkGray: '#ADADAD', + darkGray2: '#6B6B6B', sub1: '#E5ECFF', sub2: '#FFE8D4', sub3: '#D2EADE', diff --git a/yarn.lock b/yarn.lock index e391d28..1d6391a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1227,6 +1227,14 @@ "resolved" "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.2.1.tgz" "version" "1.2.1" +"@react-navigation/material-top-tabs@^6.0.6": + "integrity" "sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g==" + "resolved" "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz" + "version" "6.0.6" + dependencies: + "color" "^3.1.3" + "warn-once" "^0.1.0" + "@react-navigation/native@^6.0.0", "@react-navigation/native@^6.0.6": "integrity" "sha512-XzL7YPsaRRQgdCQSXbA8PJWLN2I4lhUUvSFoKQPNO4DS6y8eqZI1V8COPYlJg8+tsetGV5J8jt+jVjWL7h6ZrQ==" "resolved" "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.6.tgz" @@ -5630,6 +5638,11 @@ "lodash" "^4.17.21" "prop-types" "^15.7.2" +"react-native-pager-view@*", "react-native-pager-view@^5.4.9", "react-native-pager-view@>= 4.0.0": + "integrity" "sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA==" + "resolved" "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz" + "version" "5.4.9" + "react-native-safe-area-context@*", "react-native-safe-area-context@^3.3.2", "react-native-safe-area-context@>= 3.0.0": "integrity" "sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q==" "resolved" "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz" @@ -5642,6 +5655,11 @@ dependencies: "hoist-non-react-statics" "^2.3.1" +"react-native-tab-view@^3.1.1", "react-native-tab-view@>= 3.0.0": + "integrity" "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==" + "resolved" "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz" + "version" "3.1.1" + "react-native@*", "react-native@>=0.57", "react-native@0.66.4": "integrity" "sha512-9vx5dlSfQlKbbDtr8+xMon6qsmSu7jvjdXWZpEKh3XVKpUidbbODv7048gwVKX8YAel1egeR7hN8vzSeI6ssTw==" "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.66.4.tgz"