[feat] 총동아리 페이지 리디자인 및 하단 오버레이 정리

src/App.tsx

@@ -86,6 +86,10 @@ function App() {
             <Route element={<Layout showBottomNav />}>
               <Route path="home" element={<Home />} />
               <Route path="notifications" element={<NotificationsPage />} />
+              <Route path="council">
+                <Route index element={<CouncilDetail />} />
+                <Route path="notice/:noticeId" element={<CouncilNotice />} />
+              </Route>
               <Route path="mypage">
                 <Route index element={<MyPage />} />
                 <Route path="manager">
@@ -116,10 +120,6 @@ function App() {
               <Route path="mypage/manager/:clubId/recruitment/write" element={<ManagedRecruitmentWrite />} />
               <Route path="mypage/manager/:clubId/recruitment/account" element={<ManagedAccount />} />
               <Route path="profile" element={<Profile />} />
-              <Route path="council">
-                <Route index element={<CouncilDetail />} />
-                <Route path="notice/:noticeId" element={<CouncilNotice />} />
-              </Route>
               <Route path="chats/:chatRoomId" element={<ChatRoom />} />
             </Route>
           </Route>

src/components/layout/BottomNav/index.tsx

@@ -22,7 +22,7 @@ const BOTTOM_NAV_ITEMS = [
     to: '/home',
     label: '홈',
     floatingImageSrc: HomeResultImage,
-    matchesPath: (pathname) => pathname === '/home' || pathname === '/notifications',
+    matchesPath: (pathname) => pathname === '/home' || pathname === '/notifications' || pathname.startsWith('/council'),
   },
   { to: '/chats', label: '채팅방', Icon: ChatIcon },
   { to: '/mypage', label: '내정보', Icon: MyPageIcon },

src/components/layout/BottomOverlaySpacer.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+import {
+  DEFAULT_BOTTOM_OVERLAY_GAP,
+  type BottomOverlayGap,
+  useBottomOverlayOffset,
+} from '@/components/layout/bottomOverlay';
+import { cn } from '@/utils/ts/cn';
+
+interface BottomOverlaySpacerProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: BottomOverlayGap;
+}
+
+function BottomOverlaySpacer({
+  gap = DEFAULT_BOTTOM_OVERLAY_GAP,
+  className,
+  style,
+  ...props
+}: BottomOverlaySpacerProps) {
+  const height = useBottomOverlayOffset(gap);
+
+  return <div aria-hidden="true" className={cn('shrink-0', className)} style={{ height, ...style }} {...props} />;
+}
+
+export default BottomOverlaySpacer;

src/components/layout/Header/components/BackTitleHeader.tsx

@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode } from 'react';
+import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
+import { useSmartBack } from '@/utils/hooks/useSmartBack';
+import { cn } from '@/utils/ts/cn';
+
+interface BackTitleHeaderProps {
+  title: string;
+  onBack?: () => void;
+  rightSlot?: ReactNode;
+  reserveRightSlot?: boolean;
+  headerClassName?: string;
+  leftContentClassName?: string;
+  rightSlotContainerClassName?: string;
+  titleClassName?: string;
+  style?: CSSProperties;
+}
+
+function BackTitleHeader({
+  title,
+  onBack,
+  rightSlot,
+  reserveRightSlot = false,
+  headerClassName,
+  leftContentClassName,
+  rightSlotContainerClassName,
+  titleClassName,
+  style,
+}: BackTitleHeaderProps) {
+  const smartBack = useSmartBack();
+  const handleBack = onBack ?? smartBack;
+
+  return (
+    <header className={cn('fixed top-0 right-0 left-0 z-30 flex items-center bg-white', headerClassName)} style={style}>
+      <div className={cn('flex min-w-0 flex-1 items-center gap-1', leftContentClassName)}>
+        <button type="button" aria-label="뒤로가기" onClick={handleBack} className="shrink-0">
+          <ChevronLeftIcon />
+        </button>
+        <h1 className={cn('text-text-700 min-w-0 truncate leading-7 font-semibold', titleClassName)}>{title}</h1>
+      </div>
+
+      {rightSlot ? (
+        <div className={cn('shrink-0', rightSlotContainerClassName)}>{rightSlot}</div>
+      ) : reserveRightSlot ? (
+        <div className={cn('size-6 shrink-0', rightSlotContainerClassName)} aria-hidden="true" />
+      ) : null}
+    </header>
+  );
+}
+
+export default BackTitleHeader;

src/components/layout/Header/components/PlainSubpageHeader.tsx

@@ -0,0 +1,11 @@
+import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
+
+interface PlainSubpageHeaderProps {
+  title: string;
+}
+
+function PlainSubpageHeader({ title }: PlainSubpageHeaderProps) {
+  return <BackTitleHeader title={title} headerClassName="px-4 py-2" />;
+}
+
+export default PlainSubpageHeader;

