fix: 다크모드 충돌 해결 #1

dypark26 · Jan 12, 2023 · ac189bf · ac189bf
1 parent 7bffa67
commit ac189bf
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 102 deletions.
diff --git a/src/components/CustomInput.jsx b/src/components/CustomInput.jsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { Dimensions } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import { COLORS } from '../shared/color';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
@@ -18,35 +18,55 @@ const CustomInput = ({
   theme,
 }) => {
   return (
-    <>
-      <CustonInputTitle theme={theme}>{title}</CustonInputTitle>
+    <View
+      style={{
+        ...Platform.select({
+          ios: {
+            shadowColor: theme === 'light' ? '#bbbbbb' : null,
+            shadowOffset: {
+              width: 0,
+              height: 3,
+            },
+            shadowOpacity: 0.29,
+            shadowRadius: 4.65,
+          },
+          android: {
+            backgroundColor: 'white',
+            elevation: 4,
+          },
+        }),
+      }}
+    >
+      <CustomInputTitle theme={theme}>{title}</CustomInputTitle>
       <CustomInputStyle
+        theme={theme}
         type={type}
         keyboardType={keyboardType}
         value={value}
         onChange={onChange}
         onChangeText={onChangeText}
         secureTextEntry={secureTextEntry}
         placeholder={placeholder}
+        placeholderTextColor={theme === 'light' ? '#d5d5d5' : '#636568'}
         returnKeyType={returnKeyType}
         style={style}
       />
-    </>
+    </View>
   );
 };
 //로그인 인풋CSS
 const CustomInputStyle = styled.TextInput`
-  width: ${SCREEN_WIDTH - 40 + 'px'};
-  border-width: 1px;
-  border-color: ${COLORS.CANCEL};
+  width: ${SCREEN_WIDTH - 32 + 'px'};
   height: 80px;
   padding: 10px 20px;
   border-radius: 16px;
   font-size: 20px;
-  background-color: white;
+  color: ${(props) => (props.theme === 'light' ? '#343639' : 'white')};
+  background-color: ${(props) =>
+    props.theme === 'light' ? 'white' : '#343639'};
 `;
 //로그인타이틀CSS
-const CustonInputTitle = styled.Text`
+const CustomInputTitle = styled.Text`
   color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
   font-size: 28px;
   margin: 16px 0 10px 0;

diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
@@ -131,9 +131,15 @@ const GraphicStatus = () => {
           </SupportTextContainer>
         </Supports>
         <LeftPill style={{ ...styles.circleShadow, backgroundColor: color }}>
-          <LeftpillText1 theme={theme}>남은 약:</LeftpillText1>
-          <LeftpillText2 theme={theme}>{leftPillNum}</LeftpillText2>
-          <LeftpillText3 theme={theme}>/{totalPillNum}</LeftpillText3>
+          <LeftPillText1 theme={theme} opacity={opacity}>
+            남은 약:
+          </LeftPillText1>
+          <LeftPillText2 theme={theme} opacity={opacity}>
+            {leftPillNum}
+          </LeftPillText2>
+          <LeftPillText3 theme={theme} opacity={opacity}>
+            /{totalPillNum}
+          </LeftPillText3>
         </LeftPill>
       </GraphicContainer>
     );
@@ -164,13 +170,13 @@ const SupportTextContainer = styled.View`
   background-color: ${(props) =>
     props.theme === 'light' ? '#f3f3f3;' : '#343639'};
   border-radius: 22px;
-  font-size: 20px;
   overflow: hidden;
 `;
 
 const SupportText = styled.Text`
   text-align: center;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white ')};
+  font-size: 20px;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const TakenPill = styled.Text`
@@ -185,27 +191,30 @@ const LeftPill = styled.View`
   position: relative;
 `;
 
-const LeftpillText1 = styled.Text`
+const LeftPillText1 = styled.Text`
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   top: 10%;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: ${(props) =>
+    props.theme === 'dark' && props.opacity == 0 ? 'white' : 'black '};
 `;
-const LeftpillText2 = styled.Text`
+const LeftPillText2 = styled.Text`
   font-size: 80px;
   font-weight: 600;
   top: 15%;
   text-align: center;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: ${(props) =>
+    props.theme === 'dark' && props.opacity == 0 ? 'white' : 'black '};
 `;
