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:
caadiq 2026-04-05 14:16:11 +09:00
parent 901d788d9a
commit aae606725f
3 changed files with 24 additions and 11 deletions

View file

@ -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>
);

View file

@ -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>

View file

@ -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>
}