Skip to content

feat: 접을 수 있는 JSON 뷰어 지원 추가#2

Merged
KYHyeon merged 6 commits intoreleasefrom
feature/jamie/collapsable-json-view
Sep 16, 2025
Merged

feat: 접을 수 있는 JSON 뷰어 지원 추가#2
KYHyeon merged 6 commits intoreleasefrom
feature/jamie/collapsable-json-view

Conversation

@KYHyeon
Copy link

@KYHyeon KYHyeon commented Sep 1, 2025

배경 (필수)

  • NO-TICKET
  • 대용량 JSON 응답을 확인할 때 전체 내용을 한번에 보기 어려워 네비게이션이 불편했습니다
  • 특정 키나 값을 찾기 위해 전체 JSON을 스크롤해야 하는 비효율성을 개선하고자 했습니다
  • 중첩된 JSON 구조를 더 효율적으로 탐색할 수 있는 인터페이스가 필요했습니다

수정 내역 (필수)

새로운 기능 추가

  • JSONViewer.swift: 접기/펼치기 기능을 지원하는 새로운 JSON 뷰어 컴포넌트 추가
  • JSONViewerViewModel.swift: JSON 뷰어의 상태 관리를 위한 ViewModel 추가
  • 각 JSON 객체/배열에 대해 개별적으로 접기/펼치기 가능
  • 전체 펼치기/접기 버튼 제공

UI 개선

  • TextRendererJSON.swift: 기존 JSON 렌더러에 접기/펼치기 UI 요소 추가
  • 들여쓰기 레벨에 따른 시각적 구분 개선
  • 접힌 상태에서 요약 정보 표시 (객체 키 개수, 배열 아이템 개수)

설정 추가

  • UserSettings.swift: isCollapsibleJSONViewerEnabled 설정 옵션 추가
  • SettingsView-*.swift: 모든 플랫폼 설정 화면에 접을 수 있는 JSON 뷰어 토글 추가
  • 사용자가 기존 뷰와 새로운 접기 가능한 뷰 중 선택 가능

기타

  • Package.swift: iOS 최소 지원 버전을 16.0으로 업데이트
  • FileViewer.swift, FileViewerViewModel.swift: 새로운 JSON 뷰어 통합

테스트 방법 (필수)

  • 설정에서 "Collapsible JSON Viewer" 토글을 활성화
  • JSON 응답이 포함된 네트워크 요청 확인
  • JSON 객체/배열 옆의 화살표 아이콘을 클릭하여 접기/펼치기 동작 확인
  • 상단 툴바의 "Expand All"/"Collapse All" 버튼 동작 확인
  • 중첩된 JSON 구조에서 각 레벨별로 독립적으로 접기/펼치기가 가능한지 확인

리뷰 노트

  • iOS 16.0 이상에서만 사용 가능하도록 제한했습니다 (SwiftUI의 일부 기능 때문)
  • 기존 JSON 렌더러와 호환성을 유지하면서 옵션으로 제공합니다
  • 대용량 JSON의 경우 성능 최적화를 위해 LazyVStack을 사용했습니다
  • 접힌 상태는 뷰가 재생성되면 초기화됩니다 (향후 상태 유지 기능 추가 고려)

스크린샷

Before After
Simulator Screenshot - iPhone 16 Pro - 2025-09-01 at 12 03 27
RPReplay_Final1756705981.MP4

프로젝트 전반의 iOS 배포 타겟을 15.0에서 16.0으로 상향 조정합니다.
tvOS도 함께 15.0에서 16.0으로 업데이트되었습니다.

이를 통해 iOS 16의 새로운 API와 기능을 활용할 수 있게 되며,
더 이상 iOS 15를 지원하지 않습니다.
모든 플랫폼(iOS, macOS, tvOS, watchOS)의 설정 화면에 축소 가능한 JSON 뷰어 옵션을 추가합니다.
사용자가 API 응답의 JSON을 접고 펼칠 수 있는 노드 형태로 볼 수 있도록 설정할 수 있습니다.

UserSettings에 useCollapsibleJSONViewer 속성을 추가하여 앱 전체에서 설정을 공유합니다.
기본값은 false로 설정되어 기존 동작을 유지합니다.