-const LeftpillText3 = styled.Text`
+const LeftPillText3 = styled.Text`
   font-size: 50px;
   font-weight: 300;
   position: absolute;
   bottom: 0;
   right: -15%;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: ${(props) =>
+    props.theme === 'dark' && props.opacity == 0 ? 'white' : 'black '};
 `;
 
 const styles = StyleSheet.create({

diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
@@ -37,7 +37,7 @@ const ManageList = ({ id, pillName, time, navigate }) => {
       <ButtonGroupContainer>
         <TextButton
           // 클릭하면 페이지 이동
-          buttonColor={COLORS.BLACK}
+          buttonColor={theme === 'light' ? COLORS.BLACK : 'white'}
           buttonText="편집"
           onPress={() =>
             navigate('Stacks', {

diff --git a/src/components/ToggleButton.jsx b/src/components/ToggleButton.jsx
@@ -12,9 +12,10 @@ const ToggleButton = ({ id, togglePayload }) => {
   return (
     <ToggleButtonContainer
       isTaken={isTaken}
+      theme={theme}
       onPress={() => toggleTaken({ id, togglePayload })}
     >
-      <ToggleButtonText theme={theme}>
+      <ToggleButtonText theme={theme} isTaken={isTaken}>
         {isTaken ? '취소' : '먹었어요!'}
       </ToggleButtonText>
     </ToggleButtonContainer>
@@ -24,7 +25,7 @@ const ToggleButton = ({ id, togglePayload }) => {
 const ToggleButtonContainer = styled.TouchableOpacity`
   width: 96px;
   height: 56px;
-  border: 1px solid white;
+  border: 1px solid ${(props) => (props.theme === 'light' ? 'white' : 'black')};
   background-color: ${COLORS.POINT_COLOR_100};
   border-radius: 8px;
   justify-content: center;
@@ -34,7 +35,7 @@ const ToggleButtonContainer = styled.TouchableOpacity`
 const ToggleButtonText = styled.Text`
   font-size: 20px;
   line-height: 24px;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: #343639;
 `;
 
 export default ToggleButton;
diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
@@ -25,8 +25,12 @@ const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
       }
     >
       <ToggleListItemTextContainer>
-        <ToggleListItemTitle theme={theme}>{pillName}</ToggleListItemTitle>
-        <ToggleListItemTime theme={theme}>{mainPageTime}</ToggleListItemTime>
+        <ToggleListItemTitle theme={theme} isTaken={isTaken}>
+          {pillName}
+        </ToggleListItemTitle>
+        <ToggleListItemTime theme={theme} isTaken={isTaken}>
+          {mainPageTime}
+        </ToggleListItemTime>
       </ToggleListItemTextContainer>
       <ToggleButton id={id} togglePayload={togglePayload} />
     </BoxShadow>
@@ -41,14 +45,16 @@ const ToggleListItemTextContainer = styled.View`
 const ToggleListItemTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: ${(props) =>
+    props.isTaken ? '#343639' : props.theme === 'light' ? 'black' : 'white'};
 `;
 
 const ToggleListItemTime = styled.Text`
   font-size: 16px;
   margin: 0 0 0 16px;
   text-overflow: ellipsis;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
+  color: ${(props) =>
+    props.isTaken ? '#343639' : props.theme === 'light' ? 'black' : 'white'};
 `;
 
 export default ToggleList;
diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
@@ -195,11 +195,13 @@ const EditForm = styled.View``;
 const PillNameInput = styled.TextInput`
   font-size: 28px;
   flex-direction: row;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const TimePicker = styled.Text`
   font-size: 28px;
   flex-direction: row;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const PillInfoContainer = styled.View`
@@ -212,6 +214,7 @@ const PillInfoContainer = styled.View`
 const PillInfoTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const CustomButtonWrapper = styled.View`

diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx
@@ -6,6 +6,7 @@ import { FontAwesome } from '@expo/vector-icons';
 import { COLORS } from '../shared/color';
 import { ThemeContext } from '../context/Theme';
 import { PageContainer } from '../components/index';
