[React]뽀모도로 타이머 개발 2일차 - 타이틀 화면

뽀모도로 타이머 로고

시작이 반 2. 타이틀 화면 개발하기 - 1

우선 타이틀 화면을 개발하겠습니다. 사실 타이머를 생성하기 위한 모든 사전 작업(시간 설정 등)을 여기서 진행해야 하므로 이 화면이 완료되면 80%는 끝났다고 봐도 무방합니다. 우선 완성 된 화면 부터 보여드리겠습니다.

뽀모도로 타이틀 화면 - 데스크탑

나름 스마트폰으로도 이용할 수 있도록 반응형으로 제작하였습니다. 아래는 모바일 화면입니다

뽀모도로 타이틀 화면 - 모바일

일단 제목을 크게 써서 보여주고, 가운데에는 셀렉트박스(selectbox)를 이용해서 집중 시간, 짧은 휴식시간, 긴 휴식시간을 설정할 수 있도록 화면을 구성하고, 아래 스타트버튼을 누르면 지정한 시간에 맞춰 타이머를 설정하고 실행하는 구조입니다.

배경화면 및 컨텐츠 영역 설정하기.

const [bgColor, setBgColor] = useState("bg-red-500")

  useEffect(() => {
    document.body.classList.add(bgColor,'text-white');

    return () => {
      document.body.classList.remove(bgColor,'text-white');
    };
  }, [bgColor]);

TailwindCSS를 이용하기 때문에 클래스를 붙여서 CSS를 설정할 수 있는데요. 저는 상황에 따라 배경색을 변경할 수 있게 useState에 배경색을 지정하는 클래스명을 설정하고, useEffect를 이용해 상황에 맞춰 body에 클래스명을 추가할 수 있도록 설정했습니다 지정한 클래스명은 'bg-red-500'과 'text-white'인데 bg는 배경 관련, text는 텍스트 관련 설정을 지정하는 클래스입니다. 자세한 색상표는 아래 링크를 참조하세요.

https://tailwindcss.com/docs/customizing-colors

Customizing Colors - Tailwind CSS

저는 컨텐츠를 화면의 중앙에 위치시키기 위해 아래와 같은 div 틀을 만들었습니다.

<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-screen">
</div>

클래스명으로 CSS를 지정했는데, 하나씩 설명을 해 보자면

• fixed = position:fixed; 요소의 위치를 보이는 화면 기준으로 고정시킵니다. 스크롤이 있는 페이지의 경우 스크롤을 내려도 고정됩니다.
• top-1/2 = top:50%; 요소의 위치를 지정합니다. 보이는 화면 기준으로 위에서 50%로 요소를 위치시킵니다
• left-1/2 = left:50%; 마찬가지로 요소의 위치를 지정합니다. 이번에는 왼쪽에서 50%로 요소를 위치시킵니다
• -translate-x-1/2 = transform:translateX(-50%); 요소의 가로 위치를 수정하는 CSS로, 이번에는 요소의 왼쪽을 기준으로 잡고 요소 너비의 50% 만큼 기준점 방향으로 이동합니다.
• -translate-y-1/2 = transfrom:translateY(-50%); 요소의 세로 위치를 수정하는 CSS로, 요소의 위를 기준으로 잡고 요소 높이의 50% 만큼 기준점 방향으로 이동합니다. 자세한 내용은 아래에 설명하겠습니다.
• max-w-screen = max-width:100vw; 요소의 최대 너비를 지정하는 CSS입니다. 개발을 진행하다가 화면을 넘기지 못하도록 최대 크기를 제한하였습니다.

transform:translate를 설정한 이유.

웹페이지에서 top, bottom, left, right를 이용해 위치를 지정할 때 모든 요소들의 기준점은 정중앙이 아니라 한쪽 귀퉁이를 말합니다, 따라서 50%를 쓰더라도 아래 이미지와 같이 정중앙에 위치하지 않게 됩니다.

이 때 transform:translate를 이용해서 요소를 다시 이동시키는데요, 이때의 기준점은 무조건 요소의 좌상단에 위치하게 됩니다. 여기서 더 오른쪽/아래쪽으로 가려면 양수를, 왼쪽/위쪽으로 가려면 음수를 지정하면 됩니다. 제 경우엔 top:50%, left:50%로 위치를 지정했기 때문에, 요소 너비의 절반만큼 왼쪽, 요소 높이의 절반만큼 위쪽으로 이동시키면 정확히 정중앙에 위치시킬 수 있게 됩니다.

다음 시간에는 내부 컨텐츠 (타이틀, 각종 설정, 시작 버튼)를 만들어보도록 하겠습니다.

이전 글 보기

뽀모도로 타이머 - 생애 첫 사이드프로젝트

[React]뽀모도로 타이머 개발 시작 1일차 - 준비하기