Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TNT-175] 캘린더 컴포넌트 구현 #57

Merged
merged 5 commits into from
Jan 31, 2025
Merged

Conversation

hoyahozz
Copy link
Member

@hoyahozz hoyahozz commented Jan 30, 2025

📝 작업 내용


  • 월간 캘린더를 구현하였습니다.
  • 주간 캘린더를 구현하였습니다.
  • 캘린더 셀렉터를 구현하였습니다.

  • 월간 캘린더 사용 예시
var selectedDate by remember { mutableStateOf(LocalDate.now()) }
val coroutineScope = rememberCoroutineScope()

val monthCalendarState = rememberCalendarState(
    startMonth = now.yearMonth.minusMonths(12),
    endMonth = now.yearMonth.plusMonths(12),
    firstVisibleMonth = now.yearMonth,
)

// 현재 출력되는 '월'의 변화 감지
LaunchedEffect(monthCalendarState.firstVisibleMonth) {
    Log.w("Test", "month changed ${monthCalendarState.firstVisibleMonth}")
}

Column(modifier = Modifier.padding(innerPadding)) {
    TnTCalendarSelector(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        yearMonth = monthCalendarState.firstVisibleMonth.yearMonth,
        onClickPrevious = {
            coroutineScope.launch {
                monthCalendarState.animateScrollToMonth(
                    monthCalendarState.firstVisibleMonth.yearMonth.minusMonths(1),
                )
            }
        },
        onClickNext = {
            coroutineScope.launch {
                monthCalendarState.animateScrollToMonth(
                    monthCalendarState.firstVisibleMonth.yearMonth.plusMonths(1),
                )
            }
        },
    )
    Spacer(modifier = Modifier.height(16.dp))
    TnTIndicatorMonthCalendar(
        state = monthCalendarState,
        dayState = { date ->
            DayState(isSelected = date == selectedDate)
        },
        indicatorState = { date ->
            val count = 5
            DayIndicatorState(count = count, showText = count != 0)
        },
        onClickDay = { date ->
            selectedDate = date
        },
    )
}

📸 실행 화면

calendar.mp4

🙆🏻 리뷰 요청 사항

  • 사용 방법이 직관적이지 않은 것 같으면 말씀해주세요! 한 번 개선해보겠습니다~!

👀 레퍼런스

@hoyahozz hoyahozz changed the title 캘린더 컴포넌트 구현 [TNT-175] 캘린더 컴포넌트 구현 Jan 30, 2025
@hoyahozz hoyahozz requested a review from SeonJeongk January 30, 2025 15:00
@hoyahozz hoyahozz self-assigned this Jan 30, 2025
@hoyahozz hoyahozz added ✨ Feat 기능 구현 🎨 Design UI 및 디자인 작업 🌲 정호 김씨 집안 큰행님 김정호 labels Jan 30, 2025
@hoyahozz hoyahozz added this to the 3차 스프린트 milestone Jan 30, 2025
Copy link
Contributor

@SeonJeongk SeonJeongk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

진짜 고생하셨습니다~~! 👍

Comment on lines +100 to +101
startDate = now.minusMonths(6),
endDate = now.plusMonths(6),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MonthCalendar는 12로 써있던데 여기선 6인 이유가 있나용?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주간 캘린더는 월간 캘린더에 비해 보여지는 부분이 적기도 하고, Preview 라서 대충 넣은 것도 있습니다(..)

Comment on lines +19 to +25
@Composable
fun TnTCalendarSelector(
onClickPrevious: () -> Unit,
onClickNext: () -> Unit,
modifier: Modifier = Modifier,
yearMonth: YearMonth = YearMonth.now(),
) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주간 캘린더에서도 < , > 버튼 누르면 월 단위로 이동해야하나요?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 주 단위로 이동하면서 월이 바뀌면 바뀐 월로 보여지도록 구현할 수 있네요! 👍

@hoyahozz hoyahozz merged commit ed7237a into develop Jan 31, 2025
10 checks passed
@hoyahozz hoyahozz deleted the feature/TNT-175 branch January 31, 2025 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feat 기능 구현 🌲 정호 김씨 집안 큰행님 김정호 🎨 Design UI 및 디자인 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[TNT-175] 캘린더 컴포넌트 구현
2 participants