[Lunch Box] 7. 하단탭과 스타일 설정

main.js 의 마지막에는 Bottom이라는 모듈을 사용한다. 모든 화면에 고정으로 같은 하단탭을 보여주기 위함이다. 하단탭에는 별다른 기능이 웹 사이트에 대한 정보만 보여준다.

 

Bottom.js

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
const styles = () => ({
  mainBottom: {
    height: '400px',
    background: '#181a1e',
    paddingTop: '2.5rem',
    paddingRight: '11%',
    paddingLeft: '11%',
    '@media (max-width:960px)': {
      height: '550px'
    }
  },
  mainBottomTab: {
    height: '100%',
    width: '33%',
    float: 'left',
    '@media (max-width:960px)': {
      clear: "both",
      height: 'auto',
      width: '100%',
      marginBottom: '20px'
    }
  }
})
class Bottom extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.mainBottom}>
        <div>
          <div className={classes.mainBottomTab}>
            <p className="lunchBox-textField-white-content">ABOUT SELLAB</p>
            <p className="lunchBox-textField-darWhtie-content" style={{ "padding": "1rem" }}>This is about Sellab. This is about Sellab. This is about Sellab. This is about Sellab. This is about Sellab. This is about Sellab. This is about Sellab. This is about Sellab. </p>
          </div>
          <div className={classes.mainBottomTab}>
            <p className="lunchBox-textField-white-content">OPENING HOURS</p>
            <div className="lunchBox-textField-darWhtie-content" style={{ "padding": "1rem" }}>
              <p style={{ float: "left" }}>Monday</p><p style={{ float: "right" }}>9:00 AM - 6:00 PM</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Tuesday</p><p style={{ float: "right", marginTop: "0.3rem" }}>9:00 AM - 6:00 PM</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Wednesday</p><p style={{ float: "right", marginTop: "0.3rem" }}>9:00 AM - 6:00 PM</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Thursday</p><p style={{ float: "right", marginTop: "0.3rem" }}>9:00 AM - 6:00 PM</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Friday</p><p style={{ float: "right", marginTop: "0.3rem" }}>9:00 AM - 6:00 PM</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Saturday</p><p style={{ float: "right", marginTop: "0.3rem" }}>Closed</p>
              <p style={{ clear: "both", float: "left", marginTop: "0.3rem" }}>Sunday</p><p style={{ float: "right", marginTop: "0.3rem" }}>Closed</p>
            </div>
          </div>
          <div className={classes.mainBottomTab}>
            <p className="lunchBox-textField-white-content">CONNECT WITH US</p>
            <div className="lunchBox-textField-darWhtie-content" style={{ "padding": "1rem" }}>
              <div>Phone<br />010-1111-2222</div><br />
              <div>Naver Cafe<br />https://cafe.naver.com/sallab/</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Bottom);

 

Material UI styles

Main.js에서는 설명하지 않았지만 프로젝트에서는 스타일을 설정할때 css 파일 보다는 Material UI의 styles 모듈을 주로 이용하였다. 이 모듈을 사용하면 여러가지 장점이 있는데 아직까지는 이해가 잘 안되서 정확히 설명하기가 어렵다. 지금 느끼는 차이는 따로 css 파일을 만들지 않고 js에다가 바로 스타일을 지정한다는 점이다. styles 모듈을 이용하는 방법은 매우 다양한데 이 프로젝트에서는 withStyles만 이용하였다. 

 

https://material-ui.com/styles/basics/

 

스타일이 적용을 적용하기 위해서는 styles라는 함수를 정의해야한다. 이 함수는 단순히 객체를 반환하는 함수이다. 함수가 아니라 객체로 정의해도 상관없다. 함수(또는 객체)는 설정하고 싶은 클래스 이름과 각 클래스에서 설정하고 싶은 스타일 정보를 담고 있다.

 

여기서 정의한 함수는 마지막에 withStyles라는 함수에 인자로 전달하고 스타일을 적용할 component와 함께 export해야한다. 이렇게 하면 해당 component의 props에 클래스 이름을 전달하고 각 클래스 이름에 따른 스타일 정보도 component에 적용되도록 전달한다. 따라서 위의 코드와 같이 component 내의 태그에 props로 받아온 클래스 이름을 설정해야한다.