음 지금부터는 영상말고 스스로 해보려 한다! 내가 원했던 방향성이 아니기도 했고, 마지막 영상이 그냥 끝나버리기 때문에.. 다시 해보겠다!
현재 회원정보로 받아야하는 데이터 값들은 다음과 같다.
Name VARCHAR(50) NOT NULL, -- 이름 (필수 입력값)
BirthDate DATE NOT NULL, -- 생년월일 (YYYY-MM-DD 형식으로 저장)
PhoneNumber VARCHAR(15) NOT NULL UNIQUE, -- 전화번호 (중복 불가, 필수 입력값)
Email VARCHAR(100) NOT NULL UNIQUE, -- 이메일 주소 (중복 불가, 필수 입력값)
Nickname VARCHAR(50) NOT NULL UNIQUE, -- 닉네임 (중복 불가, 필수 입력값)
Gender ENUM('Male', 'Female') NOT NULL, -- 성별 (Male 또는 Female만 허용)
ProfilePicture VARCHAR(255), -- 프로필 사진 (URL 또는 파일 경로 저장)
PasswordHash VARCHAR(255) NOT NULL, -- 비밀번호 해시 (암호화된 값 저장)
데이터 베이스에서 가져왔다. 요약하자면, 이름, 생년월일, 전화번호, 이메일 주소, 닉네임, 성별, 비밀번호는 필수이고 프로필 사진은 선택이다.
내가 구현해보고싶은 UI는 정보 하나 입력하면 다음으로 화면으로 넘어가는 약간 심플한 화면이다.
먼저 하나의 틀을 잡으려 한다. 이름 입력 창을 틀로 만들어보자!
현재 레이아웃은 이렇다.
'다음' 버튼을 만들고자 한다. 스타일을 지정해야하기 때문에 기본적인 button 대신에 TouchableOpacity를 사용하겠다!
틀은 대충 이정도로 잡아보았다. 여기서 지금 추가해야할 부분은 다음과 같다.
- TextInput 눌렀을 때 borderBottomColor 변경되도록
- TextInput 포커싱 문제 해결
- TextInput 눌렀을 때 화면 밀리는거? 고치기
- 다음 TouchableOpacity 눌렀을 때 다음 화면으로 넘어가도록
- 다음 TouchableOpacity 눌렀을 때 색상 진해지도록
먼저, borderBottomColor 변경해보겠다. 이 부분은 TextInput 컴포넌트 안에 onFocus 함수를 넣어 포커싱되었을 때 상태변수 BorderBottomColor가 변경되도록 하였다.
onFocus={() => {
setBorderBottomColor('#71de83')
}}이런식으로!! 말이다.
현재 입력 필드에 한 번 포커싱이 되면 포커싱 해제가 안되는 문제점이 있어 이를 해결해보려 한다.
이는 onEndEditing을 사용하여 해결하였다!
onEndEditing={() => {
setBorderBottomColor('lightgray')
}}여기서 신경쓰이는 점이 하나 있긴하다. 키보드의 확인 버튼을 누르지 않고 화면의 다른 부분을 눌렀을 때도 포커싱이 해제되었으면 좋겠는데, 이건 나중에 해결해보겠다! 일단 다 구현하는게 중요하니까..
지금 가장 큰 문제인! 키보드 올라왔을 때 화면이 밀리는 것... 해결이 시급하다.
어우 이런식으로 입력필드가 잘린다 ㅋㅋ쿠ㅜㅜㅜ 보기.. 싫어...
https://dodokw93.tistory.com/6
이 블로그에서 글자 잘림 현상은 TextInput에 기본적으로 padding과 margin 값이 있어서 라고 한다. padding:0, margin:0을 주니 이제 안 잘린다!!!
근데 레이아웃이 밀려서 저 이름 입력 필드가 작아진다 ... 검색해보니
https://sick-sik.tistory.com/14
요로코롬 안드로이드에서 설정할 수 있는 속성들이 존재했다. 그런데... 프로젝트 내에 android 폴더가 없는 것이다!!!! 그래서 생성하기 위해 다음 블로그를 참고했다.
https://shortcuts.tistory.com/48
나는 이미 작업중인 expo 프로젝트가 있었기에 해당 명령어를 사용하여 폴더 구조를 생성하였다. 근데 이거 개ㅐㅐ오래걸린다!
android/app/src/main/AndroidManifest.xml 에 들어가면 android:windowSoftInputMode="adjustResize"이 있는데 나는 레이아웃에 영향을 주고 싶지 않았기 때문에 저기서 adjustResize을 adjustNothing으로 변경해주었다. 그리고 npm run android를 해주었더니 잘 적용되었다!
밀리지 않는 모습 ㅎㅎ 좋아요 ㅎㅎ
이제 버튼을 눌렀을 때 다음 화면으로 넘어가는 것을 구현해보겠다. 다음 화면은 생년월일을 입력하는 페이지로 하려한다.
여기서 애를 진짜 많이 먹었다 ... 아니!! 경로가 이상하게 지정되어 있는지 루트에 있는 app.js 파일은 뭐 수정해도 아무런 변경이 없고 분명 네비게이터 스택으로 쌓아놓은 스크린이 하나도 없는데 화면이 이동되고... ㅠㅠㅠㅠㅠㅠ 게다가 index.js 파일에 설정이 아니라 코드가 작성되어 있어서 대 략 난 감.. 일단은 처음 시작이 index.js인 것 같아서 작성되어있던 코드를 다른 곳으로 옮기고 다시 해보려고 한다 ㅜㅜ
음 이게 설정이 잘못 되어있는 것 같아서 그냥 프로젝트를 다시 만들었다..
프로젝트 환경 설정하는 건 다음 글에서 작성해보도록 하겠다............. (프로젝트 5개는 만든듯 ㅋㅋ;;)
