129 lines
4.8 KiB
TypeScript
129 lines
4.8 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
|
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
|
|
import type { HeaderProps } from '@/types/Header'
|
|
|
|
import 'swiper/css'
|
|
|
|
// type HeaderProps = {
|
|
// name: string //header 이름
|
|
// backBtn: boolean // 뒤로가기 버튼 유무
|
|
// }
|
|
|
|
export default function Header({ name }: HeaderProps) {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const [headerAct, setHeaderAct] = useState<boolean>(false)
|
|
const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
|
|
|
|
if (pathname === '/login') {
|
|
return null
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (pathname !== '/') {
|
|
setIsShowBackBtn(true)
|
|
}
|
|
}, [pathname])
|
|
|
|
return (
|
|
<>
|
|
<div className="header-warp">
|
|
<header>
|
|
<div className="header-inner">
|
|
{isShowBackBtn && (
|
|
<div className="back-button-wrap">
|
|
<button className="back-button" onClick={() => router.back()}></button>
|
|
</div>
|
|
)}
|
|
<h2 className="logo">
|
|
<Link href={'#'}>{name}</Link>
|
|
</h2>
|
|
<div className="side-button-wrap">
|
|
<button className="side-button" onClick={() => setHeaderAct(true)}></button>
|
|
</div>
|
|
</div>
|
|
<div className={`side-nav ${headerAct ? 'active' : ''}`}>
|
|
<div className="side-nav-inner">
|
|
<div className="side-nav-header">
|
|
<div className="side-header-profile">
|
|
<div className="profile-img">
|
|
<img src="/assets/images/layout/side_nav_profile.svg" alt="profile" />
|
|
</div>
|
|
<div className="profile-group">
|
|
<div className="profile-name">HONG GILDONG</div>
|
|
<div className="profile-company">Interplug corp.</div>
|
|
</div>
|
|
</div>
|
|
<div className="side-close-wrap">
|
|
<button className="side-close-btn" onClick={() => setHeaderAct(false)}></button>
|
|
</div>
|
|
</div>
|
|
<div className="side-swiper-wrap">
|
|
<Swiper slidesPerView={1.6} spaceBetween={12} className="mySwiper">
|
|
<SwiperSlide>
|
|
<div className="side-swiper-card">
|
|
<div className="side-swiper-icon icon01"></div>
|
|
<div className="side-swiper-infor">私は作成した物件</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="side-swiper-card">
|
|
<div className="side-swiper-icon icon02"></div>
|
|
<div className="side-swiper-infor">私は作成したお問 い合わせ</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="side-swiper-card">
|
|
<div className="side-swiper-icon icon01"></div>
|
|
<div className="side-swiper-infor">私は作成したお問 い合わせ</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
<nav className="side-nav-wrap">
|
|
<ul className="side-nav-list">
|
|
<li className="side-nav-item">
|
|
<button onClick={() => router.push('/survey-sale')}>調査物件一覧</button>
|
|
</li>
|
|
<li className="side-nav-item">
|
|
<button onClick={() => router.push('/survey-sale/basic-info')}>調査物件登録</button>
|
|
</li>
|
|
<li className="side-nav-item">
|
|
<button onClick={() => router.push('/inquiry/list')}>1:1お問い合わせ</button>
|
|
</li>
|
|
<li className="side-nav-item">
|
|
<button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
|
|
</li>
|
|
<li className="side-nav-item">
|
|
<button>パスワードリセット</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div className="side-nav-footer">
|
|
<ul className="side-footer-list">
|
|
<li className="side-footer-item">
|
|
<button className="bold">LOGOUT</button>
|
|
</li>
|
|
<li className="side-footer-item">
|
|
<button>Jynoadmin</button>
|
|
</li>
|
|
<li className="side-footer-item">
|
|
<button onClick={() => router.push('/')}>HOME</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|