#21: 편집 화면 전까지 회원가입 화면 추가

app/src/main/AndroidManifest.xml

@@ -16,7 +16,8 @@
             android:name=".MainActivity"
             android:exported="true"
             android:label="@string/app_name"
-            android:theme="@style/Theme.WeSpot">
+            android:theme="@style/Theme.WeSpot"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

app/src/main/kotlin/com/bff/wespot/MainActivity.kt

@@ -5,8 +5,8 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.ui.Modifier
+import com.bff.wespot.auth.screen.SchoolScreen
 import com.bff.wespot.designsystem.theme.WeSpotTheme
 
 class MainActivity : ComponentActivity() {
@@ -18,7 +18,7 @@ class MainActivity : ComponentActivity() {
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                 ) {
-                    Text(text = "Hello, World!")
+                    SchoolScreen()
                 }
             }
         }

core/model/src/main/kotlin/com/bff/wespot/model/SchoolItem.kt

@@ -0,0 +1,7 @@
+package com.bff.wespot.model
+
+data class SchoolItem(
+    val id: String,
+    val name: String,
+    val address: String,
+)

core/ui/src/main/kotlin/com/bff/wespot/ui/SchoolListItem.kt

@@ -0,0 +1,123 @@
+package com.bff.wespot.ui
+
+import androidx.compose.foundation.background
+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
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.School
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+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.unit.dp
+import com.bff.wespot.designsystem.theme.StaticTypeScale
+import com.bff.wespot.designsystem.theme.WeSpotTheme
+import com.bff.wespot.designsystem.theme.WeSpotThemeManager
+import com.bff.wespot.designsystem.util.OrientationPreviews
+
+@Composable
+fun SchoolListItem(
+    schoolName: String,
+    address: String,
+    selected: Boolean,
+    onClick: () -> Unit = { }
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(vertical = 8.dp)
+            .clip(WeSpotThemeManager.shapes.medium)
+            .border(
+                width = 1.dp,
+                color = if(selected) {
+                    WeSpotThemeManager.colors.primaryColor
+                } else {
+                    WeSpotThemeManager.colors.cardBackgroundColor
+                },
+                shape = WeSpotThemeManager.shapes.medium
+            )
+            .background(WeSpotThemeManager.colors.cardBackgroundColor)
+            .clickable { onClick.invoke()  }
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp),
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(56.dp)
+                    .clip(CircleShape)
+                    .background(Color.White),
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    imageVector = Icons.Default.School,
+                    contentDescription = stringResource(id = R.string.school_icon)
+                )
+            }
+
+            Column(
+                modifier = Modifier.padding(top = 4.dp, bottom = 4.dp, start = 16.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Text(text = schoolName, style = StaticTypeScale.Default.body2, maxLines = 1)
+                Text(
+                    text = address,
+                    style = StaticTypeScale.Default.body6,
+                    color = WeSpotThemeManager.colors.txtSubColor,
+                    maxLines = 1
+                )
+            }
+        }
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(end = 14.dp, top = 14.dp),
+            contentAlignment = Alignment.TopEnd
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.exclude),
+                contentDescription = "",
+                tint = if (selected) {
+                    WeSpotThemeManager.colors.primaryColor
+                } else {
+                    WeSpotThemeManager.colors.disableIcnColor
+                }
+            )
+        }
+    }
+}
+
+@OrientationPreviews
+@Composable
+private fun SchoolListItemPreview() {
+    WeSpotTheme {
+        Surface(modifier = Modifier.fillMaxSize()) {
+            Column {
+                repeat(10) {
+                    SchoolListItem(
+                        schoolName = "역삼 중학교",
+                        address = "서울특별시 강남구 도곡로 43길 10",
+                        selected = false
+                    )
+                }
+            }
+        }
+    }
+}

core/ui/src/main/kotlin/com/bff/wespot/ui/WSBottomSheet.kt

@@ -0,0 +1,31 @@
+package com.bff.wespot.ui
+
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetState
+import androidx.compose.material3.rememberStandardBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.bff.wespot.designsystem.theme.WeSpotThemeManager
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun WSBottomSheet(
+    closeSheet: () -> Unit,
+    sheetState: SheetState = rememberStandardBottomSheetState(),
+    content: @Composable () -> Unit
+) {
+    ModalBottomSheet(
+        onDismissRequest = closeSheet,
+        sheetState = sheetState,
+        shape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
+        containerColor = WeSpotThemeManager.colors.bottomSheetColor,
+        dragHandle = null,
+        modifier = Modifier.navigationBarsPadding()
+    ) {
+        content.invoke()
+    }
+}

