From c2dddf213abb1f6c56d41d301343ca398cebd5ac Mon Sep 17 00:00:00 2001
From: oungsi2000 <oungsi1000@gmail.com>
Date: Mon, 3 Aug 2026 22:15:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20TodakunWhiteTooltip=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EC=A0=80=EB=B8=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

디자인 사양에 따라 항상 anchor 아래에 표시되는 흰색 톤의 툴팁을 구현한다.
기존 TodakunTooltip(검정 톤)이 공간에 따라 상/하단에 유연하게 배치되는 것과 달리,
이 컴포넌트는 TodakunWhiteTooltipPositionProvider를 통해 anchor 하단 배치를 강제하며
90% 불투명도의 흰색 배경과 검정 텍스트 스타일을 적용한다.
---
 .../designsystem/component/TodakunTooltip.kt  | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/core/designsystem/src/main/java/com/kikidan/designsystem/component/TodakunTooltip.kt b/core/designsystem/src/main/java/com/kikidan/designsystem/component/TodakunTooltip.kt
index 48217a0..7bc1e56 100644
--- a/core/designsystem/src/main/java/com/kikidan/designsystem/component/TodakunTooltip.kt
+++ b/core/designsystem/src/main/java/com/kikidan/designsystem/component/TodakunTooltip.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Text
+import androidx.compose.material3.TooltipAnchorPosition
 import androidx.compose.material3.TooltipBox
 import androidx.compose.material3.TooltipDefaults
 import androidx.compose.material3.TooltipState
@@ -80,6 +81,53 @@ fun TodakunTooltip(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TodakunWhiteTooltip(
+    text: String,
+    modifier: Modifier = Modifier,
+    state: TooltipState = rememberTooltipState(),
+    anchor: @Composable () -> Unit,
+) {
+    val density = LocalDensity.current
+    val screenMaxWidth =
+        with(density) {
+            LocalWindowInfo.current.containerSize.width
+                .toDp() - 40.dp
+        }
+    val maxWidth = minOf(TodakunTooltipDefaults.MaxWidth, screenMaxWidth)
+
+    TooltipBox(
+        positionProvider =
+            TooltipDefaults.rememberTooltipPositionProvider(
+                TooltipAnchorPosition.Below,
+            ),
+        tooltip = {
+            PlainTooltip(
+                caretShape = TooltipDefaults.caretShape(TodakunTooltipDefaults.CaretSize),
+                maxWidth = maxWidth,
+                shape = RoundedCornerShape(12.dp),
+                containerColor = TodakunColor.whiteOpacity90,
+                contentColor = TodakunColor.black,
+            ) {
+                Text(
+                    text = text,
+                    style = TodakunTypography.body3Medium,
+                    textAlign = TextAlign.Center,
+                    modifier =
+                        Modifier.padding(
+                            horizontal = TodakunTooltipDefaults.ExtraHorizontalPadding,
+                            vertical = TodakunTooltipDefaults.ExtraVerticalPadding,
+                        ),
+                )
+            }
+        },
+        state = state,
+        modifier = modifier,
+        content = anchor,
+    )
+}
+
 private object TodakunTooltipDefaults {
     val CaretSize = DpSize(width = 8.dp, height = 8.dp)
 
@@ -94,6 +142,8 @@ private object TodakunTooltipDefaults {
      */
     val ExtraHorizontalPadding = 8.dp
     val ExtraVerticalPadding = 2.dp
+
+    val MaxWidth = 200.dp
 }
 
 private class TodakunTooltipPositionProvider(
@@ -112,7 +162,6 @@ private class TodakunTooltipPositionProvider(
 
         val above = anchorBounds.top - popupContentSize.height - spacing
         val y = if (above >= 0) above else anchorBounds.bottom + spacing
-
         return IntOffset(x, y)
     }
 }
@@ -152,3 +201,21 @@ private fun TodakunTooltipLongPreview() {
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(showBackground = true)
+@Composable
+private fun TodakunWhiteTooltipLongPreview() {
+    TodakunTheme {
+        TodakunWhiteTooltip(
+            text = "안녕하세요 안녕하세요 반갑습니다. 저는 1 안녕하세요반갑습니다",
+            state = rememberTooltipState(initialIsVisible = true, isPersistent = true),
+        ) {
+            Text(
+                text = "앵커",
+                modifier = Modifier.padding(48.dp),
+                style = TodakunTypography.body3Medium,
+            )
+        }
+    }
+}