From 7994aee48744a27baab7c3a12a96f3e7daf032cc Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Sat, 7 Oct 2023 23:13:13 +0900
Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 screens/calendar.js | 41 +++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/screens/calendar.js b/screens/calendar.js
index c7be109..38bc178 100644
--- 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,
   },
 });

From 24fa01b85f6acf0149af8ea31f755b92c533e3cc Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Sat, 7 Oct 2023 23:17:04 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=EC=95=8C=EB=9E=8C=20=EB=B2=84=ED=8A=BC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Navigation.js    | 7 +++++++
 screens/alarm.js | 1 -
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/Navigation.js b/Navigation.js
index cc48af1..d66c4c8 100644
--- 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/screens/alarm.js b/screens/alarm.js
index a0cf34e..aacc477 100644
--- 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 = [
   {

From 67299948948d15d7a20091445e4e7133d7d4ef43 Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Sun, 8 Oct 2023 01:02:32 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20accessToken=20recoil=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.js                        |   7 +-
 package.json                  |   3 +-
 screens/SocialWebviewModal.js | 180 +++++++--------
 screens/home.js               | 405 +++++++++++++++++-----------------
 states/auth.js                |   7 +
 yarn.lock                     |  12 +
 6 files changed, 323 insertions(+), 291 deletions(-)
 create mode 100644 states/auth.js

diff --git a/App.js b/App.js
index 99ff1a5..36714ab 100644
--- 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/package.json b/package.json
index 5377bf3..7c22d5b 100644
--- 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
index 4b2ad94..c60cfbb 100644
--- 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/home.js b/screens/home.js
index e89dd49..edc4327 100644
--- a/screens/home.js
+++ b/screens/home.js
@@ -1,216 +1,219 @@
-import React, {useCallback, useState, useMemo, useRef} from 'react';
+import React, { useCallback, useState, useMemo, useRef } from "react";
 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';
+  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";
+import { useRecoilState } from "recoil";
+import { accessTokenState } from "../states/auth";
 
 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 => {
-		setTextArray([...textArray, value]);
-	};
+  const addList = (value) => {
+    setTextArray([...textArray, value]);
+  };
 
-	const [textArray, setTextArray] = useState([]);
-	const [value, onChangeText] = useState('');
-	const [btn, setBtn] = useState(false);
+  const [textArray, setTextArray] = useState([]);
+  const [value, onChangeText] = useState("");
+  const [btn, setBtn] = useState(false);
 
-	return (
-		<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}
-				snapPoints={snapPoints}
-				onChange={handleSheetChanges}
-				backgroundStyle={styles.BottomSheetContainer}
-			>
-				<View style={styles.contentContainer}>
-					<View style={styles.mainTitle}>
-						<Text style={styles.textTitle}>
-							오늘 하루 감사했던 일은 무엇인가요?
-						</Text>
-						<View style={styles.PlusTitle}>
-							<TouchableOpacity onPress={() => addList('')}>
-								<Text style={styles.TextPlus}>+</Text>
-							</TouchableOpacity>
-						</View>
-					</View>
+  return (
+    <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}
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+        backgroundStyle={styles.BottomSheetContainer}
+      >
+        <View style={styles.contentContainer}>
+          <View style={styles.mainTitle}>
+            <Text style={styles.textTitle}>
+              오늘 하루 감사했던 일은 무엇인가요?
+            </Text>
+            <View style={styles.PlusTitle}>
+              <TouchableOpacity onPress={() => addList("")}>
+                <Text style={styles.TextPlus}>+</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
 
-					<View style={styles.scrollView}>
-						{textArray.map((item, idx) => (
-							<TextInput
-								key={idx}
-								editable
-								multiline
-								placeholder="글을 작성해주세요!"
-								autoFocus
-								numberOfLines={4}
-								maxLength={40}
-								onChangeText={text => onChangeText(text)}
-								value={value}
-								style={styles.inputTag}
-							/>
-						))}
-					</View>
-					<View style={styles.registrationBtn}>
-						<TouchableOpacity onPress={() => registrationBtn()}>
-							<Text style={styles.TextRegister}>등록하기</Text>
-						</TouchableOpacity>
-					</View>
-				</View>
-			</BottomSheet>
-			{/* </SafeAreaView> */}
-		</LinearGradient>
-	);
+          <View style={styles.scrollView}>
+            {textArray.map((item, idx) => (
+              <TextInput
+                key={idx}
+                editable
+                multiline
+                placeholder="글을 작성해주세요!"
+                autoFocus
+                numberOfLines={4}
+                maxLength={40}
+                onChangeText={(text) => onChangeText(text)}
+                value={value}
+                style={styles.inputTag}
+              />
+            ))}
+          </View>
+          <View style={styles.registrationBtn}>
+            <TouchableOpacity onPress={() => registrationBtn()}>
+              <Text style={styles.TextRegister}>등록하기</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </BottomSheet>
+      {/* </SafeAreaView> */}
+    </LinearGradient>
+  );
 };
 
 export default Home;
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: '#100D30',
-	},
-	contentContainer: {
-		flex: 1,
-		padding: 20,
+  container: {
+    flex: 1,
+    backgroundColor: "#100D30",
+  },
+  contentContainer: {
+    flex: 1,
+    padding: 20,
 
-		// width: 390,
-		// position: 'relative',
-		// display: 'flex',
-		// 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%',
-		flex: 1,
-		flexDirection: 'coulmn',
-	},
-	BottomSheetContainer: {
-		opacity: 0.8,
-		borderRadius: 20,
-	},
-	mainTitle: {
-		display: 'flex',
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		alignItems: 'center',
-	},
-	textTitle: {
-		fontStyle: 'normal',
-		fontSize: 16,
-		fontWeight: 'bold',
-		color: '#24292F',
-	},
-	PlusTitle: {
-		backgroundColor: '#ffffff',
-		width: 32,
-		height: 32,
-		borderRadius: 500,
-		position: 'relative',
-	},
-	TextPlus: {
-		textAlign: 'center',
-		position: 'absolute',
-		top: -3,
-		left: 7,
-		fontSize: 30,
-	},
-	inputTag: {
-		marginTop: 20,
-		height: 50,
-		width: 350,
-		borderRadius: 100,
-		padding: 10,
-		backgroundColor: '#ffffff',
-		verticalAlign: 'middle',
-		lineHeight: 20,
-		paddingTop: 15,
-		paddingLeft: 25,
-	},
-	registrationBtn: {
-		position: 'absolute',
-		left: 20,
-		top: 300,
-		borderRadius: 8,
-		width: 350,
-		height: 40,
-		backgroundColor: '#7149E0',
-	},
-	TextRegister: {
-		textAlign: 'center',
-		color: '#ffffff',
-		fontSize: 15,
-		fontWeight: 'bold',
-		lineHeight: 40,
-	},
+    // width: 390,
+    // position: 'relative',
+    // display: 'flex',
+    // 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%",
+    flex: 1,
+    flexDirection: "coulmn",
+  },
+  BottomSheetContainer: {
+    opacity: 0.8,
+    borderRadius: 20,
+  },
+  mainTitle: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  textTitle: {
+    fontStyle: "normal",
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#24292F",
+  },
+  PlusTitle: {
+    backgroundColor: "#ffffff",
+    width: 32,
+    height: 32,
+    borderRadius: 500,
+    position: "relative",
+  },
+  TextPlus: {
+    textAlign: "center",
+    position: "absolute",
+    top: -3,
+    left: 7,
+    fontSize: 30,
+  },
+  inputTag: {
+    marginTop: 20,
+    height: 50,
+    width: 350,
+    borderRadius: 100,
+    padding: 10,
+    backgroundColor: "#ffffff",
+    verticalAlign: "middle",
+    lineHeight: 20,
+    paddingTop: 15,
+    paddingLeft: 25,
+  },
+  registrationBtn: {
+    position: "absolute",
+    left: 20,
+    top: 300,
+    borderRadius: 8,
+    width: 350,
+    height: 40,
+    backgroundColor: "#7149E0",
+  },
+  TextRegister: {
+    textAlign: "center",
+    color: "#ffffff",
+    fontSize: 15,
+    fontWeight: "bold",
+    lineHeight: 40,
+  },
 });
diff --git a/states/auth.js b/states/auth.js
new file mode 100644
index 0000000..0ddd8f2
--- /dev/null
+++ b/states/auth.js
@@ -0,0 +1,7 @@
+import { useRecoilState } from "recoil";
+import { atom } from "recoil";
+
+export const accessTokenState = atom({
+  key: "accessTokenState",
+  default: "",
+});
diff --git a/yarn.lock b/yarn.lock
index 9bb8b3b..f441296 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3680,6 +3680,11 @@ graphql@15.8.0:
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
   integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
 
+hamt_plus@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -5643,6 +5648,13 @@ recast@^0.21.0:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+recoil@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
+  integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==
+  dependencies:
+    hamt_plus "1.0.2"
+
 recyclerlistview@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef"