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/screen/EditPage.jsx b/src/screen/EditPage.jsx
index ecb3bf6..27d7478 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,88 +88,93 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
};
return (
-
- {/* page 의 title */}
- 나의 약 정보
- {/* 수정 폼 */}
-
- {/* 약 이름 인풋 */}
-
- 약 이름 :
-
-
- {/* 약 복용시간 타임피커 */}
-
+
+
+ {/* page 의 title */}
+ 나의 약 정보
+ {/* 수정 폼 */}
+
+ {/* 약 이름 인풋 */}
- 복용 시간 :
- {/* {time.toLocaleString()} */}
+ 약 이름 :
+
+
+ {/* 약 복용시간 타임피커 */}
+
+
+ 복용 시간 :
+ {/* {time.toLocaleString()} */}
+ {isEdit ? (
+ {localEditTime}
+ ) : (
+ {localTime}
+ )}
+
+
+ {/* 에디트 폼 버튼 래퍼 */}
+
+ {/* 약 추가/저장 버튼 */}
{isEdit ? (
- {localEditTime}
+
+ 수정
+
) : (
- {localTime}
+
+ 저장
+
)}
-
-
- {/* 에디트 폼 버튼 래퍼 */}
-
- {/* 약 추가/저장 버튼 */}
- {isEdit ? (
+ {/* 취소 / 돌아가기 버튼 */}
navigate('Tabs', { screen: '마이 페이지' })}
>
- 수정
+ 취소
- ) : (
-
- 저장
-
- )}
- {/* 취소 / 돌아가기 버튼 */}
- navigate('Tabs', { screen: '마이 페이지' })}
- >
- 취소
-
-
-
-
-
-
- {isEdit ? (
-
+
+
+
+
+ {isEdit ? (
+
+ ) : (
+
+ )}
+
-
-
-
+
+
+
+
+
);
};
@@ -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
index 65bea82..d8b9da0 100644
--- 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 (
-
+
{/* 이메일 인풋 */}
{
+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 (
-
+
에러 페이지
{error.message}
-
+
);
}
if (isLoading || !initialLoad) {
return (
-
+
로딩 화면
-
+
);
}
return (
-
+
item.id}
@@ -54,8 +54,18 @@ const MainPage = ({ navigation: { navigate } }) => {
/>
)}
/>
-
+
);
};
export default MainPage;
+
+const styles = StyleSheet.create({
+ screenArea: {
+ ...Platform.select({
+ android: {
+ paddingTop: 30,
+ },
+ }),
+ },
+});
diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
index 9f82605..88e504a 100644
--- a/src/screen/MyPage.jsx
+++ b/src/screen/MyPage.jsx
@@ -1,5 +1,5 @@
import styled from '@emotion/native';
-import { Text, View, FlatList } from 'react-native';
+import { Text, View, FlatList, StyleSheet, SafeAreaView } from 'react-native';
import { ManageList, CustomButton } from '../components';
import { useUID } from '../Hooks/useAuth';
import { useGetPillData } from '../Hooks/usePill';
@@ -11,30 +11,34 @@ const MyPage = ({ navigation: { navigate } }) => {
// 에러 핸들링: 통신 실패의 경우 보여주는 화면입니다.
if (isError) {
return (
-
- 나의 약관리
-
- 에러
- {error.message}
-
-
+
+
+ 나의 약관리
+
+ 에러
+ {error.message}
+
+
+
);
}
// 통신 중
if (isLoading) {
return (
-
- 나의 약관리
-
- Loading...
-
-
+
+
+ 나의 약관리
+
+ Loading...
+
+
+
);
}
return (
-
+
나의 약관리
{
}
/>
-
+
);
};
-const MyPageContainer = styled.SafeAreaView`
- flex: 1;
-`;
-
const PageTitle = styled.Text`
font-size: 36px;
font-weight: 700;
@@ -87,4 +87,18 @@ const CustomButtonContainer = styled.View`
margin: -8px 0 16px;
`;
+const styles = StyleSheet.create({
+ screenArea: {
+ ...Platform.select({
+ ios: {
+ flex: 1,
+ },
+ android: {
+ flex: 1,
+ paddingTop: 20,
+ },
+ }),
+ },
+});
+
export default MyPage;
diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx
index 0f26240..79a7024 100644
--- a/src/screen/SettingPage.jsx
+++ b/src/screen/SettingPage.jsx
@@ -1,13 +1,27 @@
import { TextButton } from '../components';
-import { View } from 'react-native';
+import { View, SafeAreaView, StyleSheet } from 'react-native';
-const SettingPage = () => {
+const SettingPage = ({ navigation: { navigate } }) => {
return (
-
-
+
+ navigate('Stacks', { screen: '로그인' })}
+ />
-
+
);
};
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
index 1e260f0..3734b29 100644
--- a/src/screen/SignupPage.jsx
+++ b/src/screen/SignupPage.jsx
@@ -61,13 +61,13 @@ const SignupPage = ({ navigation: { navigate } }) => {
};
return (
-
+
navigate('로그인')}>
@@ -209,6 +209,13 @@ const styles = StyleSheet.create({
},
}),
},
+ screenArea: {
+ ...Platform.select({
+ android: {
+ paddingTop: 20,
+ },
+ }),
+ },
});
//