caadiq
aae606725f
- MobileHeader에 showBack prop 추가 (ChevronLeft + history.back) - Layout에 showBack 전달 - 라우터에서 상세 페이지에 showBack 적용 - 개별 페이지의 중복 액션바 제거 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import { NavLink } from 'react-router-dom';
|
|
import { ChevronLeft } from 'lucide-react';
|
|
|
|
/**
|
|
* 모바일 헤더 컴포넌트
|
|
* @param {string} title - 페이지 제목 (없으면 fromis_9)
|
|
* @param {boolean} noShadow - 그림자 숨김 여부
|
|
* @param {boolean} showBack - 뒤로가기 버튼 표시 여부
|
|
*/
|
|
function MobileHeader({ title, noShadow = false, showBack = false }) {
|
|
return (
|
|
<header
|
|
className={`bg-white sticky top-0 z-50 ${noShadow ? '' : 'shadow-sm'}`}
|
|
>
|
|
<div className="flex items-center h-14 px-2">
|
|
{showBack ? (
|
|
<button onClick={() => window.history.back()} className="p-2 rounded-lg active:bg-gray-100 text-gray-600">
|
|
<ChevronLeft size={22} />
|
|
</button>
|
|
) : (
|
|
<div className="w-9" />
|
|
)}
|
|
<div className="flex-1 text-center">
|
|
{title ? (
|
|
<span className="text-xl font-bold text-primary">{title}</span>
|
|
) : (
|
|
<NavLink to="/" className="text-xl font-bold text-primary">
|
|
fromis_9
|
|
</NavLink>
|
|
)}
|
|
</div>
|
|
<div className="w-9" />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default MobileHeader;
|