[졸업 프로젝트] 작업 일지: 20.12.29

1. StrokedTypo 인자 받아서 처리하기.

이 작업이 요구하는 바는 다음과 같았다.

1. props로 stroke의 굵기, 색상 등을 받는다.
2. 이를 스타일에 적용한다.
3. 다른 props 또한 적용되어야 한다.

그래서 다음과 같은 코드로 수정했다.

function strokeStyle(width, color, fontColor) {
  return ({
    textShadow: `${width}px ${width}px ${color},
      ...
      -${width}px 0px ${color}`,
    color: fontColor,
  })
}

function StrokedTypo(props) {
  const { stroke = 2, strokeColor = "#4DACC3", color = "white", ...etc } = props

  return (
    <Typography style={strokeStyle(stroke, strokeColor, color)} {...etc} />
  )
}

스타일에 들어갈 오브젝트를 함수가 반환하게 하였다. 인자로 굵기, 색상 등을 전달하면, 해당 값이 적용된 스타일 오브젝트를 반환하여 적용하는 것이다.

 

2. 배경 박스 적용

기존에 index.js에서만 작업을 하다가 여러 페이지를 수정하게 되니까, 컴포넌트화할 부분들이 눈에 보였다. 우선적으로 배경 이미지를 적용하는 부분이 필요했다.

이 배경 이미지는 width, height가 100%여야 하고, 특정 이미지를 배경으로 가진다. 그래서 다음과 같이 구성하였다.

import {Box, withStyles} from "@material-ui/core";
import {bgImg} from "../images";

const BackgroundBox = withStyles((theme) => ({
  root: {
    backgroundImage: `url(${bgImg})`,
    width: "100%",
    height: "100%",
  },
}))(Box);


function App() {
  return (
    <BackgroundBox>
    	...
    </BackgroundBox>
  )
)