Merge pull request #34 from dypark26/feature/fix-screen-area

fix: 가리는 스크린 없게 고침
dypark26 · Jan 12, 2023 · 0535ee4 · 0535ee4
2 parents 57eb2b9 + c051261
commit 0535ee4
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 7,873 deletions.
diff --git a/src/Hooks/useLogin.js b/src/Hooks/useLogin.js
@@ -0,0 +1,22 @@
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { Keyboard } from 'react-native';
+import { useMutation } from 'react-query';
+import { auth } from '../shared/firebase';
+
+export const SignIn = async (payload) => {
+  const { email, password } = payload;
+  Keyboard.dismiss(); // 버튼 클릭 시 키보드 접기
+  return signInWithEmailAndPassword(auth, email, password);
+};
+export const useSignIn = () => {
+  return useMutation(SignIn, {
+    onError: (error) => {
+      if (error.message.includes('user-not-found')) {
+        alert('회원이 아닙니다. 회원가입을 먼저 진행해 주세요.');
+      } //비밀번호가 틀리면 아래 alert출력
+      if (error.message.includes('wrong-password')) {
+        alert('비밀번호가 틀렸습니다.');
+      }
+    },
+  });
+};
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/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/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,87 +88,92 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
   };
 
   return (
-    <EditPageContainer>
-      <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>
-            {isEdit ? (
-              <TimePicker>{localEditTime}</TimePicker>
-            ) : (
-              <TimePicker>{localTime}</TimePicker>
-            )}
-          </PillInfoContainer>
-        </TouchableOpacity>
-        {/* 에디트 폼 버튼 래퍼 */}
-        <CustomButtonWrapper>
-          {/* 약 추가/저장 버튼 */}
-          {isEdit ? (
-            <CustomButton
-              onPress={handleEditPill}
-              disabled={!pillName && !edited}
-              buttonText="수정"
-            />
-          ) : (
-            <CustomButton
-              onPress={handleAddPill}
-              disabled={!pillName || !time}
-              buttonText="저장"
+            <PillInfoTitle>약 이름 :</PillInfoTitle>
+            <PillNameInput
+              defaultValue={eachPillName}
+              placeholder="어떤 약인가요?"
+              value={pillName}
+              onChangeText={setPillName}
             />
-          )}
-          {/* 취소 / 돌아가기 버튼 */}
-          <CustomButton
-            onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
-            buttonText="취소"
-          >
-            <Text>취소</Text>
-          </CustomButton>
-        </CustomButtonWrapper>
-      </EditForm>
-      <Modal visible={isOpenModal} transparent animationType="slide">
-        <Backdrop>
-          <ModalCard>
+          </PillInfoContainer>
+          {/* 약 복용시간 타임피커 */}
+          <TouchableOpacity onPress={handleOpenModal}>
+            <PillInfoContainer>
+              <PillInfoTitle>복용 시간 :</PillInfoTitle>
+              {isEdit ? (
+                <TimePicker>{localEditTime}</TimePicker>
+              ) : (
+                <TimePicker>{localTime}</TimePicker>
+              )}
+            </PillInfoContainer>
+          </TouchableOpacity>
+          {/* 에디트 폼 버튼 래퍼 */}
+          <CustomButtonWrapper>
+            {/* 약 추가/저장 버튼 */}
             {isEdit ? (
-              <DateTimePicker
-                testID="dateTimePicker"
-                value={editTime}
-                mode={'time'}
-                is24Hour={true}
-                display="spinner"
-                onChange={onChangeEditTime}
+              <CustomButton
+                onPress={handleEditPill}
+                disabled={!pillName && !edited}
+                buttonText="수정"
               />
             ) : (
-              <DateTimePicker
-                testID="dateTimePicker"
-                value={time}
-                mode={'time'}
-                is24Hour={true}
-                display="spinner"
-                onChange={onChangeTime}
+              <CustomButton
+                onPress={handleAddPill}
+                disabled={!pillName || !time}
+                buttonText="저장"
               />
             )}
-            <Button
-              title="확인"
-              onPress={() => {
-                setIsOpenModal(false);
-              }}
-            />
-          </ModalCard>
-        </Backdrop>
-      </Modal>
-    </EditPageContainer>
+            {/* 취소 / 돌아가기 버튼 */}
+            <CustomButton
+              title="delete"
+              onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
+              buttonText="취소"
+            >
+              <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}
+                />
+              ) : (
+                <DateTimePicker
+                  testID="dateTimePicker"
+                  value={time}
+                  mode={'time'}
+                  is24Hour={true}
+                  display="spinner"
+                  onChange={onChangeTime}
+                />
+              )}
+              <Button
+                title="확인"
+                onPress={() => {
+                  setIsOpenModal(false);
+                }}
+              />
+            </ModalCard>
+          </Backdrop>
+        </Modal>
+      </EditPageContainer>
+    </SafeAreaView>
   );
 };
 
@@ -237,3 +244,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, useContext } from 'react';
 import { COLORS } from '../shared/color';
@@ -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={{ flex: 1 }}>
+    <PageContainer>
       <LoginContainer theme={theme}>
         <ToggleModeButton />
         {/* 이메일 인풋 */}
@@ -97,7 +98,7 @@ const LoginPage = ({ navigation: { navigate } }) => {
           buttonText="회원가입"
         />
       </LoginContainer>
-    </SafeAreaView>
+    </PageContainer>
   );
 };
 

diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx
@@ -1,11 +1,12 @@
 import { GraphicStatus } from '../components/index';
-import { View, Text, TouchableOpacity, FlatList } 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 = ({ navigation: { navigate } }) => {
+const MainPage = () => {
   const { data: uid } = useUID();
   const { isError, error, isLoading, data: pillList } = useGetPillData(uid);
 
@@ -23,23 +24,23 @@ const MainPage = ({ navigation: { navigate } }) => {
 
   if (isError) {
     return (
-      <View>
+      <PageContainer>
         <Text>에러 페이지</Text>
         <Text>{error.message}</Text>
-      </View>
+      </PageContainer>
     );
   }
 
   if (isLoading || !initialLoad) {
     return (
-      <View>
+      <PageContainer>
         <Text>로딩 화면</Text>
-      </View>
+      </PageContainer>
     );
   }
 
   return (
-    <View>
+    <PageContainer>
       <FlatList
         data={pillList}
         keyExtractor={(item) => item.id}
@@ -54,7 +55,7 @@ const MainPage = ({ navigation: { navigate } }) => {
           />
         )}
       />
-    </View>
+    </PageContainer>
   );
 };