Merge pull request #73 from YAPP-Github/feature/issue-043-home-ui

[ISSUE-43] 홈 화면 UI 구현

buildSrc/src/main/java/Versions.kt

@@ -7,8 +7,8 @@ object Versions {
     const val COMPOSE = "1.1.1"
     const val COMPOSE_ACTIVITY = "1.4.0"
     const val COMPOSE_CONSTRAINT_LAYOUT = "1.1.0-alpha02"
-    const val COMPOSE_NAVIGATION = "2.4.2"
     const val CONSTRAINT_LAYOUT = "2.1.3"
+    const val COMPOSE_NAVIGATION = "2.4.2"
     const val FIREBASE_BOM = "29.1.0"
     const val FIREBASE_CRASHLYTICS = "2.9.0"
     const val GOOGLE_SERVICE = "4.3.10"
@@ -18,6 +18,7 @@ object Versions {
     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"

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",
@@ -144,6 +149,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/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
+    }
+}