Merge pull request #19 from kusitms-28th-kukathon/feat/#15/mainPage

Feat/#15/main page

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.5.1",
     "date-fns": "^2.30.0",
     "expo": "~49.0.13",
+    "expo-linear-gradient": "^12.5.0",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "0.72.5",

screens/home.js

@@ -3,16 +3,20 @@ import {
 	View,
 	SafeAreaView,
 	ScrollView,
+	Image,
 	Text,
 	StyleSheet,
 	TextInput,
 	TouchableOpacity,
+	StatusBar,
 } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
+import {LinearGradient} from 'expo-linear-gradient';
+import {useNavigation} from '@react-navigation/native';
 
 const Home = () => {
 	const bottomSheetRef = useRef(null);
-
+	const navigation = useNavigation();
 	// variables
 	const snapPoints = useMemo(() => ['50%', '14%'], []);
 
@@ -27,9 +31,30 @@ const Home = () => {
 
 	const [textArray, setTextArray] = useState([]);
 	const [value, onChangeText] = useState('');
+	const [btn, setBtn] = useState(false);
 
 	return (
-		<SafeAreaView style={styles.container}>
+		<LinearGradient colors={['#0A0026', '#200C5B']} style={styles.container}>
+			<StatusBar barStyle="light-content" />
+			{/* <SafeAreaView style={styles.container}> */}
+			<View style={styles.header}>
+				<Image style={styles.logo} source={require('../assets/homeLogo.png')} />
+				<TouchableOpacity style={styles.alarm} onPress={() => setBtn(!btn)}>
+					<Image source={require('../assets/alarmWhite.png')} />
+				</TouchableOpacity>
+			</View>
+			<View style={styles.starMap}>
+				<Image
+					style={styles.background}
+					source={require('../assets/star1.png')}
+				/>
+				<TouchableOpacity
+					style={btn ? styles.star : styles.starOn}
+					// onPrestss={() => navigation.navigate('Alarm')}
+				>
+					<Image source={require('../assets/ShineStar.png')} />
+				</TouchableOpacity>
+			</View>
 			<BottomSheet
 				ref={bottomSheetRef}
 				index={1}
@@ -72,7 +97,8 @@ const Home = () => {
 					</View>
 				</View>
 			</BottomSheet>
-		</SafeAreaView>
+			{/* </SafeAreaView> */}
+		</LinearGradient>
 	);
 };
 
@@ -93,6 +119,36 @@ const styles = StyleSheet.create({
 		// marginTop: 50,
 		// justifyContent: 'center',
 	},
+	header: {
+		display: 'flex',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	alarm: {
+		marginTop: 60,
+		marginRight: 30,
+	},
+	logo: {
+		marginTop: 67,
+		marginLeft: 30,
+		width: 96,
+		height: 18,
+	},
+	starMap: {
+		position: 'relative',
+	},
+	star: {
+		position: 'absolute',
+		top: 85,
+		left: 75,
+		opacity: 0,
+	},
+	starOn: {
+		position: 'absolute',
+		top: 85,
+		left: 75,
+		opacity: 1,
+	},
 	scrollView: {
 		height: 700,
 		width: '100%',

yarn.lock

@@ -3252,6 +3252,11 @@ expo-keep-awake@~12.3.0:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz#c42449ae19c993274ddc43aafa618792b6aec408"
   integrity sha512-ujiJg1p9EdCOYS05jh5PtUrfiZnK0yyLy+UewzqrjUqIT8eAGMQbkfOn3C3fHE7AKd5AefSMzJnS3lYZcZYHDw==
 
+expo-linear-gradient@^12.5.0:
+  version "12.5.0"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.5.0.tgz#793f56fdc87f57b99b64f4a1b2bb16cba8c47672"
+  integrity sha512-GOV2wODawr2biRCtF2Yb5+wLzvnwXS8dAblfQO7qjyh4f7TDTJn7X0TlVSDMNhIdbAcZBrdxvGFeE2iXdzQ6ow==
+
 expo-modules-autolinking@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.5.1.tgz#363f90c172769ce12bf56c7be9ca0897adfc7a81"