header.tsx 2.69 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);
  };
백승민's avatar
css    
백승민 committed
15
// bg-gradient-to-t from-sky-200
16
  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
17
    <div className="flex flex-col md:px-56 ">
Kim, MinGyu's avatar
Kim, MinGyu committed
18
      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 border-sky-200 bg-gradient-to-t from-sky-200">
백승민's avatar
css    
백승민 committed
19
        <div className="flex mt-5 justify-between md:pr-3">
Kim, MinGyu's avatar
Kim, MinGyu committed
20
          <button className="ml-3 shrink-0  md:text-2xl">
Kim, MinGyu's avatar
Kim, MinGyu committed
21
22
23
24
            <Link to="/" className="hover:text-sky-300 active:text-purple-500">
              Travel Report
            </Link>
          </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
25
          <div className="flex h-12">
Kim, MinGyu's avatar
Kim, MinGyu committed
26
            <input
Kim, MinGyu's avatar
Kim, MinGyu committed
27
              className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-3/5 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
Kim, MinGyu's avatar
Kim, MinGyu committed
28
29
              onChange={handleChange}
            />
Kim, MinGyu's avatar
Kim, MinGyu committed
30
            <button className="whitespace-nowrap bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
Kim, MinGyu's avatar
Kim, MinGyu committed
31
              검색
Kim, MinGyu's avatar
Kim, MinGyu committed
32
            </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
33
34
          </div>
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
35
        <div className="flex justify-end ">
Yoon, Daeki's avatar
Yoon, Daeki committed
36
          {user.isLoggedIn ? (
Kim, MinGyu's avatar
Kim, MinGyu committed
37
38
39
40
41
            <div className="flex text-xs">
              <Link to="/profile" className="mr-2 ">
                프로필
              </Link>
              <div className="border-0 border-r-2 border-black "></div>
백승민's avatar
css    
백승민 committed
42
              {user.role === "admin" ? <Link to={"/admin"} className="ml-2 ">어드민</Link> : null}
Kim, MinGyu's avatar
Kim, MinGyu committed
43
44
45
46
47
48
49
              <button
                className="ml-2 text-xs"
                onClick={() => {
                  logout();
                }}
              >
                로그아웃
Kim, MinGyu's avatar
Kim, MinGyu committed
50
              </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
            </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
65
66
            <Link
              to="/board"
Kim, MinGyu's avatar
Kim, MinGyu committed
67
              className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
68
69
70
71
            >
              게시판
            </Link>
          </button>
백승민's avatar
theme1    
백승민 committed
72
73
        </div>
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
74

75
76
77
78
      <Outlet />
    </div>
  );
}