개인 과제 - 영화 정보 앱

1. 깃허브 링크

• 영화 정보 앱

2. 구현 기능

• 필수 기능
  • 화면구현
  • Hero 위젯 사용한 애니메이션 효과
  • 클린 아키텍처를 활용한 TMDB API 데이터 가져오기

• 도전 기능
  • api 데이터 가져오는 것 테스트

3. 트러블 슈팅

1. Hero 애니메이션이 작동하지 않음 + 동일한 Hero tag 오류

• 문제

  • Hero 애니메이션이 전혀 동작하지 않음. 이미지가 바로 전환되거나, 아무런 애니메이션 없이 DetailPage로 이동함.

• 원인

  • Hero 위젯이 FutureBuilder 내부에 존재하여 렌더링이 지연됨.
  • tag 값이 중복되거나 정확히 일치하지 않음.
  • Image.network가 네트워크에서 이미지를 불러오기 전에 전환되어 대상이 없음.
  • 동일한 tag 값을 가진 Hero가 같은 화면에 여러 개 존재함.
  • 예: 상단 대표 영화와 인기순 리스트에서 같은 영화가 중복 렌더링됨.

• 해결 방법

  • Hero 위젯은 FutureBuilder 바깥에 배치.
  • 각 Hero마다 tag를 고유하게 설정
  • Image.network에 loadingBuilder를 추가하여 렌더링 타이밍 확보
  • tag에 prefix를 붙여서 고유하게 만든다.
  • 예: 'featured_${movie.id}', 'popular_${movie.id}'
  • DetailPage로 이동 시 heroTag 인자를 명시적으로 넘기고, 해당 값을 사용.

• 결과

  • 동일한 tag 값을 가진 Hero가 같은 화면에 여러 개 존재함. 중복 렌더링 되더라도 Hero는 한 번만 있어야 한다.

---

2. TMDB API 데이터가 모두 동일하게 나옴

• 증상

  • "현재 상영 중", "인기 순", "평점 높은 순", "개봉 예정" 모든 리스트가 동일한 영화들로 나옴.
  • 섹션 이름만 다르고 실제 영화 데이터가 같음.

• 원인

  • 내부 _get() 함수에서 API endpoint 파라미터를 무시하고 항상 'movie/now_playing' 경로를 호출함.

final response = await http.get(
  Uri.parse('https://api.themoviedb.org/3/movie/now_playing'), // 잘못된 하드코딩
  headers: { ... }
);

• 해결 방법
  • endpoint를 동적으로 반영하도록 코드 수정:

final response = await http.get(
  Uri.parse('$_baseUrl/$endpoint'), // 전달된 endpoint를 정확히 사용
  headers: { ... }
);

3. API 키 누락 혹은 인증 실패

• 증상

  • 401 Unauthorized
  • TMDB API 응답 없음 또는 에러 메시지: Invalid API key

• 원인

  • .env 파일에 API 키 누락 또는 오타

  • flutter_dotenv 초기화 누락

• 해결 방법

1. .env 파일 작성

TMDB_API_KEY=your_actual_key

2. main 함수에서 dotenv.load() 호출

void main() async {
  await dotenv.load();
  runApp(MyApp());
}

3. .env 파일이 .gitignore에 포함되었는지 확인

4. TMDB 개발자 콘솔에서 v4 Access Token으로 변경

• 결과
  • Authorization 헤더를 사용하는 경우 v4 Access Token을 반드시 사용해야 함