feat(mobile): 앨범/곡/컨셉포토 상세 페이지 뒤로가기 버튼 추가
- MobileHeader에 showBack prop 추가 (ChevronLeft + history.back) - Layout에 showBack 전달 - 라우터에서 상세 페이지에 showBack 적용 - 개별 페이지의 중복 액션바 제거 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
901d788d9a
commit
aae606725f
3 changed files with 24 additions and 11 deletions
|
|
@ -1,23 +1,35 @@
|
|||
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 }) {
|
||||
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 justify-center h-14 px-4">
|
||||
{title ? (
|
||||
<span className="text-xl font-bold text-primary">{title}</span>
|
||||
<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>
|
||||
) : (
|
||||
<NavLink to="/" className="text-xl font-bold text-primary">
|
||||
fromis_9
|
||||
</NavLink>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ function MobileLayout({
|
|||
hideHeader = false,
|
||||
useCustomLayout = false,
|
||||
noShadow = false,
|
||||
showBack = false,
|
||||
}) {
|
||||
// 모바일 레이아웃 활성화 (body 스크롤 방지)
|
||||
useEffect(() => {
|
||||
|
|
@ -38,7 +39,7 @@ function MobileLayout({
|
|||
|
||||
return (
|
||||
<div className="mobile-layout-container bg-white">
|
||||
{!hideHeader && <MobileHeader title={pageTitle} noShadow={noShadow} />}
|
||||
{!hideHeader && <MobileHeader title={pageTitle} noShadow={noShadow} showBack={showBack} />}
|
||||
<main className="mobile-content">{children}</main>
|
||||
<MobileBottomNav />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export default function MobileRoutes() {
|
|||
<Route
|
||||
path="/album/:name"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<Layout pageTitle="앨범" showBack>
|
||||
<AlbumDetail />
|
||||
</Layout>
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@ export default function MobileRoutes() {
|
|||
<Route
|
||||
path="/album/:name/track/:trackTitle"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<Layout pageTitle="앨범" showBack>
|
||||
<TrackDetail />
|
||||
</Layout>
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ export default function MobileRoutes() {
|
|||
<Route
|
||||
path="/album/:name/gallery"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<Layout pageTitle="컨셉 포토" showBack>
|
||||
<AlbumGallery />
|
||||
</Layout>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue