|
|
@@ -1,137 +0,0 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
-import {
|
|
|
- View,
|
|
|
- Text,
|
|
|
- TextInput,
|
|
|
- TouchableOpacity,
|
|
|
- FlatList,
|
|
|
- StyleSheet,
|
|
|
-} from 'react-native';
|
|
|
-import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
|
-import { useRouter } from 'expo-router';
|
|
|
-
|
|
|
-interface Song {
|
|
|
- id: string;
|
|
|
- title: string;
|
|
|
- artist: string;
|
|
|
-}
|
|
|
-
|
|
|
-const MOCK_SONGS: Song[] = [
|
|
|
- { id: '1234', title: '좋은 날', artist: '아이유' },
|
|
|
- { id: '5678', title: '취중진담', artist: '김동률' },
|
|
|
- { id: '9101', title: 'LOVE DIVE', artist: 'IVE' },
|
|
|
- { id: '1121', title: 'Permission to Dance', artist: 'BTS' },
|
|
|
-];
|
|
|
-
|
|
|
-export default function MainScreen() {
|
|
|
- const [keyword, setKeyword] = useState('');
|
|
|
- const [results, setResults] = useState<Song[]>([]);
|
|
|
- const router = useRouter();
|
|
|
-
|
|
|
- const handleSearch = () => {
|
|
|
- const filtered = MOCK_SONGS.filter(
|
|
|
- song =>
|
|
|
- song.title.includes(keyword) ||
|
|
|
- song.artist.includes(keyword)
|
|
|
- );
|
|
|
- setResults(filtered);
|
|
|
- };
|
|
|
-
|
|
|
- const handleAddToFavorites = async (song: Song) => {
|
|
|
- const stored = await AsyncStorage.getItem('favorites');
|
|
|
- const parsed = stored ? JSON.parse(stored) : [];
|
|
|
- await AsyncStorage.setItem('favorites', JSON.stringify([...parsed, song]));
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <View style={styles.container}>
|
|
|
- <View style={styles.navbar}>
|
|
|
- <TouchableOpacity onPress={() => {}}>
|
|
|
- <Text style={styles.icon}>👤</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- <TouchableOpacity onPress={() => {}}>
|
|
|
- <Text style={styles.icon}>⭐️</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- <TouchableOpacity onPress={() => {}}>
|
|
|
- <Text style={styles.icon}>⚙️</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* 타이틀 */}
|
|
|
- <Text style={styles.title}>Sing Song</Text>
|
|
|
-
|
|
|
- {/* 검색 영역 */}
|
|
|
- <TextInput
|
|
|
- placeholder="제목 또는 가수를 입력하세요"
|
|
|
- value={keyword}
|
|
|
- onChangeText={setKeyword}
|
|
|
- style={styles.input}
|
|
|
- />
|
|
|
- <TouchableOpacity onPress={handleSearch} style={styles.searchButton}>
|
|
|
- <Text style={styles.searchText}>검색</Text>
|
|
|
- </TouchableOpacity>
|
|
|
-
|
|
|
- {/* 검색 결과 리스트 */}
|
|
|
- <FlatList
|
|
|
- data={results}
|
|
|
- keyExtractor={(item) => item.id}
|
|
|
- renderItem={({ item }) => (
|
|
|
- <TouchableOpacity onPress={() => handleAddToFavorites(item)}>
|
|
|
- <View style={styles.item}>
|
|
|
- <Text>{item.id} - {item.title} ({item.artist})</Text>
|
|
|
- </View>
|
|
|
- </TouchableOpacity>
|
|
|
- )}
|
|
|
- ListEmptyComponent={<Text>검색 결과가 없습니다.</Text>}
|
|
|
- />
|
|
|
- </View>
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-const styles = StyleSheet.create({
|
|
|
- container: {
|
|
|
- flex: 1,
|
|
|
- padding: 20,
|
|
|
- backgroundColor: '#fff',
|
|
|
- },
|
|
|
- navbar: {
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'flex-end',
|
|
|
- gap: 16,
|
|
|
- marginBottom: 8,
|
|
|
- },
|
|
|
- icon: {
|
|
|
- fontSize: 20,
|
|
|
- },
|
|
|
- title: {
|
|
|
- fontSize: 24,
|
|
|
- fontWeight: 'bold',
|
|
|
- marginBottom: 16,
|
|
|
- },
|
|
|
- settings: {
|
|
|
- fontSize: 20,
|
|
|
- },
|
|
|
- input: {
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: '#ccc',
|
|
|
- borderRadius: 8,
|
|
|
- padding: 8,
|
|
|
- marginBottom: 10,
|
|
|
- },
|
|
|
- searchButton: {
|
|
|
- backgroundColor: '#007AFF',
|
|
|
- padding: 10,
|
|
|
- borderRadius: 8,
|
|
|
- alignItems: 'center',
|
|
|
- marginBottom: 16,
|
|
|
- },
|
|
|
- searchText: {
|
|
|
- color: '#fff',
|
|
|
- fontWeight: 'bold',
|
|
|
- },
|
|
|
- item: {
|
|
|
- padding: 12,
|
|
|
- borderBottomWidth: 1,
|
|
|
- borderBottomColor: '#eee',
|
|
|
- },
|
|
|
-});
|
jh-mac