header.tsx 2.13 KB
Newer Older
Kim, MinGyu's avatar
Kim, MinGyu committed
1
import React, { useReducer, useState } from "react";
2
3
import { Link, Outlet } from "react-router-dom";
import { useAuth } from "../auth/auth.context";
백승민's avatar
theme1    
백승민 committed
4
5
6
7

import "tailwindcss/tailwind.css";

export default function Header() {
8
9
10
  const { logout } = useAuth();
  return (
    <div className="flex flex-col ">
Kim, MinGyu's avatar
Kim, MinGyu committed
11
12
      <div className="flex py-10 ">
        <button className="shrink-0  mx-5">
백승민's avatar
백승민 committed
13
          <Link to="/" className="hover:text-sky-300 focus:text-purple-500">
14
15
16
            Travel Report
          </Link>
        </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
17

Kim, MinGyu's avatar
Kim, MinGyu committed
18
        <input
백승민's avatar
백승민 committed
19
          className="md:ml-20 placeholder:text-white focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 md:placeholder:text-slate-400 w-20 md:w-1/2 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
Kim, MinGyu's avatar
Kim, MinGyu committed
20
21
22
23
24
25
          placeholder="어디로 여행가고 싶나요?"
        />
        <button className="shrink-0 border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
          검색
        </button>

Kim, MinGyu's avatar
Kim, MinGyu committed
26
        <div className="shrink-0 p-3 md:ml-40 h-12">
Kim, MinGyu's avatar
Kim, MinGyu committed
27
          {useAuth().user.isLoggedIn ? (
Kim, MinGyu's avatar
Kim, MinGyu committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
            <div className="flex">
              <Link to="/profile" className="mr-2 ">
                프로필
              </Link>
              <div className="border-0 border-r-2"></div>
              <div></div>
              <button
                className="ml-2 mr-2"
                onClick={() => {
                  logout();
                }}
              >
                로그아웃
              </button>
              <div className="border-0 border-r-2"></div>
              <div></div>
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
45
46
47
          ) : (
            <button className="shrink-0 bg-white ">
              <Link
백승민's avatar
백승민 committed
48
                className="hover:text-sky-300 focus:text-purple-500"
Kim, MinGyu's avatar
Kim, MinGyu committed
49
50
51
52
53
54
                to="/login"
              >
                로그인
              </Link>
            </button>
          )}
백승민's avatar
theme1    
백승민 committed
55
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
56
        <button className="shrink-0 bg-white">
Kim, MinGyu's avatar
Kim, MinGyu committed
57
58
          <Link
            to="/board"
백승민's avatar
백승민 committed
59
            className="hover:text-sky-300 focus:text-purple-500"
Kim, MinGyu's avatar
Kim, MinGyu committed
60
61
62
63
          >
            게시판
          </Link>
        </button>
백승민's avatar
theme1    
백승민 committed
64
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
65

66
67
68
69
      <Outlet />
    </div>
  );
}