Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/dypark26/catchpill into HOTF…
Browse files Browse the repository at this point in the history
…IX/MainListShadow
  • Loading branch information
arch-spatula committed Jan 12, 2023
2 parents 79a4a64 + 0535ee4 commit 727675f
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 7,866 deletions.
22 changes: 22 additions & 0 deletions src/Hooks/useLogin.js
Original file line number Diff line number Diff line change
@@ -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('비밀번호가 틀렸습니다.');
}
},
});
};
15 changes: 15 additions & 0 deletions src/components/GraphicStatus.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand All @@ -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';
Expand All @@ -65,13 +75,17 @@ const GraphicStatus = () => {
color = COLORS.POINT_COLOR_100;
break;
}

//응원글 배열
const supportArr = [
'건강한 습관으로 한 걸음 더!',
'오늘 어제보다 건강해졌어요!',
'에너지 뿜뿜!',
'오늘도 캐치필 하세요~',
'건강한 나를 만들어가요',
];

//배열의 인덱스 랜덤으로 뽑아주기
let pop = Math.floor(Math.random() * supportArr.length);

return (
Expand Down Expand Up @@ -106,6 +120,7 @@ const GraphicStatus = () => {
</View>

<SupportTextContainer style={{ display: message ? 'flex' : 'none' }}>
{/* 랜덤으로 뽑아준 인덱스 이용해서 응원글 랜덤 뽑기 */}
<SupportText>{supportArr[pop]}</SupportText>
</SupportTextContainer>
</Supports>
Expand Down
23 changes: 23 additions & 0 deletions src/components/PageContainer.jsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -12,4 +13,5 @@ export {
GraphicStatus,
CustomButton,
CustomInput,
PageContainer,
};
165 changes: 91 additions & 74 deletions src/screen/EditPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
Button,
Dimensions,
TouchableOpacity,
SafeAreaView,
StyleSheet,
} from 'react-native';
import { useState } from 'react';
import styled from '@emotion/native';
Expand Down Expand Up @@ -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>
);
};

Expand Down Expand Up @@ -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,
},
}),
},
});
7 changes: 4 additions & 3 deletions src/screen/LoginPage.jsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand Down Expand Up @@ -52,7 +53,7 @@ const LoginPage = ({ navigation: { navigate } }) => {
};

return (
<SafeAreaView style={{ flex: 1 }}>
<PageContainer>
<LoginContainer theme={theme}>
<ToggleModeButton />
{/* 이메일 인풋 */}
Expand Down Expand Up @@ -97,7 +98,7 @@ const LoginPage = ({ navigation: { navigate } }) => {
buttonText="회원가입"
/>
</LoginContainer>
</SafeAreaView>
</PageContainer>
);
};

Expand Down
17 changes: 9 additions & 8 deletions src/screen/MainPage.jsx
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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}
Expand All @@ -54,7 +55,7 @@ const MainPage = ({ navigation: { navigate } }) => {
/>
)}
/>
</View>
</PageContainer>
);
};

Expand Down
Loading

0 comments on commit 727675f

Please sign in to comment.