첫 커밋
This commit is contained in:
focp212@naver.com
203
src/components/Header.tsx
Normal file
203
src/components/Header.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useRouterState } from '@tanstack/react-router';
|
||||
import { Toasts } from '@/shared/ui/toasts/toasts';
|
||||
import { notiBar, snackBar } from '@/shared/lib/toast';
|
||||
import { ToastContainer,toast } from 'react-toastify';
|
||||
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(true);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const router = useRouterState();
|
||||
|
||||
const isActive = (path: string) => {
|
||||
return router.location.pathname === path;
|
||||
};
|
||||
const toastTest = (str: string) => {
|
||||
//alert(str)
|
||||
toast(str);
|
||||
//notiBar(str)
|
||||
|
||||
};
|
||||
|
||||
const openBottomSheet = () => {
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className="fixed left-0 right-0 bg-white shadow-lg z-50"
|
||||
style={{
|
||||
top: `env(safe-area-inset-top, 0px)`
|
||||
}}
|
||||
>
|
||||
<Toasts />
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex justify-between items-center py-4">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">NP</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-gray-900">
|
||||
NicePayments
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link
|
||||
to="/"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/')
|
||||
? 'text-blue-600 border-b-2 border-blue-600 pb-1'
|
||||
: 'text-gray-700 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
홈
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/about')
|
||||
? 'text-blue-600 border-b-2 border-blue-600 pb-1'
|
||||
: 'text-gray-700 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
회사소개
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/contact')
|
||||
? 'text-blue-600 border-b-2 border-blue-600 pb-1'
|
||||
: 'text-gray-700 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
문의하기
|
||||
</Link>
|
||||
<Link
|
||||
to="/test"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/test')
|
||||
? 'text-blue-600 border-b-2 border-blue-600 pb-1'
|
||||
: 'text-gray-700 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
테스트
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<div className="space-x-2">
|
||||
<button
|
||||
onClick={() => toastTest('로그인')}
|
||||
className="text-gray-700 px-4 py-2 rounded-md hover:bg-gray-100 transition-colors">
|
||||
로그인
|
||||
</button>
|
||||
<button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
|
||||
회원가입
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-8 h-8"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden py-4 border-t border-gray-200">
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
to="/"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/') ? 'text-blue-600' : 'text-gray-700'
|
||||
}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
홈
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/about') ? 'text-blue-600' : 'text-gray-700'
|
||||
}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
회사소개
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/contact') ? 'text-blue-600' : 'text-gray-700'
|
||||
}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
문의하기
|
||||
</Link>
|
||||
<Link
|
||||
to="/test"
|
||||
className={`font-medium transition-colors ${
|
||||
isActive('/test') ? 'text-blue-600' : 'text-gray-700'
|
||||
}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
테스트
|
||||
</Link>
|
||||
|
||||
<div className="pt-4 border-t border-gray-200">
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
className="w-full text-left text-gray-700 hover:text-blue-600 transition-colors"
|
||||
onClick={() => toastTest('로그인')}
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
<button
|
||||
className="w-full text-left bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
회원가입
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user