[PC-92] Matching 화면 UI 구현 #11

tgyuuAn · 2024-12-25T16:16:19Z

PC-92

1. ⭐️ 변경된 내용

디자인 시스템 TopBar 컴포넌트 추가
디자인 시스템 Button 컴포넌트 추가
디자인 시스템 Color 값 맞지 않던 것 정정
common-ui모듈 추가 및 ModifierUtil 추가
Matching 화면 UI 구현

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

1. 버튼 컴포넌트

2. TopBar(GNB) 컴포넌트

3. Matching 화면 UI

2024-12-26.1.02.56.mov

3. 💡 알게된 부분

1. Compose의 ScrollBar 추가하기

핵심은 ListState를 받아서 화면에 보이는 FirstIndex와 LastIndex를 이용해서 현재 인덱스를 파악,

이후는 해당 리스트의 아이템 총 갯수를 이용해서 Height를 설정하는 것 같습니다.

그 외에는 투명화 애니메이션, 스크롤 바의 상단 및 하단 애니메이션이에요

@Composable
fun Modifier.verticalScrollbar(
    state: LazyListState,
    width: Dp = 6.dp,
    color: Color = PieceTheme.colors.light2,
): Modifier {

    val targetAlpha = if (state.isScrollInProgress) .7f else 0f
    val duration = if (state.isScrollInProgress) 150 else 1000

    val alpha by animateFloatAsState(
        targetValue = targetAlpha,
        animationSpec = tween(durationMillis = duration)
    )

    val firstIndex by animateFloatAsState(
        targetValue = state.layoutInfo.visibleItemsInfo.firstOrNull()?.index?.toFloat() ?: 0f,
        animationSpec = spring(stiffness = StiffnessMediumLow)
    )

    val lastIndex by animateFloatAsState(
        targetValue = state.layoutInfo.visibleItemsInfo.lastOrNull()?.index?.toFloat() ?: 0f,
        animationSpec = spring(stiffness = StiffnessMediumLow)
    )

    return drawWithContent {
        drawContent()

        val itemsCount = state.layoutInfo.totalItemsCount

        if (itemsCount > 0 && alpha > 0f) {
            val scrollbarTop = firstIndex / itemsCount * size.height
            val scrollBottom = (lastIndex + 1f) / itemsCount * size.height
            val scrollbarHeight = scrollBottom - scrollbarTop
            drawRoundRect(
                color = color,
                cornerRadius = CornerRadius(0.1f),
                topLeft = Offset(size.width - width.toPx(), scrollbarTop),
                size = Size(width.toPx(), scrollbarHeight),
                alpha = alpha
            )
        }
    }
}

레퍼런스 를 참조하였고,

저희 서비스에 맞게 너비를 6.dp로 고정 및 Radius를 추가하였습니다.

tgyuuAn · 2024-12-25T16:21:45Z

core/common-ui/src/main/java/com/puzzle/common/ui/ModifierUtil.kt

+fun Modifier.addFocusCleaner(
+    focusManager: FocusManager,
+    doOnClear: () -> Unit = {},
+): Modifier {
+    return this.pointerInput(Unit) {
+        detectTapGestures(
+            onTap = {
+                doOnClear()
+                focusManager.clearFocus()
+            },
+        )
+    }
+}


추후에 TextField를 사용하는 곳 외부를 클릭했을 때 키보드 포커스를 회수해가는 Modifier 입니닷

tgyuuAn · 2024-12-25T16:22:02Z

core/common-ui/src/main/java/com/puzzle/common/ui/ModifierUtil.kt

+@Composable
+fun Modifier.throttledClickable(
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    throttleTime: Long = 0L,
+): Modifier = composed {
+    var lastClickTime by remember { mutableLongStateOf(0L) }
+
+    this.clickable(enabled = enabled) {
+        val currentTime = System.currentTimeMillis()
+        if (currentTime - lastClickTime >= throttleTime) {
+            onClick()
+            lastClickTime = currentTime
+        }
+    }
+}


