[feat]#232: UI 그리는데 필요한 섹션을 구현해요

core/ui/src/main/kotlin/com/bff/wespot/ui/util/autoTilt.kt

@@ -0,0 +1,38 @@
+package com.bff.wespot.ui.util
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.debugInspectorInfo
+
+fun Modifier.autoTilt(enableTilt: Boolean): Modifier = composed(
+    factory = {
+        if (!enableTilt) return@composed this
+        val rotation = remember { Animatable(0f) }
+
+        LaunchedEffect(Unit) {
+            repeat(5) {
+                rotation.animateTo(
+                    targetValue = 5f,
+                    animationSpec = tween(durationMillis = 250, easing = LinearOutSlowInEasing),
+                )
+                rotation.animateTo(
+                    targetValue = -5f,
+                    animationSpec = tween(durationMillis = 250, easing = LinearOutSlowInEasing),
+                )
+            }
+            rotation.animateTo(0f) // Reset to the original position
+        }
+        Modifier.graphicsLayer {
+            rotationZ = rotation.value
+        }
+    },
+    inspectorInfo = debugInspectorInfo {
+        name = "autoTilt"
+    },
+)

feature/server-driven/src/main/java/com/bff/wespot/server/driven/component/ButtonSection.kt

@@ -0,0 +1,16 @@
+package com.bff.wespot.server.driven.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import com.bff.wespot.designsystem.component.button.WSButton
+
+@Composable
+internal fun ButtonSection(
+    text: String,
+    onClick: () -> Unit,
+) {
+    WSButton(onClick = onClick, text = text, paddingValues = PaddingValues(0.dp)) {
+        it.invoke()
+    }
+}

feature/server-driven/src/main/java/com/bff/wespot/server/driven/component/ImageSection.kt

@@ -0,0 +1,24 @@
+package com.bff.wespot.server.driven.component
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.bff.wespot.ui.util.autoTilt
+
+@Composable
+internal fun ImageSection(
+    imageUrl: String,
+    width: Int,
+    height: Int,
+    enableTilt: Boolean = true,
+) {
+    AsyncImage(
+        model = imageUrl,
+        contentDescription = null,
+        modifier = Modifier
+            .size(width = width.dp, height = height.dp)
+            .autoTilt(enableTilt),
+    )
+}

feature/server-driven/src/main/java/com/bff/wespot/server/driven/component/TextListSection.kt

@@ -0,0 +1,48 @@
+package com.bff.wespot.server.driven.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.bff.wespot.designsystem.theme.Gray100
+import com.bff.wespot.designsystem.theme.StaticTypeScale
+import com.bff.wespot.model.serverDriven.TextList
+
+@Composable
+internal fun TextListSection(
+    textList: List<TextList>,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 34.dp),
+        verticalArrangement = Arrangement.spacedBy(32.dp),
+    ) {
+        repeat(textList.size) {
+            val item = textList[it]
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+            ) {
+                AsyncImage(
+                    model = item.icon,
+                    contentDescription = null,
+                    modifier = Modifier.size(40.dp),
+                )
+
+                Text(
+                    text = item.text,
+                    style = StaticTypeScale.Default.body6,
+                    color = Gray100,
+                )
+            }
+        }
+    }
+}

feature/server-driven/src/main/java/com/bff/wespot/server/driven/component/TitleSection.kt

@@ -0,0 +1,23 @@
+package com.bff.wespot.server.driven.component
+
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.bff.wespot.designsystem.theme.Gray100
+import com.bff.wespot.designsystem.theme.StaticTypeScale
+
+@Composable
+internal fun TitleSection(
+    title: String,
+) {
+    Text(
+        text = title,
+        style = StaticTypeScale.Default.header1,
+        color = Gray100,
+        modifier = Modifier.width(200.dp),
+        textAlign = TextAlign.Center,
+    )
+}