[UI/YAF-000] 운세 컴포넌트 구현 및 Screen구성을 진행합니다.

core/designsystem/src/main/java/com/yapp/designsystem/theme/Font.kt

@@ -10,3 +10,7 @@ val Pretendard = FontFamily(
     Font(R.font.pretendard_medium, FontWeight.Medium, FontStyle.Normal),
     Font(R.font.pretendard_semi_bold, FontWeight.SemiBold, FontStyle.Normal),
 )
+
+val Ownglyph = FontFamily(
+    Font(R.font.ownglyph_pdf, FontWeight.Normal, FontStyle.Normal),
+)

core/designsystem/src/main/java/com/yapp/designsystem/theme/OrbitTypography.kt

@@ -1,5 +1,6 @@
 package com.yapp.designsystem.theme
 
+import Ownglyph
 import Pretendard
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.text.TextStyle
@@ -175,6 +176,48 @@ data class OrbitTypography(
         lineHeight = 14.sp,
         letterSpacing = (-0.11).sp,
     ),
+    val H0: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 36.sp,
+        lineHeight = 50.sp,
+        letterSpacing = (-0.36).sp,
+    ),
+    val H1: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 28.sp,
+        lineHeight = 39.sp,
+        letterSpacing = (-0.28).sp,
+    ),
+    val H2: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 33.sp,
+        letterSpacing = (-0.22).sp,
+    ),
+    val H3: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 20.sp,
+        lineHeight = 30.sp,
+        letterSpacing = (-0.20).sp,
+    ),
+    val H4: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 18.sp,
+        lineHeight = 23.sp,
+        letterSpacing = (-0.18).sp,
+    ),
+    val H5: TextStyle = TextStyle(
+        fontFamily = Ownglyph,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 21.sp,
+        letterSpacing = (-0.16).sp,
+    ),
 )
 
 val LocalTypography = staticCompositionLocalOf { OrbitTypography() }

core/designsystem/src/main/res/drawable/ic_close.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M7.293,7.293C7.683,6.902 8.317,6.902 8.707,7.293L16,14.586L23.293,7.293C23.683,6.902 24.317,6.902 24.707,7.293C25.098,7.683 25.098,8.317 24.707,8.707L17.414,16L24.707,23.293C25.098,23.683 25.098,24.317 24.707,24.707C24.317,25.098 23.683,25.098 23.293,24.707L16,17.414L8.707,24.707C8.317,25.098 7.683,25.098 7.293,24.707C6.902,24.317 6.902,23.683 7.293,23.293L14.586,16L7.293,8.707C6.902,8.317 6.902,7.683 7.293,7.293Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>

core/designsystem/src/main/res/drawable/ic_letter_horoscope.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="310dp"
+    android:height="457dp"
+    android:viewportWidth="310"
+    android:viewportHeight="457">
+  <path
+      android:pathData="M310,442.94C310,448.38 305.66,452.82 300.22,452.94L281.48,453.36L253.41,452.73L225.34,451.51L198.33,450.66C197.63,450.64 196.93,450.69 196.23,450.82L169.24,455.7L141.17,457H114.31L85.04,455.45L57.74,453.09C57.23,453.04 56.71,453.04 56.2,453.07L29.61,454.9C29.14,454.93 28.66,454.93 28.19,454.89L10.75,453.61C5.81,453.25 1.88,449.33 1.51,444.39L0.06,425.22C0.02,424.73 0.02,424.24 0.05,423.75L2.16,394.49L3.89,365.29C3.92,364.76 3.91,364.22 3.86,363.68L0.87,334.48L0.87,309.26L1.21,274.48L2.16,244.49L3.3,214.49L3.6,184.48L0.13,155.3C0.07,154.76 0.05,154.21 0.08,153.66L1.4,124.48L3.75,94.48L4.17,64.48L3.94,34.48L1.72,15.64C1,9.5 5.97,4.18 12.15,4.49L28.9,5.32L56.97,4.78L83.6,6.37C84.55,6.42 85.51,6.34 86.44,6.13L111.56,0.35C112.59,0.12 113.64,0.05 114.68,0.14L141.14,2.47H167.53L197.27,3.73H225.34L251.49,0.49C252.76,0.33 254.04,0.42 255.28,0.75L279.7,7.24C280.88,7.55 282.1,7.65 283.3,7.52L297.36,6.06C303.57,5.41 308.84,10.55 308.36,16.77L307.07,33.65C307.03,34.21 307.03,34.76 307.08,35.31L310,67.89V98.83L309.28,129L310,154.48L308.83,184.48L309.28,211.7L308.98,244.49L308.67,274.48L309.89,304.48L308.26,334.48L306.97,364.49L310,397.96V429.49V442.94Z"
+      android:fillColor="#ffffff"/>
+</vector>

feature/fortune/.gitignore

@@ -0,0 +1 @@
+/build

feature/fortune/build.gradle.kts

@@ -0,0 +1,18 @@
+import com.yapp.convention.setNamespace
+
+plugins {
+    id("orbit.android.feature")
+}
+
+android {
+    setNamespace("feature.fortune")
+}
+
+dependencies {
+    implementation(projects.core.ui)
+    implementation(projects.core.common)
+    implementation(libs.orbit.core)
+    implementation(libs.orbit.compose)
+    implementation(libs.orbit.viewmodel)
+    implementation(libs.coil.compose)
+}

