[Flutter] NotesPage 날짜 StateProvider

NoteScreen 관련 파일의 리팩토링 및 구조 개선하는 작업을 하였습니다.
먼저 파일구조를 설명드리겠습니다.

파일 구조

pages/year_screen.dart

노트 연도를 관리하는 화면을 나타냅니다.
날짜와 관련된 상태를 독립적으로 관리하기 위해 currentDateProviderYear라는 StateProvider를 사용하여 현재 연도를 처리합니다.
사용자가 연도를 변경할 수 있는 기능을 제공하며, 연도를 기준으로 표시되는 날짜와 관련된 작업을 담당합니다.

pages/month_screen.dart

월별 화면을 나타내며, currentDateProviderMonth를 사용하여 날짜 상태를 관리합니다. 월을 기준으로 날짜를 처리하고, 월별로 날짜를 이동하는 기능이 구현됩니다. 해당 화면에서 사용자는 월을 앞당기거나 뒤로 미룰 수 있습니다.

pages/week_screen.dart

주간 화면을 나타내며, currentDateProviderWeek를 사용하여 주 단위로 날짜를 관리합니다.
주간 날짜 변경 및 주차를 표시하는 기능이 포함됩니다.
시작일을 기준으로 주를 설정하고, 사용자는 날짜를 앞뒤로 이동시킬 수 있습니다.

pages/day_screen.dart

일별 화면을 나타내며, currentDateProviderDay로 날짜를 관리합니다.
날짜를 기준으로 작업을 처리하고, 하루를 기준으로 날짜를 이동시키는 기능을 제공합니다.

NoteAppBar.dart

NoteAppBar는 Year, Month, Week, Day 화면을 포함하는 기본적인 화면 구조를 담당합니다.
각 화면은 내부적으로 독립적인 날짜 상태를 유지하며, StateProvider를 통해 각 화면에 맞는 날짜 정보를 앱바에 표시합니다. 이 파일은 각 화면을 어떻게 표시하고, 페이지 전환을 어떻게 처리할지 관리합니다.

TextStyles.dart

앱 전반에 걸쳐 사용되는 텍스트 스타일을 정의한 파일입니다.
다양한 화면에서 일관된 스타일을 유지할 수 있도록 중앙 집중식으로 텍스트 스타일을 관리합니다.

ColorStyles.dart

앱 전반에서 사용되는 색상값들을 관리하는 파일입니다. ColorStyles 클래스를 통해 앱 전체에서 통일된 색상을 사용할 수 있도록 정의되어 있습니다.

FeatherIcons.dart

아이콘을 정의하는 파일로, 사용되는 아이콘들을 코드로 관리합니다. 예를 들어, 검색 아이콘, 화살표 아이콘 등이 포함될 수 있습니다.

리팩토링

리팩토링의 주된 목표는 각 날짜 상태를 화면별로 독립적으로 관리하고,
해당 날짜에 맞춰 앱바에 반영되도록 하는 것입니다.

이를 통해 페이지 간에 날짜 상태가 영향을 주지 않도록 했으며,
각 화면의 날짜 표시 방식을 개선하여 사용자 경험을 향상시키는 방향으로 작업했습니다.

작업 개요

1. 각 페이지별 날짜 상태 관리

각 페이지에서 날짜를 독립적으로 관리할 수 있도록 StateProvider을 페이지별로 구분하여 사용했습니다.

2. AppBar 날짜 표시

NoteScreen에서 AppBar에 날짜를 표시할 때 각 페이지에 맞는 날짜가 표시되도록 수정했습니다.

3. 페이지 이동 시 날짜 상태 유지

페이지 이동 시 날짜 상태가 유지되도록 StateProvider를 이용해 페이지별로 독립적인 상태 관리를 구현했습니다.

4. 화면별 날짜 변경 처리

각 화면에서 날짜를 변경하는 기능을 추가하여, 사용자가 날짜를 조정할 수 있도록 했습니다.

상세 작업 내용

1. 각 페이지별 날짜 상태 관리

각 페이지는 독립적인 날짜 상태를 가지기 위해, StateProvider을 페이지별로 구분하여 사용했습니다. 이전에는 하나의 공통된 날짜 상태를 사용했지만, 이 방식은 각 페이지가 서로 영향을 미쳐 날짜 변경 시 문제가 발생할 수 있었습니다.

이를 해결하기 위해 각 페이지별로 다음과 같은 프로바이더를 설정했습니다:

