Earth-Breakers · giovannijunseokim · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt b/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -48,12 +47,13 @@ fun CommonDialogWithXIcon(
             }
 
             Spacer(Modifier.height(23.dp))
-            IconButton(
+            Box(
                 modifier = Modifier
                     .size(size = 64.dp)
                     .clip(shape = RoundedCornerShape(100.dp))
-                    .background(GTTheme.colors.white),
-                onClick = dismiss,
+                    .background(GTTheme.colors.white)
+                    .noRippleClickable(onClick = dismiss),
+                contentAlignment = Alignment.Center,
             ) {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_x),

diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt
@@ -8,7 +8,13 @@ class HomeActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            HomeScreen()
+            HomeScreen(
+                level = 1,
+                exp = 0.7f,
+                energyCount = 1,
+                currentEnergy = 1,
+                requiredEnergy = 3,
+            )
         }
     }
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt
@@ -1,54 +1,182 @@
 package univ.earthbreaker.namu.feature.home
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 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
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
-import univ.earthbreaker.namu.feature.home.component.EnergyCard
+import univ.earthbreaker.namu.compose.CommonDialogWithXIcon
 import univ.earthbreaker.namu.feature.home.component.OpenDialogCard
+import univ.earthbreaker.namu.feature.home.component.TreeEnergyCard
+import univ.earthbreaker.namu.feature.home.component.UserEnergyCard
 import univ.earthbreaker.namu.feature.home.component.WeeklyTopRankerProfileCard
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun HomeScreen() {
+fun HomeScreen(level: Int, exp: Float, energyCount: Int, currentEnergy: Int, requiredEnergy: Int) {
+    var doesDialogExist by rememberSaveable {
+        mutableStateOf(false)
+    }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
             .background(color = GTTheme.colors.bgBlack),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceBetween,
     ) {
+        HomeTopCard(level, exp, energyCount, onProfileClick = { doesDialogExist = true })
+        Image(
+            painter = painterResource(id = R.drawable.img_mock_character),
+            contentDescription = null,
+        )
+        HomeBottomCard(currentEnergy = currentEnergy, requiredEnergy = requiredEnergy)
+    }
+    if (doesDialogExist) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            CommonDialogWithXIcon(
+                content = {
+                    Column {
+                        repeat(15) {
+                            Text(
+                                text = "Hello World!",
+                                style = GTTheme.typography.titleSemiBold20,
+                            )
+                        }
+                    }
+                },
+                dismiss = { doesDialogExist = false },
+            )
+        }
+    }
+}
+
+@Composable
+fun HomeTopCard(level: Int, exp: Float, energyCount: Int, onProfileClick: () -> Unit = {}) {
+    Column {
+        Row(
+            modifier = Modifier.padding(start = 18.dp, end = 18.dp, top = 30.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = "Lv. $level",
+                style = GTTheme.typography.detailBold11,
+                color = GTTheme.colors.white,
+            )
+            LinearProgressIndicator(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(start = 7.dp)
+                    .height(11.dp)
+                    .clip(RoundedCornerShape(20.dp)),
+                progress = exp,
+                color = GTTheme.colors.green1,
+                trackColor = GTTheme.colors.bg2Black,
+            )
+        }
+
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(start = 20.dp, end = 20.dp, top = 30.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
-            WeeklyTopRankerProfileCard()
             Column {
-                EnergyCard()
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.book)) { /* TODO */ }
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.my)) { /* TODO */ }
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.mission)) { /* TODO */ }
+                WeeklyTopRankerProfileCard(onClick = onProfileClick)
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(
+                    text = stringResource(R.string.adding_friends),
+                    onClick = {},
+                    width = 85.dp,
+                )
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(
+                    text = stringResource(R.string.guestbook),
+                    onClick = {},
+                    width = 72.dp,
+                )
+            }
+            Column {
+                UserEnergyCard(energyCount = energyCount)
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.book), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.mission), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.my), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.notification), onClick = {})
             }
         }
     }
 }
 