feature/fortune/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

feature/fortune/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>

feature/fortune/src/main/java/com/yapp/fortune/FortunePage.kt

@@ -0,0 +1,121 @@
+package com.yapp.fortune
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.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.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.fortune.component.Bubble
+import com.yapp.fortune.component.FortuneCharacter
+import com.yapp.fortune.component.HillWithGradient
+import com.yapp.ui.utils.heightForScreenPercentage
+import com.yapp.ui.utils.paddingForScreenPercentage
+
+@Composable
+fun FortunePage(page: Int) {
+    when (page) {
+        0 -> FortuneFirstPage()
+        1 -> FortuneSecondPage()
+        2 -> FortuneThirdPage()
+        else -> DefaultFortunePage(page)
+    }
+}
+
+@Composable
+fun FortuneFirstPage() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        Image(
+            painter = painterResource(id = core.designsystem.R.drawable.ic_100_buble),
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .paddingForScreenPercentage(topPercentage = 0.03f),
+        )
+        FortuneCharacter(
+            modifier = Modifier
+                .paddingForScreenPercentage(topPercentage = 0.092f)
+                .zIndex(1f)
+                .align(Alignment.TopCenter),
+            fortuneScore = 100,
+        )
+        HillWithGradient()
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .paddingForScreenPercentage(topPercentage = 0.34f),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Image(
+                painter = painterResource(id = core.designsystem.R.drawable.ic_letter),
+                contentDescription = null,
+            )
+        }
+    }
+}
+
+@Composable
+fun FortuneSecondPage() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Bubble(
+                modifier = Modifier.paddingForScreenPercentage(topPercentage = 0.03f),
+                text = "오늘의 운세",
+            )
+            Text(
+                text = "오늘 강문수의 하루는 \n" + "행운이 가득해!",
+                style = OrbitTheme.typography.H2,
+                color = OrbitTheme.colors.white,
+                modifier = Modifier.padding(top = 20.dp),
+                textAlign = TextAlign.Center,
+            )
+            Spacer(modifier = Modifier.heightForScreenPercentage(0.046f))
+            Image(
+                painter = painterResource(id = core.designsystem.R.drawable.ic_letter_horoscope),
+                contentDescription = null,
+            )
+            Spacer(modifier = Modifier.padding(28.dp))
+        }
+    }
+}
+
+@Composable
+fun FortuneThirdPage() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.BottomCenter,
+    ) {}
+}
+
+@Composable
+fun DefaultFortunePage(page: Int) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.BottomCenter,
+    ) {}
+}
+
+@Composable
+@Preview()
+fun FortunePagePreview() {
+    FortunePage(0)
+}

feature/fortune/src/main/java/com/yapp/fortune/FortunePager.kt

@@ -0,0 +1,17 @@
+package com.yapp.fortune
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun FortunePager(pagerState: PagerState) {
+    HorizontalPager(
+        state = pagerState,
+        modifier = Modifier.fillMaxSize(),
+    ) { page ->
+        FortunePage(page)
+    }
+}

feature/fortune/src/main/java/com/yapp/fortune/FortuneScreen.kt

@@ -0,0 +1,71 @@
+package com.yapp.fortune
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.fortune.component.FortuneTopAppBar
+import com.yapp.fortune.component.SlidingIndicator
+
+@Composable
+fun FortuneRoute() {
+    FortuneScreen()
+}
+
+@Composable
+fun FortuneScreen() {
+    val pagerState = rememberPagerState { 6 }
+
+    val backgroundRes = when (pagerState.currentPage) {
+        0 -> core.designsystem.R.drawable.ic_fortune_letter_background
+        else -> core.designsystem.R.drawable.ic_fortune_horoscope_background
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFF4891F0))
+            .navigationBarsPadding(),
+    ) {
+        Image(
+            painter = painterResource(id = backgroundRes),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.matchParentSize(),
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            FortuneTopAppBar(onCloseClick = {})
+            SlidingIndicator(
+                pagerState = pagerState,
+                count = 6,
+                dotHeight = 5.dp,
+                spacing = 4.dp,
+                inactiveColor = OrbitTheme.colors.white.copy(alpha = 0.2f),
+                activeColor = OrbitTheme.colors.white,
+            )
+            FortunePager(pagerState)
+        }
+    }
+}
+
+@Composable
+@Preview
+fun FortuneRoutePreview() {
+    FortuneScreen()
+}

feature/fortune/src/main/java/com/yapp/fortune/component/Bubble.kt

@@ -0,0 +1,44 @@
+package com.yapp.fortune.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yapp.designsystem.theme.OrbitTheme
+
+@Composable
+fun Bubble(
+    modifier: Modifier = Modifier,
+    text: String,
+) {
+    Box(
+        modifier = modifier
+            .background(
+                color = OrbitTheme.colors.white.copy(alpha = 0.2f),
+                shape = RoundedCornerShape(20.dp),
+            )
+            .padding(vertical = 10.dp, horizontal = 16.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = text,
+            color = OrbitTheme.colors.white,
+            style = OrbitTheme.typography.body1Medium,
+        )
+    }
+}
+
+@Composable
+@Preview
+fun BubblePreview() {
+    Bubble(
+        modifier = Modifier,
+        text = "오늘의 운세",
+    )
+}