🍅 REACT 뽀모도로 타이머 만들기 (3) 🍅

  먼저 돌아가는 바늘을 제외한 Pomodoro 페이지를 만들었다.

그러기 위해선 Background 컴포넌트와 TomatoBtn 컴포넌트가 필요했다.

---

Background 컴포넌트

// Background.js

import { useNavigate } from "react-router-dom";
import "./Background.css";

export default function Background(props) { 
    let navigate = useNavigate();
    let goToMenu = () => {
        navigate('/'); // "/" 경로(홈)로 이동
    }
    return (
        <>
        <h1 onClick={goToMenu}>🍅{props.title}🍅</h1>
        </>
    );
}

• 배경색을 지정하고 클릭하면 홈으로 돌아가는 제목을 표시하는 컴포넌트이다. 
• export default를 사용해 다른 파일에서 사용할 수 있게 한다. 
• useNavigate()를 호출하여 navigate 함수를 생성했다. 이를 통해 페이지 이동이 가능해진다.
• {props.title}을 사용하여 title 값이 동적으로 표시된다.  (컴포넌트의 props를 활용하여 title 값을 변경 가능)

// Background.css

@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
    text-align: center;
    font-family: 'TmoneyRoundWindExtraBold';
    font-weight: bold;
    color: #F35D50;
    font-size: 80px;
    text-shadow: 0px 0px 15px #CF9590;
    cursor: pointer;
}
* {
    background-color: #D6F4D8;
}

• 피그마에서는 Baloo 폰트를 사용했는데 이 폰트가 이상하게 적용이 안되어서 다른 폰트로 대체했다...

---

TomatoBtn 컴포넌트

// TomatoBtn.js

import { useState } from "react";
import "./TomatoBtn.css";
import pic1 from "../Pic/Tomato.png";
import pic11 from "../Pic/Tomatoo.png";

export default function TomatoBtn(props) {
    const [isActive, setIsActive] = useState(false);
    
    const MouseOn = () => {
        setIsActive(true);
    }
    const MouseOff = () => {
        setIsActive(false);
    }

    return (
        <div 
            className="Wrap" 
            onClick={props.onClick} 
            onMouseEnter={MouseOn}
            onMouseLeave={MouseOff}
            role="button"
            tabIndex="0"
        >
            <img src={isActive ? pic11 : pic1} alt="" className="Tomato" />
            <p>{props.name}</p>
        </div>
    );
}

• isActive 변수를 통해 이미지를 이용한 버튼에 마우스가 올라와 있는지의 여부를 저장한다. 초기값은 false로 해두어 마우스가 올라와 있으면 true를, 올라와있지 않으면 false를 저장한다. 
• <div>가 버튼 역할을 한다. 접근성 향상을 위해 role="button"을 추가했으며, Tap 키로 이동하고 Enter나 Space로 클릭할 수 있도록 tabIndex="0"를 추가했다. (그런데 왜 안 될까...)
• isActive가 true일 때는 pic11이, false일 때는 pic1이 표시된다. pic11과 pic1는 토마토 꼭지색만 다른 같은 이미지이다.
• props.name을 사용하여 버튼의 이름을 동적으로 설정 가능하다.

// TomatoBtn.css

@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
p {
    font-family: 'TmoneyRoundWindExtraBold';
    color: #FFF674;
    font-size: 40px;
    margin: 0 0 35px;
    background-color: transparent;
    text-align: center;
    cursor: default;
    position: absolute;
    top: 43%;
    transform: translateY(-50%);
    cursor: pointer;
}

.Tomato {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 343px;
    height: 153px;
    margin: 0 0 35px 0;
}
.Wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    cursor: pointer;
}

• p의 position: absolute;를 통해 부모 요소를 기준으로 절대 위치를 지정하고, 버튼 전체 컨테이너의 Wrap 클래스의 position: relative;를 통해 자식 요소의 absolute 위치를 조정할 기준이 된다.

---

  이후 Pomodoro 컴포넌트를 만들었다.

Pomodoro 컴포넌트

// Pomodoro.js

import { useNavigate } from "react-router-dom";
import Background from "../BackGround/Background";
import TomatoBtn from "../TomatoBtn/TomatoBtn";
import ClockPomo from "./ClockPomo";
import "./Pomodoro.css";
import pic1 from "../Pic/TomatoClock.png";

export default function Pomodoro() {
    const navigate = useNavigate();
    const goToStudy = () => {
        navigate('/study');
    }
    const goToTodo = () => {
        navigate('/todolist');
    }
    const goToSetting = () => {
        navigate('/setting');
    }

    return (
        <>
        <Background title='POMODORO' />
        <div className="main">
            <>
                <img src={pic1} alt='picture1' className="img1"/>
                <ClockPomo />
            </>
            <div className="Root">
                <TomatoBtn name='START' onClick={goToStudy} />
                <TomatoBtn name='TODO' onClick={goToTodo} />
                <TomatoBtn name='SETTING' onClick={goToSetting} />
            </div>
        </div>
        </>
    );
}

• useNavigate()를 호출하여 navigate 함수를 생성하고 각 경로로 이동할 수 있게 한다.  
• 각 페이지로 이동하는 함수를 정의하여 TomatoBtn의 onClick으로 전달했다. 

// Pomdoro.css

.Root {
    flex-direction: column;
    margin: 0 0 0 100px;
}
.main {
    display: flex;
}
.img1 {
    width: 687.8px;
    height: 519px;
}