[feat] UI Graphic 적용

app/src/main/java/org/android/bbangzip/presentation/component/card/FriendCard.kt

@@ -12,14 +12,17 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 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.clip
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
@@ -67,10 +70,15 @@ fun FriendCard(
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Image(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_user_one_default_24),
+                    painter = painterResource(id = data.imgSrc),
                     contentDescription = null,
                     contentScale = ContentScale.FillBounds,
-                    modifier = Modifier.size(48.dp),
+                    modifier =
+                        Modifier.size(48.dp).clip(CircleShape).border(
+                            width = 1.dp,
+                            color = BbangZipTheme.colors.lineNormal_68645E_22,
+                            shape = CircleShape,
+                        ),
                 )
 
                 Spacer(modifier = Modifier.width(16.dp))

app/src/main/java/org/android/bbangzip/presentation/model/card/FriendCardModel.kt

@@ -1,6 +1,7 @@
 package org.android.bbangzip.presentation.model.card
 
 import android.os.Parcelable
+import androidx.annotation.DrawableRes
 import kotlinx.parcelize.Parcelize
 import org.android.bbangzip.presentation.component.card.BbangZipCardState
 
@@ -10,4 +11,5 @@ data class FriendCardModel(
     val friendName: String,
     val imageUrl: String,
     val state: BbangZipCardState,
+    @DrawableRes val imgSrc: Int = 0,
 ) : Parcelable

app/src/main/java/org/android/bbangzip/presentation/ui/friend/FriendContract.kt

@@ -2,6 +2,7 @@ package org.android.bbangzip.presentation.ui.friend
 
 import android.os.Parcelable
 import kotlinx.parcelize.Parcelize
+import org.android.bbangzip.R
 import org.android.bbangzip.presentation.component.card.BbangZipCardState
 import org.android.bbangzip.presentation.model.card.FriendCardModel
 import org.android.bbangzip.presentation.type.FriendMenuType
@@ -17,42 +18,49 @@ class FriendContract {
                     friendName = "이승범",
                     imageUrl = "https://example.com/alice.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_1,
                 ),
                 FriendCardModel(
                     friendId = 2,
                     friendName = "김재민",
                     imageUrl = "https://example.com/bob.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_2,
                 ),
                 FriendCardModel(
                     friendId = 3,
                     friendName = "하지은",
                     imageUrl = "https://example.com/charlie.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_3,
                 ),
                 FriendCardModel(
                     friendId = 4,
                     friendName = "신우연",
                     imageUrl = "https://example.com/alice.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_4,
                 ),
                 FriendCardModel(
                     friendId = 5,
                     friendName = "김재민",
                     imageUrl = "https://example.com/bob.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_1,
                 ),
                 FriendCardModel(
                     friendId = 6,
                     friendName = "하지은",
                     imageUrl = "https://example.com/charlie.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_2,
                 ),
                 FriendCardModel(
                     friendId = 7,
                     friendName = "이승범",
                     imageUrl = "https://example.com/alice.jpg",
                     state = BbangZipCardState.DEFAULT,
+                    imgSrc = R.drawable.img_friend_profile_3,
                 ),
             ),
         val menuFilterType: FriendMenuType = FriendMenuType.ALL,

app/src/main/java/org/android/bbangzip/presentation/ui/friend/FriendScreen.kt

