[refactor] 관리자 페이지 리디자인 반영

src/components/common/BottomModal.tsx

@@ -2,15 +2,17 @@ import { useRef, type HTMLAttributes, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 import useClickTouchOutside from '@/utils/hooks/useClickTouchOutside';
 import useScrollLock from '@/utils/hooks/useScrollLock';
+import { cn } from '@/utils/ts/cn';
 import Portal from './Portal';
 
 interface BottomModalProps extends HTMLAttributes<HTMLDivElement> {
   isOpen: boolean;
   onClose: () => void;
   children: ReactNode;
+  overlayClassName?: string;
 }
 
-function BottomModal({ isOpen, onClose, children, className }: BottomModalProps) {
+function BottomModal({ isOpen, onClose, children, className, overlayClassName }: BottomModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useClickTouchOutside(modalRef, onClose);
@@ -21,7 +23,7 @@ function BottomModal({ isOpen, onClose, children, className }: BottomModalProps)
   return (
     <Portal>
       <div
-        className="fixed inset-0 z-100 bg-black/60"
+        className={cn('fixed inset-0 z-100 bg-black/60', overlayClassName)}
         onClick={(e) => {
           e.stopPropagation();
           onClose();

src/components/common/ToggleSwitch.tsx

@@ -6,8 +6,11 @@ interface ToggleSwitchProps {
   enabled: boolean;
   onChange: (enabled: boolean) => void;
   disabled?: boolean;
+  ariaLabel?: string;
   layout?: 'vertical' | 'horizontal';
   className?: string;
+  labelClassName?: string;
+  variant?: 'default' | 'manager';
 }
 
 function ToggleSwitch({
@@ -16,47 +19,81 @@ function ToggleSwitch({
   enabled,
   onChange,
   disabled = false,
+  ariaLabel,
   layout = 'vertical',
   className,
+  labelClassName,
+  variant = 'default',
 }: ToggleSwitchProps) {
+  const isManager = variant === 'manager';
   const isHorizontal = layout === 'horizontal';
 
   return (
     <div
       className={twMerge(
-        isHorizontal ? 'flex min-h-11 items-center justify-between gap-3' : 'flex flex-col items-center gap-1.5',
+        isManager
+          ? 'flex items-center gap-1'
+          : isHorizontal
+            ? 'flex min-h-11 items-center justify-between gap-3'
+            : 'flex flex-col items-center gap-1.5',
         className
       )}
     >
-      <div className={twMerge(isHorizontal ? 'flex items-center gap-2.5' : 'flex flex-col items-center gap-1.5')}>
+      <div
+        className={twMerge(
+          isManager
+            ? 'flex items-center gap-1'
+            : isHorizontal
+              ? 'flex items-center gap-2.5'
+              : 'flex flex-col items-center gap-1.5'
+        )}
+      >
         {Icon && (
           <div className={enabled ? 'text-primary' : 'text-indigo-200'}>
             <Icon />
           </div>
         )}
         <span
           className={twMerge(
-            isHorizontal ? 'text-sub2 transition-colors' : 'text-xs leading-3.5 font-medium',
-            enabled ? 'text-indigo-700' : 'text-indigo-300'
+            isManager
+              ? 'text-[16px] leading-[1.6] font-medium text-[#5a6b7f]'
+              : isHorizontal
+                ? 'text-sub2 transition-colors'
+                : 'text-xs leading-3.5 font-medium',
+            !isManager && (enabled ? 'text-indigo-700' : 'text-indigo-300'),
+            labelClassName
           )}
         >
           {label}
         </span>
       </div>
       <button
         type="button"
-        aria-label={label}
+        aria-label={ariaLabel ?? label}
         aria-pressed={enabled}
         disabled={disabled}
         onClick={() => onChange(!enabled)}
         className={twMerge(
-          'relative touch-manipulation rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',
-          isHorizontal
-            ? `h-7 w-12 border border-indigo-50 ${enabled ? 'bg-indigo-700' : 'bg-indigo-50'}`
-            : `h-5 w-9 ${enabled ? 'bg-primary' : 'bg-indigo-100'}`
+          isManager
+            ? 'relative h-5 w-[37px] rounded-full transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+            : 'relative touch-manipulation rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',
+          isManager
+            ? enabled
+              ? 'bg-primary-500'
+              : 'bg-text-100'
+            : isHorizontal
+              ? `h-7 w-12 border border-indigo-50 ${enabled ? 'bg-indigo-700' : 'bg-indigo-50'}`
+              : `h-5 w-9 ${enabled ? 'bg-primary' : 'bg-indigo-100'}`
         )}
       >
-        {isHorizontal ? (
+        {isManager ? (
+          <span
+            className={twMerge(
+              'absolute top-0.5 left-0.5 size-4 rounded-full bg-white shadow-[0_0_3px_rgba(0,0,0,0.15)] transition-transform',
+              enabled ? 'translate-x-[17px]' : 'translate-x-0'
+            )}
+          />
+        ) : isHorizontal ? (
           <span
             className={twMerge(
               'absolute top-1/2 left-0.5 h-5 w-5 -translate-y-1/2 rounded-full bg-white shadow-[0_2px_4px_rgba(2,23,48,0.20)] transition-transform',

src/components/layout/Header/components/ManagerHeader.tsx

@@ -0,0 +1,39 @@
+import { useLocation } from 'react-router-dom';
+import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
+import { useManagedClub } from '@/pages/Manager/hooks/useManagedClubs';
+import { useSmartBack } from '@/utils/hooks/useSmartBack';
+import NotificationBell from './NotificationBell';
+
+function ManagerHeaderBase({ title }: { title: string }) {
+  const smartBack = useSmartBack();
+
+  return (
+    <header className="fixed top-0 right-0 left-0 z-30 flex min-h-[var(--manager-header-height)] items-center justify-between rounded-b-3xl bg-white px-4 py-3 shadow-[0px_2px_2px_0px_rgba(0,0,0,0.05)]">
+      <div className="flex min-w-0 flex-1 items-center gap-1">
+        <button type="button" aria-label="뒤로가기" onClick={smartBack} className="shrink-0">
+          <ChevronLeftIcon />
+        </button>
+        <span className="text-sub1 truncate text-indigo-700">{title}</span>
+      </div>
+      <NotificationBell />
+    </header>
+  );
+}
+
+function ManagerHeaderWithClub({ clubId }: { clubId: number }) {
+  const { managedClub } = useManagedClub(clubId);
+  return <ManagerHeaderBase title={managedClub.clubName} />;
+}
+
+function ManagerHeader({ fallbackTitle }: { fallbackTitle: string }) {
+  const { pathname } = useLocation();
+  const match = pathname.match(/^\/mypage\/manager\/(\d+)$/);
+
+  if (match) {
+    return <ManagerHeaderWithClub clubId={Number(match[1])} />;
+  }
+
+  return <ManagerHeaderBase title={fallbackTitle} />;
+}
+
+export default ManagerHeader;

src/components/layout/Header/constants.ts

@@ -0,0 +1 @@
+export const MANAGER_HEADER_HEIGHT = '63px';

src/components/layout/Header/headerConfig.ts

@@ -26,8 +26,8 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
     match: (pathname) => pathname === '/signup/finish' || /^\/clubs\/\d+\/complete$/.test(pathname),
   },
   {
-    type: 'full',
-    match: (pathname) => /^\/mypage\/manager(?:\/[^/]+)?$/.test(pathname),
+    type: 'manager',
+    match: (pathname) => pathname.startsWith('/mypage/manager'),
   },
   {
     type: 'signup',

src/components/layout/Header/index.tsx

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import ChatHeader from './components/ChatHeader';
 import DefaultHeader from './components/DefaultHeader';
 import InfoHeader from './components/InfoHeader';
+import ManagerHeader from './components/ManagerHeader';
 import ProfileHeader from './components/ProfileHeader';
 import ScheduleHeader from './components/ScheduleHeader';
 import { HEADER_CONFIGS, DEFAULT_HEADER_TYPE } from './headerConfig';
@@ -26,6 +27,7 @@ function Header() {
     signup: ({ title, onBack }) => <DefaultHeader title={title} onBack={onBack} />,
     council: ({ title }) => <DefaultHeader title={title} />,
     default: ({ title }) => <DefaultHeader title={title} />,
+    manager: ({ title }) => <ManagerHeader fallbackTitle={title} />,
   };
 
   const onBack = headerType === 'signup' ? () => navigate('/') : undefined;

src/components/layout/Header/routeTitles.ts

@@ -4,6 +4,46 @@ export interface RouteTitle {
 }
 
 export const ROUTE_TITLES: RouteTitle[] = [
+  {
+    match: (pathname) => pathname === '/mypage/manager',
+    title: '동아리 관리',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/members$/.test(pathname),
+    title: '부원관리',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/members\/\d+\/application$/.test(pathname),
+    title: '지원서 보기',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/info$/.test(pathname),
+    title: '정보 수정하기',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/applications$/.test(pathname),
+    title: '지원자 관리',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/applications\/\d+$/.test(pathname),
+    title: '지원서 보기',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/recruitment$/.test(pathname),
+    title: '모집 공고 및 지원서 관리',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/recruitment\/write$/.test(pathname),
+    title: '모집 공고',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/recruitment\/form$/.test(pathname),
+    title: '지원서',
+  },
+  {
+    match: (pathname) => /^\/mypage\/manager\/\d+\/recruitment\/account$/.test(pathname),
+    title: '가입비',
+  },
   {
     match: (pathname) => pathname.startsWith('/clubs/search'),
     title: '동아리 검색',

src/components/layout/Header/types.ts

@@ -10,7 +10,8 @@ export type HeaderType =
   | 'full'
   | 'signup'
   | 'schedule'
-  | 'council';
+  | 'council'
+  | 'manager';
 
 export interface HeaderConfig {
   type: HeaderType;

src/components/layout/index.tsx

@@ -1,8 +1,9 @@
-import { Suspense } from 'react';
+import { Suspense, type CSSProperties } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { cn } from '@/utils/ts/cn';
 import BottomNav from './BottomNav';
 import Header from './Header';
+import { MANAGER_HEADER_HEIGHT } from './Header/constants';
 import { HEADER_CONFIGS } from './Header/headerConfig';
 
 interface LayoutProps {
@@ -15,19 +16,22 @@ export default function Layout({ showBottomNav = false, contentClassName }: Layo
   const headerConfig = HEADER_CONFIGS.find((config) => config.match(pathname));
   const headerType = headerConfig?.type;
   const isInfoHeader = headerType === 'info';
+  const isManagerHeader = headerType === 'manager';
   const hasHeader = headerType !== 'none';
+  const layoutStyle = {
+    height: 'var(--viewport-height)',
+    transform: 'translateY(var(--viewport-offset))',
+    '--manager-header-height': MANAGER_HEADER_HEIGHT,
+  } as CSSProperties;
 
   return (
-    <div
-      className="fixed inset-0 flex flex-col overflow-hidden"
-      style={{ height: 'var(--viewport-height)', transform: 'translateY(var(--viewport-offset))' }}
-    >
+    <div className="fixed inset-0 flex flex-col overflow-hidden" style={layoutStyle}>
       {hasHeader && <Header />}
       <Suspense>
         <main
           className={cn(
             'bg-background box-border flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            hasHeader && (isInfoHeader ? 'pt-15' : 'pt-11'),
+            hasHeader && (isInfoHeader ? 'pt-15' : isManagerHeader ? 'pt-[var(--manager-header-height)]' : 'pt-11'),
             showBottomNav && 'pb-19',
             contentClassName
           )}