[REFACTOR] png to svg

[Nico1eKim]

🚀 이슈번호

• closes [REFACTOR] svg 적용하기 #17

✏️ 변경사항

• png로 적용됐던 아이콘 파일들을 svg로 수정했습니다

📷 스크린샷

✍️ 사용법

• png는 drawable안에 넣고 svg는 files 안에 넣어서 svg를 쓸 때는 AsyncImage에 model로 Res.getUri("files/ic_hamburger.svg") 이런식으로 넣어서 쓰면 됩니다

🎸 기타

Summary by CodeRabbit

• 신기능
  • 앱 전반에 SVG 이미지 로딩을 지원해 아이콘과 프로필 이미지가 해상도에 맞춰 선명하게 표시됩니다.
  • 홈 화면의 메뉴, 마이페이지, 새로고침 아이콘이 플랫폼 전반에서 일관되게 렌더링됩니다.
  • 네트워크 기반 이미지 로딩을 활용해 다양한 환경에서 이미지 표시의 안정성과 호환성이 향상되었습니다.
• 잡무
  • iOS 시뮬레이터 대상 추가 및 SVG 관련 라이브러리 의존성이 공통 코드에 통합되었습니다.

[coderabbitai]

Walkthrough

홈 화면과 멤버 아이템의 정적 리소스 이미지를 Coil AsyncImage(URI 기반)로 전환하고, Coil 3 SVG/네트워크 관련 의존성과 iOS 시뮬레이터 타깃을 빌드 설정에 추가했습니다. 공개 API 시그니처와 로직 흐름은 변경되지 않았습니다.

Changes

Cohort / File(s)	Change Summary
빌드 설정 & 버전 카탈로그 composeApp/build.gradle.kts, gradle/libs.versions.toml	Coil 3 관련 의존성 및 버전 추가(coil-compose, coil-network-ktor3, coil-network-okhttp, coil-svg, version coilSvg = "3.3.0"). iOS 시뮬레이터 타깃(iosSimulatorArm64) 추가.
홈 화면 (SVG 로드 전환) composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt	Image(painterResource(...)) 사용 부분을 AsyncImage(model = Res.getUri("files/...svg"))로 교체. 관련 import 정리. 레이아웃/이벤트 로직 불변.
멤버 아이템 (아바타 SVG 전환) composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/component/PresentMembersItem.kt	프로필 이미지 목록을 drawable 상수에서 "files/ic_eyes_*.svg" 경로 문자열로 변경하고 AsyncImage(model = Res.getUri(imageRes))로 로딩하도록 전환. 관련 import 정리. 시그니처 불변.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant UI as Compose UI
  participant AsyncImage as Coil AsyncImage
  participant Coil as Coil Engine
  participant Decoder as SVG Decoder
  participant FS as Local Files
  participant Net as Network (OkHttp/Ktor)

  User->>UI: 화면 렌더링 요청
  UI->>AsyncImage: model = Res.getUri("files/*.svg")
  AsyncImage->>Coil: 이미지 요청
  alt 로컬 파일 URI
    Coil->>FS: 파일 읽기
    FS-->>Coil: 바이트 스트림
  else 원격 자원 (해당 시)
    Coil->>Net: 네트워크 요청
    Net-->>Coil: 응답 스트림
  end
  Coil->>Decoder: SVG 디코딩
  Decoder-->>Coil: 디코딩 결과
  Coil-->>AsyncImage: 렌더링 가능한 이미지 전달
  AsyncImage-->>UI: 컴포지션에 그리기

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

SVG가 와서 선을 그리네 ✨
AsyncImage가 속삭여 URI를 부르고
Coil이 받아 담아 선명히 보여주네.
홈과 멤버, 그림이 가벼워진 날—
작은 변경, 뚜렷한 모습.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	대체로 변경사항은 PNG→SVG 전환과 연관되나 빌드 설정과 라이브러리 선언 중 일부는 이 이슈의 핵심 목적과 직접 관련이 없어 보입니다; 구체적으로 iosSimulatorArm64 타깃 추가와 libs.versions.toml의 coil-network-okhttp 항목은 코드에서 사용 흔적이나 PR 설명상 근거가 명확하지 않습니다.	불필요한 빌드 설정 변경이나 사용되지 않는 라이브러리 선언은 제거하거나 PR 설명에 변경 사유를 명확히 적어 주세요; 정당한 이유가 있다면 코멘트로 근거를 남겨 주시기 바랍니다.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	PR 제목 "[REFACTOR] png to svg"은 변경의 핵심인 PNG에서 SVG로의 전환을 간결하게 요약하고 있어 본 변경사항과 일치합니다.
Linked Issues Check	✅ Passed	PR은 연결된 이슈 #17의 목표인 "이전 PNG 아이콘을 SVG로 교체"를 코드 수준에서 충족합니다; Image/painterResource를 Coil AsyncImage로 바꾸고 Res.getUri를 통해 SVG를 로드하도록 수정했으며 coil 관련 의존성을 추가해 SVG 로딩을 지원하는 변경이 포함되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2b2691 and 8c7595d.

