[DESIGN] URL 추가 화면 체크 상태 UI 개선

[kbh0218]

Closes #53

개요

폴더 URL 추가/선택 화면에서 URL 선택 상태를 나타내는 체크아이콘이 Android 실기기에서 명확하게 보이지 않는 문제를 개선했습니다.

기존 구조에서는 CardLink 카드와 선택 오버레이, 체크아이콘이 같은 카드 레이어 안에서 함께 렌더링되고 있었습니다. Android에서는 카드의 elevation과 absolute overlay 렌더링 순서가 겹치면서, 선택된 URL의 체크 표시가 카드 뒤쪽에 깔린 것처럼 희미하게 보일 수 있었습니다.

이번 작업에서는 카드 본문과 선택 오버레이를 cardLayer로 분리하고, 체크아이콘은 별도 sibling overlay 레이어로 분리했습니다. 이를 통해 카드의 clipping 영역과 선택 오버레이는 기존처럼 유지하면서, 오른쪽 체크아이콘만 카드보다 앞에 표시되도록 보완했습니다.

주요 구현 내용

• 폴더 URL 추가 화면의 선택 카드 레이어 구조 분리
• 새 폴더 생성 중 URL 선택 화면의 선택 카드 레이어 구조 분리
• 카드 본문과 선택 오버레이를 cardLayer 내부로 유지
• 체크아이콘을 카드 레이어 밖의 별도 overlay sibling으로 분리
• 체크 overlay에 zIndex, Android elevation 적용
• 선택 원 내부 체크 표시가 잘리지 않도록 SelectionCircle의 overflow 처리 보완
• 기존 URL 선택/해제 동작과 선택 개수 반영 흐름 유지

파일별 역할

• app/(tabs)/(folder)/folder-add-url.tsx: 기존 폴더에 URL을 추가하는 화면에서 선택 체크아이콘 레이어 분리
• app/(tabs)/(folder)/folder-url-select.tsx: 새 폴더 생성 중 URL 선택 화면에서 선택 체크아이콘 레이어 분리
• components/ui/selection-circle.tsx: 선택 원 내부 체크 표시가 잘리지 않도록 overflow 및 레이어 처리 보완

해결한 이슈 목록

• 폴더 URL 추가 화면의 선택 체크아이콘 렌더링 구조 확인
• 새 폴더 생성 중 URL 선택 화면의 선택 체크아이콘 렌더링 구조 확인
• Android에서 체크아이콘이 카드/오버레이 뒤에 깔려 보일 수 있는 레이어 구조 확인
• 체크아이콘을 카드 본문 레이어와 분리
• 체크아이콘 overlay가 카드보다 앞에 표시되도록 zIndex, elevation 적용
• 선택 오버레이는 기존 카드 영역 안에 유지해 카드 레이아웃이 깨지지 않도록 처리
• 선택된 URL과 선택되지 않은 URL의 상태를 상시 구분할 수 있도록 보완
• 기존 URL 선택/해제 동작 유지
• 하단 선택 개수 및 추가/생성 버튼 흐름 유지

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 기존 폴더 URL 추가 흐름 유지
• 기존 새 폴더 생성 중 URL 선택 흐름 유지
• 선택 체크아이콘 외 카드 UI 구조가 불필요하게 변경되지 않도록 처리

Screenshots or Video

• 체크표시 전 뜨는 화면입니다

• 체크표시 이후 뜨는 화면입니다

[sunm2n]

코드 중복 문제

• folder-add-url.tsx
• folder-url-select.tsx

의 SelectableCard 컴포넌트가
인터페이스 정의부터 스타일까지 사실상 동일합니다. 이번 PR에서 같은 변경을 두
파일에 각각 적용하는 패턴이 반복되고 있습니다. 추후 또 다른 수정이 생기면 두 파일을 동시에 수정해야 하는 유지보수 부담이 생깁니다.

  // 제안: 공통 컴포넌트로 추출
  // components/ui/selectable-card.tsx
  function SelectableCard({ link, selected, onToggle }: SelectableCardProps) {
  ... }