+@Composable
+fun HomeBottomCard(currentEnergy: Int, requiredEnergy: Int) {
+    val isReady = currentEnergy == requiredEnergy
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        TreeEnergyCard(currentEnergy, requiredEnergy)
+        Spacer(modifier = Modifier.height(52.dp))
+        Box(
+            modifier = Modifier
+                .padding(horizontal = 30.dp)
+                .fillMaxWidth()
+                .background(
+                    color = if (isReady) GTTheme.colors.green1 else GTTheme.colors.gray3,
+                    shape = RoundedCornerShape(5.dp),
+                )
+                .clickable(enabled = isReady) { },
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(
+                modifier = Modifier.padding(vertical = 15.dp),
+                text = if (isReady) "다음 단계로 성장하기" else "에너지가 2개 모자라요 !",
+                style = GTTheme.typography.titleSemiBold18,
+            )
+        }
+        Spacer(modifier = Modifier.height(56.dp))
+    }
+}
+
 @Preview
 @Composable
 fun HomeScreenPreview() {
-    HomeScreen()
+    HomeScreen(level = 1, exp = 0.7f, energyCount = 1, currentEnergy = 1, requiredEnergy = 3)
+}
+
+@Preview
+@Composable
+fun HomeTopCardPreview() {
+    HomeTopCard(level = 1, exp = 0.7f, energyCount = 1)
+}
+
+@Preview
+@Composable
+fun HomeBottomCardPreview() {
+    HomeBottomCard(currentEnergy = 1, requiredEnergy = 3)
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt
@@ -3,9 +3,8 @@ package univ.earthbreaker.namu.feature.home.component
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -15,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
 import univ.earthbreaker.namu.compose.noRippleClickable
@@ -24,11 +24,12 @@ import univ.earthbreaker.namu.ui.theme.GTTheme
 fun OpenDialogCard(
     text: String,
     onClick: () -> Unit,
+    width: Dp = 62.dp,
+    height: Dp = 26.dp,
 ) {
     Row(
         modifier = Modifier
-            .width(62.dp)
-            .height(26.dp)
+            .size(width, height)
             .background(color = GTTheme.colors.bgBlack, shape = RoundedCornerShape(100.dp))
             .noRippleClickable(onClick = onClick),
         horizontalArrangement = Arrangement.SpaceBetween,
@@ -54,5 +55,5 @@ fun OpenDialogCard(
 @Preview
 @Composable
 fun OpenDialogCardPreview() {
-    OpenDialogCard(stringResource(id = R.string.book)) {}
+    OpenDialogCard(stringResource(id = R.string.book), onClick = {})
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/TreeEnergyCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/TreeEnergyCard.kt
@@ -0,0 +1,32 @@
+package univ.earthbreaker.namu.feature.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import univ.earthbreaker.namu.R
+
+@Composable
+fun TreeEnergyCard(currentEnergy: Int, requiredEnergy: Int) {
+    Row {
+        repeat(requiredEnergy) { index ->
+            Image(
+                painter = painterResource(
+                    id = if (index < currentEnergy) {
+                        R.drawable.ic_filled_required_energy
+                    } else {
+                        R.drawable.ic_empty_required_energy
+                    },
+                ),
+                contentDescription = null,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun TreeEnergyCardPreview() {
+    TreeEnergyCard(currentEnergy = 1, requiredEnergy = 3)
+}
diff --git a/...namu/feature/home/component/EnergyCard.kt → .../feature/home/component/UserEnergyCard.kt b/...namu/feature/home/component/EnergyCard.kt → .../feature/home/component/UserEnergyCard.kt
@@ -20,7 +20,7 @@ import univ.earthbreaker.namu.R
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun EnergyCard(energyCount: Int = 0) {
+fun UserEnergyCard(energyCount: Int = 0) {
     Row(
         modifier = Modifier
             .width(62.dp)
@@ -51,5 +51,5 @@ fun EnergyCard(energyCount: Int = 0) {
 @Preview
 @Composable
 fun EnergyCardPreview() {
-    EnergyCard()
+    UserEnergyCard()
 }
diff --git a/...src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt b/...src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt
@@ -16,15 +16,16 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.compose.noRippleClickable
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun WeeklyTopRankerProfileCard(modifier: Modifier = Modifier) {
+fun WeeklyTopRankerProfileCard(modifier: Modifier = Modifier, onClick: () -> Unit = {}) {
     Column(
         modifier = modifier.background(
             color = GTTheme.colors.bgBlack,
             shape = RoundedCornerShape(15.dp),
-        ),
+        ).noRippleClickable(onClick = onClick),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Image(

diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt b/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt
@@ -2,7 +2,6 @@ package univ.earthbreaker.namu.feature.login
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -17,6 +16,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.compose.noRippleClickable
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
@@ -34,7 +34,7 @@ fun LoginScreen(onClickLoginButton: () -> Unit = {}) {
             modifier = Modifier
                 .padding(horizontal = 20.dp)
                 .fillMaxWidth()
-                .clickable(onClick = onClickLoginButton),
+                .noRippleClickable(onClick = onClickLoginButton),
             painter = painterResource(id = R.drawable.img_kakao_login),
             contentDescription = null,
         )

diff --git a/app/src/main/res/drawable-xhdpi/img_mock_character.png b/app/src/main/res/drawable-xhdpi/img_mock_character.png
diff --git a/app/src/main/res/drawable-xxhdpi/img_mock_character.png b/app/src/main/res/drawable-xxhdpi/img_mock_character.png
diff --git a/app/src/main/res/drawable/ic_empty_required_energy.xml b/app/src/main/res/drawable/ic_empty_required_energy.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="27dp"
+    android:viewportWidth="26"
+    android:viewportHeight="27">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M0.504,26.5C0.53,24.789 0.694,23.23 0.989,21.798L1.009,21.703L0.992,21.608C0.667,19.811 0.5,17.35 0.5,14.21C0.5,6.646 6.735,0.5 14.444,0.5C15.127,0.5 15.82,0.584 16.584,0.695C16.742,0.718 16.903,0.742 17.068,0.766C17.692,0.859 18.364,0.959 19.09,1.03C20.811,1.2 22.853,1.211 25.5,0.63V2.842C25.5,9.588 23.588,14.425 20.563,17.573C17.538,20.721 13.345,22.237 8.668,22.237H6.464C6.642,20.395 7.04,18.904 7.751,17.543C8.531,16.05 9.705,14.68 11.446,13.165C11.899,12.77 12.242,12.407 12.485,12.086C12.721,11.775 12.888,11.47 12.947,11.194C12.977,11.055 12.988,10.879 12.923,10.705C12.85,10.509 12.697,10.362 12.499,10.297C12.323,10.24 12.149,10.258 12.014,10.293C11.874,10.329 11.734,10.392 11.6,10.471L0.504,26.5ZM0.504,26.5H2.393L2.393,26.47L2.393,26.465H2.393C2.459,22.675 3.239,19.556 4.778,16.935C6.318,14.315 8.596,12.229 11.6,10.471L0.504,26.5Z"
+      android:fillColor="#8E8C8C"
+      android:fillAlpha="0.59"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_filled_required_energy.xml b/app/src/main/res/drawable/ic_filled_required_energy.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="27dp"
+    android:viewportWidth="26"
+    android:viewportHeight="27">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M0.504,26.5C0.53,24.789 0.694,23.23 0.989,21.798L1.009,21.703L0.992,21.608C0.667,19.811 0.5,17.35 0.5,14.21C0.5,6.646 6.735,0.5 14.444,0.5C15.127,0.5 15.82,0.584 16.584,0.695C16.742,0.718 16.903,0.742 17.068,0.766C17.692,0.859 18.364,0.959 19.09,1.03C20.811,1.2 22.853,1.211 25.5,0.63V2.842C25.5,9.588 23.588,14.425 20.563,17.573C17.538,20.721 13.345,22.237 8.668,22.237H6.464C6.642,20.395 7.04,18.904 7.751,17.543C8.531,16.05 9.705,14.68 11.446,13.165C11.899,12.77 12.242,12.407 12.485,12.086C12.721,11.775 12.888,11.47 12.947,11.194C12.977,11.055 12.988,10.879 12.923,10.705C12.85,10.509 12.697,10.362 12.499,10.297C12.323,10.24 12.149,10.258 12.014,10.293C11.874,10.329 11.734,10.392 11.6,10.471L0.504,26.5ZM0.504,26.5H2.393L2.393,26.47L2.393,26.465H2.393C2.459,22.675 3.239,19.556 4.778,16.935C6.318,14.315 8.596,12.229 11.6,10.471L0.504,26.5Z"
+      android:fillColor="#4ECB71"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/img_mock_character.png b/app/src/main/res/drawable/img_mock_character.png