diff --git a/app/src/main/java/com/threegap/bitnagil/MainNavHost.kt b/app/src/main/java/com/threegap/bitnagil/MainNavHost.kt
index 84a606f1..eaf72d83 100644
--- a/app/src/main/java/com/threegap/bitnagil/MainNavHost.kt
+++ b/app/src/main/java/com/threegap/bitnagil/MainNavHost.kt
@@ -212,7 +212,7 @@ fun MainNavHost(
             val writeScreenNavArg = if (arg.isRegister) {
                 WriteRoutineScreenArg.Add(baseRoutineId = arg.routineId)
             } else {
-                WriteRoutineScreenArg.Edit(routineId = arg.routineId!!)
+                WriteRoutineScreenArg.Edit(routineId = arg.routineId!!, updateRoutineFromNowDate = arg.isUpdateRoutineFromNowDate)
             }
 
             val viewModel = hiltViewModel<WriteRoutineViewModel, WriteRoutineViewModel.Factory> { factory ->
@@ -263,6 +263,18 @@ fun MainNavHost(
                         navigator.navController.popBackStack()
                     }
                 },
+                navigateToAddRoutine = {
+                    navigator.navController.navigate(Route.WriteRoutine())
+                },
+                navigateToEditRoutine = { routineId, updateRoutineFromNowDate ->
+                    navigator.navController.navigate(
+                        Route.WriteRoutine(
+                            routineId = routineId,
+                            isRegister = false,
+                            isUpdateRoutineFromNowDate = updateRoutineFromNowDate,
+                        ),
+                    )
+                },
             )
         }
 
diff --git a/app/src/main/java/com/threegap/bitnagil/Route.kt b/app/src/main/java/com/threegap/bitnagil/Route.kt
index 799c4aac..504f2993 100644
--- a/app/src/main/java/com/threegap/bitnagil/Route.kt
+++ b/app/src/main/java/com/threegap/bitnagil/Route.kt
@@ -34,6 +34,7 @@ sealed interface Route {
     data class WriteRoutine(
         val routineId: String? = null,
         val isRegister: Boolean = true,
+        val isUpdateRoutineFromNowDate: Boolean = true,
     ) : Route
 
     @Serializable
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 1d6f30b7..f525cee5 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Base.Theme.Bitnagil" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Base.Theme.Bitnagil" parent="Theme.AppCompat.Light.NoActionBar" />
 
     <style name="Theme.Bitnagil" parent="Base.Theme.Bitnagil">
         <item name="android:windowIsTranslucent">true</item>
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_circle_1.png b/core/designsystem/src/main/res/drawable-hdpi/img_circle_1.png
new file mode 100644
index 00000000..cfd01375
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_circle_1.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_circle_2.png b/core/designsystem/src/main/res/drawable-hdpi/img_circle_2.png
new file mode 100644
index 00000000..85624ae2
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_circle_2.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_circle_3.png b/core/designsystem/src/main/res/drawable-hdpi/img_circle_3.png
new file mode 100644
index 00000000..c3d4f19b
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_circle_3.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_repeat_days.png b/core/designsystem/src/main/res/drawable-hdpi/img_repeat_days.png
new file mode 100644
index 00000000..b3789952
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_repeat_days.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_routine_period.png b/core/designsystem/src/main/res/drawable-hdpi/img_routine_period.png
new file mode 100644
index 00000000..2a2d267f
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_routine_period.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_start_time.png b/core/designsystem/src/main/res/drawable-hdpi/img_start_time.png
new file mode 100644
index 00000000..452a3612
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_start_time.png differ
diff --git a/core/designsystem/src/main/res/drawable-hdpi/img_subroutines.png b/core/designsystem/src/main/res/drawable-hdpi/img_subroutines.png
new file mode 100644
index 00000000..fae2981a
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-hdpi/img_subroutines.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_circle_1.png b/core/designsystem/src/main/res/drawable-mdpi/img_circle_1.png
new file mode 100644
index 00000000..173ef108
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_circle_1.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_circle_2.png b/core/designsystem/src/main/res/drawable-mdpi/img_circle_2.png
new file mode 100644
index 00000000..ace4b576
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_circle_2.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_circle_3.png b/core/designsystem/src/main/res/drawable-mdpi/img_circle_3.png
new file mode 100644
index 00000000..25f0ffcc
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_circle_3.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_repeat_days.png b/core/designsystem/src/main/res/drawable-mdpi/img_repeat_days.png
new file mode 100644
index 00000000..e38176e5
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_repeat_days.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_routine_period.png b/core/designsystem/src/main/res/drawable-mdpi/img_routine_period.png
new file mode 100644
index 00000000..599de3e9
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_routine_period.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_start_time.png b/core/designsystem/src/main/res/drawable-mdpi/img_start_time.png
new file mode 100644
index 00000000..747fdb01
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_start_time.png differ
diff --git a/core/designsystem/src/main/res/drawable-mdpi/img_subroutines.png b/core/designsystem/src/main/res/drawable-mdpi/img_subroutines.png
new file mode 100644
index 00000000..d2c9c614
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-mdpi/img_subroutines.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_circle_1.png b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_1.png
new file mode 100644
index 00000000..22839cda
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_1.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_circle_2.png b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_2.png
new file mode 100644
index 00000000..e2342569
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_2.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_circle_3.png b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_3.png
new file mode 100644
index 00000000..86416ab8
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_circle_3.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_repeat_days.png b/core/designsystem/src/main/res/drawable-xhdpi/img_repeat_days.png
new file mode 100644
index 00000000..793ee21b
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_repeat_days.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_routine_period.png b/core/designsystem/src/main/res/drawable-xhdpi/img_routine_period.png
new file mode 100644
index 00000000..df715416
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_routine_period.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_start_time.png b/core/designsystem/src/main/res/drawable-xhdpi/img_start_time.png
new file mode 100644
index 00000000..7ea92d2b
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_start_time.png differ
diff --git a/core/designsystem/src/main/res/drawable-xhdpi/img_subroutines.png b/core/designsystem/src/main/res/drawable-xhdpi/img_subroutines.png
new file mode 100644
index 00000000..ac6b268e
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xhdpi/img_subroutines.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_1.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_1.png
new file mode 100644
index 00000000..b4c6ab19
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_1.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_2.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_2.png
new file mode 100644
index 00000000..22852d85
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_2.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_3.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_3.png
new file mode 100644
index 00000000..8c778b14
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_circle_3.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_repeat_days.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_repeat_days.png
new file mode 100644
index 00000000..2e65557b
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_repeat_days.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_routine_period.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_routine_period.png
new file mode 100644
index 00000000..b6144865
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_routine_period.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_start_time.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_start_time.png
new file mode 100644
index 00000000..413ba502
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_start_time.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxhdpi/img_subroutines.png b/core/designsystem/src/main/res/drawable-xxhdpi/img_subroutines.png
new file mode 100644
index 00000000..3cc59da0
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxhdpi/img_subroutines.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_1.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_1.png
new file mode 100644
index 00000000..17063bb0
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_1.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_2.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_2.png
new file mode 100644
index 00000000..b83b610d
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_2.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_3.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_3.png
new file mode 100644
index 00000000..8689531d
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_circle_3.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_repeat_days.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_repeat_days.png
new file mode 100644
index 00000000..0ec949a2
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_repeat_days.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_routine_period.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_routine_period.png
new file mode 100644
index 00000000..988fe402
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_routine_period.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_start_time.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_start_time.png
new file mode 100644
index 00000000..1e30b184
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_start_time.png differ
diff --git a/core/designsystem/src/main/res/drawable-xxxhdpi/img_subroutines.png b/core/designsystem/src/main/res/drawable-xxxhdpi/img_subroutines.png
new file mode 100644
index 00000000..5360e7b8
Binary files /dev/null and b/core/designsystem/src/main/res/drawable-xxxhdpi/img_subroutines.png differ
diff --git a/core/designsystem/src/main/res/drawable/ic_close_circle.xml b/core/designsystem/src/main/res/drawable/ic_close_circle.xml
new file mode 100644
index 00000000..ad81db9d
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_close_circle.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M16,8C16,12.418 12.418,16 8,16C3.582,16 0,12.418 0,8C0,3.582 3.582,0 8,0C12.418,0 16,3.582 16,8Z"
+      android:fillColor="#AEB0B6"/>
+  <path
+      android:pathData="M10.333,4.677C10.606,4.403 11.05,4.403 11.323,4.677C11.596,4.95 11.596,5.394 11.323,5.667L5.666,11.324C5.393,11.597 4.949,11.597 4.676,11.324C4.402,11.05 4.402,10.607 4.676,10.333L10.333,4.677Z"
+      android:fillColor="#F7F7F8"/>
+  <path
+      android:pathData="M11.323,10.333C11.596,10.607 11.596,11.05 11.323,11.324C11.05,11.597 10.606,11.597 10.333,11.324L4.676,5.667C4.402,5.394 4.402,4.95 4.676,4.677C4.949,4.403 5.393,4.403 5.666,4.677L11.323,10.333Z"
+      android:fillColor="#F7F7F8"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_down_arrow_20.xml b/core/designsystem/src/main/res/drawable/ic_down_arrow_20.xml
new file mode 100644
index 00000000..174fc19a
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_down_arrow_20.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="21dp"
+    android:viewportWidth="20"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M9.646,11.521L12.896,8.271C13.049,8.118 13.243,8.042 13.479,8.042C13.715,8.042 13.91,8.118 14.063,8.271C14.215,8.424 14.292,8.618 14.292,8.854C14.292,9.09 14.215,9.285 14.063,9.437L10.229,13.271C10.146,13.354 10.056,13.413 9.958,13.448C9.861,13.482 9.757,13.499 9.646,13.5C9.535,13.5 9.431,13.483 9.333,13.448C9.236,13.412 9.146,13.353 9.063,13.271L5.229,9.437C5.076,9.285 5,9.09 5,8.854C5,8.618 5.076,8.424 5.229,8.271C5.382,8.118 5.576,8.042 5.813,8.042C6.049,8.042 6.243,8.118 6.396,8.271L9.646,11.521Z"
+      android:fillColor="#46474C"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_up_arrow_20.xml b/core/designsystem/src/main/res/drawable/ic_up_arrow_20.xml
new file mode 100644
index 00000000..dfb32785
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_up_arrow_20.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="21dp"
+    android:viewportWidth="20"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M10.354,9.479L7.104,12.729C6.951,12.882 6.757,12.958 6.521,12.958C6.285,12.958 6.09,12.882 5.938,12.729C5.785,12.576 5.708,12.382 5.708,12.146C5.708,11.91 5.785,11.715 5.938,11.563L9.771,7.729C9.854,7.646 9.944,7.587 10.042,7.553C10.139,7.518 10.243,7.501 10.354,7.5C10.465,7.499 10.569,7.517 10.667,7.553C10.764,7.588 10.854,7.647 10.938,7.729L14.771,11.563C14.924,11.715 15,11.91 15,12.146C15,12.382 14.924,12.576 14.771,12.729C14.618,12.882 14.424,12.958 14.188,12.958C13.951,12.958 13.757,12.882 13.604,12.729L10.354,9.479Z"
+      android:fillColor="#46474C"/>
+</vector>
diff --git a/data/src/main/java/com/threegap/bitnagil/data/routine/model/response/RoutineDto.kt b/data/src/main/java/com/threegap/bitnagil/data/routine/model/response/RoutineDto.kt
index c7deb42b..d78c6a20 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/routine/model/response/RoutineDto.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/routine/model/response/RoutineDto.kt
@@ -26,6 +26,12 @@ data class RoutineDto(
     val subRoutineCompleteYn: List<Boolean>,
     @SerialName("recommendedRoutineType")
     val recommendedRoutineType: String?,
+    @SerialName("routineDeletedYn")
+    val routineDeletedYn: Boolean,
+    @SerialName("routineStartDate")
+    val routineStartDate: String,
+    @SerialName("routineEndDate")
+    val routineEndDate: String,
 )
 
 fun RoutineDto.toDomain(): Routine =
@@ -39,4 +45,7 @@ fun RoutineDto.toDomain(): Routine =
         subRoutineNames = this.subRoutineNames,
         subRoutineCompleteYn = this.subRoutineCompleteYn,
         recommendedRoutineType = RecommendedRoutineType.fromString(this.recommendedRoutineType),
+        routineDeletedYn = routineDeletedYn,
+        startDate = this.routineStartDate,
+        endDate = this.routineEndDate,
     )
diff --git a/data/src/main/java/com/threegap/bitnagil/data/routine/service/RoutineService.kt b/data/src/main/java/com/threegap/bitnagil/data/routine/service/RoutineService.kt
index 2d5d20ef..23b6c35e 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/routine/service/RoutineService.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/routine/service/RoutineService.kt
@@ -18,7 +18,7 @@ interface RoutineService {
         @Query("endDate") endDate: String,
     ): BaseResponse<RoutinesResponseDto>
 
