[FEAT] 알람 아이템 정렬 기능을 구현합니다.

[DongChyeon]

Related issue 🛠

closed #188

어떤 변경사항이 있었나요?

• 🐞 BugFix Something isn't working
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (Junit, etc.)

CheckPoint ✅

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 컨벤션에 맞게 작성했습니다. (필수)
• merge할 브랜치의 위치를 확인해 주세요(main❌/develop⭕) (필수)
• Approve된 PR은 assigner가 머지하고, 수정 요청이 온 경우 수정 후 다시 push를 합니다. (필수)
• BugFix의 경우, 버그의 원인을 파악하였습니다. (선택)

Work Description ✏️

2025-03-04_12.32.19.mov

• 켜진 알람 순 정렬 기능 추가
• AlarmListItem 정렬 시 애니메이션 추가

Uncompleted Tasks 😅

N/A

To Reviewers 📢

[MoonsuKang]

훌륭하십니다 선생님

[MoonsuKang]

P4
혹시 DropdownMenuItem으로 안되나용?
https://developer.android.com/develop/ui/compose/components/menu?hl=ko

[DongChyeon]

결론적으로는

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun AlarmSortDropDownMenuItem(
    text: String,
    checked: Boolean,
    onClick: () -> Unit,
) {
    val interactionSource = remember { MutableInteractionSource() }

    CompositionLocalProvider(
        LocalRippleConfiguration provides RippleConfiguration(
            rippleAlpha = RippleAlpha(
                pressedAlpha = 1f,
                focusedAlpha = 1f,
                hoveredAlpha = 1f,
                draggedAlpha = 1f,
            ),
        ),
    ) {
        DropdownMenuItem(
            modifier = Modifier
                .width(162.dp)
                .clip(RoundedCornerShape(12.dp))
                .clickable(
                    interactionSource = interactionSource,
                    indication = ripple(
                        bounded = false,
                        color = OrbitTheme.colors.gray_600,
                    ),
                    onClick = onClick,
                )
                .background(
                    color = OrbitTheme.colors.gray_700,
                    shape = RoundedCornerShape(12.dp),
                ),
            onClick = onClick,
            interactionSource = interactionSource,
            text = {
                Text(
                    text = text,
                    style = OrbitTheme.typography.body1SemiBold,
                    color = OrbitTheme.colors.white,
                )
            },
            trailingIcon = {
                if (checked) {
                    Icon(
                        painter = painterResource(id = core.designsystem.R.drawable.ic_check),
                        contentDescription = "Icon",
                        tint = OrbitTheme.colors.white,
                    )
                }
            },
        )
    }
}

이런식으로 DropDownMenuItem으로도 동일한 UI를 구현 가능합니다.

하지만, 기존 DropDownMenuItem에 설정되어 있는 제약 조건도 있고, 추후 디자인이 바뀐다면 커스텀 컴포넌트를 만드는 게 더 대응하기 쉬울 거라 생각해서 해당 방식으로 구현했습니다.