[ISSUE-43] 홈 화면 UI 구현

buildSrc/src/main/java/Versions.kt

@@ -6,6 +6,7 @@ object Versions {
  const val COIL = "1.4.0"
  const val COMPOSE = "1.1.1"
  const val COMPOSE_ACTIVITY = "1.4.0"
+ const val COMPOSE_CONSTRAINT_LAYOUT = "1.0.1"
  const val CONSTRAINT_LAYOUT = "2.1.3"
  const val COMPOSE_NAVIGATION = "2.4.2"
  const val FIREBASE_BOM = "29.1.0"
@@ -14,13 +15,14 @@ object Versions {
  const val HILT = "2.42"
  const val HILT_ANDROID = "1.0.0-beta01"
  const val JUNIT = "4.13.2"
+ const val KAKAO_SDK = "2.10.0"
  const val KOTLIN = "1.6.10"
  const val KOTLIN_COROUTINES = "1.5.1"
+ const val MATERIAL_CALENDAR = "1.4.3"
  const val LIFECYCLE = "2.4.1"
  const val OKHTTP = "4.3.1"
  const val RETROFIT = "2.7.1"
  const val TIMBER = "5.0.1"
  const val MOSHI = "1.13.0"
  const val INJECT = "1"
- const val KAKAO_SDK = "2.10.0"
-}
+}

buildSrc/src/main/java/app/ModuleDependencies.kt

@@ -66,6 +66,11 @@ object ModuleDependencies {
  Versions.COMPOSE_ACTIVITY,
  Method.IMPLEMENTATION
  ),
+ DependencyInfo(
+ "androidx.constraintlayout:constraintlayout-compose",
+ Versions.COMPOSE_CONSTRAINT_LAYOUT,
+ Method.IMPLEMENTATION
+ ),
  DependencyInfo("io.coil-kt:coil-compose", Versions.COIL, Method.IMPLEMENTATION),
  DependencyInfo("androidx.navigation:navigation-compose", Versions.COMPOSE_NAVIGATION, Method.IMPLEMENTATION)
  )
@@ -135,6 +140,10 @@ object ModuleDependencies {
  DependencyInfo("javax.inject:javax.inject", Versions.INJECT, Method.IMPLEMENTATION)
  )
 
+ val materialCalendarView = arrayOf(
+ DependencyInfo("com.prolificinteractive:material-calendarview", Versions.MATERIAL_CALENDAR, Method.IMPLEMENTATION)
+ )
+
  val kakaoSdk = arrayOf(
  DependencyInfo("com.kakao.sdk:v2-user", Versions.KAKAO_SDK, Method.IMPLEMENTATION)
  )

gradle.properties

@@ -20,4 +20,5 @@ kotlin.code.style=official
 # Enables namespacing of each library's R class so that its R class includes only the
 # resources declared in the library itself and none from the library's dependencies,
 # thereby reducing the size of the R class for that library
-android.nonTransitiveRClass=true
+android.nonTransitiveRClass=true
+android.enableJetifier=true

presentation/build.gradle.kts