Year 화면: currentDateProviderYear
Month 화면: currentDateProviderMonth
Week 화면: currentDateProviderWeek
Day 화면: currentDateProviderDay

각각의 프로바이더는 StateProvider 타입으로 선언되어, 각 페이지가 고유의 날짜를 관리하게 됩니다.
이로 인해 각 페이지에서 날짜 상태를 독립적으로 변경할 수 있으며, 다른 페이지에 영향을 주지 않습니다.

// 각 화면에서 독립적인 날짜 상태를 관리하는 예시
final currentDateProviderYear = StateProvider<DateTime>((ref) => DateTime.now());
final currentDateProviderMonth = StateProvider<DateTime>((ref) => DateTime.now());
final currentDateProviderWeek = StateProvider<DateTime>((ref) => DateTime.now());
final currentDateProviderDay = StateProvider<DateTime>((ref) => DateTime.now());

2. AppBar 날짜 표시

각 화면의 AppBar에서 날짜를 표시할 때, 해당 화면에 맞는 날짜를 정확하게 표시하도록 수정했습니다.
예를 들어, Year 화면에서는 currentDate.year만 표시하고, Month 화면에서는 currentDate.year와 currentDate.month를 표시하는 방식으로 각 페이지에 맞는 정보를 앱바에 반영했습니다.

각 페이지의 날짜는 해당 페이지의 StateProvider에서 상태를 읽어와 업데이트됩니다.
또한, 날짜를 변경하는 버튼을 추가하여 사용자가 날짜를 쉽게 조정할 수 있도록 했습니다.

// Year 화면에서 날짜를 표시하는 코드
Center(
  child: Text('${currentDate.year}년', style: TextStyles.notesDateTextStyle),
)

3. 페이지 이동 시 날짜 상태 유지

페이지 이동 시 각 페이지에서 관리되는 날짜 상태가 유지될 수 있도록 설계했습니다.
페이지 이동 시 GoRouter를 사용하여 해당 경로로 이동하는 방식으로 구현하였으며,
이동하는 페이지의 날짜 상태는 StateProvider에서 관리되므로,
날짜 상태는 이동한 페이지에 맞춰 자동으로 갱신됩니다.

페이지 이동은 GoRouter.of(context).go(route)로 처리하며,
페이지마다 각각 독립적인 날짜 상태를 보장합니다.
예를 들어, Year 화면에서 날짜를 변경하면, Month 화면에서 날짜는 영향을 받지 않습니다.

// 페이지 이동 처리 예시
GestureDetector(
  onTap: () {
    if (currentPageIndex != index) {
      GoRouter.of(context).go(route);
    }
  },
  child: Text(
    label,
    style: TextStyle(
      fontFamily: 'Pretendard',
      color: isActive ? ColorStyles.dark2 : ColorStyles.gray2,
      fontSize: isActive ? 16 : 16,
      fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
    ),
  ),
)

4. 화면별 날짜 변경 처리

각 화면에서 날짜를 변경할 수 있도록 IconButton을 추가하여 사용자가 날짜를 쉽게 조정할 수 있도록 했습니다. 날짜 변경은 StateProvider의 notifier를 통해 상태를 갱신하는 방식으로 처리됩니다.

Year 화면: 사용자가 좌측 화살표를 클릭하면 1년을 뺀 날짜로 변경되고, 우측 화살표를 클릭하면 1년을 더한 날짜로 변경됩니다.
Month 화면: 사용자가 좌측 화살표를 클릭하면 한 달을 빼고, 우측 화살표를 클릭하면 한 달을 더하는 방식으로 날짜를 변경합니다.
Week 화면: 사용자가 좌측 화살표를 클릭하면 1주일을 빼고, 우측 화살표를 클릭하면 1주일을 더합니다.
Day 화면: 사용자가 좌측 화살표를 클릭하면 하루를 빼고, 우측 화살표를 클릭하면 하루를 더하는 방식으로 날짜를 변경합니다.

// 날짜 변경 버튼 처리 예시 (Year 화면)
IconButton(
  icon: const Icon(Icons.keyboard_arrow_left),
  onPressed: () {
    ref.read(currentDateProvider.notifier).state = DateTime(currentDate.year - 1);
  },
)

결과 및 이점

1. 독립적인 날짜 관리
   각 페이지별로 독립적인 날짜 상태를 관리하게 되면서, 페이지 간 날짜 상태가 영향을 주지 않게 되었습니다. 이로 인해 사용자가 날짜를 변경할 때, 다른 화면의 날짜에 영향을 미치지 않으며, 각 화면의 날짜는 개별적으로 관리됩니다.

