[개선] 공통 모듈에서 사용할 수 있는 UI 파일 분리

[tmdgh1592]

Issue

• related to #308

Overview (Required)

이전 PR을 분리하고자 새롭게 PR요청드립니다. 해당 PR에서 작업한 내용은 크게 2가지입니다.

IconToggleButton

IconToggleButton을 사용하기 위해서 중첩된 구조가 되어야 하는 부분을 개선하기 위해, 커스텀 IconToggleButton으로 감싸서 사용성과 가독성을 높였습니다.

기존 IconToggleButton을 사용하기 위해서는 다음과 같은 구조였습니다.

// before
IconToggleButton(
    checked = checked,
    onCheckedChange = onCheckedChange,
) {
    Icon(
        painter =
        if (bookmarked) {
            painterResource(id = checked_image)
        } else {
            painterResource(id = unchecked_image)
        },
        contentDescription = null,
        tint = if (checked) Purple01 else Gray
    )
}

// after
IconToggleButton(
    isChecked = checked,
    onCheckedChange = onCheckedChange,
    checkedImageRes = checked_image,
    uncheckedImageRes = unchecked_image,
)

RoundedImage

모서리가 둥근 이미지를 만들기 위해 매번 Surface로 감싸야 하는 번거로움을 줄이고자 RoundedImage로 분리하였습니다. imageSize, roundSize, border를 전달받을 수 있으며, imageSize를 별도로 전달하지 않을 경우 aspectRatio를 1:1 비율로 적용하도록 구현하였습니다.

// before
Surface(
    shape = RoundedCornerShape(16.dp),
    onClick = onClick,
) {
    Image(
        painter = painterResource(id = imageRes),
        contentDescription = null,
        modifier = Modifier.aspectRatio(1f)
    )
}

// after
RoundedImage(
    imageRes = imageRes,
    onClick = onClick,
)

or 

RoundedImage(
    imageRes = imageRes,
    border = BorderStroke(12.dp, Color.Green),
    onClick = onClick,
)

Links

• IconToggleButton
• RoundedImage

[github-actions[bot]]

Test Results

19 tests   19 :white_check_mark:  5s :stopwatch: 11 suites   0 :zzz: 11 files     0 :x:

Results for commit 1e07d29b.

:recycle: This comment has been updated with latest results.

[tmdgh1592]

@taehwandev 리뷰 감사합니다! 말씀해주신 것처럼 위 두 가지 컴포넌트는 우선은 한 곳에서만 사용되기도 하고, 공통 컴포넌트화 하기 애매한 부분이 있어서 원복시켜놓겠습니다.

---

이 외에 designsystem의 BottomLogo.kt에 2023으로 되어 있는 부분이 있습니다. 반면, 세션 화면에는 BottomLogo를 사용하지 않고 비슷하지만 별도로 함수가 만들어져 있어 2024으로 표시되고 있습니다.

2023년도가 의도된 것인지, 공통 컴포넌트를 사용하지 않아 불일치가 발생한 것인지 여부를 몰라서 따로 수정하지 않았는데, 말씀해주신다면 세션 화면에 있는 Footer도 공통 컴포넌트를 사용하도록 변경해놓겠습니다.

이 부분이 해당 PR에서 다루기 적합하지 않다고 생각되신다면, 변경사항이 없기 때문에 PR을 닫아주셔도 좋을 것 같습니다 🙇🙇

// BottomLogo.kt
@Composable
fun BottomLogo(color: Color = LightGray) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(BottomLogoHeight),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Droid Knights 2023",
            style = KnightsTheme.typography.labelMediumR,
            color = color,
        )
    }
}

// SessionScreen.kt
@Composable
private fun DroidKnightsFooter() {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 56.dp, bottom = 80.dp),
        text = stringResource(id = R.string.footer_text),
        style = KnightsTheme.typography.labelMediumR,
        color = Color.LightGray,
        textAlign = TextAlign.Center
    )
}

[taehwandev]

올려주신 내용은 별도의 내용으로 보이네요. 클로즈 하겠습니다.