[BOOK-273] feat: 커스텀 툴팁 적용

seoyoon513 · seoyoon513 · commit 65a0aedd8a71 · 2025-08-21T17:07:02.000+09:00
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/CustomTooltipBox.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/CustomTooltipBox.kt
@@ -0,0 +1,69 @@
+package com.ninecraft.booket.feature.record.component
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.ninecraft.booket.core.designsystem.ComponentPreview
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+import com.ninecraft.booket.feature.record.R
+
+@Composable
+internal fun CustomTooltipBox(
+    @StringRes messageResId: Int,
+) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        Box(
+            Modifier
+                .shadow(ReedTheme.radius.xs, RoundedCornerShape(ReedTheme.radius.xs), clip = false)
+                .background(
+                    ReedTheme.colors.contentPrimary,
+                    RoundedCornerShape(ReedTheme.radius.xs),
+                )
+                .padding(
+                    horizontal = ReedTheme.spacing.spacing3,
+                    vertical = ReedTheme.spacing.spacing2,
+                ),
+        ) {
+            Text(
+                text = stringResource(messageResId),
+                color = ReedTheme.colors.contentInverse,
+                style = ReedTheme.typography.label2Regular,
+            )
+        }
+        Box(
+            Modifier
+                .padding(start = 2.dp)
+                .size(ReedTheme.spacing.spacing3)
+                .offset(
+                    x = (-10).dp,
+                )
+                .graphicsLayer {
+                    rotationZ = 45f
+                    shadowElevation = 8.dp.toPx()
+                    clip = true
+                }
+                .background(ReedTheme.colors.contentPrimary),
+        )
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun CustomTooltipBoxPreview() {
+    ReedTheme {
+        CustomTooltipBox(messageResId = R.string.scan_tooltip_message)
+    }
+}
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterPresenter.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterPresenter.kt
@@ -32,7 +32,6 @@ import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
 import dagger.hilt.android.components.ActivityRetainedComponent
 import kotlinx.collections.immutable.toPersistentList
-import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 class RecordRegisterPresenter @AssistedInject constructor(
@@ -94,6 +93,8 @@ class RecordRegisterPresenter @AssistedInject constructor(
                 }
             }
         }