@@ -43,6 +43,7 @@ dependencies {
  app.ModuleDependencies.hilt.implement(this)
  app.ModuleDependencies.hiltAndroid.implement(this)
  app.ModuleDependencies.timber.implement(this)
+ app.ModuleDependencies.materialCalendarView.implement(this)
 
  implementation(platform(app.ModuleDependencies.FIREBASE_BOM))
  implementation(app.ModuleDependencies.FIREBASE_ANALYTICS)

presentation/src/main/java/com/yapp/growth/presentation/ui/main/PlanzScreen.kt

@@ -2,6 +2,7 @@ package com.yapp.growth.presentation.ui.main
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -67,25 +68,27 @@ fun PlanzScreen(
  },
  isFloatingActionButtonDocked = true,
  floatingActionButtonPosition = FabPosition.Center,
- ) {
- NavHost(
- navController = navController,
- startDestination = PlanzScreenRoute.HOME.route
- ) {
- composable(route = PlanzScreenRoute.HOME.route) {
- HomeScreen()
- }
+ ) { innerPadding ->
+ Box(modifier = Modifier.padding(innerPadding)) {
+ NavHost(
+ navController = navController,
+ startDestination = PlanzScreenRoute.HOME.route
+ ) {
+ composable(route = PlanzScreenRoute.HOME.route) {
+ HomeScreen()
+ }
 
- composable(route = PlanzScreenRoute.CREATE_PLAN.route) {
- CreatePlanScreen()
- }
+  composable(route = PlanzScreenRoute.CREATE_PLAN.route) {
+  CreatePlanScreen()
+  }
 
- composable(route = PlanzScreenRoute.MANAGE_PLAN.route) {
- ManagePlanScreen()
- }
+  composable(route = PlanzScreenRoute.MANAGE_PLAN.route) {
+  ManagePlanScreen()
+  }
 
- composable(route = PlanzScreenRoute.SAMPLE.route) {
- SampleScreen()
+ composable(route = PlanzScreenRoute.SAMPLE.route) {
+ SampleScreen()
+ }
  }
  }
  }

presentation/src/main/java/com/yapp/growth/presentation/ui/main/home/CalendarDecorator.kt

@@ -0,0 +1,168 @@
+package com.yapp.growth.presentation.ui.main.home
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.style.ForegroundColorSpan
+import android.text.style.LineBackgroundSpan
+import android.text.style.StyleSpan
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.core.content.ContextCompat
+import com.prolificinteractive.materialcalendarview.CalendarDay
+import com.prolificinteractive.materialcalendarview.DayViewDecorator
+import com.prolificinteractive.materialcalendarview.DayViewFacade
+import com.prolificinteractive.materialcalendarview.MaterialCalendarView
+import com.prolificinteractive.materialcalendarview.spans.DotSpan.DEFAULT_RADIUS
+import com.yapp.growth.presentation.R
+import com.yapp.growth.presentation.theme.*
+import java.util.*
+
+
+class CalendarDecorator {
+ class TodayDecorator(context: Context) : DayViewDecorator {
+ private var date = CalendarDay.today()
+ private val boldSpan = StyleSpan(Typeface.BOLD)
+
+ @SuppressLint("UseCompatLoadingForDrawables")
+ val drawable = ContextCompat.getDrawable(context, R.drawable.bg_calendar_today)
+ override fun shouldDecorate(day: CalendarDay): Boolean {
+ return day == date
+ }
+
+ override fun decorate(view: DayViewFacade) {
+ if (drawable != null) {
+ view.apply {
+ this.addSpan(object : ForegroundColorSpan(Color.White.toArgb()) {})
+ this.setSelectionDrawable(drawable)
+ this.addSpan(boldSpan)
+ }
+ }
+ }
+ }
+
+ class SelectDecorator(context: Context, mCalendar: MaterialCalendarView) : DayViewDecorator {
+ @SuppressLint("UseCompatLoadingForDrawables")
+ private val mCalendar = mCalendar.currentDate.calendar
+ private val drawable = ContextCompat.getDrawable(context, R.drawable.bg_calendar_selection)
+
+ override fun shouldDecorate(day: CalendarDay): Boolean {
+ val calendar = day.calendar
+
+ return calendar.get(Calendar.ERA) == mCalendar.get(Calendar.ERA)
+ && calendar.get(Calendar.YEAR) == mCalendar.get(Calendar.YEAR)
+ && calendar.get(Calendar.MONTH) == mCalendar.get(Calendar.MONTH)
+ }
+
+ override fun decorate(view: DayViewFacade) {
+ if (drawable != null) {
+ view.apply {
+ this.addSpan(object : ForegroundColorSpan(Gray900.toArgb()) {})
+ this.setSelectionDrawable(drawable)
+ }
+ }
+ }
+ }
+
+ class OtherDayDecorator(context: Context, mCalendar: MaterialCalendarView) : DayViewDecorator {
+ @SuppressLint("UseCompatLoadingForDrawables")
+ private val mCalendar = mCalendar.currentDate.calendar
+ private val drawable = ContextCompat.getDrawable(context, R.drawable.bg_calendar_selection)
+ override fun shouldDecorate(day: CalendarDay): Boolean {
+ val calendar = day.calendar
+
+ return calendar.get(Calendar.ERA) == mCalendar.get(Calendar.ERA)
+ && calendar.get(Calendar.YEAR) == mCalendar.get(Calendar.YEAR)
+ && calendar.get(Calendar.MONTH) != mCalendar.get(Calendar.MONTH)
+ }
+
+ override fun decorate(view: DayViewFacade) {
+ if (drawable != null) {
+ view.apply {
+ this.addSpan(object : ForegroundColorSpan(Gray300.toArgb()) {})
+ this.setSelectionDrawable(drawable)
+ }
+ }
+ }
+ }
+
+ class SundayDecorator : DayViewDecorator {
+ private val calendar = Calendar.getInstance()
+ override fun shouldDecorate(day: CalendarDay): Boolean {
+ day.copyTo(calendar)
+ val weekDay = calendar.get(Calendar.DAY_OF_WEEK)
+ return (weekDay == Calendar.SUNDAY)
+ }
+
+ override fun decorate(view: DayViewFacade) {
+ view.addSpan(object : ForegroundColorSpan(SubCoral.toArgb()) {})
+ }
+ }
+
+ // TODO : 일정이 있는 날만 점 데코레이터 찍기
+ class DotDecorator : DayViewDecorator {
+ private var date = CalendarDay.from(2022, 5, 21)
+
+ override fun shouldDecorate(day: CalendarDay): Boolean {
+ return day == date
+ }
+
+ override fun decorate(view: DayViewFacade) {
+ view.addSpan(CustomMultipleDotSpan(4F, color = intArrayOf(SubCoral.toArgb(), SubYellow.toArgb(), MainPurple900.toArgb())))
+ }
+ }
+
+ class CustomMultipleDotSpan : LineBackgroundSpan {
+ private val radius: Float
+ private var color = IntArray(0)
+
+ constructor() {
+ radius = DEFAULT_RADIUS
+ color[0] = 0
+ }
+
+ constructor(color: Int) {
+ radius = DEFAULT_RADIUS
+ this.color[0] = 0
+ }
+
+ constructor(radius: Float) {
+ this.radius = radius
+ color[0] = 0
+ }
+
+ constructor(radius: Float, color: IntArray) {
+ this.radius = radius
+ this.color = color
+ }
+
+ override fun drawBackground(
+ canvas: Canvas,
+ paint: Paint,
+ left: Int,
+ right: Int,
+ top: Int,
+ baseline: Int,
+ bottom: Int,
+ charSequence: CharSequence,
+ start: Int,
+ end: Int,
+ lineNum: Int
+ ) {
+ val total = if (color.size > 5) 5 else color.size
+ var leftMost = (total - 1) * - 10
+
+ for (i in 0 until total) {
+ val oldColor: Int = paint.color
+ if (color[i] != 0) {
+ paint.color = color[i]
+ }
+ canvas.drawCircle(((left + right) / 2 - leftMost).toFloat(), bottom + 10F , radius, paint)
+ paint.color = oldColor
+ leftMost += 20
+ }
+ }
+ }
+}

presentation/src/main/java/com/yapp/growth/presentation/ui/main/home/HomeContract.kt

@@ -0,0 +1,28 @@
+package com.yapp.growth.presentation.ui.main.home
+
+import com.yapp.growth.base.ViewEvent
+import com.yapp.growth.base.ViewSideEffect
+import com.yapp.growth.base.ViewState
+
+class HomeContract {
+ data class HomeViewState(
+ val loginState: LoginState = LoginState.LOGIN
+ ) : ViewState
+
+ // TODO : 유저 아이콘 클릭 시 내 정보 창으로 이동 (정호)
+ sealed class HomeSideEffect : ViewSideEffect {
+ object NavigateToInfoScreen : HomeSideEffect()
+ object NavigateDetailPlanScreen : HomeSideEffect()
+ object OpenBottomSheet : HomeSideEffect()
+ }
+
+ sealed class HomeEvent : ViewEvent {
+ object OnUserImageButtonClicked : HomeEvent()
+ object OnPlanClicked : HomeEvent()
+ object OnCalendarDayClicked : HomeEvent()
+ }
+
+ enum class LoginState {
+ NONE, LOGIN
+ }
+}