fix: 안드로이드 그림자를 반영 #1 #2 #5

dypark26 · Jan 12, 2023 · ebbdba0 · ebbdba0
1 parent 57eb2b9
commit ebbdba0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 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 } from 'react-native';
+import { Alert, StyleSheet } from 'react-native';
 import { useDeletePillData } from '../Hooks/usePill';
 import TextButton from './TextButton';
 
@@ -28,7 +28,7 @@ const ManageList = ({ id, pillName, time, navigate }) => {
   };
 
   return (
-    <ManageListContainer>
+    <ManageListContainer style={styles.list}>
       <ManageListTitle>{pillName}</ManageListTitle>
       <ButtonGroupContainer>
         <TextButton
@@ -81,4 +81,22 @@ const ButtonGroupContainer = styled.View`
   gap: 16px;
 `;
 
+const styles = StyleSheet.create({
+  list: {
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.23,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+});
+
 export default ManageList;
diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -2,6 +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';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
@@ -10,7 +11,7 @@ const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const mainPageTime = translateTime(objTime);
 
   return (
-    <ToggleListItem isTaken={isTaken}>
+    <ToggleListItem style={styles.list} isTaken={isTaken}>
       <ToggleListItemTextContainer>
         <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
         <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
@@ -49,4 +50,22 @@ const ToggleListItemTime = styled.Text`
   text-overflow: ellipsis;
 `;
 
+const styles = StyleSheet.create({
+  list: {
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.23,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+});
+
 export default ToggleList;