이번 pr에서 발생한 문제는 아니지만 이번 작업에서 기존에 컴포넌트 분리하던 문제가 악화된 것으로 보입니다. 추후 리팩토링 과정에서 문제가 될 수 있어 이번 pr에서 추출하고 가는게 어떤가 제안드립니다.

[sunm2n]

SelectionCircle 내부의 zIndex/elevation 중복 가능성

  // selection-circle.tsx - checkmark 스타일에 추가됨
  zIndex: 2,
  elevation: 2,

checkOverlay에서 이미 zIndex: 10, elevation: 10으로 체크아이콘 전체를 카드 위로 올렸기 때문에, SelectionCircle 내부 체크 마크에 별도로 zIndex/elevation을 적용하는 것은 중복일 수 있습니다.
이 값이 실제로 어떤 효과를 내는지 Android 실기기에서 확인이 필요할듯 합니다.

[kbh0218]

피드백 감사합니다!

말씀해주신 것처럼 체크 아이콘 전체를 카드 오버레이 위로 올리는 역할은 이미 부모 checkOverlay에서 zIndex/elevation으로 처리하고 있다고 판단했습니다.

SelectionCircle 내부의 checkmark는 원형 배경 안에 렌더링되는 단순 자식 View라서, 별도의 zIndex/elevation 없이도 표시 순서가 보장되는 구조라고 봤습니다. 따라서 중복 가능성이 있는 checkmark 내부 zIndex/elevation은 제거했습니다.

다만 현재 Android 실기기에서는 별도 빌드가 필요해 즉시 확인하지는 못했습니다. 추후 Android 실기기 빌드 환경에서 선택/해제 시 체크 표시가 정상 노출되는지, 오버레이에 가려지거나 잔상이 남지 않는지 추가로 확인하겠습니다.

[kbh0218]

코드 중복 문제

• folder-add-url.tsx
• folder-url-select.tsx

의 SelectableCard 컴포넌트가 인터페이스 정의부터 스타일까지 사실상 동일합니다. 이번 PR에서 같은 변경을 두 파일에 각각 적용하는 패턴이 반복되고 있습니다. 추후 또 다른 수정이 생기면 두 파일을 동시에 수정해야 하는 유지보수 부담이 생깁니다.

  // 제안: 공통 컴포넌트로 추출
  // components/ui/selectable-card.tsx
  function SelectableCard({ link, selected, onToggle }: SelectableCardProps) {
  ... }

이번 pr에서 발생한 문제는 아니지만 이번 작업에서 기존에 컴포넌트 분리하던 문제가 악화된 것으로 보입니다. 추후 리팩토링 과정에서 문제가 될 수 있어 이번 pr에서 추출하고 가는게 어떤가 제안드립니다.

피드백 감사합니다!

말씀해주신 것처럼 folder-add-url.tsx와 folder-url-select.tsx의 SelectableCard는 인터페이스 정의부터 JSX 구조, 선택 오버레이/체크 아이콘 스타일링까지 사실상 동일한 상태였습니다.

중복 자체는 기존부터 존재했지만, 이번 PR에서 체크 아이콘 레이어와 오버레이 관련 수정을 두 파일에 각각 동일하게 적용하면서 유지보수 부담이 실제로 드러난 케이스라고 판단했습니다.

제안해주신 공통 컴포넌트 추출 방향이 타당하다고 보고 반영했습니다.

다만 컴포넌트가 단순히 “선택 가능한 카드” 전체를 추상화한다기보다는, SavedLink 데이터를 받아 CardLink를 렌더링하고 선택 상태를 표시하는 URL 링크 선택 UI에 가깝다고 판단했습니다. 그래서 범용적인 SelectableCard보다는 책임이 더 명확한 SelectableLinkCard로 분리했습니다.

수정 내용은 다음과 같습니다.

components/ui/selectable-link-card.tsx 공통 컴포넌트 추가
folder-add-url.tsx의 로컬 SelectableCard 제거 후 SelectableLinkCard 사용
folder-url-select.tsx의 로컬 SelectableCard 제거 후 SelectableLinkCard 사용
중복되던 선택 오버레이, 카드 레이어, 체크 아이콘 위치 스타일을 공통 컴포넌트 내부로 이동