From d2ed07b07e359e9328339dd088dc25f2bc01f167 Mon Sep 17 00:00:00 2001 From: eunji Date: Tue, 13 Feb 2024 02:43:09 +0900 Subject: [PATCH] =?UTF-8?q?STYLE:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20refactor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.js | 8 +- .../navigation/bar/BackBtnColorBar.js | 6 +- src/screens/account/Account.js | 106 ------------------ src/screens/account/Agreement.js | 64 ++++++----- src/screens/account/Getprofile.js | 53 ++++----- src/screens/{sign => login}/GoogleLogin.js | 0 src/screens/onboarding/OnBoarding.js | 53 +++++---- 7 files changed, 87 insertions(+), 203 deletions(-) delete mode 100644 src/screens/account/Account.js rename src/screens/{sign => login}/GoogleLogin.js (100%) diff --git a/App.js b/App.js index 6a9b425..9b184b5 100644 --- a/App.js +++ b/App.js @@ -10,15 +10,12 @@ import { backbtncolorbar } from './src/components/navigation/bar/BackBtnColorBar import Second from './src/screens/test/Second'; import Third from './src/screens/test/Third'; import First from './src/screens/test/First'; -import Account from './src/screens/account/Account'; import Agreement from './src/screens/account/Agreement'; import KakaoLoginScreen from './src/screens/login/KakaoLogin'; -import GoogleLoginScreen from './src/screens/sign/GoogleLogin'; +import GoogleLoginScreen from './src/screens/login/GoogleLogin'; import GetProfile from './src/screens/account/Getprofile'; import Login from './src/screens/login/Login'; import OnBoarding from './src/screens/onboarding/OnBoarding'; -import { TouchableOpacity } from 'react-native'; - // rn navigatior로 stack 생성, rn은 stack으로 사용자의 이동을 확인한다. const Stack = createNativeStackNavigator(); @@ -37,8 +34,7 @@ function App() { - - + diff --git a/src/components/navigation/bar/BackBtnColorBar.js b/src/components/navigation/bar/BackBtnColorBar.js index 7daa2b5..63d574d 100644 --- a/src/components/navigation/bar/BackBtnColorBar.js +++ b/src/components/navigation/bar/BackBtnColorBar.js @@ -16,10 +16,10 @@ const CustomBackButton = () => { export const backbtncolorbar = { headerStyle: { - backgroundColor: '#FEF7FF', - height: 50, + backgroundColor: '#151515', + height: 40, }, - headerTintColor: '#000000', + headerTintColor: '#ffffff', headerTitleAlign: 'center', headerTitleStyle: { fontWeight: 'bold', diff --git a/src/screens/account/Account.js b/src/screens/account/Account.js deleted file mode 100644 index f25d86d..0000000 --- a/src/screens/account/Account.js +++ /dev/null @@ -1,106 +0,0 @@ -import { useNavigation } from '@react-navigation/native'; -import { useState } from 'react'; -import Checkbox from 'expo-checkbox'; -import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native'; - -// test용 스크린 -export default function Account() { - const navigation = useNavigation(); - const [email, setEmail] = useState(""); - const [pw, setPw] = useState(""); - const [checked, setChecked] = useState(false); - - return ( - - - Email - - Password - - - navigation.navigate('Agreement')}> - 확인 - - - - 가입과 동시에 이용 약관 및 개인정보 처리방침에 동의합니다. - - - ); - } - - const styles = StyleSheet.create({ - container: { - width: '100%', - height: '100%', - alignItems: 'center', - backgroundColor: '#ffffff', - }, - inputbox: { - width: '100%', - alignItems: 'center', - textAlign: 'left', - }, - firstlabel: { - width: '90%', - textAlign: 'left', - color: '#979797', - fontSize: 12, - marginTop: 10, - }, - secondlabel: { - width: '90%', - textAlign: 'left', - color: '#979797', - fontSize: 12, - marginTop: 20, - }, - input: { - width: '90%', - borderBottomWidth: 1, - padding: 2, - borderColor: '#d4d4d4', - }, - button: { - backgroundColor: '#000000', - alignItems: 'center', - justifyContent: 'center', - width: '90%', - paddingVertical: 18, // 상하 패딩 - borderRadius: 10, - marginTop: 25, - }, - buttontext: { - color: '#ffffff', - fontSize: 16, - fontWeight: '600', - }, - checkcontainer: { - flexDirection: 'row', - alignItems: 'center', - width: '90%', - marginTop: 30, - }, - checktext: { - fontSize: 14, - textAlign: 'center', - }, - checkbox: { - width: 20, - height: 20, - marginRight: 5, - borderRadius: 10, - }, - }); \ No newline at end of file diff --git a/src/screens/account/Agreement.js b/src/screens/account/Agreement.js index 1b16a46..fcf68e6 100644 --- a/src/screens/account/Agreement.js +++ b/src/screens/account/Agreement.js @@ -13,11 +13,19 @@ export default function Agreement() { const [fourchecked, setFourChecked] = useState(false); const AllChecked = () => { - setFirstChecked(!firstchecked); - setSecondChecked(!secondchecked); - setThirdChecked(!thirdchecked); - setFourChecked(!fourchecked); - setAllchecked(!allchecked); + if(firstchecked == true && secondchecked == true && thirdchecked == true && fourchecked == true) { + setAllchecked(false); + setFirstChecked(false); + setSecondChecked(false); + setThirdChecked(false); + setFourChecked(false); + } else { + setAllchecked(true); + setFirstChecked(true); + setSecondChecked(true); + setThirdChecked(true); + setFourChecked(true); + } } // 모든 선택지를 true로 한다면, allchecked도 true로 변경한다. @@ -31,22 +39,21 @@ export default function Agreement() { return ( - 약관동의 AllChecked()} - color={allchecked ? '#000000' : undefined} + color={allchecked ? '#000000' : 'rgba(255,255,255,0.3)'} /> - 전체동의 + 전체 항목에 동의합니다. 약관1) @@ -55,7 +62,7 @@ export default function Agreement() { style={styles.checkbox} value={secondchecked} onValueChange={setSecondChecked} - color={secondchecked ? '#000000' : undefined} + color={allchecked ? '#000000' : 'rgba(255,255,255,0.3)'} /> 약관2) @@ -64,7 +71,7 @@ export default function Agreement() { style={styles.checkbox} value={thirdchecked} onValueChange={setThirdChecked} - color={thirdchecked ? '#000000' : undefined} + color={allchecked ? '#000000' : 'rgba(255,255,255,0.3)'} /> 약관3) @@ -73,12 +80,12 @@ export default function Agreement() { style={styles.checkbox} value={fourchecked} onValueChange={setFourChecked} - color={fourchecked ? '#000000' : undefined} + color={allchecked ? '#000000' : 'rgba(255,255,255,0.3)'} /> 약관4) navigation.navigate('GetProfile')}> - 다음으로 + 완료 ) @@ -89,17 +96,10 @@ const styles = StyleSheet.create({ width: '100%', height: '100%', alignItems: 'center', - backgroundColor: '#ffffff', - }, - title: { - width: '90%', - fontSize: 20, - fontWeight: '800', - marginTop: 10, - textAlign: 'left', + backgroundColor: '#000000', }, button: { - backgroundColor: '#000000', + backgroundColor: '#151515', alignItems: 'center', justifyContent: 'center', width: '90%', @@ -116,28 +116,30 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', width: '90%', - marginTop: 35, + marginTop: 50, borderBottomWidth: 1, - borderColor: '#dedede', - paddingBottom: 25, + borderColor: '#ffffff', + paddingBottom: 15, + marginBottom: 30, }, checkcontainer: { flexDirection: 'row', alignItems: 'center', width: '90%', - marginTop: 20, + marginBottom: 60, }, checktext: { fontSize: 14, textAlign: 'center', fontWeight: '800', + color: '#ffffff', }, checkbox: { - width: 24, - height: 24, + width: 20, + height: 20, marginRight: 10, - borderRadius: 0, - borderColor: '#000000', - borderWidth: 1, + borderRadius: 30, + borderWidth: 2.5, + borderColor: 'rgba(255,255,255,0.3)', }, }); \ No newline at end of file diff --git a/src/screens/account/Getprofile.js b/src/screens/account/Getprofile.js index 2d8520b..dbeaff4 100644 --- a/src/screens/account/Getprofile.js +++ b/src/screens/account/Getprofile.js @@ -36,18 +36,16 @@ export default function GetProfile() { return ( - - 프로필 설정 - + - Nickname + + placeholderTextColor='rgba(0,0,0,0.3)' /> 확인 @@ -61,49 +59,38 @@ export default function GetProfile() { width: '100%', height: '100%', alignItems: 'center', - backgroundColor: '#ffffff', + backgroundColor: '#000000', }, inputbox: { width: '100%', alignItems: 'center', - textAlign: 'left', + textAlign: 'center', + marginTop: 40, }, - firstlabel: { - width: '90%', - textAlign: 'left', - color: '#979797', - fontSize: 12, - marginTop: 10, - }, - imagebox: { - width: 120, - height: 120, - borderColor: '#000000', - borderWidth: 1, - backgroundColor: '#ffc7c7', + image: { + width: 236, + height: 236, + backgroundColor: 'rgba(255, 255, 255, 0.2)', borderRadius: 120, + marginTop: 100, }, - secondlabel: { - width: '90%', - textAlign: 'left', - color: '#979797', - fontSize: 12, - marginTop: 20, - }, input: { - width: '90%', - borderBottomWidth: 1, - padding: 2, - borderColor: '#d4d4d4', + width: 236, + backgroundColor: '#ffffff', + paddingHorizontal: 20, + paddingVertical: 6, + borderRadius: 100, + fontSize: 16, + textAlign: 'center', }, button: { - backgroundColor: '#000000', + backgroundColor: '#151515', alignItems: 'center', justifyContent: 'center', width: '90%', paddingVertical: 18, // 상하 패딩 borderRadius: 10, - marginTop: 25, + marginTop: 110, }, buttontext: { color: '#ffffff', diff --git a/src/screens/sign/GoogleLogin.js b/src/screens/login/GoogleLogin.js similarity index 100% rename from src/screens/sign/GoogleLogin.js rename to src/screens/login/GoogleLogin.js diff --git a/src/screens/onboarding/OnBoarding.js b/src/screens/onboarding/OnBoarding.js index 9dd492c..ee5e993 100644 --- a/src/screens/onboarding/OnBoarding.js +++ b/src/screens/onboarding/OnBoarding.js @@ -1,6 +1,5 @@ import { useNavigation } from '@react-navigation/native'; -import { useState } from 'react'; -import { View, Text, TouchableOpacity, StyleSheet, TextInput, Button } from 'react-native'; +import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import StarsSvg from '../../assets/images/onboarding/stars'; export default function OnBoarding() { @@ -10,16 +9,19 @@ export default function OnBoarding() { - 환영합니다 + 지금 바로 나만의 - - 지금 바로 당신의 {' '}무드 바코드 {' '}아트를 생성해보세요! + + 무드 바코드를 만들어 보세요 - navigation.navigate('Login')}> - 로그인 하기 + navigation.navigate('KakaoLogin')}> + 카카오 + + navigation.navigate('GoogleLogin')}> + 구글 - navigation.navigate('Account')}> - 가입하기 + navigation.navigate('Agreement')}> + 약관동의(임시라우팅) ); @@ -30,30 +32,33 @@ export default function OnBoarding() { width: '100%', height: '100%', alignItems: 'center', - backgroundColor: '#ffffff', + backgroundColor: '#151515', }, firsttext: { - fontSize: 28, - fontWeight: '800', - }, - secondtext: { - width: '55%', - fontSize: 14, - marginTop: 5, - color: 'rgba(0, 0, 0, 0.7)', - textAlign: 'center', + width: '60%', + fontSize: 20, + fontWeight: '700', + color: '#ffffff', + textAlign: 'center', + marginTop: 5, }, - colortext: { - color: '#71CAC5', + firstbutton: { + backgroundColor: '#000000', + alignItems: 'center', + justifyContent: 'center', + width: '80%', + paddingVertical: 15, // 상하 패딩 + borderRadius: 10, + marginTop: 50, }, button: { backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center', - width: '90%', - paddingVertical: 18, // 상하 패딩 + width: '80%', + paddingVertical: 15, // 상하 패딩 borderRadius: 10, - marginTop: 110, + marginTop: 15, }, buttontext: { color: '#ffffff',