버튼 따당을 막기위해서 Throttle이 적용된 clickable 입니닷!

…ent를 Flow로 받도록 변경

sksowk156

허허 태규님!! 코멘트가 늦어서 죄송합니다... 허허...

sksowk156 · 2024-12-25T16:26:24Z

core/common-ui/src/main/java/com/puzzle/common/ui/ModifierUtil.kt

+    return this.pointerInput(Unit) {
+        detectTapGestures(
+            onTap = {
+                doOnClear()


혹시! 여기에 doOnClear() 에서 do는 강조를 의미하기 위한 것일까요?

혹시! 여기에 doOnClear() 에서 do는 강조를 의미하기 위한 것일까요?

앗 그냥 레퍼런스에 있는 코드 긁어온건데,

키보드 포커싱 가져오면서 수행할 로직이 있을 때 넣는 람다입니다.

네이밍이 별루인가요 ?!?!?!

아, 그렇군요! 제가 오해했던 것 같습니다!! 지금 네이밍도 충분히 괜찮은데, 'onFocusCleared'와 같은 이름은 어떻게 생각하시나요?! 이건 그냥 한번 생각해보시고 태규님이 결정해주셔도 좋을 것 같습니다!!

아, 그렇군요! 제가 오해했던 것 같습니다!! 지금 네이밍도 충분히 괜찮은데, 'onFocusCleared'와 같은 이름은 어떻게 생각하시나요?! 이건 그냥 한번 생각해보시고 태규님이 결정해주셔도 좋을 것 같습니다!!

지금 그런식으로 코드가 짜여져있어서 그런 식의 컨벤션을 따라가는 것이 일관성에 도움이 될 것 같아요!
바꿔놓고 머지하겠습니다~

sksowk156 · 2024-12-25T16:28:55Z

core/common-ui/src/main/java/com/puzzle/common/ui/ModifierUtil.kt

+fun Modifier.throttledClickable(
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    throttleTime: Long = 0L,


p4 : throttleClickable이면 throttleTime이 필수로 입력받을 수 있으면 좋을 것 같은데 어떻게 생각하시나요?!

p4 : throttleClickable이면 throttleTime이 필수로 입력받을 수 있으면 좋을 것 같은데 어떻게 생각하시나요?!

오 그런 것 같아요!!!!!! 수정해두겠습니다!!!

sksowk156 · 2024-12-26T13:29:25Z

feature/matching/src/main/java/com/puzzle/matching/MatchingScreen.kt

+                )
+
+                Text(
+                    text = "오픈 전",


p3 : 혹시 데이터를 state화 하는건 다음 작업 때 하시는 건가유?

p3 : 혹시 데이터를 state화 하는건 다음 작업 때 하시는 건가유?

맞습니다! 아직 스웨거가 안열려서 일단 UI만 했어용

sksowk156 · 2024-12-26T13:32:08Z

feature/matching/src/main/java/com/puzzle/matching/MatchingViewModel.kt

@@ -40,7 +41,9 @@ class MatchingViewModel @AssistedInject constructor(

    private fun processIntent(intent: MatchingIntent) {
        when (intent) {
-            else -> Unit
+            MatchingIntent.NavigateToMatchingDetail -> {
+                navigationHelper.navigate(NavigateTo(MatchingGraphDest.MatchingDetailRoute))


p4 : 저는 개인적으로 intent가 많아져 processIntent가 길어지면 가독성이 너무 떨어져서 처리하는 메서드를 따로 빼서 거기서 로직을 처리하는 방식으로 합니다! 이건 태규님이 작성하시면서 편하신 쪽으로 하셔도 좋을 것 같아유!

p4 : 저는 개인적으로 intent가 많아져 processIntent가 길어지면 가독성이 너무 떨어져서 처리하는 메서드를 따로 빼서 거기서 로직을 처리하는 방식으로 합니다! 이건 태규님이 작성하시면서 편하신 쪽으로 하셔도 좋을 것 같아유!

저도 메소드로 분리하는 것을 선호하는데 한줄짜리 코드라서 저렇게 하긴 했습니다!
일단 코드 일관성을 위해 분리해두겠습니다!

tgyuuAn added 7 commits December 25, 2024 22:55

[PC-92] Typography 네이밍 변경

9b0e5c9

[PC-92] TopBar 컴포넌트 추가

7e5b82a

[PC-92] Button 컴포넌트 추가

0c65494

[PC-92] 디자인 시스템 색상값 변경

92d77c3

[PC-92] common-ui 모듈 추가

acf0dc8

[PC-92] Modifier Util 추가

39529da

[PC-92] LazyColumn 스크롤 바 추가

2e71b28

tgyuuAn requested a review from sksowk156 December 25, 2024 16:16

tgyuuAn self-assigned this Dec 25, 2024

tgyuuAn force-pushed the feature/tgyuu/PC-92 branch from cf5ef32 to c241b7c Compare December 25, 2024 16:16

[PC-92] PieceSolidButton 높이 52dp 고정

91a693a

tgyuuAn force-pushed the feature/tgyuu/PC-92 branch from c241b7c to 91a693a Compare December 25, 2024 16:22

tgyuuAn commented Dec 25, 2024

View reviewed changes

[PC-92] 백그라운드 스레드에서 processIntent 호출 시 레이스 컨디션 생길 수 있으므로 Channel에 Int…

38c78dc

…ent를 Flow로 받도록 변경

sksowk156 reviewed Dec 26, 2024

View reviewed changes

tgyuuAn added 2 commits December 26, 2024 23:05

[PC-92] processIntent when절 메소드 분리

825c33f

[PC-92] throttledClickable에 throttleTime을 Mandantory로 변경

6d361ed

tgyuuAn force-pushed the feature/tgyuu/PC-92 branch from ed034e6 to 6d361ed Compare December 26, 2024 14:17

sksowk156 added 머지 해도될듯염🌟 현재 코드를 기존 코드에 합쳐도 될 것 같다라고 판단..! 🌟 and removed 리뷰 원해요🔥 피어의 리뷰를 기다리는 ing.. 🔥 labels Dec 26, 2024

[PC-000] doOnClear -> onFocusCleared 네이밍 변경

37a6778

tgyuuAn merged commit b7fa2da into develop Dec 26, 2024
1 check passed

tgyuuAn deleted the feature/tgyuu/PC-92 branch December 26, 2024 14:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PC-92] Matching 화면 UI 구현 #11

[PC-92] Matching 화면 UI 구현 #11

tgyuuAn commented Dec 25, 2024 •

edited by jira bot

Loading

tgyuuAn Dec 25, 2024

tgyuuAn Dec 25, 2024

sksowk156 left a comment

sksowk156 Dec 25, 2024

tgyuuAn Dec 26, 2024

sksowk156 Dec 26, 2024

tgyuuAn Dec 26, 2024

sksowk156 Dec 25, 2024

tgyuuAn Dec 26, 2024 •

edited

Loading

sksowk156 Dec 26, 2024

tgyuuAn Dec 26, 2024

sksowk156 Dec 26, 2024

tgyuuAn Dec 26, 2024

[PC-92] Matching 화면 UI 구현 #11

[PC-92] Matching 화면 UI 구현 #11

Conversation

tgyuuAn commented Dec 25, 2024 • edited by jira bot Loading

1. ⭐️ 변경된 내용

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

1. 버튼 컴포넌트

2. TopBar(GNB) 컴포넌트

3. Matching 화면 UI

3. 💡 알게된 부분

1. Compose의 ScrollBar 추가하기

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sksowk156 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

tgyuuAn Dec 26, 2024 • edited Loading

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

tgyuuAn commented Dec 25, 2024 •

edited by jira bot

Loading

tgyuuAn Dec 26, 2024 •

edited

Loading