@@ -124,7 +124,7 @@ fun FriendScreen(
                 modifier =
                     Modifier
                         .fillMaxWidth()
-                        .padding(24.dp),
+                        .padding(bottom = 24.dp, start = 24.dp, end = 24.dp),
             ) {
                 Text(
                     text = stringResource(R.string.friend_boss_count, friendState.friendList.size),

app/src/main/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryScreen.kt

@@ -1,6 +1,7 @@
 package org.android.bbangzip.presentation.ui.my.mybadgecategory
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -27,6 +28,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalConfiguration
+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
@@ -73,7 +75,7 @@ fun MyBadgeCategoryScreen(
         }
 
         item {
-            Column(
+            Box(
                 modifier =
                     Modifier
                         .fillMaxWidth()
@@ -82,14 +84,28 @@ fun MyBadgeCategoryScreen(
                             shape = RoundedCornerShape(bottomEnd = 32.dp, bottomStart = 32.dp),
                         ),
             ) {
-                Text(
-                    text = stringResource(R.string.badge_category_title, "밍밍"),
-                    style = BbangZipTheme.typography.heading2Bold,
-                    color = BbangZipTheme.colors.labelNormal_282119,
+                Image(
+                    painter = painterResource(R.drawable.img_mypage_header),
+                    contentDescription = null,
                     modifier =
                         Modifier
-                            .padding(start = 24.dp, top = 28.dp, bottom = 48.dp),
+                            .fillMaxSize()
+                            .aspectRatio(360f / 121f),
                 )
+                Column(
+                    modifier =
+                        Modifier
+                            .fillMaxWidth(),
+                ) {
+                    Text(
+                        text = stringResource(R.string.badge_category_title, "밍밍"),
+                        style = BbangZipTheme.typography.heading2Bold,
+                        color = BbangZipTheme.colors.labelNormal_282119,
+                        modifier =
+                            Modifier
+                                .padding(start = 24.dp, top = 28.dp, bottom = 48.dp),
+                    )
+                }
             }
 
             Spacer(Modifier.height(48.dp))

app/src/main/java/org/android/bbangzip/presentation/ui/onboarding/onboardingend/OnboardingEndScreen.kt

@@ -4,7 +4,7 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -14,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 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 org.android.bbangzip.R
 import org.android.bbangzip.presentation.component.button.BbangZipButton
@@ -30,7 +31,7 @@ fun OnboardingEndScreen(
     Column(
         modifier =
             Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
                 .background(color = BbangZipTheme.colors.backgroundNormal_FFFFFF),
     ) {
         BbangZipBaseTopBar(
@@ -44,23 +45,27 @@ fun OnboardingEndScreen(
                 Modifier
                     .fillMaxWidth()
                     .padding(start = 16.dp, end = 16.dp)
-                    .padding(top = (LocalConfiguration.current.screenHeightDp * 0.184).dp),
+                    .padding(top = (LocalConfiguration.current.screenHeightDp * 0.081).dp),
             style = BbangZipTheme.typography.title2Bold,
             color = BbangZipTheme.colors.labelNormal_282119,
         )
-
-        Spacer(modifier = Modifier.weight(1f))
+        Spacer(modifier = Modifier.height(32.dp))
 
         Image(
-            painter = painterResource(id = R.drawable.img_login2),
-            modifier = Modifier.fillMaxWidth(),
+            painter = painterResource(id = R.drawable.img_onboarding_end),
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(8f / 9f),
             contentDescription = null,
         )
-
-        Spacer(modifier = Modifier.height(16.dp))
+        Spacer(modifier = Modifier.weight(1f))
 
         BbangZipButton(
-            modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
             bbangZipButtonType = BbangZipButtonType.Solid,
             bbangZipButtonSize = BbangZipButtonSize.Large,
             onClick = { onClickNextBtn() },
@@ -69,3 +74,9 @@ fun OnboardingEndScreen(
         )
     }
 }
+
+@Preview
+@Composable
+private fun OnboardingEndScreenPreview() {
+    OnboardingEndScreen()
+}

app/src/main/java/org/android/bbangzip/presentation/ui/onboarding/onboardingstart/OnboardingStartScreen.kt

@@ -3,6 +3,7 @@ package org.android.bbangzip.presentation.ui.onboarding.onboardingstart
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -37,20 +38,23 @@ fun OnboardingStartScreen(
             modifier =
                 Modifier
                     .fillMaxWidth()
-                    .padding(top = (LocalConfiguration.current.screenHeightDp * 0.184).dp),
+                    .padding(top = (LocalConfiguration.current.screenHeightDp * 0.15).dp),
             style = BbangZipTheme.typography.title2Bold,
             color = BbangZipTheme.colors.labelNormal_282119,
         )
 
-        Spacer(modifier = Modifier.weight(1f))
+        Spacer(modifier = Modifier.height(32.dp))
 
         Image(
             painter = painterResource(id = R.drawable.img_onboarding_start),
-            modifier = Modifier.fillMaxWidth(),
             contentDescription = null,
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(8f / 9f),
         )
 
-        Spacer(modifier = Modifier.height(16.dp))
+        Spacer(modifier = Modifier.weight(1f))
 
         BbangZipButton(
             modifier = Modifier.fillMaxWidth(),
@@ -67,5 +71,6 @@ fun OnboardingStartScreen(
 @Composable
 private fun OnboardingStartScreenPreview() {
     BBANGZIPTheme {
+        OnboardingStartScreen()
     }
 }

app/src/main/java/org/android/bbangzip/presentation/ui/subject/SubjectScreen.kt

@@ -1,12 +1,14 @@
 package org.android.bbangzip.presentation.ui.subject
 
+import androidx.compose.foundation.Image
 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.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -21,6 +23,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -75,6 +78,14 @@ fun SubjectScreen(
                             .height(backgroundHeight.dp)
                             .background(color = BbangZipTheme.colors.backgroundAccent_FFDAA0, shape = RoundedCornerShape(bottomStart = 32.dp, bottomEnd = 32.dp)),
                 ) {
+                    Image(
+                        painter = painterResource(R.drawable.img_subject_header),
+                        contentDescription = null,
+                        modifier =
+                            Modifier
+                                .fillMaxSize()
+                                .aspectRatio(360f / 220f),
+                    )
                     Row(
                         modifier =
                             modifier
@@ -363,7 +374,7 @@ private fun DeleteCardView(
                     }
                 }
             } else {
-                for (i in 0 until subjects.size / 2 + 1) {
+                for (i in 0 until subjects.size / 2) {
                     Row(
                         modifier =
                             Modifier

app/src/main/java/org/android/bbangzip/presentation/ui/subject/subjectdetail/SubjectDetatilScreen.kt

@@ -1,5 +1,6 @@
 package org.android.bbangzip.presentation.ui.subject.subjectdetail
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
@@ -8,6 +9,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -32,8 +34,10 @@ import androidx.compose.runtime.remember
 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.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.AnnotatedString
@@ -119,9 +123,20 @@ fun SubjectDetailScreen(
                             .height(backgroundHeight.dp)
                             .background(
                                 color = BbangZipTheme.colors.backgroundAccent_FFDAA0,
-                                shape = RoundedCornerShape(bottomStart = 32.dp, bottomEnd = 32.dp),
+                                shape = RoundedCornerShape(bottomStart = 40.dp, bottomEnd = 40.dp),
                             ),
                 ) {
+                    Image(
+                        painter = painterResource(R.drawable.img_subject_detail_header),
+                        contentDescription = null,
+                        modifier =
+                            Modifier
+                                .padding(top = 60.dp)
+                                .fillMaxSize()
+                                .aspectRatio(360f / 172f)
+                                .clip(shape = RoundedCornerShape(bottomStart = 40.dp, bottomEnd = 40.dp))
+                                .align(Alignment.BottomCenter),
+                    )
                     TwoLineTextWithWordWrap(motivationMessage)
 
                     Box(
@@ -560,8 +575,7 @@ fun TwoLineTextWithWordWrap(
         modifier =
             Modifier
                 .width(200.dp)
-                .padding(top = 92.dp, start = 20.dp)
-                .height(56.dp),
+                .padding(top = 92.dp, start = 20.dp),
         style = BbangZipTheme.typography.heading2Bold,
         onTextLayout = { textLayoutResult ->
             if (displayText == null) {