diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx index 37ecf6f..114a842 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 { 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 ( - - {pillName} - - - navigate('Stacks', { - screen: '수정 페이지', - params: { - id: id, - isEdit: true, - eachPillName: pillName, - eachTime: time, - }, - }) - } - /> - handleDeletePill(id)} - /> - - + + + {pillName} + + + navigate('Stacks', { + screen: '수정 페이지', + params: { + id: id, + isEdit: true, + eachPillName: pillName, + eachTime: time, + }, + }) + } + /> + handleDeletePill(id)} + /> + + + ); }; @@ -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; diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx index b2d1417..7014f8a 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 { 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 ( - - - {pillName} - {mainPageTime} - - - + + + + {pillName} + {mainPageTime} + + + + ); }; @@ -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; diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx index 7db0914..98b0c4e 100644 --- a/src/screen/SettingPage.jsx +++ b/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 ( - navigate('Stacks', { screen: '로그인' })} - /> - + + navigate('Stacks', { screen: '로그인' })} + /> + + ); }; export default SettingPage; + +const CustomButtonWrapper = styled.View` + margin: -8px 16px 0px; +`;