header.tsx 3.28 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() {
Yoon, Daeki's avatar
Yoon, Daeki committed
8
  const { logout, user } = useAuth();
Kim, MinGyu's avatar
Kim, MinGyu committed
9
10
11
12
13
14
  const [search, setSearch] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newvalue = e.target.value;
    setSearch(newvalue);
  };
15
  // bg-gradient-to-t from-sky-200
16
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
17
18
    <div className="flex flex-col bg-lime-100">
      <div className="flex flex-col md:px-14 lg:px-52 z-10 ">
19
20
21
22
23
24
        <div className="flex flex-col-reverse pt-3 pb-12   ">
          <div className="flex mt-5 justify-between pr-3">
            <button className="ml-3 shrink-0  md:text-2xl">
              <Link
                to="/"
                className="hover:text-sky-300 active:text-purple-500 text-white"
Kim, MinGyu's avatar
Kim, MinGyu committed
25
              >
26
27
28
29
30
                Travel Report
              </Link>
            </button>
            <div className="flex h-12">
              <input
Kim, MinGyu's avatar
Kim, MinGyu committed
31
                className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-yellow-900 w-3/5 md:w-4/5 border-y-4 border-l-4 border-yellow-600 pl-9 rounded-l-full focus:border-0"
32
33
                onChange={handleChange}
              />
Kim, MinGyu's avatar
Kim, MinGyu committed
34
              <button className="whitespace-nowrap bg-white border-y-4  border-r-4 border-yellow-900 rounded-r-full pr-4">
35
                검색
Kim, MinGyu's avatar
Kim, MinGyu committed
36
              </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
37
            </div>
38
39
40
41
42
43
44
45
46
          </div>
          <div className="flex justify-end ">
            {user.isLoggedIn ? (
              <div className="flex text-xs">
                <Link to="/profile" className="mr-2 ">
                  프로필
                </Link>
                <div className="border-0 border-r-2 border-black "></div>
                {user.role === "admin" ? (
Kim, MinGyu's avatar
Kim, MinGyu committed
47
48
49
50
51
                  <div className="border-0 border-r-2 border-black ">
                    <Link to={"/admin"} className="mx-2">
                      관리자
                    </Link>
                  </div>
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
                ) : null}
                <button
                  className="ml-2 text-xs"
                  onClick={() => {
                    logout();
                  }}
                >
                  로그아웃
                </button>
              </div>
            ) : (
              <button className="shrink-0 ">
                <Link
                  className="hover:text-sky-300 focus:text-purple-500 text-xs grid items-center"
                  to="/login"
                >
                  로그인
                </Link>
              </button>
            )}
            <div className="ml-2 border-0 border-r-2 border-black "></div>
            <div></div>
            <button className="shrink-0 mr-3 text-xs ">
Kim, MinGyu's avatar
Kim, MinGyu committed
75
              <Link
76
77
                to="/board"
                className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
78
              >
79
                게시판
Kim, MinGyu's avatar
Kim, MinGyu committed
80
81
              </Link>
            </button>
82
          </div>
백승민's avatar
theme1    
백승민 committed
83
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
84

85
86
        <Outlet />
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
87
      <div className="bg-right bg-cover z-0 absolute w-full h-44 overflow-hidden object-cover object-center bg-[url('https://a-static.besthdwallpaper.com/seom-punggyeong-ilreoseuteu-byeogji-3840x1200-81006_62.jpg')]"></div>
88
89
90
    </div>
  );
}