4주차 미션/1조 김세연

[rlatpdusdlqslek-spec]

🖥️ 미션

---

📕 구현 과제

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

---

1. 구현 핵심 구조: LazyColumn

가장 중요한 부분은 전체 화면을 LazyColumn으로 감싼 것입니다.

• 왜 사용했나요?: 프로필 화면은 위에서 아래로 길게 나열되는 구조입니다. 일반 Column을 사용하면 화면 밖으로 나가는 내용이 잘리지만, LazyColumn은 자동으로 스크롤 기능을 제공하며 화면에 보이는 것만 렌더링해서 메모리 효율이 좋습니다.
• 어떻게 동작하나요?: 각 컴포넌트(프로필, 카드, 대시보드 등)를 하나의 item { ... } 블록 안에 넣어서 세로로 차곡차곡 쌓는 방식입니다.

2. 컴포넌트별 배치 원리

A. 최상단 영역 (TopProfileSection)

• 정렬: Column의 horizontalAlignment = Alignment.CenterHorizontally를 사용하여 로고와 프로필 사진을 화면 정중앙에 배치했습니다.
• 이미지: Box에 clip(CircleShape)를 적용해 네모난 이미지를 원형으로 깎았습니다.

B. 정보 카드 (SubscriptionCard)

• 레이아웃: Card를 사용해 입체감을 주었습니다.
• 진행 바: LinearProgressIndicator를 사용하여 사용량을 시각화했습니다. modifier를 통해 높이(height)와 둥근 모서리(clip)를 디자인 가이드에 맞게 조절했습니다.

C. 대시보드 그리드 (DashboardGrid)

• 2x2 구조: Column 안에 Row를 두 번 배치하여 격자 모양을 만들었습니다.
• 비율 유지: 각 아이템에 Modifier.weight(1f)를 주어 두 아이템이 가로 길이를 정확히 반반씩 나누어 갖도록 했습니다. 또한 aspectRatio(1f)를 통해 항상 정사각형 형태를 유지합니다.

D. 설정 및 리스트 (Settings & SavedArticles)

• 설정: Switch 컴포넌트를 사용하여 다크 모드 같은 설정 상태를 직관적으로 조절할 수 있게 했습니다.
• 리스트: ArticleCard를 반복 호출하여 저장된 기사들을 보여줍니다. 실제 데이터가 많아질 경우 items(articleList) { ... } 문법으로 확장하기 좋습니다.

---

3. 리팩토링 및 유지보수 팁

• 관심사 분리: 지금처럼 각 컴포넌트를 별도의 파일(.kt)로 나눈 것은 아주 좋은 습관입니다. ProfileSection.kt가 수정되어도 SubscriptionCard.kt에는 영향을 주지 않으므로 에러를 찾기 쉽고 협업하기 좋습니다.
• 수정 팁: 만약 전체 배경색을 바꾸고 싶다면 LazyColumn의 background 수정만으로 가능합니다. 반면, 특정 카드 사이의 간격을 벌리고 싶다면 item과 item 사이에 Spacer를 추가하거나 Arrangement.spacedBy()를 활용해 보세요.