하몬드의 개발블로그

계정 복구 서비스 UI 이메일 찾기는 이름을 통해 진행할 것이고,비밀번호 재설정은 이메일 인증을 통해 진행할 것이다. 두 화면을 따로 구현할 수도 있지만 같은 나같은 경우는텍스트 스위치 위젯을 통해 한 화면에서 계정 복구를 진행할 수 있도록 했다.  TextSwitchfun ContentDrawScope.drawWithLayer(block: ContentDrawScope.() -> Unit) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) block() restoreToCount(checkPoint) }}@Composablefun TextSwitch( mo..

키보드 백드롭이란? 키보드 활성화 시 잠깐 생기는 임시 여백을 키보드 백드롭이라고 한다.  키보드 백드롭 색 설정 #F9F9F9 #222329키보드 백드롭의 색은 컬러 리소스로 지정해야 하기에res/color에서 라이트모드와 다크모드 배경색을 추가한다. @AndroidEntryPointclass MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val keyboardBackDropColor = if (!isSystemInDarkTheme()) R.co..

회원가입 UI 회원가입을 하려면 이메일, 이름, 비밀번호를 입력해도록 구현했다.  회원가입 Flow1. 이메일 입력2. 인증 요청 버튼 클릭3. 입력한 이메일과 선언해둔 임시 비밀번호로 임시 계정 생성4. 파이어베이스는 회원가입 시 자동으로 로그인을 진행함5. 로그인된 사용자 정보 기반으로 이메일 인증 요청 메일 수신6. 이메일 인증 완료 혹은 가입 취소시 임시계정 삭제7. 모든 밸리데이션 통과 후 회원가입 버튼 누르면 실제 계정 생성8. 로그인 화면으로 라우팅파이어베이스는 이미 가입된 유저만이 이메일 인증을 할 수 있기에위와 같은 흐름으로 파이어베이스 이메일 회원가입을 구현할 것이다.  파이어베이스 설정 Authentication 탭에 들어가서 이메일/비밀번호 로그인을 활성화 해준다.그래야 이메일 인증..

개요 위와 같이 여러개의 텍스트 필드가 화면에 배치되게 되면키보드가 올라올 때 하단에 위치한 텍스트 필드를 가리게 되는 문제가 발생한다. 이를 방지하기 위해 키보드 스크롤 설정을 해줘야 한다.  매니패스트 설정 메인 액티비티 부분에 해당 구문을 추가한다.  UI 구조@Composablefun ContentResizingScreen( contentColumn: @Composable ColumnScope.() -> Unit, bottomRow: @Composable RowScope.() -> Unit) { val focusManager = LocalFocusManager.current val scrollState = ..

로그인 UI 먼저 로그인 화면부터 구현할 것이다.  로그인 Flow1. 로그인 진행2. 로그인 시 유저 이메일과 자동 로그인 여부를 로컬 저장소에 저장3. 저장된 값을 기반으로 초기 화면 라우팅 진행, 유저정보 가져오기로그인 진행 시 이메일 값을 기반으로 유저 정보를 가져오도록 한다.이메일을 키로 선택한 이유는 이메일은 계정의 고유한 값이기 때문이다.  의존성 추가plugins { ... id("com.google.gms.google-services") version "4.3.8" apply false}프로젝트 수준의 그래들 파일에 위와 같은 의존성을 추가한다. plugins { ... id("com.google.gms.google-services")}dependencies { ....

기존 방식app/src/main/java/com/hamond/escapeanchovy/constants/Secret.kt기존에는 .gitIgnore 파일에 깃허브에 업로드 하지 않을 상수 파일을 설정하고 object Secret { const val API_KEY = "asdfasdfasdf"}여기다가 Api 키를 작성한 뒤 사용하는 방식이었다.  문제 발생카카오 로그인을 구현할 때 매니패스트 파일에서Api키를 활용해야되는 문제가 발생했다.  BuildConfig 활용local.properties에 키값을 저장한다.해당 파일은 기본적으로 gitIgnore 설정이 되어있다. android { ... val properties = Properties() properties.load(Fi..

커스텀 위젯을 만드는 이유UI를 구성하기 전에 커스텀 위젯을 만드는 것은 반필수적이라고 볼 수 있다.정의한 커스텀 위젯은 재사용이 가능하기에 UI의 일관성을 유지할 수 있다.또한 screen을 구성하는 코드가 확연하게 줄어들어 가독성이 향상된다.  커스텀 위젯 디자인 방식컴포저블 함수를 선언한 뒤 그 안에 기본위젯을 넣고 그 위젯의프로퍼티를 활용해  피그마 디자인과 동일하게 UI를 구성한 다음컴포저블 함수의 프로퍼티로 위젯의 디자인이나 동작을 제어하도록 한다. (버튼 활성화/비활성화 상태라던지, 텍스트필드 입력 모드라던지 등등..)  커스텀 위젯 네이밍커스텀 위젯의 이름은 컴포즈에서 기본적으로 제공하는 위젯과동일한 이름으로 해도 되지만 사용 시 커스텀 위젯이 아닌 기본 위젯이 import되는번거로운 문제..

기본 화면 전환 애니메이션 기본 화면 전환 애니메이션이 부자연스러워 이걸 없애려고 했다.  화면 전환 애니메이션 비활성화NavHost( navController = navController, enterTransition = { EnterTransition.None } exitTransition = { ExitTransition.None } ) { ... }}NavHost의 transition 값을 전부 none으로 설정하면 된다. enterTransition에는 화면에 진입할 때의 애니메이션이 들어가고,exitTransition에는 컴포저블이 화면에서 사라질 때의 애니메이션이 들어간다.  자연스러운 화면 전환exitTransition = { ..