+import { CustomButton, CustomInput } from '../components/index';
 
 const regex = {
   email: new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/),
@@ -71,15 +72,15 @@ const SignupPage = ({ navigation: { navigate } }) => {
           />
         </BackToLoginPageButton>
         <InputContainer>
-          <LabelText theme={theme}>아이디</LabelText>
           <CustomInput
+            title="아이디"
+            theme={theme}
             type="text"
             keyboardType="email-address"
             placeholder="아이디를 입력해주세요!"
             value={email}
             onChangeText={setEmail}
             onChange={(text) => validEmail(text)}
-            style={styles1.textInputShadow}
           />
 
           {correctEmail || (
@@ -92,24 +93,24 @@ const SignupPage = ({ navigation: { navigate } }) => {
         </InputContainer>
 
         <InputContainer>
-          <LabelText theme={theme}>비밀번호</LabelText>
           <CustomInput
+            title="비밀번호"
+            theme={theme}
             type="password"
             keyBoardType="default"
             placeholder="비밀번호를 입력해주세요!"
             value={password}
             onChangeText={setPassword}
             onChange={(text) => validPassword(text)}
             secureTextEntry={visiblePassword}
-            style={styles1.textInputShadow}
           />
           <PasswordShowButton
             onPress={() => setVisiblePassword(!visiblePassword)}
           >
             <FontAwesome
               name={visiblePassword ? 'eye' : 'eye-slash'}
               size={25}
-              color="gray"
+              color={theme === 'light' ? '#d5d5d5' : '#636568'}
             />
           </PasswordShowButton>
         </InputContainer>
@@ -120,34 +121,27 @@ const SignupPage = ({ navigation: { navigate } }) => {
               : '비밀번호는 6자리 이상, 14자리 이하의 영어 대, 소문자, 1개 이상의 숫자와 특수문자(!@#$%^&*) 조합이어야 합니다.'}
           </ErrorText>
         )}
-        <CustomButton onPress={() => onClickSignUpButton(email, password)}>
-          <CustomButtonText>회원가입</CustomButtonText>
-        </CustomButton>
+        <CustomButton
+          title="Login"
+          buttonText="회원가입"
+          onPress={() => onClickSignUpButton(email, password)}
+        ></CustomButton>
       </FormContainer>
     </PageContainer>
   );
 };
 
 const FormContainer = styled.View`
-  padding: 10px;
   height: 100%;
   background-color: ${(props) => (props.theme === 'light' ? 'white' : 'black')};
+  margin: 0px 16px 0px;
 `;
 
 const BackToLoginPageButton = styled.TouchableOpacity`
-  margin-bottom: 50px;
+  margin-bottom: 10px;
 `;
 
-const InputContainer = styled.View`
-  position: relative;
-`;
-
-const LabelText = styled.Text`
-  font-size: 28px;
-  font-weight: 400;
-  margin: 16px 0 10px 0;
-  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
-`;
+const InputContainer = styled.View``;
 
 const ErrorText = styled.Text`
   color: ${COLORS.DANGER};
@@ -156,60 +150,8 @@ const ErrorText = styled.Text`
 
 const PasswordShowButton = styled.Text`
   position: absolute;
-  top: 65%;
-  right: 5%;
+  top: 60%;
+  right: 20px;
 `;
 
-// 이후 교체 예정
-const CustomButtonText = styled.Text`
-  font-weight: 400;
-  font-size: 28px;
-  line-height: 40px;
-  text-align: center;
-  width: 100%;
-`;
-
-const CustomInput = styled.TextInput`
-  padding: 12px 16px;
-  border-radius: 16px;
-  background-color: white;
-`;
-
-const CustomButton = styled.TouchableOpacity`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  gap: 148px;
-  margin-top: 48px;
-  width: 100%;
-  height: 80px;
-  background: #0feec6;
-  border-radius: 16px;
-`;
-
-const styles1 = StyleSheet.create({
-  textInputShadow: {
-    ...Platform.select({
-      ios: {
-        shadowColor: '#000',
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-      },
-      android: {
-        backgroundColor: 'white',
-        elevation: 5,
-      },
-    }),
-  },
-});
-
-//
-
 export default SignupPage;