[feat/#101] 자녀 - 오늘의 여정 지도 뷰 구현 by seungjae708 · Pull Request #106 · Team-Kiero/Kiero-Android

seungjae708 · 2026-03-05T09:02:51Z

ISSUE

closed [feat] 자녀 - 오늘의 여정 지도 뷰 구현 #101

❗ WORK DESCRIPTION

자녀 플로우의 오늘의 여정 지도 컴포와 뷰 구현하였습니다.

상태별 리스트 아이템 (KidMapListItem)
별 모양 인디케이터와 이어지는 선을 그림 (KidMapTimelineNode)
진행중 상태 (KidMapOngoingBadge)
일정이 없을 때 노출 (KidMapEmptyView)
추가로 스낵바와 버튼, 아이콘 등의 디자인 변경사항 반영하였습니다.

📢 TO REVIEWERS

점선용 KieroDashedHorizontalDivider 추가 : 민성님이 만드신 수직 버전을 가로 버전으로도 만들어 두었습니다.
커스텀 수직 스크롤바 추가 (Modifier.verticalScrollbar) :
ModifierExt.kt에 LazyColumn을 위한 자체 수직 스크롤바 확장 함수 구현했습니다. https://stackoverflow.com/questions/66341823/jetpack-compose-scrollbars
기본으로 스크롤바 만들어져 있는 건 없는 것 같아서 요거 보면서 참고 했어여
Drop Shadow 적용했습니다.
-> KidJourneyScreen의 지도 이동 플로팅 버튼, 타임라인 진행 노드(KidMapTimelineNode)의 별 모양, 스톤 뱃지(KidMapStoneBadge) 테두리, KidMapEmptyView 아이콘 등

별 모양 아이콘에는 쉐도우가 적용이 안돼서 별 아이콘 모양을 따로 또 만들어서 거기에 적용시켰어요
KidMapStoneBadge나 KidMapEmptyView는 원 바깥에만 그림자가 져야 하는데, 그냥 하면 원 안쪽까지 그림자가 생겨서
원에 그냥 색 넣어뒀으요..

📸 SCREENSHOT

Screen_recording_20260305_182045.mp4

… 여정 지도 화면을 위한 UI 모델 및 상태 클래스 추가

…te` 구조 개선

…' into feat/#101-today-journey-map-view

vvan2

고생했으요!! 역시 대 승 재 .. 날이 갈수록 너무 잘해지네요(원래도 잘했지만)
이것이 38기 OB인가요!

vvan2 · 2026-03-05T12:49:06Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapOngoingBadge.kt

+            .border(
+                width = 1.dp,
+                color = KieroTheme.colors.main,
+                shape = RoundedCornerShape(100.dp)


p1) 여기 디자인 명세랑 다른거 같은데 확인 한 번 해줘잉

vvan2 · 2026-03-05T12:49:18Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapOngoingBadge.kt

+                color = KieroTheme.colors.main,
+                shape = RoundedCornerShape(100.dp)
+            )
+            .padding(horizontal = 8.dp, vertical = 2.dp)


p1) 여기두!

vvan2 · 2026-03-05T13:10:36Z

app/src/main/java/com/kiero/presentation/kid/journey/model/KidJourneyStoneType.kt

 import com.kiero.R
 import kotlinx.serialization.Serializable

-@Keep


p3) 안녕하세요, baselineprofile 세팅하다가 해당 파일에서 직렬화 오류나서 달아놓은 거긴한데요, 테스트 한번 해주실래요..? 없어도 잘되나

그냥 디버그 빌드는 잘되서 제거했는디 navigation 인자로 쓰여서 그런가?
다시 그대로 유지하는게 좋을 것 같네요

vvan2 · 2026-03-05T13:28:28Z

app/src/main/java/com/kiero/core/common/extension/ModifierExt.kt

+        val thicknessPx = thickness.toPx()
+        val thumbHeightPx = thumbHeight.toPx()
+        val paddingPx = verticalPadding.toPx()
+        val cornerRadius = CornerRadius(thicknessPx / 2f)


p2) thumbheight와 padding 관련 px 연산은 상관없지만, cornerRadius 는 drawWithContent 외부에서 연산하게해서 객체 생성을 줄이는 방법도 있을것 같습니당

저두 같은 의견입니다!
그래서

return drawWithCache { val thicknessPx = thickness.toPx() val thumbHeightPx = thumbHeight.toPx() val paddingPx = verticalPadding.toPx() ...

을 사용해보시는 것도 좋을 것 같습니다!

주완님이 더 위에 남기신 detrived도 좋지만
drawWithCache 후 onDrawWithContent안에 val canScroll = state.canScrollForward || state.canScrollBackward
을 옮겨 리컴포지션을 방지해도 좋을 것 같습니다!

drawWithContent는 매 프레임마다 실행되어서, 그때마다 size가 바뀌지 않는 한 항상 동일한 값임에도 불구하고ㅠtoPx() 연산과 CornerRadius 객체 생성이 반복이 되는 문제가 있었네요
drawWithCache 후 onDrawWithContent를 이용해서 size 변경 시에만 실행되도록 변경하겠습니다!!

vvan2 · 2026-03-05T13:36:39Z

app/src/main/java/com/kiero/core/common/extension/ModifierExt.kt

+        val scrollbarOffsetX = size.width - thicknessPx
+        val scrollbarOffsetY = paddingPx + (scrollProportion * maxScrollOffsetY)
+
+        if (animationAlpha > 0f) {


p2) 스크롤바가 보이고 사라질 때에 대해서 alpha 값이 0이면 계산을 최소화 할 수 있게 drawWithContent 생성 전에 ealry return 으로 빼주면 좋을 것 같습니다.

vvan2 · 2026-03-05T14:17:03Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapStoneBadge.kt

+) {
+    val borderColor = when (status) {


p2) SSE 적용되는 화면이기도 하고, 리스트 내부 요소들이(상태가) 자주 바뀌니까 remember 붙혀줘서 status 변할 때마다 매번 계산되지않게 해주는게 좋을것 같슴다

val borderColor = remember(status) { when (status) { ...

vvan2 · 2026-03-05T14:20:40Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapStoneBadge.kt

+        KidMapScheduleStatus.PENDING -> KieroTheme.colors.white
+    }
+
+    val statusLabel: Pair<String, Color>? = when (status) {


p3) borderColor 랑 묶어서 data class 로 관리하는게 편해 보이긴 하는데, label 요소는 기능상 nullable 하니까 분리해준거면 상관없을 것 같기도 하고...
근데 또 Pair사용하는 것보다는 data class 로 사용하는 게 좀 더 좋을 때가 많아서 그냥 borderColor 랑 묶어주는게 좋은 거 같기도 하고..
대승재 판단에 맡긴다

vvan2 · 2026-03-05T14:28:33Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapStoneBadge.kt

+        }
+
+        Text(
+            text = statusLabel?.first ?: "획득!",


p2) 그렇게 되면 여기서도 명시적으로 확인할 수 있으니까 키하하

vvan2 · 2026-03-05T14:32:33Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapStoneBadge.kt

+
+        Text(
+            text = statusLabel?.first ?: "획득!",
+            color = (statusLabel?.second ?: KieroTheme.colors.main).copy(


p2) 이것도 위에서 한번에 Transparent 로 해주면 alpha값 안건들여도 될듯요!

vvan2 · 2026-03-05T14:43:54Z

app/src/main/java/com/kiero/presentation/kid/journey/map/model/KidMapScheduleStatus.kt

+
+import kotlinx.serialization.Serializable
+
+@Serializable


p2) 왜 직렬화 했긔, 얘도 navigation에서 사용하나? 못찾겠어서 없으면 ㅂ 빼도 될듯

sonms

고생하셨습니다 !!!!! 코리 한 번 확인 부탁드리겠습니다!

sonms · 2026-03-06T05:58:10Z

app/src/main/java/com/kiero/core/common/extension/ModifierExt.kt

+        val thicknessPx = thickness.toPx()
+        val thumbHeightPx = thumbHeight.toPx()
+        val paddingPx = verticalPadding.toPx()
+        val cornerRadius = CornerRadius(thicknessPx / 2f)


저두 같은 의견입니다!
그래서

return drawWithCache { val thicknessPx = thickness.toPx() val thumbHeightPx = thumbHeight.toPx() val paddingPx = verticalPadding.toPx() ...

을 사용해보시는 것도 좋을 것 같습니다!

주완님이 더 위에 남기신 detrived도 좋지만
drawWithCache 후 onDrawWithContent안에 val canScroll = state.canScrollForward || state.canScrollBackward
을 옮겨 리컴포지션을 방지해도 좋을 것 같습니다!

sonms · 2026-03-06T06:02:52Z

app/src/main/java/com/kiero/core/designsystem/component/KieroSnackbar.kt

 @Composable
 fun KieroSnackbar(
    message: String,
    modifier: Modifier = Modifier,
    contentPadding: Dp = 16.dp,
 ) {
    Box(
        modifier = modifier
            .fillMaxWidth()
-            .clip(RoundedCornerShape(12.dp))
-            .background(KieroTheme.colors.schedule1)
+            .clip(RoundedCornerShape(999.dp))


저희 스낵바 변경되었나요..?

변경됐지렁이

sonms · 2026-03-06T06:03:37Z

app/src/main/java/com/kiero/presentation/kid/journey/fire/model/KidFireUiModel.kt


 data class KidFireUiModel(
-    val earnedStones: List<StoneUiType> = listOf(),
+    val earnedStones: List<KidJourneyStoneType> = listOf(),


p2: List는 가변 콜렉션 (UnStable) 으로 불필요한 리컴포지션이 발생할 수 있습니다!

ImmutableList와 PersistentList의 차이를 확인하시고 어떤게 좋을지 고민하셔서 선택해주세요 😊

sonms · 2026-03-06T06:13:05Z

app/src/main/java/com/kiero/presentation/kid/journey/fire/model/KidFireUiModel.kt

 fun ScheduleFireModel.toUiModel(): KidFireUiModel {
    return KidFireUiModel(
-        earnedStones = this.gotStones.map { StoneUiType.valueOf(it) },
+        earnedStones = this.gotStones.map { KidJourneyStoneType.valueOf(it) },
        earnedCoin = this.earnedCoinAmount
    )
 }


p2: 음 자세한 사항 확인은 못했긴한데..
서버에서 내려준 문자열it이 Enum 에 정해진 이름과 정확히 일치하지않으면 크래시가 발생할 위험이 있어요

그래서

변환 시도 후 에러는 null로 반환

fun ScheduleFireModel.toUiModel(): KidFireUiModel { return KidFireUiModel( earnedStones = this.gotStones.mapNotNull { stoneString -> runCatching { KidJourneyStoneType.valueOf(stoneString) }.getOrNull() }, earnedCoin = this.earnedCoinAmount ) }

그냥 있는거 찾기

fun ScheduleFireModel.toUiModel(): KidFireUiModel { return KidFireUiModel( earnedStones = this.gotStones.mapNotNull { stoneString -> KidJourneyStoneType.entries.find { it.name == stoneString } }, earnedCoin = this.earnedCoinAmount ) }

확인 후 편하신거 사용하시면 좋을 것 같습니다!

sonms · 2026-03-06T06:15:11Z

app/src/main/java/com/kiero/presentation/kid/journey/map/component/KidMapEmptyView.kt

+                            shape = CircleShape,
+                            shadow = Shadow(
+                                radius = 8.dp,
+                                spread = 0.dp,
+                                color = KieroTheme.colors.main,
+                                offset = DpOffset(x = 0.dp, y = 0.dp)


p3: 제가 알기론 기본값이 존재하는걸로 아는데 0을 넣으신 이유가 있으실까요?
괜찮으시다면 제거하여 가독성을 높여 필요한 사용 부분만 명확하게 해주시면 더욱 좋을 것 같습니다!

sonms · 2026-03-06T07:08:27Z

app/src/main/java/com/kiero/presentation/kid/journey/map/model/KidMapItemUiModel.kt

+package com.kiero.presentation.kid.journey.map.model
+
+import com.kiero.presentation.kid.journey.model.KidJourneyStoneType
+


p2: @immutable 을 명시적으로 붙여주면 좋을 것 같아요

물론 지금은 val이기도 하고 원시타입 및 enum은 클래스긴 하지만 상태가 변할 수 없어서 stable이라 괜찮긴하지만 명시적 그리고

val 은 재할당 불가를 의미할 뿐 내부에 가변 상태를 가질 수 있기 때문입니다잉

sonms · 2026-03-06T07:12:04Z

app/src/main/java/com/kiero/presentation/kid/journey/map/state/KidMapContract.kt

+    val schedules: ImmutableList<KidMapItemUiModel> = persistentListOf()
+) {
+    companion object {
+        fun FAKE() = KidMapState(


p2: 우선 함수는 카멜케이스죵? 소문자 부탁드리고

함수로 사용할 때는 매번 새로운 객체가 필요할 때에요
불변 객체 하나를 돌려 쓸 때에는 val fake로 만들어서 매번 생성할 필요없이 재사용 가능해요!

지금은 val fake가 좋아보입니다!

sonms · 2026-03-06T07:16:34Z

app/src/main/java/com/kiero/presentation/kid/journey/map/viewModel/KidMapViewModel.kt

+
+    private val _state = MutableStateFlow<UiState<KidMapState>>(
+        UiState.Success(
+            KidMapState.FAKE().copy(date = map.date)


KidMapState.FAKE().copy(date = map.date)
-> 불필요한 객체를 생성하고 있죵?
=> 원본 가짜 객체 생성 후 다시 copy하여 필요한 객체가 재생성

KidMapState.FAKE.copy(date = map.date)
-> 변수를 바로 참조 가능해요!
=> 이미 만들어져있는 변수에 진짜 필요한 객체 1번만 생성

sonms · 2026-03-06T07:19:54Z

app/src/main/res/drawable/ic_kid_map_line.xml

p2: 이거 음 백터로 뽑지말고 충분히 native로 만들 수 있을 것 같은데 어떻게 생각하시나염?

구현전에 아요꺼 구경했는디
벡터로 뽑았길래.. 키하하

sonms · 2026-03-06T07:20:43Z

app/src/main/res/drawable/img_kid_map_background.png

이거 저만 이상하게 보이는 건가요..? 격자 무늬 뭔띠

안스에서 볼땐 괜찮은데 뭐지..

… 내 `FAKE` 데이터를 함수에서 프로퍼티로 변경

… 최적화

seungjae708 added 18 commits March 3, 2026 16:52

feat/#101: KidJourneyActionButton 아이콘 설정 로직 변경 및 테마 색상 수정

7311c09

feat/#101: KieroButtonLarge 내 텍스트 띄어쓰기 수정

eeb2c95

feat/#101: KidJourneyScreen 내 지도 이동 버튼 UI 추가 및 스케줄 표시 로직 개선

dea775e

feat/#101: 자녀 여정 지도 화면 추가 및 네비게이션 연결

7f5c56f

feat/#101: KieroSnackbar 디자인 수정

b246af3

feat/#101: KidMapScreen 내 날짜 데이터 전달 로직 추가 및 UI 구현

d8177d5

feat/#101: StoneUiType을 KidJourneyStoneType으로 명칭 변경 및 관련 로직 수정

88b6861

add/#101: 자녀 여정 지도 관련 아이콘(ic_kid_map_line, ic_kid_map_star) 추가

a98a0ed

feat/#101: KidMapState, KidMapItemModel, MapScheduleStatus 등 자녀…

9daa04c

… 여정 지도 화면을 위한 UI 모델 및 상태 클래스 추가

feat/#101: 자녀 여정 지도 내 일정 리스트 아이템 컴포넌트 구현

a8b78fc

feat/#101: MapScheduleStatus 및 KidMapItemModel 명칭 변경 및 `KidMapSta…

abe063c

…te` 구조 개선

feat/#101: KidMapScreen 내 여정 리스트 UI 구현 및 KidMapEmptyView 추가

e6e5b80

feat/#101: KidMapScreen 내 modifier 파라미터 추가 및 적용

b023663

feat/#101: KidMapScreen 내 일정 리스트 UI 간격 및 패딩 수정

2c0d69e

Merge remote-tracking branch 'origin/feat/#101-today-journey-map-view…

f312e71

…' into feat/#101-today-journey-map-view

feat/#101: MainAppState 내 navigateToMap 메서드 추가

9b9507d

feat/#101: verticalScrollbar 확장 함수 추가 및 KidMapScreen UI 개선

c722559

feat/#101: KidMapTimelineNode 및 KidMapStoneBadge의 그림자 반경(radius) 수정

78e0710

seungjae708 added this to the [키어로] 1차 스프린트 milestone Mar 5, 2026

seungjae708 self-assigned this Mar 5, 2026

seungjae708 added feature ✨ 신규 기능 구현 ⭐승재 승재 전용 라벨 labels Mar 5, 2026

seungjae708 linked an issue Mar 5, 2026 that may be closed by this pull request

[feat] 자녀 - 오늘의 여정 지도 뷰 구현 #101

Open

1 task

seungjae708 requested review from a team, dmp100, sonms and vvan2 and removed request for a team March 5, 2026 09:07

vvan2 reviewed Mar 5, 2026

View reviewed changes

sonms approved these changes Mar 6, 2026

View reviewed changes

seungjae708 added 10 commits March 8, 2026 21:34

refactor/#101: KidMapState, KidJourneyState, KidFireResultState…

7d60c5b

… 내 `FAKE` 데이터를 함수에서 프로퍼티로 변경

refactor/#101: KidMapItemUiModel에 @Immutable 어노테이션 추가

9b7fd9d

refactor/#101: KidMapScheduleStatus에서 Serializable 어노테이션 제거

f075928

refactor/#101: KidFireUiModel 내 earnedStones를 ImmutableList로 변경

e4bcd27

refactor/#101: KidMapListItem 내 텍스트 색상 결정 로직을 변수로 분리하여 가독성 개선

b10c8b0

refactor/#101: KidMapStoneBadge 내 UI 상태 관리 로직 리팩터링 및 remember를 통한…

2a18483

… 최적화

refactor/#101: KidMapOngoingBadge 디자인 수정

65b322f

refactor/#101: Shadow 설정 코드 간소화

4f774e7

refactor/#101: drawWithContent를 drawWithCache로 변경 및 로직 수정

e9ba963

refactor/#101: KidJourneyStoneType에 @Keep 어노테이션 다시 추가

3850b57

		package com.kiero.presentation.kid.journey.map.model

		import com.kiero.presentation.kid.journey.model.KidJourneyStoneType

Conversation

seungjae708 commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ISSUE

❗ WORK DESCRIPTION

📢 TO REVIEWERS

📸 SCREENSHOT

Uh oh!

vvan2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonms left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

seungjae708 commented Mar 5, 2026 •

edited

Loading