[Lunch Box] 8. 홈 화면

앞에서 설명했던 상단 탭과 하단탭 사이에 들어갈 내용을 보여주는 component는 총 5개이다. 그 중에서 기본적으로 설정된 component는 Home component이다. Home은 특별한 기능없이 샐랩에 관한 정보를 간략하게 보여준다 (물론 실제 샐랩의 정보는 아니다).

 

Home.js

import React,{Component} from 'react';
import myFireBase from '../../config/MyFireBase'
import { withStyles } from '@material-ui/core/styles';
const styles = () => ({
  homeTopLayout: {
    height: '45rem',
    textAlign: 'center',
    color: 'white',
    backgroundSize: 'cover'
  },
  homeTopLayoutImage: {
    width: '350px',
    '@media (max-width:960px)': {
      width: '200px',
    }
  }
});

// Storage from firebase
const storageRef = (new myFireBase).storageRef;
class Home extends Component {
   // Init
   constructor(props) {
    super(props);
    this.state = {
      imgSrcHomeSlide1: '',
      imgSrcHomeLogo:'',
      imgSrcHomeEvent1:'',
      imgSrcHomeEvent2:'',
      imgSrcHomeEvent3:'',
      imgSrcHomeEvent4:'',
    }
  }
  componentDidMount() {
    this.getImage();
  }
  // Get Image
  getImage () {
    storageRef.child('homeslide1.jpg').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeSlide1:url});
    });
    storageRef.child('homelogo.png').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeLogo:url});
    });
    storageRef.child('homeevent1.jpg').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeEvent1:url});
    });
    storageRef.child('homeevent2.jpg').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeEvent2:url});
    });
    storageRef.child('homeevent3.jpg').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeEvent3:url});
    });
    storageRef.child('homeevent4.jpg').getDownloadURL().then((url) => {
      this.setState({imgSrcHomeEvent4:url});
    });
  }
  render(){ 
    const { classes } = this.props;
    return (
      <div className="root">
        <div className={classes.homeTopLayout} style={{"background-image":'url('+ this.state.imgSrcHomeSlide1 + ')'}}>
          <img src={this.state.imgSrcHomeLogo} alt="homeLogo" className={classes.homeTopLayoutImage} style={{"margin-top":"2rem"}}/>
          <p className="lunchBox-textField-white-large" style={{"margin-top":"2rem","text-align":"center"}}>FRESH, FAST & DELICIOUS!</p>
          <p className="lunchBox-textField-white-title" style={{"margin-top":"1rem","text-align":"center"}}>Order and Delivery 010-1111-2222 / https://cafe.naver.com/sallab/</p>
          <button className="lunchBox-btn-round" style={{"margin-top":"2rem"}} >VIEW MENU</button>
        </div>
        <div style={{"height":"18rem", "text-align":"center","padding-top":"2rem","box-sizing":"border-box"}}>
          <p className="lunchBox-textField-black-title" >We are open from AM 9:00 to PM 6:00 on weekdays</p>
          <p className="lunchBox-textField-black-content" style={{"margin-top":"1rem"}}>Since 2011.1.1</p>
          <button className="lunchBox-btn-rec-solid" style={{"height":"3rem","width":"12rem", "margin-top":"2rem"}}>Follow @SELLAB</button>
        </div>
        <div style={{"height":"18rem", "text-align":"center", "background-color":"#EEEEEE", "padding-top":"2rem","box-sizing":"border-box"}}>
          <p className="lunchBox-textField-black-title" style={{"margin-top":"1rem"}}>We offer discounts on some menus We offer discounts on some menus </p>
          <p className="lunchBox-textField-black-content" style={{"margin-top":"1rem"}}>Menu 1, Menu 2, Menu 3, Menu 4</p>
         <button className="lunchBox-btn-round" style={{"margin-top":"2rem"}}>Order Menu</button>
        </div>
        <div>
          <img src={this.state.imgSrcHomeEvent1} alt="homeLogo" width="25%"/>
          <img src={this.state.imgSrcHomeEvent2} alt="homeLogo" width="25%" />
          <img src={this.state.imgSrcHomeEvent3} alt="homeLogo" width="25%" />
          <img src={this.state.imgSrcHomeEvent4} alt="homeLogo" width="25%"/>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Home);

 

Firebase Storage

이 프로젝트에서는 이미지를 Firebase Storage에 미리 저장하고 화면을 보여줄때 이미지를 Firebase에서 불러온다. Firebase Storage 어플리케이션 개발에 필요한 사진과 동영상 등의 파일을 저장하는 저장소 서비스다. 우선 Firebase Storage에 다음과 같이 필요한 이미지를 업로드한다.

 

Firebase Storage에 이미지를 업로드한 모습

Firebase storage에 저장된 파일을 사용하기 위해서는 reference를 생성해서 이용해야한다. 여기서 reference란 storage에 저장한 파일을 가리키는 객체로 포인터 역할을한다. Reference를 만드는 과정은 firebase에서 문서로 제공한다.

 

https://firebase.google.com/docs/storage/web/start#add-bucket-url

 

이때 reference 객체를 생성하기 위해서는 firebaseConfig의 고유의 값을 입력해야하는데 웹의 경우는 [Firebase 프로젝트 열기] - [프로젝트 메인 페이지에서 앱추가 클릭] - [웹앱 추가] - [추가한 웹앱 선택] - [웹앱 설정 클릭] - [Firebase SDK snippet 확인]를 거치면 고유의 값을 조회가능하다.

 

프로젝트에서는 reference 객체를 여러번 사용해야하기 때문에 다음과 같이 component를 생성하여 reference를 쉽게 사용할수 있도록 하였다. 자세한 내용은 보안상 지웠다. database 객체는 다음에 firebase database와 함께 설명하도록 하겠다.

 

MyFireBase.js

import firebase from 'firebase'
var firebaseConfig = {
  apiKey: "************************,
  authDomain: "************************",
  databaseURL: "************************,
  projectId: "************************",
  storageBucket: "************************",
  messagingSenderId: "************************",
  appId: "************************"
};
firebase.initializeApp(firebaseConfig);
class MyFireBase{
  constructor(){
   this.storageRef = firebase.storage().ref();
 this.database = firebase.database();
  }
}
export default MyFireBase;

Home.js에서는 myFireBase component를 생성하고 component 내부의 reference 객체를 storageRef라는 변수에 저장한다. reference 객체에서 getDownloadURL() 메소드를 호출하면 파일의 다운로드 URL을 가져올 수 있다. 여기서는 componentDidMount 함수에서 각 파일의 다운로드 URL을 state에 저장하도록 했다. state에 저장한 URL은 이미지 태그의 src에서 사용한다.