TIL | #18 | Routine Mate | 23.12.16.(토)

23.12.16.(SAT).TIL.

Routine Mate

Routine Mate

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

const App = () => {
  const [isBackButtonVisible, setIsBackButtonVisible] = useState(true);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact>
          <HomePage isBackButtonVisible={isBackButtonVisible} />
        </Route>
        <Route path="/daily" exact>
          <DailyPage />
        </Route>
        <Route path="/weekly" exact>
          <WeeklyPage />
        </Route>
        <Route path="/yearly" exact>
          <YearlyPage />
        </Route>
        <Route path="/goals" exact>
          <GoalsPage />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

const HomePage = ({ isBackButtonVisible }) => {
  return (
    <div>
      <h1>일일 목표</h1>
      <p>IP: 192.168.0.1 시간: 9:41</p>
      <button
        className="back-button"
        onClick={() => setIsBackButtonVisible(false)}
      >
        뒤로가기
      </button>
    </div>
  );
};

const DailyPage = () => {
  return (
    <div>
      <h1>일일 목표</h1>
      <ul>
        <li>첫 번째 업무</li>
        <li>두 번째 업무</li>
        <li>세 번째 업무</li>
      </ul>
    </div>
  );
};

const WeeklyPage = () => {
  return (
    <div>
      <h1>주간 목표</h1>
      <ul>
        <li>첫 번째 업무</li>
        <li>두 번째 업무</li>
        <li>세 번째 업무</li>
      </ul>
    </div>
  );
};

const YearlyPage = () => {
  return (
    <div>
      <h1>연간 목표</h1>
      <ul>
        <li>첫 번째 업무</li>
        <li>두 번째 업무</li>
        <li>세 번째 업무</li>
      </ul>
    </div>
  );
};

const GoalsPage = () => {
  return (
    <div>
      <h1>목표</h1>
      <ul>
        <li>첫 번째 목표</li>
        <li>두 번째 목표</li>
        <li>세 번째 목표</li>
      </ul>
    </div>
  );
};

export default App;