[UI/YAF-79] 알람 설정 시 사운드 설정을 할 수 있다 #49

DongChyeon · 2025-01-19T17:35:58Z

Related issue 🛠

closed #48

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

🐞 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 ✏️

default.mp4

알람 미루기, 사운드 설정 바텀시트 상단 패딩값 수정
Slider 구현
사운드 설정 바텀시트 연동

Uncompleted Tasks 😅

N/A

To Reviewers 📢

val snoozeBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val soundBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()

AlarmSnoozeBottomSheet(
    isSnoozeEnabled = snoozeState.isSnoozeEnabled,
    snoozeIntervalIndex = snoozeState.snoozeIntervalIndex,
    snoozeCountIndex = snoozeState.snoozeCountIndex,
    snoozeIntervals = snoozeState.snoozeIntervals,
    snoozeCounts = snoozeState.snoozeCounts,
    onSnoozeToggle = { eventDispatcher(AlarmAddEditContract.Action.ToggleSnoozeEnabled) },
    onIntervalSelected = { index -> eventDispatcher(AlarmAddEditContract.Action.UpdateSnoozeInterval(index)) },
    onCountSelected = { index -> eventDispatcher(AlarmAddEditContract.Action.UpdateSnoozeCount(index)) },
    onComplete = {
        scope.launch {
            snoozeBottomSheetState.hide()
        }.invokeOnCompletion {
            eventDispatcher(AlarmAddEditContract.Action.ToggleSnoozeSettingBottomSheetOpen)
        }
    },
    isSheetOpen = snoozeState.isBottomSheetOpen,
    onDismiss = {
        scope.launch {
            snoozeBottomSheetState.hide()
        }.invokeOnCompletion {
            eventDispatcher(AlarmAddEditContract.Action.ToggleSnoozeSettingBottomSheetOpen)
        }
    },
)

AlarmSoundBottomSheet(
    isVibrationEnabled = state.soundState.isVibrationEnabled,
    isSoundEnabled = state.soundState.isSoundEnabled,
    soundVolume = state.soundState.soundVolume,
    soundIndex = state.soundState.soundIndex,
    sounds = state.soundState.sounds,
    onVibrationToggle = { eventDispatcher(AlarmAddEditContract.Action.ToggleVibrationEnabled) },
    onSoundToggle = { eventDispatcher(AlarmAddEditContract.Action.ToggleSoundEnabled) },
    onVolumeChanged = { eventDispatcher(AlarmAddEditContract.Action.UpdateSoundVolume(it)) },
    onSoundSelected = { eventDispatcher(AlarmAddEditContract.Action.UpdateSoundIndex(it)) },
    onComplete = {
        scope.launch {
            soundBottomSheetState.hide()
        }.invokeOnCompletion {
            eventDispatcher(AlarmAddEditContract.Action.ToggleSoundSettingBottomSheetOpen)
        }
    },
    isSheetOpen = state.soundState.isBottomSheetOpen,
    onDismiss = {
        scope.launch {
            soundBottomSheetState.hide()
        }.invokeOnCompletion {
            eventDispatcher(AlarmAddEditContract.Action.ToggleSoundSettingBottomSheetOpen)
        }
    },
)

바텀 시트 하나당 BottomSheetState 관리해야 되는게 별로인 것 같아서
나중에 ModalBottomSheetLayout 으로 마이그레이션 고려중입니다...

앞으로 한 화면에 BottomSheet가 여러개면 BottomSheetState 도 여러 개가 될 것 같아서
더 좋은 의견 있으면 말씀해주세요.

MoonsuKang

수고하셨습니다.
ModalBottomSheetLayout로 마이그레이션 밖에 생각 안나긴 하네요
음 Enum type SNOOZE, SOUND 정의해서 type 별로 처리하는 방법도 추가하면 좋을듯?

MoonsuKang · 2025-01-20T04:09:35Z

core/ui/src/main/java/com/yapp/ui/component/slider/Slider.kt

p3
파일명?

전부 다 Orbit 접두사 쓰도록 바꿀까요??

네네 공통 컴포넌트는 Orbit 접두사 쓰는걸로 하죠!

MoonsuKang · 2025-01-20T04:22:01Z

core/ui/src/main/java/com/yapp/ui/component/slider/Slider.kt

