Skip to content

[NDGL-62] 날짜 선택 화면 UI/UX 제작#15

Merged
mj010504 merged 3 commits intodevelopfrom
design/NDGL-62
Feb 14, 2026
Merged

[NDGL-62] 날짜 선택 화면 UI/UX 제작#15
mj010504 merged 3 commits intodevelopfrom
design/NDGL-62

Conversation

@mj010504
Copy link
Copy Markdown
Contributor

@mj010504 mj010504 commented Feb 4, 2026

개요

  • 콘텐츠 따라가기 화면에서 여행 따라가기 버튼 클릭시 이동하는 날짜 선택 화면 UI/UX 제작

디자인

https://www.figma.com/design/qHn9o58ENLeHjiBWNuZFJx/Design_-YAPP-1%ED%8C%80-?node-id=2044-4970&t=ZStfQoOkSrncjY0d-0

디자인 스크린샷
image image
image image

변경사항

  • 날짜 선택 화면 제작
  • CalendarView 커스텀 제작

테스트 체크 리스트

  • 날짜 선택
  • 날짜 표시
  • 날짜가 콘텐츠 여행 기간보다 짧을 때 경고 메세지 표시

Summary by CodeRabbit

새로운 기능

  • 여행 계획 기능: 달력 기반 날짜 선택기를 통해 여행 기간 설정
  • 여행 팔로우: 여행 상세 정보, 일정별 장소, 이동 수단, 예산을 한눈에 확인
  • 지도 통합: Google 지도에서 여행 경로와 장소 위치 시각화
  • 콘텐츠 카드: 여행 비디오, 정보, 예산을 통합 표시
  • 한국어 지원: 사용자 인터페이스의 완전한 한국어 로컬라이제이션

개선 사항

  • 시간 표시 형식 개선

@mj010504 mj010504 requested a review from jihee-dev February 4, 2026 16:05
@mj010504 mj010504 self-assigned this Feb 4, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Feb 4, 2026

Warning

Rate limit exceeded

@mj010504 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 22 minutes and 43 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Walkthrough

날짜 선택 및 여행 팔로우 기능을 추가하는 대규모 업데이트입니다. 새로운 DatePicker 및 FollowTravel 화면 모듈, 구글 맵스 통합, 로컬라이제이션을 위한 한국어 문자열 리소스, 그리고 기존 TravelDetail을 FollowTravel로 대체하는 네비게이션 재구성이 포함됩니다.

Changes

Cohort / File(s) Summary
Build 및 의존성
app/build.gradle.kts, feature/travel/build.gradle.kts, gradle/libs.versions.toml
Maps API 키 설정, Maps Compose 및 Coil 라이브러리 추가, kotlinx-datetime 버전 도입
UI 리소스
core/ui/src/main/res/drawable/ic_24_smarrow_down.xml, core/ui/src/main/res/values/strings.xml
새로운 다운 화살표 아이콘 추가, 예산, 컨텐츠, 교통, 장소 유형, 날짜 선택기 관련 한국어 문자열 리소스 추가
유틸리티
core/util/src/main/java/com/yapp/ndgl/core/util/DurationUtil.kt, detekt-config.yml
Duration 포맷팅 확장함수 추가, LongMethod 임계값 150으로 증가
네비게이션 및 라우팅
feature/home/src/main/java/com/yapp/ndgl/feature/home/HomeScreen.kt, feature/home/src/main/java/com/yapp/ndgl/feature/home/navigation/HomeEntry.kt, feature/travel-helper/src/main/java/com/yapp/ndgl/feature/travelhelper/TravelHelperScreen.kt, feature/travel-helper/src/main/java/com/yapp/ndgl/feature/travelhelper/navigation/TravelHelperEntry.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/TravelScreen.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/navigation/TravelEntry.kt, navigation/src/main/java/com/yapp/ndgl/navigation/Route.kt
모든 주요 화면에 PaddingValues innerPadding 파라미터 추가, TravelDetail에서 FollowTravel로 네비게이션 변경, DatePicker 라우트 신규 추가
Travel 기능 계약 및 뷰모델
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/TravelContract.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/TravelViewModel.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/DatePickerContract.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/DatePickerViewModel.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/FollowTravelContract.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/FollowTravelViewModel.kt
NavigateToDetail을 NavigateToFollowTravel로 변경, DatePickerState/Intent/SideEffect 정의, DatePickerViewModel 구현 (월 네비게이션, 날짜 선택 로직), FollowTravelState 및 데이터 모델(ContentInfo, Budget, Itinerary, TravelPlace, TransportSegment), FollowTravelViewModel 구현 (하드코드된 테스트 데이터 로드)
DatePicker UI 화면 및 컴포넌트
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/DatePickerScreen.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/component/CalendarView.kt
DatePickerRoute 및 DatePickerScreen 구현 (네비게이션 바, 달력 뷰, 에러 메시지, 모달), CalendarView 컴포넌트 (월/연도 헤더, 요일, 달력 그리드, 범위 선택 지원)
FollowTravel UI 화면 및 컴포넌트
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/FollowTravelScreen.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/component/ContentCard.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/component/PlaceItem.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/component/TransportSegment.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/component/TravelMap.kt
FollowTravelRoute 및 스크롤 가능한 일정 UI, 일별 탭, 지도 영역 포함, ContentCard (프로필, 비디오, 예산), PlaceItem (장소 번호, 카드, 썸네일), TransportSegment (아이콘, 기간/거리), TravelMap (Google Maps, 다중 표식, 루트 폴리라인)
삭제된 모듈
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/detail/TravelDetailScreen.kt, feature/travel/src/main/java/com/yapp/ndgl/feature/travel/detail/TravelDetailViewModel.kt
TravelDetailRoute, TravelDetailScreen, TravelDetailViewModel 및 Factory 인터페이스 제거

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DatePickerScreen
    participant DatePickerViewModel
    participant DatePickerRoute

    User->>DatePickerScreen: 화면 표시
    DatePickerScreen->>DatePickerRoute: 초기 상태 구독
    DatePickerRoute->>DatePickerViewModel: initialState 조회
    
    User->>DatePickerScreen: 날짜 선택
    DatePickerScreen->>DatePickerRoute: selectDate(date) 콜백 호출
    DatePickerRoute->>DatePickerViewModel: handleIntent(SelectDate)
    DatePickerViewModel->>DatePickerViewModel: 범위 선택 로직 처리<br/>(startDate, endDate 설정)
    DatePickerViewModel->>DatePickerRoute: 업데이트된 상태 방출
    DatePickerRoute->>DatePickerScreen: 새로운 상태로 UI 갱신
    
    User->>DatePickerScreen: 완료 버튼 클릭
    DatePickerScreen->>DatePickerRoute: clickCompleteButton() 호출
    DatePickerRoute->>DatePickerViewModel: handleIntent(ClickCompleteButton)
    DatePickerViewModel->>DatePickerViewModel: showDialog = true
    
    User->>DatePickerScreen: 모달 확인 클릭
    DatePickerScreen->>DatePickerRoute: clickTravelButton() 호출
    DatePickerRoute->>DatePickerViewModel: handleIntent(ClickViewTravelButton)
    DatePickerViewModel->>DatePickerRoute: NavigateToTravelDetail 사이드이펙트
    DatePickerRoute->>User: FollowTravel 화면으로 네비게이션
