refactor: 스크린 범위 컴포넌트화

#1 by @hobak12
dypark26 · Jan 12, 2023 · e45a0a5 · e45a0a5
1 parent cca0985
commit e45a0a5
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 86 deletions.
diff --git a/src/components/PageContainer.jsx b/src/components/PageContainer.jsx
@@ -0,0 +1,23 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+const PageContainer = ({ children }) => {
+  return <SafeAreaView style={styles.screenArea}>{children}</SafeAreaView>;
+};
+
+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
@@ -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
@@ -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 (
-    <SafeAreaView style={styles.screenArea}>
+    <PageContainer>
       <LoginContainer theme={theme}>
         <ToggleModeButton />
         {/* 이메일 인풋 */}
@@ -97,7 +98,7 @@ const LoginPage = ({ navigation: { navigate } }) => {
           buttonText="회원가입"
         />
       </LoginContainer>
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 
@@ -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
@@ -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 (
-      <SafeAreaView style={styles.screenArea}>
+      <PageContainer>
         <Text>에러 페이지</Text>
         <Text>{error.message}</Text>
-      </SafeAreaView>
+      </PageContainer>
     );
   }
 
   if (isLoading || !initialLoad) {
     return (
-      <SafeAreaView style={styles.screenArea}>
+      <PageContainer>
         <Text>로딩 화면</Text>
-      </SafeAreaView>
+      </PageContainer>
     );
   }
 
   return (
-    <SafeAreaView style={styles.screenArea}>
+    <PageContainer>
       <FlatList
         data={pillList}
         keyExtractor={(item) => item.id}
@@ -54,24 +55,8 @@ const MainPage = () => {
           />
         )}
       />
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 
 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
@@ -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 (
-      <SafeAreaView style={styles.screenArea}>
+      <PageContainer>
         <PageTitle>나의 약관리</PageTitle>
         <View>
           <Text>에러</Text>
           <Text>{error.message}</Text>
         </View>
-      </SafeAreaView>
+      </PageContainer>
     );
   }
 
   // 통신 중
   if (isLoading) {
     return (
-      <SafeAreaView style={styles.screenArea}>
+      <PageContainer>
         <PageTitle>나의 약관리</PageTitle>
         <View>
           <Text>Loading...</Text>
         </View>
-      </SafeAreaView>
+      </PageContainer>
     );
   }
 
   return (
-    <SafeAreaView style={styles.screenArea}>
+    <PageContainer>
       <FlatList
         data={pillList}
         ListHeaderComponent={<PageTitle>나의 약관리</PageTitle>}
@@ -66,7 +67,7 @@ const MyPage = ({ navigation: { navigate } }) => {
           </CustomButtonContainer>
         }
       />
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 
@@ -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
@@ -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 (
-    <SafeAreaView style={styles.screenArea}>
+    <PageContainer>
       <CustomButton
         buttonText="로그아웃"
         onPress={() => navigate('Stacks', { screen: '로그인' })}
       />
       <CustomButton buttonText="다크 모드" />
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 
 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
@@ -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 (
-    <SafeAreaView style={styles.screenArea}>
+    <PageContainer>
       <FormContainer theme={theme}>
         <BackToLoginPageButton onPress={() => navigate('로그인')}>
           <FontAwesome
@@ -80,7 +81,7 @@ const SignupPage = ({ navigation: { 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}
           />
           <PasswordShowButton
             onPress={() => setVisiblePassword(!visiblePassword)}
@@ -125,7 +126,7 @@ const SignupPage = ({ navigation: { navigate } }) => {
           <CustomButtonText>회원가입</CustomButtonText>
         </CustomButton>
       </FormContainer>
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 
@@ -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,
-      },
-    }),
-  },
 });
 
 //