[fix] #9 - 공통 컴포넌트 수정

app/src/main/java/org/sopt/and/presentation/components/CautionBox.kt

@@ -0,0 +1,38 @@
+package org.sopt.and.presentation.components
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Info
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.sopt.and.ui.theme.Grey200
+
+@Composable
+fun CautionBox(
+    caution: Int,
+    contentDescription: Int
+) {
+    Row {
+        Icon(
+            imageVector = Icons.Outlined.Info,
+            contentDescription = stringResource(id = contentDescription),
+            tint = Grey200
+        )
+
+        Spacer(modifier = Modifier.width(5.dp))
+
+        Text(
+            text = stringResource(id = caution),
+            color = Grey200,
+            style = TextStyle(fontSize = 11.sp)
+        )
+    }
+}

app/src/main/java/org/sopt/and/presentation/components/EmptyInfoBox.kt

@@ -0,0 +1,64 @@
+package org.sopt.and.presentation.components
+
+import androidx.compose.foundation.layout.Arrangement
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.sharp.Warning
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.sopt.and.ui.theme.White100
+
+@Composable
+fun EmptyInfoBox(
+    title: String,
+    description: String,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = title,
+            color = White100,
+            style = TextStyle(
+                fontSize = 20.sp,
+                fontWeight = FontWeight(1000)
+            )
+        )
+
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                imageVector = Icons.Sharp.Warning,
+                contentDescription = description,
+                modifier = Modifier.size(40.dp),
+                tint = White100
+            )
+
+            Spacer(modifier = Modifier.height(10.dp))
+
+            Text(
+                text = description,
+                color = White100
+            )
+        }
+    }
+}

app/src/main/java/org/sopt/and/presentation/components/ShowOrToggle.kt

@@ -0,0 +1,25 @@
+package org.sopt.and.presentation.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import org.sopt.and.R
+import org.sopt.and.ui.theme.White100
+
+@Composable
+fun ShowOrHideToggle(
+    isVisible: Boolean,
+    onVisibilityChange: () -> Unit
+) {
+    Text(
+        text = stringResource(id = if (isVisible) R.string.hide_password_button else R.string.show_password_button),
+        color = White100,
+        modifier = Modifier
+            .padding(end = 12.dp)
+            .clickable(onClick = onVisibilityChange)
+    )
+}

app/src/main/java/org/sopt/and/presentation/components/SignInOrSignUpTextField.kt

@@ -0,0 +1,45 @@
+package org.sopt.and.presentation.components
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.dp
+import org.sopt.and.ui.theme.Grey100
+import org.sopt.and.ui.theme.Grey200
+
+@Composable
+fun SignInOrSignUpTextField(
+    information: String,
+    onValueChange: (String) -> Unit,
+    placeholder: Int,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    trailingIcon: @Composable (() -> Unit)? = null
+) {
+    TextField(
+        value = information,
+        onValueChange = onValueChange,
+        modifier = Modifier.fillMaxWidth(),
+        colors = TextFieldDefaults.colors(
+            unfocusedContainerColor = Grey100,
+            focusedContainerColor = Grey100,
+            focusedIndicatorColor = Color.Transparent,
+            unfocusedIndicatorColor = Color.Transparent
+        ),
+        shape = RoundedCornerShape(10.dp),
+        placeholder = {
+            Text(
+                text = stringResource(id = placeholder),
+                color = Grey200
+            )
+        },
+        visualTransformation = visualTransformation,
+        trailingIcon = trailingIcon
+    )
+}

app/src/main/java/org/sopt/and/presentation/components/SnsBox.kt

