[DESIGN] 홈 및 폴더 화면 UI 크기 정리#35
Merged
Merged
Conversation
minsoo0506
reviewed
May 16, 2026
| <View style={styles.canvasHeaderWrapper}> | ||
| <View style={styles.canvasHeader}> | ||
| <Text style={styles.folderName}>{folderName}</Text> | ||
| <View style={styles.folderTitleGroup}> |
There was a problem hiding this comment.
폴더명은 수정 모달에서 50자까지 입력 가능한데, 상세 화면 헤더의 folderTitleGroup/folderName에는 flexShrink, minWidth, numberOfLines 같은 폭 제한이 없습니다.
긴 폴더명일 때 오른쪽 URL 추가 버튼이 화면 밖으로 밀리거나 겹칠 수 있어서, 제목 영역에 flex: 1/minWidth: 0을 주고 folderName은 1줄 말줄임 처리하는 식의 방어가 필요해 보입니다...!
Contributor
Author
There was a problem hiding this comment.
반영했습니다!
긴 폴더명에서도 오른쪽 URL 추가 버튼이 밀리지 않도록 folderTitleGroup에 flex: 1, minWidth: 0을 추가했고, folderName은 numberOfLines={1} + ellipsizeMode="tail"로 한 줄 말줄임 처리했습니다.
추가로 제목 영역과 버튼 사이 간격 유지를 위해 canvasHeader에 gap도 넣었습니다.
아래 이미지와 같이 반영됐습니다!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #34
개요
홈 화면과 폴더 화면의 디자인 변경을 하였습니다.
홈 화면의
보안 등급별 링크 현황,최근 저장한 링크영역과 폴더 화면의내 폴더타이틀 크기를 같은 타이포그래피 토큰으로 통일하여 화면 간 시각적 일관성을 개선했습니다.또한 홈 상단의 LinClean 브랜드 영역 크기를 조정하고, 폴더 상세 화면의 폴더 제목 위치와 제목 위계를 정리했습니다. 폴더 상세에서는 현재 보고 있는 폴더명이 제목임을 더 명확히 알 수 있도록 보조 라벨을 추가했습니다.
폴더 상세 화면의 toast 메시지 문구가 일부 기기에서 살짝 잘려 보이는 문제도 함께 보정했습니다.
노출 위치는 기존과 동일하게 유지하고, 텍스트 줄 높이만 조정해 표시 안정성을 개선했습니다.
변경 전 화면은, issue에 스크린샷 올려놨습니다!
주요 구현 내용
Typography.sectionTitle20px로 통일SectionHeader에 오른쪽 액션 슬롯을 추가해 폴더 화면에서도 공통 섹션 헤더 사용내 폴더타이틀을 홈 섹션 타이틀과 동일한 컴포넌트/토큰으로 렌더링현재 폴더보조 라벨 추가폴더,폴더 목록에Typography.pageTitle24px 토큰 적용lineHeight를 적용해 Android에서 한글 문구가 살짝 잘려 보이는 문제 보정파일별 역할
constants/theme.ts:Typography.sectionTitle,Typography.pageTitle타이포그래피 토큰 추가components/ui/section-header.tsx: 공통 섹션 헤더에rightSlot추가 및 섹션 타이틀 토큰 적용app/(tabs)/(home)/index.tsx: 홈 브랜드 아이콘 및 LinClean 텍스트 크기 조정app/(tabs)/(folder)/index.tsx:내 폴더타이틀을 공통SectionHeader로 변경, 페이지 제목 크기 조정app/(tabs)/(folder)/[id].tsx: 폴더 상세 제목 위치 조정, 보조 라벨 추가, 상단 제목 크기 조정components/ui/toast.tsx: toast 메시지 텍스트의lineHeight를 지정해 문구 표시 안정성 개선해결한 이슈 목록
보안 등급별 링크 현황영역의 제목/크기 확인 및 조정최근 저장한 링크영역의 제목/크기 확인 및 조정내 폴더글씨 크기를 홈 화면 섹션 타이틀과 통일체크 사항
npm run lint통과Screenshots or Video