📒 Files selected for processing (1)

• composeApp/build.gradle.kts (5 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• composeApp/build.gradle.kts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: ios-build

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (1)

165-172: 새로고침 아이콘이 AsyncImage로 변경되었습니다

일관성 있게 AsyncImage로 변환되었네요. 다만 Line 171의 주석 처리된 클릭 이벤트가 있는데, 이것도 활성화하면 좋을 것 같습니다.

만약 새로고침 기능이 필요하다면 주석 처리된 클릭 이벤트를 활성화해보세요:

-//                        .clickable(onClick = onNavigateToMyPage)
+                        .clickable(onClick = onRefresh)

그리고 HomeScreen의 파라미터에 onRefresh: () -> Unit을 추가하면 됩니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 91855de and b2b2691.

⛔ Files ignored due to path filters (14)

• composeApp/src/commonMain/composeResources/drawable/ic_hamburger.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/ic_profile.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/ic_refresh.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/img_eyes_closed.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/img_eyes_half_closed.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/img_eyes_half_opened.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/drawable/img_eyes_opened.png is excluded by !**/*.png
• composeApp/src/commonMain/composeResources/files/ic_eyes_closed.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_eyes_half_closed.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_eyes_half_opened.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_eyes_opened.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_hamburger.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_profile.svg is excluded by !**/*.svg
• composeApp/src/commonMain/composeResources/files/ic_refresh.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• composeApp/build.gradle.kts (1 hunks)
• composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (4 hunks)
• composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/component/PresentMembersItem.kt (3 hunks)
• gradle/libs.versions.toml (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: android-build

🔇 Additional comments (9)

composeApp/build.gradle.kts (1)

93-97: Coil SVG 의존성 추가가 잘 되었습니다

Coil 3에서 coil-svg 아티팩트는 멀티플랫폼을 지원하고, Coil 3는 이제 Android, JVM, iOS, macOS, Javascript, WASM을 지원하는 Kotlin Multiplatform 라이브러리입니다. 최신 버전인 3.3.0을 사용하고 있어 좋네요.

네트워킹 의존성도 적절하게 추가되었고, commonMain에 위치시켜 모든 플랫폼에서 SVG를 사용할 수 있도록 구성이 잘 되어 있습니다.

gradle/libs.versions.toml (2)

12-12: Coil SVG 버전 설정이 적절합니다

현재 최신 버전인 3.3.0을 사용하고 있어 좋습니다.

---

25-28: 라이브러리 선언이 깔끔하게 정리되었습니다

필요한 Coil 모듈들이 모두 포함되어 있고, 버전 참조를 통해 일관성 있게 관리되고 있습니다.

composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (3)

43-43: AsyncImage import가 추가되었습니다

Coil 3의 coil3.compose.AsyncImage를 사용하는 것이 올바른 접근입니다.

---

118-129: 햄버거 메뉴 아이콘이 AsyncImage로 변경되었습니다

PNG에서 SVG로 변환하는 목표에 맞게 잘 변경되었습니다. Res.getUri("files/ic_hamburger.svg") 사용법이 적절합니다.

---

131-138: 프로필 아이콘이 AsyncImage로 변경되었습니다

마찬가지로 SVG로 잘 변환되었습니다.

composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/component/PresentMembersItem.kt (3)

23-23: AsyncImage import가 추가되었습니다

coil3.compose.AsyncImage를 올바르게 import했습니다.

---

34-40: 프로필 이미지들이 SVG 경로로 변경되었습니다

PNG 리소스에서 SVG 파일 경로로 잘 변환되었습니다. "files/" prefix를 사용하는 것이 일관된 패턴이네요.

---

73-77: AsyncImage로 이미지 로딩이 변경되었습니다

Res.getUri(imageRes)를 통해 랜덤 선택된 SVG 이미지를 로딩하도록 잘 변경되었습니다. SVG의 벡터 특성상 높이만 지정해도 비율이 유지되어 좋습니다.