-    @GET("/api/v1/routines/{routineId}")
+    @GET("/api/v2/routines/{routineId}")
     suspend fun getRoutine(
         @Path("routineId") routineId: String,
     ): BaseResponse<RoutineDto>
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/RoutineDto.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/RoutineDto.kt
deleted file mode 100644
index a00814cc..00000000
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/RoutineDto.kt
+++ /dev/null
@@ -1,51 +0,0 @@
-package com.threegap.bitnagil.data.writeroutine.model.dto
-
-import com.threegap.bitnagil.domain.writeroutine.model.Date
-import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
-import com.threegap.bitnagil.domain.writeroutine.model.Routine
-import com.threegap.bitnagil.domain.writeroutine.model.Time
-import kotlinx.serialization.SerialName
-import kotlinx.serialization.Serializable
-
-@Serializable
-data class RoutineDto(
-    @SerialName("routineId")
-    val routineId: String,
-    @SerialName("routineName")
-    val routineName: String,
-    @SerialName("repeatDay")
-    val repeatDay: List<String>,
-    @SerialName("executionTime")
-    val executionTime: String,
-    @SerialName("subRoutineInfos")
-    val subRoutineInfos: List<SubRoutineDto>,
-) {
-    fun toRoutine(): Routine {
-        val dividedTimeStrings = executionTime.split(":")
-        require(dividedTimeStrings.size >= 2) { "Invalid time format: $executionTime Expected format: HH:mm / HH:mm:ss" }
-
-        val startTime = Time(
-            hour = dividedTimeStrings[0].toIntOrNull() ?: throw IllegalArgumentException("Invalid hour: ${dividedTimeStrings[0]}"),
-            minute = dividedTimeStrings[1].toIntOrNull() ?: throw IllegalArgumentException("Invalid minute: ${dividedTimeStrings[1]}"),
-        )
-
-        return Routine(
-            id = routineId,
-            name = routineName,
-            subRoutines = subRoutineInfos.map { it.toSubRoutine() },
-            repeatDays = repeatDay.mapNotNull {
-                try {
-                    RepeatDay.valueOf(it)
-                } catch (e: IllegalArgumentException) {
-                    null
-                }
-            },
-            startTime = startTime,
-            endDate = Date(
-                year = 2099,
-                month = 12,
-                day = 31,
-            ),
-        )
-    }
-}
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineDto.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineDto.kt
deleted file mode 100644
index 6af214e3..00000000
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineDto.kt
+++ /dev/null
@@ -1,23 +0,0 @@
-package com.threegap.bitnagil.data.writeroutine.model.dto
-
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutine
-import kotlinx.serialization.SerialName
-import kotlinx.serialization.Serializable
-
-@Serializable
-data class SubRoutineDto(
-    @SerialName("subRoutineId")
-    val subRoutineId: String,
-    @SerialName("subRoutineName")
-    val subRoutineName: String,
-    @SerialName("sortOrder")
-    val sortOrder: Int,
-) {
-    fun toSubRoutine(): SubRoutine {
-        return SubRoutine(
-            id = subRoutineId,
-            name = subRoutineName,
-            sort = sortOrder,
-        )
-    }
-}
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineInfosDiffDto.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineInfosDiffDto.kt
deleted file mode 100644
index 448d59df..00000000
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/dto/SubRoutineInfosDiffDto.kt
+++ /dev/null
@@ -1,25 +0,0 @@
-package com.threegap.bitnagil.data.writeroutine.model.dto
-
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
-import kotlinx.serialization.SerialName
-import kotlinx.serialization.Serializable
-
-@Serializable
-data class SubRoutineInfosDiffDto(
-    @SerialName("subRoutineId")
-    val subRoutineId: String?,
-    @SerialName("subRoutineName")
-    val subRoutineName: String?,
-    @SerialName("sortOrder")
-    val sortOrder: Int?,
-) {
-    companion object {
-        fun fromSubRoutineDiff(subRoutineDiff: SubRoutineDiff): SubRoutineInfosDiffDto {
-            return SubRoutineInfosDiffDto(
-                subRoutineId = subRoutineDiff.id,
-                subRoutineName = subRoutineDiff.name,
-                sortOrder = subRoutineDiff.sort,
-            )
-        }
-    }
-}
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/EditRoutineRequest.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/EditRoutineRequest.kt
index 3a2bbf8a..08ba222d 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/EditRoutineRequest.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/EditRoutineRequest.kt
@@ -1,6 +1,5 @@
 package com.threegap.bitnagil.data.writeroutine.model.request
 
-import com.threegap.bitnagil.data.writeroutine.model.dto.SubRoutineInfosDiffDto
 import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 
@@ -8,12 +7,18 @@ import kotlinx.serialization.Serializable
 data class EditRoutineRequest(
     @SerialName("routineId")
     val routineId: String,
+    @SerialName("updateApplyDate")
+    val updateApplyDate: String,
     @SerialName("routineName")
     val routineName: String,
     @SerialName("repeatDay")
     val repeatDay: List<String>,
+    @SerialName("routineStartDate")
+    val routineStartDate: String,
+    @SerialName("routineEndDate")
+    val routineEndDate: String,
     @SerialName("executionTime")
     val executionTime: String,
-    @SerialName("subRoutineInfos")
-    val subRoutineInfos: List<SubRoutineInfosDiffDto>,
+    @SerialName("subRoutineName")
+    val subRoutineName: List<String>,
 )
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/RegisterRoutineRequest.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/RegisterRoutineRequest.kt
index 4f64826d..feba22e1 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/RegisterRoutineRequest.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/model/request/RegisterRoutineRequest.kt
@@ -9,6 +9,10 @@ data class RegisterRoutineRequest(
     val routineName: String,
     @SerialName("repeatDay")
     val repeatDay: List<String>,
+    @SerialName("routineStartDate")
+    val routineStartDate: String,
+    @SerialName("routineEndDate")
+    val routineEndDate: String,
     @SerialName("executionTime")
     val executionTime: String,
     @SerialName("subRoutineName")
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/repositoryImpl/WriteRoutineRepositoryImpl.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/repositoryImpl/WriteRoutineRepositoryImpl.kt
index 942ac2a2..7fd9cc74 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/repositoryImpl/WriteRoutineRepositoryImpl.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/repositoryImpl/WriteRoutineRepositoryImpl.kt
@@ -1,11 +1,11 @@
 package com.threegap.bitnagil.data.writeroutine.repositoryImpl
 
 import com.threegap.bitnagil.data.writeroutine.datasource.WriteRoutineDataSource
-import com.threegap.bitnagil.data.writeroutine.model.dto.SubRoutineInfosDiffDto
 import com.threegap.bitnagil.data.writeroutine.model.request.EditRoutineRequest
 import com.threegap.bitnagil.data.writeroutine.model.request.RegisterRoutineRequest
+import com.threegap.bitnagil.domain.writeroutine.model.Date
 import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
+import com.threegap.bitnagil.domain.writeroutine.model.RoutineUpdateType
 import com.threegap.bitnagil.domain.writeroutine.model.Time
 import com.threegap.bitnagil.domain.writeroutine.model.WriteRoutineEvent
 import com.threegap.bitnagil.domain.writeroutine.repository.WriteRoutineRepository
@@ -17,11 +17,20 @@ import javax.inject.Inject
 class WriteRoutineRepositoryImpl @Inject constructor(
     private val writeRoutineDataSource: WriteRoutineDataSource,
 ) : WriteRoutineRepository {
-    override suspend fun registerRoutine(name: String, repeatDay: List<RepeatDay>, startTime: Time, subRoutines: List<String>): Result<Unit> {
+    override suspend fun registerRoutine(
+        name: String,
+        repeatDay: List<RepeatDay>,
+        startTime: Time,
+        startDate: Date,
+        endDate: Date,
+        subRoutines: List<String>,
+    ): Result<Unit> {
         val request = RegisterRoutineRequest(
             routineName = name,
             repeatDay = repeatDay.map { it.fullName },
             executionTime = startTime.toFormattedString(),
+            routineStartDate = startDate.toFormattedString(),
+            routineEndDate = endDate.toFormattedString(),
             subRoutineName = subRoutines,
         )
         return writeRoutineDataSource.registerRoutine(request).also {
@@ -33,19 +42,23 @@ class WriteRoutineRepositoryImpl @Inject constructor(
 
     override suspend fun editRoutine(
         routineId: String,
+        routineUpdateType: RoutineUpdateType,
         name: String,
         repeatDay: List<RepeatDay>,
         startTime: Time,
-        subRoutines: List<SubRoutineDiff>,
+        startDate: Date,
+        endDate: Date,
+        subRoutines: List<String>,
     ): Result<Unit> {
         val request = EditRoutineRequest(
             routineId = routineId,
+            updateApplyDate = routineUpdateType.value,
             routineName = name,
             repeatDay = repeatDay.map { it.fullName },
             executionTime = startTime.toFormattedString(),
-            subRoutineInfos = subRoutines.map {
-                SubRoutineInfosDiffDto.fromSubRoutineDiff(it)
-            },
+            routineStartDate = startDate.toFormattedString(),
+            routineEndDate = endDate.toFormattedString(),
+            subRoutineName = subRoutines,
         )
 
         return writeRoutineDataSource.editRoutine(request).also {
diff --git a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/service/WriteRoutineService.kt b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/service/WriteRoutineService.kt
index bb8be610..7aada97c 100644
--- a/data/src/main/java/com/threegap/bitnagil/data/writeroutine/service/WriteRoutineService.kt
+++ b/data/src/main/java/com/threegap/bitnagil/data/writeroutine/service/WriteRoutineService.kt
@@ -8,12 +8,12 @@ import retrofit2.http.PATCH
 import retrofit2.http.POST
 
 interface WriteRoutineService {
-    @POST("/api/v1/routines")
+    @POST("/api/v2/routines")
     suspend fun postRoutine(
         @Body registerRoutineRequest: RegisterRoutineRequest,
     ): BaseResponse<Unit>
 
-    @PATCH("/api/v1/routines")
+    @PATCH("/api/v2/routines")
     suspend fun patchRoutine(
         @Body editRoutineRequest: EditRoutineRequest,
     ): BaseResponse<Unit>
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/routine/model/Routine.kt b/domain/src/main/java/com/threegap/bitnagil/domain/routine/model/Routine.kt
index 4cc43d29..3f9eee0d 100644
--- a/domain/src/main/java/com/threegap/bitnagil/domain/routine/model/Routine.kt
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/routine/model/Routine.kt
@@ -5,8 +5,11 @@ data class Routine(
     val routineName: String,
     val repeatDay: List<DayOfWeek>,
     val executionTime: String,
+    val startDate: String,
+    val endDate: String,
     val routineDate: String,
     val routineCompleteYn: Boolean,
+    val routineDeletedYn: Boolean,
     val subRoutineNames: List<String>,
     val subRoutineCompleteYn: List<Boolean>,
     val recommendedRoutineType: RecommendedRoutineType?,
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/Date.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/Date.kt
index 3d659359..976d2205 100644
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/Date.kt
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/Date.kt
@@ -10,4 +10,8 @@ data class Date(
         require(month in 1..12) { "Month must be in range 1..12, but was $month" }
         require(day in 1..31) { "Day must be in range 1..31, but was $day" }
     }
+
+    fun toFormattedString(): String {
+        return "%04d-%02d-%02d".format(year, month, day)
+    }
 }
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/RoutineUpdateType.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/RoutineUpdateType.kt
new file mode 100644
index 00000000..e2a4620d
--- /dev/null
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/RoutineUpdateType.kt
@@ -0,0 +1,5 @@
+package com.threegap.bitnagil.domain.writeroutine.model
+
+enum class RoutineUpdateType(val value: String) {
+    Today("TODAY"), Tomorrow("TOMORROW")
+}
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/SubRoutineDiff.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/SubRoutineDiff.kt
deleted file mode 100644
index 102459f6..00000000
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/model/SubRoutineDiff.kt
+++ /dev/null
@@ -1,7 +0,0 @@
-package com.threegap.bitnagil.domain.writeroutine.model
-
-data class SubRoutineDiff(
-    val id: String?,
-    val name: String?,
-    val sort: Int?,
-)
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/repository/WriteRoutineRepository.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/repository/WriteRoutineRepository.kt
index 65ac5b63..7b5ec078 100644
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/repository/WriteRoutineRepository.kt
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/repository/WriteRoutineRepository.kt
@@ -1,7 +1,8 @@
 package com.threegap.bitnagil.domain.writeroutine.repository
 
+import com.threegap.bitnagil.domain.writeroutine.model.Date
 import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
+import com.threegap.bitnagil.domain.writeroutine.model.RoutineUpdateType
 import com.threegap.bitnagil.domain.writeroutine.model.Time
 import com.threegap.bitnagil.domain.writeroutine.model.WriteRoutineEvent
 import kotlinx.coroutines.flow.Flow
@@ -11,15 +12,20 @@ interface WriteRoutineRepository {
         name: String,
         repeatDay: List<RepeatDay>,
         startTime: Time,
+        startDate: Date,
+        endDate: Date,
         subRoutines: List<String>,
     ): Result<Unit>
 
     suspend fun editRoutine(
         routineId: String,
+        routineUpdateType: RoutineUpdateType,
         name: String,
         repeatDay: List<RepeatDay>,
         startTime: Time,
-        subRoutines: List<SubRoutineDiff>,
+        startDate: Date,
+        endDate: Date,
+        subRoutines: List<String>,
     ): Result<Unit>
 
     suspend fun getWriteRoutineEventFlow(): Flow<WriteRoutineEvent>
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/EditRoutineUseCase.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/EditRoutineUseCase.kt
index c25ffc98..41d3ab1f 100644
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/EditRoutineUseCase.kt
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/EditRoutineUseCase.kt
@@ -1,7 +1,8 @@
 package com.threegap.bitnagil.domain.writeroutine.usecase
 
+import com.threegap.bitnagil.domain.writeroutine.model.Date
 import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
+import com.threegap.bitnagil.domain.writeroutine.model.RoutineUpdateType
 import com.threegap.bitnagil.domain.writeroutine.model.Time
 import com.threegap.bitnagil.domain.writeroutine.repository.WriteRoutineRepository
 import javax.inject.Inject
@@ -11,16 +12,22 @@ class EditRoutineUseCase @Inject constructor(
 ) {
     suspend operator fun invoke(
         routineId: String,
+        routineUpdateType: RoutineUpdateType,
         name: String,
         repeatDay: List<RepeatDay>,
         startTime: Time,
-        subRoutines: List<SubRoutineDiff>,
+        startDate: Date,
+        endDate: Date,
+        subRoutines: List<String>,
     ): Result<Unit> {
         return writeRoutineRepository.editRoutine(
             routineId = routineId,
+            routineUpdateType = routineUpdateType,
             name = name,
             repeatDay = repeatDay,
             startTime = startTime,
+            startDate = startDate,
+            endDate = endDate,
             subRoutines = subRoutines,
         )
     }
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCase.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCase.kt
deleted file mode 100644
index 663bfa98..00000000
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCase.kt
+++ /dev/null
@@ -1,67 +0,0 @@
-package com.threegap.bitnagil.domain.writeroutine.usecase
-
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutine
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
-import javax.inject.Inject
-
-class GetChangedSubRoutinesUseCase @Inject constructor() {
-    operator fun invoke(
-        oldSubRoutines: List<SubRoutine>,
-        newSubRoutineNames: List<String>,
-    ): List<SubRoutineDiff> {
-        val oldSubRoutineMap = oldSubRoutines.groupBy { it.name }.toMutableMap()
-        val changedSubRoutines = mutableListOf<SubRoutineDiff>()
-
-        val newSubRoutineNameCountMap = newSubRoutineNames
-            .groupingBy { it }
-            .eachCount()
-            .toMutableMap()
-
-        for (oldSubRoutine in oldSubRoutines) {
-            val name = oldSubRoutine.name
-            val count = newSubRoutineNameCountMap[name] ?: 0
-
-            if (count > 0) {
-                newSubRoutineNameCountMap[name] = count - 1
-                continue
-            } else {
-                changedSubRoutines.add(
-                    SubRoutineDiff(
-                        id = oldSubRoutine.id,
-                        name = null,
-                        sort = null,
-                    ),
-                )
-            }
-        }
-
-        for ((index, name) in newSubRoutineNames.withIndex()) {
-            val sort = index + 1
-
-            val oldSubRoutinesWithSameName = oldSubRoutineMap[name]
-            val oldSubRoutine = oldSubRoutinesWithSameName?.firstOrNull()
-            if (oldSubRoutine == null) {
-                changedSubRoutines.add(
-                    SubRoutineDiff(
-                        id = null,
-                        name = name,
-                        sort = sort,
-                    ),
-                )
-            } else if (oldSubRoutine.sort != sort) {
-                changedSubRoutines.add(
-                    SubRoutineDiff(
-                        id = oldSubRoutine.id,
-                        name = oldSubRoutine.name,
-                        sort = sort,
-                    ),
-                )
-                oldSubRoutineMap[name] = oldSubRoutinesWithSameName.drop(1)
-            } else {
-                oldSubRoutineMap[name] = oldSubRoutinesWithSameName.drop(1)
-            }
-        }
-
-        return changedSubRoutines
-    }
-}
diff --git a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/RegisterRoutineUseCase.kt b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/RegisterRoutineUseCase.kt
index 16764bc4..2b6369e2 100644
--- a/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/RegisterRoutineUseCase.kt
+++ b/domain/src/main/java/com/threegap/bitnagil/domain/writeroutine/usecase/RegisterRoutineUseCase.kt
@@ -1,5 +1,6 @@
 package com.threegap.bitnagil.domain.writeroutine.usecase
 
+import com.threegap.bitnagil.domain.writeroutine.model.Date
 import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
 import com.threegap.bitnagil.domain.writeroutine.model.Time
 import com.threegap.bitnagil.domain.writeroutine.repository.WriteRoutineRepository
@@ -12,12 +13,16 @@ class RegisterRoutineUseCase @Inject constructor(
         name: String,
         repeatDay: List<RepeatDay>,
         startTime: Time,
+        startDate: Date,
+        endDate: Date,
         subRoutines: List<String>,
     ): Result<Unit> {
         return writeRoutineRepository.registerRoutine(
             name = name,
             repeatDay = repeatDay,
             startTime = startTime,
+            startDate = startDate,
+            endDate = endDate,
             subRoutines = subRoutines,
         )
     }
diff --git a/domain/src/test/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCaseTest.kt b/domain/src/test/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCaseTest.kt
deleted file mode 100644
index bf9bca5e..00000000
--- a/domain/src/test/java/com/threegap/bitnagil/domain/writeroutine/usecase/GetChangedSubRoutinesUseCaseTest.kt
+++ /dev/null
@@ -1,146 +0,0 @@
-package com.threegap.bitnagil.domain.writeroutine.usecase
-
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutine
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutineDiff
-import org.junit.Assert.assertEquals
-import org.junit.Test
-
-class GetChangedSubRoutinesUseCaseTest {
-    private val getChangedSubRoutinesUseCase = GetChangedSubRoutinesUseCase()
-
-    @Test
-    fun `세부 루틴을 변경하지 않은 경우 빈 문자열이 리턴되어야 한다`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-        )
-
-        val newSubRoutineNames = listOf("AAA", "BBB")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        assertEquals(emptyList<SubRoutineDiff>(), changedSubRoutines)
-    }
-
-    @Test
-    fun `세부 루틴의 순서가 변경된 경우 변경된 순서를 반영해야 한다`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-            SubRoutine(id = "3", name = "CCC", sort = 3),
-        )
-
-        val newSubRoutineNames = listOf("BBB", "CCC", "AAA")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = "2", name = "BBB", sort = 1),
-            SubRoutineDiff(id = "3", name = "CCC", sort = 2),
-            SubRoutineDiff(id = "1", name = "AAA", sort = 3),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-
-    @Test
-    fun `새로운 세부 루틴이 추가될 경우, 추가된 세부 루틴에 대해 루틴 이름과 순서를 지정해야 한다`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-        )
-
-        val newSubRoutineNames = listOf("AAA", "BBB", "CCC")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = null, name = "CCC", sort = 3),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-
-    @Test
-    fun `세부 루틴을 제거하는 경우, 제거한 세부 루틴의 id를 제외한 나머지를 null로 지정해야 한다`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-        )
-
-        val newSubRoutineNames = listOf("AAA")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = "2", name = null, sort = null),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-
-    @Test
-    fun `세부 루틴 제거로 인해 기존 세부 루틴의 순서가 변경된 경우, 해당 세부 루틴의 순서를 변경해야 한다`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-        )
-
-        val newSubRoutineNames = listOf("BBB")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = "1", name = null, sort = null),
-            SubRoutineDiff(id = "2", name = "BBB", sort = 1),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-
-    @Test
-    fun `심화 케이스 - 세부 루틴의 전체 내용이 제거되고 새롭게 추가된 경우`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-            SubRoutine(id = "3", name = "CCC", sort = 3),
-        )
-
-        val newSubRoutineNames = listOf("DDD", "EEE", "FFF")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = "1", name = null, sort = null),
-            SubRoutineDiff(id = "2", name = null, sort = null),
-            SubRoutineDiff(id = "3", name = null, sort = null),
-            SubRoutineDiff(id = null, name = "DDD", sort = 1),
-            SubRoutineDiff(id = null, name = "EEE", sort = 2),
-            SubRoutineDiff(id = null, name = "FFF", sort = 3),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-
-    @Test
-    fun `심화 케이스 - 동일한 세부 루틴명을 가지는 경우`() {
-        val oldSubRoutines = listOf(
-            SubRoutine(id = "1", name = "AAA", sort = 1),
-            SubRoutine(id = "2", name = "BBB", sort = 2),
-            SubRoutine(id = "3", name = "AAA", sort = 3),
-            SubRoutine(id = "4", name = "AAA", sort = 4),
-        )
-
-        val newSubRoutineNames = listOf("AAA", "AAA")
-
-        val changedSubRoutines = getChangedSubRoutinesUseCase(oldSubRoutines, newSubRoutineNames)
-
-        val answer = listOf(
-            SubRoutineDiff(id = "2", name = null, sort = null),
-            SubRoutineDiff(id = "4", name = null, sort = null),
-            SubRoutineDiff(id = "3", name = "AAA", sort = 2),
-        )
-
-        assertEquals(answer, changedSubRoutines)
-    }
-}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt
index 54c3e427..f0a911c5 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt
@@ -36,6 +36,8 @@ import java.time.LocalDate
 @Composable
 fun RoutineListScreenContainer(
     navigateToBack: () -> Unit,
+    navigateToEditRoutine: (String, Boolean) -> Unit,
+    navigateToAddRoutine: () -> Unit,
     viewModel: RoutineListViewModel = hiltViewModel(),
 ) {
     val uiState by viewModel.stateFlow.collectAsStateWithLifecycle()
@@ -43,12 +45,11 @@ fun RoutineListScreenContainer(
     viewModel.sideEffectFlow.collectAsEffect { sideEffect ->
         when (sideEffect) {
             is RoutineListSideEffect.NavigateToBack -> navigateToBack()
-            is RoutineListSideEffect.NavigateToWriteRoutine -> {
-//                TODO: 네비게이션 연결하기
-//                navigateToWriteRoutine(
-//                    routineId = sideEffect.routineId,
-//                    applyDate = sideEffect.applyDate,
-//                )
+            is RoutineListSideEffect.NavigateToAddRoutine -> {
+                navigateToAddRoutine()
+            }
+            is RoutineListSideEffect.NavigateToEditRoutine -> {
+                navigateToEditRoutine(sideEffect.routineId, sideEffect.updateRoutineFromNowDate)
             }
         }
     }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt
index 9e661e53..c350b862 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt
@@ -73,10 +73,7 @@ class RoutineListViewModel @Inject constructor(
 
             is RoutineListIntent.OnRegisterRoutineClick -> {
                 sendSideEffect(
-                    RoutineListSideEffect.NavigateToWriteRoutine(
-                        routineId = null,
-                        applyDate = null,
-                    ),
+                    RoutineListSideEffect.NavigateToAddRoutine,
                 )
                 null
             }
@@ -85,9 +82,9 @@ class RoutineListViewModel @Inject constructor(
                 val selectedRoutine = state.selectedRoutine
                 if (selectedRoutine != null) {
                     sendSideEffect(
-                        RoutineListSideEffect.NavigateToWriteRoutine(
+                        RoutineListSideEffect.NavigateToEditRoutine(
                             routineId = selectedRoutine.routineId,
-                            applyDate = "TODAY",
+                            updateRoutineFromNowDate = true,
                         ),
                     )
                 }
@@ -98,9 +95,9 @@ class RoutineListViewModel @Inject constructor(
                 val selectedRoutine = state.selectedRoutine
                 if (selectedRoutine != null) {
                     sendSideEffect(
-                        RoutineListSideEffect.NavigateToWriteRoutine(
+                        RoutineListSideEffect.NavigateToEditRoutine(
                             routineId = selectedRoutine.routineId,
-                            applyDate = "TOMORROW",
+                            updateRoutineFromNowDate = false,
                         ),
                     )
                 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/model/RoutineListSideEffect.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/model/RoutineListSideEffect.kt
index bd645702..0e137f93 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/model/RoutineListSideEffect.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/model/RoutineListSideEffect.kt
@@ -4,5 +4,6 @@ import com.threegap.bitnagil.presentation.common.mviviewmodel.MviSideEffect
 
 sealed interface RoutineListSideEffect : MviSideEffect {
     data object NavigateToBack : RoutineListSideEffect
-    data class NavigateToWriteRoutine(val routineId: String?, val applyDate: String?) : RoutineListSideEffect
+    data object NavigateToAddRoutine : RoutineListSideEffect
+    data class NavigateToEditRoutine(val routineId: String, val updateRoutineFromNowDate: Boolean) : RoutineListSideEffect
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineScreen.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineScreen.kt
index 81b28f1c..4a681f97 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineScreen.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineScreen.kt
@@ -1,6 +1,7 @@
 package com.threegap.bitnagil.presentation.writeroutine
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -15,7 +16,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -26,19 +26,20 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.R
-import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
 import com.threegap.bitnagil.designsystem.component.atom.BitnagilTextButton
 import com.threegap.bitnagil.designsystem.component.block.BitnagilTopBar
 import com.threegap.bitnagil.presentation.common.flow.collectAsEffect
 import com.threegap.bitnagil.presentation.writeroutine.component.atom.namefield.NameField
 import com.threegap.bitnagil.presentation.writeroutine.component.atom.selectcell.SelectCell
-import com.threegap.bitnagil.presentation.writeroutine.component.atom.strokebutton.StrokeButton
-import com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton.TooltipButton
+import com.threegap.bitnagil.presentation.writeroutine.component.atom.writeroutinebutton.WriteRoutineButton
+import com.threegap.bitnagil.presentation.writeroutine.component.block.expandablecontent.ExpandableContent
 import com.threegap.bitnagil.presentation.writeroutine.component.block.labeledcheckbox.LabeledCheckBox
-import com.threegap.bitnagil.presentation.writeroutine.component.template.TimePickerBottomSheet
+import com.threegap.bitnagil.presentation.writeroutine.component.block.routinedetailrow.RoutineDetailRow
+import com.threegap.bitnagil.presentation.writeroutine.component.block.subroutinefield.SubRoutineField
+import com.threegap.bitnagil.presentation.writeroutine.component.template.datepickerbottomsheet.DatePickerBottomSheet
+import com.threegap.bitnagil.presentation.writeroutine.component.template.timepickerbottomsheet.TimePickerBottomSheet
 import com.threegap.bitnagil.presentation.writeroutine.model.Day
 import com.threegap.bitnagil.presentation.writeroutine.model.RepeatType
-import com.threegap.bitnagil.presentation.writeroutine.model.SelectableDay
 import com.threegap.bitnagil.presentation.writeroutine.model.Time
 import com.threegap.bitnagil.presentation.writeroutine.model.WriteRoutineType
 import com.threegap.bitnagil.presentation.writeroutine.model.mvi.WriteRoutineSideEffect
@@ -69,18 +70,45 @@ fun WriteRoutineScreenContainer(
         )
     }
 
+    if (state.showStartDatePickerBottomSheet) {
+        DatePickerBottomSheet(
+            modifier = Modifier.fillMaxWidth(),
+            onDateSelected = viewModel::setStartDate,
+            date = state.startDate,
+            onDismiss = viewModel::hideStartDatePickerBottomSheet,
+            availableStartDate = null,
+            availableEndDate = null,
+        )
+    }
+
+    if (state.showEndDatePickerBottomSheet) {
+        DatePickerBottomSheet(
+            modifier = Modifier.fillMaxWidth(),
+            onDateSelected = viewModel::setEndDate,
+            date = state.endDate,
+            onDismiss = viewModel::hideEndDatePickerBottomSheet,
+            availableStartDate = null,
+            availableEndDate = null,
+        )
+    }
+
     WriteRoutineScreen(
         state = state,
         setRoutineName = viewModel::setRoutineName,
         setSubRoutineName = viewModel::setSubRoutineName,
-        addSubRoutine = viewModel::addSubRoutine,
+        selectNotUseSubRoutines = viewModel::selectNotUseSubRoutines,
         selectRepeatTime = viewModel::selectRepeatType,
         selectDay = viewModel::selectDay,
         selectAllTime = viewModel::selectAllTime,
         showTimePickerBottomSheet = viewModel::showTimePickerBottomSheet,
         onClickRegister = viewModel::registerRoutine,
-        removeSubRoutine = viewModel::removeSubRoutine,
         onClickBack = navigateToBack,
+        onClickSubRoutineExpand = viewModel::toggleSubRoutineUiExpanded,
+        onClickRepeatDaysExpand = viewModel::toggleRepeatDaysUiExpanded,
+        onClickStartTimeExpand = viewModel::toggleStartTimeUiExpanded,
+        onClickPeriodExpand = viewModel::togglePeriodUiExpanded,
+        showStartDatePickerBottomSheet = viewModel::showStartDatePickerBottomSheet,
+        showEndDatePickerBottomSheet = viewModel::showEndDatePickerBottomSheet,
     )
 }
 
@@ -89,14 +117,19 @@ private fun WriteRoutineScreen(
     state: WriteRoutineState,
     setRoutineName: (String) -> Unit,
     setSubRoutineName: (Int, String) -> Unit,
-    addSubRoutine: () -> Unit,
+    selectNotUseSubRoutines: () -> Unit,
     selectRepeatTime: (RepeatType) -> Unit,
     selectDay: (Day) -> Unit,
     selectAllTime: () -> Unit,
     showTimePickerBottomSheet: () -> Unit,
     onClickRegister: () -> Unit,
-    removeSubRoutine: (Int) -> Unit,
     onClickBack: () -> Unit,
+    onClickSubRoutineExpand: () -> Unit,
+    onClickRepeatDaysExpand: () -> Unit,
+    onClickStartTimeExpand: () -> Unit,
+    onClickPeriodExpand: () -> Unit,
+    showStartDatePickerBottomSheet: () -> Unit,
+    showEndDatePickerBottomSheet: () -> Unit,
 ) {
     val scrollState = rememberScrollState()
 
@@ -108,220 +141,192 @@ private fun WriteRoutineScreen(
             .windowInsetsPadding(WindowInsets.ime),
     ) {
         BitnagilTopBar(
-            title = if (state.writeRoutineType == WriteRoutineType.ADD) "루틴 등록" else "루틴 수정",
+            title = if (state.writeRoutineType == WriteRoutineType.Add) "루틴 등록" else "루틴 수정",
             showBackButton = true,
             onBackClick = onClickBack,
         )
 
         Column(
             modifier = Modifier
-                .padding(start = 16.dp, end = 16.dp, top = 32.dp)
+                .padding(start = 16.dp, end = 16.dp)
                 .weight(1f)
                 .verticalScroll(state = scrollState),
         ) {
-            Column {
-                Row {
-                    Text(
-                        "루틴 이름",
-                        style = BitnagilTheme.typography.body1SemiBold,
-                    )
-
-                    Spacer(modifier = Modifier.width(2.dp))
-
-                    Text(
-                        "*",
-                        style = BitnagilTheme.typography.body1SemiBold.copy(color = BitnagilTheme.colors.error),
-                    )
-                }
+            Spacer(modifier = Modifier.height(50.dp))
 
-                Spacer(modifier = Modifier.height(14.dp))
-
-                NameField(
-                    value = state.routineName,
-                    onValueChange = setRoutineName,
-                    placeholder = "ex) 아침에 개운하게 일어나기",
-                    onClickRemove = null,
-                )
-            }
+            NameField(
+                value = state.routineName,
+                onValueChange = setRoutineName,
+                placeholder = "ex) 아침에 개운하게 일어나기",
+                onClickRemove = null,
+            )
 
             Spacer(modifier = Modifier.height(40.dp))
 
-            Column {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
+            Column(
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+            ) {
+                ExpandableContent(
+                    expand = state.subRoutineUiExpanded,
+                    required = false,
+                    iconResourceId = R.drawable.img_subroutines,
+                    title = "세부루틴",
+                    placeHolder = "ex) 일어나자마자 이불 개기",
+                    valueText = state.subRoutinesText,
+                    onClick = onClickSubRoutineExpand,
                 ) {
-                    Text(
-                        "세부 루틴",
-                        color = BitnagilTheme.colors.coolGray10,
-                        style = BitnagilTheme.typography.body1SemiBold,
-                    )
-
-                    Spacer(modifier = Modifier.width(2.dp))
-
-                    TooltipButton("어려운 루틴이라면 단계별로 나눠보세요!")
-                }
-
-                Spacer(modifier = Modifier.height(14.dp))
-
-                StrokeButton.Custom(
-                    isSelected = false,
-                    onClick = addSubRoutine,
-                    enabled = state.addSubRoutineButtonEnabled,
-                ) {
-                    Row(
-                        modifier = Modifier.height(52.dp).fillMaxWidth().padding(start = 24.dp, end = 16.dp),
-                        verticalAlignment = Alignment.CenterVertically,
+                    Column(
+                        modifier = Modifier.fillMaxWidth().padding(horizontal = 18.dp, vertical = 20.dp),
+                        verticalArrangement = Arrangement.spacedBy(24.dp),
+                        horizontalAlignment = Alignment.End,
                     ) {
-                        BitnagilIcon(
-                            id = R.drawable.ic_plus,
-                            tint = BitnagilTheme.colors.navy400,
+                        SubRoutineField(
+                            resourceId = R.drawable.img_circle_1,
+                            placeHolder = getSubRoutinePlaceHolder(0),
+                            value = state.subRoutineNames.getOrNull(0) ?: "",
+                            onValueChange = { setSubRoutineName(0, it) },
+                            enabled = !state.selectNotUseSubRoutines,
                         )
 
-                        Spacer(modifier = Modifier.width(10.dp))
+                        SubRoutineField(
+                            resourceId = R.drawable.img_circle_2,
+                            placeHolder = getSubRoutinePlaceHolder(1),
+                            value = state.subRoutineNames.getOrNull(1) ?: "",
+                            onValueChange = { setSubRoutineName(1, it) },
+                            enabled = !state.selectNotUseSubRoutines,
+                        )
 
-                        Text(
-                            "세부 루틴 추가",
-                            style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray40),
+                        SubRoutineField(
+                            resourceId = R.drawable.img_circle_3,
+                            placeHolder = getSubRoutinePlaceHolder(2),
+                            value = state.subRoutineNames.getOrNull(2) ?: "",
+                            onValueChange = { setSubRoutineName(2, it) },
+                            enabled = !state.selectNotUseSubRoutines,
                         )
-                    }
-                }
 
-                state.subRoutineNames.forEachIndexed { index, subRoutineName ->
-                    Spacer(modifier = Modifier.height(10.dp))
-                    NameField(
-                        value = subRoutineName,
-                        onValueChange = {
-                            setSubRoutineName(index, it)
-                        },
-                        placeholder = getSubRoutinePlaceHolder(index),
-                        onClickRemove = {
-                            removeSubRoutine(index)
-                        },
-                    )
+                        LabeledCheckBox(
+                            label = "세부 루틴 설정 안함",
+                            checked = state.selectNotUseSubRoutines,
+                            onClick = selectNotUseSubRoutines,
+                        )
+                    }
                 }
-            }
-
-            Spacer(modifier = Modifier.height(40.dp))
 
-            Column {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
+                ExpandableContent(
+                    expand = state.repeatDaysUiExpanded,
+                    required = true,
+                    iconResourceId = R.drawable.img_repeat_days,
+                    title = "반복 요일",
+                    placeHolder = "ex) 매주 월,화,수.목,금",
+                    valueText = state.repeatDaysText,
+                    onClick = onClickRepeatDaysExpand,
                 ) {
-                    Text(
-                        "루틴 반복",
-                        style = BitnagilTheme.typography.body1SemiBold,
-                    )
-
-                    Spacer(modifier = Modifier.width(2.dp))
-
-                    TooltipButton(
-                        "선택하지 않을 경우, 당일 루틴으로만 자동 설정돼요.",
-                    )
-                }
-
-                Spacer(modifier = Modifier.height(14.dp))
-
-                Row {
-                    StrokeButton.Text(
-                        modifier = Modifier.height(52.dp).weight(1f),
-                        text = "매일",
-                        isSelected = state.repeatType == RepeatType.DAILY,
-                        onClick = {
-                            selectRepeatTime(RepeatType.DAILY)
-                        },
-                    )
-
-                    Spacer(modifier = Modifier.width(12.dp))
-
-                    StrokeButton.Text(
-                        modifier = Modifier.height(52.dp).weight(1f),
-                        text = "요일 선택",
-                        isSelected = state.repeatType == RepeatType.DAY,
-                        onClick = {
-                            selectRepeatTime(RepeatType.DAY)
-                        },
-                    )
-                }
+                    Column(
+                        modifier = Modifier.fillMaxWidth().padding(top = 14.dp, bottom = 18.dp, start = 18.dp, end = 18.dp),
+                    ) {
+                        Row {
+                            WriteRoutineButton.Text(
+                                modifier = Modifier.height(52.dp).weight(1f),
+                                text = "매일",
+                                isSelected = state.repeatType == RepeatType.DAILY,
+                                onClick = {
+                                    selectRepeatTime(RepeatType.DAILY)
+                                },
+                            )
 
-                if (state.repeatType == RepeatType.DAY) {
-                    Spacer(modifier = Modifier.height(16.dp))
+                            Spacer(modifier = Modifier.width(12.dp))
 
-                    Row {
-                        state.repeatDays.forEachIndexed { index, selectableDay ->
-                            SelectCell(
-                                modifier = Modifier.weight(1f),
-                                text = selectableDay.day.text,
+                            WriteRoutineButton.Text(
+                                modifier = Modifier.height(52.dp).weight(1f),
+                                text = "요일 선택",
+                                isSelected = state.repeatType == RepeatType.DAY,
                                 onClick = {
-                                    selectDay(selectableDay.day)
+                                    selectRepeatTime(RepeatType.DAY)
                                 },
-                                selected = selectableDay.selected,
                             )
-                            if (index != state.repeatDays.lastIndex) {
-                                Spacer(modifier = Modifier.width(8.dp))
+                        }
+
+                        if (state.repeatType == RepeatType.DAY) {
+                            Spacer(modifier = Modifier.height(16.dp))
+
+                            Row {
+                                state.repeatDays.forEachIndexed { index, selectableDay ->
+                                    SelectCell(
+                                        modifier = Modifier.weight(1f),
+                                        text = selectableDay.day.text,
+                                        onClick = {
+                                            selectDay(selectableDay.day)
+                                        },
+                                        selected = selectableDay.selected,
+                                    )
+                                    if (index != state.repeatDays.lastIndex) {
+                                        Spacer(modifier = Modifier.width(8.dp))
+                                    }
+                                }
                             }
                         }
                     }
                 }
-            }
-
-            Spacer(modifier = Modifier.height(40.dp))
-
-            Column {
-                Row {
-                    Text(
-                        "시작 시간",
-                        style = BitnagilTheme.typography.body1SemiBold,
-                    )
 
-                    Spacer(modifier = Modifier.width(2.dp))
-
-                    Text(
-                        "*",
-                        style = BitnagilTheme.typography.body1SemiBold.copy(color = BitnagilTheme.colors.error),
-                    )
-
-                    Spacer(modifier = Modifier.weight(1f))
+                ExpandableContent(
+                    expand = state.periodUiExpanded,
+                    required = true,
+                    iconResourceId = R.drawable.img_routine_period,
+                    title = "목표 기간",
+                    placeHolder = "ex) 25.08.06 - 25.08.06",
+                    valueText = state.periodText,
+                    onClick = onClickPeriodExpand,
+                ) {
+                    Column(
+                        modifier = Modifier.fillMaxWidth().padding(top = 14.dp, bottom = 18.dp, start = 18.dp, end = 18.dp),
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                    ) {
+                        RoutineDetailRow(
+                            title = "시작일",
+                            placeHolder = "눌러서 선택",
+                            value = state.startDate.toFormattedString(),
+                            onClick = showStartDatePickerBottomSheet,
+                        )
 
-                    LabeledCheckBox(
-                        label = "하루종일",
-                        checked = state.selectAllTime,
-                        onClick = selectAllTime,
-                    )
+                        RoutineDetailRow(
+                            title = "종료일",
+                            placeHolder = "눌러서 선택",
+                            value = state.endDate.toFormattedString(),
+                            onClick = showEndDatePickerBottomSheet,
+                        )
+                    }
                 }
 
-                Spacer(modifier = Modifier.height(14.dp))
-
-                StrokeButton.Custom(
-                    isSelected = false,
-                    onClick = showTimePickerBottomSheet,
+                ExpandableContent(
+                    expand = state.startTimeUiExpanded,
+                    required = true,
+                    iconResourceId = R.drawable.img_start_time,
+                    title = "시간",
+                    placeHolder = "ex) 오전 9:40부터 시작",
+                    valueText = state.startTimeText,
+                    onClick = onClickStartTimeExpand,
                 ) {
-                    Row(
-                        modifier = Modifier.height(52.dp).fillMaxWidth().padding(start = 24.dp, end = 20.dp),
-                        verticalAlignment = Alignment.CenterVertically,
+                    Column(
+                        modifier = Modifier.fillMaxWidth().padding(top = 14.dp, bottom = 18.dp, start = 18.dp, end = 18.dp),
+                        horizontalAlignment = Alignment.End,
                     ) {
-                        Text(
-                            if (state.startTime == null) {
-                                "시간 선택"
-                            } else {
-                                "${state.startTime.hour}".padStart(2, '0') + ":" + "${state.startTime.minute}".padStart(
-                                    2,
-                                    '0',
-                                )
-                            },
-                            style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray40),
+                        RoutineDetailRow(
+                            title = "시작 시간",
+                            placeHolder = "눌러서 선택",
+                            value = state.startTime?.toAmPmFormattedString() ?: "",
+                            onClick = showTimePickerBottomSheet,
                         )
 
-                        Spacer(modifier = Modifier.weight(1f))
+                        Spacer(modifier = Modifier.height(20.dp))
 
-                        BitnagilIcon(
-                            id = R.drawable.ic_down_arrow,
-                            tint = BitnagilTheme.colors.navy400,
+                        LabeledCheckBox(
+                            label = "하루 종일",
+                            checked = state.selectAllTime,
+                            onClick = selectAllTime,
                         )
                     }
                 }
             }
-
-            Spacer(modifier = Modifier.height(54.dp))
         }
 
         BitnagilTextButton(
@@ -349,60 +354,22 @@ private fun getSubRoutinePlaceHolder(index: Int): String {
 fun WriteRoutineScreenPreview() {
     BitnagilTheme {
         WriteRoutineScreen(
-            state = WriteRoutineState(
-                routineName = "이름",
-                subRoutineNames = listOf(
-                    "1",
-                    "2",
-                ),
-                repeatType = RepeatType.DAILY,
-                repeatDays = listOf(
-                    SelectableDay(
-                        day = Day.MON,
-                        selected = true,
-                    ),
-                    SelectableDay(
-                        day = Day.TUE,
-                        selected = false,
-                    ),
-                    SelectableDay(
-                        day = Day.WED,
-                        selected = false,
-                    ),
-                    SelectableDay(
-                        day = Day.THU,
-                        selected = false,
-                    ),
-                    SelectableDay(
-                        day = Day.FRI,
-                        selected = false,
-                    ),
-                    SelectableDay(
-                        day = Day.SAT,
-                        selected = false,
-                    ),
-                    SelectableDay(
-                        day = Day.SUN,
-                        selected = false,
-                    ),
-                ),
-                periodWeek = null,
-                startTime = null,
-                selectAllTime = false,
-                loading = false,
-                showTimePickerBottomSheet = false,
-                writeRoutineType = WriteRoutineType.ADD,
-            ),
+            state = WriteRoutineState.Init.copy(periodUiExpanded = true, startTimeUiExpanded = true),
             setRoutineName = {},
             setSubRoutineName = { _, _ -> },
-            addSubRoutine = {},
             selectRepeatTime = {},
             selectDay = {},
             selectAllTime = {},
             showTimePickerBottomSheet = {},
             onClickRegister = {},
-            removeSubRoutine = {},
             onClickBack = {},
+            onClickSubRoutineExpand = {},
+            onClickRepeatDaysExpand = {},
+            onClickStartTimeExpand = {},
+            onClickPeriodExpand = {},
+            showStartDatePickerBottomSheet = {},
+            showEndDatePickerBottomSheet = {},
+            selectNotUseSubRoutines = {},
         )
     }
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineViewModel.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineViewModel.kt
index 79c9d21d..910dd6f8 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineViewModel.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/WriteRoutineViewModel.kt
@@ -5,10 +5,11 @@ import androidx.lifecycle.viewModelScope
 import com.threegap.bitnagil.domain.recommendroutine.usecase.GetRecommendRoutineUseCase
 import com.threegap.bitnagil.domain.routine.usecase.GetRoutineUseCase
 import com.threegap.bitnagil.domain.writeroutine.model.RepeatDay
+import com.threegap.bitnagil.domain.writeroutine.model.RoutineUpdateType
 import com.threegap.bitnagil.domain.writeroutine.usecase.EditRoutineUseCase
-import com.threegap.bitnagil.domain.writeroutine.usecase.GetChangedSubRoutinesUseCase
 import com.threegap.bitnagil.domain.writeroutine.usecase.RegisterRoutineUseCase
 import com.threegap.bitnagil.presentation.common.mviviewmodel.MviViewModel
+import com.threegap.bitnagil.presentation.writeroutine.model.Date
 import com.threegap.bitnagil.presentation.writeroutine.model.Day
 import com.threegap.bitnagil.presentation.writeroutine.model.RepeatType
 import com.threegap.bitnagil.presentation.writeroutine.model.SelectableDay
@@ -25,12 +26,10 @@ import dagger.assisted.AssistedInject
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.launch
 import org.orbitmvi.orbit.syntax.simple.SimpleSyntax
-import com.threegap.bitnagil.domain.writeroutine.model.SubRoutine as DomainSubRoutine
 
 @HiltViewModel(assistedFactory = WriteRoutineViewModel.Factory::class)
 class WriteRoutineViewModel @AssistedInject constructor(
     savedStateHandle: SavedStateHandle,
-    private val getChangedSubRoutinesUseCase: GetChangedSubRoutinesUseCase,
     private val registerRoutineUseCase: RegisterRoutineUseCase,
     private val editRoutineUseCase: EditRoutineUseCase,
     private val getRoutineUseCase: GetRoutineUseCase,
@@ -56,7 +55,7 @@ class WriteRoutineViewModel @AssistedInject constructor(
         when (navigationArg) {
             is WriteRoutineScreenArg.Add -> {
                 viewModelScope.launch {
-                    sendIntent(WriteRoutineIntent.SetWriteRoutineType(WriteRoutineType.ADD))
+                    sendIntent(WriteRoutineIntent.SetWriteRoutineType(WriteRoutineType.Add))
                 }
 
                 navigationArg.baseRoutineId?.let {
@@ -66,7 +65,7 @@ class WriteRoutineViewModel @AssistedInject constructor(
             }
             is WriteRoutineScreenArg.Edit -> {
                 viewModelScope.launch {
-                    sendIntent(WriteRoutineIntent.SetWriteRoutineType(WriteRoutineType.EDIT))
+                    sendIntent(WriteRoutineIntent.SetWriteRoutineType(WriteRoutineType.Edit(updateRoutineFromNowDate = navigationArg.updateRoutineFromNowDate)))
                 }
 
                 navigationArg.routineId.also {
@@ -82,14 +81,18 @@ class WriteRoutineViewModel @AssistedInject constructor(
             sendIntent(WriteRoutineIntent.GetRoutineLoading)
             getRoutineUseCase(routineId).fold(
                 onSuccess = { routine ->
-//                    oldSubRoutines = routine.subRoutines.map { SubRoutine.fromDomainSubRoutine(it) }
                     sendIntent(
                         WriteRoutineIntent.SetRoutine(
                             name = routine.routineName,
                             repeatDays = routine.repeatDay.map { Day.fromDayOfWeek(it) },
                             startTime = Time.fromDomainTimeString(routine.executionTime),
-//                            subRoutines = routine.subRoutines.map { it.subRoutineName },
-                            subRoutines = emptyList(),
+                            subRoutines = listOf(
+                                routine.subRoutineNames.getOrNull(0) ?: "",
+                                routine.subRoutineNames.getOrNull(1) ?: "",
+                                routine.subRoutineNames.getOrNull(2) ?: "",
+                            ),
+                            startDate = Date.fromString(routine.startDate),
+                            endDate = Date.fromString(routine.endDate),
                         ),
                     )
                 },
@@ -111,7 +114,13 @@ class WriteRoutineViewModel @AssistedInject constructor(
                             name = routine.name,
                             repeatDays = listOf(),
                             startTime = Time.fromDomainTimeString(routine.executionTime),
-                            subRoutines = oldSubRoutines.map { it.name },
+                            subRoutines = listOf(
+                                oldSubRoutines.getOrNull(0)?.name ?: "",
+                                oldSubRoutines.getOrNull(1)?.name ?: "",
+                                oldSubRoutines.getOrNull(2)?.name ?: "",
+                            ),
+                            startDate = Date.now(),
+                            endDate = Date.now(),
                         ),
                     )
                 },
@@ -127,18 +136,6 @@ class WriteRoutineViewModel @AssistedInject constructor(
         state: WriteRoutineState,
     ): WriteRoutineState {
         when (intent) {
-            WriteRoutineIntent.AddSubRoutine -> {
-                return state.copy(
-                    subRoutineNames = state.subRoutineNames + "",
-                )
-            }
-            is WriteRoutineIntent.RemoveSubRoutine -> {
-                return state.copy(
-                    subRoutineNames = state.subRoutineNames.filterIndexed { index, _ ->
-                        index != intent.index
-                    },
-                )
-            }
             WriteRoutineIntent.SelectAllTime -> {
                 return state.copy(
                     selectAllTime = !state.selectAllTime,
@@ -156,11 +153,6 @@ class WriteRoutineViewModel @AssistedInject constructor(
                     },
                 )
             }
-            is WriteRoutineIntent.SetPeriodWeek -> {
-                return state.copy(
-                    periodWeek = intent.periodWeek,
-                )
-            }
             is WriteRoutineIntent.SetRepeatType -> {
                 return state.copy(
                     repeatType = intent.repeatType,
@@ -258,6 +250,8 @@ class WriteRoutineViewModel @AssistedInject constructor(
                     repeatDays = repeatDays,
                     repeatType = repeatType,
                     startTime = intent.startTime,
+                    startDate = intent.startDate,
+                    endDate = intent.endDate,
                     subRoutineNames = intent.subRoutines,
                     loading = false,
                 )
@@ -268,6 +262,67 @@ class WriteRoutineViewModel @AssistedInject constructor(
                     loading = true,
                 )
             }
+            WriteRoutineIntent.ShowStartDatePickerBottomSheet -> {
+                return state.copy(
+                    showStartDatePickerBottomSheet = true,
+                )
+            }
+            WriteRoutineIntent.HideEndDatePickerBottomSheet -> {
+                return state.copy(
+                    showEndDatePickerBottomSheet = false,
+                )
+            }
+            WriteRoutineIntent.ShowEndDatePickerBottomSheet -> {
+                return state.copy(
+                    showEndDatePickerBottomSheet = true,
+                )
+            }
+            WriteRoutineIntent.HideStartDatePickerBottomSheet -> {
+                return state.copy(
+                    showStartDatePickerBottomSheet = false,
+                )
+            }
+            is WriteRoutineIntent.SetPeriodUiExpanded -> {
+                return state.copy(
+                    periodUiExpanded = intent.expanded,
+                )
+            }
+            is WriteRoutineIntent.SetRepeatDaysUiExpanded -> {
+                return state.copy(
+                    repeatDaysUiExpanded = intent.expanded,
+                )
+            }
+            is WriteRoutineIntent.SetStartTimeUiExpanded -> {
+                return state.copy(
+                    startTimeUiExpanded = intent.expanded,
+                )
+            }
+            is WriteRoutineIntent.SetSubRoutineUiExpanded -> {
+                return state.copy(
+                    subRoutineUiExpanded = intent.expanded,
+                )
+            }
+            is WriteRoutineIntent.SetEndDate -> {
+                return state.copy(
+                    startDate = Date.min(intent.date, state.startDate),
+                    endDate = intent.date,
+                )
+            }
+            is WriteRoutineIntent.SetStartDate -> {
+                return state.copy(
+                    startDate = intent.date,
+                    endDate = Date.max(intent.date, state.endDate),
+                )
+            }
+
+            WriteRoutineIntent.SelectNotUseSubRoutines -> {
+                val toggledSelectNotUseSubRoutines = !state.selectNotUseSubRoutines
+
+                return state.copy(
+                    selectNotUseSubRoutines = toggledSelectNotUseSubRoutines,
+                    subRoutineNames = if (toggledSelectNotUseSubRoutines) listOf("", "", "") else state.subRoutineNames,
+                )
+            }
         }
     }
 
@@ -283,15 +338,9 @@ class WriteRoutineViewModel @AssistedInject constructor(
         }
     }
 
-    fun addSubRoutine() {
-        viewModelScope.launch {
-            sendIntent(WriteRoutineIntent.AddSubRoutine)
-        }
-    }
-
-    fun removeSubRoutine(index: Int) {
+    fun selectNotUseSubRoutines() {
         viewModelScope.launch {
-            sendIntent(WriteRoutineIntent.RemoveSubRoutine(index))
+            sendIntent(WriteRoutineIntent.SelectNotUseSubRoutines)
         }
     }
 
@@ -332,6 +381,70 @@ class WriteRoutineViewModel @AssistedInject constructor(
         }
     }
 
+    fun showStartDatePickerBottomSheet() {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.ShowStartDatePickerBottomSheet)
+        }
+    }
+
+    fun hideStartDatePickerBottomSheet() {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.HideStartDatePickerBottomSheet)
+        }
+    }
+
+    fun showEndDatePickerBottomSheet() {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.ShowEndDatePickerBottomSheet)
+        }
+    }
+
+    fun hideEndDatePickerBottomSheet() {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.HideEndDatePickerBottomSheet)
+        }
+    }
+
+    fun setStartDate(date: Date) {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetStartDate(date))
+        }
+    }
+
+    fun setEndDate(date: Date) {
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetEndDate(date))
+        }
+    }
+
+    fun toggleSubRoutineUiExpanded() {
+        val currentSubRoutineUiExpanded = stateFlow.value.subRoutineUiExpanded
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetSubRoutineUiExpanded(!currentSubRoutineUiExpanded))
+        }
+    }
+
+    fun toggleRepeatDaysUiExpanded() {
+        val currentRepeatDaysUiExpanded = stateFlow.value.repeatDaysUiExpanded
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetRepeatDaysUiExpanded(!currentRepeatDaysUiExpanded))
+        }
+    }
+
+    fun togglePeriodUiExpanded() {
+        val currentPeriodUiExpanded = stateFlow.value.periodUiExpanded
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetPeriodUiExpanded(!currentPeriodUiExpanded))
+        }
+    }
+
+    fun toggleStartTimeUiExpanded() {
+        val currentStartTimeUiExpanded = stateFlow.value.startTimeUiExpanded
+        viewModelScope.launch {
+            sendIntent(WriteRoutineIntent.SetStartTimeUiExpanded(!currentStartTimeUiExpanded))
+        }
+    }
+
     fun registerRoutine() {
         viewModelScope.launch {
             val currentState = stateFlow.value
@@ -354,17 +467,22 @@ class WriteRoutineViewModel @AssistedInject constructor(
                         .filter { it.selected }
                         .map { it.day.toRepeatDay() }
 
-                null -> return@launch
+                null -> listOf()
             }
 
-            when (currentState.writeRoutineType) {
-                WriteRoutineType.ADD -> {
+            when (val writeRoutineType = currentState.writeRoutineType) {
+                WriteRoutineType.Add -> {
                     sendIntent(WriteRoutineIntent.RegisterRoutineLoading)
+                    val subRoutines = if (currentState.selectNotUseSubRoutines) emptyList() else currentState.subRoutineNames.filter { it.isNotEmpty() }
+                    val noRepeatRoutine = repeatDay.isEmpty()
+
                     val registerRoutineResult = registerRoutineUseCase(
-                        currentState.routineName,
-                        repeatDay,
-                        startTime.toDomainTime(),
-                        currentState.subRoutineNames,
+                        name = currentState.routineName,
+                        repeatDay = repeatDay,
+                        startTime = startTime.toDomainTime(),
+                        startDate = if (noRepeatRoutine) Date.now().toDomainDate() else currentState.startDate.toDomainDate(),
+                        endDate = if (noRepeatRoutine) Date.now().toDomainDate() else currentState.endDate.toDomainDate(),
+                        subRoutines = subRoutines,
                     )
 
                     if (registerRoutineResult.isSuccess) {
@@ -373,27 +491,25 @@ class WriteRoutineViewModel @AssistedInject constructor(
                         sendIntent(WriteRoutineIntent.RegisterRoutineFailure)
                     }
                 }
-                WriteRoutineType.EDIT -> {
+                is WriteRoutineType.Edit -> {
                     val currentRoutineId = routineId ?: return@launch
-
-                    val subRoutineDiffs = getChangedSubRoutinesUseCase(
-                        oldSubRoutines = oldSubRoutines.mapIndexed { index, subRoutine ->
-                            DomainSubRoutine(
-                                id = subRoutine.id,
-                                name = subRoutine.name,
-                                sort = index + 1,
-                            )
-                        },
-                        newSubRoutineNames = currentState.subRoutineNames,
-                    )
+                    val subRoutines = if (currentState.selectNotUseSubRoutines) emptyList() else currentState.subRoutineNames.filter { it.isNotEmpty() }
+                    val routineUpdateType = if (writeRoutineType.updateRoutineFromNowDate) {
+                        RoutineUpdateType.Today
+                    } else {
+                        RoutineUpdateType.Tomorrow
+                    }
 
                     sendIntent(WriteRoutineIntent.EditRoutineLoading)
                     val editRoutineResult = editRoutineUseCase(
                         routineId = currentRoutineId,
+                        routineUpdateType = routineUpdateType,
                         name = currentState.routineName,
-                        repeatDay,
+                        repeatDay = repeatDay,
                         startTime = startTime.toDomainTime(),
-                        subRoutines = subRoutineDiffs,
+                        startDate = currentState.startDate.toDomainDate(),
+                        endDate = currentState.endDate.toDomainDate(),
+                        subRoutines = subRoutines,
                     )
 
                     if (editRoutineResult.isSuccess) {
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/namefield/NameField.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/namefield/NameField.kt
index d22be270..96ea17eb 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/namefield/NameField.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/namefield/NameField.kt
@@ -1,17 +1,20 @@
 package com.threegap.bitnagil.presentation.writeroutine.component.atom.namefield
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+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.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.R
@@ -30,37 +33,58 @@ fun NameField(
         value = value,
         onValueChange = onValueChange,
         modifier = modifier
-            .background(BitnagilTheme.colors.coolGray99, RoundedCornerShape(12.dp))
-            .fillMaxWidth()
-            .height(52.dp),
+            .fillMaxWidth(),
         singleLine = true,
-        textStyle = BitnagilTheme.typography.body2SemiBold,
+        textStyle = BitnagilTheme.typography.title3SemiBold,
         decorationBox = { innerTextField ->
-            Row(
-                modifier = Modifier.padding(start = 24.dp, end = 16.dp),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                Box(modifier = Modifier.weight(1f)) {
-                    if (value.isEmpty()) {
-                        Text(
-                            placeholder,
-                            style = BitnagilTheme.typography.body2SemiBold.copy(color = BitnagilTheme.colors.coolGray90),
-                        )
+            Column {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Box(modifier = Modifier.weight(1f)) {
+                        if (value.isEmpty()) {
+                            Text(
+                                placeholder,
+                                style = BitnagilTheme.typography.title3SemiBold.copy(color = BitnagilTheme.colors.coolGray90),
+                            )
+                        }
+                        innerTextField()
                     }
-                    innerTextField()
-                }
 
-                if (onClickRemove != null) {
-                    Box(
-                        modifier = Modifier.clickableWithoutRipple(onClick = onClickRemove),
-                    ) {
-                        BitnagilIcon(
-                            id = R.drawable.ic_close,
-                            tint = BitnagilTheme.colors.coolGray80,
-                        )
+                    if (onClickRemove != null) {
+                        Box(
+                            modifier = Modifier.clickableWithoutRipple(onClick = onClickRemove),
+                            contentAlignment = Alignment.Center,
+                        ) {
+                            BitnagilIcon(
+                                id = R.drawable.ic_close_circle,
+                                tint = null,
+                                modifier = Modifier.size(24.dp).padding(top = 4.dp, bottom = 4.dp, start = 8.dp),
+                            )
+                        }
                     }
                 }
+
+                Spacer(modifier = Modifier.height(12.dp))
+
+                HorizontalDivider(
+                    thickness = 2.dp,
+                    modifier = Modifier.height(2.dp),
+                    color = BitnagilTheme.colors.coolGray90,
+                )
             }
         },
     )
 }
+
+@Composable
+@Preview(showBackground = true, widthDp = 300, heightDp = 300)
+fun NameFieldPreview() {
+    BitnagilTheme {
+        NameField(
+            value = "value",
+            onValueChange = {},
+            onClickRemove = {},
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/selectcell/SelectCell.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/selectcell/SelectCell.kt
index 5659e162..d9f6ac14 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/selectcell/SelectCell.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/selectcell/SelectCell.kt
@@ -1,14 +1,17 @@
 package com.threegap.bitnagil.presentation.writeroutine.component.atom.selectcell
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
@@ -22,18 +25,76 @@ fun SelectCell(
 ) {
     Box(
         modifier = modifier
-            .height(48.dp)
+            .height(38.dp)
             .background(
-                color = if (selected) BitnagilTheme.colors.lightBlue100 else Color.Transparent,
+                color = if (selected) BitnagilTheme.colors.orange500 else BitnagilTheme.colors.white,
                 shape = RoundedCornerShape(12.dp),
             )
+            .border(
+                width = 1.dp,
+                shape = RoundedCornerShape(12.dp),
+                color = if (selected) BitnagilTheme.colors.orange500 else BitnagilTheme.colors.coolGray96,
+            )
             .clickableWithoutRipple(onClick = onClick),
         contentAlignment = Alignment.Center,
     ) {
         Text(
             text = text,
-            color = BitnagilTheme.colors.navy400,
+            color = if (selected) BitnagilTheme.colors.white else BitnagilTheme.colors.coolGray30,
             style = BitnagilTheme.typography.body2Medium,
         )
     }
 }
+
+@Composable
+@Preview(showBackground = true, widthDp = 300, heightDp = 300)
+private fun SelectCellPreview() {
+    BitnagilTheme {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            SelectCell(
+                text = "월",
+                selected = true,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "화",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "수",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "목",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "금",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "토",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+            SelectCell(
+                text = "일",
+                selected = false,
+                onClick = {},
+                modifier = Modifier.weight(1f),
+            )
+        }
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/TooltipButton.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/TooltipButton.kt
deleted file mode 100644
index 28ce9368..00000000
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/TooltipButton.kt
+++ /dev/null
@@ -1,131 +0,0 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Text
-import androidx.compose.material3.TooltipBox
-import androidx.compose.material3.rememberTooltipState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.drawscope.DrawScope
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.unit.dp
-import com.threegap.bitnagil.designsystem.BitnagilTheme
-import com.threegap.bitnagil.designsystem.R
-import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
-import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
-import com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton.model.TooltipDirection
-import com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton.model.TooltipPositionProvider
-import kotlinx.coroutines.launch
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun TooltipButton(
-    tooltipText: String,
-    tooltipDirection: TooltipDirection = TooltipDirection.Left,
-) {
-    val tooltipState = rememberTooltipState()
-    val coroutineScope = rememberCoroutineScope()
-    val tooltipBoxColor = BitnagilTheme.colors.navy400
-    var buttonSize by remember { mutableStateOf(IntSize.Zero) }
-    val tooltipPositionX = with(LocalDensity.current) { 16.dp.toPx().toInt() }
-
-    TooltipBox(
-        positionProvider = remember {
-            TooltipPositionProvider(
-                direction = tooltipDirection,
-                addPositionX = tooltipPositionX,
-            )
-        },
-        tooltip = {
-            Column(
-                modifier = Modifier.padding(bottom = 2.dp),
-            ) {
-                Text(
-                    tooltipText,
-                    modifier = Modifier
-                        .background(
-                            color = BitnagilTheme.colors.navy400,
-                            shape = RoundedCornerShape(8.dp),
-                        )
-                        .clickable {
-                            tooltipState.dismiss()
-                        }
-                        .padding(10.dp),
-                    style = BitnagilTheme.typography.caption1Medium.copy(color = BitnagilTheme.colors.white),
-                )
-
-                Canvas(
-                    modifier = Modifier
-                        .height(8.dp)
-                        .width(16.dp)
-                        .offset {
-                            IntOffset(x = tooltipPositionX + (buttonSize.width / 2) - 8.dp.toPx().toInt(), y = 0)
-                        },
-                ) {
-                    drawTooltipArrow(this, tooltipBoxColor)
-                }
-            }
-        },
-        state = tooltipState,
-    ) {
-        BitnagilIcon(
-            id = R.drawable.ic_tooltip,
-            tint = BitnagilTheme.colors.navy200,
-            modifier = Modifier
-                .clickableWithoutRipple {
-                    coroutineScope.launch {
-                        tooltipState.show()
-                    }
-                }
-                .onGloballyPositioned { coordinate ->
-                    buttonSize = coordinate.size
-                },
-        )
-    }
-}
-
-private fun DrawScope.drawTooltipArrow(scope: DrawScope, color: Color) {
-    val path = Path().apply {
-        moveTo(0f, 0f)
-        lineTo(size.width / 2, size.height)
-        lineTo(size.width, 0f)
-        close()
-    }
-    scope.drawPath(
-        path = path,
-        color = color,
-    )
-}
-
-@Preview(showBackground = true, widthDp = 300, heightDp = 300)
-@Composable
-fun ToolTipButtonPreview() {
-    Box(
-        contentAlignment = Alignment.Center,
-    ) {
-        TooltipButton(tooltipText = "이것은 툴팁입니다.")
-    }
-}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipDirection.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipDirection.kt
deleted file mode 100644
index 10e0eda2..00000000
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipDirection.kt
+++ /dev/null
@@ -1,5 +0,0 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton.model
-
-enum class TooltipDirection {
-    Left, Center, Right
-}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipPositionProvider.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipPositionProvider.kt
deleted file mode 100644
index d3eacccb..00000000
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/tooltipbutton/model/TooltipPositionProvider.kt
+++ /dev/null
@@ -1,38 +0,0 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.atom.tooltipbutton.model
-
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.IntRect
-import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.window.PopupPositionProvider
-
-class TooltipPositionProvider(
-    private val direction: TooltipDirection,
-    private val addPositionX: Int = 0,
-) : PopupPositionProvider {
-    override fun calculatePosition(
-        anchorBounds: IntRect,
-        windowSize: IntSize,
-        layoutDirection: LayoutDirection,
-        popupContentSize: IntSize,
-    ): IntOffset {
-        val x: Int
-        val y: Int
-
-        when (direction) {
-            TooltipDirection.Center -> {
-                x = anchorBounds.left + (anchorBounds.width / 2) - (popupContentSize.width / 2)
-                y = anchorBounds.top - popupContentSize.height
-            }
-            TooltipDirection.Left -> {
-                x = anchorBounds.left - addPositionX
-                y = anchorBounds.top - popupContentSize.height
-            }
-            TooltipDirection.Right -> {
-                x = anchorBounds.right + addPositionX
-                y = anchorBounds.top - popupContentSize.height
-            }
-        }
-        return IntOffset(x, y)
-    }
-}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/strokebutton/StrokeButton.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/writeroutinebutton/WriteRoutineButton.kt
similarity index 68%
rename from presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/strokebutton/StrokeButton.kt
rename to presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/writeroutinebutton/WriteRoutineButton.kt
index 270f6e63..76a41675 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/strokebutton/StrokeButton.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/atom/writeroutinebutton/WriteRoutineButton.kt
@@ -1,7 +1,9 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.atom.strokebutton
+package com.threegap.bitnagil.presentation.writeroutine.component.atom.writeroutinebutton
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
@@ -9,11 +11,12 @@ 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.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
 
-class StrokeButton {
+class WriteRoutineButton {
     companion object {
         @Composable
         fun Text(
@@ -23,9 +26,9 @@ class StrokeButton {
             modifier: Modifier = Modifier,
             enabled: Boolean = true,
         ) {
-            val textColor = if (isSelected) BitnagilTheme.colors.navy500 else BitnagilTheme.colors.navy100
+            val textColor = if (isSelected) BitnagilTheme.colors.white else BitnagilTheme.colors.coolGray30
 
-            StrokeButtonFrame(
+            WriteRoutineButtonFrame(
                 modifier = modifier,
                 isSelected = isSelected,
                 onClick = onClick,
@@ -51,7 +54,7 @@ class StrokeButton {
             enabled: Boolean = true,
             content: @Composable () -> Unit,
         ) {
-            StrokeButtonFrame(
+            WriteRoutineButtonFrame(
                 modifier = modifier,
                 isSelected = isSelected,
                 onClick = onClick,
@@ -64,18 +67,23 @@ class StrokeButton {
 }
 
 @Composable
-private fun StrokeButtonFrame(
+private fun WriteRoutineButtonFrame(
     isSelected: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     content: @Composable () -> Unit,
 ) {
-    val borderColor = if (isSelected) BitnagilTheme.colors.navy500 else BitnagilTheme.colors.navy100
+    val borderColor = if (isSelected) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.coolGray97
+    val backgroundColor = if (isSelected) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.white
 
     Box(
         modifier = modifier
             .clip(RoundedCornerShape(12.dp))
+            .background(
+                color = backgroundColor,
+                shape = RoundedCornerShape(12.dp),
+            )
             .border(
                 width = 1.dp,
                 color = borderColor,
@@ -87,3 +95,22 @@ private fun StrokeButtonFrame(
         content()
     }
 }
+
+@Composable
+@Preview(showBackground = true, widthDp = 300, heightDp = 300)
+private fun WriteRoutineButtonPreview() {
+    BitnagilTheme {
+        Row {
+            WriteRoutineButton.Text(
+                text = "월",
+                isSelected = true,
+                onClick = {},
+            )
+            WriteRoutineButton.Text(
+                text = "화",
+                isSelected = false,
+                onClick = {},
+            )
+        }
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/expandablecontent/ExpandableContent.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/expandablecontent/ExpandableContent.kt
new file mode 100644
index 00000000..9b3c530f
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/expandablecontent/ExpandableContent.kt
@@ -0,0 +1,163 @@
+package com.threegap.bitnagil.presentation.writeroutine.component.block.expandablecontent
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateContentSize
+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.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.R
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
+import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
+
+@Composable
+fun ExpandableContent(
+    expand: Boolean,
+    required: Boolean,
+    iconResourceId: Int,
+    title: String,
+    placeHolder: String,
+    valueText: String?,
+    onClick: () -> Unit,
+    content: @Composable () -> Unit,
+) {
+    val showValueText = !valueText.isNullOrEmpty()
+    val mainTextStyle = BitnagilTheme.typography.body1SemiBold.copy(color = BitnagilTheme.colors.coolGray10)
+    val subTextStyle = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray70)
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(color = BitnagilTheme.colors.coolGray99),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickableWithoutRipple(onClick = onClick)
+                .padding(start = 18.dp, end = 12.dp, top = 18.dp, bottom = 18.dp)
+                .animateContentSize(),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Image(
+                painter = painterResource(iconResourceId),
+                contentDescription = null,
+                modifier = Modifier.size(24.dp),
+            )
+
+            Spacer(modifier = Modifier.width(15.dp))
+
+            Column(modifier = Modifier.weight(1f)) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = title,
+                        style = if (showValueText && !expand) subTextStyle else mainTextStyle,
+                    )
+
+                    if (required) {
+                        BitnagilIcon(
+                            id = R.drawable.ic_routine_success,
+                            tint = null,
+                            modifier = Modifier.size(12.dp),
+                        )
+                    }
+                }
+                if (!expand) {
+                    Text(
+                        text = if (showValueText) valueText ?: placeHolder else placeHolder,
+                        style = if (showValueText) mainTextStyle else subTextStyle,
+                    )
+                }
+            }
+
+            BitnagilIcon(
+                id = if (expand) R.drawable.ic_up_arrow_20 else R.drawable.ic_down_arrow_20,
+                tint = BitnagilTheme.colors.coolGray30,
+                modifier = Modifier
+                    .size(36.dp)
+                    .padding(8.dp),
+            )
+        }
+
+        AnimatedVisibility(visible = expand) {
+            Column {
+                HorizontalDivider(
+                    modifier = Modifier.fillMaxWidth().padding(horizontal = 18.dp),
+                    color = BitnagilTheme.colors.coolGray96,
+                    thickness = 1.dp,
+                )
+
+                content()
+            }
+        }
+    }
+}
+
+@Preview(heightDp = 300)
+@Composable
+private fun ExpandableContentPreview() {
+    var isExpanded by remember { mutableStateOf(true) }
+    var isChecked by remember { mutableStateOf(false) }
+
+    Column {
+        ExpandableContent(
+            expand = isExpanded,
+            iconResourceId = R.drawable.img_subroutines,
+            title = "세부루틴",
+            placeHolder = "세부루틴을 설정해주세요.",
+            valueText = "이거\n길면\n어떻게될까",
+            onClick = { isExpanded = !isExpanded },
+            required = true,
+            content = {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.height(100.dp).clickable { isChecked = !isChecked },
+                ) {
+                    Checkbox(
+                        checked = isChecked,
+                        onCheckedChange = { isChecked = it },
+                        colors = CheckboxDefaults.colors(
+                            checkedColor = Color.Gray,
+                            uncheckedColor = Color.Gray,
+                        ),
+                    )
+                    Text(
+                        text = "세부루틴 설정 안 함",
+                        color = Color.Gray,
+                        fontSize = 14.sp,
+                    )
+                }
+            },
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/labeledcheckbox/LabeledCheckBox.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/labeledcheckbox/LabeledCheckBox.kt
index 573a6172..496c84b5 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/labeledcheckbox/LabeledCheckBox.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/labeledcheckbox/LabeledCheckBox.kt
@@ -29,17 +29,21 @@ fun LabeledCheckBox(
         modifier = modifier.clickableWithoutRipple(onClick = onClick),
         verticalAlignment = Alignment.CenterVertically,
     ) {
+        Text(label, style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray30))
+
+        Spacer(modifier = Modifier.width(6.dp))
+
         Box(
             modifier = Modifier
-                .size(20.dp)
+                .size(18.dp)
                 .background(
                     shape = RoundedCornerShape(4.dp),
-                    color = if (checked) BitnagilTheme.colors.navy500 else BitnagilTheme.colors.coolGray99,
+                    color = if (checked) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.coolGray99,
                 )
                 .border(
                     width = 1.dp,
                     shape = RoundedCornerShape(4.dp),
-                    color = if (checked) BitnagilTheme.colors.navy500 else BitnagilTheme.colors.coolGray95,
+                    color = if (checked) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.coolGray95,
                 ),
             contentAlignment = Alignment.Center,
         ) {
@@ -50,9 +54,5 @@ fun LabeledCheckBox(
                 )
             }
         }
-
-        Spacer(modifier = Modifier.width(6.dp))
-
-        Text(label, style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.navy400))
     }
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/routinedetailrow/RoutineDetailRow.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/routinedetailrow/RoutineDetailRow.kt
new file mode 100644
index 00000000..4dab6f02
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/routinedetailrow/RoutineDetailRow.kt
@@ -0,0 +1,61 @@
+package com.threegap.bitnagil.presentation.writeroutine.component.block.routinedetailrow
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.presentation.writeroutine.component.atom.writeroutinebutton.WriteRoutineButton
+
+@Composable
+fun RoutineDetailRow(
+    title: String,
+    placeHolder: String,
+    value: String,
+    onClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(title, style = BitnagilTheme.typography.body2SemiBold.copy(color = BitnagilTheme.colors.coolGray30))
+
+        WriteRoutineButton.Custom(
+            modifier = Modifier.width(120.dp),
+            onClick = onClick,
+            isSelected = false,
+        ) {
+            Box(
+                modifier = Modifier.padding(vertical = 10.dp),
+            ) {
+                if (value.isEmpty()) {
+                    Text(placeHolder, style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray90))
+                }
+
+                Text(value, style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray30))
+            }
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true, widthDp = 300, heightDp = 300)
+fun RoutineDetailRowPreview() {
+    BitnagilTheme {
+        RoutineDetailRow(
+            title = "시작일",
+            placeHolder = "눌러서 선택",
+            value = "",
+            onClick = {},
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/subroutinefield/SubRoutineField.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/subroutinefield/SubRoutineField.kt
new file mode 100644
index 00000000..a9a976f0
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/block/subroutinefield/SubRoutineField.kt
@@ -0,0 +1,87 @@
+package com.threegap.bitnagil.presentation.writeroutine.component.block.subroutinefield
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+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.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+
+@Composable
+fun SubRoutineField(
+    resourceId: Int,
+    placeHolder: String,
+    value: String,
+    onValueChange: (String) -> Unit,
+    enabled: Boolean,
+) {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            painter = painterResource(resourceId),
+            contentDescription = null,
+            modifier = Modifier.size(21.dp),
+        )
+
+        Spacer(modifier = Modifier.width(12.dp))
+
+        BasicTextField(
+            value = value,
+            onValueChange = onValueChange,
+            modifier = Modifier.weight(1f),
+            singleLine = true,
+            enabled = enabled,
+            textStyle = BitnagilTheme.typography.body2Medium.copy(color = if (enabled) BitnagilTheme.colors.coolGray30 else BitnagilTheme.colors.coolGray90),
+            decorationBox = { innerTextField ->
+                Column {
+                    Box {
+                        if (value.isEmpty()) {
+                            Text(
+                                text = placeHolder,
+                                style = BitnagilTheme.typography.body2Medium.copy(color = BitnagilTheme.colors.coolGray90),
+                            )
+                        }
+                        innerTextField()
+                    }
+
+                    Spacer(modifier = Modifier.height(6.dp))
+
+                    HorizontalDivider(
+                        thickness = 1.dp,
+                        modifier = Modifier.height(1.dp),
+                        color = BitnagilTheme.colors.coolGray90,
+                    )
+                }
+            },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true, widthDp = 300, heightDp = 300)
+fun NameFieldPreview() {
+    BitnagilTheme {
+        SubRoutineField(
+            resourceId = com.threegap.bitnagil.designsystem.R.drawable.img_circle_1,
+            placeHolder = "세부루틴을 설정해주세요.",
+            value = "TEXT",
+            onValueChange = {},
+            enabled = true,
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/Preview.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/Preview.kt
deleted file mode 100644
index e1f2fcdf..00000000
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/Preview.kt
+++ /dev/null
@@ -1,17 +0,0 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.template
-
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-
-@Preview
-@Composable
-fun TimePickerBottomSheetContentPreview() {
-    TimePickerBottomSheetContent(
-        modifier = Modifier.fillMaxWidth(),
-        onTimeSelected = { _, _ -> },
-        hour = 12,
-        minute = 30,
-    )
-}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/DatePickerBottomSheet.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/DatePickerBottomSheet.kt
new file mode 100644
index 00000000..d9322c9e
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/DatePickerBottomSheet.kt
@@ -0,0 +1,268 @@
+package com.threegap.bitnagil.presentation.writeroutine.component.template.datepickerbottomsheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+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.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.R
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilIconButton
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilTextButton
+import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
+import com.threegap.bitnagil.presentation.writeroutine.component.template.datepickerbottomsheet.model.CalendarUtils
+import com.threegap.bitnagil.presentation.writeroutine.model.Date
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DatePickerBottomSheet(
+    modifier: Modifier = Modifier,
+    onDateSelected: (Date) -> Unit,
+    date: Date,
+    onDismiss: () -> Unit,
+    availableStartDate: Date?,
+    availableEndDate: Date?,
+) {
+    val sheetState = rememberModalBottomSheetState(
+        skipPartiallyExpanded = true,
+    )
+    val coroutineScope = rememberCoroutineScope()
+
+    ModalBottomSheet(
+        sheetState = sheetState,
+        onDismissRequest = onDismiss,
+        containerColor = BitnagilTheme.colors.white,
+    ) {
+        DatePickerBottomSheetContent(
+            modifier = modifier,
+            onDateSelected = { date ->
+                onDateSelected(date)
+                coroutineScope
+                    .launch { sheetState.hide() }
+                    .invokeOnCompletion {
+                        if (!sheetState.isVisible) {
+                            onDismiss()
+                        }
+                    }
+            },
+            initDate = date,
+            availableStartDate = availableStartDate,
+            availableEndDate = availableEndDate,
+        )
+    }
+}
+
+@Composable
+private fun DatePickerBottomSheetContent(
+    modifier: Modifier = Modifier,
+    onDateSelected: (Date) -> Unit,
+    initDate: Date,
+    availableStartDate: Date?,
+    availableEndDate: Date?,
+) {
+    var currentYear by remember { mutableIntStateOf(initDate.year) }
+    var currentMonth by remember { mutableIntStateOf(initDate.month) }
+    var selectedDate by remember { mutableStateOf(initDate) }
+
+    val lastDaysOfPrevMonth = remember(currentYear, currentMonth) {
+        CalendarUtils.lastDaysOfPrevMonth(currentYear, currentMonth)
+    }
+    val firstDaysOfNextMonth = remember(currentYear, currentMonth) {
+        CalendarUtils.firstDaysOfNextMonth(currentYear, currentMonth)
+    }
+    val currentDaysOfMonth = remember(currentYear, currentMonth) {
+        CalendarUtils.getDayAmountOfMonth(currentYear, currentMonth)
+    }
+
+    val prevMonthButtonEnabled by remember(availableStartDate) {
+        derivedStateOf {
+            (availableStartDate == null) || (availableStartDate.year < currentYear) || (availableStartDate.month < currentMonth)
+        }
+    }
+    val nextMonthButtonEnabled by remember(availableEndDate) {
+        derivedStateOf {
+            (availableEndDate == null) || (availableEndDate.year > currentYear) || (availableEndDate.month > currentMonth)
+        }
+    }
+
+    Column(
+        modifier = modifier.background(
+            color = BitnagilTheme.colors.white,
+        ),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 20.dp, end = 16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text("${currentYear}년 ${currentMonth}월", style = BitnagilTheme.typography.title2Bold.copy(color = BitnagilTheme.colors.coolGray10))
+
+            Row {
+                BitnagilIconButton(
+                    id = R.drawable.ic_back_arrow_20,
+                    onClick = {
+                        if (currentMonth == 1) {
+                            currentMonth = 12
+                            currentYear -= 1
+                        } else {
+                            currentMonth -= 1
+                        }
+                    },
+                    modifier = Modifier.size(48.dp),
+                    enabled = prevMonthButtonEnabled,
+                    paddingValues = PaddingValues(14.dp),
+                    tint = if (prevMonthButtonEnabled) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.coolGray95,
+                )
+
+                BitnagilIconButton(
+                    id = R.drawable.ic_right_arrow_20,
+                    onClick = {
+                        if (currentMonth == 12) {
+                            currentMonth = 1
+                            currentYear += 1
+                        } else {
+                            currentMonth += 1
+                        }
+                    },
+                    modifier = Modifier.size(48.dp),
+                    enabled = nextMonthButtonEnabled,
+                    paddingValues = PaddingValues(14.dp),
+                    tint = if (nextMonthButtonEnabled) BitnagilTheme.colors.coolGray10 else BitnagilTheme.colors.coolGray95,
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Box(
+            modifier = Modifier.padding(horizontal = 20.dp),
+        ) {
+            LazyVerticalGrid(
+                columns = GridCells.Fixed(7),
+                verticalArrangement = Arrangement.spacedBy(2.dp),
+                horizontalArrangement = Arrangement.spacedBy(2.dp),
+            ) {
+                items(CalendarUtils.dateStringList.size) { index ->
+                    Text(
+                        CalendarUtils.dateStringList[index],
+                        modifier = Modifier.padding(bottom = 16.dp),
+                        style = BitnagilTheme.typography.body2SemiBold.copy(color = BitnagilTheme.colors.coolGray50),
+                        textAlign = TextAlign.Center,
+                    )
+                }
+
+                itemsIndexed(lastDaysOfPrevMonth) { _, day ->
+                    Box(
+                        modifier = Modifier.aspectRatio(1f),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text(
+                            "$day",
+                            style = BitnagilTheme.typography.subtitle1Regular.copy(color = BitnagilTheme.colors.coolGray80),
+                        )
+                    }
+                }
+
+                items(currentDaysOfMonth) { index ->
+                    val selected = (selectedDate.year == currentYear) && (selectedDate.month == currentMonth) && (selectedDate.day == index + 1)
+                    val currentDate = Date(year = currentYear, month = currentMonth, day = index + 1)
+                    val available = currentDate.checkInRange(startDate = availableStartDate, endDate = availableEndDate)
+                    Box(
+                        modifier = Modifier.aspectRatio(1f).background(
+                            color = if (selected) { BitnagilTheme.colors.orange50 } else { Color.Transparent },
+                            shape = if (selected) { RoundedCornerShape(12.dp) } else { RectangleShape },
+                        ).clickableWithoutRipple {
+                            if (!available) return@clickableWithoutRipple
+                            selectedDate = currentDate
+                        },
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text(
+                            "${index + 1}",
+                            style = if (selected) {
+                                BitnagilTheme.typography.subtitle1SemiBold.copy(color = BitnagilTheme.colors.orange500)
+                            } else if (available) {
+                                BitnagilTheme.typography.subtitle1Regular.copy(color = BitnagilTheme.colors.coolGray10)
+                            } else {
+                                BitnagilTheme.typography.subtitle1Regular.copy(color = BitnagilTheme.colors.coolGray80)
+                            },
+                        )
+                    }
+                }
+
+                itemsIndexed(firstDaysOfNextMonth) { _, day ->
+                    Box(
+                        modifier = Modifier.aspectRatio(1f),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text(
+                            "$day",
+                            style = BitnagilTheme.typography.subtitle1Regular.copy(color = BitnagilTheme.colors.coolGray80),
+                        )
+                    }
+                }
+            }
+        }
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        BitnagilTextButton(
+            modifier = Modifier
+                .padding(start = 16.dp, end = 16.dp, bottom = 14.dp)
+                .fillMaxWidth(),
+            text = "확인",
+            onClick = {
+                onDateSelected(selectedDate)
+            },
+            enabled = true,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun DatePickerBottomSheetContentPreview() {
+    BitnagilTheme {
+        DatePickerBottomSheetContent(
+            modifier = Modifier,
+            onDateSelected = { _ -> },
+            initDate = Date(year = 2025, month = 8, day = 1),
+            availableStartDate = null,
+            availableEndDate = null,
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/model/CalendarUtils.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/model/CalendarUtils.kt
new file mode 100644
index 00000000..cd7f4d2a
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/datepickerbottomsheet/model/CalendarUtils.kt
@@ -0,0 +1,65 @@
+package com.threegap.bitnagil.presentation.writeroutine.component.template.datepickerbottomsheet.model
+
+import java.util.Calendar
+
+class CalendarUtils {
+    companion object {
+        val dateStringList = listOf(
+            "일",
+            "월",
+            "화",
+            "수",
+            "목",
+            "금",
+            "토",
+        )
+
+        fun getDayAmountOfMonth(year: Int, month: Int): Int {
+            return when (month) {
+                2 -> {
+                    if (year % 4 != 0 || (year % 100 == 0 && year % 400 != 0)) { 28 } else { 29 }
+                }
+                in listOf(1, 3, 5, 7, 8, 10, 12) -> { 31 }
+                else -> { 30 }
+            }
+        }
+
+        /**
+         * 달력 상에서 이전달에 해당하는 요일의 리스트를 리턴합니다.
+         */
+        fun lastDaysOfPrevMonth(year: Int, month: Int): List<Int> {
+            val calendar = Calendar.getInstance()
+            val prevMonthIndex = month - 1
+
+            calendar.set(Calendar.YEAR, year)
+            calendar.set(Calendar.MONTH, prevMonthIndex)
+            calendar.set(Calendar.DAY_OF_MONTH, 1)
+
+            val prevMonth = if (prevMonthIndex == 0) {
+                12
+            } else {
+                month - 1
+            }
+
+            val startDayOfWeek = calendar.get(Calendar.DAY_OF_WEEK)
+            val amountOfDayOfPrevMonth = getDayAmountOfMonth(year, prevMonth)
+
+            return List(startDayOfWeek - 1) { i -> amountOfDayOfPrevMonth - (startDayOfWeek - 2 - i) }
+        }
+
+        /**
+         * 달력 상에서 다음달에 해당하는 요일의 리스트를 리턴합니다.
+         */
+        fun firstDaysOfNextMonth(year: Int, month: Int): List<Int> {
+            val calendar = Calendar.getInstance()
+
+            calendar.set(Calendar.YEAR, year)
+            calendar.set(Calendar.MONTH, month)
+            calendar.set(Calendar.DAY_OF_MONTH, 1)
+
+            val startDayOfWeek = calendar.get(Calendar.DAY_OF_WEEK)
+
+            return List(8 - startDayOfWeek) { it + 1 }
+        }
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/TimePickerBottomSheet.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/timepickerbottomsheet/TimePickerBottomSheet.kt
similarity index 91%
rename from presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/TimePickerBottomSheet.kt
rename to presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/timepickerbottomsheet/TimePickerBottomSheet.kt
index 86384f8d..5f3b2bb1 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/TimePickerBottomSheet.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/component/template/timepickerbottomsheet/TimePickerBottomSheet.kt
@@ -1,4 +1,4 @@
-package com.threegap.bitnagil.presentation.writeroutine.component.template
+package com.threegap.bitnagil.presentation.writeroutine.component.template.timepickerbottomsheet
 
 import android.view.View
 import android.widget.TimePicker
@@ -17,6 +17,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import com.threegap.bitnagil.designsystem.BitnagilTheme
@@ -60,7 +61,7 @@ fun TimePickerBottomSheet(
 }
 
 @Composable
-fun TimePickerBottomSheetContent(
+private fun TimePickerBottomSheetContent(
     modifier: Modifier = Modifier,
     onTimeSelected: (Int, Int) -> Unit,
     hour: Int,
@@ -82,10 +83,6 @@ fun TimePickerBottomSheetContent(
                 val timePicker = view.findViewById<TimePicker>(R.id.time_picker)
                 view.tag = timePicker
 
-                TimePicker(context).apply {
-                    setIs24HourView(true)
-                }
-
                 view
             },
             update = {
@@ -117,3 +114,14 @@ fun TimePickerBottomSheetContent(
         )
     }
 }
+
+@Preview
+@Composable
+private fun TimePickerBottomSheetContentPreview() {
+    TimePickerBottomSheetContent(
+        modifier = Modifier.fillMaxWidth(),
+        onTimeSelected = { _, _ -> },
+        hour = 12,
+        minute = 30,
+    )
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Date.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Date.kt
new file mode 100644
index 00000000..09ed8c5b
--- /dev/null
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Date.kt
@@ -0,0 +1,71 @@
+package com.threegap.bitnagil.presentation.writeroutine.model
+
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+import com.threegap.bitnagil.domain.writeroutine.model.Date as DomainDate
+
+@Parcelize
+data class Date(
+    val year: Int,
+    val month: Int,
+    val day: Int,
+) : Parcelable {
+    companion object {
+        fun now() = Date(
+            year = java.time.LocalDate.now().year,
+            month = java.time.LocalDate.now().monthValue,
+            day = java.time.LocalDate.now().dayOfMonth,
+        )
+
+        fun min(d1: Date, d2: Date): Date {
+            if (d1.year < d2.year) return d1
+            if (d1.year > d2.year) return d2
+
+            if (d1.month < d2.month) return d1
+            if (d1.month > d2.month) return d2
+
+            if (d1.day < d2.day) return d1
+
+            return d2
+        }
+
+        fun max(d1: Date, d2: Date): Date {
+            if (d1.year > d2.year) return d1
+            if (d1.year < d2.year) return d2
+
+            if (d1.month > d2.month) return d1
+            if (d1.month < d2.month) return d2
+
+            if (d1.day > d2.day) return d1
+
+            return d2
+        }
+
+        fun fromString(dateString: String): Date {
+            val (year, month, day) = dateString.split("-").map { it.toInt() }
+            return Date(year, month, day)
+        }
+    }
+
+    fun toFormattedString(): String = "%04d.%02d.%02d".format(year, month, day)
+    fun toYearShrinkageFormattedString(): String = "%02d.%02d.%02d".format((year % 100), month, day)
+
+    fun checkInRange(startDate: Date?, endDate: Date?): Boolean {
+        val appliedStartDate = startDate ?: Date(year = 2000, month = 1, day = 1)
+        val appliedEndDate = endDate ?: Date(year = 2999, month = 12, day = 31)
+
+        val startValue = appliedStartDate.year * 10000 + appliedStartDate.month * 100 + appliedStartDate.day
+        val endValue = appliedEndDate.year * 10000 + appliedEndDate.month * 100 + appliedEndDate.day
+        val targetValue = year * 10000 + month * 100 + day
+
+        return targetValue in startValue..endValue
+    }
+
+    fun toDomainDate(): DomainDate {
+        return DomainDate(
+            year = year,
+            month = month,
+            day = day,
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Time.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Time.kt
index 13521129..d5bdc8a0 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Time.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/Time.kt
@@ -2,6 +2,7 @@ package com.threegap.bitnagil.presentation.writeroutine.model
 
 import android.os.Parcelable
 import kotlinx.parcelize.Parcelize
+import kotlin.text.format
 import com.threegap.bitnagil.domain.writeroutine.model.Time as DomainTime
 
 @Parcelize
@@ -31,4 +32,24 @@ data class Time(
     fun toDomainTime(): DomainTime {
         return DomainTime(hour = hour, minute = minute)
     }
+
+    fun toAmPmFormattedString(): String {
+        val amPm: String
+        var displayHour = hour
+
+        if (hour == 0) { // 자정 (오전 12시)
+            amPm = "오전"
+            displayHour = 12
+        } else if (hour == 12) { // 정오 (오후 12시)
+            amPm = "오후"
+            displayHour = 12
+        } else if (hour > 12) {
+            amPm = "오후"
+            displayHour -= 12
+        } else {
+            amPm = "오전"
+        }
+
+        return "%s %d:%02d".format(amPm, displayHour, minute)
+    }
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/WriteRoutineType.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/WriteRoutineType.kt
index aa95a380..903bfda7 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/WriteRoutineType.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/WriteRoutineType.kt
@@ -1,5 +1,13 @@
 package com.threegap.bitnagil.presentation.writeroutine.model
 
-enum class WriteRoutineType {
-    ADD, EDIT
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
+sealed class WriteRoutineType : Parcelable {
+    @Parcelize
+    data object Add : WriteRoutineType()
+
+    @Parcelize
+    data class Edit(val updateRoutineFromNowDate: Boolean) : WriteRoutineType()
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineIntent.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineIntent.kt
index c7164c40..90bc0789 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineIntent.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineIntent.kt
@@ -1,6 +1,7 @@
 package com.threegap.bitnagil.presentation.writeroutine.model.mvi
 
 import com.threegap.bitnagil.presentation.common.mviviewmodel.MviIntent
+import com.threegap.bitnagil.presentation.writeroutine.model.Date
 import com.threegap.bitnagil.presentation.writeroutine.model.Day
 import com.threegap.bitnagil.presentation.writeroutine.model.RepeatType
 import com.threegap.bitnagil.presentation.writeroutine.model.Time
@@ -8,18 +9,33 @@ import com.threegap.bitnagil.presentation.writeroutine.model.WriteRoutineType
 
 sealed class WriteRoutineIntent : MviIntent {
     data class SetRoutineName(val name: String) : WriteRoutineIntent()
-    data object AddSubRoutine : WriteRoutineIntent()
-    data class RemoveSubRoutine(val index: Int) : WriteRoutineIntent()
     data class SetSubRoutineName(val index: Int, val name: String) : WriteRoutineIntent()
+    data object SelectNotUseSubRoutines : WriteRoutineIntent()
     data class SetRepeatType(val repeatType: RepeatType) : WriteRoutineIntent()
     data class SelectDay(val day: Day) : WriteRoutineIntent()
-    data class SetPeriodWeek(val periodWeek: Int) : WriteRoutineIntent()
     data class SetStartTime(val time: Time) : WriteRoutineIntent()
     data class SetWriteRoutineType(val writeRoutineType: WriteRoutineType) : WriteRoutineIntent()
-    data class SetRoutine(val name: String, val repeatDays: List<Day>, val startTime: Time, val subRoutines: List<String>) : WriteRoutineIntent()
+    data class SetRoutine(
+        val name: String,
+        val repeatDays: List<Day>,
+        val startTime: Time,
+        val subRoutines: List<String>,
+        val startDate: Date,
+        val endDate: Date,
+    ) : WriteRoutineIntent()
     data object SelectAllTime : WriteRoutineIntent()
     data object ShowTimePickerBottomSheet : WriteRoutineIntent()
     data object HideTimePickerBottomSheet : WriteRoutineIntent()
+    data object ShowStartDatePickerBottomSheet : WriteRoutineIntent()
+    data object HideStartDatePickerBottomSheet : WriteRoutineIntent()
+    data object ShowEndDatePickerBottomSheet : WriteRoutineIntent()
+    data object HideEndDatePickerBottomSheet : WriteRoutineIntent()
+    data class SetSubRoutineUiExpanded(val expanded: Boolean) : WriteRoutineIntent()
+    data class SetRepeatDaysUiExpanded(val expanded: Boolean) : WriteRoutineIntent()
+    data class SetPeriodUiExpanded(val expanded: Boolean) : WriteRoutineIntent()
+    data class SetStartTimeUiExpanded(val expanded: Boolean) : WriteRoutineIntent()
+    data class SetStartDate(val date: Date) : WriteRoutineIntent()
+    data class SetEndDate(val date: Date) : WriteRoutineIntent()
     data object RegisterRoutineLoading : WriteRoutineIntent()
     data object RegisterRoutineSuccess : WriteRoutineIntent()
     data object RegisterRoutineFailure : WriteRoutineIntent()
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineState.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineState.kt
index 0029cf6a..fb9d9f1a 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineState.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/mvi/WriteRoutineState.kt
@@ -1,6 +1,7 @@
 package com.threegap.bitnagil.presentation.writeroutine.model.mvi
 
 import com.threegap.bitnagil.presentation.common.mviviewmodel.MviState
+import com.threegap.bitnagil.presentation.writeroutine.model.Date
 import com.threegap.bitnagil.presentation.writeroutine.model.Day
 import com.threegap.bitnagil.presentation.writeroutine.model.RepeatType
 import com.threegap.bitnagil.presentation.writeroutine.model.SelectableDay
@@ -12,19 +13,28 @@ import kotlinx.parcelize.Parcelize
 data class WriteRoutineState(
     val routineName: String,
     val subRoutineNames: List<String>,
+    val selectNotUseSubRoutines: Boolean,
     val repeatType: RepeatType?,
     val repeatDays: List<SelectableDay>,
-    val periodWeek: Int?,
     val startTime: Time?,
+    val startDate: Date,
+    val endDate: Date,
     val selectAllTime: Boolean,
     val loading: Boolean,
     val showTimePickerBottomSheet: Boolean,
+    val showStartDatePickerBottomSheet: Boolean,
+    val showEndDatePickerBottomSheet: Boolean,
     val writeRoutineType: WriteRoutineType,
+    val subRoutineUiExpanded: Boolean,
+    val repeatDaysUiExpanded: Boolean,
+    val periodUiExpanded: Boolean,
+    val startTimeUiExpanded: Boolean,
 ) : MviState {
     companion object {
         val Init = WriteRoutineState(
             routineName = "",
-            subRoutineNames = emptyList(),
+            subRoutineNames = listOf("", "", ""),
+            selectNotUseSubRoutines = false,
             repeatType = null,
             repeatDays = listOf(
                 SelectableDay(
@@ -56,20 +66,38 @@ data class WriteRoutineState(
                     selected = false,
                 ),
             ),
-            periodWeek = null,
             startTime = null,
             selectAllTime = false,
             loading = false,
+            showStartDatePickerBottomSheet = false,
+            showEndDatePickerBottomSheet = false,
             showTimePickerBottomSheet = false,
-            writeRoutineType = WriteRoutineType.ADD,
+            writeRoutineType = WriteRoutineType.Add,
+            subRoutineUiExpanded = false,
+            repeatDaysUiExpanded = false,
+            periodUiExpanded = false,
+            startTimeUiExpanded = false,
+            startDate = Date.now(),
+            endDate = Date.now(),
         )
     }
 
     val registerButtonEnabled: Boolean
-        get() = routineName.isNotEmpty() &&
-            (repeatType == RepeatType.DAILY || (repeatType == RepeatType.DAY && repeatDays.any { it.selected })) &&
-            startTime != null && !loading
+        get() = routineName.isNotEmpty() && startTime != null && !loading
 
-    val addSubRoutineButtonEnabled: Boolean
-        get() = subRoutineNames.size < 3 && !loading
+    val subRoutinesText: String get() = subRoutineNames.filter { it.isNotEmpty() }.joinToString(separator = "\n")
+
+    val repeatDaysText: String
+        get() = when (repeatType) {
+            RepeatType.DAILY -> "매일"
+            RepeatType.DAY -> if (repeatDays.none { it.selected }) "반복 안함" else "매주 ${repeatDays.filter { it.selected }.joinToString { it.day.text }}"
+            null -> ""
+        }
+
+    val periodText: String get() {
+        return "${startDate.toYearShrinkageFormattedString()} ~ ${endDate.toYearShrinkageFormattedString()}"
+    }
+
+    val startTimeText: String
+        get() = if (selectAllTime) "하루종일" else startTime?.let { "${it.toAmPmFormattedString()}부터 시작" } ?: ""
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/navarg/WriteRoutineScreenArg.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/navarg/WriteRoutineScreenArg.kt
index b459d743..5498f86e 100644
--- a/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/navarg/WriteRoutineScreenArg.kt
+++ b/presentation/src/main/java/com/threegap/bitnagil/presentation/writeroutine/model/navarg/WriteRoutineScreenArg.kt
@@ -8,5 +8,5 @@ sealed class WriteRoutineScreenArg {
     data class Add(val baseRoutineId: String?) : WriteRoutineScreenArg()
 
     @Serializable
-    data class Edit(val routineId: String) : WriteRoutineScreenArg()
+    data class Edit(val routineId: String, val updateRoutineFromNowDate: Boolean) : WriteRoutineScreenArg()
 }
diff --git a/presentation/src/main/res/values/styles.xml b/presentation/src/main/res/values/styles.xml
index 01259e96..8ee30e64 100644
--- a/presentation/src/main/res/values/styles.xml
+++ b/presentation/src/main/res/values/styles.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="CustomTimePickerStyle" parent="@android:style/Theme.Material.Light">
+    <style name="CustomTimePickerStyle" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:timePickerMode">spinner</item>
         <item name="android:textColorPrimary">#171719</item>
         <item name="android:textColorSecondary">#171719</item>
-        <item name="colorControlNormal">#A9D0FF</item>
+        <item name="colorControlNormal">#FE7120</item>
     </style>
 </resources>
\ No newline at end of file