motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

banner page

Browse Source
This commit is contained in:
wallace
2025-11-30 00:25:16 +09:00
parent 109ca05e23
commit 54d763e008
7 changed files with 1899 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/app/admin/banner/page.tsx Normal file
View File

@@ -0,0 +1,180 @@
'use client';
import { useState } from "react";
import AdminSidebar from "@/app/components/AdminSidebar";
import BannerRegistrationModal, { type Banner } from "./BannerRegistrationModal";
export default function AdminBannerPage() {
// TODO: 나중에 실제 데이터로 교체
const [banners, setBanners] = useState<Banner[]>([
{
id: 1,
order: 1,
imageUrl: "http://localhost:3845/assets/43be88ae6f992fc221d0d9c29e82073e7b202f46.png",
title: "XR 교육 플랫폼에 오신 것을 환영합니다",
description: "다양한 강좌와 함께 성장하는 학습 경험을 시작하세요.",
registeredDate: "2025-09-10",
},
]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [editingBanner, setEditingBanner] = useState<Banner | null>(null);
const handleRegister = () => {
setEditingBanner(null);
setIsModalOpen(true);
};
const handleModalClose = () => {
setIsModalOpen(false);
setEditingBanner(null);
};
const handleSaveBanner = (title: string, description: string, imageKey?: string) => {
// TODO: API가 추가되면 실제로 배너를 저장하고 리스트를 새로고침
console.log('배너 저장:', { title, description, imageKey });
setIsModalOpen(false);
setEditingBanner(null);
};
const handleDeleteBanner = () => {
// TODO: API가 추가되면 실제로 배너를 삭제하고 리스트를 새로고침
console.log('배너 삭제');
setIsModalOpen(false);
setEditingBanner(null);
};
const handleRowClick = (banner: Banner) => {
setEditingBanner(banner);
setIsModalOpen(true);
};
return (
<div className="min-h-screen flex flex-col bg-white">
{/* 메인 레이아웃 */}
<div className="flex flex-1 min-h-0 justify-center">
<div className="w-[1440px] flex min-h-0">
{/* 사이드바 */}
<div className="flex">
<AdminSidebar />
</div>
{/* 메인 콘텐츠 */}
<main className="w-[1120px] bg-white">
<div className="h-full flex flex-col px-8">
{/* 제목 영역 */}
<div className="h-[100px] flex items-center">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
배너 관리
</h1>
</div>
{/* 콘텐츠 영역 */}
<div className="flex-1 pt-8 flex flex-col gap-4">
{/* 상단 정보 및 버튼 */}
<div className="flex items-center justify-between">
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47]">
총 {banners.length}건
</p>
<div className="flex gap-3">
<button
type="button"
onClick={handleRegister}
className="bg-[#1f2b91] text-white text-[16px] font-semibold leading-[1.5] px-4 py-2 rounded-lg hover:bg-[#1a2478] transition-colors"
>
등록하기
</button>
</div>
</div>
{/* 테이블 */}
{banners.length === 0 ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
현재 관리할 수 있는 항목이 없습니다.
</p>
</div>
) : (
<div className="border border-[#dee1e6] rounded-lg overflow-hidden">
<div className="flex flex-col">
{/* 테이블 헤더 */}
<div className="bg-gray-50 flex h-12">
<div className="border-r border-[#dee1e6] flex items-center justify-center px-4 py-3 shrink-0 w-[57px]">
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">
순서
</p>
</div>
<div className="border-r border-[#dee1e6] flex items-center px-4 py-3 shrink-0 w-[240px]">
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">
배너 이미지
</p>
</div>
<div className="border-r border-[#dee1e6] flex items-center px-4 py-3 flex-1 min-w-0">
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">
배너 문구
</p>
</div>
<div className="flex items-center px-4 py-3 shrink-0 w-[140px]">
<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">
등록일
</p>
</div>
</div>
{/* 테이블 바디 */}
{banners.map((banner) => (
<div
key={banner.id}
className="border-t border-[#dee1e6] flex cursor-pointer hover:bg-[#F5F7FF] transition-colors"
onClick={() => handleRowClick(banner)}
>
<div className="border-r border-[#dee1e6] flex items-center justify-center px-4 py-3 shrink-0 w-[57px]">
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">
{banner.order}
</p>
</div>
<div className="border-r border-[#dee1e6] flex items-center justify-center px-4 py-3 shrink-0 w-[240px]">
<div className="h-[120px] w-[208px] rounded overflow-hidden">
<img
src={banner.imageUrl}
alt={banner.title}
className="w-full h-full object-cover"
/>
</div>
</div>
<div className="border-r border-[#dee1e6] flex items-center px-4 py-3 flex-1 min-w-0">
<div className="flex flex-col gap-1">
<p className="text-[16px] font-semibold leading-[1.5] text-[#1b2027]">
{banner.title}
</p>
<p className="text-[14px] font-medium leading-[1.5] text-[#333c47]">
{banner.description}
</p>
</div>
</div>
<div className="flex items-center px-4 py-3 shrink-0 w-[140px]">
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">
{banner.registeredDate}
</p>
</div>
</div>
))}
</div>
</div>
)}
</div>
</div>
</main>
</div>
</div>
<BannerRegistrationModal
open={isModalOpen}
onClose={handleModalClose}
onSave={handleSaveBanner}
onDelete={handleDeleteBanner}
editingBanner={editingBanner}
/>
</div>
);
}