2. 명확한 날짜 표시
   각 화면에 맞는 날짜를 정확히 표시하고, 사용자가 날짜를 쉽게 조정할 수 있도록 개선되었습니다. 이를 통해 사용자 경험이 향상되었으며, 각 화면에 맞는 정보를 직관적으로 제공할 수 있게 되었습니다.

3. 페이지 이동 시 원활한 상태 유지
   페이지 이동 시 각 화면에 맞는 날짜 상태가 자동으로 유지되도록 했습니다. 사용자가 Year, Month, Week, Day 화면을 오갈 때 날짜가 일관되게 표시되며, 페이지를 이동할 때마다 날짜 상태가 자동으로 변경됩니다.

결론

이번 리팩토링을 통해 각 페이지에서 독립적인 날짜 상태 관리를 구현하고, AppBar에 각 화면에 맞는 날짜를 정확하게 표시할 수 있었습니다. 또한, 날짜를 쉽게 변경할 수 있는 기능을 제공하며, 페이지 이동 시 날짜 상태가 유지되는 구조로 개선되었습니다.

StateProvider

오른쪽 슬라이드, 왼쪽 슬라이드시 날짜가 변경되며, 앱바 표시와 화면의 상태가 변합니다.
각 페이지는 독립적으로 날짜를 표시합니다.

Year 노트 페이지	Month 노트 페이지	Week 노트 페이지	Day 노트 페이지

어플의 구조

1. Page 화면들 (Year, Month, Week, Day)

앱은 기본적으로 Year, Month, Week, Day 4가지 주요 화면을 제공합니다.

각 화면에서 제공하는 기능

Year 화면: 연도를 기준으로 날짜를 관리합니다.
연도 이동 버튼을 통해 이전/다음 연도로 변경할 수 있습니다.

Month 화면: 월을 기준으로 날짜를 관리합니다.
월 이동 버튼을 통해 이전/다음 달로 변경할 수 있습니다.

Week 화면: 주간을 기준으로 날짜를 관리합니다.
해당 주의 시작일을 계산하고, 주간 이동 버튼을 통해 이전/다음 주로 변경할 수 있습니다.

Day 화면: 하루를 기준으로 날짜를 관리합니다.
날짜 이동 버튼을 통해 이전/다음 날로 변경할 수 있습니다.

2. NoteScreen

NoteScreen은 앱의 주요 화면을 관리하는 컨테이너 역할을 합니다.
이 화면은 위에서 언급한 Year, Month, Week, Day 화면을 포함하며,
각 화면에 대한 상태 및 날짜 관리를 처리합니다.
사용자 인터페이스(UI)는 ConsumerWidget을 사용하여 Riverpod를 통해 상태를 관리하고, 화면이 변경될 때마다 날짜 상태를 업데이트합니다.

주요 기능

AppBar 날짜 표시: 각 화면에 맞는 날짜를 AppBar에 표시하여 사용자가 현재 보고 있는 날짜를 쉽게 확인할 수 있도록 합니다.

Floating Action Button: 각 화면에서 기록을 추가할 수 있는 버튼을 제공합니다. 사용자가 기록을 추가하면 새로운 페이지로 이동하고, 돌아올 때 새로 추가된 기록이 자동으로 반영됩니다.

BottomNavigation: GoRouter를 사용하여 화면 간에 페이지 전환을 관리합니다.

3. 상태 관리 (Riverpod)

StateProvider를 활용하여 각 화면의 날짜 상태를 독립적으로 관리합니다.
각 화면은 자체적인 날짜 상태를 가지며, 날짜가 변경되면 해당 페이지의 상태만 업데이트되고 다른 화면에 영향을 주지 않습니다.

날짜 상태 관리 예시

Year 화면에서는 currentDateProviderYear를 사용하여 현재 연도를 관리합니다.
Month 화면에서는 currentDateProviderMonth를 사용하여 현재 월을 관리합니다.
Week 화면에서는 currentDateProviderWeek를 사용하여 주차 및 날짜를 관리합니다.
Day 화면에서는 currentDateProviderDay를 사용하여 일별 날짜를 관리합니다.
각 상태는 StateProvider를 통해 관리되고, ref.read(currentDateProvider.notifier).state 방식으로 날짜를 변경할 수 있습니다.