[FEATURE] 링크카드 디자인 개편 및 저장 URL 외부 브라우저 실행#30
Conversation
kbh0218
force-pushed
the
feat/#23-link-card-redesign-external-browser
branch
from
56f96f9 to
440b7f3
Compare
url prop이 모든 호출부에서 originalUrl과 중복
url={link.originalUrl}, originalUrl={link.originalUrl} 두 값이 동일하므로 displayUrl 계산에서 finalUrl이 사실상 무시됩니다. |
| }: CardLinkProps) { | ||
| const moreRef = useRef<View>(null); | ||
| const displayUrl = getFirstText(url, finalUrl, originalUrl) ?? 'URL 정보 없음'; | ||
| const displayTitle = getFirstText(title, summary, displayUrl) ?? '제목 없음'; |
There was a problem hiding this comment.
displayTitle fallback으로 URL 문자열이 제목 영역에 노출
title과 summary가 없으면 displayUrl(실제 URL 문자열)이 numberOfLines={2} 제목 영역에 그대로 표시됩니다.
https://very-long-url.example.com/path?query=...
위와 같은 URL이 타이틀 자리에 올라오면 가독성이 나쁩니다. '제목 없음'으로 고정하거나, URL에서 도메인만 추출하는 방식으로 수정을 제안드립니다.
There was a problem hiding this comment.
확인했습니다. 말씀주신 대로 title, summary가 모두 없을 때 URL이 제목 영역에 중복 노출되어 가독성이 떨어질 수 있다고 판단했습니다.
displayTitle의 fallback 후보에서 displayUrl을 제거했고, 이제 제목 정보가 없으면 제목 없음으로 고정 표시되도록 수정했습니다.
There was a problem hiding this comment.
VERDICT_COLORS에 테마 외 하드코딩 색상
- components/ui/card-link.tsx:35 text: '#2F6F5F'
- components/ui/card-link.tsx:38 background: '#F5ECC8'
- components/ui/card-link.tsx:39 text: '#8A6500'
- components/ui/card-link.tsx:42 background: '#F5C8C8'
safe.background는 Colors.brand.softMint를 쓰는데 safe.text만 하드코딩되어 있고, caution은 전부 하드코딩입니다.
디자인 토큰이 바뀌면 이 파일을 별도 수정해야 합니다.
constants/theme.ts의 Colors에 추가를 제안드립니다.
There was a problem hiding this comment.
반영했습니다. 지적해주신 CardLink의 VERDICT_COLORS 하드코딩 색상은 constants/theme.ts의 Colors.brand.verdict로 이동했고, 컴포넌트에서는 해당 토큰을 참조하도록 수정했습니다.
추가로 같은 기준에서 앱/컴포넌트에 남아 있던 하드코딩 색상도 함께 정리했습니다.
CardLink: verdict badge 색상, card surface 색상 토큰화ResultStatusIcon: verdict별 icon/glow/chip 색상 토큰화- 공통
Button: primary 텍스트/로딩 인디케이터 색상, transparent border/background 토큰화 AddFolderButton: 배경색 토큰화BottomTabBar링크 추가 버튼: 아이콘 색상 및 탭바 배경색 토큰화ScanButton: 배경색 토큰화SwipeableCardLink삭제 버튼: 아이콘/텍스트 색상 토큰화- scan result 계열 화면: 확인/저장/URL 접속 버튼 텍스트 및 surface 배경색 토큰화
- folder rename 모달: backdrop/sheet/저장 버튼 텍스트 색상 토큰화
- Kakao 로그인 버튼 텍스트: Kakao 토큰 참조로 변경
또한 중복 구현되어 있던 선택 원형 UI는 SelectionCircle 컴포넌트로 분리했습니다.
npx tsc --noEmit, npm run lint 통과 확인했습니다.
|
추가적으로 지금 커밋 메시지들이 기존 컨벤션 처럼 feat : 처럼 붙어있지 않습니다 |
확인 감사합니다. 말씀해주신 것처럼 모든 호출부에서 현재 저장 링크 데이터 모델이 이미 수정 내용은 아래와 같습니다.
const displayUrl = getFirstText(finalUrl, originalUrl) ?? 'URL 정보 없음';
const openUrl = normalizeLinkUrl(getFirstText(finalUrl, originalUrl)); |
kbh0218
force-pushed
the
feat/#23-link-card-redesign-external-browser
branch
from
35c96c0 to
9a96fad
Compare
적용 안되어있는것도 수정했습니다! |
…esign-external-browser # Conflicts: # app/(tabs)/(folder)/[id].tsx # components/ui/swipeable-card-link.tsx
|
변경 확인했습니다 수고하셨습니다 |
2 participants
Closes #23
개요
Figma에 정의된 새로운 링크카드 디자인을 앱 공통 링크카드 컴포넌트에 반영했습니다.
링크카드는 기존의 사이트명/요약 중심 표시에서 벗어나, 검사 결과 배지, URL 제목, URL 주소만 보여주도록 정리했습니다. 또한 링크카드를 누르면 앱 내부 화면이 아니라 저장된 URL을 외부 브라우저로 실행하도록 동작을 변경했습니다.
저장 데이터에
finalUrl이 있으면 이를 우선 사용하고, 없으면originalUrl,url순서로 fallback하도록 처리했습니다. 북마크 버튼과 더보기 버튼은 카드 클릭 이벤트와 분리하여, 버튼을 눌렀을 때 외부 브라우저가 열리지 않도록 했습니다.주요 구현 내용
CardLink레이아웃 및 스타일 개편safe,caution,danger상태를안전,주의,위험배지로 표시finalUrl→originalUrl→url순서로 적용안전,주의,위험상태 표시의 시각적 강조 개선파일별 역할
components/ui/card-link.tsx: 링크카드 UI 개편, 검사 결과 배지 표시, fallback 처리, 외부 브라우저 실행 로직 추가, 카드/배지 그림자 스타일 적용app/(tabs)/(home)/index.tsx: 홈 최근 저장 링크에서 새 링크카드 데이터 기준 적용app/(tabs)/(home)/saved-links.tsx: 저장한 링크 목록에서 새 링크카드 데이터 기준 적용app/(tabs)/(folder)/[id].tsx: 폴더 상세 링크 목록에서 새 링크카드 데이터 기준 및 외부 브라우저 실행 동작 적용app/(tabs)/(folder)/folder-add-url.tsx: 폴더 URL 추가 화면의 링크카드 표시 정보 및 선택 오버레이 스타일 수정app/(tabs)/(folder)/folder-url-select.tsx: 폴더 생성 URL 선택 화면의 링크카드 표시 정보 및 선택 오버레이 스타일 수정해결한 이슈 목록
finalUrl우선,originalUrlfallback 처리체크 사항
npx tsc --noEmit통과git diff --check통과Screenshots or Video
링크카드 캡쳐
