4주차 미션/ 1조 박민우

[mwpark01]

1. 미션

• 실습 내용 완성해오기
• 4주차 미션 화면 뷰스케치를 피그마에 완성해오기
• 본인이 뷰 스케치를 바탕으로 프로필 화면을 직접 구현하기
• 각 컴포넌트에 State Hoisting 적용하기
• 프로필 화면에 사용된 스타일(색상, 타이포그래피) 피그마와 동일하게 구현하기

---

2. 구현에 대한 설명

1. 뉴스

• 컴포넌트 기반 아키텍처
  • StatCard, PremiumCard, ArticleCard 등 UI 단위를 독립적인 파일로 분리하였습니다.
  • 코드의 재사용성을 높이고, 특정 UI 수정 시 유지보수를 용이하게 하였습니다.
• 데이터 모델 활용
  • Article이나 ToggleItemData 같은 데이터 클래스를 정의하여 UI와 데이터를 분리했습니다.
• Chunking
  • StatCard를 배치할 때 mockStats.chunked(2)를 사용하여 리스트 데이터를 2개씩 묶어 Row에 배치하였습니다.
• State Hoisting
  • 1. 상태 정의 (부모 - ProfileScreen)
    • var isPushChecked by remember { mutableStateOf(false) }
  • 2. 상태 및 이벤트 전달 (자식으로 전달)
    • ToggleSection은 부모로부터 isChecked 값과 onToggleChanged 함수를 전달받습니다.
  • 3. (자식 - ToggleRow) 값 변경 요청
    • 부모가 보내준 onToggleChanged(newValue)를 호출하여 값 변경을 부모에게 요청합니다.
  • 상태가 여러 곳에 흩어지지 않고 ProfileScreen 한 곳에서 관리되므로 버그가 줄어듭니다.
  • ToggleRow 같은 컴포넌트는 상태를 직접 관리하지 않기 때문에, 재사용하기 쉽고 테스트하기 용이합니다.

---

3. 스크린샷 & 실행영상

실습	미션
	mission.mp4