Loading
sequenceDiagram
    participant User
    participant FollowTravelScreen
    participant FollowTravelRoute
    participant FollowTravelViewModel
    participant TravelMap

    User->>FollowTravelRoute: 여행 ID로 화면 진입
    FollowTravelRoute->>FollowTravelViewModel: travelId 파라미터로 생성
    FollowTravelViewModel->>FollowTravelViewModel: loadTravelData()<br/>(ContentInfo, Itineraries 로드)
    FollowTravelViewModel->>FollowTravelRoute: 초기화된 상태 제공
    FollowTravelRoute->>FollowTravelScreen: 상태 및 콜백 전달
    
    User->>FollowTravelScreen: 특정 일자 탭 선택
    FollowTravelScreen->>FollowTravelRoute: selectDay(dayIndex) 콜백
    FollowTravelRoute->>FollowTravelViewModel: handleIntent(SelectDay)
    FollowTravelViewModel->>FollowTravelRoute: selectedDay 업데이트
    FollowTravelRoute->>FollowTravelScreen: 상태 갱신
    
    FollowTravelScreen->>TravelMap: 선택된 일자의 장소 리스트 전달
    TravelMap->>User: 지도상 경로 및 마커 렌더링
    
    User->>FollowTravelScreen: 팔로우 버튼 클릭
    FollowTravelScreen->>FollowTravelRoute: clickFollowTravel() 콜백
    FollowTravelRoute->>FollowTravelViewModel: handleIntent(ClickFollowTravel)
    FollowTravelViewModel->>FollowTravelRoute: 사이드이펙트 발생
    FollowTravelRoute->>User: 다음 화면으로 네비게이션
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~55 분

Possibly related PRs

🚥 Pre-merge checks | ✅ 2 | ❌ 2
❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Merge Conflict Detection ⚠️ Warning ❌ Merge conflicts detected (9 files):

⚔️ app/src/main/AndroidManifest.xml (content)
⚔️ app/src/main/java/com/yapp/ndgl/ui/NDGLApp.kt (content)
⚔️ core/ui/src/main/res/values/strings.xml (content)
⚔️ feature/travel/build.gradle.kts (content)
⚔️ feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/FollowTravelContract.kt (content)
⚔️ feature/travel/src/main/java/com/yapp/ndgl/feature/travel/followtravel/FollowTravelScreen.kt (content)
⚔️ feature/travel/src/main/java/com/yapp/ndgl/feature/travel/navigation/TravelEntry.kt (content)
⚔️ gradle/libs.versions.toml (content)
⚔️ navigation/src/main/java/com/yapp/ndgl/navigation/Route.kt (content)

