Merge pull request #35 from dypark26/feature/apply-customs

design: 커스텀 버튼, 인풋 적용 및 CSS 수정
dypark26 · Jan 12, 2023 · 32c0727 · 32c0727
2 parents fde0a4b + 04eac43
commit 32c0727
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/src/components/CustomButton.jsx b/src/components/CustomButton.jsx
@@ -19,8 +19,8 @@ const CustomButton = ({ onPress, buttonText, disabled, title }) => {
 const CustomTotalButton = styled.TouchableOpacity`
   width: ${(props) =>
     props.title == 'Login'
-      ? SCREEN_WIDTH - 40 + 'px'
-      : SCREEN_WIDTH / 2.3 + 'px'};
+      ? SCREEN_WIDTH - 32 + 'px'
+      : (SCREEN_WIDTH - 48) / 2 + 'px'};
   align-items: center;
   justify-content: center;
   height: 80px;
@@ -31,8 +31,10 @@ const CustomTotalButton = styled.TouchableOpacity`
       ? COLORS.POINT_COLOR_40
       : COLORS.POINT_COLOR_100};
   //title이 delete면 회색, disabled이 활성화됐으면 연한색,아니라면 진한색 출력
-  border-radius: 10px;
+  border-radius: 16px;
   margin-top: 15px;
+  margin-right: ${(props) =>
+    props.buttonText == '수정' || '저장' ? '16px' : '0px'};
 `;
 
 //버튼 텍스트 CSS

diff --git a/src/components/CustomInput.jsx b/src/components/CustomInput.jsx
@@ -41,7 +41,7 @@ const CustomInputStyle = styled.TextInput`
   border-color: ${COLORS.CANCEL};
   height: 80px;
   padding: 10px 20px;
-  border-radius: 10px;
+  border-radius: 16px;
   font-size: 20px;
   background-color: white;
 `;

diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
@@ -12,6 +12,7 @@ import { COLORS } from '../shared/color';
 import { useUID } from '../Hooks/useAuth';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { strToObjTime, translateTime } from '../utils/transTime';
+import { CustomButton } from '../components';
 
 const EditPage = ({ navigation: { navigate }, route: { params } }) => {
   // '편집'에서 EditPage 들어오면
@@ -87,9 +88,7 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
 
   return (
     <EditPageContainer>
-      {/* page 의 title */}
       <EditPageTitle>나의 약 정보</EditPageTitle>
-      {/* 수정 폼 */}
       <EditForm>
         {/* 약 이름 인풋 */}
         <PillInfoContainer>
@@ -105,7 +104,6 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
         <TouchableOpacity onPress={handleOpenModal}>
           <PillInfoContainer>
             <PillInfoTitle>복용 시간 :</PillInfoTitle>
-            {/* <TimePicker>{time.toLocaleString()}</TimePicker> */}
             {isEdit ? (
               <TimePicker>{localEditTime}</TimePicker>
             ) : (
@@ -119,18 +117,20 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
           {isEdit ? (
             <CustomButton
               onPress={handleEditPill}
-              disabled={!pillName && !time}
-            >
-              <Text>수정</Text>
-            </CustomButton>
+              disabled={!pillName && eachTimeObject}
+              buttonText="수정"
+            />
           ) : (
-            <CustomButton onPress={handleAddPill} disabled={!pillName || !time}>
-              <Text>저장</Text>
-            </CustomButton>
+            <CustomButton
+              onPress={handleAddPill}
+              disabled={!pillName || !time}
+              buttonText="저장"
+            />
           )}
           {/* 취소 / 돌아가기 버튼 */}
           <CustomButton
             onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
+            buttonText="취소"
           >
             <Text>취소</Text>
           </CustomButton>
@@ -176,14 +176,16 @@ export default EditPage;
 // 로컬 디바이스 화면크기 가져오기
 const windowHeight = Dimensions.get('window').height;
 
-const EditPageContainer = styled.View`
+const EditPageContainer = styled.SafeAreaView`
   flex: 1;
-  height: ${windowHeight};
+  background-color: white;
 `;
 
 const EditPageTitle = styled.Text`
   font-size: 36px;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: 40px;
+  margin: 20px 16px;
 `;
 
 const EditForm = styled.View``;
@@ -218,15 +220,7 @@ const PillInfoTitle = styled.Text`
 const CustomButtonWrapper = styled.View`
   width: 100%;
   flex-direction: row;
-`;
-
-const CustomButton = styled.TouchableOpacity`
-  background-color: ${(props) =>
-    props.disabled ? COLORS.POINT_COLOR_20 : COLORS.POINT_COLOR_100};
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 16px;
+  margin: -8px 16px 0px;
 `;
 
 const Backdrop = styled.View`

diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
@@ -72,6 +72,7 @@ const MyPage = ({ navigation: { navigate } }) => {
 
 const MyPageContainer = styled.SafeAreaView`
   flex: 1;
+  background-color: white;
 `;
 
 const PageTitle = styled.Text`
@@ -84,7 +85,7 @@ const PageTitle = styled.Text`
 const CustomButtonContainer = styled.View`
   width: 100%;
   align-items: center;
-  margin: -8px 0 16px;
+  margin: -8px 8px 0px;
 `;
 
 export default MyPage;