Feature/#39 시간표 수정 화면

composeApp/src/androidMain/kotlin/com/chukchukhaksa/mobile/preview/designsystem/Container.kt

@@ -5,7 +5,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
 import com.chukchukhaksa.mobile.common.designsystem.component.container.SuwikiBoardContainer
 import com.chukchukhaksa.mobile.common.designsystem.component.container.CchEditContainer
-import com.chukchukhaksa.mobile.common.designsystem.component.container.SuwikiSelectionContainer
+import com.chukchukhaksa.mobile.common.designsystem.component.container.CchSelectionButton
 import com.chukchukhaksa.mobile.common.designsystem.theme.SuwikiTheme
 
 @Composable
@@ -39,6 +39,6 @@ fun TimetableEditContainerPreview() {
 @Composable
 fun SuwikiSelectionContainerPreview() {
     SuwikiTheme {
-        SuwikiSelectionContainer(title = "title")
+        CchSelectionButton(title = "title")
     }
 }

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/App.kt

@@ -58,14 +58,15 @@ fun App(
                         timetableNavGraph(
                             padding = innerPadding,
                             popBackStack = navigator::popBackStackIfNotHome,
+                            navigateTimetableNameInput = navigator::navigateTimetableNameInput,
                             navigateTimetableEditor = navigator::navigateTimetableEditor,
                             navigateTimetableList = navigator::navigateTimetableList,
                             navigateOpenLecture = navigator::navigateOpenLecture,
                             handleException = viewModel::handleException,
                             onShowToast = viewModel::onShowToast,
                             navigateCellEditor = navigator::navigateCellEditor,
                             navigateSemesterSelect = navigator::navigateSemesterSelect,
-                            navigateTimetable = navigator::navigatetimetable,
+                            navigateTimetable = navigator::navigateTimetable,
                         )
                     }
 

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/MainNavigator.kt

@@ -12,6 +12,7 @@ import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateOpenLe
 import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateSemesterSelect
 import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateTimetable
 import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateTimetableEditor
+import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateTimetableNameInput
 import com.chukchukhaksa.mobile.presentation.timetable.navigation.navigateTimetableList
 
 class MainNavigator(
@@ -24,8 +25,12 @@ class MainNavigator(
         navController.navigateCellEditor(argument)
     }
 
+    fun navigateTimetableNameInput(argument: TimetableEditorArgument = TimetableEditorArgument()) {
+        navController.navigateTimetableNameInput(argument)
+    }
+
     fun navigateTimetableEditor(argument: TimetableEditorArgument = TimetableEditorArgument()) {
-        navController.navigateTimetableEditor(argument)
+      navController.navigateTimetableEditor(argument)
     }
 
     fun navigateTimetableList() {
@@ -40,7 +45,7 @@ class MainNavigator(
         navController.navigateOpenLecture()
     }
 
-    fun navigatetimetable() {
+    fun navigateTimetable() {
         navController.navigateTimetable()
     }
 

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/common/designsystem/component/button/TextFieldClearButton.kt

@@ -1,12 +1,15 @@
 package com.chukchukhaksa.mobile.common.designsystem.component.button
 
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
 import chukchukhaksa.composeapp.generated.resources.Res
 import chukchukhaksa.composeapp.generated.resources.ic_textfield_clear
+import com.chukchukhaksa.mobile.common.designsystem.theme.Gray500
 import com.chukchukhaksa.mobile.common.designsystem.theme.Gray95
 import com.chukchukhaksa.mobile.common.ui.cchClickable
 import org.jetbrains.compose.resources.painterResource
@@ -18,10 +21,11 @@ fun TextFieldClearButton(
 ) {
   Icon(
     modifier = modifier
+      .size(24.dp)
       .clip(CircleShape)
       .cchClickable(onClick = onClick),
     painter = painterResource(resource = Res.drawable.ic_textfield_clear),
-    tint = Gray95,
+    tint = Gray500,
     contentDescription = "",
   )
 }

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/common/designsystem/component/container/SuwikiSelectionContainer.kt → composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/common/designsystem/component/container/CchSelectionButton.kt

@@ -1,49 +1,49 @@
 package com.chukchukhaksa.mobile.common.designsystem.component.container
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+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.unit.dp
 import chukchukhaksa.composeapp.generated.resources.Res
-import chukchukhaksa.composeapp.generated.resources.ic_dropdown_arrow_down
-import com.chukchukhaksa.mobile.common.designsystem.theme.Gray95
-import com.chukchukhaksa.mobile.common.designsystem.theme.GrayF6
-import com.chukchukhaksa.mobile.common.designsystem.theme.SuwikiTheme
+import chukchukhaksa.composeapp.generated.resources.ic_arrow_sm
+import com.chukchukhaksa.mobile.common.designsystem.theme.CchTheme
+import com.chukchukhaksa.mobile.common.designsystem.theme.Gray100
+import com.chukchukhaksa.mobile.common.designsystem.theme.Gray600
 import org.jetbrains.compose.resources.painterResource
 
 @Composable
-fun SuwikiSelectionContainer(
+fun CchSelectionButton(
   modifier: Modifier = Modifier,
   title: String = "",
   onClick: () -> Unit = {},
 ) {
   Row(
     modifier = modifier
-      .clip(RoundedCornerShape(10.dp))
+      .clip(RoundedCornerShape(6.dp))
       .clickable(onClick = onClick)
-      .background(GrayF6)
-      .padding(
-        horizontal = 9.dp,
-        vertical = 6.dp,
-      ),
+      .background(Gray100)
+      .padding(vertical = 8.dp, horizontal = 12.dp),
     verticalAlignment = Alignment.CenterVertically,
+    horizontalArrangement = Arrangement.spacedBy(2.dp)
   ) {
     Text(
       text = title,
-      color = Gray95,
-      style = SuwikiTheme.typography.body6,
+      color = Gray600,
+      style = CchTheme.typography.bodySm,
     )
-    Image(
-      painter = painterResource(resource = Res.drawable.ic_dropdown_arrow_down),
+    Icon(
+      painter = painterResource(resource = Res.drawable.ic_arrow_sm),
       contentDescription = "",
+      tint = Gray600
     )
   }
 }

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/common/designsystem/component/textfield/CchRegularTextField.kt

@@ -30,10 +30,12 @@ import com.chukchukhaksa.mobile.common.designsystem.theme.White100
 fun CchRegularTextField(
   modifier: Modifier = Modifier,
   value: String = "",
-  onValueChanged: (String) -> Unit = {},
   placeholder: String = "",
+  isActive: Boolean = false,
+  onValueChanged: (String) -> Unit = {},
+  onClickClearButton: () -> Unit = {}
 ) {
-  val (borderColor, textColor, textStyle) = if(value.isEmpty()) {
+  val (borderColor, textColor, textStyle) = if(!isActive) {
     Triple(Gray200, Gray400, CchTheme.typography.bodyLg)
   } else {
     Triple(Purple600, Black100, CchTheme.typography.bodyLgStrong)
@@ -66,7 +68,9 @@ fun CchRegularTextField(
           }
           innerTextField()
         }
-        Spacer(modifier = Modifier.width(8.dp))
+        if (isActive) {
+          TextFieldClearButton(onClick = onClickClearButton)
+        }
       }
     },
   )

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/di/PresentationModules.kt

@@ -5,6 +5,7 @@ import com.chukchukhaksa.mobile.presentation.timetable.timetable.component.botto
 import com.chukchukhaksa.mobile.presentation.timetable.celleditor.CellEditorViewModel
 import com.chukchukhaksa.mobile.presentation.timetable.openlecture.OpenLectureViewModel
 import com.chukchukhaksa.mobile.presentation.timetable.timetable.TimetableViewModel
+import com.chukchukhaksa.mobile.presentation.timetable.timetablenameinput.TimetableNameInputViewModel
 import com.chukchukhaksa.mobile.presentation.timetable.timetableeditor.TimetableEditorViewModel
 import com.chukchukhaksa.mobile.presentation.timetable.timetablelist.TimetableListViewModel
 import com.chukchukhaksa.mobile.presentation.timetable.semesterselect.SemesterSelectViewModel
@@ -14,6 +15,7 @@ import org.koin.dsl.module
 val presentationModule = module {
     viewModelOf(::TimetableViewModel)
     viewModelOf(::TimetableListViewModel)
+    viewModelOf(::TimetableNameInputViewModel)
     viewModelOf(::TimetableEditorViewModel)
     viewModelOf(::MainViewModel)
     viewModelOf(::CellEditorViewModel)

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/celleditor/CellEditorScreen.kt

@@ -174,6 +174,7 @@ fun CellEditorScreen(
                   value = uiState.lectureName,
                   onValueChanged = onValueChangeLectureName,
                   placeholder = stringResource(Res.string.add_cell_screen_input_lecture_name),
+                  isActive = uiState.lectureName.isNotEmpty()
                 )
               }
 
@@ -194,6 +195,7 @@ fun CellEditorScreen(
                   value = uiState.professorName,
                   onValueChanged = onValueChangeProfessorName,
                   placeholder = stringResource(Res.string.add_cell_screen_input_professor_name),
+                  isActive = uiState.professorName.isNotEmpty(),
                 )
               }
 

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/navigation/TimetableNavigation.kt

@@ -13,13 +13,18 @@ import com.chukchukhaksa.mobile.presentation.timetable.navigation.argument.CellE
 import com.chukchukhaksa.mobile.presentation.timetable.navigation.argument.TimetableEditorArgument
 import com.chukchukhaksa.mobile.presentation.timetable.openlecture.OpenLectureRoute
 import com.chukchukhaksa.mobile.presentation.timetable.timetable.TimetableRoute
-import com.chukchukhaksa.mobile.presentation.timetable.timetableeditor.TimetableEditorRoute
+import com.chukchukhaksa.mobile.presentation.timetable.timetablenameinput.TimetableNameInputRoute
 import com.chukchukhaksa.mobile.presentation.timetable.timetablelist.TimetableListRoute
 import com.chukchukhaksa.mobile.presentation.timetable.semesterselect.SemesterSelectRoute
+import com.chukchukhaksa.mobile.presentation.timetable.timetableeditor.TimetableEditorRoute
 import kotlinx.serialization.json.Json
 
+fun NavController.navigateTimetableNameInput(argument: TimetableEditorArgument = TimetableEditorArgument()) {
+    navigate(TimetableRoute.timetableNameInputRoute(Json.encodeToUri(argument)))
+}
+
 fun NavController.navigateTimetableEditor(argument: TimetableEditorArgument = TimetableEditorArgument()) {
-    navigate(TimetableRoute.timetableEditorRoute(Json.encodeToUri(argument)))
+  navigate(TimetableRoute.timetableEditorRoute(Json.encodeToUri(argument)))
 }
 
 fun NavController.navigateTimetableList() {
@@ -47,6 +52,7 @@ fun NavController.navigateTimetable() {
 fun NavGraphBuilder.timetableNavGraph(
     padding: PaddingValues,
     popBackStack: () -> Unit,
+    navigateTimetableNameInput: (TimetableEditorArgument) -> Unit,
     navigateTimetableEditor: (TimetableEditorArgument) -> Unit,
     navigateTimetableList: () -> Unit,
     navigateOpenLecture: () -> Unit,
@@ -69,7 +75,7 @@ fun NavGraphBuilder.timetableNavGraph(
     }
 
     composable(
-        route = TimetableRoute.timetableEditorRoute(
+        route = TimetableRoute.timetableNameInputRoute(
             "{${TimetableRoute.TIMETABLE_EDITOR_ARGUMENT}}",
         ),
         arguments = listOf(
@@ -79,14 +85,32 @@ fun NavGraphBuilder.timetableNavGraph(
             },
         ),
     ) {
-        TimetableEditorRoute(
+        TimetableNameInputRoute(
             navigateTimetable = navigateTimetable,
             popBackStack = popBackStack,
             handleException = handleException,
             onShowToast = onShowToast,
         )
     }
 
+    composable(
+      route = TimetableRoute.timetableEditorRoute(
+        "{${TimetableRoute.TIMETABLE_EDITOR_ARGUMENT}}",
+      ),
+      arguments = listOf(
+        navArgument(TimetableRoute.TIMETABLE_EDITOR_ARGUMENT) {
+          type = NavType.StringType
+          nullable = true
+        },
+      ),
+    ) {
+      TimetableEditorRoute(
+        popBackStack = popBackStack,
+        handleException = handleException,
+        onShowToast = onShowToast,
+      )
+    }
+
     composable(route = TimetableRoute.openLectureRoute) {
         OpenLectureRoute(
             selectedOpenMajor = null,
@@ -130,7 +154,7 @@ fun NavGraphBuilder.timetableNavGraph(
   ) {
       SemesterSelectRoute(
         popBackStack = popBackStack,
-        navigateTimetableEditor = navigateTimetableEditor,
+        navigateTimetableNameInput = navigateTimetableNameInput,
     )
   }
 }
@@ -143,6 +167,7 @@ object TimetableRoute {
     const val CELL_EDITOR_ARGUMENT = "cell-editor-argument"
     const val TIMETABLE_EDITOR_ARGUMENT = "timetable-editor-argument"
 
+    fun timetableNameInputRoute(timetableEditor: String) = "$route/name-input/$timetableEditor"
     fun timetableEditorRoute(timetableEditor: String) = "$route/editor/$timetableEditor"
     fun cellEditorRoute(cellEditor: String) = "cell-editor/$cellEditor"
 }

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/semesterselect/SemesterSelectContract.kt

@@ -14,7 +14,7 @@ data class SemesterSelectState(
 )
 
 sealed interface SemesterSelectSideEffect {
-  data class NavigateTimetableEditor(val semester: TimetableEditorArgument): SemesterSelectSideEffect
+  data class NavigateTimetableNameInput(val semester: TimetableEditorArgument): SemesterSelectSideEffect
 }
 
 val semesterList: PersistentList<Semester> = run {

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/semesterselect/SemesterSelectScreen.kt

@@ -30,19 +30,19 @@ import org.koin.compose.viewmodel.koinViewModel
 fun SemesterSelectRoute(
   viewModel: SemesterSelectViewModel = koinViewModel(),
   popBackStack: () -> Unit = {},
-  navigateTimetableEditor: (TimetableEditorArgument) -> Unit,
+  navigateTimetableNameInput: (TimetableEditorArgument) -> Unit,
 ) {
   val uiState by viewModel.mviStore.uiState.collectAsStateWithLifecycle()
   viewModel.mviStore.sideEffects.collectWithLifecycle { sideEffect ->
     when (sideEffect) {
-      is SemesterSelectSideEffect.NavigateTimetableEditor -> navigateTimetableEditor(sideEffect.semester)
+      is SemesterSelectSideEffect.NavigateTimetableNameInput -> navigateTimetableNameInput(sideEffect.semester)
     }
   }
   SemesterSelectScreen(
     uiState = uiState,
     onClickBackButton = popBackStack,
     onClickSemester = viewModel::updateSelectedSemesterIndex,
-    onClickNextButton = viewModel::navigateTimetableEditor,
+    onClickNextButton = viewModel::navigateTimetableNameInput,
   )
 }
 

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/semesterselect/SemesterSelectViewModel.kt

@@ -16,9 +16,9 @@ class SemesterSelectViewModel : ViewModel() {
 
     fun updateSelectSemester(semester: Semester?) = mviStore.setState { copy(selectSemester = semester) }
 
-    fun navigateTimetableEditor(semester: Semester?) {
+    fun navigateTimetableNameInput(semester: Semester?) {
       if (semester != null) {
-        mviStore.postSideEffect(SemesterSelectSideEffect.NavigateTimetableEditor(semester.toTimetableEditorArgument()))
+        mviStore.postSideEffect(SemesterSelectSideEffect.NavigateTimetableNameInput(semester.toTimetableEditorArgument()))
       }
     }
 

composeApp/src/commonMain/kotlin/com/chukchukhaksa/mobile/presentation/timetable/timetableeditor/TimetableEditorContract.kt

@@ -7,20 +7,24 @@ import com.chukchukhaksa.mobile.presentation.timetable.semesterselect.Semester
 
 data class TimetableEditorState(
     val name: String = "",
+    val preName: String = "",
+    val isSheetOpenSemester: Boolean = false,
+    val preSelectedSemesterPosition: Int? = null,
     val selectedSemesterPosition: Int? = null,
 ) {
     val semester = selectedSemesterPosition?.let { semesterList.getOrNull(it) }
-    val buttonEnabled = name.isNotEmpty()
+    val buttonEnabled = (name.isNotEmpty() && preName != name || preSelectedSemesterPosition != selectedSemesterPosition)
 }
 
 internal fun TimetableEditorArgument.toState() = TimetableEditorState(
     name = name,
+    preName = name,
     selectedSemesterPosition = semesterList.indexOf(Semester(year, semester)),
+    preSelectedSemesterPosition = semesterList.indexOf(Semester(year, semester)),
 )
 
 sealed interface TimetableEditorSideEffect {
-    data object NavigateTimetable : TimetableEditorSideEffect
     data object PopBackStack : TimetableEditorSideEffect
-    data object NeedSelectSemesterToast : TimetableEditorSideEffect
+    data object ShowEditSaveToast : TimetableEditorSideEffect
     data class HandleException(val throwable: Throwable) : TimetableEditorSideEffect
 }