[Mod/#64] UI 수정 (홈,회원가입,필터)

app/src/main/java/com/paw/key/core/designsystem/component/PawkeyButton.kt

@@ -1,23 +1,18 @@
 package com.paw.key.core.designsystem.component
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 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.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 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.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.paw.key.core.designsystem.theme.PawKeyTheme
@@ -28,16 +23,16 @@ import com.paw.key.core.util.noRippleClickable
 @Composable
 private fun PreviewPawkeyButton() {
     PawKeyTheme {
-        Column {
+        Column (
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ){
             // 초록색 버튼
             PawkeyButton(
                 text = "신규 계정으로 회원가입",
                 enabled = true,
                 onClick = {}
             )
 
-            Spacer(modifier = Modifier.height(12.dp))
-
             // 회색 버튼
             PawkeyButton(
                 text = "신규 계정으로 회원가입",
@@ -50,6 +45,7 @@ private fun PreviewPawkeyButton() {
                 text = "신규 계정으로 회원가입",
                 enabled = true,
                 onClick = {},
+                isBorder = false,
                 isBackGround = true
             )
 
@@ -99,27 +95,23 @@ fun PawkeyButton(
     val borderColor = when {
         enabled && isBackGround -> PawKeyTheme.colors.green500
         !enabled && isBackGround -> PawKeyTheme.colors.gray200
-        else -> PawKeyTheme.colors.white1
+        else -> Color.Transparent
     }
 
-    Button(
-        onClick = onClick,
-        enabled = enabled,
-        modifier = modifier.fillMaxWidth(),
-        shape = RoundedCornerShape(8.dp),
-        colors = ButtonDefaults.buttonColors(
-            containerColor = backgroundColor,
-            contentColor = contentColor,
-            disabledContainerColor = backgroundColor,
-            disabledContentColor = contentColor
-        ),
-        border = if (isBackGround) BorderStroke(3.dp, borderColor) else null
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(backgroundColor, shape = RoundedCornerShape(8.dp))
+            .then(if (isBorder || isBackGround) Modifier.border(1.dp, borderColor, RoundedCornerShape(8.dp)) else Modifier)
+            .noRippleClickable{ onClick() }
+            .padding(vertical = 14.dp),
+        contentAlignment = Alignment.Center
     ) {
         Text(
             text = text,
-            modifier = Modifier
-                .padding(vertical = 14.dp),
-            style = PawKeyTheme.typography.body16Sb
+            style = PawKeyTheme.typography.body16Sb,
+            color = contentColor
         )
     }
 }
+

app/src/main/java/com/paw/key/presentation/ui/course/entire/tab/map/List/TabListScreen.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.border
 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -57,73 +58,78 @@ fun TabListScreen(
 ) {
     var showBottomSheet by remember { mutableStateOf(false) }
 
-    LazyColumn(
-        verticalArrangement = Arrangement.spacedBy(20.dp),
+    Column(
         modifier = modifier
             .fillMaxSize()
-            .background(PawKeyTheme.colors.white2)
-            .padding(bottom = 36.dp)
-
     ) {
-        item {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-                verticalAlignment = Alignment.CenterVertically,
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(color = PawKeyTheme.colors.white1)
+                .padding(horizontal = 16.dp, vertical = 11.dp)
+        ) {
+            Icon(
+                imageVector = ImageVector.vectorResource(R.drawable.ic_course_optin_filter),
+                contentDescription = "filter",
+                tint = Color.Unspecified,
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .background(color = PawKeyTheme.colors.white1)
-                    .padding(horizontal = 16.dp, vertical = 11.dp)
-            ) {
-                Icon(
-                    imageVector = ImageVector.vectorResource(R.drawable.ic_course_optin_filter),
-                    contentDescription = "filter",
-                    tint = Color.Unspecified,
-                    modifier = Modifier
-                        .noRippleClickable {
-                            showBottomSheet = true
-                        }
-                )
-                OptionChip(
-                    text = "선택한 옵션이 없어요",
-                    isActionChip = true
-                )
-            }
-        }
-        item {
-            CourseCard(
-                title = "제목을 입력해주세요",
-                petName = "안녕꼬리",
-                date = "21/1/1"
+                    .noRippleClickable {
+                        showBottomSheet = true
+                    }
             )
-        }
-        item {
-            CourseCard(
-                title = "제목을 입력해주세요",
-                petName = "안녕꼬리",
-                date = "21/1/1"
+            OptionChip(
+                text = "선택한 옵션이 없어요",
+                isActionChip = true
             )
         }
-        item {
-            CourseCard(
-                title = "제목을 입력해주세요",
-                petName = "안녕꼬리",
-                date = "21/1/1"
-            )
+
+        LazyColumn(
+            verticalArrangement = Arrangement.spacedBy(20.dp),
+            modifier = modifier
+                .fillMaxSize()
+                .background(PawKeyTheme.colors.white2)
+                .padding(bottom = 36.dp)
+
+        ) {
+
+            item {
+                CourseCard(
+                    title = "제목을 입력해주세요",
+                    petName = "안녕꼬리",
+                    date = "21/1/1"
+                )
+            }
+            item {
+                CourseCard(
+                    title = "제목을 입력해주세요",
+                    petName = "안녕꼬리",
+                    date = "21/1/1"
+                )
+            }
+            item {
+                CourseCard(
+                    title = "제목을 입력해주세요",
+                    petName = "안녕꼬리",
+                    date = "21/1/1"
+                )
+            }
+            item {
+                CourseCard(
+                    title = "제목을 입력해주세요",
+                    petName = "안녕꼬리",
+                    date = "21/1/1"
+                )
+            }
         }
-        item {
-            CourseCard(
-                title = "제목을 입력해주세요",
-                petName = "안녕꼬리",
-                date = "21/1/1"
+        if (showBottomSheet) {
+            CourseOptionBottomSheet(
+                viewModel = viewModel,
+                onDismissRequest = { showBottomSheet = false }
             )
         }
     }
-    if (showBottomSheet) {
-        CourseOptionBottomSheet(
-            viewModel = viewModel,
-            onDismissRequest = { showBottomSheet = false }
-        )
-    }
 }
 
 @Composable

app/src/main/java/com/paw/key/presentation/ui/home/HomeScreen.kt

@@ -18,7 +18,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -37,9 +36,9 @@ import com.paw.key.core.designsystem.component.CourseCard
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.util.noRippleClickable
 import com.paw.key.presentation.ui.home.component.DaytimeCard
+import com.paw.key.presentation.ui.home.component.HomeTopBar
 import com.paw.key.presentation.ui.home.component.RowCalendar
 import com.paw.key.presentation.ui.home.component.SettingButton
-import com.paw.key.presentation.ui.home.component.TopBar
 import com.paw.key.presentation.ui.home.component.TrackingCard
 import com.paw.key.presentation.ui.home.component.WeatherCard
 import com.paw.key.presentation.ui.home.viewmodel.HomeViewModel
@@ -107,7 +106,7 @@ fun HomeScreen(
             .background(color = PawKeyTheme.colors.white2)
             .fillMaxSize()
     ) {
-        TopBar(location = "강남구 역삼동", onLocationClick = { viewModel.toggleLocationMenu() })
+        HomeTopBar(location = "강남구 역삼동", onLocationClick = { viewModel.toggleLocationMenu() })
 
         LazyColumn (
             verticalArrangement = Arrangement.spacedBy(12.dp),
@@ -185,7 +184,7 @@ fun HomeScreen(
         Box(
             contentAlignment = Alignment.TopEnd,
             modifier = Modifier
-                .padding(top = 97.dp, start = 250.dp),
+                .padding(top = 97.dp, start = 240.dp),
         ) {
             SettingButton(
                 modifier = Modifier

app/src/main/java/com/paw/key/presentation/ui/home/component/TopBar.kt → app/src/main/java/com/paw/key/presentation/ui/home/component/HomeTopBar.kt

@@ -27,9 +27,9 @@ import com.paw.key.core.designsystem.theme.PawKeyTheme
 
 @Preview
 @Composable
-private fun PreviewTopBar() {
+private fun PreviewHomeTopBar() {
     PawKeyTheme {
-        TopBar(
+        HomeTopBar(
             location = "강남구 역삼동",
             onLocationClick = {},
         )
@@ -38,15 +38,15 @@ private fun PreviewTopBar() {
 }
 
 @Composable
-fun TopBar(
+fun HomeTopBar(
     location: String,
     onLocationClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Card(
         modifier = modifier
             .fillMaxWidth()
-            .height(97.dp)
+            .height(46.dp)
             .background(color = PawKeyTheme.colors.white1),
         shape = RoundedCornerShape(
             bottomStart = 15.dp,

app/src/main/java/com/paw/key/presentation/ui/mypage/navigation/SavedCourseNavigation.kt

@@ -27,10 +27,8 @@ fun NavGraphBuilder.savedCourseNavGraph(
 ) {
     composable<SavedCourse> {
         SavedCourseRoute(
-            paddingValues = paddingValues,
             navigateUp = navigateUp,
             navigateNext = navigateNext,
-            snackBarHostState = snackBarHostState,
             modifier = modifier
         )
     }

app/src/main/java/com/paw/key/presentation/ui/mypage/navigation/SavedDetailNavigation.kt

@@ -27,7 +27,6 @@ fun NavGraphBuilder.savedDetailNavGraph(
     composable<SavedDetail> {
         SavedDetailRoute(
             navigateUp = navigateUp,
-            snackBarHostState = snackBarHostState,
             modifier = modifier
         )
     }

app/src/main/java/com/paw/key/presentation/ui/mypage/navigation/UserProfileNavigation.kt

@@ -24,10 +24,7 @@ fun NavGraphBuilder.userProfileNavGraph(
 ) {
     composable<UserProfile> {
         UserProfileRoute(
-            paddingValues = paddingValues,
             navigateUp = navigateUp,
-            navigateNext = navigateNext,
-            snackBarHostState = snackBarHostState
         )
     }
 }

app/src/main/java/com/paw/key/presentation/ui/signup/SignUpDogScreen.kt

@@ -107,12 +107,12 @@ fun SignUpDogScreen(
 
                 item {
                     Column(
-                        verticalArrangement = Arrangement.spacedBy(10.dp)
                     ) {
                         DogGenderSection(
                             selectedGender = state.dogGender,
                             onGenderSelected = viewModel::selectDogGender
                         )
+                        Spacer(modifier = Modifier.height(10.dp))
                         NeuteringCheckbox(
                             isNeutered = state.isNeutered,
                             onToggle = viewModel::toggleNeutering

app/src/main/java/com/paw/key/presentation/ui/signup/SignUpScreen.kt

@@ -117,7 +117,7 @@ fun SignUpScreen(
                     state.selectedGender != SignUpContract.Gender.UNKNOWN
 
             PawkeyButton(
-                text = stringResource(id = R.string.ic_onboarding_signup_name),
+                text = stringResource(id = R.string.ic_onboarding_signup_button),
                 enabled = isFormValid,
                 onClick = {
                     if (isFormValid) {