fix: 리스트 컴포넌트 안드로이드 그림자 추가 재시도 #1 #2 #5

dypark26 · Jan 12, 2023 · 79a4a64 · 79a4a64
1 parent ebbdba0
commit 79a4a64
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 51 deletions.
diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { COLORS } from '../shared/color';
-import { Alert, StyleSheet } from 'react-native';
+import { View, Alert, StyleSheet } from 'react-native';
 import { useDeletePillData } from '../Hooks/usePill';
 import TextButton from './TextButton';
 
@@ -28,33 +28,35 @@ const ManageList = ({ id, pillName, time, navigate }) => {
   };
 
   return (
-    <ManageListContainer style={styles.list}>
-      <ManageListTitle>{pillName}</ManageListTitle>
-      <ButtonGroupContainer>
-        <TextButton
-          // 클릭하면 페이지 이동
-          buttonColor={COLORS.BLACK}
-          buttonText="편집"
-          onPress={() =>
-            navigate('Stacks', {
-              screen: '수정 페이지',
-              params: {
-                id: id,
-                isEdit: true,
-                eachPillName: pillName,
-                eachTime: time,
-              },
-            })
-          }
-        />
-        <TextButton
-          // 클릭하면 alert()
-          buttonColor={COLORS.DANGER}
-          buttonText="삭제"
-          onPress={() => handleDeletePill(id)}
-        />
-      </ButtonGroupContainer>
-    </ManageListContainer>
+    <View style={styles.list}>
+      <ManageListContainer style={styles.list}>
+        <ManageListTitle>{pillName}</ManageListTitle>
+        <ButtonGroupContainer>
+          <TextButton
+            // 클릭하면 페이지 이동
+            buttonColor={COLORS.BLACK}
+            buttonText="편집"
+            onPress={() =>
+              navigate('Stacks', {
+                screen: '수정 페이지',
+                params: {
+                  id: id,
+                  isEdit: true,
+                  eachPillName: pillName,
+                  eachTime: time,
+                },
+              })
+            }
+          />
+          <TextButton
+            // 클릭하면 alert()
+            buttonColor={COLORS.DANGER}
+            buttonText="삭제"
+            onPress={() => handleDeletePill(id)}
+          />
+        </ButtonGroupContainer>
+      </ManageListContainer>
+    </View>
   );
 };
 
@@ -85,15 +87,16 @@ const styles = StyleSheet.create({
   list: {
     ...Platform.select({
       ios: {
-        shadowColor: '#000',
+        shadowColor: '#d0d0d0',
         shadowOffset: {
           width: 0,
-          height: 2,
+          height: 3,
         },
-        shadowOpacity: 0.23,
+        shadowOpacity: 0.29,
+        shadowRadius: 4.65,
       },
       android: {
-        elevation: 4,
+        elevation: 7,
       },
     }),
   },

diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -2,7 +2,7 @@ import { COLORS } from '../shared/color';
 import styled from '@emotion/native';
 import ToggleButton from './ToggleButton';
 import { strToObjTime, translateTime } from '../utils/transTime';
-import { StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
@@ -11,13 +11,15 @@ const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const mainPageTime = translateTime(objTime);
 
   return (
-    <ToggleListItem style={styles.list} isTaken={isTaken}>
-      <ToggleListItemTextContainer>
-        <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
-        <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
-      </ToggleListItemTextContainer>
-      <ToggleButton id={id} togglePayload={togglePayload} />
-    </ToggleListItem>
+    <View style={styles.list}>
+      <ToggleListItem isTaken={isTaken}>
+        <ToggleListItemTextContainer>
+          <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
+          <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
+        </ToggleListItemTextContainer>
+        <ToggleButton id={id} togglePayload={togglePayload} />
+      </ToggleListItem>
+    </View>
   );
 };
 
@@ -54,15 +56,16 @@ const styles = StyleSheet.create({
   list: {
     ...Platform.select({
       ios: {
-        shadowColor: '#000',
+        shadowColor: '#d0d0d0',
         shadowOffset: {
           width: 0,
-          height: 2,
+          height: 3,
         },
-        shadowOpacity: 0.23,
+        shadowOpacity: 0.29,
+        shadowRadius: 4.65,
       },
       android: {
-        elevation: 4,
+        elevation: 7,
       },
     }),
   },

diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx
@@ -1,13 +1,24 @@
-import { TextButton } from '../components';
-import { View } from 'react-native';
+import { CustomButton } from '../components';
+import { PageContainer } from '../components/index';
+import styled from '@emotion/native';
 
-const SettingPage = () => {
+const SettingPage = ({ navigation: { navigate } }) => {
   return (
-    <View>
-      <TextButton buttonColor="aqua" buttonText="로그아웃" />
-      <TextButton buttonColor="aqua" buttonText="다크 모드" />
-    </View>
+    <PageContainer>
+      <CustomButtonWrapper>
+        <CustomButton
+          title="Login"
+          buttonText="로그아웃"
+          onPress={() => navigate('Stacks', { screen: '로그인' })}
+        />
+        <CustomButton title="Login" buttonText="다크 모드" />
+      </CustomButtonWrapper>
+    </PageContainer>
   );
 };
 
 export default SettingPage;
+
+const CustomButtonWrapper = styled.View`
+  margin: -8px 16px 0px;
+`;