[UI/#9] 월간 캘린더 화면 #18

boiledEgg-s · 2024-07-07T06:50:42Z

closed [UI] 캘린더뷰 / 월간 캘린더 구현 #9

⛳️ Work Description

월 단위 캘린더뷰 구현
페이징 처리를 통한 월간 트랜지션
오늘 날짜 및 선택 날짜 표시
날짜별 등록된 아이템 표시

📸 Screenshot

terning_calendar01.mp4

📢 To Reviewers

월 단위 캘린더 먼저 구현해봤습니다!
아직 데이터 연동은 구현하지 않았고, 뷰모델 안에 임시 데이터 넣어서 스크랩 관련 코드를 구현했습니다!!
폴더링이 아직 제대로 안되어 있을텐데 차차 정리해나갈게요,, 코멘트 남겨주시면 반영하겠습니닷!!!
사실 처음 스크롤할 때 약간 부자연스러운게 남아있는데,,,,,,,,,,,,,, 있는데

…w-ui # Conflicts: # feature/build.gradle.kts

leeeyubin

오늘부터 외칠게요 갓석준.
코드가 너무 맛있어서 보는 내내 행복했습니다,,,,
최고!!!!!!

leeeyubin · 2024-07-07T07:59:20Z

feature/src/main/java/com/terning/feature/calendar/CalendarMonths.kt

+
+@Composable
+fun CalendarMonths(
+    modifier: Modifier = Modifier,
+    listState: LazyListState,
+    onDateSelected: (LocalDate) -> Unit,
+    pages: Int,


CalendarMonths하고 CalendarMonth의 네이밍이 좀 더 구분이 됐으면 좋겠는데 마땅한 네이밍이 떠오르지 않네욤,,,,흠,,

혹시라도 나중에 좋은 아이디어 있으면 추천 부탁드려여~!!

leeeyubin · 2024-07-07T08:06:10Z

feature/src/main/java/com/terning/feature/calendar/models/CalendarState.kt

+    fun getPageCount(): Int {
+        return (END_YEAR - START_YEAR) * 12
+    }


Suggested change

fun getPageCount(): Int {

return (END_YEAR - START_YEAR) * 12

}

fun getPageCount(): Int = (END_YEAR - START_YEAR) * 12

이렇게도 할 수 있을 것 같네용

leeeyubin · 2024-07-07T08:10:37Z

feature/src/main/java/com/terning/feature/calendar/CalendarRoute.kt

+    var currentDate by remember { mutableStateOf(selectedDate) }
+    var currentPage by remember { mutableIntStateOf(listState.firstVisibleItemIndex)}
+
+    var isListExpanded by remember { mutableStateOf(false) }
+    var isWeekEnabled by remember { mutableStateOf(false) }
+


줄바꿈도 너무 깔끔해요,,,,,,,

leeeyubin · 2024-07-07T08:12:02Z

feature/src/main/java/com/terning/feature/calendar/CalendarRoute.kt

+    LaunchedEffect(key1 = listState) {
+        snapshotFlow { listState.firstVisibleItemIndex }
+            .distinctUntilChanged()
+            .collect{
+                val swipeDirection = (listState.firstVisibleItemIndex - currentPage).coerceIn(-1, 1).toLong()


distinctUntilChanged()까지 폼미ㄷㄷ,,,,,,,,,

leeeyubin · 2024-07-07T08:16:30Z

feature/src/main/java/com/terning/feature/calendar/CalendarTopBar.kt

+package com.terning.feature.calendar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row


CalendarTopBar랑 WeekDaysHeader는 component 패키지로 따로 빼도 괜찮을 것 같아요..!

캘린더 화면을 그리는 CalendarRoute, CalendarMonth, CalendarDay는 이대로 남겨도 괜찮을 것 같네용

leeeyubin · 2024-07-07T08:26:10Z

feature/src/main/java/com/terning/feature/calendar/models/Scrap.kt

+
+@Immutable
+data class Scrap(
+    val text: String,
+    val backgroundColor: Color
+)


@Immutable을 넣어준 이유는 불변함을 강조하기 위함인가용??

넵!! 사실 이게 레퍼런스에서 본 Month와 Day 데이터에서 착안한 아이디어인데, 스크랩 자체가 서버에서 받아오면 클라이언트 측에선 바꿀 일이 없을 것 같아서 조금이나마 성능에 도움이 될까봐 이렇게 구현해봤어요!!

arinming

복잡한 캘린더 합숙 전에 뚝딱 해내신거 존경,,,,,, 넘 잘하신다.

arinming · 2024-07-07T13:43:01Z

feature/src/main/java/com/terning/feature/calendar/CalendarRoute.kt

+                onMonthNavigationButtonClicked = { direction ->
+                    coroutineScope.launch {
+                        listState.animateScrollToItem(
+                            index = listState.firstVisibleItemIndex + direction,
+                        )
+                    }


animateScrollToItem으로 매끄럽게 전환할 수 있근여 🥹..!

LazyListState에서 사용하는 전환 방법이라고 하네요 :D

오호!! 이건 처음보는건데!! 좋네요😊

arinming · 2024-07-07T13:44:37Z

feature/src/main/java/com/terning/feature/calendar/CalendarRoute.kt

+            CalendarMonths(
+                modifier = Modifier.fillMaxSize(),


CalendarMonths안에서 Column에 fillMaxSize이 적용되고 있는 것 같은데 여기서도 fillMaxSize를 넘겨주는 이유가 뭔가용?!

클래스 이름이랑 제 코딩 방식 때문에 혼동이 생긴 것 같네요,,,
CalendarMonths 내부에선 LazyRow가 해당 Modifier를 인자로 받아 사용하도록 구현돼있는데, 여기서 인자로 넘기지 않고 그냥 LazyRow 내부에서 사용해야 혼동이 없겠네요...

arinming · 2024-07-07T13:50:44Z

feature/src/main/java/com/terning/feature/calendar/WeekDaysHeader.kt

+                    style = TerningTheme.typography.body7,
+                    color = if(day == R.string.calendar_text_sunday) SundayRed else Black,
+                    fontSize = 13.sp,
+                    textAlign = TextAlign.Center


style에서 body7 스타일을 적용해두었는데 따로 fontSize를 지정하신 이유가 있나요?! 피그마상에서도 12 사이즈인 것 같아요!

역시 예리하시네요!! 팀원들을 위한 이스터에그~ 가 아니라 제 부주의입니다ㅎㅎ 바로 수정할게요!!

Hyobeen-Park

갓석준 진짜 캘린더를 이렇게 빨리 구현한다구?!??? 진짜 최고다 짱이다!!!!!

Hyobeen-Park · 2024-07-08T15:47:17Z

feature/src/main/java/com/terning/feature/calendar/CalendarScrap.kt

+    scrapList: List<Scrap>
+) {
+    LazyColumn(
+        modifier = modifier.fillMaxWidth().padding(top = 3.dp)


요거 줄바꿈 하면 더 보기 좋을 것 같아요!

Hyobeen-Park · 2024-07-08T15:47:47Z

feature/src/main/java/com/terning/feature/calendar/CalendarRoute.kt

+                onMonthNavigationButtonClicked = { direction ->
+                    coroutineScope.launch {
+                        listState.animateScrollToItem(
+                            index = listState.firstVisibleItemIndex + direction,
+                        )
+                    }


오호!! 이건 처음보는건데!! 좋네요😊

boiledEgg-s added 18 commits July 6, 2024 00:28

[ADD/#9] Preview 라이브러리 추가

00754bd

[UI/#9] TopBar와 요일 헤더 추가

b26784d

[FEAT/#9] Day, Month 데이터 모델 추가

6cd55a1

[FEAT/#9] 월 관리 및 달력 관리 클래스 추가

c71a9f8

[MOD/#9] 달력 헤더, 탑바 수정

45df9d9

[FEAT/#9] 스크롤 관련 코드 추가

a0c8541

[UI/#9] CalendarDay 뷰 추가

35070bb

[UI/#9] CalendarMonth 뷰 추가

ed0a12e

[UI/#9] CalendarScreen 뷰 추가

6177a9e

[FEAT/#9] LocalDateExt 추가

cac95b8

[UI/#9] 스크랩 뷰 구현

51cb189

[UI/#9] 스크랩 표시 기능 구현

d9f82fd

[ADD/#9] MonthData 주석 추가

b3df5e2

[CHORE/#9] Import 정리

a7f65c8

Merge remote-tracking branch 'origin/develop' into ui/#9-calendar-vie…

74ac735

…w-ui # Conflicts: # feature/build.gradle.kts

[FEAT/#9] hilt 적용

914f9cd

[FEAT/#9] 바텀바 연결

7dfa4df

[DEL/#9] 기존 CalendarRoute 파일 삭제

110230c

boiledEgg-s added FEAT ✨ 새로운 기능 구현 UI 💐 UI 작업 석준💜 석준 labels Jul 7, 2024

boiledEgg-s added this to the 1차 스프린트 UI 작업 milestone Jul 7, 2024

boiledEgg-s requested review from arinming, Hyobeen-Park and leeeyubin July 7, 2024 06:50

boiledEgg-s self-assigned this Jul 7, 2024

leeeyubin approved these changes Jul 7, 2024

View reviewed changes

arinming approved these changes Jul 7, 2024

View reviewed changes

boiledEgg-s added 2 commits July 8, 2024 00:00

[REFACTOR/#9] 리뷰 기반 리팩토링

c9680c0

[FIX/#9] MainNavigator Home->SignIn 재수정

a86695a

Hyobeen-Park approved these changes Jul 8, 2024

View reviewed changes

boiledEgg-s merged commit 95ce7d0 into develop Jul 9, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI/#9] 월간 캘린더 화면 #18

[UI/#9] 월간 캘린더 화면 #18

boiledEgg-s commented Jul 7, 2024

leeeyubin left a comment

leeeyubin Jul 7, 2024

boiledEgg-s Jul 7, 2024

leeeyubin Jul 7, 2024

leeeyubin Jul 7, 2024

leeeyubin Jul 7, 2024

leeeyubin Jul 7, 2024

leeeyubin Jul 7, 2024

boiledEgg-s Jul 7, 2024

arinming left a comment

arinming Jul 7, 2024

boiledEgg-s Jul 7, 2024

Hyobeen-Park Jul 8, 2024

arinming Jul 7, 2024

boiledEgg-s Jul 7, 2024

arinming Jul 7, 2024

boiledEgg-s Jul 7, 2024

Hyobeen-Park left a comment

Hyobeen-Park Jul 8, 2024

Hyobeen-Park Jul 8, 2024

[UI/#9] 월간 캘린더 화면 #18

[UI/#9] 월간 캘린더 화면 #18

Conversation

boiledEgg-s commented Jul 7, 2024

⛳️ Work Description

📸 Screenshot

📢 To Reviewers

leeeyubin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arinming left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment