그룹상세화면

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 (
         <>
-            <DidStackNavigator />
+            <MainStackNavigator />
         </>
     );
 }

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": {

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 (
+        <View style={isOpen? styles.container: styles.closedContainer}>
+            <Image style={styles.image} source={require('../../asset/image/konkukVote.jpg')} />
+            <View style={styles.textContainer}>
+                <Text style={styles.font1}>{data.title}</Text>
+                <View style={styles.imageTextContainer}>
+                    <Image style={styles.icon} source={require('../../asset/icon/user.png')} />
+                    <Text style={styles.font2}>{data.group}</Text>
+                </View>
+                <View style={{ alignItems: 'flex-end', marginTop: 16, }}>
+                    <View style={styles.imageTextContainer}>
+                        <Image style={styles.icon} source={require('../../asset/icon/time.png')} />
+                        {isOpen? <Text style={styles.font3}>{data.date} 남음</Text> : <Text style={styles.font3}>종료되었습니다</Text>}
+                    </View>
+                </View>
+                <View style={styles.tagTextContainer}>
+                    {type ?
+                        <Text style={styles.voteBox}>투표</Text>
+                        : <Text style={styles.surveyBox}>설문</Text>
+                    }
+                    <View style={{ flexDirection: 'row' }}>
+                        <Text style={styles.font2}>참여율 </Text>
+                        <Text style={styles.font4}>{data.ratio}%</Text>
+                        <Text style={styles.font2}> ({data.numOfPeople}명)</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};
+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;

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 (
+        <View style={styles.container}
+            onTouchEnd={() => { navigateTo.navigate(moveTo); }}>
+            <Text style={ styles.font1}>{text}</Text>
+        </View>
+    );
+}
+
+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;

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 (
+        <ScrollView style={styles.container}>
+            {resultList.map((item, index) => (<ContentListBox key={index} type={item.type} data={item.data} isOpen={item.isOpen} />))}
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: colors.white,
+    },
+});
+
+export default GroupDetailResultScreen;