feature: 일기 가이드 ui

core/designsystem/src/main/java/com/teamoffroad/core/designsystem/theme/Color.kt

@@ -80,4 +80,5 @@ val SelectedCharacterText = Color(0xFFFFF7E7)
 val BottomBar = Color(0xFF010101)
 val TooltipTitle = Color(0xFF595959)
 val DiaryWeekItem = Color(0xFF919191)
-val DiaryButton = Color(0xFFDFDEF1)
+val DiaryButton = Color(0xFFDFDEF1)
+val DiaryProgressBar = Color(0xFF797979)

feature/diary/src/main/java/com/teamoffroad/feature/diary/component/DiaryHintDialog.kt

@@ -0,0 +1,118 @@
+package com.teamoffroad.feature.diary.component
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.teamoffroad.core.designsystem.component.clickableWithoutRipple
+import com.teamoffroad.core.designsystem.theme.Black
+import com.teamoffroad.core.designsystem.theme.OffroadTheme
+import com.teamoffroad.core.designsystem.theme.Sub
+import com.teamoffroad.core.designsystem.theme.White
+import com.teamoffroad.offroad.feature.diary.R
+import kotlinx.coroutines.launch
+
+@Composable
+fun DiaryHintDialog(
+    modifier: Modifier = Modifier,
+    firstPage: Int = 0,
+    secondPage: Int = 1,
+    onCancelClick: (Boolean) -> Unit,
+) {
+    val coroutineScope = rememberCoroutineScope()
+    val pagerState = rememberPagerState(initialPage = firstPage, pageCount = { secondPage + 1 })
+
+    BackHandler(enabled = pagerState.currentPage == firstPage || pagerState.currentPage == secondPage) {
+        coroutineScope.launch {
+            when (pagerState.currentPage) {
+                0 -> onCancelClick(false)
+                1 -> pagerState.animateScrollToPage(
+                    pagerState.currentPage - 1,
+                )
+            }
+        }
+    }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(Black.copy(alpha = 0.8f))
+    ) {
+        Image(
+            modifier = Modifier
+                .padding(top = 65.dp, bottom = 40.dp)
+                .padding(end = 20.dp)
+                .align(Alignment.End)
+                .clickableWithoutRipple { onCancelClick(false) },
+            painter = painterResource(id = R.drawable.ic_diary_dialog_close),
+            contentDescription = "close"
+        )
+        HorizontalPager(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.Top,
+            state = pagerState,
+            userScrollEnabled = false,
+        ) { page ->
+            when (page) {
+                0 -> DiaryHintFirstScreen()
+                1 -> DiaryHintSecondScreen()
+            }
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 52.dp, bottom = 77.dp),
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            DiaryHintProgressIndicator(animateActive = pagerState.currentPage >= 0)
+            Spacer(modifier = Modifier.width(7.dp))
+            DiaryHintProgressIndicator(animateActive = pagerState.currentPage >= 1)
+
+        }
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 24.dp)
+                .padding(bottom = 25.dp)
+                .background(color = Sub, shape = RoundedCornerShape(5.dp))
+                .fillMaxWidth()
+                .clickableWithoutRipple {
+                    when (pagerState.currentPage) {
+                        0 -> coroutineScope.launch {
+                            pagerState.animateScrollToPage(pagerState.currentPage + 1)
+                        }
+
+                        1 -> {
+                            onCancelClick(false)
+                            //TODO. 튜토리얼완료 api 쏘기
+                        }
+                    }
+                },
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                modifier = Modifier.padding(vertical = 14.dp),
+                text = stringResource(id = R.string.diary_dialog_next),
+                color = White,
+                style = OffroadTheme.typography.textRegular,
+            )
+        }
+    }
+}

feature/diary/src/main/java/com/teamoffroad/feature/diary/component/DiaryHintFirstScreen.kt

@@ -0,0 +1,49 @@
+package com.teamoffroad.feature.diary.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.teamoffroad.core.designsystem.theme.OffroadTheme
+import com.teamoffroad.core.designsystem.theme.White
+import com.teamoffroad.offroad.feature.diary.R
+
+@Composable
+fun DiaryHintFirstScreen(
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Image(
+            modifier = Modifier
+                .height(220.dp)
+                .padding(bottom = 40.dp),
+            painter = painterResource(id = R.drawable.img_diary_dialog_dummy),
+            contentDescription = "dummy"
+        )
+        Text(
+            modifier = Modifier.padding(bottom = 24.dp),
+            textAlign = TextAlign.Center,
+            text = stringResource(id = R.string.diary_dialog_hint_first_title),
+            color = White,
+            style = OffroadTheme.typography.textRegular,
+        )
+        Text(
+            textAlign = TextAlign.Center,
+            text = stringResource(id = R.string.diary_dialog_hint_first_content),
+            color = White,
+            style = OffroadTheme.typography.textRegular,
+        )
+    }
+}

feature/diary/src/main/java/com/teamoffroad/feature/diary/component/DiaryHintProgressIndicator.kt

