refactor/login-chat-keyboard-1: 로그인 시 비밀번호 보이게 입력할 수 있도록 (#154)

- 채팅 marginTop 원래대로
team-diverse · Oct 17, 2024 · 01ef101 · 01ef101
1 parent ab477da
commit 01ef101
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 42 deletions.
diff --git a/src/pages/chat/ChatRoomStyles.jsx b/src/pages/chat/ChatRoomStyles.jsx
@@ -13,7 +13,7 @@ const ChatRoomStyles = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between",
 		alignItems: "center",
-		marginBottom: 10,
+		marginBottom: 30,
 		height: 56,
 	},
 	containerChat: {

diff --git a/src/pages/login/LoginPage.js b/src/pages/login/LoginPage.js
@@ -7,6 +7,7 @@ import {
 	TouchableOpacity,
 	TouchableWithoutFeedback,
 	Keyboard,
+	KeyboardAvoidingView,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import * as Device from "expo-device";
@@ -148,29 +149,22 @@ const LoginPage = () => {
 		<TouchableWithoutFeedback onPress={handleKeyboard}>
 			<SafeAreaView style={LoginStyles.container}>
 				<DifeLine style={LoginStyles.backgroundLogin} />
+
 				<Text style={LoginStyles.textTitle}>{t("loginTitle")}</Text>
 				<Text style={LoginStyles.textSubTitle}>
 					{t("loginSubtitle")}
 				</Text>
-				<View style={LoginStyles.containerIdPw}>
-					<Text style={LoginStyles.textIdPw}>ID (Email Address)</Text>
-					<TextInput
-						ref={emailRef}
-						style={
-							loginFailed
-								? [
-										LoginStyles.textInputIdPw,
-										{ borderColor: CustomTheme.warningRed },
-									]
-								: LoginStyles.textInputIdPw
-						}
-						placeholder={t("placeholderEmail")}
-						autoCorrect={false}
-						onChangeText={(text) => handleEmail(text)}
-					/>
-					<Text style={LoginStyles.textIdPw}>Password</Text>
-					<View style={LoginStyles.textInputPwContainer}>
+
+				<KeyboardAvoidingView
+					behavior={"position"}
+					keyboardVerticalOffset={20}
+				>
+					<View style={LoginStyles.containerIdPw}>
+						<Text style={LoginStyles.textIdPw}>
+							ID (Email Address)
+						</Text>
 						<TextInput
+							ref={emailRef}
 							style={
 								loginFailed
 									? [
@@ -182,31 +176,52 @@ const LoginPage = () => {
 										]
 									: LoginStyles.textInputIdPw
 							}
-							placeholder={t("placeholderPassword")}
-							onChangeText={(text) => handlePassword(text)}
-							value={valuePW}
-							secureTextEntry={!showPW}
+							placeholder={t("placeholderEmail")}
+							autoCorrect={false}
+							onChangeText={(text) => handleEmail(text)}
 						/>
-						<TouchableOpacity
-							style={LoginStyles.iconSee}
-							onPress={handleShowPW}
-						>
-							{valuePW == "" ? null : showPW ? (
-								<IconSeePw />
-							) : (
-								<IconNotSeePw />
-							)}
-						</TouchableOpacity>
-					</View>
-					{loginFailed && (
-						<View style={LoginStyles.containerError}>
-							<InfoCircle color={CustomTheme.warningRed} />
-							<Text style={LoginStyles.textError}>
-								{t("loginError")}
-							</Text>
+
+						<Text style={LoginStyles.textIdPw}>Password</Text>
+						<View style={LoginStyles.textInputPwContainer}>
+							<TextInput
+								style={
+									loginFailed
+										? [
+												LoginStyles.textInputIdPw,
+												{
+													borderColor:
+														CustomTheme.warningRed,
+												},
+											]
+										: LoginStyles.textInputIdPw
+								}
+								placeholder={t("placeholderPassword")}
+								onChangeText={(text) => handlePassword(text)}
+								value={valuePW}
+								secureTextEntry={!showPW}
+							/>
+
+							<TouchableOpacity
+								style={LoginStyles.iconSee}
+								onPress={handleShowPW}
+							>
+								{valuePW == "" ? null : showPW ? (
+									<IconSeePw />
+								) : (
+									<IconNotSeePw />
+								)}
+							</TouchableOpacity>
 						</View>
-					)}
-				</View>
+						{loginFailed && (
+							<View style={LoginStyles.containerError}>
+								<InfoCircle color={CustomTheme.warningRed} />
+								<Text style={LoginStyles.textError}>
+									{t("loginError")}
+								</Text>
+							</View>
+						)}
+					</View>
+				</KeyboardAvoidingView>
 
 				<View style={LoginStyles.containerButtonSignupLogin}>
 					<BottomTwoButtons>