Merge branch 'main' into feat/#20/starPositioning

kusitms-28th-kukathon · Oct 7, 2023 · 0e948b9 · 0e948b9
2 parents f8c14ed + 7d5527a
commit 0e948b9
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 113 deletions.
diff --git a/App.js b/App.js
@@ -1,6 +1,11 @@
 import React from "react";
 import Navigation from "./Navigation";
+import { RecoilRoot } from "recoil";
 
 export default function App() {
-  return <Navigation />;
+  return (
+    <RecoilRoot>
+      <Navigation />
+    </RecoilRoot>
+  );
 }
diff --git a/Navigation.js b/Navigation.js
@@ -127,6 +127,13 @@ function StackScreen() {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name="Calendar"
+        component={Calendar}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 }

diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "react-native-screens": "^3.25.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-webview": "^13.6.2",
-    "reanimated-bottom-sheet": "^1.0.0-alpha.22"
+    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

diff --git a/screens/SocialWebviewModal.js b/screens/SocialWebviewModal.js
@@ -1,96 +1,100 @@
-import {WebView} from 'react-native-webview';
-import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
-import axios from 'axios';
+import { WebView } from "react-native-webview";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import axios from "axios";
+import { useRecoilState } from "recoil";
+import { useNavigation } from "@react-navigation/native";
+import { accessTokenState } from "../states/auth";
 
-import {useNavigation} from '@react-navigation/native';
-const REST_API_KEY = '8f9849291f535bb2078554c4085202fc';
-const REDIRECT_URI = 'http://3.37.52.73:80';
+const REST_API_KEY = "8f9849291f535bb2078554c4085202fc";
+const REDIRECT_URI = "http://3.37.52.73:80";
 
 const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;
 const Axios = axios.create({
-	baseURL: 'http://3.37.52.73:80',
+  baseURL: "http://3.37.52.73:80",
 });
 