These conflicts must be resolved before merging into develop.
Resolve conflicts locally and push changes to this branch.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 풀 리퀘스트의 주요 변경사항인 날짜 선택 화면 UI/UX 제작을 명확하게 설명하고 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch design/NDGL-62

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@mj010504 mj010504 force-pushed the design/NDGL-62 branch 2 times, most recently from 6280f0d to 337b1ca Compare February 4, 2026 16:22
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Fix all issues with AI agents
In
`@feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/component/CalendarView.kt`:
- Around line 150-154: The current Text uses dayOfWeek.name.take(3) which
returns English names; replace that with a localized display name by calling
dayOfWeek.getDisplayName(TextStyle.SHORT, Locale("ko")) (or Locale.KOREA) inside
the Text composable so Korean abbreviations like "일", "월" are shown; update
imports to include java.time.format.TextStyle and java.util.Locale and keep the
existing styling and color logic that references dayOfWeek (the Text in
CalendarView.kt that currently uses dayOfWeek.name.take(3)...).

In
`@feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/DatePickerScreen.kt`:
- Around line 74-78: The TODO inside viewModel.collectSideEffect is blocking
navigation for DatePickerSideEffect.NavigateToTravelDetail; implement that
branch to call the external navigation callback (e.g., navigateToTravelDetail)
or invoke the NavController/navigation lambda passed into DatePickerScreen so
the modal's "여행 보기" action actually navigates; update the DatePickerScreen
constructor/call site to accept and forward a navigateToTravelDetail callback if
missing and call it from the DatePickerSideEffect.NavigateToTravelDetail
handling in collectSideEffect.

In `@gradle/libs.versions.toml`:
- Line 25: Update the kotlinx-datetime dependency entry named "kotlinxDatetime"
in libs.versions.toml by replacing the version string "0.6.1" with "0.7.1" (or
at minimum "0.6.2" if you need a smaller change); ensure the single source of
truth for the version (kotlinxDatetime = "...") is updated so all modules using
the kotlinxDatetime reference pick up the new version.
🧹 Nitpick comments (3)
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/component/CalendarView.kt (2)

103-104: 접근성: contentDescription을 문자열 리소스로 분리하세요.

현재 "Previous Month", "Next Month"가 영어로 하드코딩되어 있습니다. 다국어 지원 및 접근성을 위해 strings.xml에 리소스로 추가하는 것이 좋습니다.

♻️ 제안된 수정

strings.xml에 추가:

<string name="calendar_previous_month">이전 달</string>
<string name="calendar_next_month">다음 달</string>

CalendarView.kt에서 사용:

 Icon(
     painter = painterResource(R.drawable.ic_24_chevron_left),
-    contentDescription = "Previous Month",
+    contentDescription = stringResource(R.string.calendar_previous_month),
     modifier = Modifier.clickable(onClick = onPreviousMonth),
     tint = NDGLTheme.colors.black400,
 )
 ...
 Icon(
     painter = painterResource(R.drawable.ic_24_chevron_right),
-    contentDescription = "Next Month",
+    contentDescription = stringResource(R.string.calendar_next_month),
     modifier = Modifier.clickable(onClick = onNextMonth),
     tint = NDGLTheme.colors.black400,
 )

Also applies to: 109-111


140-142: LazyVerticalGrid 높이 제한 고려

LazyVerticalGridColumn 내에서 높이 제약 없이 사용되고 있습니다. 캘린더는 최대 6주 + 헤더 행으로 제한되므로, 명시적인 높이 설정을 통해 성능과 레이아웃 안정성을 개선할 수 있습니다.

♻️ 제안된 수정
 LazyVerticalGrid(
     columns = GridCells.Fixed(7),
-    modifier = Modifier.fillMaxWidth(),
+    modifier = Modifier
+        .fillMaxWidth()
+        .heightIn(max = 350.dp), // 적절한 최대 높이 설정
 )
feature/travel/src/main/java/com/yapp/ndgl/feature/travel/datepicker/DatePickerContract.kt (1)

13-15: 현재 년/월 계산을 한 번에 고정하는 편이 안전합니다.
now()를 두 번 호출하면 월/년 경계(예: 12/31→1/1)에서 불일치가 생길 수 있어요. ViewModel에서 now를 한 번 계산해 currentYear/currentMonth를 넘기는 방식도 고려해주세요.

Comment thread gradle/libs.versions.toml
@mj010504 mj010504 force-pushed the design/NDGL-62 branch 2 times, most recently from c55d440 to 590d057 Compare February 10, 2026 11:43
@mj010504 mj010504 force-pushed the design/NDGL-62 branch 2 times, most recently from c5d9ac0 to 2daaeef Compare February 11, 2026 07:09
@mj010504 mj010504 force-pushed the design/NDGL-49 branch 2 times, most recently from e6e34e3 to 1b0fc4a Compare February 14, 2026 01:48
Base automatically changed from design/NDGL-49 to develop February 14, 2026 01:52
@mj010504 mj010504 merged commit 712805c into develop Feb 14, 2026
2 checks passed
@mj010504 mj010504 deleted the design/NDGL-62 branch February 14, 2026 02:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant