diff --git a/src/components/PageContainer.jsx b/src/components/PageContainer.jsx new file mode 100644 index 0000000..5ff73f3 --- /dev/null +++ b/src/components/PageContainer.jsx @@ -0,0 +1,23 @@ +import { StyleSheet, SafeAreaView } from 'react-native'; + +const PageContainer = ({ children }) => { + return {children}; +}; + +const styles = StyleSheet.create({ + screenArea: { + ...Platform.select({ + ios: { + flex: 1, + backgroundColor: 'white', + }, + android: { + flex: 1, + paddingTop: 30, + backgroundColor: 'white', + }, + }), + }, +}); + +export default PageContainer; diff --git a/src/components/index.js b/src/components/index.js index 3612fa0..9b9d309 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,6 +4,7 @@ import TextButton from './TextButton'; import ToggleList from './ToggleList'; import CustomButton from './CustomButton'; import CustomInput from './CustomInput'; +import PageContainer from './PageContainer'; export { ManageList, @@ -12,4 +13,5 @@ export { GraphicStatus, CustomButton, CustomInput, + PageContainer, }; diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx index 102d58d..b3bf551 100644 --- a/src/screen/LoginPage.jsx +++ b/src/screen/LoginPage.jsx @@ -7,6 +7,7 @@ import { ToggleModeButton } from '../context/Theme'; import { useSignIn } from '../Hooks/useAuth'; import CustomButton from '../components/CustomButton'; import CustomInput from '../components/CustomInput'; +import { PageContainer } from '../components/index'; const LoginPage = ({ navigation: { navigate } }) => { const { theme } = useContext(ThemeContext); @@ -52,7 +53,7 @@ const LoginPage = ({ navigation: { navigate } }) => { }; return ( - + {/* 이메일 인풋 */} @@ -97,7 +98,7 @@ const LoginPage = ({ navigation: { navigate } }) => { buttonText="회원가입" /> - + ); }; @@ -112,17 +113,3 @@ const LoginErrorText = styled.Text` color: ${COLORS.DANGER}; padding: 10px 0; `; - -const styles = StyleSheet.create({ - screenArea: { - ...Platform.select({ - ios: { - flex: 1, - }, - android: { - flex: 1, - paddingTop: 20, - }, - }), - }, -}); diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx index d230dae..6a67c2e 100644 --- a/src/screen/MainPage.jsx +++ b/src/screen/MainPage.jsx @@ -1,9 +1,10 @@ import { GraphicStatus } from '../components/index'; -import { Text, FlatList, SafeAreaView, StyleSheet } from 'react-native'; +import { Text, FlatList } from 'react-native'; import { useUID } from '../Hooks/useAuth'; import { useGetPillData } from '../Hooks/usePill'; import { ToggleList } from '../components'; import { useEffect, useState } from 'react'; +import { PageContainer } from '../components/index'; const MainPage = () => { const { data: uid } = useUID(); @@ -23,23 +24,23 @@ const MainPage = () => { if (isError) { return ( - + 에러 페이지 {error.message} - + ); } if (isLoading || !initialLoad) { return ( - + 로딩 화면 - + ); } return ( - + item.id} @@ -54,24 +55,8 @@ const MainPage = () => { /> )} /> - + ); }; export default MainPage; - -const styles = StyleSheet.create({ - screenArea: { - ...Platform.select({ - ios: { - flex: 1, - backgroundColor: 'white', - }, - android: { - flex: 1, - paddingTop: 30, - backgroundColor: 'white', - }, - }), - }, -}); diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx index 6e08b2e..cc39de7 100644 --- a/src/screen/MyPage.jsx +++ b/src/screen/MyPage.jsx @@ -3,6 +3,7 @@ import { Text, View, FlatList, StyleSheet, SafeAreaView } from 'react-native'; import { ManageList, CustomButton } from '../components'; import { useUID } from '../Hooks/useAuth'; import { useGetPillData } from '../Hooks/usePill'; +import { PageContainer } from '../components/index'; const MyPage = ({ navigation: { navigate } }) => { const { data: uid } = useUID(); @@ -11,30 +12,30 @@ const MyPage = ({ navigation: { navigate } }) => { // 에러 핸들링: 통신 실패의 경우 보여주는 화면입니다. if (isError) { return ( - + 나의 약관리 에러 {error.message} - + ); } // 통신 중 if (isLoading) { return ( - + 나의 약관리 Loading... - + ); } return ( - + 나의 약관리} @@ -66,7 +67,7 @@ const MyPage = ({ navigation: { navigate } }) => { } /> - + ); }; @@ -83,20 +84,4 @@ const CustomButtonContainer = styled.View` margin: -8px 8px 0px; `; -const styles = StyleSheet.create({ - screenArea: { - ...Platform.select({ - ios: { - flex: 1, - backgroundColor: 'white', - }, - android: { - flex: 1, - paddingTop: 20, - backgroundColor: 'white', - }, - }), - }, -}); - export default MyPage; diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx index 193186a..7db0914 100644 --- a/src/screen/SettingPage.jsx +++ b/src/screen/SettingPage.jsx @@ -1,26 +1,16 @@ import { CustomButton } from '../components'; -import { View, SafeAreaView, StyleSheet } from 'react-native'; +import { PageContainer } from '../components/index'; const SettingPage = ({ navigation: { navigate } }) => { return ( - + navigate('Stacks', { screen: '로그인' })} /> - + ); }; export default SettingPage; - -const styles = StyleSheet.create({ - screenArea: { - ...Platform.select({ - android: { - paddingTop: 30, - }, - }), - }, -}); diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx index 3734b29..b809a57 100644 --- a/src/screen/SignupPage.jsx +++ b/src/screen/SignupPage.jsx @@ -6,6 +6,7 @@ import { FontAwesome } from '@expo/vector-icons'; import { COLORS } from '../shared/color'; import { ThemeContext } from '../context/Theme'; import { ToggleModeButton } from '../context/Theme'; +import { PageContainer } from '../components/index'; const regex = { email: new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/), @@ -61,7 +62,7 @@ const SignupPage = ({ navigation: { navigate } }) => { }; return ( - + navigate('로그인')}> { value={email} onChangeText={setEmail} onChange={(text) => validEmail(text)} - style={styles.textInputShadow} + style={styles1.textInputShadow} /> {correctEmail || ( @@ -102,7 +103,7 @@ const SignupPage = ({ navigation: { navigate } }) => { onChangeText={setPassword} onChange={(text) => validPassword(text)} secureTextEntry={visiblePassword} - style={styles.textInputShadow} + style={styles1.textInputShadow} /> setVisiblePassword(!visiblePassword)} @@ -125,7 +126,7 @@ const SignupPage = ({ navigation: { navigate } }) => { 회원가입 - + ); }; @@ -191,7 +192,7 @@ const CustomButton = styled.TouchableOpacity` border-radius: 16px; `; -const styles = StyleSheet.create({ +const styles1 = StyleSheet.create({ textInputShadow: { ...Platform.select({ ios: { @@ -209,13 +210,6 @@ const styles = StyleSheet.create({ }, }), }, - screenArea: { - ...Platform.select({ - android: { - paddingTop: 20, - }, - }), - }, }); //