iOS 16, visionOS 1, macOS 13 버전 제한을 제거하여 더 넓은 버전 호환성을 제공합니다.
JSON 뷰어에서 객체와 배열을 접고 펼칠 수 있는 기능을 구현합니다.
사용자가 JSON 구조를 더 쉽게 탐색할 수 있도록 시각적 토글 인디케이터(▶/▼)를 추가하고,
경로 기반으로 각 노드의 접힌 상태를 관리합니다.

주요 변경사항:
- 각 JSON 요소에 경로 정보 추가
- 접기/펼치기 상태를 저장하는 collapsedPaths 집합 도입
- 시각적 토글 인디케이터 렌더링 로직 구현
대화형 JSON 뷰어 기능을 구현하여 JSON 데이터를 시각적으로 탐색할 수 있도록 함

- 중첩된 JSON 객체와 배열의 확장/축소 기능 지원
- 탭 제스처로 특정 노드 토글 가능
- 전체 확장/축소 메뉴 옵션 제공
- iOS, visionOS, tvOS, watchOS 플랫폼 지원
사용자 설정에 따라 JSON 데이터를 접을 수 있는 뷰어로 표시하는 기능을 추가합니다.
기존의 텍스트 기반 렌더링과 새로운 JSONViewer 중 선택할 수 있습니다.

설정이 활성화되면 JSON 데이터를 계층 구조로 탐색할 수 있어
대용량 JSON 파일의 가독성과 사용성이 향상됩니다.
@KYHyeon KYHyeon added the enhancement New feature or request label Sep 1, 2025
@KYHyeon KYHyeon self-assigned this Sep 1, 2025
@KYHyeon KYHyeon requested review from a team, 1Consumption, ElonPark and stleamist and removed request for a team September 1, 2025 05:57
@stleamist
Copy link

오 좋네요 ㅎㅎ JSONViewer는 직접 커스텀으로 구현하신 건가요 아니면 오픈소스인가요?

@KYHyeon
Copy link
Author

KYHyeon commented Sep 1, 2025

오 좋네요 ㅎㅎ JSONViewer는 직접 커스텀으로 구현하신 건가요 아니면 오픈소스인가요?

클로드가 구현해준거에요
처음에 varkrishna/JSONViewer 이런거 써서 TextView 보다 다른 형태로 보여주는 게 어떨까 했는데 의존성 추가하는 것이 좀 고민되더라구요.

Copy link
Member

@ElonPark ElonPark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 pulse 오리진 레포에 변경사항 pull 받아서 최신화 한 다음에 반영 해주실 수 있으실까요?
오리진 레포와 충돌이 발생하면 나중에 pulse 오리진 레포에서 업데이트가 있을때
충돌로 인해서 반영하는게 불가능해져서요

https://github.com/kean/Pulse

@KYHyeon
Copy link
Author

KYHyeon commented Sep 1, 2025

요거 pulse 오리진 레포에 변경사항 pull 받아서 최신화 한 다음에 반영 해주실 수 있으실까요? 오리진 레포와 충돌이 발생하면 나중에 pulse 오리진 레포에서 업데이트가 있을때 충돌로 인해서 반영하는게 불가능해져서요

https://github.com/kean/Pulse

오리진에서 당겨오는 건 아래 PR 에서 작업하면 될 것 같아요
#3

한편 이 브랜치 변경사항을 main 에다 업데이트 하면 추후에 작업하기 힘들지 않을까 싶기도 한데요.
릴리즈를 따로 떼어서 관리하는게 나으려나요..?

@KYHyeon KYHyeon changed the base branch from main to release September 4, 2025 07:56
@KYHyeon
Copy link
Author

KYHyeon commented Sep 4, 2025

@ElonPark
base 를 relase 로 변경했어요.

main 은 upstream 을 싱크하는 용도로 사용하고
release 는 당근에서 새로운 작업을 하는 브랜치의 용도로 생각했어요.

Copy link
Member

@ElonPark ElonPark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍👍

private var nodesByPath: [String: JSONContainerNode] = [:]

package init(json: Any, error: NetworkLogger.DecodingError? = nil, options: TextRenderer.Options = .init()) {
package init(json: Any, error: NetworkLogger.DecodingError? = nil, options: TextRenderer.Options = .init(), collapsedPaths: Set<String> = [], nodesByPath: [String: JSONContainerNode] = [:]) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

개행 좀 해주세요

@KYHyeon KYHyeon merged commit 27dbfd9 into release Sep 16, 2025
21 of 27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants