[FIX] 긴 폴더명 드롭다운 말줄임 처리

[kbh0218]

Closes #59

개요

저장 링크 전체보기 화면의 폴더 필터 드롭다운에서 긴 폴더명이 좁은 폭 안에서 과도하게 잘리거나, 선택된 필터칩에서 주변 UI를 밀어낼 수 있는 문제를 개선했습니다.

기존 드롭다운은 전체 필터칩의 폭을 기준으로 표시되면서 긴 폴더명이 6글자 내외로만 보일 수 있었습니다. 이 경우 폴더명의 앞부분이 같은 항목들이 있을 때 사용자가 폴더를 구분하기 어려웠습니다.

이번 작업에서는 드롭다운 항목 텍스트에 한 줄 말줄임 처리를 적용하고, 긴 폴더명이 하나라도 있는 경우 드롭다운 폭을 최대 15글자 정도까지 확장하도록 조정했습니다. 동시에 작은 화면에서는 화면 폭을 기준으로 드롭다운 폭을 제한해 화면 밖으로 과도하게 벗어나지 않도록 처리했습니다.

선택된 필터칩 라벨도 한 줄 말줄임 처리와 flex 제약을 적용해, 긴 폴더명을 선택해도 북마크 필터칩이나 주변 UI를 밀어내지 않도록 보완했습니다.

추가로 Android 에뮬레이터에서 확인하던 중 폴더 개수가 많아지면 드롭다운 하단 항목이 화면 밖으로 밀려 보이지 않는 문제가 확인되었습니다. 이 부분은 최초 이슈 범위에는 없었지만, 같은 폴더 드롭다운 사용성 문제라 함께 보완했습니다. 드롭다운을 화면 기준 레이어에 띄우고, 목록이 길어지는 경우 내부 스크롤을 통해 아래 항목까지 확인할 수 있도록 수정했습니다.

또한 Modal 기반 드롭다운으로 변경한 뒤 safe area 좌표 차이로 인해 드롭다운이 필터칩을 가리는 문제가 있어, 상단 safe area 값을 반영해 기존처럼 필터칩 아래에 표시되도록 위치를 보정했습니다.

주요 구현 내용

• 폴더 필터 드롭다운 항목 텍스트에 numberOfLines={1} 적용
• 폴더 필터 드롭다운 항목 텍스트에 ellipsizeMode="tail" 적용
• 긴 폴더명이 있는 경우 드롭다운 폭을 최대 15글자 분량까지 확장
• 작은 화면에서는 드롭다운 폭이 화면 영역을 넘지 않도록 제한
• 선택된 필터칩 라벨을 한 줄 말줄임 처리
• 필터칩 wrapper, chip, label에 flexShrink, minWidth: 0, maxWidth 제약 적용
• 긴 폴더명을 선택해도 북마크 필터칩이 밀리지 않도록 처리
• 폴더 개수가 많을 때 드롭다운 목록을 스크롤할 수 있도록 처리
• Android에서 스크롤 제스처가 정상 동작하도록 드롭다운을 Modal 레이어 기반으로 렌더링
• Modal 기반 드롭다운 위치 계산 시 safe area top inset 반영
• 드롭다운 외부 영역 터치 시 목록이 닫히도록 처리

파일별 역할

• components/ui/filter-chip.tsx: 필터칩 라벨 및 드롭다운 항목의 말줄임 처리, 긴 폴더명 기준 드롭다운 폭 계산, 긴 목록 스크롤, Modal 기반 드롭다운 렌더링 및 safe area 위치 보정 추가

해결한 이슈 목록

• 저장 링크 전체보기 화면의 폴더 필터 드롭다운 구조 확인
• 긴 폴더명이 드롭다운에서 좁게 잘리는 문제 확인
• 드롭다운 항목 텍스트에 numberOfLines={1} 적용
• 드롭다운 항목 텍스트에 ellipsizeMode="tail" 적용
• 긴 폴더명이 있는 경우 드롭다운 폭을 최대 15글자 분량까지 확장
• 화면 크기에 따라 드롭다운 폭이 과도하게 벗어나지 않도록 제한
• 선택된 폴더명이 표시되는 필터칩 라벨도 한 줄 말줄임 처리
• 긴 폴더명을 선택해도 필터칩과 북마크 버튼 레이아웃이 깨지지 않도록 보완
• 폴더 개수가 많을 때 드롭다운 하단 항목이 보이지 않는 문제 확인
• 폴더 개수가 많은 경우 드롭다운 내부 스크롤로 아래 항목을 확인할 수 있도록 보완
• Modal 기반 드롭다운이 필터칩 영역을 가리는 문제 보정
• Android 에뮬레이터에서 긴 폴더명 표시 확인
• Android 에뮬레이터에서 긴 폴더 목록 스크롤 동작 확인
• 실제 휴대폰 preview 빌드에서 긴 폴더명 표시 확인

체크 사항

• 이번 이슈 범위인 긴 폴더명으로 인한 레이아웃 깨짐을 수정
• 폴더명 최대 길이 정책이나 입력 제한은 변경하지 않음
• 폴더 목록이 많아지는 경우에도 드롭다운에서 아래 항목을 확인할 수 있도록 보완

참고사항

• 드롭다운 폭은 긴 항목이 있을 때만 확장됩니다.
• 짧은 폴더명만 있는 경우 기존처럼 최소 폭 기준으로 표시됩니다.
• 폴더 개수가 많을 때는 드롭다운 내부 스크롤로 아래 항목을 확인할 수 있습니다.
• 긴 목록 스크롤 보완은 최초 이슈 설명에는 없었지만, Android 에뮬레이터 테스트 중 같은 드롭다운 사용성 문제로 확인되어 함께 처리했습니다.
• Modal 기반 드롭다운은 safe area top inset을 반영해 기존처럼 필터칩 아래에 표시되도록 보정했습니다.
• 실제 휴대폰 preview 빌드에서의 최종 화면 확인은 추가 확인이 필요합니다.

Screenshots or Video

• 전체로 설정되어있고, 토글을 누른 화면입니다.
• 긴 폴더명이 있어 이렇게 최대 15글자까지 확장된 모습입니다.

• 긴 폴더명에 들어간 화면입니다

• 긴 폴더명이 없는 경우 화면입니다

• 폴더가 여러개인 경우 화면입니다. 스크롤이 추가되어, 아래에 있는 폴더도 선택할 수 있습니다.

• 현재 PR에 수정하진 않았지만, 참고삼아 실제 폴더에서는 어떻게 보이는지 캡쳐 첨부합니다.