@@ -0,0 +1,34 @@
+package com.teamoffroad.feature.diary.component
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.teamoffroad.core.designsystem.theme.DiaryProgressBar
+import com.teamoffroad.core.designsystem.theme.White
+
+@Composable
+fun DiaryHintProgressIndicator(
+    modifier: Modifier = Modifier,
+    animateActive: Boolean,
+) {
+    val animatedColor by animateColorAsState(
+        targetValue = if (animateActive) White else DiaryProgressBar,
+        animationSpec = tween(durationMillis = 600),
+        label = "progressIndicator"
+    )
+
+    Box(modifier = modifier) {
+        HorizontalDivider(
+            modifier = Modifier
+                .width(18.dp),
+            thickness = 4.dp,
+            color = animatedColor,
+        )
+    }
+}

feature/diary/src/main/java/com/teamoffroad/feature/diary/component/DiaryHintSecondScreen.kt

@@ -0,0 +1,49 @@
+package com.teamoffroad.feature.diary.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.teamoffroad.core.designsystem.theme.OffroadTheme
+import com.teamoffroad.core.designsystem.theme.White
+import com.teamoffroad.offroad.feature.diary.R
+
+@Composable
+fun DiaryHintSecondScreen(
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Image(
+            modifier = Modifier
+                .height(220.dp)
+                .padding(bottom = 40.dp),
+            painter = painterResource(id = R.drawable.img_diary_dialog_dummy),
+            contentDescription = "dummy"
+        )
+        Text(
+            modifier = Modifier.padding(bottom = 24.dp),
+            textAlign = TextAlign.Center,
+            text = stringResource(id = R.string.diary_dialog_hint_second_title),
+            color = White,
+            style = OffroadTheme.typography.textRegular,
+        )
+        Text(
+            textAlign = TextAlign.Center,
+            text = stringResource(id = R.string.diary_dialog_hint_second_content),
+            color = White,
+            style = OffroadTheme.typography.textRegular,
+        )
+    }
+}

feature/diary/src/main/java/com/teamoffroad/feature/diary/presentation/DiaryHintDialogState.kt

@@ -0,0 +1,6 @@
+package com.teamoffroad.feature.diary.presentation
+
+interface DiaryHintDialogState {
+    data object HintDialogInVisible : DiaryHintDialogState
+    data object HintDialogVisible : DiaryHintDialogState
+}

feature/diary/src/main/java/com/teamoffroad/feature/diary/presentation/DiaryScreen.kt

@@ -1,5 +1,6 @@
 package com.teamoffroad.feature.diary.presentation
 
+import android.util.Log
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -23,6 +24,7 @@ import com.teamoffroad.core.designsystem.theme.Gray100
 import com.teamoffroad.core.designsystem.theme.ListBg
 import com.teamoffroad.core.designsystem.theme.Main1
 import com.teamoffroad.feature.diary.component.DiaryHeader
+import com.teamoffroad.feature.diary.component.DiaryHintDialog
 import com.teamoffroad.feature.diary.component.OrbDiary
 import com.teamoffroad.feature.diary.component.OrbDiaryEmpty
 import com.teamoffroad.offroad.feature.diary.R
@@ -54,28 +56,27 @@ fun DiaryScreen(
     }
 
     BackHandler {
-        viewModel.backButtonClickListener()
+        viewModel.updateNavigationBackState()
     }
 
-    Box(modifier = Modifier.fillMaxSize()) {
+    Box(modifier = Modifier.navigationPadding().fillMaxSize()) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .background(Main1)
-                .navigationPadding()
                 .actionBarPadding(),
         ) {
             NavigateBackAppBar(
                 text = stringResource(id = R.string.diary_back_home),
                 modifier = Modifier.padding(top = 20.dp)
             ) {
-                viewModel.backButtonClickListener()
+                viewModel.updateNavigationBackState()
             }
             DiaryHeader(
-                text = stringResource(id = R.string.diary_memory_ligth),
-                {}
-                //TODO.가이드버튼
-            )
+                text = stringResource(id = R.string.diary_memory_ligth)
+            ) {
+                viewModel.updateHintDialogState(true)
+            }
             HorizontalDivider(
                 color = Gray100,
                 thickness = 1.dp,
@@ -99,5 +100,12 @@ fun DiaryScreen(
                     )
             }
         }
+        when(diaryUiState.dialogVisibility) {
+            DiaryHintDialogState.HintDialogVisible -> {
+                DiaryHintDialog(
+                    onCancelClick = viewModel::updateHintDialogState
+                )
+            }
+        }
     }
 }

feature/diary/src/main/java/com/teamoffroad/feature/diary/presentation/DiaryUiState.kt

@@ -3,7 +3,8 @@ package com.teamoffroad.feature.diary.presentation
 data class DiaryUiState(
     val latestDiary: List<String> = emptyList(),
     val dailyHexCodes: Map<Int, List<String>> = mapOf(0 to emptyList()),
-    val firstDiaryMonth: Int = 0
+    val firstDiaryMonth: Int = 0,
+    val dialogVisibility: DiaryHintDialogState = DiaryHintDialogState.HintDialogInVisible,
 )
 
 sealed interface DiarySideEffect {