Skip to content

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

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 7 commits into from
May 29, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
135063b
design: 체크아이콘이 맨앞에 오도록 수정
kbh0218 May 25, 2026
4e2b9e6
design: 체크아이콘 레이어 분리
kbh0218 May 25, 2026
a0369bc
design: 체크아이콘 잔상 제거
kbh0218 May 25, 2026
00b37c2
Revert "design: 체크아이콘 잔상 제거"
kbh0218 May 25, 2026
6a562f7
refactor: 선택 링크 카드 컴포넌트 분리
kbh0218 May 26, 2026
838ac6e
refactor: 체크마크 중복 레이어 스타일 제거
kbh0218 May 26, 2026
2b8216e
design: URL 선택 체크 UI 충돌 해결
kbh0218 May 29, 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
56 changes: 3 additions & 53 deletions app/(tabs)/(folder)/folder-add-url.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,12 @@ import {
import { router, Stack, useLocalSearchParams } from 'expo-router';

import { Button } from '@/components/ui/button';
import { CardLink } from '@/components/ui/card-link';
import { SelectionCircle } from '@/components/ui/selection-circle';
import { SelectableLinkCard } from '@/components/ui/selectable-link-card';
import { Colors, Typography } from '@/constants/theme';
import { getFolderErrorMessage, useFolders } from '@/context/folders-context';
import { useSavedLinks, type SavedLink } from '@/context/saved-links-context';
import { useSavedLinks } from '@/context/saved-links-context';
import { showAlert } from '@/utils/guarded-alert';

// ─── Selectable card row ──────────────────────────────────────────────────────

interface SelectableCardProps {
link: SavedLink;
selected: boolean;
onToggle: (id: number) => void;
}

function SelectableCard({ link, selected, onToggle }: SelectableCardProps) {
return (
<View style={styles.cardRow}>
<CardLink
verdict={link.verdict}
title={link.title}
originalUrl={link.originalUrl}
finalUrl={link.finalUrl}
bookmarked={link.isBookmarked}
icon={false}
onPress={() => onToggle(link.id)}
/>
{selected && (
<View style={styles.selectedOverlay} pointerEvents="none" />
)}
<View style={styles.checkOverlay} pointerEvents="none">
<SelectionCircle selected={selected} />
</View>
</View>
);
}

// ─── Screen ───────────────────────────────────────────────────────────────────

export default function FolderAddUrlScreen() {
Expand Down Expand Up @@ -135,7 +104,7 @@ export default function FolderAddUrlScreen() {
data={uncategorizedLinks}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<SelectableCard
<SelectableLinkCard
link={item}
selected={selectedIds.has(item.id)}
onToggle={toggleSelect}
Expand Down Expand Up @@ -219,25 +188,6 @@ const styles = StyleSheet.create({
height: 8,
},

cardRow: {
position: 'relative',
borderRadius: 22,
overflow: 'hidden',
},
selectedOverlay: {
position: 'absolute',
inset: 0,
borderRadius: 22,
backgroundColor: Colors.brand.overlaySelected,
},
checkOverlay: {
position: 'absolute',
right: 16,
top: 0,
bottom: 0,
justifyContent: 'center',
},

emptyState: {
flex: 1,
alignItems: 'center',
Expand Down
58 changes: 3 additions & 55 deletions app/(tabs)/(folder)/folder-url-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,12 @@ import {
import { router, Stack, useLocalSearchParams } from 'expo-router';

import { Button } from '@/components/ui/button';
import { CardLink } from '@/components/ui/card-link';
import { SelectionCircle } from '@/components/ui/selection-circle';
import { SelectableLinkCard } from '@/components/ui/selectable-link-card';
import { Colors, Typography } from '@/constants/theme';
import { getFolderErrorMessage, useFolders } from '@/context/folders-context';
import { useSavedLinks, type SavedLink } from '@/context/saved-links-context';
import { useSavedLinks } from '@/context/saved-links-context';
import { showAlert } from '@/utils/guarded-alert';

// ─── Selectable card row ──────────────────────────────────────────────────────

interface SelectableCardProps {
link: SavedLink;
selected: boolean;
onToggle: (id: number) => void;
}

function SelectableCard({ link, selected, onToggle }: SelectableCardProps) {
return (
<View style={styles.cardRow}>
<CardLink
verdict={link.verdict}
title={link.title}
originalUrl={link.originalUrl}
finalUrl={link.finalUrl}
bookmarked={link.isBookmarked}
icon={false}
onPress={() => onToggle(link.id)}
/>
{/* 선택 시 카드 위에 어두운 오버레이 */}
{selected && (
<View style={styles.selectedOverlay} pointerEvents="none" />
)}
<View style={styles.checkOverlay} pointerEvents="none">
<SelectionCircle selected={selected} />
</View>
</View>
);
}

// ─── Screen ───────────────────────────────────────────────────────────────────

export default function FolderUrlSelectScreen() {
Expand Down Expand Up @@ -139,7 +107,7 @@ export default function FolderUrlSelectScreen() {
data={links}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<SelectableCard
<SelectableLinkCard
link={item}
selected={selectedIds.has(item.id)}
onToggle={toggleSelect}
Expand Down Expand Up @@ -226,26 +194,6 @@ const styles = StyleSheet.create({
height: 8,
},

// Selectable card
cardRow: {
position: 'relative',
borderRadius: 22,
overflow: 'hidden',
},
selectedOverlay: {
position: 'absolute',
inset: 0,
borderRadius: 22,
backgroundColor: Colors.brand.overlaySelected,
},
checkOverlay: {
position: 'absolute',
right: 16,
top: 0,
bottom: 0,
justifyContent: 'center',
},

emptyState: {
flex: 1,
alignItems: 'center',
Expand Down
62 changes: 62 additions & 0 deletions components/ui/selectable-link-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { StyleSheet, View } from 'react-native';

import { Colors } from '@/constants/theme';
import type { SavedLink } from '@/context/saved-links-context';
import { CardLink } from './card-link';
import { SelectionCircle } from './selection-circle';

interface SelectableLinkCardProps {
link: SavedLink;
selected: boolean;
onToggle: (id: number) => void;
}

export function SelectableLinkCard({ link, selected, onToggle }: SelectableLinkCardProps) {
return (
<View style={styles.selectableCard}>
<View style={styles.cardLayer}>
<CardLink
verdict={link.verdict}
title={link.title}
originalUrl={link.originalUrl}
finalUrl={link.finalUrl}
bookmarked={link.isBookmarked}
icon={false}
onPress={() => onToggle(link.id)}
/>
{selected && (
<View style={styles.selectedOverlay} pointerEvents="none" />
)}
</View>
<View style={styles.checkOverlay} pointerEvents="none">
<SelectionCircle selected={selected} />
</View>
</View>
);
}

const styles = StyleSheet.create({
selectableCard: {
position: 'relative',
},
cardLayer: {
position: 'relative',
borderRadius: 22,
overflow: 'hidden',
},
selectedOverlay: {
position: 'absolute',
inset: 0,
borderRadius: 22,
backgroundColor: Colors.brand.overlaySelected,
},
checkOverlay: {
position: 'absolute',
right: 16,
top: 0,
bottom: 0,
justifyContent: 'center',
zIndex: 10,
elevation: 10,
},
});
1 change: 1 addition & 0 deletions components/ui/selection-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const styles = StyleSheet.create({
borderRadius: CIRCLE_SIZE / 2,
alignItems: 'center',
justifyContent: 'center',
overflow: 'visible',
},
unselected: {
backgroundColor: Colors.brand.surface,
Expand Down
Loading