From ebbdba0dac0c65694c18975c5d6debba1ef1a96b Mon Sep 17 00:00:00 2001
From: arch-spatula <shkim516@naver.com>
Date: Thu, 12 Jan 2023 20:58:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=95=88=EB=93=9C=EB=A1=9C=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=20=EA=B7=B8=EB=A6=BC=EC=9E=90=EB=A5=BC=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=20#1=20#2=20#5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ManageList.jsx | 22 ++++++++++++++++++++--
 src/components/ToggleList.jsx | 21 ++++++++++++++++++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
index 37ecf6f..2269d2f 100644
--- 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
index b2d1417..8bb9313 100644
--- 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;