-function SocialWebviewModal({setModalOpen}) {
-	const navigation = useNavigation();
-	function LogInProgress(data) {
-		// access code는 url에 붙어 장황하게 날아온다.
-
-		// substringd으로 url에서 code=뒤를 substring하면 된다.
-
-		const exp = 'code=';
-
-		var condition = data.indexOf(exp);
-
-		if (condition != -1) {
-			var request_code = data.substring(condition + exp.length);
-
-			// console.log("access code :: " + request_code);
-
-			// 토큰값 받기
-
-			requestToken(request_code);
-		}
-	}
-
-	const requestToken = async request_code => {
-		var returnValue = 'none';
-
-		var request_token_url = 'https://kauth.kakao.com/oauth/token';
-
-		axios({
-			method: 'post',
-
-			url: request_token_url,
-
-			params: {
-				grant_type: 'authorization_code',
-
-				client_id: REST_API_KEY,
-
-				redirect_uri: REDIRECT_URI,
-
-				code: request_code,
-			},
-		}).then(function (response) {
-			returnValue = response.data.access_token;
-			console.log(returnValue);
-			axios
-				.post(
-					'http://3.37.52.73:80/api/user/auth/kakao-login',
-					{},
-					{
-						headers: {
-							'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
-							access: `Bearer ${returnValue}`,
-						},
-					},
-				)
-				.then(res => {
-					console.log(res.data);
-					navigation.navigate('Home', {screen: 'Home'});
-				});
-		});
-	};
-
-	return (
-		<View style={{flex: 1}}>
-			<WebView
-				originWhitelist={['*']}
-				scalesPageToFit={false}
-				style={{marginTop: 30}}
-				source={{
-					uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
-				}}
-				injectedJavaScript={runFirst}
-				javaScriptEnabled={true}
-				onMessage={event => {
-					LogInProgress(event.nativeEvent['url']);
-				}}
-
-				// onMessage ... :: webview에서 온 데이터를 event handler로 잡아서 logInProgress로 전달
-			/>
-		</View>
-	);
+function SocialWebviewModal({ setModalOpen }) {
+  const navigation = useNavigation();
+  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
+
+  function LogInProgress(data) {
+    // access code는 url에 붙어 장황하게 날아온다.
+
+    // substringd으로 url에서 code=뒤를 substring하면 된다.
+
+    const exp = "code=";
+
+    var condition = data.indexOf(exp);
+
+    if (condition != -1) {
+      var request_code = data.substring(condition + exp.length);
+
+      // console.log("access code :: " + request_code);
+
+      // 토큰값 받기
+
+      requestToken(request_code);
+    }
+  }
+
+  const requestToken = async (request_code) => {
+    var returnValue = "none";
+
+    var request_token_url = "https://kauth.kakao.com/oauth/token";
+
+    axios({
+      method: "post",
+
+      url: request_token_url,
+
+      params: {
+        grant_type: "authorization_code",
+
+        client_id: REST_API_KEY,
+
+        redirect_uri: REDIRECT_URI,
+
+        code: request_code,
+      },
+    }).then(function (response) {
+      returnValue = response.data.access_token;
+      // console.log(returnValue);
+      axios
+        .post(
+          "http://3.37.52.73:80/api/user/auth/kakao-login",
+          {},
+          {
+            headers: {
+              "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
+              access: `Bearer ${returnValue}`,
+            },
+          }
+        )
+        .then((res) => {
+          setAccessToken(res.data.accessToken);
+          navigation.navigate("Home", { screen: "Home" });
+        });
+    });
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <WebView
+        originWhitelist={["*"]}
+        scalesPageToFit={false}
+        style={{ marginTop: 30 }}
+        source={{
+          uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
+        }}
+        injectedJavaScript={runFirst}
+        javaScriptEnabled={true}
+        onMessage={(event) => {
+          LogInProgress(event.nativeEvent["url"]);
+        }}
+
+        // onMessage ... :: webview에서 온 데이터를 event handler로 잡아서 logInProgress로 전달
+      />
+    </View>
+  );
 }
 export default SocialWebviewModal;
diff --git a/screens/alarm.js b/screens/alarm.js
@@ -9,7 +9,6 @@ import {
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
-import { TextInput } from "react-native-gesture-handler";
 
 const alarmList = [
   {

diff --git a/screens/calendar.js b/screens/calendar.js
@@ -4,6 +4,7 @@ import { Calendar } from "react-native-calendars";
 import { format } from "date-fns";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
+import { LinearGradient } from "expo-linear-gradient";
 
 const posts = [
   {
@@ -28,6 +29,24 @@ const posts = [
   },
 ];
 
+const calendarTheme = {
+  calendarBackground: "#100D30",
+  textSectionTitleColor: "#fff",
+  selectedDayBackgroundColor: "#4619C5",
+  arrowColor: "#fff",
+  dotColor: "#AD97ED",
+  todayTextColor: "#fff",
+  textMonthFontSize: 20,
+  textDisabledColor: "#fff",
+  textInactiveColor: "#fff",
+  textDayHeaderFontWeight: "bold",
+  textDayHeaderFontColor: "#fff",
+  textDayFontWeight: "bold",
+  dayTextColor: "#fff",
+  textDisabledColor: "gray",
+  monthTextColor: "#fff",
+};
+
 const CalendarView = () => {
   const navigation = useNavigation();
 
@@ -57,27 +76,17 @@ const CalendarView = () => {
   };
 
   return (
-    <SafeAreaView style={Styles.container}>
+    <LinearGradient colors={["#0A0026", "#200C5B"]} style={Styles.container}>
       <View style={Styles.header}>
         <Text style={Styles.Title}>캘린더</Text>
         <TouchableOpacity onPress={() => navigation.navigate("Alarm")}>
-          <Image source={require("../assets/alarm.png")} />
+          <Image source={require("../assets/alarmWhite.png")} />
         </TouchableOpacity>
       </View>
       <Calendar
         style={Styles.calendar}
         markedDates={markedSelectedDates}
-        theme={{
-          selectedDayBackgroundColor: "#C8B9F3",
-          arrowColor: "#8867E5",
-          dotColor: "#8867E5",
-          todayTextColor: "#009688",
-          textDayHeaderFontWeight: "bold",
-          textDayFontWeight: "bold",
-          textMonthFontWeight: "bold",
-          textMonthFontSize: "20",
-          selectedDayTextColor: "black",
-        }}
+        theme={calendarTheme}
         onDayPress={handleDayPress}
       />
       {selectedPost && (
@@ -90,7 +99,7 @@ const CalendarView = () => {
           ))}
         </View>
       )}
-    </SafeAreaView>
+    </LinearGradient>
   );
 };
 
@@ -101,6 +110,7 @@ const Styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#fff",
     padding: 10,
+    paddingTop: 30,
   },
   header: {
     flexDirection: "row",
@@ -133,6 +143,7 @@ const Styles = StyleSheet.create({
     marginBottom: 10,
     marginLeft: 10,
     marginTop: 20,
+    color: "#fff",
   },
   Content: {
     fontSize: 15,
@@ -143,5 +154,7 @@ const Styles = StyleSheet.create({
     borderRadius: 25,
     borderColor: "#EDE8FB",
     backgroundColor: "#fff",
+    overflow: "hidden",
+    opacity: 0.8,
   },
 });
diff --git a/screens/home.js b/screens/home.js
@@ -18,16 +18,19 @@ import Star1 from './starPosition/Star1';
 import Star2 from './starPosition/Star2';
 import Star3 from './starPosition/Star3';
 
+
 const Home = () => {
-	const bottomSheetRef = useRef(null);
-	const navigation = useNavigation();
-	// variables
-	const snapPoints = useMemo(() => ['50%', '14%'], []);
+  const bottomSheetRef = useRef(null);
+  const navigation = useNavigation();
+  // variables
+  const snapPoints = useMemo(() => ["50%", "14%"], []);
+  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
+
+  // callbacks
+  const handleSheetChanges = useCallback((index) => {
+    console.log("handleSheetChanges", index);
+  }, []);
 
-	// callbacks
-	const handleSheetChanges = useCallback(index => {
-		console.log('handleSheetChanges', index);
-	}, []);
 
 	const addList = value => {
 		setBtn(!btn);
@@ -134,6 +137,7 @@ const Home = () => {
 			{/* </SafeAreaView> */}
 		</LinearGradient>
 	);
+
 };
 
 export default Home;
@@ -248,4 +252,5 @@ const styles = StyleSheet.create({
 		fontWeight: 'bold',
 		lineHeight: 40,
 	},
+
 });
diff --git a/states/auth.js b/states/auth.js
@@ -0,0 +1,7 @@
+import { useRecoilState } from "recoil";
+import { atom } from "recoil";
+
+export const accessTokenState = atom({
+  key: "accessTokenState",
+  default: "",
+});