[Kan 136-2] Fix/signup UI (#47)

* Fix/ * Fix/reviewWrite * Fix/UI * Fix/color
meokgu-skku · Jun 1, 2024 · 66727ae · 66727ae
1 parent e39d6c2
commit 66727ae
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 37 deletions.
diff --git a/src/assets/svg.js b/src/assets/svg.js
diff --git a/src/components/HeaderWhite.js b/src/components/HeaderWhite.js
@@ -40,7 +40,7 @@ export default function HeaderWhite(props) {
       ) : null}
       <Text
         style={{
-          color: COLOR_TEXT70GRAY,
+          color: COLOR_PRIMARY,
           fontSize: 16,
           fontWeight: 'bold',
           textAlign: 'center',

diff --git a/src/components/LongPrimaryButton.js b/src/components/LongPrimaryButton.js
@@ -4,32 +4,44 @@ import {COLOR_WHITE, COLOR_PRIMARY, COLOR_DISABLE_GRAY} from '../assets/color';
 import AnimatedButton from './AnimationButton';
 
 export default function LongPrimaryButton(props) {
-  const { text, action, disable } = props;
+  const {text, action, disable} = props;
 
   return (
     <AnimatedButton
-      onPress={action}
-      style={[styles.buttonTest, disable && styles.buttonDisabled]}
-      disabled={disable}>
-      <Text style={[styles.buttonText, disable && styles.textDisabled]}>{text}</Text>
+      onPress={() => {
+        if (disable) return;
+        action();
+      }}
+      style={[
+        styles.buttonTest,
+        disable
+          ? {backgroundColor: COLOR_PRIMARY}
+          : {backgroundColor: COLOR_PRIMARY},
+      ]}
+      // disabled={disable}
+    >
+      <Text style={[styles.buttonText, disable && styles.textDisabled]}>
+        {text}
+      </Text>
     </AnimatedButton>
   );
 }
 
 const styles = StyleSheet.create({
   buttonTest: {
-    backgroundColor: COLOR_PRIMARY,
+    // backgroundColor: COLOR_PRIMARY,
     padding: 16,
-    borderRadius: 5,
+    borderRadius: 10,
     justifyContent: 'center',
     alignItems: 'center',
     width: '90%',
   },
   buttonText: {
     fontSize: 14,
     color: COLOR_WHITE,
-    fontWeight: 'normal',
+    // fontWeight: 'normal',
     alignSelf: 'center',
+    fontFamily: 'NanumSquareRoundEB',
   },
   textDisabled: {
     color: COLOR_WHITE,

diff --git a/src/screens/signup/CheckEmailScreen.js b/src/screens/signup/CheckEmailScreen.js
@@ -19,6 +19,7 @@ import {
   COLOR_WHITE,
   COLOR_BACKGROUND,
   COLOR_GRAY,
+  COLOR_HOME_BACKGROUND,
   COLOR_PRIMARY,
   COLOR_TEXT70GRAY,
   COLOR_SECONDARY,
@@ -167,11 +168,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
-    fontWeight: 'bold',
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
     marginBottom: 8,
   },
   textinputBox: {
@@ -180,7 +182,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/CheckEmailScreen2.js b/src/screens/signup/CheckEmailScreen2.js
@@ -18,6 +18,7 @@ import {
 import {
   COLOR_WHITE,
   COLOR_BACKGROUND,
+  COLOR_HOME_BACKGROUND,
   COLOR_GRAY,
   COLOR_PRIMARY,
   COLOR_TEXT70GRAY,
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/FindPasswordScreen.js b/src/screens/signup/FindPasswordScreen.js
@@ -17,6 +17,7 @@ import {
 } from 'react-native';
 import {
   COLOR_WHITE,
+  COLOR_HOME_BACKGROUND,
   COLOR_BACKGROUND,
   COLOR_GRAY,
   COLOR_PRIMARY,
@@ -126,11 +127,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
-    fontWeight: 'bold',
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
     marginBottom: 8,
   },
   textinputBox: {
@@ -139,7 +141,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/LoginScreen.js b/src/screens/signup/LoginScreen.js
@@ -22,6 +22,8 @@ import {
   COLOR_PRIMARY,
   COLOR_TEXT70GRAY,
   COLOR_SECONDARY,
+  COLOR_LIGHTGRAY,
+  COLOR_HOME_BACKGROUND,
 } from '../../assets/color';
 import AnimatedButton from '../../components/AnimationButton';
 import {useNavigation} from '@react-navigation/native';
@@ -128,7 +130,7 @@ export default function LoginScreen() {
                 }}
                 value={email}
                 style={styles.textinputBox}
-                placeholder=''
+                placeholder=""
               />
             </View>
             <View style={{height: 20}} />
@@ -165,10 +167,10 @@ export default function LoginScreen() {
           </View>
 
           <View style={{height: 40}} />
-          <LongPrimaryButton 
-            text="로그인하기" 
-            action={login} 
-            disable={disable} 
+          <LongPrimaryButton
+            text="로그인하기"
+            action={login}
+            disable={disable}
           />
           <View
             style={{
@@ -228,17 +230,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
-    fontWeight: 'bold',
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
     marginBottom: 8,
   },
   samllTextColor: {
     color: COLOR_SECONDARY,
     fontSize: 12,
-    fontWeight: 'normal',
+    // fontWeight: 'normal',
+    fontFamily: 'NanumSquareRoundB',
     textAlign: 'center',
     paddingVertical: 4,
   },
@@ -248,7 +252,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/ProfileSetScreen.js b/src/screens/signup/ProfileSetScreen.js
@@ -18,6 +18,7 @@ import {
 } from 'react-native';
 import {
   COLOR_WHITE,
+  COLOR_HOME_BACKGROUND,
   COLOR_BACKGROUND,
   COLOR_GRAY,
   COLOR_PRIMARY,
@@ -226,7 +227,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
@@ -239,7 +240,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/ResetPasswordScreen.js b/src/screens/signup/ResetPasswordScreen.js
@@ -18,6 +18,7 @@ import {
 import {
   COLOR_WHITE,
   COLOR_BACKGROUND,
+  COLOR_HOME_BACKGROUND,
   COLOR_GRAY,
   COLOR_PRIMARY,
   COLOR_TEXT70GRAY,
@@ -208,11 +209,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
-    fontWeight: 'bold',
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
     marginBottom: 8,
   },
   textinputBox: {
@@ -221,7 +223,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },

diff --git a/src/screens/signup/SignupScreen.js b/src/screens/signup/SignupScreen.js
@@ -19,6 +19,7 @@ import {
   COLOR_WHITE,
   COLOR_BACKGROUND,
   COLOR_GRAY,
+  COLOR_HOME_BACKGROUND,
   COLOR_PRIMARY,
   COLOR_TEXT70GRAY,
   COLOR_SECONDARY,
@@ -229,7 +230,7 @@ export default function SignupScreen() {
             </View>
           </View>
 
-          <View style={{height: 20}} />
+          <View style={{height: 50}} />
           <LongPrimaryButton
             text={
               password === passwordCheck
@@ -246,10 +247,10 @@ export default function SignupScreen() {
               marginTop: 12,
               padding: 4,
             }}>
-            <Text style={styles.samllText}>
+            <Text style={styles.samllText2}>
               {'가입하시면 이용약관 및 개인정보 보호정책에'}
             </Text>
-            <Text style={[styles.samllText, {marginTop: -5}]}>
+            <Text style={[styles.samllText2, {marginTop: -5}]}>
               {'자동으로 동의하게 됩니다.'}
             </Text>
           </View>
@@ -280,20 +281,29 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   samllText: {
-    color: COLOR_TEXT70GRAY,
+    color: COLOR_PRIMARY,
     fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
-    fontWeight: 'bold',
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
+    marginBottom: 8,
+  },
+  samllText2: {
+    color: COLOR_TEXT70GRAY,
+    fontSize: 14,
+    textAlign: 'center',
     marginBottom: 8,
+    // fontWeight: 'bold',
+    fontFamily: 'NanumSquareRoundB',
   },
   textinputBox: {
     height: 50,
     borderColor: '#F8F8F8',
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 15,
-    backgroundColor: '#F8F8F8',
+    backgroundColor: COLOR_HOME_BACKGROUND,
     fontSize: 16,
     width: '100%',
   },