src/components/layout/Header/components/SubpageHeader.tsx

@@ -1,6 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
-import { useSmartBack } from '@/utils/hooks/useSmartBack';
+import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
 import { cn } from '@/utils/ts/cn';
 
 interface SubpageHeaderProps {
@@ -14,28 +13,19 @@ function SubpageHeader({
   rightSlot,
   shadowClassName = 'shadow-[0_0_20px_rgba(0,0,0,0.03)]',
 }: SubpageHeaderProps) {
-  const smartBack = useSmartBack();
   const headerStyle = {
     minHeight: 'var(--subpage-header-height)',
   } as CSSProperties;
 
   return (
-    <header
-      className={cn(
-        'fixed top-0 right-0 left-0 z-30 flex items-center justify-between rounded-b-3xl bg-white px-4 py-3',
-        shadowClassName
-      )}
+    <BackTitleHeader
+      title={title}
+      rightSlot={rightSlot}
+      reserveRightSlot
+      headerClassName={cn('justify-between rounded-b-3xl px-4 py-3', shadowClassName)}
+      titleClassName="text-sub1 text-indigo-700"
       style={headerStyle}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-1">
-        <button type="button" aria-label="뒤로가기" onClick={smartBack} className="shrink-0">
-          <ChevronLeftIcon />
-        </button>
-        <h1 className="text-sub1 truncate text-indigo-700">{title}</h1>
-      </div>
-
-      {rightSlot ? <div className="shrink-0">{rightSlot}</div> : <div className="size-6 shrink-0" aria-hidden="true" />}
-    </header>
+    />
   );
 }
 

src/components/layout/Header/headerConfig.ts

@@ -9,6 +9,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
     type: 'notification',
     match: (pathname) => pathname === '/notifications',
   },
+  {
+    type: 'subpage',
+    match: (pathname) => /^\/council\/notice\/\d+$/.test(pathname),
+  },
   {
     type: 'default',
     match: (pathname) => /^\/clubs\/\d+$/.test(pathname),
@@ -19,16 +23,12 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
   },
   {
     type: 'info',
-    match: (pathname) => pathname === '/home' || pathname === '/timer',
+    match: (pathname) => pathname === '/home' || pathname === '/timer' || pathname === '/council',
   },
   {
     type: 'chat',
     match: (pathname) => /^\/chats\/\d+$/.test(pathname),
   },
-  {
-    type: 'council',
-    match: (pathname) => pathname === '/council',
-  },
   {
     type: 'normal',
     match: (pathname) => pathname === '/signup/finish' || /^\/clubs\/\d+\/complete$/.test(pathname),

src/components/layout/Header/index.tsx

@@ -3,6 +3,7 @@ import ChatHeader from './components/ChatHeader';
 import DefaultHeader from './components/DefaultHeader';
 import InfoHeader from './components/InfoHeader';
 import ManagerHeader from './components/ManagerHeader';
+import PlainSubpageHeader from './components/PlainSubpageHeader';
 import ProfileHeader from './components/ProfileHeader';
 import ScheduleHeader from './components/ScheduleHeader';
 import SubpageHeader from './components/SubpageHeader';
@@ -20,11 +21,11 @@ function Header() {
     chat: () => <ChatHeader />,
     none: () => null,
     notification: ({ title }) => <SubpageHeader title={title} />,
+    subpage: ({ title }) => <PlainSubpageHeader title={title} />,
     schedule: () => <ScheduleHeader />,
     normal: ({ title }) => <DefaultHeader title={title} showBackButton={false} />,
     full: ({ title }) => <DefaultHeader title={title} showNotificationBell={true} />,
     signup: ({ title, onBack }) => <DefaultHeader title={title} onBack={onBack} />,
-    council: ({ title }) => <DefaultHeader title={title} />,
     default: ({ title }) => <DefaultHeader title={title} />,
     manager: ({ title }) => <ManagerHeader fallbackTitle={title} />,
   };

src/components/layout/Header/routeTitles.ts

@@ -52,6 +52,10 @@ export const ROUTE_TITLES: RouteTitle[] = [
     match: (pathname) => pathname === '/council',
     title: '총동아리연합회',
   },
+  {
+    match: (pathname) => /^\/council\/notice\/\d+$/.test(pathname),
+    title: '공지사항',
+  },
   {
     match: (pathname) => pathname === '/notifications',
     title: '알림',

src/components/layout/Header/types.ts

@@ -6,12 +6,12 @@ export type HeaderType =
   | 'chat'
   | 'none'
   | 'notification'
+  | 'subpage'
   | 'default'
   | 'normal'
   | 'full'
   | 'signup'
   | 'schedule'
-  | 'council'
   | 'manager';
 
 export interface HeaderConfig {