앱개발종합반 4주차 숙제(스파르타)

솔직히 말해서 뭔가 알고 하고 있는것 같다는 생각이 들지 않는다. 

하지만 평생 소장이라는 소식을 들었다. 

그래서 희망을 느낀다. 

일단 웹개발부터 마스터를 한다음에

그 때부터 다시 앱에 다시 도전해야겠다. 평생 소장이라니 

정말 정말 감사합니다 ㅠㅠ 

 

likepage

 

import React,{useState, useEffect} from 'react';

import {ScrollView, Text, StyleSheet} from 'react-native';

import LikeCard from '../components/LikeCard';

import Loading from '../components/Loading';

import Constants from 'expo-constants';

import {firebase_db} from "../firebaseConfig"

export default function LikePage({navigation,route}){

   

    const [tip, setTip] = useState([])

    const [ready,setReady] = useState(true)

   

    useEffect(()=>{

        navigation.setOptions({

            title:'꿀팁 찜'

        })

        const user_id = Constants.installationId;

        firebase_db.ref('/like/'+user_id).once('value').then((snapshot) => {

            console.log("파이어베이스에서 데이터 가져왔습니다!!")

            let tip = snapshot.val();

            console.log(tip)

            if(tip.length > 0){

                setTip(tip)

                setReady(false)

            }

           

        })

    },[])

    const reload = () =>{

        const user_id = Constants.installationId;

        firebase_db.ref('/like/'+user_id).once('value').then((snapshot) => {

            if(snapshot.exists()){

                let tip = snapshot.val();

                let tip_list = Object.values(tip)

                setTip(tip_list)

            } else {

                setReady(true)

                setTip([])

            }

        })

    }

    return ready ? <Loading/> : (

        <ScrollView style={styles.container}>

           {

               tip.map((content,i)=>{

                   return(<LikeCard key={i} content={content} navigation={navigation}/>)

               })

           }

        </ScrollView>

    )

}

const styles = StyleSheet.create({

    container:{

        backgroundColor:"#fff"

    }

})

 

 

likecard

 

import React from 'react';

import {View, Image, Text, StyleSheet,TouchableOpacity, Alert} from 'react-native'

import {firebase_db} from "../firebaseConfig"

import Constants from 'expo-constants';

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용

export default function LikeCard({content,navigation}){

    const detail = () => {

        navigation.navigate('DetailPage',{idx:content.idx})

    }

    const remove = () => {

        const user_id = Constants.installationId;

        firebase_db.ref('/like/'+user_id+'/'+content.idx).remove().then(function(){

            Alert.alert("삭제 완료");

            // navigation.navigate('LikePage')

            reload()

        })

    }

    return(

        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용

        <View style={styles.card}>

            <Image style={styles.cardImage} source={{uri:content.image}}/>

            <View style={styles.cardText}>

                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>

                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>

                <Text style={styles.cardDate}>{content.date}</Text>

               

                <View style={styles.buttonGroup}>

                    <TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>

                    <TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>

             

                </View>

            </View>

        </View>

    )

}

const styles = StyleSheet.create({

   

    card:{

      flex:1,

      flexDirection:"row",

      margin:10,

      borderBottomWidth:0.5,

      borderBottomColor:"#eee",

      paddingBottom:10

    },

    cardImage: {

      flex:1,

      width:100,

      height:100,

      borderRadius:10,

    },

    cardText: {

      flex:2,

      flexDirection:"column",

      marginLeft:10,

    },

    cardTitle: {

      fontSize:20,

      fontWeight:"700"

    },

    cardDesc: {

      fontSize:15

    },

    cardDate: {

      fontSize:10,

      color:"#A6A6A6",

    },

    buttonGroup: {

        flexDirection:"row",

    },

    button:{

        width:90,

        marginTop:20,

        marginRight:10,

        marginLeft:10,

        padding:10,

        borderWidth:1,

        borderColor:'deeppink',

        borderRadius:7

    },

    buttonText:{

        color:'deeppink',

        textAlign:'center'

    }

});