From aae606725fb01d0257923ed324bf9166b5d63797 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 14:16:11 +0900
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20=EC=95=A8=EB=B2=94/=EA=B3=A1/?=
 =?UTF-8?q?=EC=BB=A8=EC=85=89=ED=8F=AC=ED=86=A0=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=92=A4=EB=A1=9C=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MobileHeader에 showBack prop 추가 (ChevronLeft + history.back)
- Layout에 showBack 전달
- 라우터에서 상세 페이지에 showBack 적용
- 개별 페이지의 중복 액션바 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/mobile/layout/Header.jsx   | 26 ++++++++++++++-----
 .../src/components/mobile/layout/Layout.jsx   |  3 ++-
 frontend/src/routes/mobile/index.jsx          |  6 ++---
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/mobile/layout/Header.jsx b/frontend/src/components/mobile/layout/Header.jsx
index 9a9fe60..820f1bf 100644
--- a/frontend/src/components/mobile/layout/Header.jsx
+++ b/frontend/src/components/mobile/layout/Header.jsx
@@ -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>
   );
diff --git a/frontend/src/components/mobile/layout/Layout.jsx b/frontend/src/components/mobile/layout/Layout.jsx
index a4d65d3..a673659 100644
--- a/frontend/src/components/mobile/layout/Layout.jsx
+++ b/frontend/src/components/mobile/layout/Layout.jsx
@@ -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>
diff --git a/frontend/src/routes/mobile/index.jsx b/frontend/src/routes/mobile/index.jsx
index 29d7111..9ad0ee4 100644
--- a/frontend/src/routes/mobile/index.jsx
+++ b/frontend/src/routes/mobile/index.jsx
@@ -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>
         }