LC-2789 admin 배너 관리

src/api/file.ts

@@ -15,6 +15,7 @@ export const fileType = z.enum([
   'BLOG_BANNER',
   'CURATION_ITEM',
   'BANNER_MAIN_BOTTOM',
+  'COMMON_BANNER',
 ]);
 
 export type FileType = z.infer<typeof fileType>;
@@ -50,3 +51,23 @@ export async function uploadFile({
 
   return fileUrl;
 }
+
+export async function uploadFileForId({
+  file,
+  type,
+}: {
+  file: File;
+  type: FileType;
+}) {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await axios.post('/file', formData, {
+    params: { type },
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return res.data.data.fileId as number;
+}

src/app/admin/AdminSidebar.tsx

@@ -61,14 +61,6 @@ const navData = [
         name: '홈 큐레이션 관리',
         url: '/admin/home/curation',
       },
-      {
-        name: '홈 상단 배너 관리',
-        url: '/admin/home/main-banners',
-      },
-      {
-        name: '홈 하단 배너 관리',
-        url: '/admin/home/bottom-banners',
-      },
     ],
   },
   {
@@ -79,8 +71,8 @@ const navData = [
         url: '/admin/banner/top-bar-banners',
       },
       {
-        name: '프로그램 배너 관리',
-        url: '/admin/banner/program-banners',
+        name: '통합 배너 관리',
+        url: '/admin/banner/common-banners',
       },
       {
         name: '팝업 관리',

src/app/admin/banner/common-banners/[id]/edit/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import LoadingContainer from '@/common/loading/LoadingContainer';
+import CommonBannerInputContent from '@/domain/admin/banner/common-banner/CommonBannerInputContent';
+import useCommonBannerEdit from '@/domain/admin/pages/banner/common-banner/useCommonBannerEdit';
+import EditorTemplate from '@/domain/admin/program/ui/editor/EditorTemplate';
+
+const CommonBannerEditPage = () => {
+  const { value, setValue, isLoading, handleSubmit } = useCommonBannerEdit();
+
+  if (isLoading || !value) {
+    return <LoadingContainer />;
+  }
+
+  return (
+    <EditorTemplate
+      title="배너 수정"
+      onSubmit={handleSubmit}
+      submitButton={{ text: '수정' }}
+      cancelButton={{ text: '취소', to: '-1' }}
+    >
+      <CommonBannerInputContent value={value} onChange={setValue} />
+    </EditorTemplate>
+  );
+};
+
+export default CommonBannerEditPage;

src/app/admin/banner/common-banners/new/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import CommonBannerInputContent from '@/domain/admin/banner/common-banner/CommonBannerInputContent';
+import useCommonBannerCreate from '@/domain/admin/pages/banner/common-banner/useCommonBannerCreate';
+import EditorTemplate from '@/domain/admin/program/ui/editor/EditorTemplate';
+
+const CommonBannerCreatePage = () => {
+  const { value, setValue, handleSubmit } = useCommonBannerCreate();
+
+  return (
+    <EditorTemplate
+      title="배너 등록"
+      onSubmit={handleSubmit}
+      submitButton={{ text: '등록' }}
+      cancelButton={{ text: '취소', to: '-1' }}
+    >
+      <CommonBannerInputContent value={value} onChange={setValue} />
+    </EditorTemplate>
+  );
+};
+
+export default CommonBannerCreatePage;

src/app/admin/banner/common-banners/page.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { CommonBannerAdminAllItemType } from '@/api/banner';
+import WarningModal from '@/common/alert/WarningModal';
+import EmptyContainer from '@/common/container/EmptyContainer';
+import LoadingContainer from '@/common/loading/LoadingContainer';
+import ActiveBannerTable from '@/domain/admin/banner/common-banner/ActiveBannerTable';
+import CommonBannerVisibilityToggle from '@/domain/admin/banner/common-banner/CommonBannerVisibilityToggle';
+import useCommonBanners from '@/domain/admin/pages/banner/common-banner/useCommonBanners';
+import TableLayout from '@/domain/admin/ui/table/TableLayout';
+import dayjs from '@/lib/dayjs';
+import { DataGrid, GridColDef, GridRowParams } from '@mui/x-data-grid';
+import { Pencil, RefreshCw, Trash } from 'lucide-react';
+import Link from 'next/link';
+
+const CommonBannersPage = () => {
+  const {
+    activeTab,
+    setActiveTab,
+    isLoading,
+    error,
+    groupedActiveBanners,
+    allBanners,
+    isDeleteModalShown,
+    setIsDeleteModalShown,
+    bannerIdForDeleting,
+    handleDeleteButtonClicked,
+    deleteCommonBanner,
+    isUpdatingExpired,
+    updateExpiredBanners,
+  } = useCommonBanners();
+
+  // 전체 탭용 컬럼
+  const allColumns = useMemo<
+    GridColDef<CommonBannerAdminAllItemType & { uniqueId: string }>[]
+  >(
+    () => [
+      {
+        field: 'title',
+        headerName: '제목',
+        flex: 1,
+        valueGetter: (_, row) => row.title || '-',
+      },
+      {
+        field: 'landingUrl',
+        headerName: '링크',
+        width: 300,
+        valueGetter: (_, row) => row.landingUrl || '-',
+      },
+      {
+        field: 'isVisible',
+        headerName: '노출 여부',
+        width: 150,
+        renderCell: ({ row }) => (
+          <CommonBannerVisibilityToggle
+            commonBannerId={row.commonBannerId}
+            isVisible={row.isVisible ?? false}
+          />
+        ),
+      },
+      {
+        field: 'date',
+        headerName: '노출 기간',
+        width: 250,
+        valueGetter: (_, row) =>
+          `${dayjs(row.startDate).format('YYYY-MM-DD')} ~ ${dayjs(
+            row.endDate,
+          ).format('YYYY-MM-DD')}`,
+      },
+      {
+        field: 'management',
+        type: 'actions',
+        headerName: '관리',
+        width: 100,
+        getActions: (
+          params: GridRowParams<
+            CommonBannerAdminAllItemType & { uniqueId: string }
+          >,
+        ) => {
+          const id = params.row.commonBannerId;
+
+          return [
+            <Link
+              href={`/admin/banner/common-banners/${id}/edit`}
+              key={'edit' + id}
+            >
+              <Pencil />
+            </Link>,
+            <Trash
+              key={'delete' + id}
+              className="ml-4 cursor-pointer"
+              color="red"
+              onClick={() => handleDeleteButtonClicked(Number(id))}
+            />,
+          ];
+        },
+      },
+    ],
+    [],
+  );
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <LoadingContainer />;
+    }
+
+    if (error) {
+      return <EmptyContainer />;
+    }
+
+    // 노출 중 탭: 커스텀 그룹핑 테이블
+    if (activeTab === 'active') {
+      return (
+        <div className="overflow-x-auto rounded-xxs border border-gray-200">
+          <ActiveBannerTable
+            groupedData={groupedActiveBanners}
+            onDeleteClick={handleDeleteButtonClicked}
+          />
+        </div>
+      );
+    }
+
+    // 전체 탭
+    if (activeTab === 'all') {
+      if (allBanners.length === 0) {
+        return <EmptyContainer />;
+      }
+
+      return (
+        <DataGrid
+          rows={allBanners}
+          getRowId={(row) => row.uniqueId}
+          columns={allColumns}
+          hideFooter
+        />
+      );
+    }
+
+    return <EmptyContainer />;
+  };
+
+  return (
+    <>
+      <TableLayout
+        title="통합 배너 관리"
+        headerButton={{
+          label: '등록',
+          href: '/admin/banner/common-banners/new',
+        }}
+        tabs={
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3 text-sm">
+              <button
+                className={
+                  activeTab === 'active' ? 'text-primary' : 'text-neutral-40'
+                }
+                onClick={() => setActiveTab('active')}
+              >
+                노출 중
+              </button>
+              <span className="text-gray-300">|</span>
+              <button
+                className={
+                  activeTab === 'all' ? 'text-primary' : 'text-neutral-40'
+                }
+                onClick={() => setActiveTab('all')}
+              >
+                전체
+              </button>
+            </div>
+            <button
+              className="flex items-center gap-1 rounded-xxs border border-primary bg-white px-4 py-0.5 text-xsmall14 text-primary duration-200 hover:bg-primary-20 hover:font-semibold disabled:opacity-50"
+              disabled={isUpdatingExpired}
+              onClick={() => updateExpiredBanners()}
+            >
+              <RefreshCw
+                size={14}
+                className={isUpdatingExpired ? 'animate-spin' : ''}
+              />
+              {isUpdatingExpired ? '업데이트 중...' : '업데이트'}
+            </button>
+          </div>
+        }
+      >
+        <div className="pb-24">{renderContent()}</div>
+      </TableLayout>
+      <WarningModal
+        isOpen={isDeleteModalShown}
+        title="배너 삭제"
+        content="정말로 배너를 삭제하시겠습니까?"
+        onConfirm={() =>
+          bannerIdForDeleting && deleteCommonBanner(bannerIdForDeleting)
+        }
+        onCancel={() => setIsDeleteModalShown(false)}
+        confirmText="삭제"
+      />
+    </>
+  );
+};
+
+export default CommonBannersPage;