fix: 가리는 스크린 없게 고침

ios에는safeAreaView, adroid에는 paddingTop 적용 #1 by @hobak12
dypark26 · Jan 12, 2023 · e6aad9a · e6aad9a
1 parent 6dd00a8
commit e6aad9a
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 111 deletions.
diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
@@ -9,8 +9,11 @@ import ConfettiCannon from 'react-native-confetti-cannon';
 const GraphicStatus = () => {
   const { data: uid } = useUID();
   const { isError, error, isLoading, data: pillList } = useGetPillData(uid);
+
+  //응원글과 먹은 약 상태글 토글하기 위한 state
   const [message, setMessage] = useState(false);
 
+  //메세지 상태 토글 함수
   const toggleSupportMessage = () => {
     setMessage((current) => !current);
   };
@@ -33,18 +36,25 @@ const GraphicStatus = () => {
   }
 
   if (pillList !== undefined) {
+    //배열 길이 = 전체 약 개수
     const totalPillNum = pillList.length;
 
+    //isTaken true인 찾아서 먹은 약 개수 세기
     let isTakenNum = 0;
     for (pill of pillList) {
       if (pill.isTaken === true) {
         isTakenNum += 1;
       }
     }
+
+    //남은 약 = 전체 약 - 먹은약
     const leftPillNum = totalPillNum - isTakenNum;
+
+    // 남은약/전체약 비율 0~1
     const opacity = isTakenNum / totalPillNum;
     let color = '';
 
+    //0~1까지 비율에 따라 투명도 다르게 주기
     switch (true) {
       case opacity == 0:
         color = 'white';
@@ -65,13 +75,17 @@ const GraphicStatus = () => {
         color = COLORS.POINT_COLOR_100;
         break;
     }
+
+    //응원글 배열
     const supportArr = [
       '건강한 습관으로 한 걸음 더!',
       '오늘 어제보다 건강해졌어요!',
       '에너지 뿜뿜!',
       '오늘도 캐치필 하세요~',
       '건강한 나를 만들어가요',
     ];
+
+    //배열의 인덱스 랜덤으로 뽑아주기
     let pop = Math.floor(Math.random() * supportArr.length);
 
     return (
@@ -106,6 +120,7 @@ const GraphicStatus = () => {
           </View>
 
           <SupportTextContainer style={{ display: message ? 'flex' : 'none' }}>
+            {/* 랜덤으로 뽑아준 인덱스 이용해서 응원글 랜덤 뽑기 */}
             <SupportText>{supportArr[pop]}</SupportText>
           </SupportTextContainer>
         </Supports>

diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
@@ -4,6 +4,8 @@ import {
   Button,
   Dimensions,
   TouchableOpacity,
+  SafeAreaView,
+  StyleSheet,
 } from 'react-native';
 import { useState } from 'react';
 import styled from '@emotion/native';
@@ -86,88 +88,93 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
   };
 
   return (
-    <EditPageContainer>
-      {/* page 의 title */}
-      <EditPageTitle>나의 약 정보</EditPageTitle>
-      {/* 수정 폼 */}
-      <EditForm>
-        {/* 약 이름 인풋 */}
-        <PillInfoContainer>
-          <PillInfoTitle>약 이름 :</PillInfoTitle>
-          <PillNameInput
-            defaultValue={eachPillName}
-            placeholder="어떤 약인가요?"
-            value={pillName}
-            onChangeText={setPillName}
-          />
-        </PillInfoContainer>
-        {/* 약 복용시간 타임피커 */}
-        <TouchableOpacity onPress={handleOpenModal}>
+    <SafeAreaView style={styles.screenArea}>
+      <EditPageContainer>
+        {/* page 의 title */}
+        <EditPageTitle>나의 약 정보</EditPageTitle>
+        {/* 수정 폼 */}
+        <EditForm>
+          {/* 약 이름 인풋 */}
           <PillInfoContainer>
-            <PillInfoTitle>복용 시간 :</PillInfoTitle>
-            {/* <TimePicker>{time.toLocaleString()}</TimePicker> */}
+            <PillInfoTitle>약 이름 :</PillInfoTitle>
+            <PillNameInput
+              defaultValue={eachPillName}
+              placeholder="어떤 약인가요?"
+              value={pillName}
+              onChangeText={setPillName}
+            />
+          </PillInfoContainer>
+          {/* 약 복용시간 타임피커 */}
+          <TouchableOpacity onPress={handleOpenModal}>
+            <PillInfoContainer>
+              <PillInfoTitle>복용 시간 :</PillInfoTitle>
+              {/* <TimePicker>{time.toLocaleString()}</TimePicker> */}
+              {isEdit ? (
+                <TimePicker>{localEditTime}</TimePicker>
+              ) : (
+                <TimePicker>{localTime}</TimePicker>
+              )}
+            </PillInfoContainer>
+          </TouchableOpacity>
+          {/* 에디트 폼 버튼 래퍼 */}
+          <CustomButtonWrapper>
+            {/* 약 추가/저장 버튼 */}
             {isEdit ? (
-              <TimePicker>{localEditTime}</TimePicker>
+              <CustomButton
+                onPress={handleEditPill}
+                disabled={!pillName && !time}
+              >
+                <Text>수정</Text>
+              </CustomButton>
             ) : (
-              <TimePicker>{localTime}</TimePicker>
+              <CustomButton
+                onPress={handleAddPill}
+                disabled={!pillName || !time}
+              >
+                <Text>저장</Text>
+              </CustomButton>
             )}
-          </PillInfoContainer>
-        </TouchableOpacity>
-        {/* 에디트 폼 버튼 래퍼 */}
-        <CustomButtonWrapper>
-          {/* 약 추가/저장 버튼 */}
-          {isEdit ? (
+            {/* 취소 / 돌아가기 버튼 */}
             <CustomButton
-              onPress={handleEditPill}
-              disabled={!pillName && !time}
+              onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
             >
-              <Text>수정</Text>
+              <Text>취소</Text>
             </CustomButton>
-          ) : (
-            <CustomButton onPress={handleAddPill} disabled={!pillName || !time}>
-              <Text>저장</Text>
-            </CustomButton>
-          )}
-          {/* 취소 / 돌아가기 버튼 */}
-          <CustomButton
-            onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
-          >
-            <Text>취소</Text>
-          </CustomButton>
-        </CustomButtonWrapper>
-      </EditForm>
-      <Modal visible={isOpenModal} transparent animationType="slide">
-        <Backdrop>
-          <ModalCard>
-            {isEdit ? (
-              <DateTimePicker
-                testID="dateTimePicker"
-                value={editTime}
-                mode={'time'}
-                is24Hour={true}
-                display="spinner"
-                onChange={onChangeEditTime}
+          </CustomButtonWrapper>
+        </EditForm>
+        <Modal visible={isOpenModal} transparent animationType="slide">
+          <Backdrop>
+            <ModalCard>
+              {isEdit ? (
+                <DateTimePicker
+                  testID="dateTimePicker"
+                  value={editTime}
+                  mode={'time'}
+                  is24Hour={true}
+                  display="spinner"
+                  onChange={onChangeEditTime}
+                />
+              ) : (
+                <DateTimePicker
+                  testID="dateTimePicker"
+                  value={time}
+                  mode={'time'}
+                  is24Hour={true}
+                  display="spinner"
+                  onChange={onChangeTime}
+                />
+              )}
+              <Button
+                title="확인"
+                onPress={() => {
+                  setIsOpenModal(false);
+                }}
               />
-            ) : (
-              <DateTimePicker
-                testID="dateTimePicker"
-                value={time}
-                mode={'time'}
-                is24Hour={true}
-                display="spinner"
-                onChange={onChangeTime}
-              />
-            )}
-            <Button
-              title="확인"
-              onPress={() => {
-                setIsOpenModal(false);
-              }}
-            />
-          </ModalCard>
-        </Backdrop>
-      </Modal>
-    </EditPageContainer>
+            </ModalCard>
+          </Backdrop>
+        </Modal>
+      </EditPageContainer>
+    </SafeAreaView>
   );
 };
 
@@ -244,3 +251,13 @@ const ModalCard = styled.KeyboardAvoidingView`
   box-shadow: 0px 0px 8px rgba(202, 202, 202, 0.23);
   background-color: white;
 `;
+
+const styles = StyleSheet.create({
+  screenArea: {
+    ...Platform.select({
+      android: {
+        paddingTop: 20,
+      },
+    }),
+  },
+});
diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx
@@ -1,4 +1,4 @@
-import { SafeAreaView, Text, TextInput } from 'react-native';
+import { SafeAreaView, Text, TextInput, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import { useState } from 'react';
 import { auth } from '../shared/firebase';
@@ -28,7 +28,7 @@ const LoginPage = ({ navigation: { navigate } }) => {
     }
   };
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={styles.screenArea}>
       <LoginContainer>
         {/* 이메일 인풋 */}
         <CustomInput
@@ -73,3 +73,17 @@ const LoginContainer = styled.View`
   flex: 1;
   background-color: #fff;
 `;
+
+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,11 +1,11 @@
 import { GraphicStatus } from '../components/index';
-import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import { Text, FlatList, SafeAreaView, StyleSheet } from 'react-native';
 import { useUID } from '../Hooks/useAuth';
 import { useGetPillData } from '../Hooks/usePill';
 import { ToggleList } from '../components';
 import { useEffect, useState } from 'react';
 
-const MainPage = ({ navigation: { navigate } }) => {
+const MainPage = () => {
   const { data: uid } = useUID();
   const { isError, error, isLoading, data: pillList } = useGetPillData(uid);
 
@@ -23,23 +23,23 @@ const MainPage = ({ navigation: { navigate } }) => {
 
   if (isError) {
     return (
-      <View>
+      <SafeAreaView style={styles.screenArea}>
         <Text>에러 페이지</Text>
         <Text>{error.message}</Text>
-      </View>
+      </SafeAreaView>
     );
   }
 
   if (isLoading || !initialLoad) {
     return (
-      <View>
+      <SafeAreaView style={styles.screenArea}>
         <Text>로딩 화면</Text>
-      </View>
+      </SafeAreaView>
     );
   }
 
   return (
-    <View>
+    <SafeAreaView style={styles.screenArea}>
       <FlatList
         data={pillList}
         keyExtractor={(item) => item.id}
@@ -54,8 +54,18 @@ const MainPage = ({ navigation: { navigate } }) => {
           />
         )}
       />
-    </View>
+    </SafeAreaView>
   );
 };
 
 export default MainPage;
+
+const styles = StyleSheet.create({
+  screenArea: {
+    ...Platform.select({
+      android: {
+        paddingTop: 30,
+      },
+    }),
+  },
+});