MoneyMong (5) 썸네일형 리스트형 Compose Popup 이 특정 기기에서 버그가 발생했다 어떤 버그인가버그가 발생하는 곳은 온보딩 화면이다.기능 및 코드와 관련 내용은 아래의 글에 자세히 나와있다.https://jik3410.tistory.com/16 기존 화면을 기반한 Onboarding 화면을 구현해보자머니몽 프로젝트에 온보딩 화면이 추가 되었고, 이를 적용하기까지의 과정을 작성하려 한다.온보딩 화면 구현 방법을 검색했을 때, 앱 시작 온보딩만 검색된다필자의 요구 사항은 기존 화면을jik3410.tistory.com 구현된 화면 보다시피 잘 구현이 되어있다.그런데 pm 님께서 qa 를 하던 중엥?? 처음 보는 이슈가 발견되었는데놀랍게도 내 기기(갤럭시s22)에선 발견되지 않는 이슈였다. 같은 이슈가 발생하는 가상 기기를 찾아서 해결을 진행했다.(Pixel 3a API33) 응급처치를 하.. 기존 화면을 기반한 Onboarding 화면을 구현해보자 머니몽 프로젝트에 온보딩 화면이 추가 되었고, 이를 적용하기까지의 과정을 작성하려 한다.온보딩 화면 구현 방법을 검색했을 때, 앱 시작 온보딩만 검색된다필자의 요구 사항은 기존 화면을 기반한 온보딩 화면이라서 관련된 레퍼런스를 찾지 못해 꽤나 애를 먹었다다른 누군가도 이와 유사한 기능을 구현한다면 미약하게나마 도움이 되지 않을까,, 기대한다 요구사항 파악장부 화면으로 처음 들어갔을 때, 온보딩 화면이 보이도록 해달라는 요청이였다. 디자인은 다음과 같다.왼쪽부터 기존 화면, 장부 열람 기간 온보딩, 장부 내역 등록 온보딩이다. # 참고로 해당 프로젝트는 운영진, 멤버라는 두 가지의 역할이 존재한다. 여기서 파악할 건, 장부 내역 등록은 운영진일때만 가능하다.그렇기에 장부 내역 등록 온보딩은 운영진일때만 .. 디자인 시스템 컴포넌트에 디자인이 추가됐다!? 머니몽 프로젝트에서 디자인 시스템을 맡았고, 유지보수 도중 디자이너분에게 dm 이 왔다. 👩🏼💻 디자이너분: ㅎㅈ님 TextField 컴포넌트에 필수 표시(별표) 넣으면 보수가 많이 드나요?🧑🏻💻 필자: 이미 그렇게 구현되어 있지 않아요??👩🏼💻 디자이너분: 이거 단순히 글자 하나 추가한 게 아니라서요,,🧑🏻💻 필자: 확인하고 반영할게요!~ 여기서 필수 표시(*)는 TextField 에 존재할 수도, 존재하지 않을 수도 있다.(Toggle 의 느낌)그렇기에 두 가지 상황을 모두 고려해야한다.본글은 Jetpack Compose 기반으로 작성되어 있습니다 아래 이미지가 기존 프로젝트에 반영되어 있던 별표가 존재하는 TextField 였다. .. Markdown 을 파싱해서 compose 로 그린 이야기 이건 아니야...프로젝트에서 마이페이지에 있는 개인정보처리 방침과 이용약관을 구현하려고 피그마를 킨난 아래의 사진과 같이 수백 줄이 넘고 단순 Text 가 아닌 Bold, 번호 목록, 표 등 다양한 요소들이 들어있는 화면을 목격했다...이걸 모두 Compose 로 일일이 구현하는 건 팀 리소스를 많이 잡아먹고 좋은 방법이 아니라 생각했다. 그래서 PM 님에게 "노션에 작성하고 웹뷰로 보여주면 어떨까요?"라고 제안을 드렸고PM 님도 일일이 구현하는 건 좋지 않다고 판단하셔서 흔쾌히 승낙하셨다.구현 후 appetize 로 완성된 UI 를 보여드렸고 완벽하다고 확인받았다. 그러고 추후 정기 회의 도중 "희직 님... 저희 이용약관 웹뷰로 구현한 게 너무 신경 쓰여요.. 리젝 당할 수도 있을 것 같은데...".. TextField 의 VisualTransformation 를 사용해 입맛대로 보여주자 요구사항은 다음과 같다.앞에 symbol(+, -) 을 붙일 수 있다.맨 뒤에 "원"이 붙는다.커서가 "원" 뒤로 올 순 없다.3 자리마다 "," 가 붙는다.커서가 쉼표 앞 숫자에 위치할 땐 쉼표 뒤에 위치시킨다| 쉼표 앞 숫자 뒤에 위치 시키면 쉼표가 커서에 가려져서 보이지 않는다.| 사용에 있어서 중요한 부분은 아니지만 쉼표 하나도 정보인데 가려지는 게 마음에 들지 않았다. VisualTransformation위와 같이 TextField 에서 실제 Text 와 사용자에게 보여지는 Text 를 다르게 하기 위해선 VisualTransformation 을 사용하면 된다. https://developer.android.com/reference/kotlin/androidx/compose/ui/text/inp.. 이전 1 다음
