Merge pull request #28 from dypark26/feature/addScroll

design: custom 버튼 반영 및 잔 버그 수정 #1 #3 #5 #15
dypark26 · Jan 12, 2023 · 4261ac6 · 4261ac6
2 parents 685067e + 0494267
commit 4261ac6
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 29 deletions.
diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
@@ -119,9 +119,9 @@ const GraphicStatus = () => {
 export default GraphicStatus;
 
 const GraphicContainer = styled.View`
-  background-color: white;
   align-items: center;
   padding-bottom: 10px;
+  margin: 0 0 12px;
 `;
 
 const Supports = styled.View`

diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -46,6 +46,7 @@ const ToggleListItemTitle = styled.Text`
 const ToggleListItemTime = styled.Text`
   font-size: 16px;
   margin: 0 0 0 16px;
+  text-overflow: ellipsis;
 `;
 
 export default ToggleList;
diff --git a/src/components/index.js b/src/components/index.js
@@ -2,5 +2,14 @@ import ManageList from './ManageList';
 import GraphicStatus from './GraphicStatus';
 import TextButton from './TextButton';
 import ToggleList from './ToggleList';
+import CustomButton from './CustomButton';
+import CustomInput from './CustomInput';
 
-export { ManageList, TextButton, ToggleList, GraphicStatus };
+export {
+  ManageList,
+  TextButton,
+  ToggleList,
+  GraphicStatus,
+  CustomButton,
+  CustomInput,
+};
diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx
@@ -40,16 +40,10 @@ const MainPage = ({ navigation: { navigate } }) => {
 
   return (
     <View>
-      <GraphicStatus />
-      <TouchableOpacity
-        onPress={() => navigate('Stacks', { screen: '로그인' })}
-      >
-        <Text>로그아웃</Text>
-      </TouchableOpacity>
-      {/* GraphicStatus가 들어오는 자리 */}
       <FlatList
         data={pillList}
         keyExtractor={(item) => item.id}
+        ListHeaderComponent={<GraphicStatus />}
         renderItem={({ item: { pillName, id, time, isTaken } }) => (
           <ToggleList
             pillName={pillName}

diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { Text, View, FlatList } from 'react-native';
-import { ManageList } from '../components';
+import { ManageList, CustomButton } from '../components';
 import { useUID } from '../Hooks/useAuth';
 import { useGetPillData } from '../Hooks/usePill';
 
@@ -36,20 +36,6 @@ const MyPage = ({ navigation: { navigate } }) => {
   return (
     <MyPageContainer>
       <PageTitle>나의 약관리</PageTitle>
-      <AddPill
-        onPress={() =>
-          navigate('Stacks', {
-            screen: '수정 페이지',
-            params: {
-              isEdit: false,
-              eachPillName: '',
-              eachTime: JSON.stringify(new Date()),
-            },
-          })
-        }
-      >
-        <Text>약추가</Text>
-      </AddPill>
       <FlatList
         data={pillList}
         keyExtractor={(item) => item.id}
@@ -61,6 +47,24 @@ const MyPage = ({ navigation: { navigate } }) => {
             navigate={navigate}
           />
         )}
+        ListFooterComponent={
+          <CustomButtonContainer>
+            <CustomButton
+              title="Login"
+              onPress={() =>
+                navigate('Stacks', {
+                  screen: '수정 페이지',
+                  params: {
+                    isEdit: false,
+                    eachPillName: '',
+                    eachTime: JSON.stringify(new Date()),
+                  },
+                })
+              }
+              buttonText="새로운 약 추가하기"
+            />
+          </CustomButtonContainer>
+        }
       />
     </MyPageContainer>
   );
@@ -77,11 +81,10 @@ const PageTitle = styled.Text`
   margin: 20px 16px;
 `;
 
-const AddPill = styled.TouchableOpacity`
-  background-color: #f8f8f8;
-  margin: 8px 16px;
-  height: 80px;
-  border-radius: 16px;
+const CustomButtonContainer = styled.View`
+  width: 100%;
+  align-items: center;
+  margin: -8px 0 16px;
 `;
 
 export default MyPage;