⚙️ [기능추가][장소] 장소 상세 페이지 구현 필요

[Cassiiopeia]

📝 현재 문제점

• 장소 카드 클릭 시 이동하는 상세 페이지 구현. 영업시간, 주소, 지도 미리보기, 출처 링크 등 표시.

🛠️ 해결 방안 / 제안 기능

연동 API:

• GET /api/place/{placeId} - 장소 상세 정보

완료 조건:

• 장소 상세 정보 표시 (이름, 주소, 카테고리)
• 네이버 지도 미리보기
• 길찾기 버튼 (외부 지도 앱 연동)
• 출처 SNS 링크 표시
• 장소 저장/북마크 버튼

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: @Cassiiopeia
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260209_#24_장소_상세_페이지_구현_필요

커밋 메시지

장소 상세 페이지 구현 필요 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSy-FE/issues/24

[Cassiiopeia]

#23 장소 추출 후 장소 선택 및 저장 UI 구현

개요

추출 완료된 장소 목록에서 사용자가 저장할 장소를 체크박스로 선택하고, 선택한 장소를 일괄 저장하는 플로우를 구현한다. 저장 진행률을 실시간으로 표시하고, 완료 시 스낵바로 결과를 피드백한다.

구현 범위

항목	상태
장소 목록 체크박스 선택 UI	완료
전체 선택/해제 기능	완료
선택한 장소 일괄 저장 (POST /api/place/{placeId}/save)	완료
저장 진행률 표시	완료
저장 완료 스낵바 피드백	완료
폴더 선택 기능	후순위 보류

변경 파일

신규 파일

파일	역할
lib/features/ai_extraction/presentation/widgets/place_result_section.dart	장소 결과 목록 + 선택 + 저장 위젯
lib/common/models/place_model.dart	PlaceModel 공통 모델 (home에서 이동)

