diff --git a/src/Hooks/useLogin.js b/src/Hooks/useLogin.js new file mode 100644 index 0000000..10588fd --- /dev/null +++ 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 index 14241cf..d9019da 100644 --- 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,6 +75,8 @@ const GraphicStatus = () => { color = COLORS.POINT_COLOR_100; break; } + + //응원글 배열 const supportArr = [ '건강한 습관으로 한 걸음 더!', '오늘 어제보다 건강해졌어요!', @@ -72,6 +84,8 @@ const GraphicStatus = () => { '오늘도 캐치필 하세요~', '건강한 나를 만들어가요', ]; + + //배열의 인덱스 랜덤으로 뽑아주기 let pop = Math.floor(Math.random() * supportArr.length); return ( @@ -106,6 +120,7 @@ const GraphicStatus = () => { + {/* 랜덤으로 뽑아준 인덱스 이용해서 응원글 랜덤 뽑기 */} {supportArr[pop]} 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/EditPage.jsx b/src/screen/EditPage.jsx index 69c1500..3f029f3 100644 --- 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 ( - - 나의 약 정보 - - {/* 약 이름 인풋 */} - - 약 이름 : - - - {/* 약 복용시간 타임피커 */} - + + + {/* page 의 title */} + 나의 약 정보 + {/* 수정 폼 */} + + {/* 약 이름 인풋 */} - 복용 시간 : - {isEdit ? ( - {localEditTime} - ) : ( - {localTime} - )} - - - {/* 에디트 폼 버튼 래퍼 */} - - {/* 약 추가/저장 버튼 */} - {isEdit ? ( - - ) : ( - 약 이름 : + - )} - {/* 취소 / 돌아가기 버튼 */} - navigate('Tabs', { screen: '마이 페이지' })} - buttonText="취소" - > - 취소 - - - - - - + + {/* 약 복용시간 타임피커 */} + + + 복용 시간 : + {isEdit ? ( + {localEditTime} + ) : ( + {localTime} + )} + + + {/* 에디트 폼 버튼 래퍼 */} + + {/* 약 추가/저장 버튼 */} {isEdit ? ( - ) : ( - )} -