fix: 공통 component button ui 수정 (#60) (KAN-136)

IoTeaTime · Nov 6, 2024 · e64069a · e64069a
1 parent dc609ab
commit e64069a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml
diff --git a/app/src/main/java/com/example/mhnfe/StartScreen.kt b/app/src/main/java/com/example/mhnfe/StartScreen.kt
@@ -7,7 +7,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
-import com.example.mhnfe.ui.components.middleButton
+import com.example.mhnfe.ui.components.MiddleButton
 
 @Composable
 fun StartScreen(
@@ -46,14 +46,14 @@ fun StartScreen(
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             // 로그인 버튼
-            middleButton(
+            MiddleButton(
                 text = "로그인",
                 onClick = onLoginClick,
                 modifier = Modifier.fillMaxWidth()
             )
 
             // Cam 회원 버튼
-            middleButton(
+            MiddleButton(
                 text = "회원가입",
                 onClick = onSignUpClick,
                 modifier = Modifier.fillMaxWidth()

diff --git a/app/src/main/java/com/example/mhnfe/ui/components/button.kt b/app/src/main/java/com/example/mhnfe/ui/components/button.kt
@@ -4,7 +4,12 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.AlertDialog
@@ -30,9 +35,9 @@ fun SmallButton(
 ) {
     Button(
         modifier = modifier
-            .wrapContentSize(),
+            .defaultMinSize(130.dp, 56.dp),
         shape = RoundedCornerShape(16.dp),
-        contentPadding = PaddingValues(vertical = 18.dp, horizontal = 40.dp),
+        contentPadding = PaddingValues(vertical = 18.dp),
         colors = ButtonDefaults.buttonColors(
             containerColor = Color.White
         ),
@@ -47,16 +52,17 @@ fun SmallButton(
 }
 
 @Composable
-fun middleButton(
+fun MiddleButton(
     modifier: Modifier = Modifier,
     text: String,
     onClick: () -> Unit
 ) {
     Button(
         modifier = modifier
-            .wrapContentSize(),
+            .wrapContentHeight()
+            .fillMaxWidth(),
         shape = RoundedCornerShape(16.dp),
-        contentPadding = PaddingValues(vertical = 15.dp, horizontal = 140.dp),
+        contentPadding = PaddingValues(vertical = 15.dp),
         colors = ButtonDefaults.buttonColors(
             containerColor = mainYellow
         ),
@@ -74,14 +80,21 @@ fun middleButton(
 fun NewQuizPreview(){
     Column (
         modifier = Modifier
-            .fillMaxSize(),
+            .fillMaxSize()
+            .padding(horizontal = 34.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(20.dp, alignment = Alignment.CenterVertically)
     ){
+        Row(
+            modifier = Modifier
+                .fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
             SmallButton(text = "CCTV 추가") { }
-            middleButton(text = "회원가입") { }
+            SmallButton(text = "참여자 추가") { }
+        }
+        MiddleButton(text = "회원가입") { }
     }
-
 }
 
 

diff --git a/app/src/main/java/com/example/mhnfe/ui/screens/auth/LoginScreen.kt b/app/src/main/java/com/example/mhnfe/ui/screens/auth/LoginScreen.kt
@@ -14,7 +14,7 @@ import androidx.compose.material3.Scaffold
 
 import com.example.mhnfe.ui.components.MainTextBox
 import com.example.mhnfe.ui.components.SubTopBar
-import com.example.mhnfe.ui.components.middleButton
+import com.example.mhnfe.ui.components.MiddleButton
 import com.example.mhnfe.ui.theme.mainGray
 import com.example.mhnfe.ui.theme.mainYellow
 
@@ -78,7 +78,7 @@ fun LoginScreen(
             Spacer(modifier = Modifier.weight(1f))
 
             // 로그인 버튼
-            middleButton(
+            MiddleButton(
                 text = "로그인",
                 onClick = onLoginClick,
                 modifier = Modifier.align(Alignment.CenterHorizontally)

diff --git a/app/src/main/java/com/example/mhnfe/ui/screens/auth/SignUpScreen.kt b/app/src/main/java/com/example/mhnfe/ui/screens/auth/SignUpScreen.kt
@@ -10,7 +10,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.example.mhnfe.ui.components.MainTextBox
 import com.example.mhnfe.ui.components.SubTopBar
-import com.example.mhnfe.ui.components.middleButton
+import com.example.mhnfe.ui.components.MiddleButton
 import com.example.mhnfe.ui.theme.mainGray
 import androidx.compose.ui.Alignment  // Import 추가
 import androidx.compose.foundation.Image
@@ -130,7 +130,7 @@ fun SignUpScreen(
             Spacer(modifier = Modifier.weight(1f))
 
             // 하단 버튼과 텍스트
-            middleButton(
+            MiddleButton(
                 text = if (currentStep == 3) "완료" else "다음",
                 onClick = {
                     if (currentStep < 3) {