+        var isScanTooltipVisible by rememberRetained { mutableStateOf(true) }
+        var isImpressionGuideTooltipVisible by rememberRetained { mutableStateOf(true) }
 
         val ocrNavigator = rememberAnsweringNavigator<OcrScreen.OcrResult>(navigator) { result ->
             recordSentenceState.edit {
@@ -180,6 +181,7 @@ class RecordRegisterPresenter @AssistedInject constructor(
                 }
 
                 is RecordRegisterUiEvent.OnSentenceScanButtonClick -> {
+                    isScanTooltipVisible = false
                     ocrNavigator.goTo(OcrScreen)
                 }
 
@@ -188,6 +190,7 @@ class RecordRegisterPresenter @AssistedInject constructor(
                 }
 
                 is RecordRegisterUiEvent.OnImpressionGuideButtonClick -> {
+                    isImpressionGuideTooltipVisible = false
                     beforeSelectedImpressionGuide = selectedImpressionGuide
                     if (impressionState.text.isEmpty()) {
                         selectedImpressionGuide = ""
@@ -282,6 +285,8 @@ class RecordRegisterPresenter @AssistedInject constructor(
             isImpressionGuideBottomSheetVisible = isImpressionGuideBottomSheetVisible,
             isExitDialogVisible = isExitDialogVisible,
             isRecordSavedDialogVisible = isRecordSavedDialogVisible,
+            isScanTooltipVisible = isScanTooltipVisible,
+            isImpressionGuideTooltipVisible = isImpressionGuideTooltipVisible,
             sideEffect = sideEffect,
             eventSink = ::handleEvent,
         )
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUiState.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUiState.kt
@@ -27,6 +27,8 @@ data class RecordRegisterUiState(
     val isImpressionGuideBottomSheetVisible: Boolean = false,
     val isExitDialogVisible: Boolean = false,
     val isRecordSavedDialogVisible: Boolean = false,
+    val isScanTooltipVisible: Boolean = true,
+    val isImpressionGuideTooltipVisible: Boolean = true,
     val sideEffect: RecordRegisterSideEffect? = null,
     val eventSink: (RecordRegisterUiEvent) -> Unit,
 ) : CircuitUiState
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt
@@ -1,8 +1,10 @@
 package com.ninecraft.booket.feature.record.step
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 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
@@ -44,8 +46,8 @@ import com.ninecraft.booket.core.designsystem.component.button.smallRoundedButto
 import com.ninecraft.booket.core.designsystem.component.textfield.ReedRecordTextField
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.designsystem.theme.White
-import com.ninecraft.booket.core.ui.component.ReedLoadingIndicator
 import com.ninecraft.booket.feature.record.R
+import com.ninecraft.booket.feature.record.component.CustomTooltipBox
 import com.ninecraft.booket.feature.record.component.ImpressionGuideBottomSheet
 import com.ninecraft.booket.feature.record.register.RecordRegisterUiEvent
 import com.ninecraft.booket.feature.record.register.RecordRegisterUiState
@@ -121,21 +123,32 @@ fun ImpressionStep(
                 ),
             )
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
-            ReedButton(
-                onClick = {
-                    state.eventSink(RecordRegisterUiEvent.OnImpressionGuideButtonClick)
-                },
-                colorStyle = ReedButtonColorStyle.STROKE,
-                sizeStyle = smallRoundedButtonStyle,
-                modifier = Modifier.align(Alignment.End),
-                text = stringResource(R.string.impression_step_guide),
-                leadingIcon = {
-                    Icon(
-                        imageVector = ImageVector.vectorResource(designR.drawable.ic_book_open),
-                        contentDescription = "Impression Guide Icon",
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.End,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                if (state.isImpressionGuideTooltipVisible) {
+                    CustomTooltipBox(
+                        messageResId = R.string.impression_guide_tooltip_message,
                     )
-                },
-            )
+                }
+
+                ReedButton(
+                    onClick = {
+                        state.eventSink(RecordRegisterUiEvent.OnImpressionGuideButtonClick)
+                    },
+                    colorStyle = ReedButtonColorStyle.STROKE,
+                    sizeStyle = smallRoundedButtonStyle,
+                    text = stringResource(R.string.impression_step_guide),
+                    leadingIcon = {
+                        Icon(
+                            imageVector = ImageVector.vectorResource(designR.drawable.ic_book_open),
+                            contentDescription = "Impression Guide Icon",
+                        )
+                    },
+                )
+            }
         }
 
         ReedButton(
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt
@@ -45,6 +45,7 @@ import com.ninecraft.booket.core.designsystem.component.textfield.digitOnlyInput
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.designsystem.theme.White
 import com.ninecraft.booket.feature.record.R
+import com.ninecraft.booket.feature.record.component.CustomTooltipBox
 import com.ninecraft.booket.feature.record.register.RecordRegisterUiEvent
 import com.ninecraft.booket.feature.record.register.RecordRegisterUiState
 import tech.thdev.compose.extensions.keyboard.state.foundation.rememberKeyboardVisible
@@ -134,7 +135,12 @@ internal fun QuoteStep(
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.End,
+                verticalAlignment = Alignment.CenterVertically,
             ) {
+                if (state.isScanTooltipVisible) {
+                    CustomTooltipBox(messageResId = R.string.scan_tooltip_message)
+                }
+
                 ReedButton(
                     onClick = {
                         state.eventSink(RecordRegisterUiEvent.OnSentenceScanButtonClick)
diff --git a/feature/record/src/main/res/values/strings.xml b/feature/record/src/main/res/values/strings.xml
@@ -38,4 +38,6 @@
     <string name="record_saved_dialog_move_to_detail">기록 보러가기</string>
     <string name="record_saved_dialog_close">닫기</string>
     <string name="quote_step_page_input_error">해당 책의 마지막 페이지 수를 초과했습니다</string>
+    <string name="impression_guide_tooltip_message">예시 문장을 알려드려요</string>
+    <string name="scan_tooltip_message">스캔으로 빠르게 입력해요</string>
 </resources>

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,6 @@ import dagger.assisted.AssistedFactory`
`32`	`32`	`import dagger.assisted.AssistedInject`
`33`	`33`	`import dagger.hilt.android.components.ActivityRetainedComponent`
`34`	`34`	`import kotlinx.collections.immutable.toPersistentList`
`35`		`-import kotlinx.coroutines.delay`
`36`	`35`	`import kotlinx.coroutines.launch`
`37`	`36`
`38`	`37`	`class RecordRegisterPresenter @AssistedInject constructor(`
`@@ -94,6 +93,8 @@ class RecordRegisterPresenter @AssistedInject constructor(`
`94`	`93`	`}`
`95`	`94`	`}`
`96`	`95`	`}`
	`96`	`+ var isScanTooltipVisible by rememberRetained { mutableStateOf(true) }`
	`97`	`+ var isImpressionGuideTooltipVisible by rememberRetained { mutableStateOf(true) }`
`97`	`98`
`98`	`99`	`val ocrNavigator = rememberAnsweringNavigator<OcrScreen.OcrResult>(navigator) { result ->`
`99`	`100`	`recordSentenceState.edit {`
`@@ -180,6 +181,7 @@ class RecordRegisterPresenter @AssistedInject constructor(`
`180`	`181`	`}`
`181`	`182`
`182`	`183`	`is RecordRegisterUiEvent.OnSentenceScanButtonClick -> {`
	`184`	`+ isScanTooltipVisible = false`
`183`	`185`	`ocrNavigator.goTo(OcrScreen)`
`184`	`186`	`}`
`185`	`187`
`@@ -188,6 +190,7 @@ class RecordRegisterPresenter @AssistedInject constructor(`
`188`	`190`	`}`
`189`	`191`
`190`	`192`	`is RecordRegisterUiEvent.OnImpressionGuideButtonClick -> {`
	`193`	`+ isImpressionGuideTooltipVisible = false`
`191`	`194`	`beforeSelectedImpressionGuide = selectedImpressionGuide`
`192`	`195`	`if (impressionState.text.isEmpty()) {`
`193`	`196`	`selectedImpressionGuide = ""`
`@@ -282,6 +285,8 @@ class RecordRegisterPresenter @AssistedInject constructor(`
`282`	`285`	`isImpressionGuideBottomSheetVisible = isImpressionGuideBottomSheetVisible,`
`283`	`286`	`isExitDialogVisible = isExitDialogVisible,`
`284`	`287`	`isRecordSavedDialogVisible = isRecordSavedDialogVisible,`
	`288`	`+ isScanTooltipVisible = isScanTooltipVisible,`
	`289`	`+ isImpressionGuideTooltipVisible = isImpressionGuideTooltipVisible,`
`285`	`290`	`sideEffect = sideEffect,`
`286`	`291`	`eventSink = ::handleEvent,`
`287`	`292`	`)`