⚙️ [기능추가][AI] AI 장소 추출 URL 입력 바텀시트추가 필요

[Cassiiopeia]

📝 현재 문제점

• FAB(Floating Action Button) 클릭 시 바텀시트가 올라오고, Instagram/YouTube URL을 입력할 수 있는 화면 구현.

🛠️ 해결 방안 / 제안 기능

연동 API:

• POST /api/content/analyze - SNS URL 분석 요청

완료 조건:

• FAB 버튼 홈 화면에 추가
• URL 입력 바텀시트 UI
• URL 유효성 검증 (Instagram/YouTube URL 패턴)
• 분석 요청 API 호출

🙋‍♂️ 담당자

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

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260209_#21_AI_장소_추출_URL_입력_바텀시트추가_필요

커밋 메시지

AI 장소 추출 URL 입력 바텀시트추가 필요 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSy-FE/issues/21

[Cassiiopeia]

#21 장소 추출 URL 입력 UI 구현

개요

FAB(Floating Action Button) 클릭 시 SNS URL 입력 페이지로 이동하여, 사용자가 Instagram/YouTube 링크를 붙여넣고 분석을 요청하는 플로우를 구현한다.

구현 범위

항목	상태
FAB 버튼 클릭 시 추출 페이지 이동	완료
URL 입력 전용 화면	완료
클립보드 붙여넣기 기능	완료
URL 유효성 검증	완료
분석 요청 API 호출 (POST /api/content/analyze)	완료

변경 파일

신규 파일

파일	역할
lib/features/ai_extraction/presentation/widgets/url_input_section.dart	URL 입력 위젯
lib/features/ai_extraction/presentation/pages/ai_extraction_page.dart	장소 추출 메인 페이지
lib/features/ai_extraction/data/models/analyze_request.dart	분석 요청 DTO (Freezed)
lib/features/ai_extraction/data/models/analyze_response.dart	분석 응답 DTO (Freezed)
lib/features/ai_extraction/data/ai_extraction_remote_datasource.dart	API 호출 계층
lib/features/ai_extraction/data/ai_extraction_repository.dart	Repository 인터페이스
lib/features/ai_extraction/data/ai_extraction_repository_impl.dart	Repository 구현체
lib/features/ai_extraction/presentation/ai_extraction_provider.dart	상태 관리 (Riverpod)

수정 파일

파일	변경 내용
lib/common/widgets/main_scaffold.dart	FAB onPressed에서 /ai-extraction 경로로 push
lib/routing/route_paths.dart	aiExtraction = '/ai-extraction' 경로 상수 추가
lib/routing/app_router.dart	AiExtractionPage GoRoute 등록

상세 구현

1. FAB 연결 (main_scaffold.dart)

하단 네비게이션 바 중앙의 FAB 클릭 시 context.push(RoutePaths.aiExtraction)으로 장소 추출 페이지를 스택에 추가한다. push를 사용하여 뒤로가기로 이전 화면 복귀가 가능하다.

FloatingActionButton(
  onPressed: () {
    context.push(RoutePaths.aiExtraction);
  },
  backgroundColor: HomeColors.textPrimary,
  foregroundColor: HomeColors.background,
  shape: const CircleBorder(),
  child: Icon(Icons.add, size: 28.sp),
),

2. 라우팅 등록

route_paths.dart에 경로 상수를 정의하고, app_router.dart에 GoRoute를 등록한다.

// route_paths.dart
static const String aiExtraction = '/ai-extraction';
static const String aiExtractionName = 'ai-extraction';

// app_router.dart
GoRoute(
  path: RoutePaths.aiExtraction,
  name: RoutePaths.aiExtractionName,
  builder: (context, state) => const AiExtractionPage(),
),

인증 가드 적용 대상으로, 비로그인 상태에서 접근 시 로그인 페이지로 리다이렉트된다.

3. URL 입력 위젯 (UrlInputSection)

주요 구성 요소:

• 안내 문구: "SNS 링크를 붙여넣어 장소를 추출해보세요" 헤딩 + "Instagram, YouTube 링크를 지원합니다" 부제
• URL 입력 필드: TextInputType.url 키보드, 힌트 텍스트 https://www.instagram.com/p/...
• 클립보드 붙여넣기: suffixIcon으로 붙여넣기 아이콘(Icons.content_paste) 배치, 탭 시 Clipboard.getData로 클립보드 텍스트를 입력 필드에 자동 채움
• 분석 버튼: "장소 추출하기" 버튼, URL이 비어있으면 비활성화(disabled)

suffixIcon: IconButton(
  onPressed: () async {
    final data = await Clipboard.getData(Clipboard.kTextPlain);
    if (data?.text != null) {
      controller.text = data!.text!;
    }
  },
  icon: Icon(Icons.content_paste, color: HomeColors.textSecondary, size: 20.sp),
),

4. URL 유효성 검증

입력 URL의 trim().isNotEmpty 여부로 기본 유효성을 체크한다. 비어있으면 분석 버튼이 비활성화되어 API 호출이 차단된다.

return UrlInputSection(
  controller: _urlController,
  onAnalyze: () => notifier.analyze(),
  isValid: state.url.trim().isNotEmpty,
);

Provider의 analyze() 메서드에서도 빈 URL에 대한 방어 로직을 포함한다.

Future<void> analyze() async {
  if (state.url.trim().isEmpty) return;
  // ...
}

5. 분석 요청 API 연동

요청 DTO (AnalyzeRequest):

• sourceUrl: SNS URL 문자열 (필수)

응답 DTO (AnalyzeResponse):

• contentId: 폴링용 콘텐츠 ID (필수)

API 호출 흐름:

1. Provider analyze() 호출 시 상태를 analyzing으로 전환
2. Repository를 통해 POST /api/content/analyze에 { sourceUrl: "..." } 전송
3. 응답에서 contentId를 받아 상태에 저장
4. 분석 실패 시 상태를 error로 전환, 에러 메시지 표시

// ai_extraction_remote_datasource.dart
Future<AnalyzeResponse> analyze(AnalyzeRequest request) async {
  final response = await _dio.post(
    ApiEndpoints.contentAnalyze,  // /api/content/analyze
    data: request.toJson(),
  );
  return AnalyzeResponse.fromJson(response.data as Map<String, dynamic>);
}

6. 데이터 레이어 아키텍처

Repository 패턴으로 인터페이스와 구현체를 분리한다.

AiExtractionRepository (인터페이스)
  └── AiExtractionRepositoryImpl (구현체)
        └── AiExtractionRemoteDataSource (Dio 기반 HTTP 호출)

Riverpod Provider로 의존성을 주입한다.

@riverpod
AiExtractionRepository aiExtractionRepository(Ref ref) {
  final remoteDataSource = ref.watch(aiExtractionRemoteDataSourceProvider);
  return AiExtractionRepositoryImpl(remoteDataSource);
}

사용자 플로우

홈 화면 → FAB(+) 탭 → 장소 추출 페이지 진입
→ URL 직접 입력 또는 클립보드 붙여넣기
→ "장소 추출하기" 버튼 탭
→ POST /api/content/analyze 호출
→ 분석 진행 상태로 전환 (이슈 #22 연계)

비고

• 분석 요청 성공 후 폴링 기반 진행 상태 확인은 이슈 #22에서 처리
• 단일 페이지(AiExtractionPage) 내 상태 전환 방식으로 구현하여, URL 입력(input) -> 분석 중(analyzing) -> 완료(completed) 단계를 한 화면에서 처리