[KAN-111] 로그인 페이지 디자인 수정 (#23)

meokgu-skku · May 29, 2024 · e3b221c · e3b221c
1 parent 8cf04e4
commit e3b221c
Show file tree

Hide file tree

Showing 6 changed files with 1,109 additions and 1,018 deletions.
diff --git a/src/assets/color.js b/src/assets/color.js
@@ -1,6 +1,6 @@
 export const COLOR_PRIMARY = '#2D4B33';
 export const COLOR_SECONDARY = '#3e6746';
-export const COLOR_BACKGROUND = '#e2e2e2'; //FFFFFF
+export const COLOR_BACKGROUND = '#FEFEFE'; 
 export const COLOR_TEXT_BLACK = '#000000';
 export const COLOR_TEXT_DARKGRAY = '#535353';
 export const COLOR_GRAY = '#888888';
@@ -12,3 +12,6 @@ export const COLOR_LIGHTGRAY = '#dddddd';
 export const COLOR_RED = '#FF0000';
 export const COLOR_BLUE = '#0000FF';
 export const COLOR_ORANGE = '#FF6A13';
+export const COLOR_HOME_BACKGROUND = '#e2e2e2'; 
+export const COLOR_DISABLE_GRAY = '#C5C5C5';
+
diff --git a/src/components/AnimationButton.js b/src/components/AnimationButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {TouchableOpacity, Animated, StyleSheet} from 'react-native';
 import {usePressAnimation} from '../assets/UsePressAnimation';
-import {COLOR_GRAY} from '../assets/color';
+import {COLOR_GRAY, COLOR_DISABLE_GRAY} from '../assets/color';
 
 const AnimatedButton = ({
   children,
@@ -34,7 +34,7 @@ const AnimatedButton = ({
 
 const styles = StyleSheet.create({
   disabledButton: {
-    backgroundColor: COLOR_GRAY,
+    backgroundColor: COLOR_DISABLE_GRAY,
   },
 });
 

diff --git a/src/components/LongPrimaryButton.js b/src/components/LongPrimaryButton.js
@@ -1,17 +1,17 @@
 import React, {useState, useCallback, useEffect} from 'react';
 import {Text, SafeAreaView, ScrollView, StyleSheet} from 'react-native';
-import {COLOR_WHITE, COLOR_PRIMARY} from '../assets/color';
+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}
+      style={[styles.buttonTest, disable && styles.buttonDisabled]}
       disabled={disable}>
-      <Text style={styles.buttonText}>{text}</Text>
+      <Text style={[styles.buttonText, disable && styles.textDisabled]}>{text}</Text>
     </AnimatedButton>
   );
 }
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
   buttonTest: {
     backgroundColor: COLOR_PRIMARY,
     padding: 16,
-    borderRadius: 15,
+    borderRadius: 5,
     justifyContent: 'center',
     alignItems: 'center',
     width: '90%',
@@ -31,4 +31,7 @@ const styles = StyleSheet.create({
     fontWeight: 'normal',
     alignSelf: 'center',
   },
+  textDisabled: {
+    color: COLOR_WHITE,
+  },
 });
diff --git a/src/screens/home/HomeScreen.js b/src/screens/home/HomeScreen.js
@@ -18,6 +18,7 @@ import {
   Pressable,
 } from 'react-native';
 import {
+  COLOR_HOME_BACKGROUND,
   COLOR_WHITE,
   COLOR_BACKGROUND,
   COLOR_GRAY,
@@ -110,7 +111,7 @@ export default function HomeScreen() {
 
 const styles = StyleSheet.create({
   entire: {
-    backgroundColor: COLOR_BACKGROUND,
+    backgroundColor: COLOR_HOME_BACKGROUND,
     // justifyContent: 'center',
     alignItems: 'center',
   },

diff --git a/src/screens/signup/LoginScreen.js b/src/screens/signup/LoginScreen.js
@@ -112,7 +112,7 @@ export default function LoginScreen() {
         <View style={styles.entire}>
           <View style={styles.container}>
             <View style={styles.textAndInput}>
-              <Text style={styles.samllText}>이메일 주소</Text>
+              <Text style={styles.samllText}>이메일</Text>
               <TextInput
                 ref={emailInputRef}
                 onSubmitEditing={endEmailInput}
@@ -124,9 +124,10 @@ export default function LoginScreen() {
                 }}
                 value={email}
                 style={styles.textinputBox}
+                placeholder=''
               />
             </View>
-            <View style={{height: 15}} />
+            <View style={{height: 20}} />
             <View style={styles.textAndInput}>
               <Text style={styles.samllText}>비밀 번호</Text>
               <TextInput
@@ -159,8 +160,12 @@ export default function LoginScreen() {
             </View>
           </View>
 
-          <View style={{height: 50}} />
-          <LongPrimaryButton text="로그인" action={login} disable={disable} />
+          <View style={{height: 40}} />
+          <LongPrimaryButton 
+            text="로그인하기" 
+            action={login} 
+            disable={disable} 
+          />
           <View
             style={{
               marginTop: 12,
@@ -176,7 +181,7 @@ export default function LoginScreen() {
                   padding: 30,
                   paddingVertical: 0,
                 }}>
-                <Text style={styles.samllText}>비밀번호 찾기</Text>
+                <Text style={styles.samllTextColor}>비밀번호 찾기</Text>
               </AnimatedButton>
               <AnimatedButton
                 onPress={() => {
@@ -220,10 +225,11 @@ const styles = StyleSheet.create({
   },
   samllText: {
     color: COLOR_TEXT70GRAY,
-    fontSize: 12,
-    fontWeight: 'normal',
+    fontSize: 14,
     textAlign: 'center',
     paddingVertical: 4,
+    fontWeight: 'bold',
+    marginBottom: 8,
   },
   samllTextColor: {
     color: COLOR_SECONDARY,
@@ -233,16 +239,18 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
   },
   textinputBox: {
-    padding: 0,
-    fontSize: 15,
-    height: 45,
+    height: 50,
+    borderColor: '#F8F8F8',
+    borderWidth: 1,
+    borderRadius: 5,
+    paddingHorizontal: 15,
+    backgroundColor: '#F8F8F8',
+    fontSize: 16,
     width: '100%',
-    borderBottomWidth: 0.5,
-    borderBottomColor: COLOR_TEXT70GRAY,
   },
   showButton: {
     position: 'absolute',
-    right: 0,
+    right: 10,
     bottom: 8,
     padding: 5,
     // backgroundColor: 'red',