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

1. Typography에 테두리 추가하기

오늘 작업의 반은 이거인 것 같다.

위와 같은 배경이 있는 글자를 넣기 위해 여러가지 고생을 했다.
고급진 기존 방식이 있나 했지만 react native에만 있어서 그냥 단순무식하게 처리했다.

const width = 2;
const color = "#4DACC3";

const StrokedTypo = withStyles((theme) => ({
  root: {
    textShadow: `${width}px ${width}px ${color},
      -${width}px -${width}px ${color},
      -${width}px ${width}px ${color},
      ${width}px -${width}px ${color},
      0px ${width}px ${color},
      0px -${width}px ${color},
      ${width}px 0px ${color},
      -${width}px 0px ${color}`
  },
}))(Typography);

Stack overflow에서 찾은 방법인데, text-shadow를 8방향으로 주는 것이다.
앞으로 width와 color를 props로 받아서 처리할 수 있도록 더 연구를 해야할 것 같다.

 

2. 이미지 로드

참고로 리액트와 Material-UI에는 이미지에 관련된 컴포넌트가 없다. 그냥 <img> 태그로 넣어야 한다.
물론, 이게 안 좋은 방법은 아니지만 신기한 패키지를 하나 찾았다.

www.npmjs.com/package/material-ui-image

화면이 로드될 때, 이미지를 동적으로 불러온다. 즉, 이미지를 로드한 다음에 화면이 보여지는게 아니라,
화면이 보여진 다음에 이미지가 있는 자리에 로딩 표시가 뜬다. 로드가 완료되면, 해당 자리에 이미지가 뜬다.

사실 당장 저 버튼을 만들 때는 필요가 없지만 혹시 몰라 일단 설치했다. 나중에 상세 화면을 만들 때 쓸 수도 있을 것 같다.