[PC-292] 로그인 화면, 번호 인증 화면 ui 구현

[sksowk156]

PC-292

1. ⭐️ 변경된 내용

• login 페이지 ui 구현
• verification 페이지 ui 구현

2. 🖼️ 스크린샷(선택)

KakaoTalk_20250111_155255449.mp4

3. 💡 알게된 부분

4. 📌 이 부분은 꼭 봐주세요!

• timer 기능을

        timerJob = viewModelScope.launch {
            while (true) {
                delay(1000L)
                withState { currentState ->
                    if (currentState.remainingTimeInSec <= 0) {
                        setState {
                            copy(
                                remainingTimeInSec = 0,
                                verificationCodeStatus = VerificationState.VerificationCodeStatus.TIME_EXPIRED,
                            )
                        }
                        return@withState
                    }

                    setState {
                        copy(remainingTimeInSec = currentState.remainingTimeInSec - 1)
                    }
                }
            }
        }

이렇게 while(true)로 처리했어요! 혹시 더 좋은 방법이 있을까요?

[tgyuuAn]

진혁님 고생하셨습니다!!!!!!!!

코멘트에 제 생각을 가득 담아봤습니다!!

꼼꼼히 살펴보시고 의견 주세용~~~~~~~😋😋😋😋

[tgyuuAn]

p4)

서버 명세에 이미 해당 기능은 나와있는데, PieceApi에 아래와 같은 메서드 명으로 정의했어요.

아래와 같은 메서드 명으로 변경하는 것은 어떨까요 ?!

[sksowk156]

아하 api가 정의되어 있었군요! 좋아요!! 이 네이밍이 좋은 거 같아요!

[tgyuuAn]

p3) 불필요한 import는 지워도 될 것 같아요!!!!!!!

[sksowk156]

😭

[tgyuuAn]

p3)

이 부분 DesignSystem Component에 정의되어있는 버튼인데,

Component로 빼는 것은 어떨까요?

[sksowk156]

반영해두겠습니다!!

[tgyuuAn]

Padding을 사용하지 않고 Spacer를 사용한 이유는 무엇인가요 ?!

[sksowk156]

앗 그러네요! ui 상으로 padding으로 처리하는게 맞는 거 같아요...!!! 👍

[tgyuuAn]

p3)

제가 생각했을 때, 상단 패딩 68, 하단 패딩 189는 화면의 비율로 가져가야 할 것 같아요.

2025-01-11.4.21.34.mov

Suggested change

	Text(
	text = stringResource(R.string.verification_subtitle),
	style = PieceTheme.typography.bodySM,
	color = PieceTheme.colors.dark3,
	modifier = Modifier.fillMaxWidth(),
	)
	Spacer(modifier = Modifier.height(70.dp))
	PhoneNumberBody(
	isValidPhoneNumber = state.isValidPhoneNumber,
	hasStarted = state.hasStarted,
	onRequestVerificationCodeClick = onRequestVerificationCodeClick,
	)
	if (state.hasStarted) {
	Spacer(modifier = Modifier.height(32.dp))
	VerificationCodeBody(
	remainingTimeInSec = state.remainingTimeInSec,
	verificationCodeStatus = state.verificationCodeStatus,
	onVerifyClick = onVerifyClick,
	)
	}
	Spacer(modifier = Modifier.weight(1f))
	PieceSolidButton(
	label = stringResource(R.string.verification_submit),
	onClick = {
	onNextClick()
	},
	enabled = state.isVerified,
	modifier = Modifier.fillMaxWidth(),
	)
	Spacer(modifier = Modifier.height(10.dp))
	}
	Text(
	text = stringResource(R.string.verification_subtitle),
	style = PieceTheme.typography.bodySM,
	color = PieceTheme.colors.dark3,
	modifier = Modifier.fillMaxWidth(),
	)
	Spacer(modifier = Modifier.weight(0.7f))
	PhoneNumberBody(
	isValidPhoneNumber = state.isValidPhoneNumber,
	hasStarted = state.hasStarted,
	onRequestVerificationCodeClick = onRequestVerificationCodeClick,
	)
	VerificationCodeBody(
	remainingTimeInSec = state.remainingTimeInSec,
	verificationCodeStatus = state.verificationCodeStatus,
	onVerifyClick = onVerifyClick,
	modifier = Modifier.padding(top = if(state.hasStarted) 32.dp else 0.dp),
	)
	Spacer(modifier = Modifier.weight(1.9f))
	PieceSolidButton(
	label = stringResource(R.string.verification_submit),
	onClick = {
	onNextClick()
	},
	enabled = state.isVerified,
	modifier = Modifier.fillMaxWidth()
	.padding(bottom=10.dp),
	)
	}

는 어떨까요?

[sksowk156]

ui상 인증번호 받기를 누르면 보여주신 ui가 나오는데 받기를 누르기 전엔 아래와 같은 ui로 되어 있어요!

그래서 하단의 높이가 달라지는 순간이 있기 때문에 비율 값을 고정하긴 어려울 것 같아요! 그리고 디자이너님께서 상단 패딩을 기준으로 하단을 잡아달라고 하셔서 weight(1f)로 처리해두었습니다!

state.hasStarted는 인증번호를 요청했는지 유무를 나타내는 변수로 이것이 true이면 인증번호를 입력하는 란이 화면에 나타납니다!

뭔가 hasStarted 네이밍이 적절하지 않았던 거 같아요...!!
isAuthCodeRequested는 어떤가요??

[sksowk156]

상단이나 하단에 spacer가 아닌 패딩으로 처리가 필요한 부분들은 반영해두겠습니다!!

[tgyuuAn]

아하 그렇군요!

그럼 상단에는 고정값 패딩으로 가고 하단에만 weight(1f) 하면 될 것 같아요.

isAuthCodeRequested 너무 좋습니다!

[tgyuuAn]

이건 뭐할 때 쓰는 라이브러리 인가용 ??

[sksowk156]

BasicTextField를 쓸려고 한건데, BasicTextField는 기본 컴포넌트에요 Material에 TextField도 있는데 뭔가 제가 원하는데로 디자인이 잘 안되서 BasicTextField를 썼습니다!