히스토리 화면 구현 과정

올리브영 스타일 앱의 히스토리 화면 구현 과정을 정리해드리겠습니다.

# 올리브영 스타일 앱 - 히스토리 화면 구현하기

## 1. 프로젝트 개요
- **목적**: 올리브영 앱의 히스토리(최근 본/좋아요) 기능 구현
- **주요 기능**:
  - 최근 본 상품과 좋아요한 상품을 탭으로 구분하여 표시
  - 상품 좋아요/취소 기능
  - 편집 모드를 통한 상품 삭제 기능
  - 전체 삭제 기능
- **사용 기술**: Flutter, Bloc Pattern, Firebase

## 2. 프로젝트 구조
```plaintext
lib/
├── blocs/
│   └── history/
│       ├── history_bloc.dart
│       ├── history_event.dart
│       └── history_state.dart
├── models/
│   └── history_item.dart
├── screens/
│   └── history/
│       ├── history_screen.dart
│       └── widgets/
│           ├── history_tab_bar.dart
│           ├── history_item_card.dart
│           └── history_list_view.dart
└── data/
    └── dummy_history_items.dart

3. 주요 구성 요소 설명

3.1 데이터 모델 (HistoryItem)

class HistoryItem {
  final String id;
  final String title;
  final String imageUrl;
  final int price;
  final int? originalPrice;
  final int? discountRate;
  final bool isBest;
  final bool isFavorite;
  
  // ... 생성자 및 변환 메서드
}

3.2 상태 관리 (Bloc)

// Events
abstract class HistoryEvent {}
class LoadHistoryItems extends HistoryEvent {}
class RemoveHistoryItem extends HistoryEvent {}
class ToggleFavorite extends HistoryEvent {}
class ClearHistory extends HistoryEvent {}

// State
class HistoryState {
  final List<HistoryItem> recentItems;
  final List<HistoryItem> favoriteItems;
}

// Bloc
class HistoryBloc extends Bloc<HistoryEvent, HistoryState> {
  // ... 이벤트 처리 로직
}

3.3 UI 컴포넌트

TabBar

• 최근 본 상품과 좋아요한 상품을 구분하는 탭 구현

class HistoryTabBar extends StatelessWidget {
  // ... 탭바 구현
}

상품 카드

• 개별 상품 정보를 표시하는 카드 UI
• 할인율, 가격, 태그(BEST, 오늘드림) 등 표시
•  

class HistoryItemCard extends StatelessWidget {
  // ... 상품 카드 구현
}

필터 섹션

• 총 상품 개수 표시
• 편집/전체삭제 기능 제공
•  

class HistoryFilterSection extends StatelessWidget {
  // ... 필터 섹션 구현
}

4. 주요 기능 구현

4.1 좋아요 기능

void _onToggleFavorite(ToggleFavorite event, Emitter<HistoryState> emit) {
  // 좋아요 상태 토글 구현
  final updatedItems = state.recentItems.map((item) {
    if (item.id == event.item.id) {
      return item.copyWith(isFavorite: !item.isFavorite);
    }
    return item;
  }).toList();
  
  emit(HistoryState(
    recentItems: updatedItems,
    favoriteItems: updatedItems.where((item) => item.isFavorite).toList(),
  ));
}

4.2 편집 모드

// 편집 모드 상태 관리
bool isEditing = false;

// 편집 모드 토글
void toggleEditMode() {
  setState(() {
    isEditing = !isEditing;
  });
}

4.3 전체 삭제

void _onClearHistory(ClearHistory event, Emitter<HistoryState> emit) {
  emit(HistoryState(recentItems: [], favoriteItems: []));
}

5. UI/UX 개선 사항

1. 반응형 디자인
   • ScreenUtil을 사용한 디바이스 크기 대응
   • 적절한 여백과 정렬로 가독성 확보
2. 시각적 피드백
   • 좋아요 버튼 애니메이션
   • 삭제 시 확인 다이얼로그
   • 로딩 상태 표시
3. 사용성 개선
   • 천 단위 콤마 적용
   • 할인율 계산 자동화
   • 이미지 최적화

6. 향후 개선 계획

1. 성능 최적화
   • 이미지 캐싱 구현
   • 리스트 최적화 (ListView.builder 활용)
2. 기능 추가
   • 상품 검색 기능
   • 정렬 기능
   • 필터링 기능
3. 데이터 관리
   • Firebase 연동
   • 로컬 저장소 활용
   • 에러 처리 강화

7. 학습 내용

1. Bloc 패턴을 통한 상태 관리
2. Widget 분리를 통한 코드 구조화
3. Firebase 연동 및 데이터 관리
4. UI/UX 디자인 패턴 적용