Skip to content

[DESIGN] 홈 및 폴더 화면 UI 크기 정리 #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kbh0218 merged 5 commits into from
May 18, 2026
Merged

[DESIGN] 홈 및 폴더 화면 UI 크기 정리 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
391e708
design: 홈 및 폴더 섹션 타이틀 크기 통일
kbh0218 May 16, 2026
68b153c
design: 홈 브랜드 로고 크기 조정
kbh0218 May 16, 2026
a95e00a
design: 폴더 화면 제목 위계 조정
kbh0218 May 16, 2026
437b144
fix: toast 문구 잘림 보정
kbh0218 May 16, 2026
3b553d7
fix: 폴더 상세 헤더 긴 이름 말줄임 처리
kbh0218 May 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions app/(tabs)/(folder)/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ export default function FolderDetailScreen() {
{/* 폴더명 + URL 추가 버튼 */}
<View style={styles.canvasHeaderWrapper}>
<View style={styles.canvasHeader}>
<Text style={styles.folderName}>{folderName}</Text>
<View style={styles.folderTitleGroup}>

@minsoo0506 minsoo0506 May 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

폴더명은 수정 모달에서 50자까지 입력 가능한데, 상세 화면 헤더의 folderTitleGroup/folderName에는 flexShrink, minWidth, numberOfLines 같은 폭 제한이 없습니다.

긴 폴더명일 때 오른쪽 URL 추가 버튼이 화면 밖으로 밀리거나 겹칠 수 있어서, 제목 영역에 flex: 1/minWidth: 0을 주고 folderName은 1줄 말줄임 처리하는 식의 방어가 필요해 보입니다...!

@kbh0218 kbh0218 May 17, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

반영했습니다!

긴 폴더명에서도 오른쪽 URL 추가 버튼이 밀리지 않도록 folderTitleGroup에 flex: 1, minWidth: 0을 추가했고, folderName은 numberOfLines={1} + ellipsizeMode="tail"로 한 줄 말줄임 처리했습니다.

추가로 제목 영역과 버튼 사이 간격 유지를 위해 canvasHeader에 gap도 넣었습니다.

아래 이미지와 같이 반영됐습니다!
image

<Text style={styles.folderTitleLabel}>현재 폴더</Text>
<Text style={styles.folderName} numberOfLines={1} ellipsizeMode="tail">
{folderName}
</Text>
</View>
<AddFolderButton label="URL 추가" onPress={handleAddUrl} />
</View>
<Toast
Expand Down Expand Up @@ -154,7 +159,7 @@ const styles = StyleSheet.create({
gap: 8,
},
headerTitle: {
...Typography.title,
...Typography.pageTitle,
color: Colors.brand.text,
flex: 1,
},
Expand All @@ -178,8 +183,19 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
paddingVertical: 4,
},
folderTitleGroup: {
flex: 1,
minWidth: 0,
gap: 4,
marginLeft: 10,
},
folderTitleLabel: {
...Typography.caption,
color: Colors.brand.textSecondary,
},
folderName: {
...Typography.title,
color: Colors.brand.text,
Expand Down
21 changes: 6 additions & 15 deletions app/(tabs)/(folder)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useRouter } from 'expo-router';
import { AddFolderButton } from '@/components/ui/add-folder-button';
import { FolderCard } from '@/components/ui/folder-card';
import { FolderContextMenu } from '@/components/ui/folder-context-menu';
import { SectionHeader } from '@/components/ui/section-header';
import { Colors, Typography } from '@/constants/theme';
import type { AnchorPosition } from '@/components/ui/folder-card';
import { useSavedLinks } from '@/context/saved-links-context';
Expand Down Expand Up @@ -97,10 +98,10 @@ export default function FolderScreen() {

{/* 폴더 캔버스 */}
<View style={styles.canvas}>
<View style={styles.canvasHeader}>
<Text style={styles.canvasTitle}>내 폴더</Text>
<AddFolderButton onPress={handleAddFolder} />
</View>
<SectionHeader
label="내 폴더"
rightSlot={<AddFolderButton onPress={handleAddFolder} />}
/>

{folders.length > 0 ? (
<View style={styles.grid}>
Expand Down Expand Up @@ -210,7 +211,7 @@ const styles = StyleSheet.create({
gap: 4,
},
title: {
...Typography.title,
...Typography.pageTitle,
color: Colors.brand.text,
},
subtitle: {
Expand All @@ -226,16 +227,6 @@ const styles = StyleSheet.create({
padding: 16,
gap: 16,
},
canvasHeader: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
canvasTitle: {
...Typography.title,
color: Colors.brand.text,
},

grid: {
flexDirection: 'row',
flexWrap: 'wrap',
Expand Down
4 changes: 2 additions & 2 deletions app/(tabs)/(home)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function HomeScreen() {
<View style={styles.wordmark}>
<IconSymbol
name="checkmark.shield.fill"
size={28}
size={30}
color={Colors.brand.primary}
/>
<Text style={styles.brandText}>LinClean</Text>
Expand Down Expand Up @@ -129,7 +129,7 @@ const styles = StyleSheet.create({
gap: 6,
},
brandText: {
...Typography.title,
...Typography.displayMedium,
color: Colors.brand.primary,
},

Expand Down
10 changes: 6 additions & 4 deletions components/ui/section-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import type { ReactNode } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Colors, Typography } from '@/constants/theme';

interface SectionHeaderProps {
label: string;
onViewAll?: () => void;
viewAllLabel?: string;
rightSlot?: ReactNode;
}

export function SectionHeader({ label, onViewAll, viewAllLabel = '전체보기' }: SectionHeaderProps) {
export function SectionHeader({ label, onViewAll, viewAllLabel = '전체보기', rightSlot }: SectionHeaderProps) {
return (
<View style={styles.container}>
<Text style={styles.label}>{label}</Text>
{onViewAll && (
{rightSlot ?? (onViewAll && (
<TouchableOpacity onPress={onViewAll} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Text style={styles.viewAll}>{viewAllLabel}</Text>
</TouchableOpacity>
)}
))}
</View>
);
}
Expand All @@ -27,7 +29,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
label: {
...Typography.section,
...Typography.sectionTitle,
color: Colors.brand.text,
},
viewAll: {
Expand Down
1 change: 1 addition & 0 deletions components/ui/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const styles = StyleSheet.create({
},
message: {
...Typography.summary,
lineHeight: 20,
fontWeight: '700',
color: Colors.brand.onPrimary,
},
Expand Down
4 changes: 4 additions & 0 deletions constants/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,9 @@ export const Fonts = {
// Font size tokens (from Figma Design System)
const fontSizeDisplay = 32;
const fontSizeDisplayMedium = 30;
const fontSizePageTitle = 24;
const fontSizeTitle = 22;
const fontSizeSectionTitle = 20;
const fontSizeSection = 18;
const fontSizeProfile = 17;
const fontSizeBody = 16;
Expand All @@ -151,7 +153,9 @@ const fontWeightRegular = '400' as const;
export const Typography = {
display: { fontSize: fontSizeDisplay, fontWeight: fontWeightBold },
displayMedium: { fontSize: fontSizeDisplayMedium, fontWeight: fontWeightBold },
pageTitle: { fontSize: fontSizePageTitle, fontWeight: fontWeightBold },
title: { fontSize: fontSizeTitle, fontWeight: fontWeightBold },
sectionTitle: { fontSize: fontSizeSectionTitle, fontWeight: fontWeightBold },
section: { fontSize: fontSizeSection, fontWeight: fontWeightBold },
profile: { fontSize: fontSizeProfile, fontWeight: fontWeightBold },
body: { fontSize: fontSizeBody, fontWeight: fontWeightRegular },
Expand Down
Loading