관련 파일 (이슈 #21, #22와 공유)

파일	해당 부분
lib/features/ai_extraction/presentation/ai_extraction_provider.dart	togglePlace, toggleAll, saveSelectedPlaces
lib/features/ai_extraction/presentation/pages/ai_extraction_page.dart	completed/saving/saved 단계 UI 분기, 스낵바
lib/features/ai_extraction/data/ai_extraction_remote_datasource.dart	savePlace() API 호출
lib/features/ai_extraction/data/ai_extraction_repository.dart	savePlace() 인터페이스
lib/features/ai_extraction/data/ai_extraction_repository_impl.dart	savePlace() 구현

수정 파일

파일	변경 내용
lib/features/home/data/models/content_response.dart	PlaceModel import 경로 변경 (home → common)
lib/features/home/presentation/home_provider.dart	PlaceModel import 경로 변경
lib/features/home/presentation/widgets/place_card.dart	PlaceModel import 경로 변경

삭제 파일

파일	사유
lib/features/home/data/models/place_model.dart	common/models/로 이동
lib/features/home/data/models/place_model.freezed.dart	이동에 따른 생성 파일 삭제
lib/features/home/data/models/place_model.g.dart	이동에 따른 생성 파일 삭제

상세 구현

1. PlaceModel 공통 모델 이동

home feature에 종속되어 있던 PlaceModel을 lib/common/models/place_model.dart로 이동하여, 장소 추출(ai_extraction)과 홈 피드(home) 양쪽에서 공유 가능하게 한다.

@freezed
class PlaceModel with _$PlaceModel {
  const factory PlaceModel({
    required int placeId,
    required String placeName,
    String? address,
    double? latitude,
    double? longitude,
    String? category,
    @Default([]) List<String> tags,
    String? imageUrl,
    int? contentId,
  }) = _PlaceModel;

  factory PlaceModel.fromJson(Map<String, dynamic> json) =>
      _$PlaceModelFromJson(json);
}

기존 home feature의 import 경로 3건을 일괄 변경한다.

2. 장소 결과 목록 위젯 (PlaceResultSection)

3개 영역으로 구성:

헤더 영역:

• 추출 결과 카운트: "N개의 장소를 찾았어요"
• 안내 문구: "저장할 장소를 선택하세요"
• 전체 선택/해제 토글: 아이콘(check_circle/circle_outlined) + 텍스트("전체 선택"/"전체 해제")

장소 리스트 (ListView.separated):

• 각 아이템(_PlaceSelectItem)은 체크 아이콘, 장소 이미지(56x56), 장소명, 주소, 카테고리로 구성
• InkWell로 전체 행 탭 시 선택 토글
• 체크 상태에 따라 아이콘 색상 변경 (선택: textPrimary, 미선택: textDisabled)
• 장소명은 1줄 말줄임(ellipsis), 주소/카테고리는 null일 때 숨김 처리

하단 저장 버튼 영역:

• SafeArea로 감싸서 하단 안전 영역 확보
• 버튼 텍스트: "N개 장소 저장하기" (선택 개수 동적 반영)
• 비활성화 조건: 선택된 장소가 0개이거나, 저장 진행 중일 때

3. 장소 선택 로직

개별 토글 (togglePlace):

void togglePlace(int placeId) {
  final selected = Set<int>.from(state.selectedPlaceIds);
  if (selected.contains(placeId)) {
    selected.remove(placeId);
  } else {
    selected.add(placeId);
  }
  state = state.copyWith(selectedPlaceIds: selected);
}

전체 선택/해제 (toggleAll):

void toggleAll() {
  if (state.selectedPlaceIds.length == state.places.length) {
    state = state.copyWith(selectedPlaceIds: {});  // 전체 해제
  } else {
    final allIds = state.places.map((p) => p.placeId).toSet();
    state = state.copyWith(selectedPlaceIds: allIds);  // 전체 선택
  }
}

추출 완료 시 기본값으로 전체 선택 상태가 설정되어 있어, 사용자가 불필요한 장소만 해제하는 플로우를 유도한다.

4. 일괄 저장 로직 (saveSelectedPlaces)

선택된 장소 ID 목록을 순회하며 개별 POST /api/place/{placeId}/save를 호출한다. 각 요청 완료 시마다 진행률을 갱신한다.

Future<void> saveSelectedPlaces() async {
  if (state.selectedPlaceIds.isEmpty) return;

  state = state.copyWith(
    step: AiExtractionStep.saving,
    saveProgress: 0.0,
  );

  try {
    final repository = ref.read(aiExtractionRepositoryProvider);
    final placeIds = state.selectedPlaceIds.toList();

    for (int i = 0; i < placeIds.length; i++) {
      await repository.savePlace(placeIds[i]);
      state = state.copyWith(
        saveProgress: (i + 1) / placeIds.length,  // 0.0 ~ 1.0
      );
    }

    state = state.copyWith(step: AiExtractionStep.saved);
  } catch (e) {
    state = state.copyWith(
      step: AiExtractionStep.error,
      errorMessage: '장소 저장에 실패했습니다. 다시 시도해주세요.',
    );
  }
}

API 호출 상세:

// ai_extraction_remote_datasource.dart
Future<void> savePlace(int placeId) async {
  await _dio.post(ApiEndpoints.savePlace(placeId.toString()));
  // endpoint: /api/place/{placeId}/save
}

5. 저장 진행률 표시

저장 버튼이 저장 중일 때 다음으로 변경:

• CircularProgressIndicator (20x20, strokeWidth 2) + "저장 중..." 텍스트
• saveProgress 값이 0보다 크면 확정 진행률 표시, 0이면 무한 로딩

child: isSaving
    ? Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 20.w, height: 20.w,
            child: CircularProgressIndicator(
              strokeWidth: 2.w,
              color: HomeColors.background,
              value: saveProgress > 0 ? saveProgress : null,
            ),
          ),
          SizedBox(width: 8.w),
          Text('저장 중...'),
        ],
      )
    : Text('${selectedPlaceIds.length}개 장소 저장하기'),

6. 저장 완료 스낵바 피드백

ref.listen으로 상태 변화를 감지하여, saved 단계 진입 시 스낵바를 표시하고 1초 후 페이지를 닫는다.

ref.listen(aiExtractionNotifierProvider, (prev, next) {
  if (prev?.step != AiExtractionStep.saved &&
      next.step == AiExtractionStep.saved) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('${next.selectedPlaceIds.length}개의 장소가 저장되었습니다'),
        duration: const Duration(seconds: 2),
      ),
    );
    Future.delayed(const Duration(seconds: 1), () {
      if (mounted) context.pop();
    });
  }
});

• 스낵바 메시지: "N개의 장소가 저장되었습니다" (저장 개수 동적 표시)
• 스낵바 표시 시간: 2초
• 페이지 종료: 1초 후 context.pop()으로 이전 화면(홈)으로 복귀

7. 상태 전환 흐름

[completed] → 장소 선택/해제 조작
  → "N개 장소 저장하기" 버튼 탭
  → [saving] (저장 진행률 0% ~ 100%)
  → [saved] (스낵바 표시 + 1초 후 자동 pop)

[saving] 중 실패 시 → [error] (에러 메시지 + 다시 시도)

비고

• 폴더 선택 기능은 현재 미구현이며 후순위로 보류. 현재는 기본 저장소에 저장
• 일괄 저장은 순차 호출 방식(for 루프)으로, 대량 장소 시 병렬 호출로 개선 가능
• 저장 중간 실패 시 이미 저장된 장소는 롤백하지 않으며, 에러 메시지만 표시

[Cassiiopeia]

Stable 반영 완료