[feat] 강의 시간표 선택 화면 ui 구현

app/src/main/java/com/sopt/gongbaek/presentation/ui/auth/screen/EnterTimeTableScreen.kt

@@ -1,43 +1,153 @@
 package com.sopt.gongbaek.presentation.ui.auth.screen
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sopt.gongbaek.R
+import com.sopt.gongbaek.presentation.ui.component.button.GongBaekBasicButton
+import com.sopt.gongbaek.presentation.ui.component.progressBar.GongBaekProgressBar
+import com.sopt.gongbaek.presentation.ui.component.section.PageDescriptionSection
+import com.sopt.gongbaek.presentation.ui.component.timetable.LectureTimeSelectionTable
+import com.sopt.gongbaek.presentation.ui.component.topbar.StartTitleTopBar
 import com.sopt.gongbaek.ui.theme.GONGBAEKTheme
+import com.sopt.gongbaek.ui.theme.GongBaekTheme
 
 @Composable
 fun EnterTimeTableRoute(
     viewModel: AuthViewModel,
     navigateGapTimetable: () -> Unit,
     navigateBack: () -> Unit
 ) {
-    EnterTimeTableScreen()
+    EnterTimeTableScreen(
+        navigateGapTimetable = navigateGapTimetable,
+        navigateBack = navigateBack
+    )
 }
 
 @Composable
-fun EnterTimeTableScreen() {
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = Color.White),
-        contentAlignment = Alignment.Center
+private fun EnterTimeTableScreen(
+    navigateGapTimetable: () -> Unit,
+    navigateBack: () -> Unit
+) {
+    Scaffold(
+        bottomBar = {
+            GongBaekBasicButton(
+                title = "다음",
+                onClick = navigateGapTimetable,
+                modifier = Modifier
+                    .padding(horizontal = 16.dp, vertical = 12.dp)
+            )
+        },
+        containerColor = GongBaekTheme.colors.white,
+        content = { paddingValues ->
+            EnterTimeTableContent(
+                onBackClick = navigateBack,
+                modifier = Modifier
+                    .padding(paddingValues)
+                    .padding(horizontal = 16.dp)
+            )
+        }
+    )
+}
+
+@Composable
+private fun EnterTimeTableContent(
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column {
+        EnterTimeTableScreenTopBar(onBackClick = onBackClick)
+
+        Spacer(modifier = Modifier.height(54.dp))
+
+        EnterTimeTableSection(
+            modifier = modifier
+        )
+    }
+}
+
+@Composable
+private fun EnterTimeTableScreenTopBar(
+    onBackClick: () -> Unit
+) {
+    StartTitleTopBar(onClick = onBackClick)
+
+    GongBaekProgressBar(progressPercent = 1f)
+}
+
+@Composable
+private fun EnterTimeTableSection(
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier
     ) {
+        PageDescriptionSection(
+            titleResId = R.string.auth_enter_timetable_title,
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
         Text(
-            text = "시간표 입력 화면"
+            text = buildAnnotatedString {
+                append(stringResource(R.string.auth_enter_timetable_description))
+
+                addStyle(
+                    style = SpanStyle(
+                        color = GongBaekTheme.colors.mainOrange,
+                    ),
+                    start = 0,
+                    end = 6
+                )
+            },
+            color = GongBaekTheme.colors.gray07,
+            style = GongBaekTheme.typography.body1.m16
         )
+
+        Spacer(modifier = Modifier.height(14.dp))
+
+        LazyColumn(
+            modifier = Modifier.verticalScroll(rememberScrollState())
+        ) {
+            item {
+                val timeSlotLabels = listOf("9", "10", "11", "12", "13", "14", "15", "16", "17")
+                val selectedTimeSlotsByDay = remember { mutableStateOf(mapOf<String, List<Int>>()) }
+
+                LectureTimeSelectionTable(
+                    timeSlotLabels = timeSlotLabels,
+                    selectedTimeSlotsByDay = selectedTimeSlotsByDay.value,
+                    onTimeSlotSelectionChange = { day, updatedIndices ->
+                        selectedTimeSlotsByDay.value += (day to updatedIndices)
+                    }
+                )
+            }
+        }
     }
 }
 
+
 @Preview(showBackground = true)
 @Composable
-fun ShowEnterTimeTableScreen() {
+private fun PreviewEnterTimeTableScreen() {
     GONGBAEKTheme {
-        EnterTimeTableScreen()
+        EnterTimeTableScreen(
+            navigateGapTimetable = {},
+            navigateBack = {}
+        )
     }
 }

app/src/main/java/com/sopt/gongbaek/presentation/ui/component/timetable/GongBaekTimeTable.kt

@@ -25,9 +25,12 @@ fun GongBaekTimeTable(
     timeSlotLabels: List<String> = listOf("9", "10", "11", "12", "13", "14", "15", "16", "17"),
     daysOfWeek: List<String> = listOf("월", "화", "수", "목", "금")
 ) {
+    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
+    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
+
     Row(
         modifier = Modifier
-            .height(LocalConfiguration.current.screenHeightDp.dp * 0.67f)
+            .height(screenHeight * 0.677f)
             .border(
                 width = 1.dp,
                 color = GongBaekTheme.colors.gray02,
@@ -36,7 +39,7 @@ fun GongBaekTimeTable(
     ) {
         TimeLabelsItem(
             timeSlotLabels = timeSlotLabels,
-            modifier = Modifier.width(LocalConfiguration.current.screenWidthDp.dp * 0.07f)
+            modifier = Modifier.width(screenWidth * 0.07f)
         )
         daysOfWeek.forEach { day ->
             GongBaekDayTimeSlotColumn(

app/src/main/java/com/sopt/gongbaek/presentation/ui/component/timetable/GroupRegisterTimeTable.kt

@@ -190,7 +190,7 @@ private fun TimeTableSection(
 
     Row(
         modifier = Modifier
-            .height(screenHeight * 0.67f)
+            .height(screenHeight * 0.677f)
             .border(
                 width = 1.dp,
                 color = GongBaekTheme.colors.gray02,

app/src/main/java/com/sopt/gongbaek/presentation/ui/component/timetable/LectureTimeSelectionTable.kt

@@ -36,7 +36,7 @@ fun LectureTimeSelectionTable(
 
     Row(
         modifier = Modifier
-            .height(screenHeight * 0.67f)
+            .height(screenHeight * 0.677f)
             .border(
                 width = 1.dp,
                 color = GongBaekTheme.colors.gray02,

app/src/main/res/values/strings.xml

@@ -102,6 +102,8 @@
     <string name="auth_gender_description">프로필에 표시되는 정보로, 언제든 변경할 수 있어요.</string>
     <string name="auth_self_introduction_title">회원님을 자유롭게 설명해주세요.</string>
     <string name="auth_self_introduction_description">연락처나 SNS 입력이 아닌,\n자신을 소개하는 글을 적어주세요.</string>
+    <string name="auth_enter_timetable_title">학교 시간표를 입력해주세요.</string>
+    <string name="auth_enter_timetable_description">학교 시간표를 입력하면, 공강 시간표로 바꿔드려요.</string>
 
     <!--MyGroupScreen-->
     <string name="my_group_top_bar_title">나의 채움</string>