@@ -0,0 +1,92 @@
+package org.sopt.and.presentation.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.HorizontalDivider
+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.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.sopt.and.R
+import org.sopt.and.presentation.util.Utils
+import org.sopt.and.ui.theme.ANDANDROIDTheme
+import org.sopt.and.ui.theme.Grey200
+
+@Composable
+fun SnSBox(
+    title: String
+) {
+    Column {
+        Row(
+            Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            HorizontalDivider(
+                modifier = Modifier.weight(1f),
+                color = Grey200
+            )
+
+            Spacer(modifier = Modifier.size(4.dp))
+
+            Text(
+                text = title,
+                style = TextStyle(fontSize = 12.sp),
+                color = Grey200
+            )
+
+            Spacer(modifier = Modifier.size(3.dp))
+
+            HorizontalDivider(
+                modifier = Modifier.weight(1f),
+                color = Grey200
+            )
+        }
+
+        Spacer(modifier = Modifier.size(24.dp))
+
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceEvenly
+        ) {
+            Utils.linkableSNS.forEach { item ->
+                Icon(
+                    painter = painterResource(item.first),
+                    contentDescription = stringResource(item.second),
+                    tint = Color.Unspecified,
+                    modifier = Modifier
+                        .clip(CircleShape)
+                        .size(42.dp)
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.size(16.dp))
+
+        Text(
+            text = stringResource(R.string.link_with_another_service_description),
+            color = Grey200,
+            style = TextStyle(
+                fontSize = 10.sp
+            )
+        )
+    }
+}
+

app/src/main/java/org/sopt/and/presentation/signup/components/SignUpButton.kt

@@ -0,0 +1,64 @@
+package org.sopt.and.presentation.signup.components
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+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.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import org.sopt.and.R
+import org.sopt.and.presentation.signup.SignUpViewModel
+import org.sopt.and.ui.theme.Grey200
+import org.sopt.and.ui.theme.White100
+
+@Composable
+fun SignUpButton(
+    signUpUsername: String,
+    signUpPassword: String,
+    signUpHobby: String,
+    onSignUpComplete: () -> Unit,
+    signUpViewModel: SignUpViewModel
+) {
+    val signUpResult by signUpViewModel.signUpResult.collectAsStateWithLifecycle()
+    val context = LocalContext.current
+
+    LaunchedEffect(signUpResult) {
+        signUpViewModel.confirmSignUp(
+            context = context,
+            onSignUpComplete = onSignUpComplete
+        )
+    }
+
+    Button(
+        onClick = {
+            signUpViewModel.signUp(
+                signUpUsername = signUpUsername,
+                signUpPassword = signUpPassword,
+                signUpHobby = signUpHobby
+            )
+        },
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp),
+        shape = RoundedCornerShape(0.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = Grey200,
+            contentColor = White100
+        )
+    ) {
+        Text(
+            text = stringResource(id = R.string.sign_up_button),
+            style = TextStyle(fontSize = 18.sp)
+        )
+    }
+}

app/src/main/java/org/sopt/and/presentation/signup/components/SignUpEmailField.kt

@@ -0,0 +1,32 @@
+package org.sopt.and.presentation.signup.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import org.sopt.and.R
+import org.sopt.and.presentation.components.CautionBox
+import org.sopt.and.presentation.components.SignInOrSignUpTextField
+
+@Composable
+fun SignUpUsernameField(
+    signUpUsername: String,
+    onSignUpUsernameChange: (String) -> Unit
+) {
+    Column {
+        SignInOrSignUpTextField(
+            information = signUpUsername,
+            onValueChange = onSignUpUsernameChange,
+            placeholder = R.string.sign_up_username_placeholder
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        CautionBox(
+            contentDescription = R.string.sign_up_username_description,
+            caution = R.string.sign_up_username_caution
+        )
+    }
+}

app/src/main/java/org/sopt/and/presentation/util/Utils.kt

@@ -25,6 +25,13 @@ object Utils {
     const val GREETING_SECOND_LINE_FOCUS_END_INDEX = 24
     const val GREETING_SECOND_LINE_END_INDEX = 29
 
+    val linkableSNS = listOf<Pair<Int, Int>>(
+        Pair(R.drawable.kakao_talk_icon, R.string.link_kakao_icon_description),
+        Pair(R.drawable.t_world_icon, R.string.link_tworld_icon_description),
+        Pair(R.drawable.naver_icon, R.string.link_naver_icon_description),
+        Pair(R.drawable.facebook_icon, R.string.link_facebook_icon_description),
+        Pair(R.drawable.apple_icon, R.string.link_apple_icon_description),
+    )
 
     fun transformationPasswordVisual(isVisible: Boolean): VisualTransformation =
         if (isVisible) VisualTransformation.None else PasswordVisualTransformation()