Merge branch 'dev' of https://github.com/dypark26/catchpill into feat…

…ure/sortByTime
dypark26 · Jan 12, 2023 · 3262315 · 3262315
2 parents 5b18aa1 + d689254
commit 3262315
Show file tree

Hide file tree

Showing 11 changed files with 16,540 additions and 709 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,10 @@
   "dependencies": {
     "@emotion/native": "^11.10.0",
     "@emotion/react": "^11.10.5",
-    "@react-navigation/bottom-tabs": "^6.5.2",
-    "@react-navigation/native-stack": "^6.9.7",
+    "@react-native-community/datetimepicker": "6.5.2",
+    "@react-navigation/bottom-tabs": "^6.5.3",
+    "@react-navigation/native": "^6.1.2",
+    "@react-navigation/native-stack": "^6.9.8",
     "axios": "^1.2.2",
     "expo": "~47.0.9",
     "expo-status-bar": "~1.4.2",
@@ -21,6 +23,7 @@
     "react": "18.1.0",
     "react-native": "0.70.5",
     "react-native-confetti-cannon": "^1.5.2",
+    "react-native-date-picker": "^4.2.6",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
     "react-query": "^3.39.2"

diff --git a/src/Hooks/usePill.js b/src/Hooks/usePill.js
@@ -41,7 +41,6 @@ export const useAddPillData = () => {
       queryClient.setQueryData(['pill-list'], (old) => {
         return { ...old, docs: [...old.docs, { data: () => newPill }] };
       });
-
       // snapshot 한 값을 context 내부 값으로 반환합니다.
       return { previousPillList };
     },
@@ -54,6 +53,7 @@ export const useAddPillData = () => {
     // 성공이든 실패든 끝나면 항상 리패치합니다.
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['pill-list'] });
+      console.log('성공');
     },
   });
 };

diff --git a/src/components/CustomInput.jsx b/src/components/CustomInput.jsx
@@ -19,7 +19,7 @@ const CustomInput = ({
 }) => {
   return (
     <>
-      <CustonInputTitle>{title}</CustonInputTitle>;
+      <CustomInputTitle>{title}</CustomInputTitle>
       <CustomInputStyle
         type={type}
         keyboardType={keyboardType}
@@ -43,9 +43,10 @@ const CustomInputStyle = styled.TextInput`
   padding: 10px 20px;
   border-radius: 10px;
   font-size: 20px;
+  background-color: white;
 `;
 //로그인타이틀CSS
-const CustonInputTitle = styled.Text`
+const CustomInputTitle = styled.Text`
   font-size: 28px;
   margin: 16px 0 10px 0;
 `;

diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
@@ -86,19 +86,25 @@ const GraphicStatus = () => {
           </TouchableOpacity>
           <View style={{ display: message ? 'none' : 'flex' }}>
             {opacity === 0 ? (
-              <SupportText>아직 하나도 먹지 않았어요!</SupportText>
+              <SupportTextContainer>
+                <SupportText>아직 하나도 먹지 않았어요!</SupportText>
+              </SupportTextContainer>
             ) : opacity === 1 ? (
-              <SupportText>축하합니다! 캐치필 달성!</SupportText>
+              <SupportTextContainer>
+                <SupportText>축하합니다! 캐치필 달성!</SupportText>
+              </SupportTextContainer>
             ) : (
-              <SupportText>
-                와! 벌써 <TakenPill>{isTakenNum}</TakenPill>개나 드셨네요!
-              </SupportText>
+              <SupportTextContainer>
+                <SupportText>
+                  와! 벌써 <TakenPill>{isTakenNum}</TakenPill>개나 드셨네요!
+                </SupportText>
+              </SupportTextContainer>
             )}
           </View>
 
-          <SupportText style={{ display: message ? 'flex' : 'none' }}>
-            {supportArr[pop]}
-          </SupportText>
+          <SupportTextContainer style={{ display: message ? 'flex' : 'none' }}>
+            <SupportText>{supportArr[pop]}</SupportText>
+          </SupportTextContainer>
         </Supports>
         <LeftPill style={{ backgroundColor: color }}>
           <LeftpillText1>남은 약:</LeftpillText1>
@@ -120,21 +126,24 @@ const GraphicContainer = styled.View`
 
 const Supports = styled.View`
   flex-direction: row;
+  margin-top: 20px;
 `;
 const SupportEmoji = styled.Text`
   font-size: 35px;
   position: absolute;
   left: -50px;
 `;
-
-const SupportText = styled.Text`
-  text-align: center;
-
+const SupportTextContainer = styled.View`
   width: 280px;
   padding: 10px;
   background-color: lightgrey;
   border-radius: 22px;
   font-size: 20px;
+  overflow: hidden;
+`;
+
+const SupportText = styled.Text`
+  text-align: center;
 `;
 
 const TakenPill = styled.Text`
@@ -143,27 +152,28 @@ const TakenPill = styled.Text`
 
 const LeftPill = styled.View`
   margin-top: 15px;
-
   border-radius: 100px;
   width: 200px;
   height: 200px;
+  position: relative;
 `;
 
 const LeftpillText1 = styled.Text`
   font-size: 20px;
   font-weight: 400;
-  top: 20px;
-  left: 60px;
+  text-align: center;
+  top: 10%;
 `;
 const LeftpillText2 = styled.Text`
   font-size: 80px;
   font-weight: 600;
-  top: 20px;
-  left: 75px;
+  top: 15%;
+  text-align: center;
 `;
-
 const LeftpillText3 = styled.Text`
   font-size: 50px;
   font-weight: 300;
-  left: 170px;
+  position: absolute;
+  bottom: 0;
+  right: -15%;
 `;
diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -1,16 +1,19 @@
 import { COLORS } from '../shared/color';
 import styled from '@emotion/native';
 import ToggleButton from './ToggleButton';
+import { strToObjTime, translateTime } from '../utils/transTime';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const togglePayload = { pillName, time, isTaken, uid };
+  const objTime = strToObjTime(time);
+  const mainPageTime = translateTime(objTime);
 
   return (
     <ToggleListItem isTaken={isTaken}>
       <ToggleListItemTextContainer>
         <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
-        <ToggleListItemTime>{time}</ToggleListItemTime>
+        <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
       </ToggleListItemTextContainer>
       <ToggleButton id={id} togglePayload={togglePayload} />
     </ToggleListItem>