[Feat] WTH-306: 어드민 일정 API 연결

src/app/globals.css

@@ -128,6 +128,7 @@
   --sub2-weight: var(--font-weight-black);
   --sub3-size: 16px;
   --sub3-line-height: 20px;
+  --sub3-weight: var(--font-weight-semibold);
   --body1-size: 16px;
   --body1-line-height: 24px;
   --body1-weight: 470;
@@ -212,6 +213,7 @@
   --sub2-size: 14px;
   --sub2-line-height: 18px;
   --sub3-size: 14px;
+  --font-weight: var(--sub3-weight);
   --sub3-line-height: 18px;
   --body1-size: 14px;
   --body1-line-height: 22px;

src/assets/icons/index.ts

@@ -51,3 +51,4 @@ export { default as TrashcanIcon } from './trash_can.svg';
 export { default as PersonIcon } from './person.svg';
 export { default as LogoutIcon } from './logout.svg';
 export { default as TimeIcon } from './time.svg';
+export { default as LocationIcon } from './location.svg';

src/components/admin/CardinalDropdown.tsx

@@ -24,7 +24,7 @@ function CardinalDropdown({ cardinals, activeCardinal, onSelect }: CardinalDropd
             type="button"
             className="border-line flex cursor-pointer items-center gap-700 rounded-sm border py-300 pr-300 pl-400"
           >
-            <span className="typo-sub2 text-text-normal w-12 text-left">
+            <span className="typo-button1 text-text-normal w-12 text-left">
               {activeCardinal ? `${activeCardinal.cardinalNumber}기` : '기수'}
             </span>
             <Icon src={ArrowDownIcon} size={24} className="text-icon-normal" />

src/components/admin/index.ts

@@ -1,5 +1,6 @@
 // admin components index file
 export { CardinalDropdown, type CardinalDropdownProps } from './CardinalDropdown';
+export { ModalIconButton, type ModalIconButtonProps } from './modal/ModalIconButton';
 export { AttendanceCard, type AttendanceCardProps } from './attendance/AttendanceCard';
 export { AttendancePageContent } from './attendance/AttendancePageContent';
 export { AdminInfoCard, type AdminInfoCardProps } from './club-info/AdminInfoCard';
@@ -21,13 +22,16 @@ export { MemberPageContent } from './member/MemberPageContent';
 export { MemberSearchBar, type MemberSearchBarProps } from './member/MemberSearchBar';
 export { MemberTable } from './member/MemberTable';
 export { MemberTopBar, type MemberTopBarProps } from './member/MemberTopBar';
-export { SchedulePageContent } from './schedule/SchedulePageContent';
+export { SchedulePageContent } from './schedule/general/SchedulePageContent';
 export { EditScheduleModal, type EditScheduleModalProps } from './schedule/modal/EditScheduleModal';
 export {
   CreateScheduleModal,
   type CreateScheduleModalProps,
 } from './schedule/modal/CreateScheduleModal';
-export { ScheduleFormField, type ScheduleFormFieldProps } from './schedule/ScheduleFormField';
+export {
+  ScheduleFormField,
+  type ScheduleFormFieldProps,
+} from './schedule/general/ScheduleFormField';
 export { BoardCard, type BoardCardProps } from './board/BoardCard';
 export { BoardToolbar, type BoardToolbarProps } from './board/BoardToolbar';
 export { BoardPageContent } from './board/BoardPageContent';

src/components/admin/layout/Header.tsx

@@ -1,61 +1,65 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
+// const PAGE_METADATA: Record<string, { title: string; description: string }> = {
+//   '/admin/member': {
+//     title: '멤버 관리',
+//     description:
+//       '가입 승인 등 멤버를 관리하는 페이지입니다. 정기모임을 모두 입력하신 후에 가입 승인을 해주시길 바랍니다.',
+//   },
+//   '/admin/schedule': {
+//     title: '일정 관리',
+//     description:
+//       '일반 일정과 세션 일정을 추가하고 수정하는 페이지입니다. 동아리 활동과 정기 모임 일정을 관리할 수 있습니다.',
+//   },
+//   '/admin/attendance': {
+//     title: '출석 관리',
+//     description: '기수를 선택하고, 해당 모임에 대한 출석을 수정하는 페이지입니다.',
+//   },
+//   '/admin/board': {
+//     title: '게시판 관리',
+//     description:
+//       '게시판을 관리하는 페이지입니다. 유저 서비스에서 사용할 게시판을 설정할 수 있습니다.',
+//   },
+//   '/admin/club-info': {
+//     title: '동아리 관리',
+//     description: '부원에게 공유할 동아리의 프로필과 그 외의 정보를 수정하는 페이지입니다.',
+//   },
 
-const PAGE_METADATA: Record<string, { title: string; description: string }> = {
-  '/admin/member': {
-    title: '멤버 관리',
-    description:
-      '가입 승인 등 멤버를 관리하는 페이지입니다. 정기모임을 모두 입력하신 후에 가입 승인을 해주시길 바랍니다.',
-  },
-  '/admin/schedule': {
-    title: '일정 관리',
-    description:
-      '일반 일정과 세션 일정을 추가하고 수정하는 페이지입니다. 동아리 활동과 정기 모임 일정을 관리할 수 있습니다.',
-  },
-  '/admin/attendance': {
-    title: '출석 관리',
-    description: '기수를 선택하고, 해당 모임에 대한 출석을 수정하는 페이지입니다.',
-  },
-  '/admin/board': {
-    title: '게시판 관리',
-    description:
-      '게시판을 관리하는 페이지입니다. 유저 서비스에서 사용할 게시판을 설정할 수 있습니다.',
-  },
-  '/admin/club-info': {
-    title: '동아리 관리',
-    description: '부원에게 공유할 동아리의 프로필과 그 외의 정보를 수정하는 페이지입니다.',
-  },
+//   // '/admin/penalty': {
+//   //   title: '페널티 관리',
+//   //   description: '기수를 선택하고, 해당 멤버에 대한 페널티를 수정하는 페이지입니다.',
+//   // },
+//   // '/admin/dues': {
+//   //   title: '회비 관리',
+//   //   description:
+//   //     '기수 시작시 이월된 회비와 해당 기수 회비를 종합해 회비를 등록해주시기 바랍니다. 회비 등록은 기수당 한 번만 가능합니다.',
+//   // },
+// };
+'use client';
 
-  // '/admin/penalty': {
-  //   title: '페널티 관리',
-  //   description: '기수를 선택하고, 해당 멤버에 대한 페널티를 수정하는 페이지입니다.',
-  // },
-  // '/admin/dues': {
-  //   title: '회비 관리',
-  //   description:
-  //     '기수 시작시 이월된 회비와 해당 기수 회비를 종합해 회비를 등록해주시기 바랍니다. 회비 등록은 기수당 한 번만 가능합니다.',
-  // },
-};
+import { useLogout } from '@/hooks';
 
 export function Header() {
-  const pathname = usePathname();
+  const handleLogout = useLogout();
+  // const pathname = usePathname();
 
-  const metadata = Object.entries(PAGE_METADATA).find(([path]) => pathname.startsWith(path))?.[1];
+  // const metadata = Object.entries(PAGE_METADATA).find(([path]) => pathname.startsWith(path))?.[1];
 
   return (
-    <header className="border-line bg-background flex h-15 w-full shrink-0 items-center gap-300 border-b px-500">
-      {metadata && (
+    <header className="border-line bg-background flex w-full shrink-0 items-center gap-300 px-700 pt-2">
+      {/* {metadata && (
         <>
           <div className="border-line h-5 w-px shrink-0" />
           <span className="typo-sub1 text-text-strong shrink-0">{metadata.title}</span>
           <span className="typo-sub3 text-text-alternative min-w-0 truncate">
             {metadata.description}
           </span>
         </>
-      )}
+      )} */}
 
-      <button className="border-line typo-button2 bg-button-neutral text-text-strong hover:bg-container-neutral-interaction ml-auto shrink-0 cursor-pointer rounded-sm border px-300 py-200">
+      <button
+        type="button"
+        onClick={handleLogout}
+        className="border-line typo-button2 bg-button-neutral text-text-strong hover:bg-container-neutral-interaction ml-auto shrink-0 cursor-pointer rounded-sm border px-300 py-200"
+      >
         Logout
       </button>
     </header>

src/components/admin/layout/NavItem.tsx

@@ -51,21 +51,21 @@ function NavItem({
         onClick={() => window.open(path, '_blank', 'noopener,noreferrer')}
       >
         {iconEl}
-        {!collapsed && <span className="typo-sub2">{label}</span>}
+        {!collapsed && <span className="typo-sub3">{label}</span>}
       </button>
     );
   } else if (external) {
     el = (
       <Link href={path} className={cls} target="_blank" rel="noopener noreferrer">
         {iconEl}
-        {!collapsed && <span className="typo-sub2">{label}</span>}
+        {!collapsed && <span className="typo-sub3">{label}</span>}
       </Link>
     );
   } else {
     el = (
       <Link href={path} className={cls}>
         {iconEl}
-        {!collapsed && <span className="typo-sub2">{label}</span>}
+        {!collapsed && <span className="typo-sub3">{label}</span>}
       </Link>
     );
   }

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

@@ -23,7 +23,7 @@ function MonthNavigator({ className, year, month, onPrev, onNext, ...props }: Mo
       >
         <Image src={AdminSquareLeftIcon} alt="이전 달" width={20} height={20} />
       </button>
-      <span className="typo-sub2 text-text-strong">{formatYearMonth(year, month)}</span>
+      <span className="typo-sub1 text-text-strong">{formatYearMonth(year, month)}</span>
       <button
         type="button"
         onClick={onNext}

src/components/admin/schedule/ScheduleFormField.tsx → src/components/admin/schedule/general/ScheduleFormField.tsx

@@ -8,7 +8,7 @@ function ScheduleFormField({ label, className, children, ...props }: ScheduleFor
   return (
     <div className={cn('flex flex-col', className)} {...props}>
       <div className="flex h-12 items-center px-400">
-        <label className="typo-sub2 text-text-normal">{label}</label>
+        <label className="typo-sub3 text-text-normal">{label}</label>
       </div>
       {children}
     </div>

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

@@ -20,9 +20,9 @@ function ScheduleItem({
   onDelete,
   ...props
 }: ScheduleItemProps) {
-  const day = getDayOfMonth(schedule.startDateTime);
-  const dayLabel = getDayLabel(schedule.startDateTime);
-  const dateTimeText = formatScheduleDateTime(schedule.startDateTime);
+  const day = getDayOfMonth(schedule.start);
+  const dayLabel = getDayLabel(schedule.start);
+  const dateTimeText = formatScheduleDateTime(schedule.start);
 
   return (
     <div
@@ -41,7 +41,7 @@ function ScheduleItem({
 
       {/* Content column */}
       <div className="flex flex-1 flex-col justify-center gap-200 self-stretch">
-        <span className="typo-sub2 text-text-strong">{schedule.title}</span>
+        <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>
           <ScheduleTag icon="calendar">{dateTimeText}</ScheduleTag>

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

@@ -42,7 +42,7 @@ function ScheduleList({
       ) : (
         schedules.map((schedule, index) => (
           <ScheduleItem
-            key={schedule.scheduleId}
+            key={schedule.id}
             schedule={schedule}
             isLast={index === schedules.length - 1}
             onEdit={() => onEdit?.(schedule)}