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

src/components/ManageList.jsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { COLORS } from '../shared/color';
-import { Alert } 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>
-      <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>
   );
 };
 
@@ -81,4 +83,23 @@ const ButtonGroupContainer = styled.View`
   gap: 16px;
 `;
 
+const styles = StyleSheet.create({
+  list: {
+    ...Platform.select({
+      ios: {
+        shadowColor: '#d0d0d0',
+        shadowOffset: {
+          width: 0,
+          height: 3,
+        },
+        shadowOpacity: 0.29,
+        shadowRadius: 4.65,
+      },
+      android: {
+        elevation: 7,
+      },
+    }),
+  },
+});
+
 export default ManageList;

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 { View, StyleSheet } from 'react-native';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
@@ -10,13 +11,15 @@ const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const mainPageTime = translateTime(objTime);
 
   return (
-    <ToggleListItem 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>
   );
 };
 
@@ -49,4 +52,23 @@ const ToggleListItemTime = styled.Text`
   text-overflow: ellipsis;
 `;
 
+const styles = StyleSheet.create({
+  list: {
+    ...Platform.select({
+      ios: {
+        shadowColor: '#d0d0d0',
+        shadowOffset: {
+          width: 0,
+          height: 3,
+        },
+        shadowOpacity: 0.29,
+        shadowRadius: 4.65,
+      },
+      android: {
+        elevation: 7,
+      },
+    }),
+  },
+});
+
 export default ToggleList;

src/screen/SettingPage.jsx

@@ -1,16 +1,23 @@
-import { CustomButton } from '../components';
-import { PageContainer } from '../components/index';
+import { CustomButton, PageContainer } from '../components/';
+import styled from '@emotion/native';
 
 const SettingPage = ({ navigation: { navigate } }) => {
   return (
     <PageContainer>
-      <CustomButton
-        buttonText="로그아웃"
-        onPress={() => navigate('Stacks', { screen: '로그인' })}
-      />
-      <CustomButton buttonText="다크 모드" />
+      <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;
+`;