[Fix] WTH-396: 어드민 반응형 설정

.gitignore

@@ -10,9 +10,6 @@
 !.yarn/releases
 !.yarn/versions
 
-
-.claude/settings.local.json
-
 # testing
 /coverage
 

src/components/admin/layout/LNB.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import { AdminForumIcon, AdminCalendarIcon, AdminSettingIcon } from '@/assets/icons/admin';
 import { CheckRoundIcon, ExitIcon, PeopleIcon } from '@/assets/icons';
@@ -11,6 +11,7 @@ import {
   AlertDialogCancel,
   TooltipProvider,
 } from '@/components/ui';
+import { useMediaQuery } from '@/hooks';
 import { cn } from '@/lib/cn';
 import { LNBHeader } from '@/components/admin/layout/LNBHeader';
 import { LNBClubInfo } from '@/components/admin/layout/LNBClubInfo';
@@ -23,9 +24,16 @@ function LNB() {
   const pathname = usePathname();
   const router = useRouter();
   const { clubId } = useParams<{ clubId: string }>();
+  // tablet(696px) 미만에서는 기본적으로 접힌 상태로 시작
+  const isBelowTablet = useMediaQuery('(max-width: 695.98px)');
   const [collapsed, setCollapsed] = useState(false);
   const [serviceDialogOpen, setServiceDialogOpen] = useState(false);
 
+  // 브레이크포인트를 넘나들 때 기본 접힘 상태를 동기화
+  useEffect(() => {
+    setCollapsed(isBelowTablet);
+  }, [isBelowTablet]);
+
   const servicePath = `/${clubId}/home`;
 
   const managementNavItems = [

src/components/admin/schedule/general/ScheduleItem.tsx

@@ -27,7 +27,7 @@ function ScheduleItem({
   return (
     <div
       className={cn(
-        'border-line flex items-start gap-600 px-500 py-400',
+        'border-line tablet:gap-600 tablet:px-500 tablet:py-400 flex items-start gap-400 px-400 py-300',
         !isLast && 'border-b',
         className,
       )}
@@ -40,7 +40,7 @@ function ScheduleItem({
       </div>
 
       {/* Content column */}
-      <div className="flex flex-1 flex-col justify-center gap-200 self-stretch">
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-200 self-stretch">
         <span className="typo-sub3 text-text-strong">{schedule.title}</span>
         <div className="flex flex-wrap items-center gap-200">
           <ScheduleTag variant="type">{SCHEDULE_TYPE_LABEL[schedule.type]}</ScheduleTag>
@@ -50,7 +50,7 @@ function ScheduleItem({
       </div>
 
       {/* Action buttons */}
-      <div className="flex shrink-0 items-center gap-200">
+      <div className="tablet:flex-row tablet:items-center flex shrink-0 flex-col items-stretch gap-200">
         <Button variant="secondary" size="md" onClick={onEdit}>
           수정
         </Button>

src/components/admin/schedule/general/SchedulePageContent.tsx

@@ -99,7 +99,7 @@ function SchedulePageContent() {
   };
 
   return (
-    <div className="flex min-w-0 flex-col gap-400 p-700">
+    <div className="tablet:p-700 flex min-w-0 flex-col gap-400 p-400">
       <CardinalDropdown
         cardinals={cardinals}
         activeCardinal={activeCardinal}
@@ -114,8 +114,8 @@ function SchedulePageContent() {
           <TabsTrigger value="session">세션</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="all" className="mt-400 overflow-x-auto">
-          <Card className="min-w-172.5 gap-700 px-600 pt-600 pb-800">
+        <TabsContent value="all" className="mt-400">
+          <Card className="tablet:gap-700 tablet:px-600 tablet:pt-600 tablet:pb-800 min-w-78 gap-600 px-400 pt-400 pb-600">
             {/* Month navigator */}
             <MonthNavigator
               year={currentYear}
@@ -125,8 +125,8 @@ function SchedulePageContent() {
             />
 
             {/* Search bar + Create button */}
-            <div className="flex items-center justify-between">
-              <div className="relative w-123">
+            <div className="tablet:flex-row tablet:flex-wrap tablet:items-center tablet:justify-between flex flex-col gap-300">
+              <div className="tablet:w-123 relative w-full">
                 <Image
                   src={SearchIcon}
                   alt="검색"
@@ -144,7 +144,12 @@ function SchedulePageContent() {
                   className="bg-container-neutral-alternative typo-body1 placeholder:text-text-alternative h-12 w-full rounded-sm py-300 pr-300 pl-14 focus:outline-none"
                 />
               </div>
-              <Button variant="primary" size="lg" onClick={() => openCreateModal('EVENT')}>
+              <Button
+                variant="primary"
+                size="lg"
+                className="tablet:w-auto tablet:shrink-0 w-full whitespace-nowrap"
+                onClick={() => openCreateModal('EVENT')}
+              >
                 <Icon src={AdminCalendarEditIcon} size={20} className="text-text-inverse mr-1" />
                 일반 일정 생성
               </Button>

src/components/admin/schedule/modal/CreateGeneralScheduleForm.tsx

@@ -12,6 +12,7 @@ import {
   isScheduleTitleValid,
 } from '@/utils/admin/scheduleFormUtils';
 
+import { SCHEDULE_MODAL_FOOTER_CLASS } from './constants';
 import { isDateRangeValid, type ScheduleFormState } from './types';
 
 const INITIAL_FORM: ScheduleFormState = {
@@ -60,7 +61,7 @@ function CreateGeneralScheduleForm({ cardinalNumber, onClose }: CreateGeneralSch
 
   return (
     <>
-      <div className="scrollbar-custom tablet:px-15 max-h-175 overflow-y-auto px-400">
+      <div className="scrollbar-custom tablet:px-15 max-h-175 min-h-0 overflow-y-auto px-400">
         <h2 className="typo-h3 text-text-normal py-400">일정 생성</h2>
         <ScheduleFormBody
           form={form}
@@ -70,7 +71,7 @@ function CreateGeneralScheduleForm({ cardinalNumber, onClose }: CreateGeneralSch
         />
       </div>
 
-      <div className="bg-container-neutral flex items-center justify-end gap-200 px-400 pt-400 pb-500">
+      <div className={SCHEDULE_MODAL_FOOTER_CLASS}>
         <Button variant="secondary" size="lg" onClick={onClose}>
           취소
         </Button>

src/components/admin/schedule/modal/CreateScheduleModal.tsx

@@ -5,6 +5,7 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { AdminCloseIcon } from '@/assets/icons/admin';
 import { CreateGeneralScheduleForm } from '@/components/admin/schedule/modal/CreateGeneralScheduleForm';
 import { CreateSessionScheduleForm } from '@/components/admin/schedule/modal/CreateSessionScheduleForm';
+import { SCHEDULE_MODAL_CONTENT_CLASS } from '@/components/admin/schedule/modal/constants';
 import { SCHEDULE_TYPE_LABEL } from '@/constants/admin/schedule.constants';
 import type { ScheduleType } from '@/types/admin/schedule';
 import type { CreateSessionBody } from '@/types/admin/session';
@@ -31,8 +32,9 @@ function CreateScheduleModal({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="bg-background flex w-215 max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden rounded-lg p-0"
+        className={SCHEDULE_MODAL_CONTENT_CLASS}
         showCloseButton={false}
+        adminMobileFullscreen={false}
       >
         {/* Header with tabs */}
         <div className="tablet:px-700 tablet:pt-700 flex items-start justify-between px-400 pt-400">

src/components/admin/schedule/modal/CreateSessionScheduleForm.tsx

@@ -10,6 +10,7 @@ import type { CreateSessionBody } from '@/types/admin/session';
 
 import { isScheduleTitleValid } from '@/utils/admin/scheduleFormUtils';
 
+import { SCHEDULE_MODAL_FOOTER_CLASS } from './constants';
 import { isDateRangeValid, type ScheduleFormState, type SessionFormState } from './types';
 
 const INITIAL_FORM: ScheduleFormState = {
@@ -104,7 +105,7 @@ function CreateSessionScheduleForm({ onCreateSession, onClose }: CreateSessionSc
 
   return (
     <>
-      <div className="scrollbar-custom tablet:px-15 max-h-175 overflow-y-auto px-400">
+      <div className="scrollbar-custom tablet:px-15 max-h-175 min-h-0 overflow-y-auto px-400">
         <h2 className="typo-h3 text-text-normal py-400">세션 생성</h2>
         <SessionScheduleForm
           form={form}
@@ -117,7 +118,7 @@ function CreateSessionScheduleForm({ onCreateSession, onClose }: CreateSessionSc
         />
       </div>
 
-      <div className="bg-container-neutral flex items-center justify-end gap-200 px-400 pt-400 pb-500">
+      <div className={SCHEDULE_MODAL_FOOTER_CLASS}>
         <Button variant="secondary" size="lg" onClick={onClose}>
           취소
         </Button>

src/components/admin/schedule/modal/EditModalShell.tsx

@@ -4,6 +4,7 @@ import { Suspense } from 'react';
 import type { ReactNode, RefObject } from 'react';
 
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { SCHEDULE_MODAL_CONTENT_CLASS } from '@/components/admin/schedule/modal/constants';
 
 interface EditModalShellProps {
   open: boolean;
@@ -44,8 +45,9 @@ function EditModalShell({
       }}
     >
       <DialogContent
-        className="bg-background flex w-215 max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden rounded-lg p-0"
+        className={SCHEDULE_MODAL_CONTENT_CLASS}
         showCloseButton={false}
+        adminMobileFullscreen={false}
         onPointerDownOutside={(e) => {
           if (hasChangesRef.current) e.preventDefault();
         }}

src/components/admin/schedule/modal/EditScheduleModal.tsx

@@ -26,6 +26,7 @@ import {
   toInitialScheduleForm,
 } from '@/utils/admin/scheduleFormUtils';
 
+import { SCHEDULE_MODAL_FOOTER_CLASS } from './constants';
 import { DiscardConfirmArea } from './DiscardConfirmArea';
 import { EditModalShell } from './EditModalShell';
 import { ScheduleFormBody } from './ScheduleFormBody';
@@ -207,7 +208,7 @@ function EditScheduleModalContent({
       </div>
 
       {/* Body */}
-      <div className="scrollbar-custom tablet:px-700 max-h-175 overflow-y-auto px-400">
+      <div className="scrollbar-custom tablet:px-700 max-h-175 min-h-0 overflow-y-auto px-400">
         <h2 className="typo-h3 text-text-normal py-400">일반 일정 수정</h2>
         <ScheduleFormBody
           form={form}
@@ -218,7 +219,7 @@ function EditScheduleModalContent({
       </div>
 
       {/* Footer */}
-      <div className="bg-container-neutral flex items-center justify-end gap-200 px-400 pt-400 pb-500">
+      <div className={SCHEDULE_MODAL_FOOTER_CLASS}>
         <DiscardConfirmArea
           open={discardSource === 'cancel'}
           onOpenChange={closeDiscardAlert('cancel')}

src/components/admin/schedule/modal/constants.ts

@@ -0,0 +1,5 @@
+export const SCHEDULE_MODAL_CONTENT_CLASS =
+  'bg-background flex max-h-[calc(100%-2rem)] w-215 max-w-[calc(100%-2rem)] min-w-90 flex-col gap-0 overflow-hidden rounded-lg p-0';
+
+export const SCHEDULE_MODAL_FOOTER_CLASS =
+  'bg-container-neutral flex shrink-0 items-center justify-end gap-200 px-400 pt-400 pb-500';

src/components/admin/schedule/session/SessionTabContent.tsx

@@ -65,7 +65,7 @@ function SessionTabContent({
       {/* 세션 카드 */}
       <div className="bg-container-neutral flex flex-col rounded-lg shadow-sm">
         {/* 카드 헤더 */}
-        <div className="flex h-[72px] items-center justify-between px-600">
+        <div className="tablet:px-600 flex h-[72px] items-center justify-between px-400">
           <span className="typo-sub3 text-text-normal">세션</span>
           <Button variant="primary" size="lg" onClick={onCreateSession}>
             <Image src={AdminCalendarEditIcon} alt="" width={20} height={20} className="mr-1" />
@@ -74,7 +74,7 @@ function SessionTabContent({
         </div>
 
         {/* 카드 body */}
-        <div className="p-600 pt-0">
+        <div className="tablet:p-600 tablet:pt-0 p-400 pt-0">
           <SessionTable
             groups={sessions}
             onManageAttendance={onManageAttendance}

src/components/ui/dialog.tsx

@@ -8,7 +8,6 @@ import { cn } from '@/lib/cn';
 import { Button } from '@/components/ui/Button';
 import { Divider } from '@/components/ui/Divider';
 import { Icon } from '@/components/ui/Icon';
-// import { AdminMobileBlockedContent } from '@/components/admin/AdminMobileBlockedContent';
 import { AdminScopeBoundary, useIsAdminScope } from '@/providers';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -52,10 +51,13 @@ function DialogContent({
   overlayClassName,
   children,
   showCloseButton = true,
+  adminMobileFullscreen = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
+  /** admin 스코프에서 tablet 미만일 때 전체화면으로 전환할지 여부 (기본 true) */
+  adminMobileFullscreen?: boolean;
 }) {
   const isAdminScope = useIsAdminScope();
 
@@ -68,17 +70,13 @@ function DialogContent({
         className={cn(
           'bg-container-neutral data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[80] grid w-78.75 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border p-400 shadow-lg duration-200 outline-none sm:max-w-lg',
           isAdminScope &&
+            adminMobileFullscreen &&
             'max-tablet:inset-0 max-tablet:top-0 max-tablet:left-0 max-tablet:h-screen max-tablet:w-screen max-tablet:max-w-none max-tablet:translate-x-0 max-tablet:translate-y-0 max-tablet:rounded-none max-tablet:border-0 max-tablet:p-0',
           className,
         )}
         {...props}
       >
         {children}
-        {/* {isAdminScope ? (
-          <AdminMobileBlockedContent>{children}</AdminMobileBlockedContent>
-        ) : (
-          children
-        )} */}
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"

src/hooks/index.ts

@@ -23,3 +23,4 @@ export { useImageDrop } from './useImageDrop';
 export { useProgressAnimation } from './useProgressAnimation';
 export { useCodeHighlight } from './useCodeHighlight';
 export { useMonthNavigator } from './useMonthNavigator';
+export { useMediaQuery } from './useMediaQuery';

src/hooks/useMediaQuery.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+/**
+ * CSS 미디어 쿼리의 매치 여부를 구독한다.
+ * SSR 시에는 항상 false를 반환하고, 마운트 후 실제 값으로 동기화되어 하이드레이션 불일치를 피한다.
+ */
+function useMediaQuery(query: string): boolean {
+  const subscribe = (callback: () => void) => {
+    const mql = window.matchMedia(query);
+    mql.addEventListener('change', callback);
+    return () => mql.removeEventListener('change', callback);
+  };
+
+  const getSnapshot = () => window.matchMedia(query).matches;
+  const getServerSnapshot = () => false;
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { useMediaQuery };