3주차 미션/1조 김세연

[rlatpdusdlqslek-spec]

Screen_recording_20260402_193955.mp4

Screen_recording_20260402_194233.mp4

📝 미션 체크리스트

• Navigation 구현
  • 홈 - 뉴스 기사 상세 스크린 연결
  • Article 객체 HomeScreen → ContactDetailScreen 으로 이동할 때 전달되게 구현
• 뉴스 기사 상세 화면
  • UI 구현
  • 뒤로가기 버튼 기능 구현

1. 네비게이션 구조의 체계화이전 코드에서는 MainActivity 안에 모든 로직이 섞여 있거나, 정의되지 않은 클래스를 참조하는 문제가 있었을 텐데, 고쳐진 코드에서는 역할을 명확히 분리했습니다.rememberNavController(): 화면 전환 상태를 관리하는 컨트롤러를 생성합니다. Scaffold 전체에서 이 컨트롤러를 공유하여 하단 바와 화면 본문이 서로 연동되게 합니다.MainNavHost 분리: 네비게이션 그래프(어떤 경로에 어떤 화면을 띄울지)를 별도의 컴포저블로 관리함으로써 MainActivity의 코드가 훨씬 간결해졌습니다.
2. Scaffold를 활용한 레이아웃 통합Scaffold는 앱의 기본적인 UI 구조(상단 바, 하단 바, 본문)를 잡아주는 틀입니다.bottomBar 설정: BottomNavBar(navController)를 Scaffold에 주입하여 앱 하단에 탭 바가 항상 보이도록 설정했습니다.innerPadding 전달: Scaffold가 제공하는 패팅 값을 MainNavHost에 전달함으로써, 하단 바가 본문 콘텐츠를 가리지 않도록 처리했습니다. (이 부분이 빠지면 리스트의 마지막 아이템이 하단 바 뒤로 숨는 현상이 발생합니다.)
3. 확장성 있는 패키지 구조com.example.kuit7_android 패키지 내부에 navigation과 ui.theme을 나누어 관리하기 시작한 점이 인상적입니다. 프로젝트 규모가 커져도 관리하기 쉬운 구조입니다.코드 흐름 요약단계역할설명1. 상태 생성rememberNavController()화면 전환을 조절할 "지휘자"를 만듭니다.2. 틀 잡기Scaffold하단 내비게이션 바와 본문 영역의 자리를 배치합니다.3. 본문 연결MainNavHost실제 사용자가 보게 될 화면들(뉴스 목록, 상세 등)을 경로에 맞게 렌더링합니다.
4. 연동BottomNavBar사용자가 탭을 누르면 navController를 통해 화면을 전환시킵니다.💡 팁: 뉴스 피드 상세 페이지 구현 시이제 MainNavHost 내부에서 상세 페이지로 이동할 때, 단순히 화면만 띄우는 것이 아니라 **인자(Argument)**를 전달하는 로직을 추가하시면 뉴스 상세 정보를 보여주는 기능을 완성하실 수 있습니다.예시:Kotlin// MainNavHost 내부 예시
   composable("detail/{newsId}") { backStackEntry ->
   val newsId = backStackEntry.arguments?.getString("newsId")
   NewsDetailScreen(newsId = newsId)
   }

[1hyok]

수고하셨습니다!