core/ui/src/main/res/drawable/exclude.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M10,20C15.523,20 20,15.523 20,10C20,4.477 15.523,0 10,0C4.477,0 0,4.477 0,10C0,15.523 4.477,20 10,20ZM14.74,7.673C15.111,7.264 15.081,6.632 14.673,6.26C14.264,5.889 13.632,5.919 13.26,6.327L8.966,11.051L6.707,8.793C6.317,8.402 5.683,8.402 5.293,8.793C4.902,9.183 4.902,9.817 5.293,10.207L8.293,13.207C8.486,13.401 8.75,13.506 9.024,13.5C9.297,13.493 9.556,13.375 9.74,13.173L14.74,7.673Z"
+      android:fillColor="#76777D"
+      android:fillType="evenOdd"/>
+</vector>

core/ui/src/main/res/values/string.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="school_icon">school icon</string>
+</resources>

feature/auth/src/main/kotlin/com/bff/wespot/auth/screen/ClassScreen.kt

@@ -0,0 +1,120 @@
+package com.bff.wespot.auth.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.bff.wespot.auth.R
+import com.bff.wespot.auth.state.AuthAction
+import com.bff.wespot.auth.viewmodel.AuthViewModel
+import com.bff.wespot.designsystem.component.button.WSButton
+import com.bff.wespot.designsystem.component.header.WSTopBar
+import com.bff.wespot.designsystem.component.input.WsTextField
+import com.bff.wespot.designsystem.theme.StaticTypeScale
+import com.bff.wespot.designsystem.theme.WeSpotThemeManager
+import kotlinx.coroutines.delay
+import org.orbitmvi.orbit.compose.collectAsState
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ClassScreen(viewModel: AuthViewModel = viewModel()) {
+    val keyboard = LocalSoftwareKeyboardController.current
+
+    val state by viewModel.collectAsState()
+    val action = viewModel::onAction
+    val focusRequester = remember { FocusRequester() }
+
+    Scaffold(
+        topBar = {
+            WSTopBar(title = stringResource(id = R.string.register), canNavigateBack = true)
+        },
+        modifier = Modifier.padding(horizontal = 20.dp),
+    ) {
+        Column(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .padding(it),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Text(
+                text = stringResource(id = R.string.get_class),
+                style = StaticTypeScale.Default.header1,
+            )
+
+            Text(
+                text = stringResource(id = R.string.cannot_change_class_after_register),
+                style = StaticTypeScale.Default.body6,
+                color = Color(0xFF7A7A7A),
+            )
+
+            WsTextField(
+                value =
+                    if (state.classNumber != -1) {
+                        state.classNumber.toString()
+                    } else {
+                        ""
+                    },
+                onValueChange = { classNumber ->
+                    if (classNumber.isEmpty()) {
+                        action(AuthAction.OnClassNumberChanged(-1))
+                        return@WsTextField
+                    }
+                    action(AuthAction.OnClassNumberChanged(classNumber.toInt()))
+                },
+                placeholder = stringResource(id = R.string.enter_number),
+                focusRequester = focusRequester,
+                keyBoardOption = KeyboardOptions(keyboardType = KeyboardType.Number),
+            )
+
+            if (state.classNumber != -1 && state.classNumber !in 1..20) {
+                Text(
+                    text = stringResource(id = R.string.class_number_error),
+                    color = WeSpotThemeManager.colors.dangerColor,
+                    style = StaticTypeScale.Default.body8,
+                )
+            }
+        }
+    }
+
+    Box(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .imePadding(),
+        contentAlignment = Alignment.BottomCenter,
+    ) {
+        WSButton(
+            onClick = { },
+            text = stringResource(id = R.string.next),
+            enabled = state.classNumber in 1..20,
+        ) {
+            it.invoke()
+        }
+    }
+
+    LaunchedEffect(focusRequester) {
+        focusRequester.requestFocus()
+        delay(10)
+        keyboard?.show()
+    }
+}