디자인 회의용 폰트 셀렉터

FontSelector.js

import { FormControl } from 'material-ui/Form';

import { MenuItem } from 'material-ui/Menu';
import Select from 'material-ui/Select';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import TextField from 'material-ui/TextField';


const ENG_FONTS = [
  'Carme',
  'Ubuntu',
  'Duru Sans',
  'Encode Sans',
  'Hind Madurai',
  'Maven Pro',
  'Mukta Malar',
  'Pontano Sans',
  'Quicksand',
  'Raleway',
]

const KOR_FONTS = [
  { name: 'Hanna', url: 'http://fonts.googleapis.com/earlyaccess/hanna.css' },
  { name: 'Jeju Gothic', url: 'http://fonts.googleapis.com/earlyaccess/jejugothic.css' },
  { name: 'Jeju Hallasan', url: 'http://fonts.googleapis.com/earlyaccess/jejuhallasan.css' },
  { name: 'Jeju Myungjo', url: 'http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css' },
  { name: 'KoPub Batang', url: 'http://fonts.googleapis.com/earlyaccess/kopubbatang' } ,
  { name: 'Nanum Brush Script', url: 'http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' },
  { name: 'Nanum Gothic', url: 'http://fonts.googleapis.com/earlyaccess/nanumgothic.css' },
  { name: 'Nanum Gothic Coding', url: 'http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css' },
  { name: 'Nanum Myeongjo', url: 'http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css' },
  { name: 'Nanum Pen Script', url: 'http://fonts.googleapis.com/earlyaccess/nanumpenscript.css' },
  { name: 'Noto Sans KR', url: 'http://fonts.googleapis.com/earlyaccess/notosanskr.css' },
];


const styles = {
  container: {
    position: 'fixed',
    bottom: '40px',
    right: '20px',
    'z-index': 50,
    background: 'white',
    padding: '10px',
  }
}

export const FontSelector = withStyles(styles)(
  class FontSelectorUI extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        engFont: null,
        korFontIndex: null,
      };
    }


    updateHtmlStyle = () => {
      const { engFont, korFontIndex } = this.state;
      let fontStyle = "";
      if (engFont && korFontIndex) {
        fontStyle = `font-family: '${engFont}', '${KOR_FONTS[korFontIndex].name}'`;
      } else if (engFont) {
        fontStyle = `font-family: '${engFont}'`;
      } else if (korFontIndex) {
        fontStyle = `font-family: '${KOR_FONTS[korFontIndex].name}'`;
      }
      document.getElementsByTagName('html')[0].setAttribute('style', fontStyle);
    }

    render() {
      const { classes } = this.props;
      const { engFont, korFontIndex } = this.state;      

      return (
        <div className={classes.container}>
          {
            engFont && (
              <link
                rel="stylesheet"
                type="text/css"
                href={`http://fonts.googleapis.com/css?family=${engFont.replace(/ /g, '+')}`}
              />
            )
          }
          {
            korFontIndex && (
              <link
                rel="stylesheet"
                type="text/css"
                href={KOR_FONTS[korFontIndex].url}
              />
            )
          }
          <FormControl>
            <Select
              value={engFont}
              onChange={e => this.setState({ engFont: e.target.value }, this.updateHtmlStyle)}
              input={<Input id="engFont" />}
            >
              <MenuItem value={null}>None</MenuItem>
              {
                ENG_FONTS.map((name, idx) => (
                  <MenuItem value={name} key={name}>{name}</MenuItem>
                ))
              }
            </Select>
            <Select
              value={korFontIndex}
              onChange={e => this.setState({ korFontIndex: e.target.value }, this.updateHtmlStyle)}
              input={<Input id="korFont" />}
            >
              <MenuItem value={null}>None</MenuItem>
              {
                KOR_FONTS.map(({ name }, idx) => (
                  <MenuItem value={idx} key={name}>{name}</MenuItem>
                ))
              }
            </Select>
          </FormControl>
        </div>
      );
    }
  },
);