+            .onSizeChanged {
+                    size ->
+                sliderSize = size
+                thumbX = startOffset + (value / 100f) * (sliderSize.width - startOffset * 2)
+            },


p4
slidersize가 변경될때마다 thumbx를 초기화한다? 라고 이해하면 될까요?

사이즈가 바뀔일은 없으므로
최초 sliderSize와 thumbX를 받아오는 부분을 저기에 넣었었습니다.

현재 코드는 로직 수정했습니다.

MoonsuKang · 2025-01-20T04:27:11Z

core/ui/src/main/java/com/yapp/ui/component/slider/Slider.kt

+        Canvas(
+            modifier = modifier
+                .fillMaxWidth()
+                .height(trackHeight)
+                .align(Alignment.Center)
+                .clip(RoundedCornerShape(100.dp)),
+        ) {
+            val totalWidth = size.width
+            val activeWidth = thumbX
+
+            drawRect(
+                color = activeBarColor,
+                size = size.copy(width = activeWidth),
+            )
+
+            drawRect(
+                color = inactiveBarColor,
+                topLeft = Offset(activeWidth, 0f),
+                size = size.copy(width = totalWidth - activeWidth),
+            )
+        }
+
+        Canvas(
+            modifier = modifier
+                .fillMaxWidth()
+                .height(thumbSize)


p2
칸바를 두개 사용해서 트랙이랑 슬라이더를 그리고 있잖아요?
그러면 제가 생각하기엔 overDraw인거 같은데 혹시 단일 canva 내에서 처리하도록 해보심이 어떠십니까?
참고로 이런 것도 있음

fun drawRoundRect( brush: Brush, topLeft: Offset = Offset.Zero, size: Size = this.size.offsetSize(topLeft), cornerRadius: CornerRadius = CornerRadius.Zero, @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1.0f, style: DrawStyle = Fill, colorFilter: ColorFilter? = null, blendMode: BlendMode = DefaultBlendMode )

@Composable fun OrbitSlider( value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, trackHeight: Dp = 6.dp, thumbSize: Dp = 22.dp, thumbColor: Color = Color.White, inactiveBarColor: Color = OrbitTheme.colors.gray_600, activeBarColor: Color = OrbitTheme.colors.main, ) { val thumbRadius = thumbSize.toPx() / 2 var sliderWidth by remember { mutableFloatStateOf(0f) } val startOffset = thumbRadius + 1.dp.toPx() var thumbX = remember(value, startOffset, sliderWidth) { startOffset + (value / 100f) * (sliderWidth - startOffset * 2) } var isDragging by remember { mutableStateOf(false) } Canvas( modifier = modifier .fillMaxWidth() .height(thumbSize) .pointerInput(Unit) { detectTapGestures( onPress = { offset -> isDragging = isInCircle( offset.x, offset.y, thumbX, thumbRadius, thumbRadius, ) }, ) } .pointerInput(Unit) { detectHorizontalDragGestures( onDragEnd = { isDragging = false }, ) { _, dragAmount -> if (isDragging) { thumbX += dragAmount thumbX = thumbX.coerceIn(startOffset, sliderWidth - startOffset) val newValue = (((thumbX - startOffset) / (sliderWidth - 2 * startOffset)) * 100) .toInt() .coerceIn(0, 100) onValueChange(newValue) } } }, ) { sliderWidth = size.width val normalizedThumbX by derivedStateOf { thumbX.coerceIn(startOffset, sliderWidth - startOffset) } val activeWidth = (normalizedThumbX - startOffset).coerceAtLeast(0f) drawRoundRect( color = activeBarColor, size = Size(activeWidth + 3.dp.toPx(), trackHeight.toPx()), topLeft = Offset(0f, (size.height - trackHeight.toPx()) / 2), cornerRadius = CornerRadius(100.dp.toPx(), 100.dp.toPx()), ) drawRoundRect( color = inactiveBarColor, size = Size(size.width - activeWidth - 5.dp.toPx(), trackHeight.toPx()), topLeft = Offset(activeWidth + 2.dp.toPx(), (size.height - trackHeight.toPx()) / 2), cornerRadius = CornerRadius(100.dp.toPx(), 100.dp.toPx()), ) drawCircle( color = thumbColor, radius = thumbSize.toPx() / 2, center = Offset(normalizedThumbX, size.height / 2), ) } }

canvas 하나만 쓰도록 변경 완료!!

MoonsuKang · 2025-01-20T04:28:36Z

core/ui/src/main/java/com/yapp/ui/component/slider/Slider.kt

+                .height(trackHeight)
+                .align(Alignment.Center),
+        ) {
+            val normalizedThumbX = thumbX.coerceIn(startOffset, sliderSize.width - startOffset)


p4

Suggested change

val normalizedThumbX = thumbX.coerceIn(startOffset, sliderSize.width - startOffset)

val normalizedThumbX by derivedStateOf {

thumbX.coerceIn(startOffset, sliderSize.width - startOffset)

}

위와 동일

MoonsuKang · 2025-01-20T04:32:00Z

feature/home/src/main/java/com/yapp/alarm/AlarmAddEditViewModel.kt

 import com.yapp.ui.base.BaseViewModel
 import dagger.hilt.android.lifecycle.HiltViewModel
-import kotlinx.coroutines.launch
 import javax.inject.Inject

 @HiltViewModel
 class AlarmAddEditViewModel @Inject constructor() : BaseViewModel<AlarmAddEditContract.State, AlarmAddEditContract.SideEffect>(
    initialState = AlarmAddEditContract.State(),
 ) {
    fun processAction(action: AlarmAddEditContract.Action) {


ㅋㅋ 상태가 쫌 많긴 하네요

DongChyeon added 6 commits January 19, 2025 23:32

[UI/#48] OrbitSlider 컴포넌트 구현

d33a5c2

[UI/#48] OrbitSlider 컴포넌트 활성화 바 최소너비 1.dp 로 설정

cbafb28

[UI/#48] AlarmSnoozeBottomSheet 상단 패딩 값 20.dp -> 26.dp 수정

f99dc64

[UI/#48] OrbitSlider 컴포넌트 inactiveBar가 끝까지 차지하지 않는 문제 수정

99673d6

[UI/#48] AlarmSoundBottomSheet 컴포넌트 구현

179b2ae

[FEAT/#48] AlarmSoundBottomSheet 연동

33bd138

DongChyeon added 📱 UI 사용자 인터페이스 관련 작업 💪 동현동현동현동현동현 labels Jan 19, 2025

DongChyeon requested a review from MoonsuKang January 19, 2025 17:35

DongChyeon self-assigned this Jan 19, 2025

[UI/#48] AlarmDayButton 선택 시 테두리 색 변경

85590ea

MoonsuKang reviewed Jan 20, 2025

View reviewed changes

DongChyeon added 3 commits January 20, 2025 15:14

[REFACTOR/#48] OrbitSlider 캔버스 하나만 사용하도록 수정

0237a14

[RENAME/#48] 커스텀 컴포넌트의 경우 파일명 앞에 Orbit을 붙임

d1e7abc

[REFACTOR/#48] 여러 바텀 시트를 하나의 바텀 시트 상태로 관리

5aa3478

MoonsuKang approved these changes Jan 20, 2025

View reviewed changes

DongChyeon merged commit 1ee79e2 into develop Jan 20, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI/YAF-79] 알람 설정 시 사운드 설정을 할 수 있다 #49

[UI/YAF-79] 알람 설정 시 사운드 설정을 할 수 있다 #49

DongChyeon commented Jan 19, 2025 •

edited

Loading

MoonsuKang left a comment

MoonsuKang Jan 20, 2025

DongChyeon Jan 20, 2025

MoonsuKang Jan 20, 2025

MoonsuKang Jan 20, 2025

DongChyeon Jan 20, 2025

MoonsuKang Jan 20, 2025

DongChyeon Jan 20, 2025

MoonsuKang Jan 20, 2025

DongChyeon Jan 20, 2025

MoonsuKang Jan 20, 2025

[UI/YAF-79] 알람 설정 시 사운드 설정을 할 수 있다 #49

[UI/YAF-79] 알람 설정 시 사운드 설정을 할 수 있다 #49

Conversation

DongChyeon commented Jan 19, 2025 • edited Loading

Related issue 🛠

CheckPoint ✅

Work Description ✏️

Uncompleted Tasks 😅

To Reviewers 📢

MoonsuKang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DongChyeon commented Jan 19, 2025 •

edited

Loading