교육과정정 상세보기 수정1

prisma.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig, env } from "prisma/config";
-import "dotenv/config";
-
-export default defineConfig({
-  schema: "prisma/schema.prisma",
-  migrations: {
-    path: "prisma/migrations",
-  },
-  engine: "classic",
-  datasource: {
-    url: env("DATABASE_URL"),
-  },
-});

src/app/NavBar.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import MainLogoSvg from "./svgs/mainlogosvg";
 import ChevronDownSvg from "./svgs/chevrondownsvg";
+import apiService from "./lib/apiService";
 
 const NAV_ITEMS = [
   { label: "교육 과정 목록", href: "/course-list" },
@@ -12,15 +13,23 @@ const NAV_ITEMS = [
   { label: "공지사항", href: "/notices" },
 ];
 
+const INSTRUCTOR_NAV_ITEMS = [
+  { label: "강좌 현황", href: "/instructor/courses" },
+  { label: "학습 자료실", href: "/admin/resources" },
+  { label: "공지사항", href: "/admin/notices" },
+];
+
 export default function NavBar() {
   const pathname = usePathname();
   const router = useRouter();
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [userName, setUserName] = useState<string>('');
+  const [userRole, setUserRole] = useState<string>('');
   const userMenuRef = useRef<HTMLDivElement | null>(null);
   const userButtonRef = useRef<HTMLButtonElement | null>(null);
   const hideCenterNav = /^\/[^/]+\/review$/.test(pathname);
   const isAdminPage = pathname.startsWith('/admin');
+  const isInstructorPage = pathname.startsWith('/instructor');
 
   // 사용자 정보 가져오기 및 비활성화 계정 체크
   useEffect(() => {
@@ -46,32 +55,20 @@ export default function NavBar() {
           localStorage.setItem('token', cookieToken);
         }
 
-        const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
-          : 'https://hrdi.coconutmeet.net/auth/me';
+        const response = await apiService.getCurrentUser();
 
-        const response = await fetch(apiUrl, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        });
-
-        if (!response.ok) {
-          if (response.status === 401) {
-            // 토큰이 만료되었거나 유효하지 않은 경우
-            localStorage.removeItem('token');
-            document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-            // 로그인 페이지가 아닐 때만 리다이렉트
-            if (isMounted && pathname !== '/login') {
-              router.push('/login');
-            }
+        if (response.status === 401) {
+          // 토큰이 만료되었거나 유효하지 않은 경우
+          localStorage.removeItem('token');
+          document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+          // 로그인 페이지가 아닐 때만 리다이렉트
+          if (isMounted && pathname !== '/login') {
+            router.push('/login');
           }
           return;
         }
 
-        const data = await response.json();
+        const data = response.data;
         
         // 계정 상태 확인
         const userStatus = data.status || data.userStatus;
@@ -86,8 +83,12 @@ export default function NavBar() {
           return;
         }
 
-        if (isMounted && data.name) {
-          setUserName(data.name);
+        if (isMounted) {
+          const role = data.role || data.userRole || '';
+          setUserRole(role);
+          if (data.name) {
+            setUserName(data.name);
+          }
         }
       } catch (error) {
         console.error('사용자 정보 조회 오류:', error);
@@ -129,11 +130,36 @@ export default function NavBar() {
     <header className="bg-[#060958] h-20">
       <div className="mx-auto flex h-full w-full max-w-[1440px] items-center justify-between px-8">
         <div className="flex flex-1 items-center gap-9">
-          <Link href="/" aria-label="XR LMS 홈" className="flex items-center gap-2">
+          <Link 
+            href={(userRole === 'ADMIN' || userRole === 'admin') ? "/instructor" : "/"} 
+            aria-label="XR LMS 홈" 
+            className="flex items-center gap-2"
+          >
             <MainLogoSvg width={46.703} height={36} />
             <span className="text-2xl font-extrabold leading-[1.45] text-white">XR LMS</span>
           </Link>
-          {!hideCenterNav && !isAdminPage && (
+          {!hideCenterNav && !isAdminPage && isInstructorPage && (
+            <nav className="flex h-full items-center">
+              {INSTRUCTOR_NAV_ITEMS.map((item) => {
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={["px-4 py-2 text-[16px] font-semibold text-white"].join(" ")}
+                  >
+                    {item.label}
+                  </Link>
+                );
+              })}
+              <Link
+                href="/admin"
+                className={["px-4 py-2 text-[16px] font-semibold text-white"].join(" ")}
+              >
+                관리자페이지
+              </Link>
+            </nav>
+          )}
+          {!hideCenterNav && !isAdminPage && !isInstructorPage && (
             <nav className="flex h-full items-center">
               {NAV_ITEMS.map((item) => {
                 return (
@@ -150,26 +176,47 @@ export default function NavBar() {
           )}
         </div>
         <div className="relative flex items-center gap-2">
-          {isAdminPage ? (
+          {(isAdminPage || isInstructorPage) ? (
             <>
-              <Link href="/menu/account" className="px-4 py-2 text-[16px] font-semibold text-white">
-                내 정보
-              </Link>
               <button
+                ref={userButtonRef}
                 type="button"
-                onClick={() => {
-                  // 로컬 스토리지에서 토큰 제거
-                  localStorage.removeItem('token');
-                  localStorage.removeItem('user');
-                  // 쿠키에서 토큰 제거
-                  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-                  // 로그인 페이지로 리다이렉트
-                  window.location.href = '/login';
-                }}
-                className="px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
+                onClick={() => setIsUserMenuOpen((v) => !v)}
+                aria-haspopup="menu"
+                aria-expanded={isUserMenuOpen}
+                className="flex items-center gap-1 px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
               >
-                로그아웃
+                {userName || '사용자'}
+                <ChevronDownSvg
+                  width={16}
+                  height={16}
+                  className={["transition-transform", isUserMenuOpen ? "rotate-180" : "rotate-0"].join(" ")}
+                />
               </button>
+              {isUserMenuOpen && (
+                <div
+                  ref={userMenuRef}
+                  role="menu"
+                  aria-label="사용자 메뉴"
+                  className="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-[0_0_8px_0_rgba(0,0,0,0.25)] p-3 z-50"
+                >
+                  <button
+                    role="menuitem"
+                    className="flex items-center w-[136px] h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-none"
+                    onClick={() => {
+                      // 로컬 스토리지에서 토큰 제거
+                      localStorage.removeItem('token');
+                      localStorage.removeItem('user');
+                      // 쿠키에서 토큰 제거
+                      document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+                      // 로그인 페이지로 리다이렉트
+                      window.location.href = '/login';
+                    }}
+                  >
+                    로그아웃
+                  </button>
+                </div>
+              )}
             </>
           ) : (
             <>

src/app/admin/banner/BannerRegistrationModal.tsx

@@ -0,0 +1,606 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import ModalCloseSvg from "@/app/svgs/closexsvg";
+import CloseXOSvg from "@/app/svgs/closexo";
+import apiService from "@/app/lib/apiService";
+
+export type Banner = {
+  id: number;
+  order: number;
+  imageUrl: string;
+  title: string;
+  description: string;
+  registeredDate: string;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSave?: (title: string, description: string, imageKey?: string) => void;
+  onDelete?: () => void;
+  editingBanner?: Banner | null;
+};
+
+export default function BannerRegistrationModal({ open, onClose, onSave, onDelete, editingBanner }: Props) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isImageDeleted, setIsImageDeleted] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // previewUrl 변경 시 이전 Blob URL 정리
+  useEffect(() => {
+    return () => {
+      if (previewUrl && previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  // 수정 모드일 때 기존 데이터 채우기
+  useEffect(() => {
+    if (open && editingBanner) {
+      setTitle(editingBanner.title);
+      setDescription(editingBanner.description);
+      
+      // 수정 모드일 때 이미지 로드
+      if (editingBanner.imageUrl) {
+        setIsImageDeleted(false);
+        setSelectedImage(null);
+        setPreviewUrl(editingBanner.imageUrl);
+      } else {
+        setIsImageDeleted(false);
+        setSelectedImage(null);
+        setPreviewUrl(null);
+      }
+    } else if (!open) {
+      setTitle("");
+      setDescription("");
+      setErrors({});
+      setIsDeleteConfirmOpen(false);
+      setSelectedImage(null);
+      setPreviewUrl(null);
+      setIsDragging(false);
+      setIsImageDeleted(false);
+    }
+  }, [open, editingBanner]);
+
+  // 모달 클릭 시 이벤트 전파 방지
+  const handleModalClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  // 저장 버튼 클릭 핸들러
+  const handleSave = async () => {
+    const nextErrors: Record<string, string> = {};
+    
+    if (!title.trim()) {
+      nextErrors.title = "배너 제목을 입력해 주세요.";
+    }
+    if (!description.trim()) {
+      nextErrors.description = "배너 설명을 입력해 주세요.";
+    }
+    
+    setErrors(nextErrors);
+    
+    if (Object.keys(nextErrors).length > 0) {
+      return;
+    }
+    
+    if (isSaving) return;
+    
+    setIsSaving(true);
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.submit;
+      return next;
+    });
+    
+    try {
+      let imageKey: string | null = null;
+
+      // 새 이미지가 선택된 경우 업로드
+      if (selectedImage) {
+        try {
+          const uploadResponse = await apiService.uploadFile(selectedImage);
+          
+          if (uploadResponse.data) {
+            imageKey = uploadResponse.data.imageKey 
+              || uploadResponse.data.key 
+              || uploadResponse.data.id 
+              || uploadResponse.data.fileKey 
+              || uploadResponse.data.fileId
+              || (uploadResponse.data.data && (uploadResponse.data.data.imageKey || uploadResponse.data.data.key))
+              || null;
+          }
+        } catch (uploadError) {
+          const errorMessage = uploadError instanceof Error ? uploadError.message : '이미지 업로드 중 오류가 발생했습니다.';
+          console.error('이미지 업로드 오류:', errorMessage);
+          setErrors((prev) => ({ 
+            ...prev, 
+            image: '이미지 업로드 중 오류가 발생했습니다. 이미지 없이 계속 진행됩니다.',
+          }));
+        }
+      }
+
+      // TODO: 배너 API가 추가되면 아래 주석을 해제하고 실제 API 호출
+      /*
+      if (editingBanner && editingBanner.id) {
+        // 수정 모드
+        await apiService.updateBanner(editingBanner.id, {
+          title: title.trim(),
+          description: description.trim(),
+          imageKey: isImageDeleted ? "null" : (imageKey || editingBanner.imageUrl || "null"),
+        });
+      } else {
+        // 등록 모드
+        await apiService.createBanner({
+          title: title.trim(),
+          description: description.trim(),
+          imageKey: imageKey || undefined,
+        });
+      }
+      */
+
+      // 성공 시 onSave 콜백 호출 및 모달 닫기
+      if (onSave) {
+        onSave(title.trim(), description.trim(), imageKey || undefined);
+      }
+      onClose();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
+      console.error('배너 저장 오류:', errorMessage);
+      setErrors({ submit: errorMessage });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 삭제 버튼 클릭 핸들러
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDeleteConfirmOpen(true);
+  };
+
+  // 삭제 확인 핸들러
+  const handleDeleteConfirm = async () => {
+    if (!editingBanner || !editingBanner.id) {
+      console.error('삭제할 배너 정보가 없습니다.');
+      setErrors({ submit: '삭제할 배너 정보가 없습니다.' });
+      return;
+    }
+
+    if (isDeleting) return;
+
+    setIsDeleting(true);
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.submit;
+      return next;
+    });
+
+    try {
+      // TODO: 배너 API가 추가되면 아래 주석을 해제하고 실제 API 호출
+      // await apiService.deleteBanner(editingBanner.id);
+
+      // 성공 시 모달 닫기 및 콜백 호출
+      setIsDeleteConfirmOpen(false);
+      if (onDelete) {
+        onDelete();
+      }
+      onClose();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '배너 삭제 중 오류가 발생했습니다.';
+      console.error('배너 삭제 실패:', errorMessage);
+      setErrors({ submit: errorMessage });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // 삭제 취소 핸들러
+  const handleDeleteCancel = () => {
+    setIsDeleteConfirmOpen(false);
+  };
+
+  // 파일 유효성 검사
+  const validateImageFile = (file: File): string | null => {
+    const maxSize = 30 * 1024 * 1024; // 30MB
+    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
+    
+    if (!allowedTypes.includes(file.type)) {
+      return "PNG 또는 JPG 파일만 업로드 가능합니다.";
+    }
+    
+    if (file.size > maxSize) {
+      return "파일 크기는 30MB 미만이어야 합니다.";
+    }
+    
+    return null;
+  };
+
+  // 이미지 파일 처리
+  const handleImageFile = (file: File) => {
+    const error = validateImageFile(file);
+    if (error) {
+      setErrors((prev) => ({ ...prev, image: error }));
+      return;
+    }
+
+    setSelectedImage(file);
+    setIsImageDeleted(false);
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.image;
+      return next;
+    });
+
+    // 기존 previewUrl이 Blob URL인 경우 메모리 해제
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    // 미리보기 URL 생성
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  // 파일 선택 핸들러
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      handleImageFile(file);
+    }
+  };
+
+  // 클릭으로 파일 선택
+  const handleImageAreaClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // 드래그 오버 핸들러
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  // 드래그 리브 핸들러
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  // 드롭 핸들러
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      handleImageFile(file);
+    }
+  };
+
+  // 이미지 삭제 핸들러
+  const handleRemoveImage = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedImage(null);
+    // previewUrl이 Blob URL인 경우 메모리 해제
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl(null);
+    setIsImageDeleted(true);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.image;
+      return next;
+    });
+  };
+
+  if (!open && !isDeleteConfirmOpen) return null;
+
+  return (
+    <>
+      {/* 메인 모달 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          aria-hidden={!open}
+          onClick={onClose}
+        >
+          <div
+            className="absolute inset-0 bg-black/40"
+            aria-hidden="true"
+          />
+          <div
+            ref={modalRef}
+            className="relative z-10 shadow-xl"
+            onClick={handleModalClick}
+          >
+            <div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
+          {/* Header */}
+          <div className="flex items-center justify-between gap-[10px] p-6">
+            <h2 className="text-[20px] font-bold leading-normal text-[var(--color-neutral-700)]">
+              {editingBanner ? "배너 수정" : "배너 등록"}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-6 h-6 flex items-center justify-center cursor-pointer hover:opacity-80 shrink-0"
+              aria-label="닫기"
+            >
+              <ModalCloseSvg />
+            </button>
+          </div>
+
+          {/* Form Container */}
+          <div className="px-6 py-0">
+            <div className="flex flex-col gap-6">
+              {/* 배너 제목 */}
+              <div className="flex flex-col gap-2">
+                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
+                  배너 제목<span className="text-[var(--color-error)]">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => {
+                    setTitle(e.target.value);
+                    if (errors.title) {
+                      setErrors((prev) => {
+                        const next = { ...prev };
+                        delete next.title;
+                        return next;
+                      });
+                    }
+                  }}
+                  placeholder="배너 제목을 입력해 주세요."
+                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-normal text-[var(--color-text-title)] placeholder:text-[var(--color-text-placeholder-alt)] focus:outline-none ${
+                    errors.title
+                      ? "border-[var(--color-error)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
+                      : "border-[var(--color-neutral-40)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
+                  }`}
+                />
+                {errors.title && (
+                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.title}</p>
+                )}
+              </div>
+
+              {/* 배너 설명 */}
+              <div className="flex flex-col gap-2">
+                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
+                  배너 설명<span className="text-[var(--color-error)]">*</span>
+                </label>
+                <textarea
+                  value={description}
+                  onChange={(e) => {
+                    setDescription(e.target.value);
+                    if (errors.description) {
+                      setErrors((prev) => {
+                        const next = { ...prev };
+                        delete next.description;
+                        return next;
+                      });
+                    }
+                  }}
+                  placeholder="배너 설명을 입력해 주세요."
+                  rows={4}
+                  className={`px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-normal text-[var(--color-text-title)] placeholder:text-[var(--color-text-placeholder-alt)] focus:outline-none resize-none ${
+                    errors.description
+                      ? "border-[var(--color-error)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
+                      : "border-[var(--color-neutral-40)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
+                  }`}
+                />
+                {errors.description && (
+                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.description}</p>
+                )}
+              </div>
+
+              {/* 배너 이미지 */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] whitespace-pre">
+                      배너 이미지
+                    </label>
+                    <span className="text-[13px] font-normal leading-[1.4] text-[var(--color-text-meta)]">
+                      30MB 미만의 PNG, JPG
+                    </span>
+                  </div>
+                </div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/png,image/jpeg,image/jpg"
+                  onChange={handleFileSelect}
+                  className="hidden"
+                  aria-label="이미지 파일 선택"
+                />
+                <div
+                  onClick={handleImageAreaClick}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  className={`border border-dashed min-h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer transition-colors px-0 relative overflow-hidden ${
+                    isDragging
+                      ? "bg-blue-50 border-blue-300"
+                      : previewUrl
+                      ? "bg-white border-[var(--color-neutral-40)]"
+                      : "bg-gray-50 border-[var(--color-neutral-40)] hover:bg-gray-100"
+                  }`}
+                >
+                  {previewUrl ? (
+                    <>
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="relative flex items-start">
+                          <img
+                            src={previewUrl}
+                            alt="미리보기"
+                            className="h-[160px] w-auto object-contain"
+                          />
+                          <button
+                            type="button"
+                            onClick={handleRemoveImage}
+                            className="w-[18px] h-[18px] flex items-center justify-center ml-1 z-10 hover:opacity-80 transition-opacity shrink-0"
+                            aria-label="이미지 삭제"
+                          >
+                            <CloseXOSvg width={18} height={18} />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="absolute inset-0 bg-black/0 hover:bg-black/20 transition-colors flex items-center justify-center my-4">
+                        <div className="text-center opacity-0 hover:opacity-100 transition-opacity">
+                          <p className="text-[14px] font-normal leading-normal text-white">
+                            클릭하여 이미지 변경
+                          </p>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-10 h-10 flex items-center justify-center shrink-0">
+                        <svg
+                          width="40"
+                          height="40"
+                          viewBox="0 0 40 40"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M20 13.3333V26.6667M13.3333 20H26.6667"
+                            stroke="var(--color-text-meta)"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-[14px] font-normal leading-normal text-[var(--color-text-meta)] whitespace-pre">
+                          (클릭하여 이미지 업로드)
+                          <br aria-hidden="true" />
+                          미첨부 시 기본 이미지가 노출됩니다.
+                        </p>
+                      </div>
+                    </>
+                  )}
+                </div>
+                {errors.image && (
+                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.image}</p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* 에러 메시지 표시 */}
+          {errors.submit && (
+            <div className="px-6 pb-2">
+              <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
+            </div>
+          )}
+
+          {/* Actions Container */}
+          <div className="flex flex-col gap-8 h-[96px] items-center p-6">
+            <div className="flex items-center justify-center gap-3 w-full">
+              {editingBanner && (
+                <button
+                  type="button"
+                  onClick={handleDeleteClick}
+                  className="h-[48px] px-4 rounded-[10px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] w-[136px] hover:bg-[#fae6e6] transition-colors cursor-pointer"
+                >
+                  삭제
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={onClose}
+                className="h-[48px] px-4 rounded-[10px] bg-[var(--color-bg-gray-light)] text-[16px] font-semibold leading-normal text-[var(--color-basic-text)] w-[136px] hover:bg-[var(--color-bg-gray-hover)] transition-colors cursor-pointer"
+              >
+                취소
+              </button>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={isSaving}
+                className="h-[48px] px-4 rounded-[10px] bg-[var(--color-active-button)] text-[16px] font-semibold leading-normal text-white w-[136px] hover:bg-[var(--color-active-button-hover)] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSaving ? '저장 중...' : '저장'}
+              </button>
+            </div>
+          </div>
+        </div>
+          </div>
+        </div>
+      )}
+
+      {/* 삭제 확인 모달 */}
+      {isDeleteConfirmOpen && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center">
+          <div 
+            className="absolute inset-0 bg-black/40"
+            onClick={handleDeleteCancel}
+            aria-hidden="true"
+          />
+          <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end">
+            <div className="flex flex-col gap-[16px] items-start justify-center w-full">
+              <div className="flex gap-[8px] items-start w-full">
+                <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+                  배너를 삭제하시겠습니까?
+                </p>
+              </div>
+              <div className="flex gap-[8px] items-start w-full">
+                <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+                  <p className="mb-0">삭제 버튼을 누르면 배너 정보가 삭제됩니다.</p>
+                  <p>정말 삭제하시겠습니까?</p>
+                </div>
+              </div>
+              {errors.submit && (
+                <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
+              )}
+            </div>
+            <div className="flex gap-[8px] items-center justify-end shrink-0">
+              <button
+                type="button"
+                onClick={handleDeleteCancel}
+                className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
+              >
+                <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
+                  취소
+                </p>
+              </button>
+              <button
+                type="button"
+                onClick={handleDeleteConfirm}
+                disabled={isDeleting}
+                className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
+                  {isDeleting ? '삭제 중...' : '삭제'}
+                </p>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+

src/app/admin/banner/page.tsx

@@ -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>
+  );
+}
+

src/app/admin/courses/CourseRegistrationModal.tsx

@@ -6,6 +6,7 @@ import DropdownIcon from "@/app/svgs/dropdownicon";
 import CloseXOSvg from "@/app/svgs/closexo";
 import { type UserRow } from "@/app/admin/id/mockData";
 import { type Course } from "./mockData";
+import apiService from "@/app/lib/apiService";
 
 type Props = {
   open: boolean;
@@ -25,6 +26,8 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isImageDeleted, setIsImageDeleted] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -39,33 +42,9 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     
     setIsLoadingInstructors(true);
     try {
-      const token = localStorage.getItem('token') || document.cookie
-        .split('; ')
-        .find(row => row.startsWith('token='))
-        ?.split('=')[1];
-
-      // 외부 API 호출
-      const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/compact`
-        : 'https://hrdi.coconutmeet.net/admin/users/compact';
-      
-      // 쿼리 파라미터 추가: type=ADMIN
-      const apiUrl = new URL(baseUrl);
-      apiUrl.searchParams.set('type', 'ADMIN');
-      
-      const response = await fetch(apiUrl.toString(), {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(token && { Authorization: `Bearer ${token}` }),
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`강사 목록을 가져오는데 실패했습니다. (${response.status})`);
-      }
-
-      const data = await response.json();
+      // 외부 API 호출 - type이 'ADMIN'인 사용자만 조회
+      const response = await apiService.getUsersCompact({ type: 'ADMIN', limit: 10 });
+      const data = response.data;
       
       // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
       let usersArray: any[] = [];
@@ -78,50 +57,50 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
       // API 응답 데이터를 UserRow 형식으로 변환
       const transformedUsers: UserRow[] = usersArray.length > 0
         ? usersArray.map((user: any) => {
-            // 가입일을 YYYY-MM-DD 형식으로 변환
-            const formatDate = (dateString: string | null | undefined): string => {
-              if (!dateString) return new Date().toISOString().split('T')[0];
-              try {
-                const date = new Date(dateString);
-                return date.toISOString().split('T')[0];
-              } catch {
-                return new Date().toISOString().split('T')[0];
+              // 가입일을 YYYY-MM-DD 형식으로 변환
+              const formatDate = (dateString: string | null | undefined): string => {
+                if (!dateString) return new Date().toISOString().split('T')[0];
+                try {
+                  const date = new Date(dateString);
+                  return date.toISOString().split('T')[0];
+                } catch {
+                  return new Date().toISOString().split('T')[0];
+                }
+              };
+              
+              // null 값을 명시적으로 처리
+              const getValue = (value: any, fallback: string = '-') => {
+                if (value === null || value === undefined) return fallback;
+                if (typeof value === 'string' && value.trim() === '') return fallback;
+                return String(value);
+              };
+              
+              // status가 "ACTIVE"이면 활성화, 아니면 비활성화
+              const accountStatus: 'active' | 'inactive' = 
+                user.status === 'ACTIVE' || user.status === 'active' ? 'active' : 'inactive';
+              
+              // role 데이터 처리
+              let userRole: 'learner' | 'instructor' | 'admin' = 'learner'; // 기본값
+              if (user.role) {
+                const roleLower = String(user.role).toLowerCase();
+                if (roleLower === 'instructor' || roleLower === '강사') {
+                  userRole = 'instructor';
+                } else if (roleLower === 'admin' || roleLower === '관리자') {
+                  userRole = 'admin';
+                } else {
+                  userRole = 'learner';
+                }
               }
-            };
-            
-            // null 값을 명시적으로 처리
-            const getValue = (value: any, fallback: string = '-') => {
-              if (value === null || value === undefined) return fallback;
-              if (typeof value === 'string' && value.trim() === '') return fallback;
-              return String(value);
-            };
-            
-            // status가 "ACTIVE"이면 활성화, 아니면 비활성화
-            const accountStatus: 'active' | 'inactive' = 
-              user.status === 'ACTIVE' || user.status === 'active' ? 'active' : 'inactive';
-            
-            // role 데이터 처리
-            let userRole: 'learner' | 'instructor' | 'admin' = 'learner'; // 기본값
-            if (user.role) {
-              const roleLower = String(user.role).toLowerCase();
-              if (roleLower === 'instructor' || roleLower === '강사') {
-                userRole = 'instructor';
-              } else if (roleLower === 'admin' || roleLower === '관리자') {
-                userRole = 'admin';
-              } else {
-                userRole = 'learner';
-              }
-            }
-            
-            return {
-              id: String(user.id || user.userId || Math.random()),
-              joinDate: formatDate(user.createdAt || user.joinDate || user.join_date),
-              name: getValue(user.name || user.userName, '-'),
-              email: getValue(user.email || user.userEmail, '-'),
-              role: userRole,
-              status: accountStatus,
-            };
-          })
+              
+              return {
+                id: String(user.id || user.userId || Math.random()),
+                joinDate: formatDate(user.createdAt || user.joinDate || user.join_date),
+                name: getValue(user.name || user.userName, '-'),
+                email: getValue(user.email || user.userEmail, '-'),
+                role: userRole,
+                status: accountStatus,
+              };
+            })
         : [];
       
       setInstructors(transformedUsers);
@@ -138,12 +117,47 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     return instructors.find(inst => inst.id === instructorId);
   }, [instructors, instructorId]);
 
+  // previewUrl 변경 시 이전 Blob URL 정리
+  useEffect(() => {
+    return () => {
+      if (previewUrl && previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
   // 수정 모드일 때 기존 데이터 채우기
   useEffect(() => {
     if (open && editingCourse) {
       setCourseName(editingCourse.courseName);
       // 수정 모드일 때 강사 목록 자동 로드
       loadInstructors();
+      
+      // 수정 모드일 때 이미지 로드
+      if (editingCourse.imageKey) {
+        setIsImageDeleted(false); // 초기화
+        setSelectedImage(null); // 새 이미지 선택 초기화
+        const loadImage = async () => {
+          try {
+            const imageUrl = await apiService.getFile(editingCourse.imageKey!);
+            // 이미지가 있으면 previewUrl 설정, 없으면 null
+            if (imageUrl) {
+              setPreviewUrl(imageUrl);
+            } else {
+              setPreviewUrl(null);
+            }
+          } catch (error) {
+            console.error('이미지 로드 오류:', error);
+            // 이미지 로드 실패 시 null로 설정
+            setPreviewUrl(null);
+          }
+        };
+        loadImage();
+      } else {
+        setIsImageDeleted(false); // 초기화
+        setSelectedImage(null); // 새 이미지 선택 초기화
+        setPreviewUrl(null); // 이미지가 없으면 명시적으로 null 설정
+      }
     } else if (!open) {
       setCourseName("");
       setInstructorId("");
@@ -153,6 +167,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
       setSelectedImage(null);
       setPreviewUrl(null);
       setIsDragging(false);
+      setIsImageDeleted(false);
       setInstructors([]); // 모달 닫을 때 강사 목록 초기화
     }
   }, [open, editingCourse]);
@@ -224,106 +239,24 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     });
     
     try {
-      // 토큰 가져오기
-      const token = localStorage.getItem('token') || document.cookie
-        .split('; ')
-        .find(row => row.startsWith('token='))
-        ?.split('=')[1];
-
-      // API base URL 설정
-      const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-        ? process.env.NEXT_PUBLIC_API_BASE_URL
-        : 'https://hrdi.coconutmeet.net';
-
       let imageKey: string | null = null;
 
-      // 이미지가 있으면 먼저 업로드하여 imageKey 받기
+      // 새 이미지가 선택된 경우 업로드
       if (selectedImage) {
         try {
-          // 이미지 업로드 API 호출 - 일반적인 엔드포인트 경로 시도
-          const possibleEndpoints = [
-            `${baseUrl}/admin/files/upload`,
-            `${baseUrl}/admin/files`,
-            `${baseUrl}/admin/upload`,
-            `${baseUrl}/admin/images/upload`,
-            `${baseUrl}/admin/images`,
-            `${baseUrl}/files/upload`,
-            `${baseUrl}/files`,
-            `${baseUrl}/upload`,
-            `${baseUrl}/api/files/upload`,
-            `${baseUrl}/api/upload`,
-            `${baseUrl}/api/files`,
-          ];
-
-          let uploadResponse: Response | null = null;
-          let lastError: Error | null = null;
-          let uploadSuccess = false;
-          let lastStatusCode: number | null = null;
-
-          // 여러 엔드포인트를 시도
-          for (const uploadUrl of possibleEndpoints) {
-            try {
-              // 각 시도마다 새로운 FormData 생성 (FormData는 한 번만 사용 가능)
-              const formData = new FormData();
-              formData.append('file', selectedImage);
-              // 일부 API는 'image' 필드명을 사용할 수 있음
-              formData.append('image', selectedImage);
-
-              uploadResponse = await fetch(uploadUrl, {
-                method: 'POST',
-                headers: {
-                  ...(token && { Authorization: `Bearer ${token}` }),
-                  // Content-Type은 FormData 사용 시 자동으로 설정되므로 명시하지 않음
-                },
-                body: formData,
-              });
-
-              lastStatusCode = uploadResponse.status;
-
-              if (uploadResponse.ok) {
-                const uploadData = await uploadResponse.json();
-                // 응답에서 imageKey 추출 (실제 응답 구조에 맞게 수정 필요)
-                imageKey = uploadData.imageKey || uploadData.key || uploadData.id || uploadData.fileKey || uploadData.fileId || uploadData.data?.key || uploadData.data?.imageKey || null;
-                uploadSuccess = true;
-                break; // 성공하면 루프 종료
-              } else if (uploadResponse.status !== 404) {
-                // 404가 아닌 다른 에러면 해당 엔드포인트가 맞을 수 있으므로 에러 정보 저장
-                try {
-                  const errorData = await uploadResponse.json();
-                  lastError = new Error(
-                    errorData.message || errorData.error || `이미지 업로드 실패: ${uploadResponse.status} ${uploadResponse.statusText}`
-                  );
-                } catch {
-                  lastError = new Error(`이미지 업로드 실패: ${uploadResponse.status} ${uploadResponse.statusText}`);
-                }
-                // 401, 403 같은 인증/권한 오류는 더 이상 시도하지 않음
-                if (uploadResponse.status === 401 || uploadResponse.status === 403) {
-                  break;
-                }
-              }
-            } catch (fetchError) {
-              // 네트워크 에러 등은 무시하고 다음 엔드포인트 시도
-              if (!lastError) {
-                lastError = fetchError instanceof Error ? fetchError : new Error('네트워크 오류가 발생했습니다.');
-              }
-              continue;
-            }
-          }
-
-          if (!uploadSuccess) {
-            // 모든 엔드포인트가 404를 반환한 경우와 다른 오류를 구분
-            if (lastStatusCode === 404 || !lastStatusCode) {
-              console.warn('이미지 업로드 엔드포인트를 찾을 수 없습니다. 이미지 없이 계속 진행합니다.');
-            } else {
-              const errorMessage = lastError?.message || '이미지 업로드에 실패했습니다.';
-              console.error('이미지 업로드 실패:', errorMessage);
-            }
-            // 이미지 업로드 실패 시 사용자에게 알림 (경고 수준)
-            setErrors((prev) => ({ 
-              ...prev, 
-              image: '이미지 업로드에 실패했습니다. 이미지 없이 계속 진행됩니다.',
-            }));
-            // 이미지 업로드 실패해도 계속 진행 (선택사항)
+          const uploadResponse = await apiService.uploadFile(selectedImage);
+          
+          // 응답에서 imageKey 추출
+          // apiService.uploadFile은 ApiResponse<T> 형태로 반환하므로 uploadResponse.data가 실제 응답 데이터
+          if (uploadResponse.data) {
+            // 다양한 가능한 응답 구조 확인
+            imageKey = uploadResponse.data.imageKey 
+              || uploadResponse.data.key 
+              || uploadResponse.data.id 
+              || uploadResponse.data.fileKey 
+              || uploadResponse.data.fileId
+              || (uploadResponse.data.data && (uploadResponse.data.data.imageKey || uploadResponse.data.data.key))
+              || null;
           }
         } catch (uploadError) {
           const errorMessage = uploadError instanceof Error ? uploadError.message : '이미지 업로드 중 오류가 발생했습니다.';
@@ -336,54 +269,91 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
         }
       }
 
-      // /subjects API 호출
       const requestBody: {
         title: string;
         instructor: string;
-        imageKey?: string | null;
+        imageKey?: string;
       } = {
         title: courseName.trim(),
         instructor: selectedInstructor.name,
       };
 
-      if (imageKey) {
-        requestBody.imageKey = imageKey;
-      }
-
-      const response = await fetch(`${baseUrl}/subjects`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(token && { Authorization: `Bearer ${token}` }),
-        },
-        body: JSON.stringify(requestBody),
-      });
-
-      if (!response.ok) {
-        let errorMessage = `과목 등록 실패 (${response.status})`;
-        try {
-          const errorData = await response.json();
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          } else if (errorData.message) {
-            errorMessage = errorData.message;
-          }
-        } catch (parseError) {
-          // JSON 파싱 실패 시 기본 메시지 사용
+      // imageKey 처리: 수정 모드에서는 항상 명시적으로 설정
+      if (editingCourse && editingCourse.id) {
+        // 수정 모드: 이미지가 삭제된 경우 "null" 문자열, 새 이미지가 있으면 값, 기존 이미지 유지 시 기존 값, 없으면 "null"
+        if (isImageDeleted) {
+          // 이미지가 삭제된 경우 무조건 "null" 문자열로 설정
+          requestBody.imageKey = "null";
+        } else if (imageKey) {
+          // 새 이미지가 업로드된 경우
+          requestBody.imageKey = imageKey;
+        } else if (editingCourse.imageKey) {
+          // 기존 이미지를 유지하는 경우
+          requestBody.imageKey = editingCourse.imageKey;
+        } else {
+          // 이미지가 없는 경우 "null" 문자열로 명시적으로 설정
+          requestBody.imageKey = "null";
+        }
+      } else {
+        // 등록 모드: 새 이미지가 있으면 값, 없으면 undefined (선택사항)
+        if (imageKey) {
+          requestBody.imageKey = imageKey;
         }
-        console.error('과목 등록 실패:', errorMessage);
-        setErrors({ submit: errorMessage });
-        setIsSaving(false);
-        return;
       }
 
-      // 성공 시 onSave 콜백 호출
-      if (onSave && selectedInstructor) {
-        onSave(courseName.trim(), selectedInstructor.name);
+      // 수정 모드인지 등록 모드인지 확인
+      if (editingCourse && editingCourse.id) {
+        // 수정 모드: PUT /subjects/{id}
+        try {
+          await apiService.updateSubject(editingCourse.id, requestBody);
+          
+          // 성공 시 onSave 콜백 호출 및 모달 닫기
+          if (onSave && selectedInstructor) {
+            onSave(courseName.trim(), selectedInstructor.name);
+          }
+          onClose(); // 모달 닫기
+        } catch (updateError) {
+          const errorMessage = updateError instanceof Error ? updateError.message : '과목 수정 중 오류가 발생했습니다.';
+          console.error('과목 수정 실패:', errorMessage);
+          setErrors({ submit: errorMessage });
+          setIsSaving(false);
+          return;
+        }
+      } else {
+        // 등록 모드: POST /subjects
+        try {
+          const createRequestBody: {
+            title: string;
+            instructor: string;
+            imageKey?: string;
+          } = {
+            title: courseName.trim(),
+            instructor: selectedInstructor.name,
+          };
+
+          // imageKey 처리: 등록 모드에서 새 이미지가 있으면 포함
+          if (imageKey) {
+            createRequestBody.imageKey = imageKey;
+          }
+
+          await apiService.createSubject(createRequestBody);
+
+          // 성공 시 onSave 콜백 호출 및 모달 닫기
+          if (onSave && selectedInstructor) {
+            onSave(courseName.trim(), selectedInstructor.name);
+          }
+          onClose(); // 모달 닫기
+        } catch (createError) {
+          const errorMessage = createError instanceof Error ? createError.message : '과목 등록 중 오류가 발생했습니다.';
+          console.error('과목 등록 실패:', errorMessage);
+          setErrors({ submit: errorMessage });
+          setIsSaving(false);
+          return;
+        }
       }
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
-      console.error('과목 등록 오류:', errorMessage);
+      console.error('과목 저장 오류:', errorMessage);
       setErrors({ submit: errorMessage });
     } finally {
       setIsSaving(false);
@@ -391,16 +361,43 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
   };
 
   // 삭제 버튼 클릭 핸들러
-  const handleDeleteClick = () => {
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
     setIsDeleteConfirmOpen(true);
   };
 
   // 삭제 확인 핸들러
-  const handleDeleteConfirm = () => {
-    if (onDelete) {
-      onDelete();
+  const handleDeleteConfirm = async () => {
+    if (!editingCourse || !editingCourse.id) {
+      console.error('삭제할 교육과정 정보가 없습니다.');
+      setErrors({ submit: '삭제할 교육과정 정보가 없습니다.' });
+      return;
+    }
+
+    if (isDeleting) return; // 이미 삭제 중이면 중복 호출 방지
+
+    setIsDeleting(true);
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.submit;
+      return next;
+    });
+
+    try {
+      await apiService.deleteSubject(editingCourse.id);
+
+      // 성공 시 모달 닫기 및 콜백 호출
       setIsDeleteConfirmOpen(false);
+      if (onDelete) {
+        onDelete();
+      }
       onClose();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '교육과정 삭제 중 오류가 발생했습니다.';
+      console.error('교육과정 삭제 실패:', errorMessage);
+      setErrors({ submit: errorMessage });
+    } finally {
+      setIsDeleting(false);
     }
   };
 
@@ -434,12 +431,18 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     }
 
     setSelectedImage(file);
+    setIsImageDeleted(false); // 새 이미지 선택 시 삭제 상태 해제
     setErrors((prev) => {
       const next = { ...prev };
       delete next.image;
       return next;
     });
 
+    // 기존 previewUrl이 Blob URL인 경우 메모리 해제
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
     // 미리보기 URL 생성
     const reader = new FileReader();
     reader.onloadend = () => {
@@ -491,7 +494,12 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
   const handleRemoveImage = (e: React.MouseEvent) => {
     e.stopPropagation();
     setSelectedImage(null);
+    // previewUrl이 Blob URL인 경우 메모리 해제
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+    }
     setPreviewUrl(null);
+    setIsImageDeleted(true); // 이미지 삭제 상태 설정
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -502,24 +510,27 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     });
   };
 
-  if (!open) return null;
+  if (!open && !isDeleteConfirmOpen) return null;
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      aria-hidden={!open}
-      onClick={onClose}
-    >
-      <div
-        className="absolute inset-0 bg-black/40"
-        aria-hidden="true"
-      />
-      <div
-        ref={modalRef}
-        className="relative z-10 shadow-xl"
-        onClick={handleModalClick}
-      >
-        <div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
+    <>
+      {/* 메인 모달 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          aria-hidden={!open}
+          onClick={onClose}
+        >
+          <div
+            className="absolute inset-0 bg-black/40"
+            aria-hidden="true"
+          />
+          <div
+            ref={modalRef}
+            className="relative z-10 shadow-xl"
+            onClick={handleModalClick}
+          >
+            <div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
           {/* Header */}
           <div className="flex items-center justify-between gap-[10px] p-6">
             <h2 className="text-[20px] font-bold leading-normal text-[var(--color-neutral-700)]">
@@ -780,7 +791,9 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
             </div>
           </div>
         </div>
-      </div>
+          </div>
+        </div>
+      )}
 
       {/* 삭제 확인 모달 */}
       {isDeleteConfirmOpen && (
@@ -790,37 +803,48 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
             onClick={handleDeleteCancel}
             aria-hidden="true"
           />
-          <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
+          <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end">
             <div className="flex flex-col gap-[16px] items-start justify-center w-full">
-              <h2 className="text-[18px] font-semibold leading-normal text-[var(--color-neutral-700)]">
-                교육과정을 삭제하시겠습니까?
-              </h2>
-              <p className="text-[15px] font-normal leading-normal text-[var(--color-basic-text)]">
-                삭제된 교육과정은 복구할 수 없습니다.
-                <br />
-                정말 삭제하시겠습니까?
-              </p>
+              <div className="flex gap-[8px] items-start w-full">
+                <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+                  강좌를 삭제하시겠습니까?
+                </p>
+              </div>
+              <div className="flex gap-[8px] items-start w-full">
+                <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+                  <p className="mb-0">삭제 버튼을 누르면 강좌 정보가 삭제됩니다.</p>
+                  <p>정말 삭제하시겠습니까?</p>
+                </div>
+              </div>
+              {errors.submit && (
+                <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
+              )}
             </div>
-            <div className="flex gap-2 items-center justify-end">
+            <div className="flex gap-[8px] items-center justify-end shrink-0">
               <button
                 type="button"
                 onClick={handleDeleteCancel}
-                className="h-[40px] px-2 rounded-[8px] bg-[var(--color-bg-gray-light)] text-[16px] font-semibold leading-normal text-[var(--color-basic-text)] w-[80px] hover:bg-[var(--color-bg-gray-hover)] cursor-pointer transition-colors"
+                className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
               >
-                취소
+                <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
+                  취소
+                </p>
               </button>
               <button
                 type="button"
                 onClick={handleDeleteConfirm}
-                className="h-[40px] px-4 rounded-[8px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] hover:bg-[#fae6e6] cursor-pointer transition-colors"
+                disabled={isDeleting}
+                className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                삭제하기
+                <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
+                  {isDeleting ? '삭제 중...' : '삭제'}
+                </p>
               </button>
             </div>
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 }
 

src/app/admin/courses/mockData.ts

@@ -1,3 +1,5 @@
+import apiService from "@/app/lib/apiService";
+
 export type Course = {
   id: string;
   courseName: string;
@@ -5,71 +7,71 @@ export type Course = {
   createdAt: string; // 생성일 (YYYY-MM-DD)
   createdBy: string; // 등록자
   hasLessons: boolean; // 강좌포함여부
+  imageKey?: string; // 이미지 키
 };
 
 // 과목 리스트 조회 API
 export async function getCourses(): Promise<Course[]> {
   try {
-    const token = typeof window !== 'undefined' 
-      ? (localStorage.getItem('token') || document.cookie
-          .split('; ')
-          .find(row => row.startsWith('token='))
-          ?.split('=')[1])
-      : null;
+    // 교육과정과 강좌 리스트를 동시에 가져오기
+    const [subjectsResponse, lecturesResponse] = await Promise.all([
+      apiService.getSubjects(),
+      apiService.getLectures().catch(() => ({ data: [] })), // 강좌 리스트 조회 실패 시 빈 배열 반환
+    ]);
 
-    const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-      ? process.env.NEXT_PUBLIC_API_BASE_URL
-      : 'https://hrdi.coconutmeet.net';
+    const subjectsData = subjectsResponse.data;
+    const lecturesData = lecturesResponse.data || [];
 
-    const apiUrl = `${baseUrl}/subjects`;
-
-    const response = await fetch(apiUrl, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(token && { Authorization: `Bearer ${token}` }),
-      },
-    });
-
-    if (!response.ok) {
-      // 404 에러는 리소스가 없는 것이므로 빈 배열 반환
-      if (response.status === 404) {
-        console.warn('⚠️ [getCourses] 과목 리스트를 찾을 수 없습니다 (404)');
-        return [];
-      }
-      
-      const errorText = await response.text();
-      console.error('❌ [getCourses] API 에러 응답:', errorText);
-      throw new Error(`과목 리스트 조회 실패 (${response.status})`);
-    }
-
-    const data = await response.json();
-    
     // 디버깅: API 응답 구조 확인
-    console.log('🔍 [getCourses] API 원본 응답:', data);
-    console.log('🔍 [getCourses] 응답 타입:', Array.isArray(data) ? '배열' : typeof data);
-    
+    console.log('🔍 [getCourses] API 원본 응답:', subjectsData);
+    console.log('🔍 [getCourses] 응답 타입:', Array.isArray(subjectsData) ? '배열' : typeof subjectsData);
+    console.log('🔍 [getCourses] 강좌 리스트:', lecturesData);
+
     // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
     let coursesArray: any[] = [];
-    if (Array.isArray(data)) {
-      coursesArray = data;
-    } else if (data && typeof data === 'object') {
+    if (Array.isArray(subjectsData)) {
+      coursesArray = subjectsData;
+    } else if (subjectsData && typeof subjectsData === 'object') {
       // 더 많은 가능한 필드명 확인
-      coursesArray = data.items || data.courses || data.data || data.list || data.subjects || data.subjectList || [];
+      coursesArray = subjectsData.items || subjectsData.courses || subjectsData.data || subjectsData.list || subjectsData.subjects || subjectsData.subjectList || [];
+    }
+
+    // 강좌 리스트가 배열이 아닌 경우 처리
+    let lecturesArray: any[] = [];
+    if (Array.isArray(lecturesData)) {
+      lecturesArray = lecturesData;
+    } else if (lecturesData && typeof lecturesData === 'object') {
+      lecturesArray = lecturesData.items || lecturesData.lectures || lecturesData.data || lecturesData.list || [];
     }
 
     console.log('🔍 [getCourses] 변환 전 배열:', coursesArray);
     console.log('🔍 [getCourses] 배열 길이:', coursesArray.length);
+    console.log('🔍 [getCourses] 강좌 배열 길이:', lecturesArray.length);
+
+    // 각 교육과정에 대해 강좌가 있는지 확인하기 위한 Set 생성
+    const courseIdsWithLessons = new Set<string>();
+    lecturesArray.forEach((lecture: any) => {
+      const subjectId = String(lecture.subjectId || lecture.subject_id || '');
+      if (subjectId) {
+        courseIdsWithLessons.add(subjectId);
+      }
+    });
+
+    console.log('🔍 [getCourses] 강좌가 있는 교육과정 ID:', Array.from(courseIdsWithLessons));
 
     // API 응답 데이터를 Course 형식으로 변환
     const transformedCourses: Course[] = coursesArray.map((item: any) => {
+      const courseId = String(item.id || item.subjectId || item.subject_id || '');
+      const hasLessons = courseIdsWithLessons.has(courseId);
+
       const transformed = {
-        id: String(item.id || item.subjectId || item.subject_id || ''),
+        id: courseId,
         courseName: item.courseName || item.name || item.subjectName || item.subject_name || item.title || '',
         instructorName: item.instructorName || item.instructor || item.instructor_name || item.teacherName || '',
         createdAt: item.createdAt || item.createdDate || item.created_date || item.createdAt || '',
         createdBy: item.createdBy || item.creator || item.created_by || item.creatorName || '',
-        hasLessons: item.hasLessons !== undefined ? item.hasLessons : (item.has_lessons !== undefined ? item.has_lessons : false),
+        hasLessons: hasLessons,
+        imageKey: item.imageKey || item.image_key || item.fileKey || item.file_key || undefined,
       };
       console.log('🔍 [getCourses] 변환된 항목:', transformed);
       return transformed;

src/app/admin/courses/page.tsx

@@ -1,11 +1,29 @@
 'use client';
 
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import CourseRegistrationModal from "./CourseRegistrationModal";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 import { getCourses, type Course } from "./mockData";
 
+// 날짜를 yyyy-mm-dd 형식으로 변환하는 함수
+const formatDate = (dateString: string): string => {
+  if (!dateString) return '';
+  try {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  } catch {
+    // 이미 yyyy-mm-dd 형식이거나 파싱 실패 시 원본 반환
+    if (dateString.includes('T')) {
+      return dateString.split('T')[0];
+    }
+    return dateString;
+  }
+};
+
 export default function AdminCoursesPage() {
   const [courses, setCourses] = useState<Course[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -13,6 +31,8 @@ export default function AdminCoursesPage() {
   const [editingCourse, setEditingCourse] = useState<Course | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [showToast, setShowToast] = useState(false);
+  const prevModalOpenRef = useRef(false);
+  const shouldRefreshRef = useRef(false);
 
   // API에서 과목 리스트 가져오기
   useEffect(() => {
@@ -52,35 +72,9 @@ export default function AdminCoursesPage() {
   }, [sortedCourses, currentPage]);
 
   const handleSaveCourse = async (courseName: string, instructorName: string) => {
-    if (editingCourse) {
-      // 수정 모드 - TODO: API 호출로 변경 필요
-      setCourses(prev => prev.map(course => 
-        course.id === editingCourse.id
-          ? { ...course, courseName, instructorName }
-          : course
-      ));
-    } else {
-      // 등록 모드 - TODO: API 호출로 변경 필요
-      const newCourse: Course = {
-        id: String(Date.now()),
-        courseName,
-        instructorName,
-        createdAt: new Date().toISOString().split('T')[0],
-        createdBy: '', // API에서 받아오도록 변경 필요
-        hasLessons: false, // 기본값: 미포함
-      };
-      setCourses(prev => [...prev, newCourse]);
-    }
+    shouldRefreshRef.current = true; // 새로고침 플래그 설정
     setIsModalOpen(false);
     setEditingCourse(null);
-    
-    // 저장 후 리스트 새로고침
-    try {
-      const data = await getCourses();
-      setCourses(data);
-    } catch (error) {
-      console.error('과목 리스트 새로고침 오류:', error);
-    }
   };
 
   const handleRowClick = (course: Course) => {
@@ -99,25 +93,38 @@ export default function AdminCoursesPage() {
   };
 
   const handleDeleteCourse = async () => {
-    if (editingCourse) {
-      // TODO: API 호출로 삭제 처리 필요
-      setCourses(prev => prev.filter(course => course.id !== editingCourse.id));
-      setEditingCourse(null);
-      setShowToast(true);
-      setTimeout(() => {
-        setShowToast(false);
-      }, 3000);
-      
-      // 삭제 후 리스트 새로고침
-      try {
-        const data = await getCourses();
-        setCourses(data);
-      } catch (error) {
-        console.error('과목 리스트 새로고침 오류:', error);
-      }
-    }
+    shouldRefreshRef.current = true; // 새로고침 플래그 설정
+    setEditingCourse(null);
+    setShowToast(true);
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
   };
 
+  // 모달이 닫힌 후 리스트 새로고침
+  useEffect(() => {
+    // 모달이 열렸다가 닫힐 때, 그리고 새로고침 플래그가 설정되어 있을 때만 새로고침
+    if (prevModalOpenRef.current && !isModalOpen && shouldRefreshRef.current) {
+      shouldRefreshRef.current = false; // 플래그 리셋
+      
+      async function refreshList() {
+        try {
+          setIsLoading(true);
+          const data = await getCourses();
+          console.log('📋 [AdminCoursesPage] 새로고침된 데이터:', data);
+          console.log('📋 [AdminCoursesPage] 새로고침된 데이터 개수:', data.length);
+          setCourses(data);
+        } catch (error) {
+          console.error('과목 리스트 새로고침 오류:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+      refreshList();
+    }
+    prevModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -199,7 +206,7 @@ export default function AdminCoursesPage() {
                                 {course.instructorName}
                               </td>
                               <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
-                                {course.createdAt}
+                                {formatDate(course.createdAt)}
                               </td>
                               <td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                 {course.hasLessons ? (

src/app/admin/id/mockData.ts

@@ -1,3 +1,5 @@
+import apiService from "@/app/lib/apiService";
+
 type RoleType = 'learner' | 'instructor' | 'admin';
 type AccountStatus = 'active' | 'inactive';
 
@@ -22,43 +24,8 @@ export async function getInstructors(): Promise<UserRow[]> {
           ?.split('=')[1])
       : null;
 
-    const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/compact`
-      : 'https://hrdi.coconutmeet.net/admin/users/compact';
-    
-    // 쿼리 파라미터 추가: type=ADMIN, limit=10
-    const apiUrl = new URL(baseUrl);
-    apiUrl.searchParams.set('type', 'ADMIN');
-    apiUrl.searchParams.set('limit', '10');
-
-    console.log('🔍 [getInstructors] API 호출 정보:', {
-      url: apiUrl.toString(),
-      hasToken: !!token,
-      tokenLength: token?.length || 0
-    });
-
-    const response = await fetch(apiUrl.toString(), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(token && { Authorization: `Bearer ${token}` }),
-      },
-    });
-
-    console.log('📡 [getInstructors] API 응답 상태:', {
-      status: response.status,
-      statusText: response.statusText,
-      ok: response.ok
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error('❌ [getInstructors] API 에러 응답:', errorText);
-      console.error('강사 목록 가져오기 실패:', response.status);
-      return [];
-    }
-
-    const data = await response.json();
+    const response = await apiService.getUsersCompact();
+    const data = response.data;
     
     console.log('📦 [getInstructors] 원본 API 응답 데이터:', {
       type: typeof data,

src/app/admin/id/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 import { type UserRow } from "./mockData";
+import apiService from "@/app/lib/apiService";
 
 type TabType = 'all' | 'learner' | 'instructor' | 'admin';
 type RoleType = 'learner' | 'instructor' | 'admin';
@@ -45,35 +46,9 @@ export default function AdminIdPage() {
         setIsLoading(true);
         setError(null);
         
-        const token = localStorage.getItem('token') || document.cookie
-          .split('; ')
-          .find(row => row.startsWith('token='))
-          ?.split('=')[1];
-
         // 외부 API 호출
-        const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/compact`
-          : 'https://hrdi.coconutmeet.net/admin/users/compact';
-        
-        // 쿼리 파라미터 추가: type=STUDENT, limit=10, page=currentPage
-        const apiUrl = new URL(baseUrl);
-        apiUrl.searchParams.set('type', 'STUDENT');
-        apiUrl.searchParams.set('limit', '10');
-        apiUrl.searchParams.set('page', String(currentPage));
-        
-        const response = await fetch(apiUrl.toString(), {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            ...(token && { Authorization: `Bearer ${token}` }),
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`사용자 데이터를 가져오는데 실패했습니다. (${response.status})`);
-        }
-
-        const data = await response.json();
+        const response = await apiService.getUsersCompact();
+        const data = response.data;
         
         // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
         let usersArray: any[] = [];
@@ -206,48 +181,7 @@ export default function AdminIdPage() {
         return;
       }
 
-      const token = localStorage.getItem('token') || document.cookie
-        .split('; ')
-        .find(row => row.startsWith('token='))
-        ?.split('=')[1];
-
-      if (!token) {
-        setToastMessage('로그인이 필요합니다.');
-        setShowToast(true);
-        setTimeout(() => {
-          setShowToast(false);
-        }, 3000);
-        setIsActivateModalOpen(false);
-        setSelectedUserId(null);
-        return;
-      }
-
-      const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/${selectedUserId}/unsuspend`
-        : `https://hrdi.coconutmeet.net/admin/users/${selectedUserId}/unsuspend`;
-
-      const response = await fetch(apiUrl, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        let errorMessage = `계정 활성화 실패 (${response.status})`;
-        try {
-          const errorData = await response.json();
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          } else if (errorData.message) {
-            errorMessage = errorData.message;
-          }
-        } catch (parseError) {
-          // ignore
-        }
-        throw new Error(errorMessage);
-      }
+      await apiService.unsuspendUser(selectedUserId);
 
       // API 호출 성공 시 로컬 상태 업데이트
       setUsers(prevUsers => 
@@ -295,52 +229,7 @@ export default function AdminIdPage() {
     }
 
     try {
-      const token = localStorage.getItem('token') || document.cookie
-        .split('; ')
-        .find(row => row.startsWith('token='))
-        ?.split('=')[1];
-
-      if (!token) {
-        setToastMessage('로그인이 필요합니다.');
-        setShowToast(true);
-        setTimeout(() => {
-          setShowToast(false);
-        }, 3000);
-        setIsDeactivateModalOpen(false);
-        setSelectedUserId(null);
-        setDeactivateReason('');
-        return;
-      }
-
-      const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/${selectedUserId}/suspend`
-        : `https://hrdi.coconutmeet.net/admin/users/${selectedUserId}/suspend`;
-
-      const response = await fetch(apiUrl, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          reason: deactivateReason,
-        }),
-      });
-
-      if (!response.ok) {
-        let errorMessage = `계정 비활성화 실패 (${response.status})`;
-        try {
-          const errorData = await response.json();
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          } else if (errorData.message) {
-            errorMessage = errorData.message;
-          }
-        } catch (parseError) {
-          // ignore
-        }
-        throw new Error(errorMessage);
-      }
+      await apiService.suspendUser(selectedUserId);
 
       // API 호출 성공 시 로컬 상태 업데이트
       setUsers(prevUsers => 

src/app/admin/notices/NoChangesModal.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+
+type NoChangesModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+/**
+ * 변경사항이 없을 때 표시되는 모달
+ */
+export default function NoChangesModal({
+  open,
+  onClose,
+}: NoChangesModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[320px]">
+        <div className="flex flex-col gap-[16px] items-start justify-center w-full">
+          <div className="flex gap-[8px] items-start w-full">
+            <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+              변경된 내용이 없습니다.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-[8px] items-center justify-end shrink-0">
+          <button
+            type="button"
+            onClick={onClose}
+            className="bg-[#1f2b91] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#1a2478] cursor-pointer transition-colors"
+          >
+            <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
+              확인
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/admin/notices/NoticeCancelModal.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+
+type NoticeCancelModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+/**
+ * 공지사항 작성 취소 확인 모달
+ */
+export default function NoticeCancelModal({
+  open,
+  onClose,
+  onConfirm,
+}: NoticeCancelModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end w-[400px]">
+        <div className="flex flex-col gap-[16px] items-start justify-center w-full">
+          <div className="flex gap-[8px] items-start w-full">
+            <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+              작성 중인 내용이 있습니다.
+            </p>
+          </div>
+          <div className="flex gap-[8px] items-start w-full">
+            <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+              <p className="mb-0">정말 취소하시겠습니까?</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-[8px] items-center justify-end shrink-0">
+          <button
+            type="button"
+            onClick={onClose}
+            className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
+          >
+            <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
+              취소
+            </p>
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className="bg-[#1f2b91] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#1a2478] cursor-pointer transition-colors"
+          >
+            <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
+              확인
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/admin/notices/NoticeDeleteModal.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+
+type NoticeDeleteModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting?: boolean;
+};
+
+/**
+ * 공지사항 삭제 확인 모달
+ */
+export default function NoticeDeleteModal({
+  open,
+  onClose,
+  onConfirm,
+  isDeleting = false,
+}: NoticeDeleteModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end w-[400px]">
+        <div className="flex flex-col gap-[16px] items-start justify-center w-full">
+          <div className="flex gap-[8px] items-start w-full">
+            <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+              공지사항을 삭제하시겠습니까?
+            </p>
+          </div>
+          <div className="flex gap-[8px] items-start w-full">
+            <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+              <p className="mb-0">삭제 버튼을 누르면 공지사항이 삭제됩니다.</p>
+              <p>정말 삭제하시겠습니까?</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-[8px] items-center justify-end shrink-0">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isDeleting}
+            className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
+              취소
+            </p>
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isDeleting}
+            className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
+              {isDeleting ? '삭제 중...' : '삭제'}
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/admin/notices/NoticeValidationModal.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+
+type NoticeValidationModalProps = {
+	open: boolean;
+	onClose: () => void;
+};
+
+/**
+ * 공지사항 작성 시 제목 또는 내용이 비어있을 때 표시되는 검증 모달
+ */
+export default function NoticeValidationModal({
+	open,
+	onClose,
+}: NoticeValidationModalProps) {
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<button
+				type="button"
+				aria-label="닫기"
+				className="absolute inset-0 bg-black/40 cursor-default"
+				onClick={onClose}
+			/>
+			<div
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="notice-validation-title"
+				className="relative bg-white box-border flex flex-col items-stretch justify-end gap-[32px] p-6 rounded-[8px] w-[320px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)]"
+			>
+				<div className="flex flex-col gap-4 items-center w-full">
+					<p
+						className="text-[15px] font-normal leading-[1.5] text-[#333c47] w-full"
+						id="notice-validation-title"
+					>
+						내용 또는 제목을 입력해 주세요.
+					</p>
+				</div>
+				<div className="flex gap-2 items-center justify-end w-full">
+					<button
+						type="button"
+						onClick={onClose}
+						className="h-[37px] min-w-[82px] px-2 rounded-[8px] bg-[#1f2b91] text-white text-[16px] font-semibold leading-[1.5] cursor-pointer whitespace-nowrap"
+					>
+						확인
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+

src/app/admin/notices/[id]/edit/page.tsx

@@ -0,0 +1,483 @@
+'use client';
+
+import { useState, useMemo, useRef, ChangeEvent, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import AdminSidebar from "@/app/components/AdminSidebar";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import CloseXOSvg from "@/app/svgs/closexo";
+import apiService from "@/app/lib/apiService";
+import NoticeValidationModal from "@/app/admin/notices/NoticeValidationModal";
+import NoticeCancelModal from "@/app/admin/notices/NoticeCancelModal";
+import NoChangesModal from "@/app/admin/notices/NoChangesModal";
+
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
+};
+
+export default function AdminNoticeEditPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const [fileKey, setFileKey] = useState<string | null>(null);
+  const [existingAttachment, setExistingAttachment] = useState<Attachment | null>(null);
+  const [originalTitle, setOriginalTitle] = useState<string>('');
+  const [originalContent, setOriginalContent] = useState<string>('');
+  const [originalFileKey, setOriginalFileKey] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
+  const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [isNoChangesModalOpen, setIsNoChangesModalOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const characterCount = useMemo(() => content.length, [content]);
+
+  // 공지사항 데이터 로드
+  useEffect(() => {
+    async function fetchNotice() {
+      if (!params?.id) {
+        setIsLoadingData(false);
+        return;
+      }
+
+      try {
+        setIsLoadingData(true);
+        const response = await apiService.getNotice(params.id);
+        const data = response.data;
+
+        // 제목 설정
+        const loadedTitle = data.title || '';
+        setTitle(loadedTitle);
+        setOriginalTitle(loadedTitle);
+
+        // 내용 설정 (배열이면 join, 문자열이면 그대로)
+        let loadedContent = '';
+        if (data.content) {
+          if (Array.isArray(data.content)) {
+            loadedContent = data.content.join('\n');
+          } else if (typeof data.content === 'string') {
+            loadedContent = data.content;
+          } else {
+            loadedContent = String(data.content);
+          }
+        }
+        setContent(loadedContent);
+        setOriginalContent(loadedContent);
+
+        // 기존 첨부파일 정보 설정
+        if (data.attachments && Array.isArray(data.attachments) && data.attachments.length > 0) {
+          const att = data.attachments[0];
+          setExistingAttachment({
+            name: att.name || att.fileName || att.filename || '첨부파일',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          });
+          // 기존 파일이 있으면 fileKey도 설정
+          const loadedFileKey = att.fileKey || att.key || att.fileId;
+          if (loadedFileKey) {
+            setFileKey(loadedFileKey);
+            setOriginalFileKey(loadedFileKey);
+          }
+        } else if (data.attachment) {
+          // 단일 첨부파일인 경우
+          setExistingAttachment({
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          });
+          const loadedFileKey = data.attachment.fileKey || data.attachment.key || data.attachment.fileId;
+          if (loadedFileKey) {
+            setFileKey(loadedFileKey);
+            setOriginalFileKey(loadedFileKey);
+          }
+        }
+      } catch (error) {
+        console.error('공지사항 조회 오류:', error);
+        alert('공지사항을 불러오는 중 오류가 발생했습니다.');
+        router.push('/admin/notices');
+      } finally {
+        setIsLoadingData(false);
+      }
+    }
+
+    fetchNotice();
+  }, [params?.id, router]);
+
+  const handleBack = () => {
+    router.push(`/admin/notices/${params.id}`);
+  };
+
+  const handleFileAttach = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 30 * 1024 * 1024) {
+        alert('30MB 미만의 파일만 첨부할 수 있습니다.');
+        return;
+      }
+      try {
+        setIsLoading(true);
+        // 단일 파일 업로드
+        const uploadResponse = await apiService.uploadFile(file);
+        
+        // 응답에서 fileKey 추출
+        let extractedFileKey: string | null = null;
+        if (uploadResponse.data?.fileKey) {
+          extractedFileKey = uploadResponse.data.fileKey;
+        } else if (uploadResponse.data?.key) {
+          extractedFileKey = uploadResponse.data.key;
+        } else if (uploadResponse.data?.id) {
+          extractedFileKey = uploadResponse.data.id;
+        } else if (uploadResponse.data?.imageKey) {
+          extractedFileKey = uploadResponse.data.imageKey;
+        } else if (uploadResponse.data?.fileId) {
+          extractedFileKey = uploadResponse.data.fileId;
+        } else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
+          extractedFileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
+        } else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
+          const result = uploadResponse.data.results[0];
+          if (result.ok && result.fileKey) {
+            extractedFileKey = result.fileKey;
+          }
+        }
+        
+        if (extractedFileKey) {
+          setFileKey(extractedFileKey);
+          setAttachedFile(file);
+          // 새 파일을 업로드하면 기존 파일 정보 제거
+          setExistingAttachment(null);
+        } else {
+          throw new Error('파일 키를 받아오지 못했습니다.');
+        }
+      } catch (error) {
+        console.error('파일 업로드 실패:', error);
+        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+        setAttachedFile(null);
+        setFileKey(null);
+      } finally {
+        setIsLoading(false);
+        // 파일 입력 초기화
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    }
+  };
+
+  const handleFileRemove = () => {
+    setAttachedFile(null);
+    setExistingAttachment(null);
+    setFileKey(null);
+    // 파일 입력 초기화
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = async () => {
+    if (!title.trim() || !content.trim()) {
+      setIsValidationModalOpen(true);
+      return;
+    }
+    
+    if (!params?.id) {
+      alert('공지사항 ID를 찾을 수 없습니다.');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      
+      // 변경된 필드만 포함하는 request body 생성
+      const noticeData: any = {};
+      
+      // 제목이 변경되었는지 확인
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== originalTitle) {
+        noticeData.title = trimmedTitle;
+      }
+      
+      // 내용이 변경되었는지 확인
+      const trimmedContent = content.trim();
+      if (trimmedContent !== originalContent) {
+        noticeData.content = trimmedContent;
+      }
+      
+      // 파일 변경사항 확인
+      const currentFileKey = fileKey;
+      const hasFileChanged = currentFileKey !== originalFileKey;
+      
+      // 파일이 삭제된 경우 (기존에 파일이 있었는데 지금 없음)
+      if (originalFileKey && !currentFileKey) {
+        noticeData.attachments = [];
+      }
+      // 파일이 변경되었거나 새로 추가된 경우
+      else if (hasFileChanged && currentFileKey) {
+        if (attachedFile) {
+          // 새로 업로드한 파일
+          noticeData.attachments = [
+            {
+              fileKey: currentFileKey,
+              filename: attachedFile.name,
+              mimeType: attachedFile.type || 'application/octet-stream',
+              size: attachedFile.size,
+            },
+          ];
+        } else if (existingAttachment && existingAttachment.fileKey) {
+          // 기존 파일 유지
+          noticeData.attachments = [
+            {
+              fileKey: existingAttachment.fileKey,
+              filename: existingAttachment.name,
+            },
+          ];
+        }
+      }
+      
+      // 변경사항이 없으면 알림 후 리턴
+      if (Object.keys(noticeData).length === 0) {
+        setIsNoChangesModalOpen(true);
+        setIsLoading(false);
+        return;
+      }
+      
+      await apiService.updateNotice(params.id, noticeData);
+      
+      // 성공 시 공지사항 리스트로 이동 (토스트는 리스트 페이지에서 표시)
+      router.push('/admin/notices?updated=true');
+    } catch (error) {
+      console.error('공지사항 수정 실패:', error);
+      alert('공지사항 수정에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (title.trim() || content.trim() || attachedFile || fileKey) {
+      setIsCancelModalOpen(true);
+    } else {
+      handleBack();
+    }
+  };
+
+  const handleCancelConfirm = () => {
+    setIsCancelModalOpen(false);
+    handleBack();
+  };
+
+  if (isLoadingData) {
+    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">
+                <div className="h-[100px] flex items-center justify-center px-[32px]">
+                  <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <NoticeValidationModal
+        open={isValidationModalOpen}
+        onClose={() => setIsValidationModalOpen(false)}
+      />
+      <NoticeCancelModal
+        open={isCancelModalOpen}
+        onClose={() => setIsCancelModalOpen(false)}
+        onConfirm={handleCancelConfirm}
+      />
+      <NoChangesModal
+        open={isNoChangesModalOpen}
+        onClose={() => setIsNoChangesModalOpen(false)}
+      />
+      <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">
+                  <div className="flex gap-3 items-center">
+                    <button
+                      type="button"
+                      onClick={handleBack}
+                      className="flex items-center justify-center w-8 h-8 cursor-pointer"
+                      aria-label="뒤로가기"
+                    >
+                      <BackArrowSvg width={32} height={32} />
+                    </button>
+                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                      공지사항 수정
+                    </h1>
+                  </div>
+                </div>
+
+                {/* 작성 폼 */}
+                <div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
+                  <div className="flex flex-col gap-6 w-full">
+                    {/* 제목 입력 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                        제목
+                      </label>
+                      <input
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="제목을 입력해 주세요."
+                        className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                      />
+                    </div>
+
+                    {/* 내용 입력 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                        내용
+                      </label>
+                      <div className="relative w-full">
+                        <textarea
+                          value={content}
+                          onChange={(e) => {
+                            const newContent = e.target.value;
+                            if (newContent.length <= 1000) {
+                              setContent(newContent);
+                            }
+                          }}
+                          placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
+                          className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                        />
+                        <div className="absolute bottom-3 right-3">
+                          <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
+                            {characterCount}/1000
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 첨부 파일 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <div className="flex items-center justify-between h-8 w-full">
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
+                            첨부 파일{' '}
+                            <span className="font-normal">
+                              {(attachedFile || existingAttachment) ? 1 : 0}/1
+                            </span>
+                          </label>
+                          <p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
+                            30MB 미만 파일
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={handleFileAttach}
+                          disabled={isLoading}
+                          className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                            {isLoading ? '업로드 중...' : '첨부'}
+                          </span>
+                        </button>
+                        <input
+                          ref={fileInputRef}
+                          type="file"
+                          onChange={handleFileChange}
+                          className="hidden"
+                          accept="*/*"
+                        />
+                      </div>
+                      <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-between px-4">
+                        {attachedFile ? (
+                          <>
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
+                              {attachedFile.name}
+                            </p>
+                            <button
+                              type="button"
+                              onClick={handleFileRemove}
+                              className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
+                              aria-label="파일 삭제"
+                            >
+                              <CloseXOSvg />
+                            </button>
+                          </>
+                        ) : existingAttachment ? (
+                          <>
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
+                              {existingAttachment.name}
+                            </p>
+                            <button
+                              type="button"
+                              onClick={handleFileRemove}
+                              className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
+                              aria-label="파일 삭제"
+                            >
+                              <CloseXOSvg />
+                            </button>
+                          </>
+                        ) : (
+                          <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
+                            파일을 첨부해주세요.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex gap-3 items-center justify-end shrink-0 w-full">
+                    <button
+                      type="button"
+                      onClick={handleCancel}
+                      className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
+                    >
+                      취소
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleSave}
+                      disabled={isLoading}
+                      className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isLoading ? '저장 중...' : '저장하기'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+

src/app/admin/notices/[id]/page.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Link from 'next/link';
+import AdminSidebar from '@/app/components/AdminSidebar';
+import BackCircleSvg from '@/app/svgs/backcirclesvg';
+import DownloadIcon from '@/app/svgs/downloadicon';
+import PaperClipSvg from '@/app/svgs/paperclipsvg';
+import apiService from '@/app/lib/apiService';
+import type { Notice } from '@/app/admin/notices/mockData';
+import NoticeDeleteModal from '@/app/admin/notices/NoticeDeleteModal';
+
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
+};
+
+export default function AdminNoticeDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [notice, setNotice] = useState<Notice | null>(null);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  useEffect(() => {
+    async function fetchNotice() {
+      if (!params?.id) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await apiService.getNotice(params.id);
+        const data = response.data;
+
+        // API 응답 데이터를 Notice 형식으로 변환
+        const transformedNotice: Notice = {
+          id: data.id || data.noticeId || Number(params.id),
+          title: data.title || '',
+          date: data.date || data.createdAt || data.createdDate || new Date().toISOString().split('T')[0],
+          views: data.views || data.viewCount || 0,
+          writer: data.writer || data.author || data.createdBy || '관리자',
+          content: data.content 
+            ? (Array.isArray(data.content) 
+                ? data.content 
+                : typeof data.content === 'string' 
+                  ? data.content.split('\n').filter((line: string) => line.trim())
+                  : [String(data.content)])
+            : [],
+          hasAttachment: data.hasAttachment || data.attachment || false,
+        };
+
+        // 첨부파일 정보 처리
+        if (data.attachments && Array.isArray(data.attachments)) {
+          setAttachments(data.attachments.map((att: any) => ({
+            name: att.name || att.fileName || att.filename || '',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          })));
+        } else if (transformedNotice.hasAttachment && data.attachment) {
+          // 단일 첨부파일인 경우
+          setAttachments([{
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          }]);
+        }
+
+        if (!transformedNotice.title) {
+          throw new Error('공지사항을 찾을 수 없습니다.');
+        }
+
+        setNotice(transformedNotice);
+      } catch (err) {
+        console.error('공지사항 조회 오류:', err);
+        setError('공지사항을 불러오는 중 오류가 발생했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchNotice();
+  }, [params?.id]);
+
+  // 토스트 자동 닫기
+  useEffect(() => {
+    if (showToast) {
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [showToast]);
+
+  const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
+    if (url) {
+      // URL이 있으면 직접 다운로드
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else if (fileKey) {
+      // fileKey가 있으면 API를 통해 다운로드
+      try {
+        const fileUrl = await apiService.getFile(fileKey);
+        if (fileUrl) {
+          const link = document.createElement('a');
+          link.href = fileUrl;
+          link.download = fileName || 'download';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      } catch (err) {
+        console.error('파일 다운로드 실패:', err);
+        alert('파일 다운로드에 실패했습니다.');
+      }
+    }
+  };
+
+  if (loading) {
+    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">
+                <div className="h-[100px] flex items-center justify-center px-[32px]">
+                  <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !notice || !notice.content || notice.content.length === 0) {
+    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">
+                <div className="h-[100px] flex items-center gap-[10px] px-[32px]">
+                  <Link
+                    href="/admin/notices"
+                    aria-label="뒤로 가기"
+                    className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
+                  >
+                    <BackCircleSvg width={32} height={32} />
+                  </Link>
+                  <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
+                    공지사항 상세
+                  </h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                  <p className="text-[16px] font-medium text-[#333c47]">
+                    {error || '공지사항을 찾을 수 없습니다.'}
+                  </p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+              {/* 상단 타이틀 */}
+              <div className="h-[100px] flex items-center gap-[10px] px-[32px]">
+                <Link
+                  href="/admin/notices"
+                  aria-label="뒤로 가기"
+                  className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline shrink-0"
+                >
+                  <BackCircleSvg width={32} height={32} />
+                </Link>
+                <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
+                  공지사항 상세
+                </h1>
+              </div>
+
+              {/* 카드 */}
+              <section className="flex flex-col gap-[40px] px-[32px] py-[24px]">
+                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+                  {/* 헤더 */}
+                  <div className="p-[32px]">
+                    <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-[8px]">
+                        <h2 className="m-0 text-[20px] font-bold leading-[1.5] text-[#333C47]">
+                          {notice.title}
+                        </h2>
+                        <div className="flex items-center gap-[16px] text-[13px] font-medium leading-[1.4]">
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">작성자</span>
+                            <span className="text-[#333C47]">{notice.writer}</span>
+                          </div>
+                          <div className="h-[16px] w-0 flex items-center justify-center">
+                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
+                          </div>
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">게시일</span>
+                            <span className="text-[#333C47]">
+                              {notice.date.includes('T') 
+                                ? new Date(notice.date).toISOString().split('T')[0]
+                                : notice.date}
+                            </span>
+                          </div>
+                          <div className="h-[16px] w-0 flex items-center justify-center">
+                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
+                          </div>
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">조회수</span>
+                            <span className="text-[#333C47]">{notice.views.toLocaleString()}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 구분선 */}
+                  <div className="h-px bg-[#DEE1E6] w-full" />
+
+                  {/* 본문 및 첨부파일 */}
+                  <div className="flex flex-col gap-[40px] p-[32px]">
+                    {/* 본문 */}
+                    <div className="text-[15px] font-normal leading-[1.5] text-[#333C47]">
+                      {notice.content.map((p, idx) => (
+                        <p key={idx} className="mb-0 leading-[1.5]">
+                          {p}
+                        </p>
+                      ))}
+                    </div>
+
+                    {/* 첨부파일 섹션 */}
+                    {attachments.length > 0 && (
+                      <div className="flex flex-col gap-[24px] w-full">
+                        <div className="flex flex-col gap-[8px] w-full">
+                          <div className="flex items-center gap-[12px] h-[32px]">
+                            <div className="flex items-center">
+                              <p className="text-[15px] font-semibold leading-[1.5] text-[#6C7682] m-0">
+                                첨부 파일
+                              </p>
+                            </div>
+                          </div>
+                          <div className="pt-3">
+                            {attachments.map((attachment, idx) => (
+                            <div
+                              key={idx}
+                              className="bg-white border border-[#DEE1E6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] py-1 w-full"
+                            >
+                              <div className="size-[24px] shrink-0">
+                                <PaperClipSvg width={24} height={24} className="text-[#333C47]" />
+                              </div>
+                              <div className="flex-1 flex items-center gap-[8px] min-w-0">
+                                <p className="text-[15px] font-normal leading-[1.5] text-[#1B2027] truncate m-0">
+                                  {attachment.name}
+                                </p>
+                                <p className="text-[13px] font-normal leading-[1.4] text-[#8C95A1] shrink-0 m-0">
+                                  {attachment.size}
+                                </p>
+                              </div>
+                              <button
+                                type="button"
+                                onClick={() => handleDownload(attachment.fileKey, attachment.url, attachment.name)}
+                                className="bg-white border border-[#8C95A1] rounded-[6px] h-[32px] flex items-center justify-center gap-[4px] px-[16px] py-[3px] shrink-0 hover:bg-[#F9FAFB] cursor-pointer"
+                              >
+                                <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
+                                <span className="text-[13px] font-medium leading-[1.4] text-[#4C5561]">
+                                  다운로드
+                                </span>
+                              </button>
+                            </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* 버튼 영역 */}
+                <div className="flex items-center justify-end gap-[12px]">
+                  <button
+                    type="button"
+                    onClick={() => setIsDeleteModalOpen(true)}
+                    disabled={isDeleting}
+                    className="bg-[#FEF2F2] h-[48px] rounded-[10px] px-[8px] shrink-0 min-w-[80px] flex items-center justify-center hover:bg-[#FEE2E2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <span className="text-[16px] font-semibold leading-[1.5] text-[#F64C4C] text-center">
+                      삭제
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => router.push(`/admin/notices/${params.id}/edit`)}
+                    className="bg-[#F1F3F5] h-[48px] rounded-[10px] px-[16px] shrink-0 min-w-[90px] flex items-center justify-center hover:bg-[#E9ECEF] transition-colors"
+                  >
+                    <span className="text-[16px] font-semibold leading-[1.5] text-[#4C5561] text-center">
+                      수정하기
+                    </span>
+                  </button>
+                </div>
+              </section>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {/* 삭제 확인 모달 */}
+      <NoticeDeleteModal
+        open={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={async () => {
+          if (!params?.id) {
+            alert('공지사항 ID를 찾을 수 없습니다.');
+            setIsDeleteModalOpen(false);
+            return;
+          }
+
+          try {
+            setIsDeleting(true);
+            await apiService.deleteNotice(params.id);
+            setIsDeleteModalOpen(false);
+            setShowToast(true);
+            // 토스트 표시 후 목록 페이지로 이동
+            setTimeout(() => {
+              router.push('/admin/notices');
+            }, 1500);
+          } catch (err) {
+            console.error('공지사항 삭제 오류:', err);
+            const errorMessage = err instanceof Error ? err.message : '공지사항 삭제에 실패했습니다.';
+            alert(errorMessage);
+            setIsDeleteModalOpen(false);
+          } finally {
+            setIsDeleting(false);
+          }
+        }}
+        isDeleting={isDeleting}
+      />
+
+      {/* 삭제 완료 토스트 */}
+      {showToast && (
+        <div className="fixed right-[60px] bottom-[60px] z-50">
+          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
+              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+              공지사항이 삭제되었습니다.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

src/app/admin/notices/page.tsx

@@ -1,20 +1,108 @@
 'use client';
 
-import { useState, useMemo, useRef, ChangeEvent } from "react";
+import { useState, useMemo, useRef, ChangeEvent, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 import BackArrowSvg from "@/app/svgs/backarrow";
-import { MOCK_NOTICES, type Notice } from "@/app/admin/notices/mockData";
+import { type Notice } from "@/app/admin/notices/mockData";
+import apiService from "@/app/lib/apiService";
+import NoticeValidationModal from "@/app/admin/notices/NoticeValidationModal";
+import NoticeCancelModal from "@/app/admin/notices/NoticeCancelModal";
 
 export default function AdminNoticesPage() {
-  const [notices, setNotices] = useState<Notice[]>(MOCK_NOTICES);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [notices, setNotices] = useState<Notice[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [isWritingMode, setIsWritingMode] = useState(false);
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
   const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const [fileKey, setFileKey] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   
+  // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+  const formatDate = (dateString: string): string => {
+    if (!dateString) return '';
+    
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) {
+        // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+          return dateString;
+        }
+        return dateString;
+      }
+      
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    } catch {
+      return dateString;
+    }
+  };
+  
+  // API에서 공지사항 목록 가져오기
+  useEffect(() => {
+    async function fetchNotices() {
+      try {
+        setIsLoading(true);
+        const response = await apiService.getNotices();
+        const data = response.data;
+        
+        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
+        let noticesArray: any[] = [];
+        if (Array.isArray(data)) {
+          noticesArray = data;
+        } else if (data && typeof data === 'object') {
+          noticesArray = data.items || data.notices || data.data || data.list || [];
+        }
+        
+        // API 응답 데이터를 Notice 형식으로 변환
+        const transformedNotices: Notice[] = noticesArray.map((notice: any) => ({
+          id: notice.id || notice.noticeId || 0,
+          title: notice.title || '',
+          date: notice.date || notice.createdAt || notice.createdDate || new Date().toISOString().split('T')[0],
+          views: notice.views || notice.viewCount || 0,
+          writer: notice.writer || notice.author || notice.createdBy || '관리자',
+          content: notice.content ? (Array.isArray(notice.content) ? notice.content : [notice.content]) : undefined,
+          hasAttachment: notice.hasAttachment || notice.attachment || false,
+        }));
+        
+        setNotices(transformedNotices);
+      } catch (error) {
+        console.error('공지사항 목록 조회 오류:', error);
+        // 에러 발생 시 빈 배열로 설정
+        setNotices([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchNotices();
+  }, []);
+
+  // 수정 완료 쿼리 파라미터 확인 및 토스트 표시
+  useEffect(() => {
+    if (searchParams.get('updated') === 'true') {
+      setShowToast(true);
+      // URL에서 쿼리 파라미터 제거
+      router.replace('/admin/notices');
+      // 토스트 자동 닫기
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [searchParams, router]);
+  
   const totalCount = useMemo(() => notices.length, [notices]);
   
   const characterCount = useMemo(() => content.length, [content]);
@@ -24,57 +112,145 @@ export default function AdminNoticesPage() {
     setTitle('');
     setContent('');
     setAttachedFile(null);
+    setFileKey(null);
+    // 파일 입력 초기화
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
   };
   
   const handleFileAttach = () => {
     fileInputRef.current?.click();
   };
   
-  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       if (file.size > 30 * 1024 * 1024) {
         alert('30MB 미만의 파일만 첨부할 수 있습니다.');
         return;
       }
-      setAttachedFile(file);
+      try {
+        setIsLoading(true);
+        // 단일 파일 업로드
+        const uploadResponse = await apiService.uploadFile(file);
+        
+        // 응답에서 fileKey 추출
+        let extractedFileKey: string | null = null;
+        if (uploadResponse.data?.fileKey) {
+          extractedFileKey = uploadResponse.data.fileKey;
+        } else if (uploadResponse.data?.key) {
+          extractedFileKey = uploadResponse.data.key;
+        } else if (uploadResponse.data?.id) {
+          extractedFileKey = uploadResponse.data.id;
+        } else if (uploadResponse.data?.imageKey) {
+          extractedFileKey = uploadResponse.data.imageKey;
+        } else if (uploadResponse.data?.fileId) {
+          extractedFileKey = uploadResponse.data.fileId;
+        } else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
+          extractedFileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
+        } else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
+          const result = uploadResponse.data.results[0];
+          if (result.ok && result.fileKey) {
+            extractedFileKey = result.fileKey;
+          }
+        }
+        
+        if (extractedFileKey) {
+          setFileKey(extractedFileKey);
+          setAttachedFile(file);
+        } else {
+          throw new Error('파일 키를 받아오지 못했습니다.');
+        }
+      } catch (error) {
+        console.error('파일 업로드 실패:', error);
+        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+        setAttachedFile(null);
+        setFileKey(null);
+      } finally {
+        setIsLoading(false);
+        // 파일 입력 초기화
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
     }
   };
   
-  const handleSave = () => {
-    if (!title.trim()) {
-      alert('제목을 입력해주세요.');
-      return;
-    }
-    if (!content.trim()) {
-      alert('내용을 입력해주세요.');
+  const handleSave = async () => {
+    if (!title.trim() || !content.trim()) {
+      setIsValidationModalOpen(true);
       return;
     }
     
-    // 새 공지사항 추가
-    const newNotice: Notice = {
-      id: notices.length > 0 ? Math.max(...notices.map(n => n.id)) + 1 : 1,
-      title: title.trim(),
-      date: new Date().toISOString().split('T')[0],
-      views: 0,
-      writer: '관리자', // TODO: 실제 작성자 정보 사용
-      content: content.split('\n'),
-      hasAttachment: attachedFile !== null,
-    };
-    
-    setNotices([newNotice, ...notices]);
-    handleBack();
+    try {
+      setIsLoading(true);
+      
+      // 공지사항 생성 API 호출
+      const noticeData: any = {
+        title: title.trim(),
+        content: content.trim(),
+      };
+      
+      // fileKey와 파일 정보가 있으면 attachments 배열로 포함
+      if (fileKey && attachedFile) {
+        noticeData.attachments = [
+          {
+            fileKey: fileKey,
+            filename: attachedFile.name,
+            mimeType: attachedFile.type || 'application/octet-stream',
+            size: attachedFile.size,
+          },
+        ];
+      }
+      
+      const response = await apiService.createNotice(noticeData);
+      
+      // API 응답 후 목록 새로고침
+      const fetchResponse = await apiService.getNotices();
+      const data = fetchResponse.data;
+      
+      // API 응답이 배열이 아닌 경우 처리
+      let noticesArray: any[] = [];
+      if (Array.isArray(data)) {
+        noticesArray = data;
+      } else if (data && typeof data === 'object') {
+        noticesArray = data.items || data.notices || data.data || data.list || [];
+      }
+      
+      // API 응답 데이터를 Notice 형식으로 변환
+      const transformedNotices: Notice[] = noticesArray.map((notice: any) => ({
+        id: notice.id || notice.noticeId || 0,
+        title: notice.title || '',
+        date: notice.date || notice.createdAt || notice.createdDate || new Date().toISOString().split('T')[0],
+        views: notice.views || notice.viewCount || 0,
+        writer: notice.writer || notice.author || notice.createdBy || '관리자',
+        content: notice.content ? (Array.isArray(notice.content) ? notice.content : [notice.content]) : undefined,
+        hasAttachment: notice.hasAttachment || notice.attachment || !!notice.fileKey || false,
+      }));
+      
+      setNotices(transformedNotices);
+      handleBack();
+    } catch (error) {
+      console.error('공지사항 저장 실패:', error);
+      alert('공지사항 저장에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsLoading(false);
+    }
   };
   
   const handleCancel = () => {
-    if (title.trim() || content.trim() || attachedFile) {
-      if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
-        handleBack();
-      }
+    if (title.trim() || content.trim() || attachedFile || fileKey) {
+      setIsCancelModalOpen(true);
     } else {
       handleBack();
     }
   };
+
+  const handleCancelConfirm = () => {
+    setIsCancelModalOpen(false);
+    handleBack();
+  };
   
   const ITEMS_PER_PAGE = 10;
   const sortedNotices = useMemo(() => {
@@ -92,9 +268,19 @@ export default function AdminNoticesPage() {
   }, [sortedNotices, currentPage]);
 
   return (
-    <div className="min-h-screen flex flex-col bg-white">
-      {/* 메인 레이아웃 */}
-      <div className="flex flex-1 min-h-0 justify-center">
+    <>
+      <NoticeValidationModal
+        open={isValidationModalOpen}
+        onClose={() => setIsValidationModalOpen(false)}
+      />
+      <NoticeCancelModal
+        open={isCancelModalOpen}
+        onClose={() => setIsCancelModalOpen(false)}
+        onConfirm={handleCancelConfirm}
+      />
+      <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">
@@ -182,10 +368,11 @@ export default function AdminNoticesPage() {
                           <button
                             type="button"
                             onClick={handleFileAttach}
-                            className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0"
+                            disabled={isLoading}
+                            className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                           >
                             <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
-                              첨부
+                              {isLoading ? '업로드 중...' : '첨부'}
                             </span>
                           </button>
                           <input
@@ -196,13 +383,13 @@ export default function AdminNoticesPage() {
                             accept="*/*"
                           />
                         </div>
-                        <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-center">
+                        <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center px-4">
                           {attachedFile ? (
                             <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027]">
                               {attachedFile.name}
                             </p>
                           ) : (
-                            <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
                               파일을 첨부해주세요.
                             </p>
                           )}
@@ -222,9 +409,10 @@ export default function AdminNoticesPage() {
                       <button
                         type="button"
                         onClick={handleSave}
-                        className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
+                        disabled={isLoading}
+                        className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                       >
-                        저장하기
+                        {isLoading ? '저장 중...' : '저장하기'}
                       </button>
                     </div>
                   </div>
@@ -256,7 +444,7 @@ export default function AdminNoticesPage() {
                   <div className="flex-1 pt-2 flex flex-col">
                 {notices.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 className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
                       등록된 공지사항이 없습니다.
                       <br />
                       공지사항을 등록해주세요.
@@ -290,7 +478,8 @@ export default function AdminNoticesPage() {
                               return (
                                 <tr
                                   key={notice.id}
-                                  className="h-12 hover:bg-[#F5F7FF] transition-colors"
+                                  onClick={() => router.push(`/admin/notices/${notice.id}`)}
+                                  className="h-12 hover:bg-[#F5F7FF] transition-colors cursor-pointer"
                                 >
                                   <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap text-center">
                                     {noticeNumber}
@@ -299,7 +488,7 @@ export default function AdminNoticesPage() {
                                     {notice.title}
                                   </td>
                                   <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
-                                    {notice.date}
+                                    {formatDate(notice.date)}
                                   </td>
                                   <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                     {notice.views.toLocaleString()}
@@ -408,6 +597,24 @@ export default function AdminNoticesPage() {
         </div>
       </div>
     </div>
+
+      {/* 수정 완료 토스트 */}
+      {showToast && (
+        <div className="fixed right-[60px] bottom-[60px] z-50">
+          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
+              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+              수정이 완료되었습니다.
+            </p>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
 

src/app/admin/resources/[id]/edit/page.tsx

@@ -0,0 +1,483 @@
+'use client';
+
+import { useState, useMemo, useRef, ChangeEvent, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import AdminSidebar from "@/app/components/AdminSidebar";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import CloseXOSvg from "@/app/svgs/closexo";
+import apiService from "@/app/lib/apiService";
+import NoticeValidationModal from "@/app/admin/notices/NoticeValidationModal";
+import NoticeCancelModal from "@/app/admin/notices/NoticeCancelModal";
+import NoChangesModal from "@/app/admin/notices/NoChangesModal";
+
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
+};
+
+export default function AdminResourceEditPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const [fileKey, setFileKey] = useState<string | null>(null);
+  const [existingAttachment, setExistingAttachment] = useState<Attachment | null>(null);
+  const [originalTitle, setOriginalTitle] = useState<string>('');
+  const [originalContent, setOriginalContent] = useState<string>('');
+  const [originalFileKey, setOriginalFileKey] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
+  const [isValidationModalOpen, setIsValidationModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [isNoChangesModalOpen, setIsNoChangesModalOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const characterCount = useMemo(() => content.length, [content]);
+
+  // 학습 자료 데이터 로드
+  useEffect(() => {
+    async function fetchResource() {
+      if (!params?.id) {
+        setIsLoadingData(false);
+        return;
+      }
+
+      try {
+        setIsLoadingData(true);
+        const response = await apiService.getLibraryItem(params.id);
+        const data = response.data;
+
+        // 제목 설정
+        const loadedTitle = data.title || '';
+        setTitle(loadedTitle);
+        setOriginalTitle(loadedTitle);
+
+        // 내용 설정 (배열이면 join, 문자열이면 그대로)
+        let loadedContent = '';
+        if (data.content) {
+          if (Array.isArray(data.content)) {
+            loadedContent = data.content.join('\n');
+          } else if (typeof data.content === 'string') {
+            loadedContent = data.content;
+          } else {
+            loadedContent = String(data.content);
+          }
+        }
+        setContent(loadedContent);
+        setOriginalContent(loadedContent);
+
+        // 기존 첨부파일 정보 설정
+        if (data.attachments && Array.isArray(data.attachments) && data.attachments.length > 0) {
+          const att = data.attachments[0];
+          setExistingAttachment({
+            name: att.name || att.fileName || att.filename || '첨부파일',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          });
+          // 기존 파일이 있으면 fileKey도 설정
+          const loadedFileKey = att.fileKey || att.key || att.fileId;
+          if (loadedFileKey) {
+            setFileKey(loadedFileKey);
+            setOriginalFileKey(loadedFileKey);
+          }
+        } else if (data.attachment) {
+          // 단일 첨부파일인 경우
+          setExistingAttachment({
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          });
+          const loadedFileKey = data.attachment.fileKey || data.attachment.key || data.attachment.fileId;
+          if (loadedFileKey) {
+            setFileKey(loadedFileKey);
+            setOriginalFileKey(loadedFileKey);
+          }
+        }
+      } catch (error) {
+        console.error('학습 자료 조회 오류:', error);
+        alert('학습 자료를 불러오는 중 오류가 발생했습니다.');
+        router.push('/admin/resources');
+      } finally {
+        setIsLoadingData(false);
+      }
+    }
+
+    fetchResource();
+  }, [params?.id, router]);
+
+  const handleBack = () => {
+    router.push(`/admin/resources/${params.id}`);
+  };
+
+  const handleFileAttach = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 30 * 1024 * 1024) {
+        alert('30MB 미만의 파일만 첨부할 수 있습니다.');
+        return;
+      }
+      try {
+        setIsLoading(true);
+        // 단일 파일 업로드
+        const uploadResponse = await apiService.uploadFile(file);
+        
+        // 응답에서 fileKey 추출
+        let extractedFileKey: string | null = null;
+        if (uploadResponse.data?.fileKey) {
+          extractedFileKey = uploadResponse.data.fileKey;
+        } else if (uploadResponse.data?.key) {
+          extractedFileKey = uploadResponse.data.key;
+        } else if (uploadResponse.data?.id) {
+          extractedFileKey = uploadResponse.data.id;
+        } else if (uploadResponse.data?.imageKey) {
+          extractedFileKey = uploadResponse.data.imageKey;
+        } else if (uploadResponse.data?.fileId) {
+          extractedFileKey = uploadResponse.data.fileId;
+        } else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
+          extractedFileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
+        } else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
+          const result = uploadResponse.data.results[0];
+          if (result.ok && result.fileKey) {
+            extractedFileKey = result.fileKey;
+          }
+        }
+        
+        if (extractedFileKey) {
+          setFileKey(extractedFileKey);
+          setAttachedFile(file);
+          // 새 파일을 업로드하면 기존 파일 정보 제거
+          setExistingAttachment(null);
+        } else {
+          throw new Error('파일 키를 받아오지 못했습니다.');
+        }
+      } catch (error) {
+        console.error('파일 업로드 실패:', error);
+        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+        setAttachedFile(null);
+        setFileKey(null);
+      } finally {
+        setIsLoading(false);
+        // 파일 입력 초기화
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    }
+  };
+
+  const handleFileRemove = () => {
+    setAttachedFile(null);
+    setExistingAttachment(null);
+    setFileKey(null);
+    // 파일 입력 초기화
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = async () => {
+    if (!title.trim() || !content.trim()) {
+      setIsValidationModalOpen(true);
+      return;
+    }
+    
+    if (!params?.id) {
+      alert('학습 자료 ID를 찾을 수 없습니다.');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      
+      // 변경된 필드만 포함하는 request body 생성
+      const resourceData: any = {};
+      
+      // 제목이 변경되었는지 확인
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== originalTitle) {
+        resourceData.title = trimmedTitle;
+      }
+      
+      // 내용이 변경되었는지 확인
+      const trimmedContent = content.trim();
+      if (trimmedContent !== originalContent) {
+        resourceData.content = trimmedContent;
+      }
+      
+      // 파일 변경사항 확인
+      const currentFileKey = fileKey;
+      const hasFileChanged = currentFileKey !== originalFileKey;
+      
+      // 파일이 삭제된 경우 (기존에 파일이 있었는데 지금 없음)
+      if (originalFileKey && !currentFileKey) {
+        resourceData.attachments = [];
+      }
+      // 파일이 변경되었거나 새로 추가된 경우
+      else if (hasFileChanged && currentFileKey) {
+        if (attachedFile) {
+          // 새로 업로드한 파일
+          resourceData.attachments = [
+            {
+              fileKey: currentFileKey,
+              filename: attachedFile.name,
+              mimeType: attachedFile.type || 'application/octet-stream',
+              size: attachedFile.size,
+            },
+          ];
+        } else if (existingAttachment && existingAttachment.fileKey) {
+          // 기존 파일 유지
+          resourceData.attachments = [
+            {
+              fileKey: existingAttachment.fileKey,
+              filename: existingAttachment.name,
+            },
+          ];
+        }
+      }
+      
+      // 변경사항이 없으면 알림 후 리턴
+      if (Object.keys(resourceData).length === 0) {
+        setIsNoChangesModalOpen(true);
+        setIsLoading(false);
+        return;
+      }
+      
+      await apiService.updateLibraryItem(params.id, resourceData);
+      
+      // 성공 시 학습 자료 리스트로 이동 (토스트는 리스트 페이지에서 표시)
+      router.push('/admin/resources?updated=true');
+    } catch (error) {
+      console.error('학습 자료 수정 실패:', error);
+      alert('학습 자료 수정에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (title.trim() || content.trim() || attachedFile || fileKey) {
+      setIsCancelModalOpen(true);
+    } else {
+      handleBack();
+    }
+  };
+
+  const handleCancelConfirm = () => {
+    setIsCancelModalOpen(false);
+    handleBack();
+  };
+
+  if (isLoadingData) {
+    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">
+                <div className="h-[100px] flex items-center justify-center px-[32px]">
+                  <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <NoticeValidationModal
+        open={isValidationModalOpen}
+        onClose={() => setIsValidationModalOpen(false)}
+      />
+      <NoticeCancelModal
+        open={isCancelModalOpen}
+        onClose={() => setIsCancelModalOpen(false)}
+        onConfirm={handleCancelConfirm}
+      />
+      <NoChangesModal
+        open={isNoChangesModalOpen}
+        onClose={() => setIsNoChangesModalOpen(false)}
+      />
+      <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">
+                  <div className="flex gap-3 items-center">
+                    <button
+                      type="button"
+                      onClick={handleBack}
+                      className="flex items-center justify-center w-8 h-8 cursor-pointer"
+                      aria-label="뒤로가기"
+                    >
+                      <BackArrowSvg width={32} height={32} />
+                    </button>
+                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                      학습 자료 수정
+                    </h1>
+                  </div>
+                </div>
+
+                {/* 작성 폼 */}
+                <div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
+                  <div className="flex flex-col gap-6 w-full">
+                    {/* 제목 입력 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                        제목
+                      </label>
+                      <input
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="제목을 입력해 주세요."
+                        className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                      />
+                    </div>
+
+                    {/* 내용 입력 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                        내용
+                      </label>
+                      <div className="relative w-full">
+                        <textarea
+                          value={content}
+                          onChange={(e) => {
+                            const newContent = e.target.value;
+                            if (newContent.length <= 1000) {
+                              setContent(newContent);
+                            }
+                          }}
+                          placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
+                          className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                        />
+                        <div className="absolute bottom-3 right-3">
+                          <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
+                            {characterCount}/1000
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 첨부 파일 */}
+                    <div className="flex flex-col gap-2 items-start justify-center w-full">
+                      <div className="flex items-center justify-between h-8 w-full">
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
+                            첨부 파일{' '}
+                            <span className="font-normal">
+                              {(attachedFile || existingAttachment) ? 1 : 0}/1
+                            </span>
+                          </label>
+                          <p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
+                            30MB 미만 파일
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={handleFileAttach}
+                          disabled={isLoading}
+                          className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                            {isLoading ? '업로드 중...' : '첨부'}
+                          </span>
+                        </button>
+                        <input
+                          ref={fileInputRef}
+                          type="file"
+                          onChange={handleFileChange}
+                          className="hidden"
+                          accept="*/*"
+                        />
+                      </div>
+                      <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-between px-4">
+                        {attachedFile ? (
+                          <>
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
+                              {attachedFile.name}
+                            </p>
+                            <button
+                              type="button"
+                              onClick={handleFileRemove}
+                              className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
+                              aria-label="파일 삭제"
+                            >
+                              <CloseXOSvg />
+                            </button>
+                          </>
+                        ) : existingAttachment ? (
+                          <>
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027] flex-1 min-w-0 truncate">
+                              {existingAttachment.name}
+                            </p>
+                            <button
+                              type="button"
+                              onClick={handleFileRemove}
+                              className="flex items-center justify-center w-6 h-6 cursor-pointer hover:opacity-70 transition-opacity shrink-0 ml-2"
+                              aria-label="파일 삭제"
+                            >
+                              <CloseXOSvg />
+                            </button>
+                          </>
+                        ) : (
+                          <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
+                            파일을 첨부해주세요.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex gap-3 items-center justify-end shrink-0 w-full">
+                    <button
+                      type="button"
+                      onClick={handleCancel}
+                      className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
+                    >
+                      취소
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleSave}
+                      disabled={isLoading}
+                      className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isLoading ? '저장 중...' : '저장하기'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+

src/app/admin/resources/[id]/page.tsx

@@ -0,0 +1,390 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Link from 'next/link';
+import AdminSidebar from '@/app/components/AdminSidebar';
+import BackCircleSvg from '@/app/svgs/backcirclesvg';
+import DownloadIcon from '@/app/svgs/downloadicon';
+import PaperClipSvg from '@/app/svgs/paperclipsvg';
+import apiService from '@/app/lib/apiService';
+import type { Resource } from '@/app/admin/resources/mockData';
+import NoticeDeleteModal from '@/app/admin/notices/NoticeDeleteModal';
+
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
+};
+
+export default function AdminResourceDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [resource, setResource] = useState<Resource | null>(null);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  useEffect(() => {
+    async function fetchResource() {
+      if (!params?.id) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await apiService.getLibraryItem(params.id);
+        const data = response.data;
+
+        // API 응답 데이터를 Resource 형식으로 변환
+        const transformedResource: Resource = {
+          id: data.id || data.resourceId || Number(params.id),
+          title: data.title || '',
+          date: data.date || data.createdAt || data.createdDate || new Date().toISOString().split('T')[0],
+          views: data.views || data.viewCount || 0,
+          writer: data.writer || data.author || data.createdBy || '관리자',
+          content: data.content 
+            ? (Array.isArray(data.content) 
+                ? data.content 
+                : typeof data.content === 'string' 
+                  ? data.content.split('\n').filter((line: string) => line.trim())
+                  : [String(data.content)])
+            : [],
+          hasAttachment: data.hasAttachment || data.attachment || false,
+        };
+
+        // 첨부파일 정보 처리
+        if (data.attachments && Array.isArray(data.attachments)) {
+          setAttachments(data.attachments.map((att: any) => ({
+            name: att.name || att.fileName || att.filename || '',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          })));
+        } else if (transformedResource.hasAttachment && data.attachment) {
+          // 단일 첨부파일인 경우
+          setAttachments([{
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          }]);
+        }
+
+        if (!transformedResource.title) {
+          throw new Error('학습 자료를 찾을 수 없습니다.');
+        }
+
+        setResource(transformedResource);
+      } catch (err) {
+        console.error('학습 자료 조회 오류:', err);
+        setError('학습 자료를 불러오는 중 오류가 발생했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchResource();
+  }, [params?.id]);
+
+  // 토스트 자동 닫기
+  useEffect(() => {
+    if (showToast) {
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [showToast]);
+
+  const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
+    if (url) {
+      // URL이 있으면 직접 다운로드
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else if (fileKey) {
+      // fileKey가 있으면 API를 통해 다운로드
+      try {
+        const fileUrl = await apiService.getFile(fileKey);
+        if (fileUrl) {
+          const link = document.createElement('a');
+          link.href = fileUrl;
+          link.download = fileName || 'download';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      } catch (err) {
+        console.error('파일 다운로드 실패:', err);
+        alert('파일 다운로드에 실패했습니다.');
+      }
+    }
+  };
+
+  if (loading) {
+    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">
+                <div className="h-[100px] flex items-center justify-center px-[32px]">
+                  <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !resource || !resource.content || resource.content.length === 0) {
+    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">
+                <div className="h-[100px] flex items-center gap-[10px] px-[32px]">
+                  <Link
+                    href="/admin/resources"
+                    aria-label="뒤로 가기"
+                    className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
+                  >
+                    <BackCircleSvg width={32} height={32} />
+                  </Link>
+                  <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
+                    학습 자료 상세
+                  </h1>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                  <p className="text-[16px] font-medium text-[#333c47]">
+                    {error || '학습 자료를 찾을 수 없습니다.'}
+                  </p>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+              {/* 상단 타이틀 */}
+              <div className="h-[100px] flex items-center gap-[10px] px-[32px]">
+                <Link
+                  href="/admin/resources"
+                  aria-label="뒤로 가기"
+                  className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline shrink-0"
+                >
+                  <BackCircleSvg width={32} height={32} />
+                </Link>
+                <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
+                  학습 자료 상세
+                </h1>
+              </div>
+
+              {/* 카드 */}
+              <section className="flex flex-col gap-[40px] px-[32px] py-[24px]">
+                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+                  {/* 헤더 */}
+                  <div className="p-[32px]">
+                    <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-[8px]">
+                        <h2 className="m-0 text-[20px] font-bold leading-[1.5] text-[#333C47]">
+                          {resource.title}
+                        </h2>
+                        <div className="flex items-center gap-[16px] text-[13px] font-medium leading-[1.4]">
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">작성자</span>
+                            <span className="text-[#333C47]">{resource.writer}</span>
+                          </div>
+                          <div className="h-[16px] w-0 flex items-center justify-center">
+                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
+                          </div>
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">게시일</span>
+                            <span className="text-[#333C47]">
+                              {resource.date.includes('T') 
+                                ? new Date(resource.date).toISOString().split('T')[0]
+                                : resource.date}
+                            </span>
+                          </div>
+                          <div className="h-[16px] w-0 flex items-center justify-center">
+                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
+                          </div>
+                          <div className="flex items-center gap-[8px]">
+                            <span className="text-[#8C95A1]">조회수</span>
+                            <span className="text-[#333C47]">{resource.views.toLocaleString()}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 구분선 */}
+                  <div className="h-px bg-[#DEE1E6] w-full" />
+
+                  {/* 본문 및 첨부파일 */}
+                  <div className="flex flex-col gap-[40px] p-[32px]">
+                    {/* 본문 */}
+                    <div className="text-[15px] font-normal leading-[1.5] text-[#333C47]">
+                      {resource.content.map((p, idx) => (
+                        <p key={idx} className="mb-0 leading-[1.5]">
+                          {p}
+                        </p>
+                      ))}
+                    </div>
+
+                    {/* 첨부파일 섹션 */}
+                    {attachments.length > 0 && (
+                      <div className="flex flex-col gap-[24px] w-full">
+                        <div className="flex flex-col gap-[8px] w-full">
+                          <div className="flex items-center gap-[12px] h-[32px]">
+                            <div className="flex items-center">
+                              <p className="text-[15px] font-semibold leading-[1.5] text-[#6C7682] m-0">
+                                첨부 파일
+                              </p>
+                            </div>
+                          </div>
+                          {attachments.map((attachment, idx) => (
+                            <div
+                              key={idx}
+                              className="bg-white border border-[#DEE1E6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] py-1 w-full"
+                            >
+                              <div className="size-[24px] shrink-0">
+                                <PaperClipSvg width={24} height={24} className="text-[#333C47]" />
+                              </div>
+                              <div className="flex-1 flex items-center gap-[8px] min-w-0">
+                                <p className="text-[15px] font-normal leading-[1.5] text-[#1B2027] truncate m-0">
+                                  {attachment.name}
+                                </p>
+                                <p className="text-[13px] font-normal leading-[1.4] text-[#8C95A1] shrink-0 m-0">
+                                  {attachment.size}
+                                </p>
+                              </div>
+                              <button
+                                type="button"
+                                onClick={() => handleDownload(attachment.fileKey, attachment.url, attachment.name)}
+                                className="bg-white border border-[#8C95A1] rounded-[6px] h-[32px] flex items-center justify-center gap-[4px] px-[16px] py-[3px] shrink-0 hover:bg-[#F9FAFB] cursor-pointer"
+                              >
+                                <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
+                                <span className="text-[13px] font-medium leading-[1.4] text-[#4C5561]">
+                                  다운로드
+                                </span>
+                              </button>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* 버튼 영역 */}
+                <div className="flex items-center justify-end gap-[12px]">
+                  <button
+                    type="button"
+                    onClick={() => setIsDeleteModalOpen(true)}
+                    disabled={isDeleting}
+                    className="bg-[#FEF2F2] h-[48px] rounded-[10px] px-[8px] shrink-0 min-w-[80px] flex items-center justify-center hover:bg-[#FEE2E2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <span className="text-[16px] font-semibold leading-[1.5] text-[#F64C4C] text-center">
+                      삭제
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => router.push(`/admin/resources/${params.id}/edit`)}
+                    className="bg-[#F1F3F5] h-[48px] rounded-[10px] px-[16px] shrink-0 min-w-[90px] flex items-center justify-center hover:bg-[#E9ECEF] transition-colors"
+                  >
+                    <span className="text-[16px] font-semibold leading-[1.5] text-[#4C5561] text-center">
+                      수정하기
+                    </span>
+                  </button>
+                </div>
+              </section>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {/* 삭제 확인 모달 */}
+      <NoticeDeleteModal
+        open={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={async () => {
+          if (!params?.id) {
+            alert('학습 자료 ID를 찾을 수 없습니다.');
+            setIsDeleteModalOpen(false);
+            return;
+          }
+
+          try {
+            setIsDeleting(true);
+            await apiService.deleteLibraryItem(params.id);
+            setIsDeleteModalOpen(false);
+            setShowToast(true);
+            // 토스트 표시 후 목록 페이지로 이동
+            setTimeout(() => {
+              router.push('/admin/resources');
+            }, 1500);
+          } catch (err) {
+            console.error('학습 자료 삭제 오류:', err);
+            const errorMessage = err instanceof Error ? err.message : '학습 자료 삭제에 실패했습니다.';
+            alert(errorMessage);
+            setIsDeleteModalOpen(false);
+          } finally {
+            setIsDeleting(false);
+          }
+        }}
+        isDeleting={isDeleting}
+      />
+
+      {/* 삭제 완료 토스트 */}
+      {showToast && (
+        <div className="fixed right-[60px] bottom-[60px] z-50">
+          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
+              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+              학습 자료가 삭제되었습니다.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

src/app/admin/resources/mockData.ts

@@ -0,0 +1,37 @@
+export type Resource = {
+  id: number;
+  title: string;
+  date: string; // 게시일
+  views: number; // 조회수
+  writer: string; // 작성자
+  content?: string[]; // 본문 내용 (상세 페이지용)
+  hasAttachment?: boolean; // 첨부파일 여부
+};
+
+// TODO: 나중에 DB에서 가져오도록 변경
+export const MOCK_RESOURCES: Resource[] = [
+  {
+    id: 2,
+    title: '학습 자료 제목이 노출돼요',
+    date: '2025-09-10',
+    views: 1230,
+    writer: '문지호',
+    content: [
+      '학습 자료 관련 주요 내용을 안내드립니다.',
+      '학습 자료는 수강 기간 동안 언제든지 다운로드 가능합니다.',
+    ],
+  },
+  {
+    id: 1,
+    title: '📚 방사선학 학습 자료 모음',
+    date: '2025-06-28',
+    views: 594,
+    writer: '문지호',
+    hasAttachment: true,
+    content: [
+      '방사선학 강의에 필요한 학습 자료를 첨부합니다.',
+      '학습 자료는 강의 수강 시 참고하시기 바랍니다.',
+    ],
+  },
+];
+

src/app/admin/resources/page.tsx

@@ -1,21 +1,264 @@
 'use client';
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef, ChangeEvent, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import { type Resource } from "@/app/admin/resources/mockData";
+import apiService from "@/app/lib/apiService";
 
 export default function AdminResourcesPage() {
-  // TODO: 나중에 실제 데이터로 교체
-  const items: any[] = [];
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [resources, setResources] = useState<Resource[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isWritingMode, setIsWritingMode] = useState(false);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const [fileKey, setFileKey] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+  const formatDate = (dateString: string): string => {
+    if (!dateString) return '';
+    
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) {
+        // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+          return dateString;
+        }
+        return dateString;
+      }
+      
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    } catch {
+      return dateString;
+    }
+  };
+  
+  // API에서 학습 자료 목록 가져오기
+  useEffect(() => {
+    async function fetchResources() {
+      try {
+        setIsLoading(true);
+        const response = await apiService.getLibrary();
+        const data = response.data;
+        
+        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
+        let resourcesArray: any[] = [];
+        if (Array.isArray(data)) {
+          resourcesArray = data;
+        } else if (data && typeof data === 'object') {
+          resourcesArray = data.items || data.resources || data.data || data.list || [];
+        }
+        
+        // API 응답 데이터를 Resource 형식으로 변환
+        const transformedResources: Resource[] = resourcesArray.map((resource: any) => ({
+          id: resource.id || resource.resourceId || 0,
+          title: resource.title || '',
+          date: resource.date || resource.createdAt || resource.createdDate || new Date().toISOString().split('T')[0],
+          views: resource.views || resource.viewCount || 0,
+          writer: resource.writer || resource.author || resource.createdBy || '관리자',
+          content: resource.content ? (Array.isArray(resource.content) ? resource.content : [resource.content]) : undefined,
+          hasAttachment: resource.hasAttachment || resource.attachment || false,
+        }));
+        
+        setResources(transformedResources);
+      } catch (error) {
+        console.error('학습 자료 목록 조회 오류:', error);
+        // 에러 발생 시 빈 배열로 설정
+        setResources([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchResources();
+  }, []);
+
+  // 수정 완료 쿼리 파라미터 확인 및 토스트 표시
+  useEffect(() => {
+    if (searchParams.get('updated') === 'true') {
+      setShowToast(true);
+      // URL에서 쿼리 파라미터 제거
+      router.replace('/admin/resources');
+      // 토스트 자동 닫기
+      const timer = setTimeout(() => {
+        setShowToast(false);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [searchParams, router]);
+  
+  const totalCount = useMemo(() => resources.length, [resources]);
+  
+  const characterCount = useMemo(() => content.length, [content]);
+  
+  const handleBack = () => {
+    setIsWritingMode(false);
+    setTitle('');
+    setContent('');
+    setAttachedFile(null);
+    setFileKey(null);
+    // 파일 입력 초기화
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+  
+  const handleFileAttach = () => {
+    fileInputRef.current?.click();
+  };
+  
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 30 * 1024 * 1024) {
+        alert('30MB 미만의 파일만 첨부할 수 있습니다.');
+        return;
+      }
+      try {
+        setIsLoading(true);
+        // 단일 파일 업로드
+        const uploadResponse = await apiService.uploadFile(file);
+        
+        // 응답에서 fileKey 추출
+        let extractedFileKey: string | null = null;
+        if (uploadResponse.data?.fileKey) {
+          extractedFileKey = uploadResponse.data.fileKey;
+        } else if (uploadResponse.data?.key) {
+          extractedFileKey = uploadResponse.data.key;
+        } else if (uploadResponse.data?.id) {
+          extractedFileKey = uploadResponse.data.id;
+        } else if (uploadResponse.data?.imageKey) {
+          extractedFileKey = uploadResponse.data.imageKey;
+        } else if (uploadResponse.data?.fileId) {
+          extractedFileKey = uploadResponse.data.fileId;
+        } else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
+          extractedFileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
+        } else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
+          const result = uploadResponse.data.results[0];
+          if (result.ok && result.fileKey) {
+            extractedFileKey = result.fileKey;
+          }
+        }
+        
+        if (extractedFileKey) {
+          setFileKey(extractedFileKey);
+          setAttachedFile(file);
+        } else {
+          throw new Error('파일 키를 받아오지 못했습니다.');
+        }
+      } catch (error) {
+        console.error('파일 업로드 실패:', error);
+        alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
+        setAttachedFile(null);
+        setFileKey(null);
+      } finally {
+        setIsLoading(false);
+        // 파일 입력 초기화
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    }
+  };
+  
+  const handleSave = async () => {
+    if (!title.trim() || !content.trim()) {
+      alert('제목과 내용을 입력해주세요.');
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      
+      // 학습 자료 생성 API 호출
+      const resourceData: any = {
+        title: title.trim(),
+        content: content.trim(),
+      };
+      
+      // fileKey와 파일 정보가 있으면 attachments 배열로 포함
+      if (fileKey && attachedFile) {
+        resourceData.attachments = [
+          {
+            fileKey: fileKey,
+            filename: attachedFile.name,
+            mimeType: attachedFile.type || 'application/octet-stream',
+            size: attachedFile.size,
+          },
+        ];
+      }
+      
+      const response = await apiService.createLibraryItem(resourceData);
+      
+      // API 응답 후 목록 새로고침
+      const fetchResponse = await apiService.getLibrary();
+      const data = fetchResponse.data;
+      
+      // API 응답이 배열이 아닌 경우 처리
+      let resourcesArray: any[] = [];
+      if (Array.isArray(data)) {
+        resourcesArray = data;
+      } else if (data && typeof data === 'object') {
+        resourcesArray = data.items || data.resources || data.data || data.list || [];
+      }
+      
+      // API 응답 데이터를 Resource 형식으로 변환
+      const transformedResources: Resource[] = resourcesArray.map((resource: any) => ({
+        id: resource.id || resource.resourceId || 0,
+        title: resource.title || '',
+        date: resource.date || resource.createdAt || resource.createdDate || new Date().toISOString().split('T')[0],
+        views: resource.views || resource.viewCount || 0,
+        writer: resource.writer || resource.author || resource.createdBy || '관리자',
+        content: resource.content ? (Array.isArray(resource.content) ? resource.content : [resource.content]) : undefined,
+        hasAttachment: resource.hasAttachment || resource.attachment || !!resource.fileKey || false,
+      }));
+      
+      setResources(transformedResources);
+      handleBack();
+    } catch (error) {
+      console.error('학습 자료 저장 실패:', error);
+      alert('학습 자료 저장에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  const handleCancel = () => {
+    if (title.trim() || content.trim() || attachedFile || fileKey) {
+      if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
+        handleBack();
+      }
+    } else {
+      handleBack();
+    }
+  };
   
   const ITEMS_PER_PAGE = 10;
-  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
-  const paginatedItems = useMemo(() => {
+  const sortedResources = useMemo(() => {
+    return [...resources].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.date.localeCompare(a.date);
+    });
+  }, [resources]);
+  
+  const totalPages = Math.ceil(sortedResources.length / ITEMS_PER_PAGE);
+  const paginatedResources = useMemo(() => {
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const endIndex = startIndex + ITEMS_PER_PAGE;
-    return items.slice(startIndex, endIndex);
-  }, [items, currentPage]);
+    return sortedResources.slice(startIndex, endIndex);
+  }, [sortedResources, currentPage]);
 
   return (
     <div className="min-h-screen flex flex-col bg-white">
@@ -30,27 +273,222 @@ export default function AdminResourcesPage() {
           {/* 메인 콘텐츠 */}
           <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>
+              {isWritingMode ? (
+                <>
+                  {/* 작성 모드 헤더 */}
+                  <div className="h-[100px] flex items-center">
+                    <div className="flex gap-3 items-center">
+                      <button
+                        type="button"
+                        onClick={handleBack}
+                        className="flex items-center justify-center w-8 h-8 cursor-pointer"
+                        aria-label="뒤로가기"
+                      >
+                        <BackArrowSvg width={32} height={32} />
+                      </button>
+                      <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                        학습 자료 작성
+                      </h1>
+                    </div>
+                  </div>
 
-              {/* 콘텐츠 영역 */}
-              <div className="flex-1 pt-8 flex flex-col">
-                {items.length === 0 ? (
+                  {/* 작성 폼 */}
+                  <div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
+                    <div className="flex flex-col gap-6 w-full">
+                      {/* 제목 입력 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                          제목
+                        </label>
+                        <input
+                          type="text"
+                          value={title}
+                          onChange={(e) => setTitle(e.target.value)}
+                          placeholder="제목을 입력해 주세요."
+                          className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                        />
+                      </div>
+
+                      {/* 내용 입력 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                          내용
+                        </label>
+                        <div className="relative w-full">
+                          <textarea
+                            value={content}
+                            onChange={(e) => {
+                              const newContent = e.target.value;
+                              if (newContent.length <= 1000) {
+                                setContent(newContent);
+                              }
+                            }}
+                            placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
+                            className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                          />
+                          <div className="absolute bottom-3 right-3">
+                            <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
+                              {characterCount}/1000
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 첨부 파일 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <div className="flex items-center justify-between h-8 w-full">
+                          <div className="flex items-center gap-3 flex-1 min-w-0">
+                            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
+                              첨부 파일{' '}
+                              <span className="font-normal">
+                                ({attachedFile ? 1 : 0}/1)
+                              </span>
+                            </label>
+                            <p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
+                              30MB 미만 파일
+                            </p>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={handleFileAttach}
+                            disabled={isLoading}
+                            className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                              {isLoading ? '업로드 중...' : '첨부'}
+                            </span>
+                          </button>
+                          <input
+                            ref={fileInputRef}
+                            type="file"
+                            onChange={handleFileChange}
+                            className="hidden"
+                            accept="*/*"
+                          />
+                        </div>
+                        <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center px-4">
+                          {attachedFile ? (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027]">
+                              {attachedFile.name}
+                            </p>
+                          ) : (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center w-full">
+                              파일을 첨부해주세요.
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 액션 버튼 */}
+                    <div className="flex gap-3 items-center justify-end shrink-0 w-full">
+                      <button
+                        type="button"
+                        onClick={handleCancel}
+                        className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
+                      >
+                        취소
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleSave}
+                        disabled={isLoading}
+                        className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        {isLoading ? '저장 중...' : '저장하기'}
+                      </button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {/* 제목 영역 */}
+                  <div className="h-[100px] flex items-center">
+                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                      학습 자료실
+                    </h1>
+                  </div>
+
+                  {/* 헤더 영역 (제목과 콘텐츠 사이) */}
+                  <div className="pt-2 pb-4 flex items-center justify-between">
+                    <p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
+                      총 {totalCount}건
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => setIsWritingMode(true)}
+                      className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
+                    >
+                      등록하기
+                    </button>
+                  </div>
+
+                  {/* 콘텐츠 영역 */}
+                  <div className="flex-1 pt-2 flex flex-col">
+                {resources.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 className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
+                      등록된 학습 자료가 없습니다.
+                      <br />
+                      학습 자료를 등록해주세요.
                     </p>
                   </div>
                 ) : (
                   <>
-                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    <div className="rounded-[8px]">
+                      <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
+                        <table className="min-w-full border-collapse">
+                          <colgroup>
+                            <col style={{ width: 80 }} />
+                            <col />
+                            <col style={{ width: 140 }} />
+                            <col style={{ width: 120 }} />
+                            <col style={{ width: 120 }} />
+                          </colgroup>
+                          <thead>
+                            <tr className="h-12 bg-gray-50 text-left">
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">제목</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">게시일</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">조회수</th>
+                              <th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">작성자</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {paginatedResources.map((resource, index) => {
+                              // 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
+                              const resourceNumber = sortedResources.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
+                              return (
+                                <tr
+                                  key={resource.id}
+                                  onClick={() => router.push(`/admin/resources/${resource.id}`)}
+                                  className="h-12 hover:bg-[#F5F7FF] transition-colors cursor-pointer"
+                                >
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap text-center">
+                                    {resourceNumber}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
+                                    {resource.title}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {formatDate(resource.date)}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {resource.views.toLocaleString()}
+                                  </td>
+                                  <td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {resource.writer}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                     
                     {/* 페이지네이션 - 10개 초과일 때만 표시 */}
-                    {items.length > ITEMS_PER_PAGE && (() => {
+                    {resources.length > ITEMS_PER_PAGE && (() => {
                       // 페이지 번호를 10단위로 표시
                       const pageGroup = Math.floor((currentPage - 1) / 10);
                       const startPage = pageGroup * 10 + 1;
@@ -134,11 +572,30 @@ export default function AdminResourcesPage() {
                     })()}
                   </>
                 )}
-              </div>
+                  </div>
+                </>
+              )}
             </div>
           </main>
         </div>
       </div>
+
+      {/* 수정 완료 토스트 */}
+      {showToast && (
+        <div className="fixed right-[60px] bottom-[60px] z-50">
+          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
+              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+              수정이 완료되었습니다.
+            </p>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/app/components/AdminSidebar.tsx

@@ -17,6 +17,7 @@ const ADMIN_SIDEBAR_ITEMS: NavItem[] = [
   { label: "공지사항", href: "/admin/notices" },
   { label: "학습 자료실", href: "/admin/resources" },
   { label: "로그/접속 기록", href: "/admin/logs" },
+  { label: "배너 관리", href: "/admin/banner" },
 ];
 
 export default function AdminSidebar() {

src/app/components/CsvViewer.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useState, useRef } from 'react';
+
+interface CsvViewerProps {
+  onFileSelect?: (file: File) => void;
+  onDataParsed?: (data: string[][]) => void;
+}
+
+export default function CsvViewer({ onFileSelect, onDataParsed }: CsvViewerProps) {
+  const [csvData, setCsvData] = useState<string[][]>([]);
+  const [headers, setHeaders] = useState<string[]>([]);
+  const [rows, setRows] = useState<string[][]>([]);
+  const [fileName, setFileName] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // CSV 파싱 함수
+  const parseCsv = (text: string): string[][] => {
+    const lines: string[][] = [];
+    let currentLine: string[] = [];
+    let currentField = '';
+    let inQuotes = false;
+
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      const nextChar = text[i + 1];
+
+      if (char === '"') {
+        if (inQuotes && nextChar === '"') {
+          // 이스케이프된 따옴표
+          currentField += '"';
+          i++; // 다음 문자 건너뛰기
+        } else {
+          // 따옴표 시작/끝
+          inQuotes = !inQuotes;
+        }
+      } else if (char === ',' && !inQuotes) {
+        // 필드 구분자
+        currentLine.push(currentField.trim());
+        currentField = '';
+      } else if ((char === '\n' || char === '\r') && !inQuotes) {
+        // 줄바꿈
+        if (char === '\r' && nextChar === '\n') {
+          i++; // \r\n 건너뛰기
+        }
+        if (currentField || currentLine.length > 0) {
+          currentLine.push(currentField.trim());
+          lines.push(currentLine);
+          currentLine = [];
+          currentField = '';
+        }
+      } else {
+        currentField += char;
+      }
+    }
+
+    // 마지막 필드 추가
+    if (currentField || currentLine.length > 0) {
+      currentLine.push(currentField.trim());
+      lines.push(currentLine);
+    }
+
+    return lines;
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // CSV 파일인지 확인
+    if (!file.name.toLowerCase().endsWith('.csv')) {
+      alert('CSV 파일만 업로드할 수 있습니다.');
+      e.target.value = '';
+      return;
+    }
+
+    setFileName(file.name);
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result as string;
+      if (!text) return;
+
+      try {
+        const parsed = parseCsv(text);
+        
+        if (parsed.length === 0) {
+          alert('CSV 파일이 비어있습니다.');
+          return;
+        }
+
+        // 첫 번째 줄을 헤더로 사용
+        const csvHeaders = parsed[0];
+        const csvRows = parsed.slice(1);
+
+        setHeaders(csvHeaders);
+        setRows(csvRows);
+        setCsvData(parsed);
+
+        // 콜백 호출
+        if (onFileSelect) {
+          onFileSelect(file);
+        }
+        if (onDataParsed) {
+          onDataParsed(parsed);
+        }
+      } catch (error) {
+        console.error('CSV 파싱 오류:', error);
+        alert('CSV 파일을 읽는 중 오류가 발생했습니다.');
+      }
+    };
+
+    reader.onerror = () => {
+      alert('파일을 읽는 중 오류가 발생했습니다.');
+    };
+
+    reader.readAsText(file, 'UTF-8');
+  };
+
+  const handleClear = () => {
+    setCsvData([]);
+    setHeaders([]);
+    setRows([]);
+    setFileName('');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* 파일 업로드 영역 */}
+      <div className="flex items-center gap-4">
+        <label className="h-[40px] px-4 py-2 border border-[#8c95a1] rounded-[8px] bg-white text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
+          <span>CSV 파일 선택</span>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".csv,text/csv,application/vnd.ms-excel"
+            className="hidden"
+            onChange={handleFileChange}
+          />
+        </label>
+        
+        {fileName && (
+          <div className="flex items-center gap-2">
+            <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">
+              {fileName}
+            </span>
+            <button
+              type="button"
+              onClick={handleClear}
+              className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] hover:text-[#4c5561] transition-colors cursor-pointer"
+            >
+              삭제
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 표 영역 */}
+      {csvData.length > 0 && (
+        <div className="w-full border border-[#dee1e6] border-solid relative size-full bg-white">
+          <div className="content-stretch flex flex-col items-start justify-center relative size-full">
+            {/* 헤더 */}
+            <div className="bg-[#f1f8ff] content-stretch flex h-[48px] items-center overflow-clip relative shrink-0 w-full">
+              {headers.map((header, index) => {
+                const isLast = index === headers.length - 1;
+                return (
+                  <div
+                    key={index}
+                    className={`border-[#dee1e6] border-[0px_1px_0px_0px] border-solid box-border content-stretch flex gap-[10px] h-full items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
+                      index === 0 ? 'w-[48px]' : index === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
+                    }`}
+                  >
+                    <div className="flex flex-col font-['Pretendard:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#4c5561] text-[14px] text-nowrap">
+                      <p className="leading-[1.5] whitespace-pre">{header || `열 ${index + 1}`}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* 데이터 행 */}
+            {rows.map((row, rowIndex) => (
+              <div
+                key={rowIndex}
+                className="border-[#dee1e6] border-[1px_0px_0px] border-solid h-[48px] relative shrink-0 w-full"
+              >
+                <div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
+                  {headers.map((_, colIndex) => {
+                    const isLast = colIndex === headers.length - 1;
+                    const cellValue = row[colIndex] || '';
+                    return (
+                      <div
+                        key={colIndex}
+                        className={`border-[#dee1e6] ${
+                          isLast ? '' : 'border-[0px_1px_0px_0px]'
+                        } border-solid box-border content-stretch flex flex-col gap-[4px] ${
+                          colIndex === 0 
+                            ? 'items-center justify-center w-[48px] px-[8px] py-[12px]' 
+                            : 'items-center min-h-px min-w-px px-[8px] py-[12px]'
+                        } ${
+                          colIndex === 1 ? 'basis-0 grow' : ''
+                        } relative shrink-0`}
+                      >
+                        <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#1b2027] text-[15px] text-nowrap whitespace-pre">
+                          {cellValue}
+                        </p>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 데이터가 없을 때 */}
+      {csvData.length === 0 && (
+        <div className="w-full rounded-[8px] border border-[#dee1e6] bg-white min-h-[200px] flex items-center justify-center">
+          <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
+            CSV 파일을 선택하면 표 형태로 표시됩니다.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+

src/app/components/FooterVisibility.tsx

@@ -3,7 +3,7 @@
 import { usePathname } from "next/navigation";
 import Footer from "./Footer";
 
-const HIDE_FOOTER_PREFIXES = ["/pages"];
+const HIDE_FOOTER_PREFIXES = ["/pages", "/login"];
 
 export default function FooterVisibility() {
   const pathname = usePathname();

src/app/course-list/[id]/page.tsx

@@ -0,0 +1,388 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import apiService from '../../lib/apiService';
+import BackCircleSvg from '../../svgs/backcirclesvg';
+
+const imgPlay = '/imgs/play.svg';
+const imgMusicAudioPlay = '/imgs/music-audio-play.svg';
+
+type Lesson = {
+	id: string;
+	title: string;
+	duration: string; // "12:46" 형식
+	state: "제출완료" | "제출대기";
+	action: "복습하기" | "이어서 수강하기" | "수강하기";
+};
+
+type CourseDetail = {
+	id: string;
+	status: "수강 중" | "수강 예정" | "수강 완료";
+	title: string;
+	goal: string;
+	method: string;
+	summary: string; // VOD · 총 n강 · n시간 n분
+	submitSummary: string; // 학습 제출 n/n
+	thumbnail: string;
+	lessons: Lesson[];
+};
+
+export default function CourseDetailPage() {
+	const params = useParams();
+	const router = useRouter();
+	const [course, setCourse] = useState<CourseDetail | null>(null);
+	const [lectures, setLectures] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		const fetchCourse = async () => {
+			if (!params?.id) return;
+
+			try {
+				setLoading(true);
+				setError(null);
+
+				let data: any = null;
+				const subjectId = String(params.id);
+
+				// getSubjects로 과목 정보 가져오기
+				try {
+					const subjectsResponse = await apiService.getSubjects();
+					let subjectsData: any[] = [];
+
+					if (Array.isArray(subjectsResponse.data)) {
+						subjectsData = subjectsResponse.data;
+					} else if (subjectsResponse.data && typeof subjectsResponse.data === 'object') {
+						subjectsData = subjectsResponse.data.items ||
+							subjectsResponse.data.courses ||
+							subjectsResponse.data.data ||
+							subjectsResponse.data.list ||
+							subjectsResponse.data.subjects ||
+							subjectsResponse.data.subjectList ||
+							[];
+					}
+
+					// ID로 과목 찾기
+					data = subjectsData.find((s: any) => String(s.id || s.subjectId) === subjectId);
+				} catch (subjectsErr) {
+					console.error('getSubjects 실패:', subjectsErr);
+				}
+
+				if (!data) {
+					throw new Error('강좌를 찾을 수 없습니다.');
+				}
+
+				// 썸네일 이미지 가져오기
+				let thumbnail = '/imgs/talk.png';
+				if (data.imageKey) {
+					try {
+						const imageUrl = await apiService.getFile(data.imageKey);
+						if (imageUrl) {
+							thumbnail = imageUrl;
+						}
+					} catch (imgErr) {
+						console.error('이미지 다운로드 실패:', imgErr);
+					}
+				}
+
+				// getLectures로 모든 lecture 가져오기
+				let allLectures: any[] = [];
+				try {
+					const lecturesResponse = await apiService.getLectures();
+					if (Array.isArray(lecturesResponse.data)) {
+						allLectures = lecturesResponse.data;
+					} else if (lecturesResponse.data && typeof lecturesResponse.data === 'object') {
+						allLectures = lecturesResponse.data.items ||
+							lecturesResponse.data.lectures ||
+							lecturesResponse.data.data ||
+							lecturesResponse.data.list ||
+							[];
+					}
+
+					// subjectId로 필터링
+					const filteredLectures = allLectures.filter((lecture: any) =>
+						String(lecture.subjectId || lecture.subject_id) === subjectId
+					);
+
+					setLectures(filteredLectures);
+
+					// API 응답 데이터를 CourseDetail 타입으로 변환
+					const courseDetail: CourseDetail = {
+						id: String(data.id || params.id),
+						status: data.status || "수강 예정",
+						title: data.title || data.lectureName || data.subjectName || '',
+						goal: data.objective || data.goal || '',
+						method: data.method || '',
+						summary: data.summary || `VOD · 총 ${filteredLectures.length || 0}강`,
+						submitSummary: data.submitSummary || '',
+						thumbnail: thumbnail,
+						lessons: [],
+					};
+
+					setCourse(courseDetail);
+				} catch (lecturesErr) {
+					console.error('getLectures 실패:', lecturesErr);
+
+					// API 응답 데이터를 CourseDetail 타입으로 변환 (lecture 없이)
+					const courseDetail: CourseDetail = {
+						id: String(data.id || params.id),
+						status: data.status || "수강 예정",
+						title: data.title || data.lectureName || data.subjectName || '',
+						goal: data.objective || data.goal || '',
+						method: data.method || '',
+						summary: data.summary || `VOD · 총 0강`,
+						submitSummary: data.submitSummary || '',
+						thumbnail: thumbnail,
+						lessons: [],
+					};
+
+					setCourse(courseDetail);
+				}
+			} catch (err) {
+				console.error('강좌 조회 실패:', err);
+				setError(err instanceof Error ? err.message : '강좌를 불러오는데 실패했습니다.');
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchCourse();
+	}, [params?.id]);
+
+	if (loading) {
+		return (
+			<main className="flex w-full flex-col items-center">
+				<div className="flex h-[100px] w-full max-w-[1440px] items-center gap-[12px] px-8">
+					<button
+						type="button"
+						onClick={() => router.back()}
+						aria-label="뒤로 가기"
+						className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline cursor-pointer"
+					>
+						<BackCircleSvg width={32} height={32} />
+					</button>
+					<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
+				</div>
+				<section className="w-full max-w-[1440px] px-8 pb-20">
+					<div className="flex items-center justify-center py-20">
+						<p className="text-[16px] text-[#8c95a1]">로딩 중...</p>
+					</div>
+				</section>
+			</main>
+		);
+	}
+
+	if (error || !course) {
+		return (
+			<main className="flex w-full flex-col items-center">
+				<div className="flex h-[100px] w-full max-w-[1440px] items-center gap-[12px] px-8">
+					<button
+						type="button"
+						onClick={() => router.back()}
+						aria-label="뒤로 가기"
+						className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline cursor-pointer"
+					>
+						<BackCircleSvg width={32} height={32} />
+					</button>
+					<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
+				</div>
+				<section className="w-full max-w-[1440px] px-8 pb-20">
+					<div className="flex flex-col items-center justify-center py-20">
+						<p className="text-[16px] text-red-500 mb-4">{error || '강좌를 찾을 수 없습니다.'}</p>
+						<button
+							type="button"
+							onClick={() => router.push('/course-list')}
+							className="px-4 py-2 rounded-[6px] bg-primary text-white text-[14px] font-medium"
+						>
+							강좌 목록으로 돌아가기
+						</button>
+					</div>
+				</section>
+			</main>
+		);
+	}
+
+	return (
+		<main className="flex w-full flex-col items-center">
+			{/* 헤더 */}
+			<div className="flex h-[100px] w-full max-w-[1440px] items-center gap-[12px] px-8">
+				<button
+					type="button"
+					onClick={() => router.back()}
+					aria-label="뒤로 가기"
+					className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline cursor-pointer"
+				>
+					<BackCircleSvg width={32} height={32} />
+				</button>
+				<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
+			</div>
+
+			{/* 메인 콘텐츠 */}
+			<section className="w-full max-w-[1440px] px-8 pb-[80px] pt-[24px]">
+				{/* 상단 정보 카드 */}
+				<div className="bg-[#f8f9fa] box-border flex gap-[24px] items-start p-[24px] rounded-[8px] w-full">
+					{/* 이미지 컨테이너 */}
+					<div className="overflow-clip relative rounded-[4px] shrink-0 w-[220.5px] h-[159px]">
+						<Image
+							src={course.thumbnail}
+							alt={course.title}
+							fill
+							sizes="220.5px"
+							className="object-cover"
+							unoptimized
+						/>
+					</div>
+
+					{/* 교육과정 정보 */}
+					<div className="basis-0 flex flex-col gap-[12px] grow items-start min-h-px min-w-px relative shrink-0">
+						{/* 제목 영역 */}
+						<div className="flex gap-[8px] h-[27px] items-center w-full">
+							<div className="bg-[#e5f5ec] box-border flex h-[20px] items-center justify-center px-[4px] py-0 rounded-[4px] shrink-0">
+								<p className="font-['Pretendard:SemiBold',sans-serif] text-[#0c9d61] text-[13px] leading-[1.4]">{course.status}</p>
+							</div>
+							<h2 className="font-['Pretendard:SemiBold',sans-serif] text-[#333c47] text-[18px] leading-[1.5]">{course.title}</h2>
+						</div>
+
+						{/* 학습 목표 및 방법 */}
+						<div className="flex flex-col gap-[4px] items-start w-full">
+							<p className="font-['Pretendard:Regular',sans-serif] text-[#333c47] text-[15px] leading-[1.5] mb-0">
+								<span className="font-['Pretendard:Medium',sans-serif]">학습 목표:</span>
+								<span>{` ${course.goal}`}</span>
+							</p>
+							<p className="font-['Pretendard:Regular',sans-serif] text-[#333c47] text-[15px] leading-[1.5]">
+								<span className="font-['Pretendard:Medium',sans-serif]">학습 방법:</span>
+								<span>{` ${course.method}`}</span>
+							</p>
+						</div>
+
+						{/* 통계 정보 */}
+						<div className="flex gap-[4px] items-center w-full">
+							<div className="flex gap-[20px] items-center">
+								{/* VOD 정보 */}
+								<div className="flex gap-[4px] items-center">
+									<div className="relative shrink-0 size-[16px]">
+										<img src={imgPlay} alt="" className="block max-w-none size-full" />
+									</div>
+									<p className="font-['Pretendard:Medium',sans-serif] text-[#8c95a1] text-[13px] leading-[1.4]">{course.summary}</p>
+								</div>
+
+								{/* 학습 제출 정보 */}
+								{course.submitSummary && (
+									<div className="flex gap-[4px] items-center">
+										<div className="relative shrink-0 size-[16px]">
+											<img src={imgMusicAudioPlay} alt="" className="block max-w-none size-full" />
+										</div>
+										<p className="font-['Pretendard:Medium',sans-serif] text-[#8c95a1] text-[13px] leading-[1.4]">{course.submitSummary}</p>
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+
+				{/* Lecture 리스트 */}
+				<div className="flex flex-col gap-[8px] items-start mt-[24px] w-full">
+					{lectures.length > 0 ? (
+						lectures.map((lecture: any, index: number) => {
+							const isSubmitted = false; // TODO: 진행률 API에서 가져와야 함
+							const action = isSubmitted ? "복습하기" : (index === 0 ? "수강하기" : "이어서 수강하기");
+							const submitBtnBorder = isSubmitted
+								? "border-transparent"
+								: (action === "이어서 수강하기" || action === "수강하기" ? "border-[#b1b8c0]" : "border-[#8c95a1]");
+							const submitBtnText = isSubmitted ? "text-[#384fbf]" : (action === "이어서 수강하기" || action === "수강하기" ? "text-[#b1b8c0]" : "text-[#4c5561]");
+							const rightBtnStyle =
+								action === "이어서 수강하기" || action === "수강하기"
+									? "bg-[#ecf0ff] text-[#384fbf]"
+									: "bg-[#f1f3f5] text-[#4c5561]";
+
+							return (
+								<div key={lecture.id || lecture.lectureId || index} className="bg-white border border-[#dee1e6] border-solid relative rounded-[8px] w-full">
+									<div className="box-border flex gap-[16px] items-center overflow-clip px-[24px] py-[16px] rounded-[inherit] w-full">
+										<div className="basis-0 flex grow h-[46px] items-center justify-between min-h-px min-w-px relative shrink-0">
+											{/* Lecture 정보 */}
+											<div className="basis-0 grow min-h-px min-w-px relative shrink-0">
+												<div className="flex flex-col gap-[4px] items-start w-full">
+													<p className="font-['Pretendard:SemiBold',sans-serif] text-[#333c47] text-[16px] leading-[1.5]">
+														{index + 1}. {lecture.title || lecture.lectureName || ''}
+													</p>
+													<div className="flex gap-[12px] items-center w-full">
+														<p className="font-['Pretendard:Medium',sans-serif] text-[#8c95a1] text-[13px] leading-[1.4] w-[40px]">
+															{lecture.duration || '00:00'}
+														</p>
+													</div>
+												</div>
+											</div>
+
+											{/* 버튼 영역 */}
+											<div className="relative shrink-0">
+												<div className="flex gap-[8px] items-center">
+													{/* 학습 제출 버튼 */}
+													<button
+														type="button"
+														className={[
+															"bg-white box-border flex flex-col h-[32px] items-center justify-center px-[16px] py-[3px] rounded-[6px] shrink-0",
+															"border border-solid",
+															submitBtnBorder,
+															submitBtnText,
+														].join(" ")}
+													>
+														{isSubmitted ? (
+															<div className="flex gap-[4px] h-[18px] items-center">
+																<div className="relative shrink-0 size-[12px]">
+																	<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+																		<path d="M10 3L4.5 8.5L2 6" stroke="#384fbf" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+																	</svg>
+																</div>
+																<p className="font-['Pretendard:Medium',sans-serif] text-[#384fbf] text-[13px] leading-[1.4]">학습 제출 완료</p>
+															</div>
+														) : (
+															<p className={[
+																"font-['Pretendard:Medium',sans-serif] text-[14px] leading-[1.5] text-center",
+																submitBtnText,
+															].join(" ")}>학습 제출 하기</p>
+														)}
+													</button>
+
+													{/* 수강/복습 버튼 */}
+													<button
+														type="button"
+														onClick={() => {
+															const lectureId = lecture.id || lecture.lectureId;
+															if (lectureId) {
+																router.push(`/menu/courses/lessons/${lectureId}/start`);
+															}
+														}}
+														className={[
+															"box-border flex flex-col h-[32px] items-center justify-center px-[16px] py-[3px] rounded-[6px] shrink-0 transition-colors",
+															rightBtnStyle,
+															action === "이어서 수강하기" || action === "수강하기"
+																? "hover:bg-[#d0d9ff]"
+																: "hover:bg-[#e5e8eb]",
+														].join(" ")}
+													>
+														<p className={[
+															"font-['Pretendard:Medium',sans-serif] text-[14px] leading-[1.5] text-center",
+															action === "이어서 수강하기" || action === "수강하기" ? "text-[#384fbf]" : "text-[#4c5561]",
+														].join(" ")}>{action}</p>
+													</button>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							);
+						})
+					) : (
+						<div className="flex items-center justify-center py-8 w-full">
+							<p className="text-[14px] text-[#8c95a1]">등록된 강의가 없습니다.</p>
+						</div>
+					)}
+				</div>
+			</section>
+		</main>
+	);
+}
+

src/app/course-list/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import ChevronDownSvg from '../svgs/chevrondownsvg';
+import apiService from '../lib/apiService';
 
 // 피그마 선택 컴포넌트의 구조/스타일(타이포/여백/색상)을 반영한 리스트 UI
 // - 프로젝트는 Tailwind v4(@import "tailwindcss")를 사용하므로 클래스 그대로 적용
@@ -9,10 +11,21 @@ import ChevronDownSvg from '../svgs/chevrondownsvg';
 // - 카드 구성: 섬네일(rounded 8px) + 상태 태그 + 제목 + 메타(재생 아이콘 + 텍스트)
 
 const imgPlay = '/imgs/play.svg'; // public/imgs/play.svg
-const imgThumbA = '/imgs/thumb-a.png'; // public/imgs/thumb-a.png
-const imgThumbB = '/imgs/thumb-b.png'; // public/imgs/thumb-b.png
-const imgThumbC = '/imgs/thumb-c.png'; // public/imgs/thumb-c.png
-const imgThumbD = '/imgs/thumb-d.png'; // public/imgs/thumb-d.png
+
+interface Subject {
+  id: string | number;
+  title: string;
+  imageKey?: string;
+  instructor?: string;
+}
+
+interface Course {
+  id: string | number;
+  title: string;
+  image: string;
+  inProgress?: boolean;
+  meta?: string;
+}
 
 function ColorfulTag({ text }: { text: string }) {
   return (
@@ -22,36 +35,114 @@ function ColorfulTag({ text }: { text: string }) {
   );
 }
 
-type Course = { id: string; title: string; image: string; inProgress?: boolean };
-
 export default function CourseListPage() {
   const ITEMS_PER_PAGE = 20;
   const [page, setPage] = useState(1);
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
+  const router = useRouter();
 
-  const base: Omit<Course, 'id'>[] = [
-    { title: '원자로 운전 및 계통', image: imgThumbA, inProgress: true },
-    { title: '핵연료', image: imgThumbB },
-    { title: '방사선 안전', image: imgThumbC },
-    { title: '방사선 폐기물', image: imgThumbD },
-    { title: '원자로 운전 및 계통', image: imgThumbA },
-    { title: '핵연료', image: imgThumbB },
-    { title: '방사선 안전', image: imgThumbC },
-  ];
-  const courses: Course[] = Array.from({ length: 28 }, (_, i) => {
-    const item = base[i % base.length];
-    return {
-      id: `p${i + 1}`,
-      title: item.title,
-      image: item.image,
-      inProgress: item.inProgress ?? (i % 7 === 0),
+  // 과목 리스트 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchSubjects() {
+      try {
+        setLoading(true);
+        const response = await apiService.getSubjects();
+
+        if (response.status !== 200 || !response.data) {
+          return;
+        }
+
+        // 응답 데이터 구조 확인 및 배열 추출
+        let subjectsData: any[] = [];
+        let total = 0;
+
+        if (Array.isArray(response.data)) {
+          subjectsData = response.data;
+          total = response.data.length;
+        } else if (response.data && typeof response.data === 'object') {
+          // 다양한 응답 구조 처리
+          subjectsData = response.data.items || 
+                        response.data.courses || 
+                        response.data.data || 
+                        response.data.list || 
+                        response.data.subjects || 
+                        response.data.subjectList || 
+                        [];
+          
+          // 전체 개수는 total, totalCount, count 등의 필드에서 가져오거나 배열 길이 사용
+          total = response.data.total !== undefined ? response.data.total :
+                  response.data.totalCount !== undefined ? response.data.totalCount :
+                  response.data.count !== undefined ? response.data.count :
+                  subjectsData.length;
+        }
+
+        if (!isMounted) return;
+
+        setTotalCount(total);
+        setSubjects(subjectsData);
+
+        // 각 과목의 이미지 다운로드
+        const coursesWithImages = await Promise.all(
+          subjectsData.map(async (subject: Subject) => {
+            let imageUrl = 'https://picsum.photos/seed/xrlms-fallback-card/1200/800';
+            
+            if (subject.imageKey) {
+              try {
+                const fileUrl = await apiService.getFile(subject.imageKey);
+                if (fileUrl) {
+                  imageUrl = fileUrl;
+                }
+              } catch (error) {
+                console.error(`이미지 다운로드 실패 (과목 ID: ${subject.id}):`, error);
+              }
+            }
+
+            return {
+              id: subject.id,
+              title: subject.title || '',
+              image: imageUrl,
+              inProgress: false, // TODO: 수강 중 상태는 진행률 API에서 가져와야 함
+              meta: subject.instructor ? `강사: ${subject.instructor}` : 'VOD • 온라인',
+            };
+          })
+        );
+
+        if (isMounted) {
+          setCourses(coursesWithImages);
+        }
+      } catch (error) {
+        console.error('과목 리스트 조회 오류:', error);
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchSubjects();
+
+    return () => {
+      isMounted = false;
     };
-  });
-  const totalPages = Math.ceil(courses.length / ITEMS_PER_PAGE);
+  }, []);
+
+  const totalPages = Math.ceil(totalCount / ITEMS_PER_PAGE);
   const pagedCourses = useMemo(
     () => courses.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE),
     [courses, page]
   );
 
+  // 페이지네이션: 10개씩 표시
+  const pageGroup = Math.floor((page - 1) / 10);
+  const startPage = pageGroup * 10 + 1;
+  const endPage = Math.min(startPage + 9, totalPages);
+  const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+
   return (
     <main className="flex w-full flex-col items-center">
       {/* 상단 타이틀 영역 */}
@@ -64,94 +155,135 @@ export default function CourseListPage() {
         {/* 상단 카운트/정렬 영역 */}
         <div className="flex items-center justify-between">
           <p className="text-[15px] font-medium leading-normal text-neutral-700">
-            총 <span className="text-primary">{courses.length}</span>건
+            총 <span className="text-primary">{totalCount}</span>건
           </p>
           <div className="h-[40px] w-[114px]" />
         </div>
 
-        {/* 카드 그리드(고정 5열, gap 32px) */}
-        <div className="mt-4 flex flex-col items-center">
-          <div className="w-[1376px] grid grid-cols-5 gap-[32px]">
-            {pagedCourses.map((c) => (
-              <article
-                key={c.id}
-                className="flex h-[260px] w-[249.6px] flex-col gap-[16px] rounded-[8px] bg-white"
-              >
-                {/* 섬네일 */}
-                <div className="relative h-[166.4px] w-full overflow-clip rounded-[8px]">
-                  <img
-                    src={c.image}
-                    alt=""
-                    className="absolute inset-0 size-full object-cover"
-                  />
-                </div>
-
-                {/* 본문 텍스트 블록 */}
-                <div className="flex w-full flex-col gap-[4px]">
-                  <div className="flex flex-col gap-[4px]">
-                    {c.inProgress && <ColorfulTag text="수강 중" />}
-                    <h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
-                      {c.title}
-                    </h2>
-                  </div>
-                  <div className="flex items-center gap-[4px]">
-                    <img src={imgPlay} alt="" className="size-[16px]" />
-                    <p className="text-[13px] font-medium leading-[1.4] text-text-meta">
-                      VOD · 총 6강 · 4시간 20분
-                    </p>
-                  </div>
-                </div>
-              </article>
-            ))}
+        {loading ? (
+          <div className="mt-4 flex items-center justify-center h-[400px]">
+            <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
           </div>
-        </div>
+        ) : (
+          <>
+            {/* 카드 그리드(고정 5열, gap 32px) */}
+            <div className="mt-4 flex flex-col items-center">
+              <div className="w-[1376px] grid grid-cols-5 gap-[32px]">
+                {pagedCourses.map((c) => (
+                  <article
+                    key={c.id}
+                    onClick={() => router.push(`/course-list/${c.id}`)}
+                    className="flex h-[260px] w-[249.6px] flex-col gap-[16px] rounded-[8px] bg-white cursor-pointer"
+                  >
+                    {/* 섬네일 */}
+                    <div className="relative h-[166.4px] w-full overflow-clip rounded-[8px] flex items-center justify-center bg-[#F1F3F5] hover:shadow-lg transition-shadow">
+                      <img
+                        src={c.image}
+                        alt={c.title}
+                        className="h-full w-auto object-contain"
+                        onError={(e) => {
+                          const t = e.currentTarget as HTMLImageElement;
+                          if (!t.src.includes('picsum.photos')) t.src = 'https://picsum.photos/seed/xrlms-fallback-card/1200/800';
+                        }}
+                      />
+                    </div>
 
-        {/* 페이지네이션 (피그마 스타일 반영) */}
-        <div className="mt-8 flex items-center justify-center gap-[8px]">
-          {/* Prev */}
-          <button
-            type="button"
-            onClick={() => setPage((p) => Math.max(1, p - 1))}
-            aria-label="이전 페이지"
-            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
-            disabled={page === 1}
-          >
-            <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
-          </button>
+                    {/* 본문 텍스트 블록 */}
+                    <div className="flex w-full flex-col gap-[4px]">
+                      <div className="flex flex-col gap-[4px]">
+                        {c.inProgress && <ColorfulTag text="수강 중" />}
+                        <h2 className="text-[18px] font-semibold leading-normal text-neutral-700 truncate" title={c.title}>
+                          {c.title}
+                        </h2>
+                      </div>
+                      <div className="flex items-center gap-[4px]">
+                        <img src={imgPlay} alt="" className="size-[16px]" />
+                        <p className="text-[13px] font-medium leading-[1.4] text-text-meta">
+                          {c.meta || 'VOD • 온라인'}
+                        </p>
+                      </div>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </div>
 
-          {/* Numbers */}
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => {
-            const active = n === page;
-            return (
-              <button
-                key={n}
-                type="button"
-                onClick={() => setPage(n)}
-                aria-current={active ? 'page' : undefined}
-                className={[
-                  'flex items-center justify-center rounded-[1000px] size-[32px]',
-                  active ? 'bg-bg-primary-light' : 'bg-white',
-                ].join(' ')}
-              >
-                <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
-              </button>
-            );
-          })}
+            {/* 페이지네이션 - admin 페이지와 동일한 메커니즘 (10개씩 표시) */}
+            {totalCount > ITEMS_PER_PAGE && (
+              <div className="mt-8 flex items-center justify-center gap-[8px]">
+                {/* First (맨 앞으로) */}
+                <button
+                  type="button"
+                  onClick={() => setPage(1)}
+                  aria-label="맨 앞 페이지"
+                  className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                  disabled={page === 1}
+                >
+                  <div className="relative flex items-center justify-center w-full h-full">
+                    <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
+                    <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
+                  </div>
+                </button>
 
-          {/* Next */}
-          <button
-            type="button"
-            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-            aria-label="다음 페이지"
-            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
-            disabled={page === totalPages}
-          >
-            <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
-          </button>
-        </div>
+                {/* Prev */}
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  aria-label="이전 페이지"
+                  className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                  disabled={page === 1}
+                >
+                  <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
+                </button>
+
+                {/* Numbers */}
+                {visiblePages.map((n) => {
+                  const active = n === page;
+                  return (
+                    <button
+                      key={n}
+                      type="button"
+                      onClick={() => setPage(n)}
+                      aria-current={active ? 'page' : undefined}
+                      className={[
+                        'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
+                        active ? 'bg-bg-primary-light' : 'bg-white',
+                      ].join(' ')}
+                    >
+                      <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
+                    </button>
+                  );
+                })}
+
+                {/* Next */}
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  aria-label="다음 페이지"
+                  className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                  disabled={page === totalPages}
+                >
+                  <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
+                </button>
+
+                {/* Last (맨 뒤로) */}
+                <button
+                  type="button"
+                  onClick={() => setPage(totalPages)}
+                  aria-label="맨 뒤 페이지"
+                  className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                  disabled={page === totalPages}
+                >
+                  <div className="relative flex items-center justify-center w-full h-full">
+                    <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
+                    <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
+                  </div>
+                </button>
+              </div>
+            )}
+          </>
+        )}
       </section>
     </main>
   );
 }
-
-

src/app/find-id/page.tsx

@@ -5,6 +5,7 @@ import IdFindDone from "./IdFindDone";
 import IdFindFailed from "./IdFindFailed";
 import FindIdOption from "./FindIdOption";
 import LoginInputSvg from "@/app/svgs/inputformx";
+import apiService from "@/app/lib/apiService";
 
 export default function FindIdPage() {
 	const [isDoneOpen, setIsDoneOpen] = useState(false);
@@ -49,58 +50,19 @@ export default function FindIdPage() {
 		if (!validateAll()) return;
 
 		try {
-			const response = await fetch('https://hrdi.coconutmeet.net/auth/find-id', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({
-					name: name,
-					phone: phone,
-				}),
-			});
+			const response = await apiService.findUserId(name, phone);
+			const data = response.data;
 
-			if (!response.ok) {
-				let errorMessage = `아이디 찾기 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				console.error('아이디 찾기 실패:', errorMessage);
-				setIsFailedOpen(true);
-				return;
-			}
-
-			const data = await response.json();
-			
 			// body의 emails 배열에서 첫 번째 이메일 가져오기
 			if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
 				setFoundUserId(data.emails[0]);
 			} else if (data.email) {
 				setFoundUserId(data.email);
 			}
-			
-			// 가입일 정보는 API 응답에 없음
-			// // header의 date 값 가져오기
-			// const headerDate = response.headers.get('date');
-			// if (headerDate) {
-			// 	setJoinedAt(formatJoinedAt(headerDate));
-			// }
-			
+
 			setIsDoneOpen(true);
 		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
-			console.error('아이디 찾기 오류:', errorMessage);
+			console.error('아이디 찾기 오류:', error);
 			setIsFailedOpen(true);
 		}
 	}
@@ -121,115 +83,113 @@ export default function FindIdPage() {
 			<div className="flex-1 flex items-center justify-center w-full py-6">
 				<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full relative">
 
-				<div className="my-15 flex flex-col items-center">
-					<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
-						아이디 찾기
-					</div>
-					<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
-						가입 시 등록한 회원정보를 입력해 주세요.
-					</p>
-				</div>
-
-				<form onSubmit={handleSubmit}>
-					<div className="space-y-2">
-						<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
-							이름
-						</label>
-						<div className="relative">
-							<input
-								id="name"
-								name="name"
-								value={name}
-								onChange={(e) => {
-									setName(e.target.value);
-									if (errors.name) {
-										setErrors((prev) => {
-											const next = { ...prev };
-											delete next.name;
-											return next;
-										});
-									}
-								}}
-								onFocus={() => setFocused((p) => ({ ...p, name: true }))}
-								onBlur={() => setFocused((p) => ({ ...p, name: false }))}
-								placeholder="이름을 입력해 주세요."
-								className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${
-									errors.name
-										? "border-error focus:border-error"
-										: "border-neutral-40 focus:border-neutral-700"
-								}`}
-							/>
-							{name.trim().length > 0 && focused.name && (
-								<button
-									type="button"
-									onMouseDown={(e) => {
-										e.preventDefault();
-										setName("");
-									}}
-									aria-label="입력 지우기"
-									className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
-									<LoginInputSvg />
-								</button>
-							)}
+					<div className="my-15 flex flex-col items-center">
+						<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
+							아이디 찾기
 						</div>
-						{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
+						<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
+							가입 시 등록한 회원정보를 입력해 주세요.
+						</p>
 					</div>
 
-					<div className="space-y-2 mt-6">
-						<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
-							휴대폰 번호
-						</label>
-						<div className="relative">
-							<input
-								id="phone"
-								name="phone"
-								type="tel"
-								inputMode="numeric"
-								value={formatPhoneNumber(phone)}
-								onChange={(e) => {
-									const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
-									setPhone(numbersOnly);
-									if (errors.phone) {
-										setErrors((prev) => {
-											const next = { ...prev };
-											delete next.phone;
-											return next;
-										});
-									}
-								}}
-								onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
-								onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
-								placeholder="-없이 입력해 주세요."
-								className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${
-									errors.phone
-										? "border-error focus:border-error"
-										: "border-neutral-40 focus:border-neutral-700"
-								}`}
-							/>
-							{phone.length > 0 && focused.phone && (
-								<button
-									type="button"
-									onMouseDown={(e) => {
-										e.preventDefault();
-										setPhone("");
+					<form onSubmit={handleSubmit}>
+						<div className="space-y-2">
+							<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
+								이름
+							</label>
+							<div className="relative">
+								<input
+									id="name"
+									name="name"
+									value={name}
+									onChange={(e) => {
+										setName(e.target.value);
+										if (errors.name) {
+											setErrors((prev) => {
+												const next = { ...prev };
+												delete next.name;
+												return next;
+											});
+										}
 									}}
-									aria-label="입력 지우기"
-									className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
-									<LoginInputSvg />
-								</button>
-							)}
+									onFocus={() => setFocused((p) => ({ ...p, name: true }))}
+									onBlur={() => setFocused((p) => ({ ...p, name: false }))}
+									placeholder="이름을 입력해 주세요."
+									className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.name
+											? "border-error focus:border-error"
+											: "border-neutral-40 focus:border-neutral-700"
+										}`}
+								/>
+								{name.trim().length > 0 && focused.name && (
+									<button
+										type="button"
+										onMouseDown={(e) => {
+											e.preventDefault();
+											setName("");
+										}}
+										aria-label="입력 지우기"
+										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
+										<LoginInputSvg />
+									</button>
+								)}
+							</div>
+							{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
 						</div>
-						{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
-					</div>
 
-					<button
-						type="submit"
-						className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
-						다음
-					</button>
+						<div className="space-y-2 mt-6">
+							<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
+								휴대폰 번호
+							</label>
+							<div className="relative">
+								<input
+									id="phone"
+									name="phone"
+									type="tel"
+									inputMode="numeric"
+									value={formatPhoneNumber(phone)}
+									onChange={(e) => {
+										const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
+										setPhone(numbersOnly);
+										if (errors.phone) {
+											setErrors((prev) => {
+												const next = { ...prev };
+												delete next.phone;
+												return next;
+											});
+										}
+									}}
+									onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
+									onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
+									placeholder="-없이 입력해 주세요."
+									className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.phone
+											? "border-error focus:border-error"
+											: "border-neutral-40 focus:border-neutral-700"
+										}`}
+								/>
+								{phone.length > 0 && focused.phone && (
+									<button
+										type="button"
+										onMouseDown={(e) => {
+											e.preventDefault();
+											setPhone("");
+										}}
+										aria-label="입력 지우기"
+										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
+										<LoginInputSvg />
+									</button>
+								)}
+							</div>
+							{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
+						</div>
+
+						<button
+							type="submit"
+							className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
+							다음
+						</button>
 
 
-				</form>
+					</form>
 				</div>
 			</div>
 

src/app/globals.css

@@ -54,6 +54,29 @@ body {
   color: var(--foreground);
 }
 
+/* 전역 스크롤바 스타일 - 배경(트랙)만 투명하게, 썸은 보이게 */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+html::-webkit-scrollbar {
+  width: 8px;
+}
+
+html::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+html::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+html::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
 button {
   cursor: pointer;
 }
@@ -61,3 +84,49 @@ button {
 button:hover {
   cursor: pointer;
 }
+
+/* 드롭다운 스크롤바 스타일 - 배경 없애기 */
+.dropdown-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.dropdown-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dropdown-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+}
+
+.dropdown-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+/* CSV 표 스크롤바 스타일 - 배경만 투명, thumb는 보이게 */
+.csv-table-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.csv-table-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.csv-table-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.csv-table-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.csv-table-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}

src/app/instructor/courses/page.tsx

@@ -0,0 +1,731 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import ChevronDownSvg from '../../svgs/chevrondownsvg';
+import apiService from '../../lib/apiService';
+
+// 드롭다운 아이콘 컴포넌트
+function ArrowDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// 검색 아이콘 컴포넌트
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 19L14.65 14.65"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// 태그 컴포넌트
+function StatusTag({ text, type = 'default', color = 'primary' }: { text: string; type?: 'default' | 'emphasis'; color?: 'primary' | 'gray' }) {
+  if (type === 'default' && color === 'primary') {
+    return (
+      <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
+        <span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
+          {text}
+        </span>
+      </div>
+    );
+  }
+  if (type === 'default' && color === 'gray') {
+    return (
+      <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
+        <span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
+          {text}
+        </span>
+      </div>
+    );
+  }
+  return (
+    <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
+      <span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
+        {text}
+      </span>
+    </div>
+  );
+}
+
+type LearnerProgress = {
+  id: string;
+  courseName: string;
+  lessonName: string;
+  learnerName: string;
+  enrollmentDate: string;
+  lastStudyDate: string;
+  progressRate: number;
+  hasSubmitted: boolean;
+  score: number | null;
+  isCompleted: boolean;
+};
+
+export default function InstructorCoursesPage() {
+  const router = useRouter();
+  const [userRole, setUserRole] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  // 필터 상태
+  const [selectedCourse, setSelectedCourse] = useState<string>('all');
+  const [selectedSubmissionStatus, setSelectedSubmissionStatus] = useState<string>('all');
+  const [selectedCompletionStatus, setSelectedCompletionStatus] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  
+  // 드롭다운 열림 상태
+  const [isCourseDropdownOpen, setIsCourseDropdownOpen] = useState(false);
+  const [isSubmissionDropdownOpen, setIsSubmissionDropdownOpen] = useState(false);
+  const [isCompletionDropdownOpen, setIsCompletionDropdownOpen] = useState(false);
+  
+  // 데이터
+  const [courses, setCourses] = useState<{ id: string; name: string }[]>([]);
+  const [learnerProgress, setLearnerProgress] = useState<LearnerProgress[]>([]);
+  
+  const ITEMS_PER_PAGE = 10;
+
+  // 사용자 정보 및 권한 확인
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchUserInfo() {
+      try {
+        const localStorageToken = localStorage.getItem('token');
+        const cookieToken = document.cookie
+          .split('; ')
+          .find(row => row.startsWith('token='))
+          ?.split('=')[1];
+        
+        const token = localStorageToken || cookieToken;
+        
+        if (!token) {
+          router.push('/login');
+          return;
+        }
+
+        const response = await apiService.getCurrentUser();
+
+        if (response.status === 401) {
+          localStorage.removeItem('token');
+          document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+          if (isMounted) {
+            router.push('/login');
+          }
+          return;
+        }
+
+        const data = response.data;
+        
+        if (isMounted) {
+          const role = data.role || data.userRole || '';
+          setUserRole(role);
+          
+          // admin이 아니면 접근 불가
+          if (role !== 'ADMIN' && role !== 'admin') {
+            router.push('/');
+            return;
+          }
+        }
+      } catch (error) {
+        console.error('사용자 정보 조회 오류:', error);
+        if (isMounted) {
+          router.push('/login');
+        }
+      }
+    }
+
+    fetchUserInfo();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [router]);
+
+  // 교육 과정 목록 가져오기
+  useEffect(() => {
+    async function fetchCourses() {
+      try {
+        const token = localStorage.getItem('token') || document.cookie
+          .split('; ')
+          .find(row => row.startsWith('token='))
+          ?.split('=')[1];
+
+        const response = await apiService.getSubjects();
+
+        const data = response.data;
+        const coursesArray = Array.isArray(data) ? data : (data.items || data.courses || data.data || []);
+        setCourses(coursesArray.map((item: any) => ({
+          id: String(item.id || item.subjectId || ''),
+          name: item.courseName || item.name || item.subjectName || '',
+        })));
+      } catch (error) {
+        console.error('교육 과정 목록 조회 오류:', error);
+      }
+    }
+
+    fetchCourses();
+  }, []);
+
+  // 학습자 진행 상황 데이터 (더미 데이터 - 실제 API로 교체 필요)
+  useEffect(() => {
+    async function fetchLearnerProgress() {
+      try {
+        setIsLoading(true);
+        // TODO: 실제 API 호출로 교체
+        // 현재는 더미 데이터 사용
+        const dummyData: LearnerProgress[] = [
+          {
+            id: '1',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 100,
+            isCompleted: true,
+          },
+          {
+            id: '2',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 100,
+            isCompleted: true,
+          },
+          {
+            id: '3',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 100,
+            isCompleted: true,
+          },
+          {
+            id: '4',
+            courseName: '원자로 운전 및 계통',
+            lessonName: '6. 원자로 시동, 운전 및 정지 절차',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 60,
+            isCompleted: true,
+          },
+          {
+            id: '5',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 30,
+            isCompleted: false,
+          },
+          {
+            id: '6',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: true,
+            score: 30,
+            isCompleted: false,
+          },
+          {
+            id: '7',
+            courseName: '방사선 관리',
+            lessonName: '{강좌명}',
+            learnerName: '김하늘',
+            enrollmentDate: '2025-09-10',
+            lastStudyDate: '2025-09-10',
+            progressRate: 100,
+            hasSubmitted: false,
+            score: null,
+            isCompleted: false,
+          },
+        ];
+        setLearnerProgress(dummyData);
+      } catch (error) {
+        console.error('학습자 진행 상황 조회 오류:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchLearnerProgress();
+  }, []);
+
+  // 필터링된 데이터
+  const filteredData = useMemo(() => {
+    return learnerProgress.filter((item) => {
+      // 교육 과정 필터
+      if (selectedCourse !== 'all' && item.courseName !== selectedCourse) {
+        return false;
+      }
+      
+      // 문제 제출 여부 필터
+      if (selectedSubmissionStatus === 'submitted' && !item.hasSubmitted) {
+        return false;
+      }
+      if (selectedSubmissionStatus === 'not-submitted' && item.hasSubmitted) {
+        return false;
+      }
+      
+      // 수료 여부 필터
+      if (selectedCompletionStatus === 'completed' && !item.isCompleted) {
+        return false;
+      }
+      if (selectedCompletionStatus === 'not-completed' && item.isCompleted) {
+        return false;
+      }
+      
+      // 검색어 필터
+      if (searchQuery && !item.learnerName.toLowerCase().includes(searchQuery.toLowerCase())) {
+        return false;
+      }
+      
+      return true;
+    });
+  }, [learnerProgress, selectedCourse, selectedSubmissionStatus, selectedCompletionStatus, searchQuery]);
+
+  // 페이지네이션
+  const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return filteredData.slice(startIndex, endIndex);
+  }, [filteredData, currentPage]);
+
+  // 드롭다운 외부 클릭 감지
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.dropdown-container')) {
+        setIsCourseDropdownOpen(false);
+        setIsSubmissionDropdownOpen(false);
+        setIsCompletionDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="bg-white min-h-screen flex flex-col">
+      <div className="flex-1 max-w-[1440px] w-full mx-auto px-0">
+        <div className="flex flex-col h-[100px] items-start justify-center px-[32px] ">
+          <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+            강좌 현황
+          </h1>
+        </div>
+        
+        <div className="flex flex-col gap-[16px] px-[32px] py-[32px]">
+          {/* 필터 및 검색 영역 */}
+          <div className="flex items-end justify-between gap-[16px]">
+            <div className="flex gap-[8px] items-end">
+              {/* 교육 과정 드롭다운 */}
+              <div className="flex flex-col gap-[4px] relative dropdown-container">
+                <label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
+                  교육 과정
+                </label>
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsCourseDropdownOpen(!isCourseDropdownOpen);
+                      setIsSubmissionDropdownOpen(false);
+                      setIsCompletionDropdownOpen(false);
+                    }}
+                    className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[400px]"
+                  >
+                    <span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
+                      {selectedCourse === 'all' ? '선택 안함' : courses.find(c => c.id === selectedCourse)?.name || '선택 안함'}
+                    </span>
+                    <ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
+                  </button>
+                  {isCourseDropdownOpen && (
+                    <div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[400px] max-h-[200px] overflow-y-auto">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedCourse('all');
+                          setIsCourseDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        선택 안함
+                      </button>
+                      {courses.map((course) => (
+                        <button
+                          key={course.id}
+                          type="button"
+                          onClick={() => {
+                            setSelectedCourse(course.name);
+                            setIsCourseDropdownOpen(false);
+                          }}
+                          className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                        >
+                          {course.name}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 문제 제출 여부 드롭다운 */}
+              <div className="flex flex-col gap-[4px] relative dropdown-container">
+                <label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
+                  문제 제출 여부
+                </label>
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsSubmissionDropdownOpen(!isSubmissionDropdownOpen);
+                      setIsCourseDropdownOpen(false);
+                      setIsCompletionDropdownOpen(false);
+                    }}
+                    className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[190px]"
+                  >
+                    <span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
+                      {selectedSubmissionStatus === 'all' ? '모든 상태' : selectedSubmissionStatus === 'submitted' ? '제출' : '미제출'}
+                    </span>
+                    <ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
+                  </button>
+                  {isSubmissionDropdownOpen && (
+                    <div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[190px]">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedSubmissionStatus('all');
+                          setIsSubmissionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        모든 상태
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedSubmissionStatus('submitted');
+                          setIsSubmissionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        제출
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedSubmissionStatus('not-submitted');
+                          setIsSubmissionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        미제출
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 수료 여부 드롭다운 */}
+              <div className="flex flex-col gap-[4px] relative dropdown-container">
+                <label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
+                  수료 여부
+                </label>
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsCompletionDropdownOpen(!isCompletionDropdownOpen);
+                      setIsCourseDropdownOpen(false);
+                      setIsSubmissionDropdownOpen(false);
+                    }}
+                    className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[190px]"
+                  >
+                    <span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
+                      {selectedCompletionStatus === 'all' ? '모든 상태' : selectedCompletionStatus === 'completed' ? '완료' : '미완료'}
+                    </span>
+                    <ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
+                  </button>
+                  {isCompletionDropdownOpen && (
+                    <div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[190px]">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedCompletionStatus('all');
+                          setIsCompletionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        모든 상태
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedCompletionStatus('completed');
+                          setIsCompletionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        완료
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedCompletionStatus('not-completed');
+                          setIsCompletionDropdownOpen(false);
+                        }}
+                        className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
+                      >
+                        미완료
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* 검색바 */}
+            <div className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[8px] flex items-center gap-[10px] w-[240px]">
+              <input
+                type="text"
+                placeholder="학습자명으로 검색"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="flex-1 text-[16px] font-normal leading-[1.5] text-[#b1b8c0] outline-none placeholder:text-[#b1b8c0]"
+              />
+              <SearchIcon className="size-[20px] text-[#b1b8c0] shrink-0" />
+            </div>
+          </div>
+
+          {/* 테이블 영역 */}
+          <div className="border border-[#dee1e6] rounded-[8px] overflow-hidden">
+            {isLoading ? (
+              <div className="min-h-[400px] flex items-center justify-center">
+                <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+              </div>
+            ) : filteredData.length === 0 ? (
+              <div className="min-h-[400px] flex items-center justify-center">
+                <p className="text-[16px] font-medium text-[#333c47]">데이터가 없습니다.</p>
+              </div>
+            ) : (
+              <>
+                {/* 테이블 헤더 */}
+                <div className="bg-gray-50 h-[48px] flex items-center border-b border-[#dee1e6]">
+                  <div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육 과정명</span>
+                  </div>
+                  <div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</span>
+                  </div>
+                  <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">학습자명</span>
+                  </div>
+                  <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">가입일</span>
+                  </div>
+                  <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">마지막 수강일</span>
+                  </div>
+                  <div className="w-[76px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">진도율</span>
+                  </div>
+                  <div className="w-[112px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">문제 제출 여부</span>
+                  </div>
+                  <div className="w-[84px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">평가 점수</span>
+                  </div>
+                  <div className="w-[84px] px-[16px] py-[12px] text-center">
+                    <span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">수료 여부</span>
+                  </div>
+                </div>
+
+                {/* 테이블 바디 */}
+                <div className="bg-white">
+                  {paginatedData.map((item) => (
+                    <button
+                      key={item.id}
+                      type="button"
+                      onClick={() => {
+                        // 상세 페이지로 이동 (API 연동 시 item.id 사용)
+                        router.push(`/instructor/courses/${item.id}`);
+                      }}
+                      className="h-[48px] w-full flex items-center border-b border-[#dee1e6] last:border-b-0 cursor-pointer hover:bg-[#F5F7FF] transition-colors text-left"
+                    >
+                      <div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.courseName}</span>
+                      </div>
+                      <div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.lessonName}</span>
+                      </div>
+                      <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.learnerName}</span>
+                      </div>
+                      <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.enrollmentDate}</span>
+                      </div>
+                      <div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.lastStudyDate}</span>
+                      </div>
+                      <div className="w-[76px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.progressRate}%</span>
+                      </div>
+                      <div className="w-[112px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                        {item.hasSubmitted ? (
+                          <StatusTag text="제출" type="default" color="primary" />
+                        ) : (
+                          <StatusTag text="미제출" type="default" color="gray" />
+                        )}
+                      </div>
+                      <div className="w-[84px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
+                        <span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">
+                          {item.score !== null ? `${item.score}점` : '-'}
+                        </span>
+                      </div>
+                      <div className="w-[84px] px-[16px] py-[12px] text-center">
+                        {item.isCompleted ? (
+                          <StatusTag text="완료" type="default" color="primary" />
+                        ) : (
+                          <StatusTag text="미완료" type="default" color="gray" />
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* 페이지네이션 */}
+          {filteredData.length > ITEMS_PER_PAGE && (
+            <div className="flex items-center justify-center gap-[8px] pt-[32px]">
+              {/* First */}
+              <button
+                type="button"
+                onClick={() => setCurrentPage(1)}
+                disabled={currentPage === 1}
+                className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+              >
+                <div className="relative flex items-center justify-center w-full h-full">
+                  <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
+                  <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
+                </div>
+              </button>
+
+              {/* Prev */}
+              <button
+                type="button"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+              >
+                <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
+              </button>
+
+              {/* Page Numbers */}
+              {Array.from({ length: Math.min(10, totalPages) }, (_, i) => {
+                const pageNum = i + 1;
+                const isActive = pageNum === currentPage;
+                return (
+                  <button
+                    key={pageNum}
+                    type="button"
+                    onClick={() => setCurrentPage(pageNum)}
+                    className={`flex items-center justify-center rounded-full size-[32px] text-[16px] leading-[1.4] text-[#333c47] cursor-pointer ${
+                      isActive ? 'bg-[#ecf0ff]' : 'bg-white'
+                    }`}
+                  >
+                    {pageNum}
+                  </button>
+                );
+              })}
+
+              {/* Next */}
+              <button
+                type="button"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+              >
+                <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
+              </button>
+
+              {/* Last */}
+              <button
+                type="button"
+                onClick={() => setCurrentPage(totalPages)}
+                disabled={currentPage === totalPages}
+                className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+              >
+                <div className="relative flex items-center justify-center w-full h-full">
+                  <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
+                  <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
+                </div>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/instructor/page.tsx

@@ -0,0 +1,344 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import MainLogoSvg from '../svgs/mainlogosvg';
+import ChevronDownSvg from '../svgs/chevrondownsvg';
+import apiService from '../lib/apiService';
+
+// 아이콘 컴포넌트들
+function BookIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M4 19.5C4 18.837 4.263 18.201 4.732 17.732C5.201 17.263 5.837 17 6.5 17H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.5 2H20V22H6.5C5.837 22 5.201 21.737 4.732 21.268C4.263 20.799 4 20.163 4 19.5V4.5C4 3.837 4.263 3.201 4.732 2.732C5.201 2.263 5.837 2 6.5 2Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DocumentIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 2V8H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 13H8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 17H8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 9H9H8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CheckCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 4L12 14.01L9 11.01"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function UserIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M8 8C9.65685 8 11 6.65685 11 5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5C5 6.65685 6.34315 8 8 8Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2 13.3333C2 11.0862 3.75333 9.33333 6 9.33333H10C12.2467 9.33333 14 11.0862 14 13.3333V14H2V13.3333Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M6 12L10 8L6 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+type Activity = {
+  id: string;
+  userName: string;
+  message: string;
+  timestamp: string;
+};
+
+export default function InstructorPage() {
+  const router = useRouter();
+  const [userName, setUserName] = useState<string>('');
+  const [userRole, setUserRole] = useState<string>('');
+  const [totalCourses, setTotalCourses] = useState<number>(5);
+  const [submissionStatus, setSubmissionStatus] = useState<{ current: number; total: number }>({ current: 10, total: 50 });
+  const [completionStatus, setCompletionStatus] = useState<{ current: number; total: number }>({ current: 14, total: 50 });
+  const [activities, setActivities] = useState<Activity[]>([
+    { id: '1', userName: '김하늘', message: '{강좌명} 문제를 제출했습니다.', timestamp: '2025-12-12 14:44' },
+    { id: '2', userName: '김하늘', message: '{강좌명} 문제를 제출했습니다.', timestamp: '2025-12-12 14:44' },
+    { id: '3', userName: '김하늘', message: '모든 강좌를 수강했습니다.', timestamp: '2025-12-12 14:44' },
+  ]);
+
+  // 사용자 정보 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchUserInfo() {
+      try {
+        const localStorageToken = localStorage.getItem('token');
+        const cookieToken = document.cookie
+          .split('; ')
+          .find(row => row.startsWith('token='))
+          ?.split('=')[1];
+        
+        const token = localStorageToken || cookieToken;
+        
+        if (!token) {
+          router.push('/login');
+          return;
+        }
+
+        const response = await apiService.getCurrentUser();
+
+        if (response.status === 401) {
+          localStorage.removeItem('token');
+          document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+          if (isMounted) {
+            router.push('/login');
+          }
+          return;
+        }
+
+        const data = response.data;
+        
+        if (isMounted) {
+          const role = data.role || data.userRole || '';
+          setUserRole(role);
+          
+          // admin이 아니면 접근 불가
+          if (role !== 'ADMIN' && role !== 'admin') {
+            router.push('/');
+            return;
+          }
+          
+          if (data.name) {
+            setUserName(data.name);
+          }
+        }
+      } catch (error) {
+        console.error('사용자 정보 조회 오류:', error);
+        if (isMounted) {
+          router.push('/login');
+        }
+      }
+    }
+
+    fetchUserInfo();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [router]);
+
+  return (
+    <div className="bg-white min-h-screen flex flex-col">
+      <div className="flex-1 max-w-[1440px] w-full mx-auto px-0">
+        <div className="flex flex-col gap-[40px] w-full">
+          {/* 강좌별 상세 내역 섹션 */}
+          <div className="flex flex-col w-full">
+            <div className="flex h-[100px] items-center justify-between px-[32px]">
+              <h2 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                강좌별 상세 내역
+              </h2>
+              <Link
+                href="/instructor/courses"
+                className="flex items-center gap-[2px] text-[14px] font-medium text-[#6c7682]"
+              >
+                <span>전체보기</span>
+                <ChevronRightIcon />
+              </Link>
+            </div>
+            <div className="flex flex-col gap-[16px] pb-[32px] pt-0 px-[32px]">
+              <div className="flex gap-[16px] h-[120px]">
+                {/* 총 강좌 수 카드 */}
+                <div className="flex-1 bg-white border border-[#dee1e6] rounded-[16px] flex gap-[16px] items-center justify-center p-[24px]">
+                  <div className="bg-[#ecf0ff] rounded-full size-[48px] flex items-center justify-center shrink-0">
+                    <BookIcon className="size-[24px] text-[#060958]" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-start">
+                    <p className="text-[14px] font-normal text-[#333c47] leading-[1.5]">
+                      총 강좌 수
+                    </p>
+                    <p className="text-[20px] font-bold text-[#333c47] leading-[1.5]">
+                      {totalCourses}
+                    </p>
+                  </div>
+                </div>
+
+                {/* 학습자 문제 제출 현황 카드 */}
+                <div className="flex-1 bg-white border border-[#dee1e6] rounded-[16px] flex gap-[16px] items-center justify-center p-[24px]">
+                  <div className="bg-[#ecf0ff] rounded-full size-[48px] flex items-center justify-center shrink-0">
+                    <DocumentIcon className="size-[24px] text-[#060958]" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-start">
+                    <p className="text-[14px] font-normal text-[#333c47] leading-[1.5]">
+                      학습자 문제 제출 현황
+                    </p>
+                    <p className="text-[20px] font-bold text-[#333c47] leading-[1.5]">
+                      {submissionStatus.current} / {submissionStatus.total}
+                    </p>
+                  </div>
+                </div>
+
+                {/* 학습자 수료 현황 카드 */}
+                <div className="flex-1 bg-white border border-[#dee1e6] rounded-[16px] flex gap-[16px] items-center justify-center p-[24px]">
+                  <div className="bg-[#ecf0ff] rounded-full size-[48px] flex items-center justify-center shrink-0">
+                    <CheckCircleIcon className="size-[24px] text-[#060958]" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-start">
+                    <p className="text-[14px] font-normal text-[#333c47] leading-[1.5]">
+                      학습자 수료 현황
+                    </p>
+                    <p className="text-[20px] font-bold text-[#333c47] leading-[1.5]">
+                      {completionStatus.current} / {completionStatus.total}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 최근 학습자 활동 섹션 */}
+          <div className="flex flex-col w-full">
+            <div className="flex gap-[10px] h-[100px] items-center px-[32px]">
+              <h2 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                최근 학습자 활동
+              </h2>
+            </div>
+            <div className="flex flex-col gap-[16px] pb-[80px] pt-0 px-[32px]">
+              <div className="flex flex-col gap-[8px] min-h-[256px]">
+                {activities.map((activity) => (
+                  <div
+                    key={activity.id}
+                    className="bg-white border border-[#dee1e6] rounded-[8px] flex gap-[12px] items-center p-[17px]"
+                  >
+                    <div className="bg-[#f1f3f5] rounded-full size-[32px] flex items-center justify-center shrink-0">
+                      <UserIcon className="size-[16px] text-[#333c47]" />
+                    </div>
+                    <div className="flex-1 flex flex-col items-start">
+                      <div className="flex flex-col text-[15px] leading-[1.5] text-[#1b2027]">
+                        <span className="font-semibold">{activity.userName}</span>
+                        <span className="font-normal">{activity.message}</span>
+                      </div>
+                    </div>
+                    <p className="text-[13px] font-normal text-[#6c7682] leading-[1.4] shrink-0">
+                      {activity.timestamp}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/lib/apiService.ts

@@ -0,0 +1,744 @@
+/**
+ * 중앙화된 API 서비스
+ * 모든 외부 API 요청을 이 모듈에서 관리
+ */
+
+interface ApiResponse<T = any> {
+    data: T;
+    status: number;
+    message?: string;
+}
+
+interface RequestConfig {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    headers?: Record<string, string>;
+    body?: any;
+    timeout?: number;
+    params?: Record<string, string | number | undefined>;
+}
+
+class ApiService {
+    private baseURL: string;
+    private defaultTimeout: number = 30000; // 30초
+
+    constructor(baseURL: string) {
+        this.baseURL = baseURL;
+    }
+
+    /**
+     * 토큰을 가져오는 헬퍼 함수
+     */
+    private getToken(): string | null {
+        if (typeof window === 'undefined') return null;
+
+        // localStorage에서 토큰 우선 확인
+        const localToken = localStorage.getItem('token');
+        if (localToken) return localToken;
+
+        // 쿠키에서 토큰 확인
+        const cookieToken = document.cookie
+            .split('; ')
+            .find(row => row.startsWith('token='))
+            ?.split('=')[1];
+
+        return cookieToken || null;
+    }
+
+    /**
+     * 토큰 삭제 및 로그인 페이지로 리다이렉트
+     */
+    private handleTokenError() {
+        if (typeof window === 'undefined') return;
+
+        // 토큰 삭제
+        localStorage.removeItem('token');
+        document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+        // 현재 경로 가져오기
+        const currentPath = window.location.pathname;
+        
+        // 로그인 페이지가 아닐 때만 리다이렉트
+        if (currentPath !== '/login') {
+            const loginUrl = new URL('/login', window.location.origin);
+            loginUrl.searchParams.set('redirect', currentPath);
+            window.location.href = loginUrl.toString();
+        }
+    }
+
+    /**
+     * 기본 헤더 생성
+     */
+    private getDefaultHeaders(isFormData: boolean = false): Record<string, string> {
+        const headers: Record<string, string> = {};
+
+        // FormData인 경우 Content-Type을 설정하지 않음 (브라우저가 자동으로 설정)
+        if (!isFormData) {
+            headers['Content-Type'] = 'application/json';
+        }
+
+        const token = this.getToken();
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        return headers;
+    }
+
+    /**
+     * 타임아웃이 있는 fetch
+     */
+    private async fetchWithTimeout(url: string, options: RequestInit, timeout: number): Promise<Response> {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+        try {
+            const response = await fetch(url, {
+                ...options,
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+            return response;
+        } catch (error) {
+            clearTimeout(timeoutId);
+            if (error instanceof Error && error.name === 'AbortError') {
+                throw new Error('요청 시간이 초과되었습니다.');
+            }
+            throw error;
+        }
+    }
+
+    /**
+     * 공통 API 요청 함수
+     */
+    private async request<T = any>(
+        endpoint: string,
+        config: RequestConfig = {}
+    ): Promise<ApiResponse<T>> {
+        const {
+            method = 'GET',
+            headers = {},
+            body,
+            timeout = this.defaultTimeout,
+            params
+        } = config;
+
+        let url = endpoint.startsWith('http') ? endpoint : `${this.baseURL}${endpoint}`;
+        
+        // 쿼리 파라미터 추가
+        if (params) {
+            const queryParams = new URLSearchParams();
+            Object.entries(params).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    queryParams.append(key, String(value));
+                }
+            });
+            const queryString = queryParams.toString();
+            if (queryString) {
+                url += (url.includes('?') ? '&' : '?') + queryString;
+            }
+        }
+
+        // FormData 여부 확인
+        const isFormData = body instanceof FormData;
+
+        const requestOptions: RequestInit = {
+            method,
+            headers: {
+                ...this.getDefaultHeaders(isFormData),
+                ...headers,
+            },
+        };
+
+        if (body && method !== 'GET') {
+            // FormData인 경우 그대로 사용, 아닌 경우 JSON으로 변환
+            requestOptions.body = isFormData ? body : JSON.stringify(body);
+        }
+
+        try {
+            const response = await this.fetchWithTimeout(url, requestOptions, timeout);
+
+            if (!response.ok) {
+                // 토큰 오류 (401, 403) 발생 시 처리
+                if (response.status === 401 || response.status === 403) {
+                    this.handleTokenError();
+                    throw new Error('인증이 만료되었습니다. 다시 로그인해주세요.');
+                }
+
+                let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+
+                try {
+                    const errorData = await response.json();
+                    if (errorData.message) {
+                        errorMessage = errorData.message;
+                    } else if (errorData.error) {
+                        errorMessage = errorData.error;
+                    }
+                } catch (parseError) {
+                    // JSON 파싱 실패 시 기본 에러 메시지 사용
+                }
+
+                throw new Error(errorMessage);
+            }
+
+            const data = await response.json();
+
+            return {
+                data,
+                status: response.status,
+            };
+        } catch (error) {
+            if (error instanceof Error) {
+                throw error;
+            }
+            throw new Error('알 수 없는 오류가 발생했습니다.');
+        }
+    }
+
+    // ===== 인증 관련 API =====
+
+    /**
+     * 로그인
+     */
+    async login(email: string, password: string) {
+        return this.request('/auth/login', {
+            method: 'POST',
+            body: { email, password },
+        });
+    }
+
+    /**
+     * 사용자 정보 조회
+     */
+    async getCurrentUser() {
+        return this.request('/auth/me');
+    }
+
+    /**
+     * 회원가입
+     */
+    async register(userData: {
+        email: string;
+        emailCode: string;
+        password: string;
+        passwordConfirm: string;
+        name: string;
+        phone: string;
+        gender: 'MALE' | 'FEMALE';
+        birthDate: string;
+    }) {
+        return this.request('/auth/signup', {
+            method: 'POST',
+            body: userData,
+        });
+    }
+
+    /**
+     * 이메일 인증번호 전송
+     */
+    async sendEmailVerification(email: string) {
+        return this.request('/auth/verify-email/send', {
+            method: 'POST',
+            body: { email },
+        });
+    }
+
+    /**
+     * 이메일 인증번호 확인
+     */
+    async verifyEmailCode(email: string, emailCode: string) {
+        return this.request('/auth/verify-email/confirm', {
+            method: 'POST',
+            body: { email, emailCode },
+        });
+    }
+
+    /**
+     * 아이디 찾기
+     */
+    async findUserId(name: string, phone: string) {
+        return this.request('/auth/find-id', {
+            method: 'POST',
+            body: { name, phone },
+        });
+    }
+
+    /**
+     * 비밀번호 재설정 이메일 전송
+     */
+    async sendPasswordReset(email: string) {
+        return this.request('/auth/password/forgot', {
+            method: 'POST',
+            body: { email },
+        });
+    }
+
+    /**
+     * 비밀번호 재설정 코드 확인
+     */
+    async verifyPasswordResetCode(email: string, code: string) {
+        return this.request('/auth/password/confirm', {
+            method: 'POST',
+            body: { email, emailCode: code },
+        });
+    }
+
+    /**
+     * 비밀번호 재설정
+     */
+    async resetPassword(email: string, emailCode: string, newPassword: string, newPasswordConfirm: string) {
+        return this.request('/auth/password/reset', {
+            method: 'POST',
+            body: { email, emailCode, newPassword, newPasswordConfirm },
+        });
+    }
+
+    /**
+     * 계정 삭제
+     */
+    async deleteAccount() {
+        return this.request('/auth/delete/me', {
+            method: 'DELETE',
+        });
+    }
+
+    // ===== 관리자 관련 API =====
+
+    /**
+     * 과목 리스트 조회
+     */
+    async getSubjects() {
+        return this.request('/subjects');
+    }
+
+    /**
+     * 과목 생성
+     */
+    async createSubject(subjectData: {
+        title: string;
+        instructor: string;
+        imageKey?: string;
+    }) {
+        return this.request('/subjects', {
+            method: 'POST',
+            body: subjectData,
+        });
+    }
+
+    /**
+     * 과목 수정
+     */
+    async updateSubject(subjectId: string, subjectData: {
+        title: string;
+        instructor: string;
+        imageKey?: string | null;
+    }) {
+        return this.request(`/subjects/${subjectId}`, {
+            method: 'PATCH',
+            body: subjectData,
+        });
+    }
+
+    /**
+     * 과목 삭제
+     */
+    async deleteSubject(subjectId: string) {
+        return this.request(`/subjects/${subjectId}`, {
+            method: 'DELETE',
+        });
+    }
+
+    /**
+     * 사용자 리스트 조회
+     */
+    async getUsers() {
+        return this.request('/users');
+    }
+
+    /**
+     * 사용자 생성
+     */
+    async createUser(userData: any) {
+        return this.request('/users', {
+            method: 'POST',
+            body: userData,
+        });
+    }
+
+    /**
+     * 사용자 수정
+     */
+    async updateUser(userId: string, userData: any) {
+        return this.request(`/users/${userId}`, {
+            method: 'PUT',
+            body: userData,
+        });
+    }
+
+    /**
+     * 사용자 삭제
+     */
+    async deleteUser(userId: string) {
+        return this.request(`/users/${userId}`, {
+            method: 'DELETE',
+        });
+    }
+
+    /**
+     * 회원 리스트 조회 (컴팩트) - 관리자 전용
+     */
+    async getUsersCompact(params?: { type?: string; limit?: number }) {
+        return this.request('/admin/users/compact', {
+            params: params ? {
+                ...(params.type && { type: params.type }),
+                ...(params.limit && { limit: params.limit }),
+            } : undefined,
+        });
+    }
+
+    /**
+     * 단일 회원 정지 (ID 기준) - 관리자 전용
+     */
+    async suspendUser(userId: string | number) {
+        return this.request(`/admin/users/${userId}/suspend`, {
+            method: 'PATCH',
+        });
+    }
+
+    /**
+     * 단일 회원 정지 해제 (ID 기준) - 관리자 전용
+     */
+    async unsuspendUser(userId: string | number) {
+        return this.request(`/admin/users/${userId}/unsuspend`, {
+            method: 'PATCH',
+        });
+    }
+    /**
+     * 대량 정지 (ID 배열) - 관리자 전용
+     */
+    async suspendUsers(userIds: (string | number)[]) {
+        return this.request('/admin/users/suspend', {
+            method: 'POST',
+            body: { userIds },
+        });
+    }
+
+    // ===== 기타 API =====
+
+    /**
+     * 공지사항 목록 조회 (페이징)
+     */
+    async getNotices() {
+        return this.request('/notices');
+    }
+
+    /**
+     * 공지 단건 조회
+     */
+    async getNotice(id: string | number) {
+        return this.request(`/notices/${id}`);
+    }
+
+    /**
+     * 공지 등록 (ADMIN)
+     */
+    async createNotice(noticeData: any) {
+        return this.request('/notices', {
+            method: 'POST',
+            body: noticeData,
+        });
+    }
+
+    /**
+     * 공지 수정 (ADMIN)
+     */
+    async updateNotice(id: string | number, noticeData: any) {
+        return this.request(`/notices/${id}`, {
+            method: 'PATCH',
+            body: noticeData,
+        });
+    }
+
+    /**
+     * 공지 삭제 (ADMIN)
+     */
+    async deleteNotice(id: string | number) {
+        return this.request(`/notices/${id}`, {
+            method: 'DELETE',
+        });
+    }
+
+    /**
+     * 강좌 조회
+     */
+    async getLessons() {
+        return this.request('/lessons');
+    }
+
+    /**
+     * 강좌 리스트 조회
+     */
+    async getLectures() {
+        return this.request('/lectures', {
+            method: 'GET',
+        });
+    }
+
+    /**
+     * 특정 강좌 조회
+     */
+    async getLecture(id: string | number) {
+        return this.request(`/lectures/${id}`, {
+            method: 'GET',
+        });
+    }
+
+    /**
+     * 강좌(lecture) 생성
+     */
+    async createLecture(lectureData: {
+        subjectId: number;
+        title: string;
+        objective: string;
+        videoUrl?: string | string[];
+        webglUrl?: string | string[];
+        csvKey?: string;
+    }) {
+        return this.request('/lectures', {
+            method: 'POST',
+            body: lectureData,
+        });
+    }
+
+    /**
+     * 강좌(lecture) 수정
+     */
+    async updateLecture(lectureId: string | number, lectureData: {
+        subjectId?: number;
+        title?: string;
+        objective?: string;
+        videoUrl?: string | string[];
+        webglUrl?: string | string[];
+        csvKey?: string;
+        csvUrl?: string;
+    }) {
+        return this.request(`/lectures/${lectureId}`, {
+            method: 'PATCH',
+            body: lectureData,
+        });
+    }
+
+    /**
+     * 강좌(lecture) 삭제
+     */
+    async deleteLecture(lectureId: string | number) {
+        return this.request(`/lectures/${lectureId}`, {
+            method: 'DELETE',
+        });
+    }
+
+    /**
+     * 리소스 조회
+     */
+    async getResources() {
+        return this.request('/resources');
+    }
+
+    // ===== 학습 자료실 (Library) 관련 API =====
+
+    /**
+     * 학습 자료실 목록 조회 (로그인 필요, 페이징)
+     */
+    async getLibrary() {
+        return this.request('/library');
+    }
+
+    /**
+     * 학습 자료 단건 조회
+     */
+    async getLibraryItem(id: string | number) {
+        return this.request(`/library/${id}`);
+    }
+
+    /**
+     * 학습 자료 등록 (ADMIN)
+     */
+    async createLibraryItem(libraryData: any) {
+        return this.request('/library', {
+            method: 'POST',
+            body: libraryData,
+        });
+    }
+
+    /**
+     * 학습 자료 수정 (ADMIN)
+     */
+    async updateLibraryItem(id: string | number, libraryData: any) {
+        return this.request(`/library/${id}`, {
+            method: 'PATCH',
+            body: libraryData,
+        });
+    }
+
+    /**
+     * 학습 자료 삭제 (ADMIN)
+     */
+    async deleteLibraryItem(id: string | number) {
+        return this.request(`/library/${id}`, {
+            method: 'DELETE',
+        });
+    }
+
+    // ===== 진행률 (Progress) 관련 API =====
+
+    /**
+     * 특정 강의에서 "내" 진행률 조회
+     */
+    async getLectureProgress(lectureId: string | number) {
+        return this.request(`/progress/lectures/${lectureId}`);
+    }
+
+    /**
+     * 강의 진행(Heartbeat) 업서트
+     */
+    async updateLectureProgress(progressData: any) {
+        return this.request('/progress/lectures/progress', {
+            method: 'POST',
+            body: progressData,
+        });
+    }
+
+    /**
+     * 과목 진행률 요약(내 기준)
+     */
+    async getSubjectProgressSummary(subjectId: string | number) {
+        return this.request(`/progress/subjects/${subjectId}/summary`);
+    }
+
+    // ===== 평가 (Evaluation) 관련 API =====
+
+    /**
+     * 강의 평가 제출 (60점 이상만 저장)
+     */
+    async submitEvaluation(evaluationData: any) {
+        return this.request('/evaluations', {
+            method: 'POST',
+            body: evaluationData,
+        });
+    }
+
+    /**
+     * 특정 강의에서 "내" 마지막 평가 결과 조회
+     */
+    async getMyEvaluation(lectureId: string | number) {
+        return this.request(`/evaluations/lectures/${lectureId}/me`);
+    }
+
+    /**
+     * 특정 강의에서 특정 수강생의 마지막 평가 결과 조회 (ADMIN/INSTRUCTOR)
+     */
+    async getUserEvaluation(lectureId: string | number, userId: string | number) {
+        return this.request(`/evaluations/lectures/${lectureId}/users/${userId}`);
+    }
+
+    // ===== 관리자 강의 현황 관련 API =====
+
+    /**
+     * 강좌별 학습/문제 제출/수료 현황 리스트 (관리자/강사용)
+     */
+    async getLecturesStatus() {
+        return this.request('/admin/lectures/status');
+    }
+
+    /**
+     * 특정 강좌 + 특정 학습자의 수강/문제 풀이 상세 (관리자/강사용)
+     */
+    async getLectureStudentDetail(lectureId: string | number, userId: string | number) {
+        return this.request(`/admin/lectures/${lectureId}/students/${userId}/detail`);
+    }
+
+    // ===== 수료증 및 결과 관련 API =====
+
+    /**
+     * 특정 과목 수료증용 정보 조회 (학생 본인)
+     */
+    async getCertificate(subjectId: string | number) {
+        return this.request(`/certificates/subjects/${subjectId}`);
+    }
+
+    /**
+     * 학생 기준 학습 결과(수료 과목 목록)
+     */
+    async getMyResults() {
+        return this.request('/results/my-subjects');
+    }
+
+    // ===== 파일 업로드 관련 API =====
+
+    /**
+     * 단일 파일 업로드
+     * @param file 업로드할 파일 (File 객체 또는 Blob)
+     */
+    async uploadFile(file: File | Blob) {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        return this.request('/uploads-api/file', {
+            method: 'POST',
+            body: formData,
+        });
+    }
+
+    /**
+     * 다중 파일 업로드
+     * @param files 업로드할 파일 배열 (File[] 또는 Blob[])
+     */
+    async uploadFiles(files: (File | Blob)[]) {
+        const formData = new FormData();
+        files.forEach((file, index) => {
+            formData.append('files', file);
+        });
+
+        return this.request('/uploads-api/files', {
+            method: 'POST',
+            body: formData,
+        });
+    }
+
+    /**
+     * 파일 다운로드
+     * @param fileKey 파일 키
+     * @returns 파일 URL (Blob URL), 파일이 없으면 null 반환
+     */
+    async getFile(fileKey: string): Promise<string | null> {
+        const url = `${this.baseURL}/api/files/${fileKey}`;
+        const token = this.getToken();
+
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                ...(token && { Authorization: `Bearer ${token}` }),
+            },
+        });
+
+        // 404 에러는 이미지가 없는 것으로 간주하고 null 반환
+        if (response.status === 404) {
+            return null;
+        }
+
+        if (!response.ok) {
+            throw new Error(`파일을 가져오는데 실패했습니다. (${response.status})`);
+        }
+
+        // 이미지 파일이므로 Blob으로 변환하여 URL 생성
+        const blob = await response.blob();
+        return URL.createObjectURL(blob);
+    }
+}
+
+// 기본 API 서비스 인스턴스 생성
+const apiService = new ApiService(
+    process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net'
+);
+
+export default apiService;
+export type { ApiResponse, RequestConfig };

src/app/login/loginoption.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import { useState } from "react";
 
 type LoginOptionProps = {
   onClick?: () => void;
@@ -14,48 +13,5 @@ export default function LoginOption({
   loginErrorModalEnabled,
   setLoginErrorModalEnabled,
 }: LoginOptionProps) {
-
-  const [isOpen, setIsOpen] = useState(false);
-
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className={`fixed bottom-2 right-2 bg-red-400 cursor-pointer rounded-full w-[40px] h-[40px] shadow-xl z-100`}
-      >
-      </button>
-      {isOpen && (
-        <div className="fixed inset-0 flex items-center justify-center z-50">
-          <div className="w-[500px] h-[600px] flex  bg-white/80 p-10 border rounded-lg relative">
-            <button
-              type="button"
-              aria-label="닫기"
-              onClick={() => setIsOpen(false)}
-              className="absolute top-3 right-3 inline-flex items-center justify-center rounded-full w-8 h-8 bg-gray-200 hover:bg-gray-300 text-gray-700"
-            >
-              ×
-            </button>
-            <ul className="flex flex-col gap-4">
-              <li className="flex items-center justify-between">
-                <p className="mr-4">login error modal</p>
-                <button
-                  type="button"
-                  aria-label="login error modal 토글"
-                  aria-pressed={!!loginErrorModalEnabled}
-                  onClick={() => setLoginErrorModalEnabled?.(!loginErrorModalEnabled)}
-                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${loginErrorModalEnabled ? 'bg-blue-600' : 'bg-gray-300'}`}
-                >
-                  <span
-                    className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${loginErrorModalEnabled ? 'translate-x-5' : 'translate-x-1'}`}
-                  />
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+  return null;
 }

src/app/login/page.tsx

@@ -8,7 +8,8 @@ import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
 import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
 import LoginInputSvg from "@/app/svgs/inputformx";
 import LoginErrorModal from "./LoginErrorModal";
-import LoginOption from "@/app/login/LoginOption";
+import LoginOption from "@/app/login/loginoption";
+import apiService from "@/app/lib/apiService";
 
 export default function LoginPage() {
 	const router = useRouter();
@@ -37,48 +38,31 @@ export default function LoginPage() {
 			.split('; ')
 			.find(row => row.startsWith('token='))
 			?.split('=')[1];
-		
+
 		if (savedToken && cookieToken && savedToken === cookieToken) {
 			// 토큰이 유효한지 확인
-			const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-				? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
-				: 'https://hrdi.coconutmeet.net/auth/me';
-
-			fetch(apiUrl, {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${savedToken}`,
-				},
-			})
+			apiService.getCurrentUser()
 				.then(response => {
-					if (response.ok) {
-						return response.json().then(userData => {
-							// 계정 상태 확인
-							const userStatus = userData.status || userData.userStatus;
-							if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
-								// 비활성화된 계정인 경우 로그아웃 처리
-								localStorage.removeItem('token');
-								document.cookie = 'token=; path=/; max-age=0';
-								return;
-							}
-
-							// 사용자 권한 확인
-							const userRole = userData.role || userData.userRole;
-							if (userRole === 'ADMIN' || userRole === 'admin') {
-								// admin 권한이면 /admin/id로 리다이렉트
-								router.push('/admin/id');
-							} else {
-								// 그 외의 경우 기존 로직대로 리다이렉트
-								const searchParams = new URLSearchParams(window.location.search);
-								const redirectPath = searchParams.get('redirect') || '/';
-								router.push(redirectPath);
-							}
-						});
-					} else {
-						// 토큰이 유효하지 않으면 삭제
+					const userData = response.data;
+					// 계정 상태 확인
+					const userStatus = userData.status || userData.userStatus;
+					if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
+						// 비활성화된 계정인 경우 로그아웃 처리
 						localStorage.removeItem('token');
 						document.cookie = 'token=; path=/; max-age=0';
+						return;
+					}
+
+					// 사용자 권한 확인
+					const userRole = userData.role || userData.userRole;
+					if (userRole === 'ADMIN' || userRole === 'admin') {
+						// admin 권한이면 /admin/id로 리다이렉트
+						router.push('/admin/id');
+					} else {
+						// 그 외의 경우 기존 로직대로 리다이렉트
+						const searchParams = new URLSearchParams(window.location.search);
+						const redirectPath = searchParams.get('redirect') || '/';
+						router.push(redirectPath);
 					}
 				})
 				.catch(() => {
@@ -121,38 +105,8 @@ export default function LoginPage() {
 		}
 
 		try {
-			const response = await fetch("https://hrdi.coconutmeet.net/auth/login", {
-				method: "POST",
-				headers: { "Content-Type": "application/json", },
-				body: JSON.stringify({
-					email: userId,
-					password: password
-				})
-			});
-
-			if (!response.ok) {
-				let errorMessage = `로그인 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				console.error("로그인 실패:", errorMessage);
-				setLoginErrorMessage(errorMessage);
-				setIsLoginErrorOpen(true);
-				return;
-			}
-
-			const data = await response.json();
+			const response = await apiService.login(userId, password);
+			const data = response.data;
 			console.log("로그인 성공:", data);
 
 			// 로그인 성공 시 토큰 저장 (다양한 필드명 지원)
@@ -176,23 +130,14 @@ export default function LoginPage() {
 
 			// 사용자 정보 가져오기 (권한 확인을 위해)
 			try {
-				const userResponse = await fetch('https://hrdi.coconutmeet.net/auth/me', {
-					method: 'GET',
-					headers: {
-						'Content-Type': 'application/json',
-						Authorization: `Bearer ${token}`,
-					},
-				});
+				const userResponse = await apiService.getCurrentUser();
+				const userData = userResponse.data;
+				const userRole = userData.role || userData.userRole;
 
-				if (userResponse.ok) {
-					const userData = await userResponse.json();
-					const userRole = userData.role || userData.userRole;
-					
-					// admin 권한이면 /admin/id로 리다이렉트
-					if (userRole === 'ADMIN' || userRole === 'admin') {
-						router.push('/admin/id');
-						return;
-					}
+				// admin 권한이면 /admin/id로 리다이렉트
+				if (userRole === 'ADMIN' || userRole === 'admin') {
+					router.push('/admin/id');
+					return;
 				}
 			} catch (error) {
 				console.error("사용자 정보 조회 오류:", error);
@@ -214,8 +159,7 @@ export default function LoginPage() {
 	}
 
 	return (
-		<div className="min-h-screen w-full flex flex-col items-center justify-between">
-
+		<>
 			<LoginErrorModal
 				open={isLoginErrorOpen}
 				onClose={() => {
@@ -229,156 +173,160 @@ export default function LoginPage() {
 				loginErrorModalEnabled={isLoginErrorOpen}
 				setLoginErrorModalEnabled={setIsLoginErrorOpen}
 			/>
+			<div className="h-screen w-full flex flex-col overflow-hidden">
+				{/* 메인 컨텐츠 영역 - flex-1로 남은 공간 차지 */}
+				<div className="flex-1 flex items-center justify-center min-h-0">
+					<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full my-auto">
+						{/* 로고 영역 */}
+						<div className="my-15 flex flex-col items-center">
+							<div className="mb-[7px]">
+								<MainLogo />
+							</div>
+							<div className="text-[28.8px] font-extrabold leading-[145%]  text-neutral-700" >
+								XR LMS
+							</div>
+						</div>
 
-			<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
-				{/* 로고 영역 */}
-				<div className="my-15 flex flex-col items-center">
-					<div className="mb-[7px]">
-						<MainLogo />
-					</div>
-					<div className="text-[28.8px] font-extrabold leading-[145%]  text-neutral-700" >
-						XR LMS
+						{/* 폼 */}
+						<form onSubmit={handleSubmit} className="space-y-4">
+							<div className="space-y-4">
+								{/* 아이디 */}
+								<div className="relative">
+									<label htmlFor="userId" className="sr-only">
+										아이디
+									</label>
+									<input
+										id="userId"
+										name="userId"
+										value={userId}
+										onChange={(e) => {
+											setUserId(e.target.value);
+											if (idError) setIdError("");
+										}}
+										onFocus={() => setIsUserIdFocused(true)}
+										onBlur={() => setIsUserIdFocused(false)}
+										placeholder="아이디(이메일)"
+										className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
+									/>
+									{userId.trim().length > 0 && isUserIdFocused && (
+										<button
+											type="button"
+											onMouseDown={(e) => {
+												e.preventDefault();
+												setUserId("");
+											}}
+											aria-label="입력 지우기"
+											className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+										>
+											<LoginInputSvg />
+										</button>
+									)}
+								</div>
+								{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
+								{/* 비밀번호 */}
+								<div className="relative">
+									<label htmlFor="password" className="sr-only">
+										비밀번호
+									</label>
+									<input
+										id="password"
+										name="password"
+										type="password"
+										value={password}
+										onChange={(e) => {
+											setPassword(e.target.value);
+											if (passwordError) setPasswordError("");
+										}}
+										onFocus={() => setIsPasswordFocused(true)}
+										onBlur={() => setIsPasswordFocused(false)}
+										placeholder="비밀번호 입력"
+										className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
+									/>
+									{password.trim().length > 0 && isPasswordFocused && (
+										<button
+											type="button"
+											onMouseDown={(e) => {
+												e.preventDefault();
+												setPassword("");
+											}}
+											aria-label="입력 지우기"
+											className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+										>
+											<LoginInputSvg />
+										</button>
+									)}
+								</div>
+								{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
+							</div>
+
+							{/* 체크박스들 */}
+							<div className="flex items-center justify-start gap-6 mb-15">
+								<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
+									<input
+										type="checkbox"
+										checked={rememberId}
+										onChange={(e) => setRememberId(e.target.checked)}
+										className="sr-only"
+									/>
+									{rememberId ? (
+										<LoginCheckboxActiveSvg />
+									) : (
+										<LoginCheckboxInactiveSvg />
+									)}
+									아이디 기억하기
+								</label>
+								<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
+									<input
+										type="checkbox"
+										checked={autoLogin}
+										onChange={(e) => setAutoLogin(e.target.checked)}
+										className="sr-only"
+									/>
+									{autoLogin ? (
+										<LoginCheckboxActiveSvg />
+									) : (
+										<LoginCheckboxInactiveSvg />
+									)}
+									자동 로그인
+								</label>
+							</div>
+
+							{/* 로그인 버튼 */}
+							<button
+								type="submit"
+								className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button hover:bg-[#1F2B91]" : "bg-inactive-button"}`}
+							>
+								로그인
+							</button>
+
+							{/* 하단 링크들 */}
+							<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
+								<Link
+									href="/register"
+									className="underline-offset-2 text-basic-text font-bold"
+								>
+									회원가입
+								</Link>
+								<div
+									className="flex items-center gap-3 text-basic-text"
+								>
+									<Link href="/find-id" className="underline-offset-2">
+										아이디 찾기
+									</Link>
+									<span className="h-3 w-px bg-input-border" />
+									<Link href="/reset-password" className="underline-offset-2">
+										비밀번호 재설정
+									</Link>
+								</div>
+							</div>
+						</form>
 					</div>
 				</div>
-
-				{/* 폼 */}
-				<form onSubmit={handleSubmit} className="space-y-4">
-					<div className="space-y-4">
-						{/* 아이디 */}
-						<div className="relative">
-							<label htmlFor="userId" className="sr-only">
-								아이디
-							</label>
-							<input
-								id="userId"
-								name="userId"
-								value={userId}
-								onChange={(e) => {
-									setUserId(e.target.value);
-									if (idError) setIdError("");
-								}}
-								onFocus={() => setIsUserIdFocused(true)}
-								onBlur={() => setIsUserIdFocused(false)}
-								placeholder="아이디(이메일)"
-								className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
-							/>
-							{userId.trim().length > 0 && isUserIdFocused && (
-								<button
-									type="button"
-									onMouseDown={(e) => {
-										e.preventDefault();
-										setUserId("");
-									}}
-									aria-label="입력 지우기"
-									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
-								>
-									<LoginInputSvg />
-								</button>
-							)}
-						</div>
-						{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
-						{/* 비밀번호 */}
-						<div className="relative">
-							<label htmlFor="password" className="sr-only">
-								비밀번호
-							</label>
-							<input
-								id="password"
-								name="password"
-								type="password"
-								value={password}
-								onChange={(e) => {
-									setPassword(e.target.value);
-									if (passwordError) setPasswordError("");
-								}}
-								onFocus={() => setIsPasswordFocused(true)}
-								onBlur={() => setIsPasswordFocused(false)}
-								placeholder="비밀번호 입력"
-								className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
-							/>
-							{password.trim().length > 0 && isPasswordFocused && (
-								<button
-									type="button"
-									onMouseDown={(e) => {
-										e.preventDefault();
-										setPassword("");
-									}}
-									aria-label="입력 지우기"
-									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
-								>
-									<LoginInputSvg />
-								</button>
-							)}
-						</div>
-						{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
-					</div>
-
-					{/* 체크박스들 */}
-					<div className="flex items-center justify-start gap-6 mb-15">
-						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
-							<input
-								type="checkbox"
-								checked={rememberId}
-								onChange={(e) => setRememberId(e.target.checked)}
-								className="sr-only"
-							/>
-							{rememberId ? (
-								<LoginCheckboxActiveSvg />
-							) : (
-								<LoginCheckboxInactiveSvg />
-							)}
-							아이디 기억하기
-						</label>
-						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
-							<input
-								type="checkbox"
-								checked={autoLogin}
-								onChange={(e) => setAutoLogin(e.target.checked)}
-								className="sr-only"
-							/>
-							{autoLogin ? (
-								<LoginCheckboxActiveSvg />
-							) : (
-								<LoginCheckboxInactiveSvg />
-							)}
-							자동 로그인
-						</label>
-					</div>
-
-					{/* 로그인 버튼 */}
-					<button
-						type="submit"
-						className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button" : "bg-inactive-button"}`}
-					>
-						로그인
-					</button>
-
-					{/* 하단 링크들 */}
-					<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
-						<Link
-							href="/register"
-							className="underline-offset-2 text-basic-text font-bold"
-						>
-							회원가입
-						</Link>
-						<div
-							className="flex items-center gap-3 text-basic-text"
-						>
-							<Link href="/find-id" className="underline-offset-2">
-								아이디 찾기
-							</Link>
-							<span className="h-3 w-px bg-input-border" />
-							<Link href="/reset-password" className="underline-offset-2">
-								비밀번호 재설정
-							</Link>
-						</div>
-					</div>
-				</form>
+				{/* Copyright 영역 - 하단 고정 */}
+				<p className="text-center py-[40px] text-[15px] text-basic-text flex-shrink-0">
+					Copyright ⓒ 2025 XL LMS. All rights reserved
+				</p>
 			</div>
-			<div></div>
-			<p className="text-center py-[40px] text-[15px] text-basic-text">
-				Copyright ⓒ 2025 XL LMS. All rights reserved
-			</p>
-		</div>
+		</>
 	);
 }

src/app/menu/AccountDeleteModal.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import ModalCloseSvg from "../svgs/closexsvg";
+import apiService from "../lib/apiService";
 
 type Props = {
   open: boolean;
@@ -22,54 +23,7 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
 
     setIsLoading(true);
     try {
-      const token = localStorage.getItem('token');
-      if (!token) {
-        alert('로그인이 필요합니다.');
-        setIsLoading(false);
-        onClose();
-        router.push('/login');
-        return;
-      }
-
-      console.log('회원 탈퇴 요청 시작, 토큰 존재:', !!token);
-      console.log('토큰 길이:', token?.length);
-      console.log('토큰 시작 부분:', token?.substring(0, 20));
-      
-      const response = await fetch('https://hrdi.coconutmeet.net/auth/delete/me', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-      });
-      
-      console.log('회원 탈퇴 응답 상태:', response.status);
-
-      if (!response.ok) {
-        let errorMessage = `회원 탈퇴 실패 (${response.status})`;
-        try {
-          const errorData = await response.json();
-          console.error('회원 탈퇴 API 오류 응답:', errorData);
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          } else if (errorData.message) {
-            errorMessage = errorData.message;
-          } else if (errorData.errorMessage) {
-            errorMessage = errorData.errorMessage;
-          } else if (response.statusText) {
-            errorMessage = `${response.statusText} (${response.status})`;
-          }
-        } catch (parseError) {
-          console.error('응답 파싱 오류:', parseError);
-          if (response.statusText) {
-            errorMessage = `${response.statusText} (${response.status})`;
-          }
-        }
-        console.error('회원 탈퇴 실패:', errorMessage, '상태 코드:', response.status);
-        alert(errorMessage);
-        setIsLoading(false);
-        return;
-      }
+      await apiService.deleteAccount();
 
       // 성공 시 토큰 제거 및 로그인 페이지로 이동
       localStorage.removeItem('token');

src/app/menu/ChangePasswordModal.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import ModalCloseSvg from "../svgs/closexsvg";
+import apiService from "../lib/apiService";
 
 type Props = {
   open: boolean;
@@ -13,6 +15,7 @@ type Props = {
 };
 
 export default function ChangePasswordModal({ open, onClose, onSubmit, showVerification = false, devVerificationState, initialEmail }: Props) {
+  const router = useRouter();
   const [email, setEmail] = useState(initialEmail || "");
   const [code, setCode] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -22,6 +25,9 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
   const [isCodeSent, setIsCodeSent] = useState<boolean>(showVerification);
   const canConfirm = code.trim().length > 0;
   const [isVerified, setIsVerified] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
   const hasError = !!error;
 
   // initialEmail이 변경되면 email state 업데이트
@@ -68,9 +74,18 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
     }
   }, [devVerificationState]);
 
-  if (!open) return null;
+  const handleLoginClick = () => {
+    // 토큰 삭제 (로그아웃)
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('token');
+      document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+    }
+    // 로그인 페이지로 이동
+    router.push('/login');
+    onClose();
+  };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setError(null);
     if (requireCode) {
       if (!code) {
@@ -86,10 +101,87 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
       setError("새 비밀번호가 일치하지 않습니다.");
       return;
     }
-    onSubmit?.({ email, code: requireCode ? code : undefined, newPassword });
+    if (!email.trim()) {
+      setError("이메일을 입력해 주세요.");
+      return;
+    }
+    if (requireCode && !code.trim()) {
+      setError("인증번호를 입력해 주세요.");
+      return;
+    }
+
+    try {
+      await apiService.resetPassword(email, code, newPassword, confirmPassword);
+      onSubmit?.({ email, code: requireCode ? code : undefined, newPassword });
+      setShowSuccessModal(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "비밀번호 변경에 실패했습니다.");
+    }
+  };
+
+  const handleCancel = () => {
+    // 모든 상태 초기화
+    setEmail(initialEmail || "");
+    setCode("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setError(null);
+    setRequireCode(showVerification);
+    setIsCodeSent(showVerification);
+    setIsVerified(false);
+    setIsSending(false);
+    setIsVerifying(false);
     onClose();
   };
 
+  // 완료 팝업은 open prop과 관계없이 표시
+  if (showSuccessModal) {
+    return (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="w-[480px] rounded-[12px] border border-[#dee1e6] bg-white">
+          {/* header */}
+          <div className="flex items-center justify-end h-[80px] p-6">
+            <button
+              type="button"
+              aria-label="닫기"
+              onClick={handleLoginClick}
+              className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
+            >
+              <ModalCloseSvg />
+            </button>
+          </div>
+
+          {/* body */}
+          <div className="flex flex-col gap-4 items-center px-6 pb-0 pt-[60px]">
+            <h2 className="text-[24px] font-extrabold leading-[1.45] text-[#333c47] text-center">
+              비밀번호 변경이 완료됐습니다.
+            </h2>
+            <p className="text-[18px] font-normal leading-[1.5] text-[#6c7682] text-center mb-[148px]">
+              새로운 비밀번호로 다시 로그인 해주세요.
+            </p>
+          </div>
+
+          {/* footer */}
+          <div className="flex gap-8 items-end justify-center p-6 h-[72px]">
+            <button
+              type="button"
+              onClick={handleLoginClick}
+              className="h-12 w-[284px] rounded-[10px] bg-[#1f2b91] px-2 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
+            >
+              로그인
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!open) return null;
+
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
@@ -127,14 +219,35 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
               />
               <button
                 type="button"
-                onClick={() => {
-                  setRequireCode(true);
-                  setIsCodeSent(true);
+                onClick={async () => {
+                  if (!email.trim()) {
+                    setError("이메일을 입력해 주세요.");
+                    return;
+                  }
+
+                  setIsSending(true);
                   setError(null);
+
+                  try {
+                    await apiService.sendPasswordReset(email);
+                    setRequireCode(true);
+                    setIsCodeSent(true);
+                    // 재전송 시 기존 인증 상태 초기화
+                    setCode("");
+                    setIsVerified(false);
+                  } catch (err) {
+                    setError(err instanceof Error ? err.message : "인증번호 전송에 실패했습니다.");
+                  } finally {
+                    setIsSending(false);
+                  }
                 }}
-                className="h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700 cursor-pointer"
+                disabled={isSending}
+                className={[
+                  "h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700",
+                  isSending ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                ].join(" ")}
               >
-                {isCodeSent ? "인증번호 재전송" : "인증번호 전송"}
+                {isSending ? "전송 중..." : (isCodeSent ? "인증번호 재전송" : "인증번호 전송")}
               </button>
             </div>
           </div>
@@ -146,18 +259,42 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
                   type="text"
                   value={code}
                   onChange={(e) => setCode(e.target.value)}
-                  className="h-10 flex-1 rounded-[8px] border border-input-border bg-white px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none"
+                  className="h-10 flex-1 rounded-[8px] border border-input-border bg-white px-3 text-[16px] leading-normal text-neutral-700 placeholder:text-text-placeholder-alt outline-none"
                   placeholder="인증번호를 입력해 주세요."
                 />
                 <button
                   type="button"
-                  disabled={!canConfirm}
+                  disabled={!canConfirm || isVerifying}
+                  onClick={async () => {
+                    if (!email.trim()) {
+                      setError("이메일을 입력해 주세요.");
+                      return;
+                    }
+                    if (!code.trim()) {
+                      setError("인증번호를 입력해 주세요.");
+                      return;
+                    }
+
+                    setIsVerifying(true);
+                    setError(null);
+
+                    try {
+                      await apiService.verifyPasswordResetCode(email, code);
+                      setIsVerified(true);
+                      setError(null);
+                    } catch (err) {
+                      setError(err instanceof Error ? err.message : "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.");
+                      setIsVerified(false);
+                    } finally {
+                      setIsVerifying(false);
+                    }
+                  }}
                   className={[
-                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5] cursor-pointer disabled:cursor-default",
-                    canConfirm ? "bg-bg-gray-light text-basic-text" : "bg-gray-50 text-text-placeholder-alt",
+                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5]",
+                    canConfirm && !isVerifying ? "bg-bg-gray-light text-basic-text cursor-pointer" : "bg-gray-50 text-text-placeholder-alt cursor-default",
                   ].join(" ")}
                 >
-                  인증번호 확인
+                  {isVerifying ? "확인 중..." : "인증번호 확인"}
                 </button>
               </div>
               {isCodeSent && !hasError && !isVerified ? (
@@ -213,7 +350,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
         <div className="flex items-center justify-center gap-3 p-6">
           <button
             type="button"
-            onClick={onClose}
+            onClick={handleCancel}
             className="h-12 w-[136px] rounded-[10px] bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text cursor-pointer"
           >
             취소

src/app/menu/account/page.tsx

@@ -6,6 +6,7 @@ import ChangePasswordModal from "../ChangePasswordModal";
 import PasswordChangeDoneModal from "../PasswordChangeDoneModal";
 import AccountDeleteModal from "../AccountDeleteModal";
 import MenuAccountOption from "@/app/menu/account/MenuAccountOption";
+import apiService from "@/app/lib/apiService";
 
 type VerificationState = 'initial' | 'sent' | 'verified' | 'failed' | 'changed';
 
@@ -51,38 +52,19 @@ export default function AccountPage() {
           localStorage.setItem('token', cookieToken);
         }
 
-        const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
-          : 'https://hrdi.coconutmeet.net/auth/me';
+        const response = await apiService.getCurrentUser();
 
-        const response = await fetch(apiUrl, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            ...(token && { Authorization: `Bearer ${token}` }),
-          },
-        });
+        if (response.status === 401) {
+          // 토큰이 만료되었거나 유효하지 않은 경우
+          localStorage.removeItem('token');
+          if (isMounted) {
+            router.push('/login');
+          }
+          return;
+        }
 
-        if (!response.ok) {
-          if (response.status === 401) {
-            // 토큰이 만료되었거나 유효하지 않은 경우
-            localStorage.removeItem('token');
-            if (isMounted) {
-              router.push('/login');
-            }
-            return;
-          }
-          let errorMessage = `사용자 정보 조회 실패 (${response.status})`;
-          try {
-            const errorData = await response.json();
-            if (errorData.error) {
-              errorMessage = errorData.error;
-            } else if (errorData.message) {
-              errorMessage = errorData.message;
-            }
-          } catch (parseError) {
-            // ignore
-          }
+        if (response.status !== 200) {
+          const errorMessage = response.message || `사용자 정보 조회 실패 (${response.status})`;
           console.error('사용자 정보 조회 실패:', errorMessage);
           if (isMounted) {
             setIsLoading(false);
@@ -90,7 +72,7 @@ export default function AccountPage() {
           return;
         }
 
-        const data = await response.json();
+        const data = response.data;
         if (isMounted) {
           setUserInfo(data);
           setIsLoading(false);
@@ -191,35 +173,7 @@ export default function AccountPage() {
         onClose={() => setDeleteOpen(false)}
         onConfirm={async () => {
           try {
-            const token = localStorage.getItem('token');
-            const response = await fetch('https://hrdi.coconutmeet.net/auth/delete/me', {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-                ...(token && { Authorization: `Bearer ${token}` }),
-              },
-            });
-
-            if (!response.ok) {
-              let errorMessage = `회원 탈퇴 실패 (${response.status})`;
-              try {
-                const errorData = await response.json();
-                if (errorData.error) {
-                  errorMessage = errorData.error;
-                } else if (errorData.message) {
-                  errorMessage = errorData.message;
-                } else if (response.statusText) {
-                  errorMessage = `${response.statusText} (${response.status})`;
-                }
-              } catch (parseError) {
-                if (response.statusText) {
-                  errorMessage = `${response.statusText} (${response.status})`;
-                }
-              }
-              console.error('회원 탈퇴 실패:', errorMessage);
-              alert(errorMessage);
-              return;
-            }
+            await apiService.deleteAccount();
 
             // 성공 시 토큰 제거 및 로그인 페이지로 이동
             localStorage.removeItem('token');

src/app/menu/layout.tsx

@@ -4,7 +4,7 @@ import MenuSidebar from "./MenuSidebar";
 export default function MenuLayout({ children }: { children: ReactNode }) {
   return (
     <div className="mx-auto flex w-full max-w-[1440px] min-h-full">
-      <aside className="w-[320px] border-r border-[#dee1e6] px-4 py-6">
+      <aside className="hidden w-[320px] border-r border-[#dee1e6] px-4 py-6">
         <MenuSidebar />
       </aside>
       <section className="flex-1">{children}</section>

src/app/notices/[id]/page.tsx

@@ -1,17 +1,169 @@
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import BackCircleSvg from '../../svgs/backcirclesvg';
-import { MOCK_NOTICES } from '../../admin/notices/mockData';
+'use client';
 
-export default async function NoticeDetailPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params;
-  const numericId = Number(id);
-  const item = MOCK_NOTICES.find((r) => r.id === numericId);
-  if (!item || !item.content) return notFound();
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import BackCircleSvg from '../../svgs/backcirclesvg';
+import DownloadIcon from '../../svgs/downloadicon';
+import apiService from '../../lib/apiService';
+import type { Notice } from '../../admin/notices/mockData';
+
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
+};
+
+export default function NoticeDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [notice, setNotice] = useState<Notice | null>(null);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+  const formatDate = (dateString: string): string => {
+    if (!dateString) return '';
+    
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) {
+        // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+          return dateString;
+        }
+        return dateString;
+      }
+      
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    } catch {
+      return dateString;
+    }
+  };
+
+  useEffect(() => {
+    async function fetchNotice() {
+      if (!params?.id) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const noticeId = Array.isArray(params.id) ? params.id[0] : params.id;
+        const response = await apiService.getNotice(noticeId);
+        const data = response.data;
+
+        // API 응답 데이터를 Notice 형식으로 변환
+        const transformedNotice: Notice = {
+          id: data.id || data.noticeId || Number(params.id),
+          title: data.title || '',
+          date: formatDate(data.date || data.createdAt || data.createdDate || new Date().toISOString().split('T')[0]),
+          views: data.views || data.viewCount || 0,
+          writer: data.writer || data.author || data.createdBy || '관리자',
+          content: data.content 
+            ? (Array.isArray(data.content) 
+                ? data.content 
+                : typeof data.content === 'string' 
+                  ? data.content.split('\n').filter((line: string) => line.trim())
+                  : [String(data.content)])
+            : [],
+          hasAttachment: data.hasAttachment || data.attachment || false,
+        };
+
+        // 첨부파일 정보 처리
+        if (data.attachments && Array.isArray(data.attachments)) {
+          setAttachments(data.attachments.map((att: any) => ({
+            name: att.name || att.fileName || att.filename || '',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          })));
+        } else if (transformedNotice.hasAttachment && data.attachment) {
+          // 단일 첨부파일인 경우
+          setAttachments([{
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          }]);
+        }
+
+        if (!transformedNotice.title) {
+          setError('공지사항을 찾을 수 없습니다.');
+          return;
+        }
+
+        setNotice(transformedNotice);
+      } catch (err) {
+        console.error('공지사항 조회 오류:', err);
+        setError('공지사항을 불러오는 중 오류가 발생했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchNotice();
+  }, [params?.id]);
+
+  const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
+    if (url) {
+      // URL이 있으면 직접 다운로드
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else if (fileKey) {
+      // fileKey가 있으면 API를 통해 다운로드
+      try {
+        const fileUrl = await apiService.getFile(fileKey);
+        if (fileUrl) {
+          const link = document.createElement('a');
+          link.href = fileUrl;
+          link.download = fileName || 'download';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      } catch (error) {
+        console.error('파일 다운로드 오류:', error);
+        alert('파일 다운로드 중 오류가 발생했습니다.');
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full bg-white">
+        <div className="flex justify-center">
+          <div className="w-full max-w-[1440px]">
+            <div className="h-[100px] flex items-center justify-center">
+              <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !notice) {
+    return (
+      <div className="w-full bg-white">
+        <div className="flex justify-center">
+          <div className="w-full max-w-[1440px]">
+            <div className="h-[100px] flex items-center justify-center">
+              <p className="text-[16px] font-medium text-[#6C7682]">{error || '공지사항을 찾을 수 없습니다.'}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="w-full bg-white">
@@ -19,13 +171,14 @@ export default async function NoticeDetailPage({
         <div className="w-full max-w-[1440px]">
           {/* 상단 타이틀 */}
           <div className="h-[100px] flex items-center gap-3 px-8">
-            <Link
-              href="/notices"
+            <button
+              type="button"
+              onClick={() => router.back()}
               aria-label="뒤로 가기"
-              className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
+              className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline cursor-pointer"
             >
               <BackCircleSvg width={32} height={32} />
-            </Link>
+            </button>
             <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
               공지사항 상세
             </h1>
@@ -37,17 +190,17 @@ export default async function NoticeDetailPage({
               {/* 헤더 */}
               <div className="p-8">
                 <h2 className="m-0 text-[20px] font-bold leading-normal text-[#333C47]">
-                  {item.title}
+                  {notice.title}
                 </h2>
                 <div className="mt-2 flex items-center gap-4 text-[13px] leading-[1.4]">
                   <span className="text-[#8C95A1]">작성자</span>
-                  <span className="text-[#333C47]">{item.writer}</span>
+                  <span className="text-[#333C47]">{notice.writer}</span>
                   <span className="w-px h-4 bg-[#DEE1E6]" />
                   <span className="text-[#8C95A1]">게시일</span>
-                  <span className="text-[#333C47]">{item.date}</span>
+                  <span className="text-[#333C47]">{notice.date}</span>
                   <span className="w-px h-4 bg-[#DEE1E6]" />
                   <span className="text-[#8C95A1]">조회수</span>
-                  <span className="text-[#333C47]">{item.views.toLocaleString()}</span>
+                  <span className="text-[#333C47]">{notice.views.toLocaleString()}</span>
                 </div>
               </div>
 
@@ -55,14 +208,79 @@ export default async function NoticeDetailPage({
               <div className="h-px bg-[#DEE1E6] w-full" />
 
               {/* 본문 */}
-              <div className="p-8">
-                <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
-                  {item.content.map((p, idx) => (
-                    <p key={idx} className="m-0">
-                      {p}
-                    </p>
-                  ))}
+              <div className="p-8 flex flex-col gap-10">
+                <div className="text-[15px] leading-normal text-[#333C47]">
+                  {notice.content && notice.content.length > 0 ? (
+                    notice.content.map((p, idx) => (
+                      <p key={idx} className="m-0 mb-2 last:mb-0">
+                        {p}
+                      </p>
+                    ))
+                  ) : (
+                    <p className="m-0">내용이 없습니다.</p>
+                  )}
                 </div>
+
+                {/* 첨부파일 섹션 */}
+                {attachments.length > 0 && (
+                  <div className="flex flex-col gap-8">
+                    <div className="text-[15px] font-semibold leading-[1.5] text-[#6C7682]">
+                      첨부 파일
+                    </div>
+                    <div className="pt-3">
+                      {attachments.map((attachment, idx) => (
+                      <div
+                        key={idx}
+                        className="bg-white border border-[#DEE1E6] rounded-[6px] h-[64px] flex items-center gap-3 px-[17px]"
+                      >
+                        <div className="size-6 flex items-center justify-center">
+                          <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="text-[#8C95A1]"
+                          >
+                            <path
+                              d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M14 2V8H20"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </div>
+                        <div className="flex-1 flex items-center gap-2 min-w-0">
+                          <p className="text-[15px] font-normal leading-[1.5] text-[#1B2027] truncate">
+                            {attachment.name}
+                          </p>
+                          <p className="text-[13px] font-normal leading-[1.4] text-[#8C95A1] whitespace-nowrap">
+                            {attachment.size}
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => handleDownload(attachment.fileKey, attachment.url, attachment.name)}
+                          className="bg-white border border-[#8C95A1] rounded-[6px] h-8 px-4 flex items-center justify-center gap-1 hover:bg-[#F9FAFB] transition-colors"
+                        >
+                          <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
+                          <span className="text-[13px] font-medium leading-[1.4] text-[#4C5561]">
+                            다운로드
+                          </span>
+                        </button>
+                      </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </section>
@@ -71,6 +289,3 @@ export default async function NoticeDetailPage({
     </div>
   );
 }
-
-
-

src/app/notices/page.tsx

@@ -1,14 +1,115 @@
 'use client';
 
+import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import PaperClipSvg from '../svgs/paperclipsvg';
-import { MOCK_NOTICES } from '../admin/notices/mockData';
+import ChevronDownSvg from '../svgs/chevrondownsvg';
+import apiService from '../lib/apiService';
+import type { Notice } from '../admin/notices/mockData';
 
 export default function NoticesPage() {
   const router = useRouter();
-  
-  // 날짜 내림차순 정렬 (최신 날짜가 먼저)
-  const rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));
+  const ITEMS_PER_PAGE = 10;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [notices, setNotices] = useState<Notice[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 공지사항 리스트 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchNotices() {
+      try {
+        setLoading(true);
+        const response = await apiService.getNotices();
+
+        if (response.status !== 200 || !response.data) {
+          return;
+        }
+
+        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
+        let noticesArray: any[] = [];
+        let total = 0;
+        
+        if (Array.isArray(response.data)) {
+          noticesArray = response.data;
+          total = response.data.length;
+        } else if (response.data && typeof response.data === 'object') {
+          noticesArray = response.data.items || response.data.notices || response.data.data || response.data.list || [];
+          total = response.data.total !== undefined ? response.data.total :
+                  response.data.totalCount !== undefined ? response.data.totalCount :
+                  response.data.count !== undefined ? response.data.count :
+                  noticesArray.length;
+        }
+
+        // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+        const formatDate = (dateString: string): string => {
+          if (!dateString) return '';
+          
+          try {
+            const date = new Date(dateString);
+            if (isNaN(date.getTime())) {
+              // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+              if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+                return dateString;
+              }
+              return dateString;
+            }
+            
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+          } catch {
+            return dateString;
+          }
+        };
+
+        // API 응답 데이터를 Notice 형식으로 변환
+        const transformedNotices: Notice[] = noticesArray.map((notice: any) => ({
+          id: notice.id || notice.noticeId || 0,
+          title: notice.title || '',
+          date: formatDate(notice.date || notice.createdAt || notice.createdDate || new Date().toISOString().split('T')[0]),
+          views: notice.views || notice.viewCount || 0,
+          writer: notice.writer || notice.author || notice.createdBy || '관리자',
+          content: notice.content ? (Array.isArray(notice.content) ? notice.content : [notice.content]) : undefined,
+          hasAttachment: notice.hasAttachment || notice.attachment || false,
+        }));
+
+        if (!isMounted) return;
+
+        // 날짜 내림차순 정렬 (최신 날짜가 먼저)
+        const sortedNotices = [...transformedNotices].sort((a, b) => b.date.localeCompare(a.date));
+        setNotices(sortedNotices);
+        setTotalCount(total || sortedNotices.length);
+      } catch (error) {
+        console.error('공지사항 리스트 조회 오류:', error);
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchNotices();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const totalPages = Math.ceil(totalCount / ITEMS_PER_PAGE);
+  const pagedNotices = useMemo(
+    () => notices.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE),
+    [notices, currentPage]
+  );
+
+  // 페이지네이션: 10개씩 표시
+  const pageGroup = Math.floor((currentPage - 1) / 10);
+  const startPage = pageGroup * 10 + 1;
+  const endPage = Math.min(startPage + 9, totalPages);
+  const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
 
   return (
     <div className="w-full bg-white">
@@ -26,74 +127,162 @@ export default function NoticesPage() {
             {/* 총 건수 */}
             <div className="h-10 flex items-center">
               <p className="m-0 text-[15px] font-medium leading-[1.5] text-[#333C47]">
-                총 <span className="text-[#384FBF]">{rows.length}</span>건
+                총 <span className="text-[#384FBF]">{totalCount}</span>건
               </p>
             </div>
 
-            {/* 표 */}
-            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
-              {/* 헤더 */}
-              <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
-                <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  번호
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  제목
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                  게시일
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                  조회수
-                </div>
-                <div className="flex items-center px-4">작성자</div>
+            {loading ? (
+              <div className="flex items-center justify-center h-[240px]">
+                <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
               </div>
+            ) : (
+              <>
+                {/* 표 */}
+                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+                  {/* 헤더 */}
+                  <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
+                    <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      번호
+                    </div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      제목
+                    </div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                      게시일
+                    </div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                      조회수
+                    </div>
+                    <div className="flex items-center px-4">작성자</div>
+                  </div>
 
-              {/* 바디 */}
-              <div>
-                {rows.map((r, index) => {
-                  // 번호는 정렬된 목록에서의 순서
-                  const noticeNumber = rows.length - index;
-                  return (
-                    <div
-                      key={r.id}
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => router.push(`/notices/${r.id}`)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          router.push(`/notices/${r.id}`);
-                        }
-                      }}
-                      className={[
-                        'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
-                      ].join(' ')}
-                    >
-                      <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
-                        {noticeNumber}
+                  {/* 바디 */}
+                  <div>
+                    {pagedNotices.length === 0 ? (
+                      <div className="flex items-center justify-center h-[240px]">
+                        <p className="text-[16px] font-medium text-[#6C7682]">공지사항이 없습니다.</p>
                       </div>
-                    <div
-                      className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
-                      title={r.title}
-                    >
-                      {r.title}
-                      {r.hasAttachment && (
-                        <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
-                      )}
+                    ) : (
+                      pagedNotices.map((notice, index) => {
+                        // 번호는 전체 목록에서의 순서 (최신이 1번)
+                        const noticeNumber = totalCount - ((currentPage - 1) * ITEMS_PER_PAGE + index);
+                        return (
+                          <div
+                            key={notice.id}
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => router.push(`/notices/${notice.id}`)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                router.push(`/notices/${notice.id}`);
+                              }
+                            }}
+                            className="grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer"
+                          >
+                            <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
+                              {noticeNumber}
+                            </div>
+                            <div
+                              className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
+                              title={notice.title}
+                            >
+                              {notice.title}
+                              {notice.hasAttachment && (
+                                <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
+                              )}
+                            </div>
+                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                              {notice.date}
+                            </div>
+                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                              {notice.views.toLocaleString()}
+                            </div>
+                            <div className="flex items-center px-4">{notice.writer}</div>
+                          </div>
+                        );
+                      })
+                    )}
+                  </div>
+                </div>
+
+                {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                {totalCount > ITEMS_PER_PAGE && (
+                  <div className="pt-8 pb-[32px] flex items-center justify-center">
+                    <div className="flex items-center justify-center gap-[8px]">
+                      {/* First (맨 앞으로) */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage(1)}
+                        aria-label="맨 앞 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === 1}
+                      >
+                        <div className="relative flex items-center justify-center w-full h-full">
+                          <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
+                          <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
+                        </div>
+                      </button>
+
+                      {/* Prev */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                        aria-label="이전 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === 1}
+                      >
+                        <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
+                      </button>
+
+                      {/* Numbers */}
+                      {visiblePages.map((n) => {
+                        const active = n === currentPage;
+                        return (
+                          <button
+                            key={n}
+                            type="button"
+                            onClick={() => setCurrentPage(n)}
+                            aria-current={active ? 'page' : undefined}
+                            className={[
+                              'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
+                              active ? 'bg-bg-primary-light' : 'bg-white',
+                            ].join(' ')}
+                          >
+                            <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
+                          </button>
+                        );
+                      })}
+
+                      {/* Next */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                        aria-label="다음 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === totalPages}
+                      >
+                        <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
+                      </button>
+
+                      {/* Last (맨 뒤로) */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage(totalPages)}
+                        aria-label="맨 뒤 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === totalPages}
+                      >
+                        <div className="relative flex items-center justify-center w-full h-full">
+                          <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
+                          <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
+                        </div>
+                      </button>
                     </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.date}
-                    </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.views.toLocaleString()}
-                    </div>
-                    <div className="flex items-center px-4">{r.writer}</div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
+                  </div>
+                )}
+              </>
+            )}
           </section>
         </div>
       </div>

src/app/page.tsx

@@ -3,92 +3,36 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import MainLogoSvg from './svgs/mainlogosvg';
+import apiService from './lib/apiService';
+import type { Notice } from './admin/notices/mockData';
+
+interface Subject {
+  id: string | number;
+  title: string;
+  imageKey?: string;
+  instructor?: string;
+}
+
+interface CourseCard {
+  id: string | number;
+  title: string;
+  meta: string;
+  image: string;
+}
 
 export default function Home() {
   const router = useRouter();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [userName, setUserName] = useState<string>('');
-
-  // 코스, 공지사항 더미 데이터
-  const courseCards = useMemo(
-    () =>
-      [
-        {
-          id: 'c1',
-          title: '원자력 운영 기초',
-          meta: 'VOD • 초급 • 4시간 20분',
-          image: 'https://picsum.photos/seed/xrlms-c1/1200/800',
-        },
-        {
-          id: 'c2',
-          title: '반도체',
-          meta: 'VOD • 중급 • 3시간 10분',
-          image: 'https://picsum.photos/seed/xrlms-c2/1200/800',
-        },
-        {
-          id: 'c3',
-          title: '방사선 안전',
-          meta: 'VOD • 중급 • 4시간 20분',
-          image: 'https://picsum.photos/seed/xrlms-c3/1200/800',
-        },
-        {
-          id: 'c4',
-          title: '방사선 폐기물',
-          meta: 'VOD • 중급 • 4시간 20분',
-          image: 'https://picsum.photos/seed/xrlms-c4/1200/800',
-        },
-        {
-          id: 'c5',
-          title: '원자력 운전 개론',
-          meta: 'VOD • 초급 • 3시간 00분',
-          image: 'https://picsum.photos/seed/xrlms-c5/1200/800',
-        },
-        {
-          id: 'c6',
-          title: '안전 표지와 표준',
-          meta: 'VOD • 초급 • 2시간 40분',
-          image: 'https://picsum.photos/seed/xrlms-c6/1200/800',
-        },
-        {
-          id: 'c7',
-          title: '발전소 운영',
-          meta: 'VOD • 중급 • 4시간 20분',
-          image: 'https://picsum.photos/seed/xrlms-c7/1200/800',
-        },
-        {
-          id: 'c8',
-          title: '방사선 안전 실습',
-          meta: 'VOD • 중급 • 3시간 30분',
-          image: 'https://picsum.photos/seed/xrlms-c8/1200/800',
-        },
-        {
-          id: 'c9',
-          title: '실험실 안전',
-          meta: 'VOD • 초급 • 2시간 10분',
-          image: 'https://picsum.photos/seed/xrlms-c9/1200/800',
-        },
-        {
-          id: 'c10',
-          title: '기초 장비 운용',
-          meta: 'VOD • 초급 • 2시간 50분',
-          image: 'https://picsum.photos/seed/xrlms-c10/1200/800',
-        },
-      ] as Array<{ id: string; title: string; meta: string; image: string }>,
-    []
-  );
-  const noticeRows = useMemo(
-    () =>
-      [
-        { id: 5, title: '(공지)시스템 개선이 완료되었...', date: '2025-09-10', views: 1320, writer: '운영팀' },
-        { id: 4, title: '(공지)서버 점검 안내(9/10 새벽)', date: '2025-09-10', views: 1210, writer: '운영팀' },
-        { id: 3, title: '(공지)서비스 개선 안내', date: '2025-09-10', views: 1230, writer: '운영팀' },
-        { id: 2, title: '(공지)시장점검 공지', date: '2025-09-10', views: 1320, writer: '관리자' },
-        { id: 1, title: '뉴: 봉사시간 안내 및 한눈에 보는 현황 정리', date: '2025-08-28', views: 594, writer: '운영팀' },
-      ],
-    []
-  );
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [courseCards, setCourseCards] = useState<CourseCard[]>([]);
+  const [loadingSubjects, setLoadingSubjects] = useState(true);
+  const [totalSubjectsCount, setTotalSubjectsCount] = useState(0);
+  const [notices, setNotices] = useState<Notice[]>([]);
+  const [loadingNotices, setLoadingNotices] = useState(true);
 
   // NOTE: 실제 이미지 자산 연결 시 해당 src를 교체하세요.
   const slides = useMemo(
@@ -133,23 +77,13 @@ export default function Home() {
           return;
         }
 
-        const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
-          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
-          : 'https://hrdi.coconutmeet.net/auth/me';
+        const response = await apiService.getCurrentUser();
 
-        const response = await fetch(apiUrl, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        });
-
-        if (!response.ok) {
+        if (response.status !== 200) {
           return;
         }
 
-        const data = await response.json();
+        const data = response.data;
         
         if (isMounted) {
           // 사용자 권한 확인
@@ -176,6 +110,176 @@ export default function Home() {
     };
   }, []);
 
+  // 과목 리스트 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchSubjects() {
+      try {
+        setLoadingSubjects(true);
+        const response = await apiService.getSubjects();
+
+        if (response.status !== 200 || !response.data) {
+          return;
+        }
+
+        // 응답 데이터 구조 확인 및 배열 추출
+        let subjectsData: any[] = [];
+        let totalCount = 0;
+
+        if (Array.isArray(response.data)) {
+          subjectsData = response.data;
+          totalCount = response.data.length;
+        } else if (response.data && typeof response.data === 'object') {
+          // 다양한 응답 구조 처리
+          subjectsData = response.data.items || 
+                        response.data.courses || 
+                        response.data.data || 
+                        response.data.list || 
+                        response.data.subjects || 
+                        response.data.subjectList || 
+                        [];
+          
+          // 전체 개수는 total, totalCount, count 등의 필드에서 가져오거나 배열 길이 사용
+          totalCount = response.data.total !== undefined ? response.data.total :
+                      response.data.totalCount !== undefined ? response.data.totalCount :
+                      response.data.count !== undefined ? response.data.count :
+                      subjectsData.length;
+        }
+
+        console.log('과목 리스트 응답:', response.data);
+        console.log('추출된 과목 데이터:', subjectsData);
+        console.log('전체 과목 개수:', totalCount);
+        
+        if (!isMounted) return;
+
+        // 전체 과목 개수 저장
+        setTotalSubjectsCount(totalCount);
+
+        // 상위 10개만 가져오기
+        const top10Subjects = subjectsData.slice(0, 10);
+        setSubjects(top10Subjects);
+
+        // 각 과목의 이미지 다운로드
+        const courseCardsWithImages = await Promise.all(
+          top10Subjects.map(async (subject: Subject) => {
+            let imageUrl = 'https://picsum.photos/seed/xrlms-fallback-card/1200/800';
+            
+            if (subject.imageKey) {
+              try {
+                const fileUrl = await apiService.getFile(subject.imageKey);
+                if (fileUrl) {
+                  imageUrl = fileUrl;
+                }
+              } catch (error) {
+                console.error(`이미지 다운로드 실패 (과목 ID: ${subject.id}):`, error);
+              }
+            }
+
+            return {
+              id: subject.id,
+              title: subject.title || '',
+              meta: subject.instructor ? `강사: ${subject.instructor}` : 'VOD • 온라인',
+              image: imageUrl,
+            };
+          })
+        );
+
+        if (isMounted) {
+          setCourseCards(courseCardsWithImages);
+        }
+      } catch (error) {
+        console.error('과목 리스트 조회 오류:', error);
+      } finally {
+        if (isMounted) {
+          setLoadingSubjects(false);
+        }
+      }
+    }
+
+    fetchSubjects();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  // 공지사항 리스트 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchNotices() {
+      try {
+        setLoadingNotices(true);
+        const response = await apiService.getNotices();
+
+        if (response.status !== 200 || !response.data) {
+          return;
+        }
+
+        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
+        let noticesArray: any[] = [];
+        if (Array.isArray(response.data)) {
+          noticesArray = response.data;
+        } else if (response.data && typeof response.data === 'object') {
+          noticesArray = response.data.items || response.data.notices || response.data.data || response.data.list || [];
+        }
+
+        // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+        const formatDate = (dateString: string): string => {
+          if (!dateString) return '';
+          
+          try {
+            const date = new Date(dateString);
+            if (isNaN(date.getTime())) {
+              // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+              if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+                return dateString;
+              }
+              return dateString;
+            }
+            
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+          } catch {
+            return dateString;
+          }
+        };
+
+        // API 응답 데이터를 Notice 형식으로 변환
+        const transformedNotices: Notice[] = noticesArray.map((notice: any) => ({
+          id: notice.id || notice.noticeId || 0,
+          title: notice.title || '',
+          date: formatDate(notice.date || notice.createdAt || notice.createdDate || new Date().toISOString().split('T')[0]),
+          views: notice.views || notice.viewCount || 0,
+          writer: notice.writer || notice.author || notice.createdBy || '관리자',
+          content: notice.content ? (Array.isArray(notice.content) ? notice.content : [notice.content]) : undefined,
+          hasAttachment: notice.hasAttachment || notice.attachment || false,
+        }));
+
+        if (!isMounted) return;
+
+        // 날짜 내림차순 정렬 (최신 날짜가 먼저)
+        const sortedNotices = [...transformedNotices].sort((a, b) => b.date.localeCompare(a.date));
+        setNotices(sortedNotices);
+      } catch (error) {
+        console.error('공지사항 리스트 조회 오류:', error);
+      } finally {
+        if (isMounted) {
+          setLoadingNotices(false);
+        }
+      }
+    }
+
+    fetchNotices();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   useEffect(() => {
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -330,11 +434,11 @@ export default function Home() {
                 <div className="flex items-center gap-3">
                   <h2 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">교육 과정</h2>
                   <div className="text-[15px] font-medium leading-normal text-[#333C47]">
-                    총 <span className="text-[#384FBF]">28</span>건
+                    총 <span className="text-[#384FBF]">{totalSubjectsCount}</span>건
                   </div>
                 </div>
-                <a
-                  href="#"
+                <Link
+                  href="/course-list"
                   className="flex items-center gap-0.5 text-[14px] font-medium leading-normal text-[#6C7682] no-underline"
                 >
                   전체보기
@@ -348,55 +452,60 @@ export default function Home() {
                       strokeLinejoin="round"
                     />
                   </svg>
-                </a>
+                </Link>
               </div>
 
-              <div className="grid grid-cols-5 gap-8">
-                {courseCards.map((c) => (
-                  <article key={c.id} className="flex flex-col gap-4 h-[260px]">
-                    <div className="h-[166.4px] overflow-hidden rounded-[8px]">
-                      <img
-                        alt={c.title}
-                        src={c.image}
-                        className="w-full h-full object-cover block"
-                        onError={(e) => {
-                          const t = e.currentTarget as HTMLImageElement;
-                          if (!t.src.includes('picsum.photos')) t.src = 'https://picsum.photos/seed/xrlms-fallback-card/1200/800';
-                        }}
-                      />
-                    </div>
-                    <div className="flex flex-col gap-1">
-                      {c.id === 'c1' && (
-                        <span className="inline-flex h-[20px] items-center justify-center px-1 bg-[#E5F5EC] rounded-[4px] text-[13px] font-semibold leading-[1.4] text-[#0C9D61]">
-                          수강 중
-                        </span>
-                      )}
-                      <h5 className="m-0 text-[#333C47] font-semibold text-[18px] leading-normal truncate" title={c.title}>
-                        {c.title}
-                      </h5>
-                      <div className="flex items-center gap-1">
-                        <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden className="text-[#8C95A1]">
-                          <path d="M8 5v14l11-7z" fill="currentColor" />
-                        </svg>
-                        <p className="m-0 text-[#8C95A1] text-[13px] font-medium leading-[1.4]">{c.meta}</p>
+              {loadingSubjects ? (
+                <div className="flex items-center justify-center h-[260px]">
+                  <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-5 gap-8">
+                  {courseCards.map((c) => (
+                    <article 
+                      key={c.id} 
+                      onClick={() => router.push(`/course-list/${c.id}`)}
+                      className="flex flex-col gap-4 h-[260px] cursor-pointer"
+                    >
+                      <div className="h-[166.4px] overflow-hidden rounded-[8px] flex items-center justify-center bg-[#F1F3F5] hover:shadow-lg transition-shadow">
+                        <img
+                          alt={c.title}
+                          src={c.image}
+                          className="h-full w-auto object-contain block"
+                          onError={(e) => {
+                            const t = e.currentTarget as HTMLImageElement;
+                            if (!t.src.includes('picsum.photos')) t.src = 'https://picsum.photos/seed/xrlms-fallback-card/1200/800';
+                          }}
+                        />
                       </div>
-                    </div>
-                  </article>
-                ))}
-              </div>
+                      <div className="flex flex-col gap-1">
+                        <h5 className="m-0 text-[#333C47] font-semibold text-[18px] leading-normal truncate" title={c.title}>
+                          {c.title}
+                        </h5>
+                        <div className="flex items-center gap-1">
+                          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden className="text-[#8C95A1]">
+                            <path d="M8 5v14l11-7z" fill="currentColor" />
+                          </svg>
+                          <p className="m-0 text-[#8C95A1] text-[13px] font-medium leading-[1.4]">{c.meta}</p>
+                        </div>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              )}
             </section>
 
             {/* 공지사항 */}
-            <section className="mt-9">
+            <section className="mt-9 pb-20">
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center gap-3">
                   <h2 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">공지사항</h2>
                   <div className="text-[15px] font-medium leading-normal text-[#333C47]">
-                    총 <span className="text-[#384FBF]">{noticeRows.length}</span>건
+                    총 <span className="text-[#384FBF]">{notices.length}</span>건
                   </div>
                 </div>
-                <a
-                  href="#"
+                <Link
+                  href="/notices"
                   className="flex items-center gap-0.5 text-[14px] font-medium leading-normal text-[#6C7682] no-underline"
                 >
                   전체보기
@@ -410,38 +519,57 @@ export default function Home() {
                       strokeLinejoin="round"
                     />
                   </svg>
-                </a>
+                </Link>
               </div>
 
-              <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
-                <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
-                  <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">번호</div>
-                  <div className="flex items-center px-4 border-r border-[#DEE1E6]">제목</div>
-                  <div className="flex items-center px-4 border-r border-[#DEE1E6]">게시일</div>
-                  <div className="flex items-center px-4 border-r border-[#DEE1E6]">조회수</div>
-                  <div className="flex items-center px-4">작성자</div>
+              {loadingNotices ? (
+                <div className="flex items-center justify-center h-[240px]">
+                  <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
                 </div>
+              ) : (
+                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+                  <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
+                    <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">번호</div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">제목</div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">게시일</div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">조회수</div>
+                    <div className="flex items-center px-4">작성자</div>
+                  </div>
 
-                <div>
-                  {noticeRows.map((r) => (
-                    <div
-                      key={r.id}
-                      className="grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6]"
-                    >
-                      <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">{r.id}</div>
-                      <div
-                        className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
-                        title={r.title}
-                      >
-                        {r.title}
-                      </div>
-                      <div className="flex items-center px-4 border-r border-[#DEE1E6]">{r.date}</div>
-                      <div className="flex items-center px-4 border-r border-[#DEE1E6]">{r.views.toLocaleString()}</div>
-                      <div className="flex items-center px-4">{r.writer}</div>
-                    </div>
-                  ))}
+                  <div>
+                    {notices.map((notice, index) => {
+                      // 번호는 정렬된 목록에서의 순서 (최신이 1번)
+                      const noticeNumber = notices.length - index;
+                      return (
+                        <div
+                          key={notice.id}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => router.push(`/notices/${notice.id}`)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              router.push(`/notices/${notice.id}`);
+                            }
+                          }}
+                          className="grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer"
+                        >
+                          <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">{noticeNumber}</div>
+                          <div
+                            className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
+                            title={notice.title}
+                          >
+                            {notice.title}
+                          </div>
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6]">{notice.date}</div>
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6]">{notice.views.toLocaleString()}</div>
+                          <div className="flex items-center px-4">{notice.writer}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
+              )}
             </section>
           </div>
         </div>

src/app/register/RegisterForm.tsx

@@ -6,6 +6,7 @@ import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
 import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
 import LoginInputSvg from "@/app/svgs/inputformx";
 import CalendarSvg from "@/app/svgs/callendar";
+import apiService from "@/app/lib/apiService";
 
 type Gender = "MALE" | "FEMALE" | "";
 
@@ -159,17 +160,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 
 	async function verifyEmailCode() {
 		try {
-			const response = await fetch(
-				"https://hrdi.coconutmeet.net/auth/verify-email/confirm",
-				{
-					method: "POST", headers: { "Content-Type": "application/json", },
-					body: JSON.stringify({ email: email, emailCode: emailCode })
-				});
-			if (!response.ok) {
-				console.error("이메일 인증번호 검증 실패:", response.statusText);
-				onOpenCodeError();
-				return;
-			}
+			await apiService.verifyEmailCode(email, emailCode);
 			// 인증 성공 시 상태 업데이트
 			setEmailCodeVerified(true);
 		}
@@ -183,25 +174,8 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 	async function sendEmailCode() {
 
 		if (!isEmailValid) return;
-		// INSERT_YOUR_CODE
 		try {
-			const response = await fetch(
-				"https://hrdi.coconutmeet.net/auth/verify-email/send",
-				{
-					method: "POST",
-					headers: { "Content-Type": "application/json", },
-					body: JSON.stringify({ email: email })
-				}
-			);
-			if (!response.ok) {
-				if (response.status === 409) {
-					setErrors((prev) => ({ ...prev, email: "이메일이 중복되었습니다." }));
-					return;
-				}
-				console.error("이메일 인증번호 전송 실패:", response.statusText);
-				alert("인증번호 전송실패");
-				return;
-			}
+			await apiService.sendEmailVerification(email);
 			// 성공 시에만 상태 업데이트
 			setEmailCodeSent(true);
 			setEmailCode("");
@@ -214,8 +188,11 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 			});
 		} catch (error) {
 			console.error("이메일 인증번호 전송 오류:", error);
-			alert("인증번호 전송실패");
-			return;
+			if (error instanceof Error && error.message.includes("409")) {
+				setErrors((prev) => ({ ...prev, email: "이메일이 중복되었습니다." }));
+			} else {
+				alert("인증번호 전송실패");
+			}
 		}
 	}
 
@@ -224,41 +201,21 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 			onOpenCodeError("이메일 인증을 완료해주세요.");
 			return false;
 		}
+		if (gender === "") {
+			onOpenCodeError("성별을 선택해주세요.");
+			return false;
+		}
 		try {
-			const response = await fetch("https://hrdi.coconutmeet.net/auth/signup", {
-				method: "POST",
-				headers: { "Content-Type": "application/json", },
-				body: JSON.stringify({
-					email: email,
-					emailCode: emailCode,
-					password: password,
-					passwordConfirm: passwordConfirm,
-					name: name,
-					phone: phone,
-					gender: gender,
-					birthDate: birthdate
-				})
+			await apiService.register({
+				email,
+				emailCode,
+				password,
+				passwordConfirm,
+				name,
+				phone,
+				gender: gender as "MALE" | "FEMALE",
+				birthDate: birthdate
 			});
-			if (!response.ok) {
-				let errorMessage = `회원가입 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				console.error("회원가입 실패:", errorMessage);
-				onOpenCodeError(errorMessage);
-				return false;
-			}
 			onOpenDone();
 			return true;
 		} catch (error) {

src/app/reset-password/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import LoginInputSvg from "@/app/svgs/inputformx";
 import ResetPasswordDone from "./ResetPasswordDone";
 import ResetPaswordOption from "./ResetPaswordOption";
+import apiService from "@/app/lib/apiService";
 
 export default function ResetPasswordPage() {
 	const [isDoneOpen, setIsDoneOpen] = useState(false);
@@ -40,37 +41,7 @@ export default function ResetPasswordPage() {
 		if (!isEmailValid) return;
 
 		try {
-			const response = await fetch("https://hrdi.coconutmeet.net/auth/password/forgot", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					email: email
-				})
-			});
-
-			if (!response.ok) {
-				let errorMessage = `인증번호 전송 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				console.error("인증번호 전송 실패:", errorMessage);
-				setErrors((prev) => ({ ...prev, email: errorMessage }));
-				return;
-			}
-
-			const data = await response.json();
-			console.log("인증번호 전송 성공:", data);
+			await apiService.sendPasswordReset(email);
 			// 성공 시 상태 업데이트
 			setEmailCodeSent(true);
 			setEmailCode("");
@@ -90,42 +61,7 @@ export default function ResetPasswordPage() {
 
 	async function verifyEmailCode() {
 		try {
-			const response = await fetch("https://hrdi.coconutmeet.net/auth/password/confirm", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					email: email,
-					emailCode: emailCode
-				})
-			});
-
-			if (!response.ok) {
-				let errorMessage = `인증번호 확인 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				// 특정 에러 메시지를 사용자 친화적인 메시지로 변경
-				if (errorMessage.includes("잘못되었거나 만료된 코드") || errorMessage.includes("잘못되었거나") || errorMessage.includes("만료된")) {
-					errorMessage = "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.";
-				}
-				console.error("인증번호 확인 실패:", errorMessage);
-				setErrors((prev) => ({ ...prev, emailCode: errorMessage }));
-				return;
-			}
-
-			const data = await response.json();
-			console.log("인증번호 확인 성공:", data);
+			await apiService.verifyPasswordResetCode(email, emailCode);
 			// 인증 성공 시 상태 업데이트
 			setEmailCodeVerified(true);
 			// 성공 시 에러 메시지 제거
@@ -135,7 +71,11 @@ export default function ResetPasswordPage() {
 				return next;
 			});
 		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
+			let errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
+			// 특정 에러 메시지를 사용자 친화적인 메시지로 변경
+			if (errorMessage.includes("잘못되었거나 만료된 코드") || errorMessage.includes("잘못되었거나") || errorMessage.includes("만료된")) {
+				errorMessage = "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.";
+			}
 			console.error("인증번호 확인 오류:", errorMessage);
 			setErrors((prev) => ({ ...prev, emailCode: errorMessage }));
 		}
@@ -146,40 +86,7 @@ export default function ResetPasswordPage() {
 		if (!validateAll()) return;
 
 		try {
-			const response = await fetch("https://hrdi.coconutmeet.net/auth/password/reset", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					email: email,
-					emailCode: emailCode,
-					newPassword: password,
-					newPasswordConfirm: passwordConfirm
-				})
-			});
-
-			if (!response.ok) {
-				let errorMessage = `비밀번호 재설정 실패 (${response.status})`;
-				try {
-					const errorData = await response.json();
-					if (errorData.error) {
-						errorMessage = errorData.error;
-					} else if (errorData.message) {
-						errorMessage = errorData.message;
-					} else if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				} catch (parseError) {
-					if (response.statusText) {
-						errorMessage = `${response.statusText} (${response.status})`;
-					}
-				}
-				console.error("비밀번호 재설정 실패:", errorMessage);
-				setErrors((prev) => ({ ...prev, submit: errorMessage }));
-				return;
-			}
-
-			const data = await response.json();
-			console.log("비밀번호 재설정 성공:", data);
+			await apiService.resetPassword(email, emailCode, password, passwordConfirm);
 			// 성공 시 완료 오버레이 표시
 			setIsDoneOpen(true);
 		} catch (error) {

src/app/resources/[id]/page.tsx

@@ -1,92 +1,162 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { notFound } from 'next/navigation';
 import PaperClipSvg from '../../svgs/paperclipsvg';
 import BackCircleSvg from '../../svgs/backcirclesvg';
+import DownloadIcon from '../../svgs/downloadicon';
+import apiService from '../../lib/apiService';
+import type { Resource } from '../../admin/resources/mockData';
 
-type ResourceRow = {
-  id: number;
-  title: string;
-  date: string;
-  views: number;
-  writer: string;
-  content: string[];
-  attachments?: Array<{ name: string; size: string; url: string }>;
+type Attachment = {
+  name: string;
+  size: string;
+  url?: string;
+  fileKey?: string;
 };
 
-const DATA: ResourceRow[] = [
-  {
-    id: 6,
-    title: '방사선과 물질의 상호작용 관련 학습 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    content: [
-      '방사선(Radiation)이 물질 속을 지나갈 때 발생하는 다양한 상호작용(Interaction)의 기본적인 원리를 이해합니다.',
-      '상호작용의 원리는 방사선 측정, 방사선 이용(의료, 산업), 방사선 차폐 등 방사선 관련 분야의 기본이 됨을 인식합니다.',
-      '방사선의 종류(광자, 하전입자, 중성자 등) 및 에너지에 따라 물질과의 상호작용 형태가 어떻게 달라지는지 학습합니다.',
-    ],
-    attachments: [
-      {
-        name: '[PPT] 방사선-물질 상호작용의 3가지 유형.pptx',
-        size: '796.35 KB',
-        url: '#',
-      },
-    ],
-  },
-  {
-    id: 5,
-    title: '감마선과 베타선의 특성 및 차이 분석 자료',
-    date: '2025-06-28',
-    views: 594,
-    writer: '강민재',
-    content: [
-      '감마선과 베타선의 발생 원리, 물질과의 상호작용 차이를 비교합니다.',
-      '차폐 설계 시 고려해야 할 변수들을 사례와 함께 설명합니다.',
-    ],
-  },
-  {
-    id: 4,
-    title: '방사선량 단위(Sv, Gy) 비교 및 계산 예제',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    content: ['방사선량 단위 변환 및 예제 계산을 통해 실무 감각을 익힙니다.'],
-  },
-  {
-    id: 3,
-    title: '의료 영상 촬영 시 방사선 안전 수칙 가이드',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    content: ['촬영 환경에서의 방사선 안전 수칙을 체크리스트 형태로 정리합니다.'],
-  },
-  {
-    id: 2,
-    title: 'X선 발생 원리 및 특성에 대한 이해 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    content: ['X선의 발생 원리와 에너지 스펙트럼의 특성을 개관합니다.'],
-  },
-  {
-    id: 1,
-    title: '방사선의 기초 개념과 물질과의 상호작용 정리 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    content: ['방사선 기초 개념을 한눈에 정리한 입문용 자료입니다.'],
-  },
-];
+export default function ResourceDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [resource, setResource] = useState<Resource | null>(null);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-export default async function ResourceDetailPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params;
-  const numericId = Number(id);
-  const item = DATA.find((r) => r.id === numericId);
-  if (!item) return notFound();
+  useEffect(() => {
+    async function fetchResource() {
+      if (!params?.id) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await apiService.getLibraryItem(params.id);
+        const data = response.data;
+
+        // API 응답 데이터를 Resource 형식으로 변환
+        const transformedResource: Resource = {
+          id: data.id || data.resourceId || Number(params.id),
+          title: data.title || '',
+          date: data.date || data.createdAt || data.createdDate || new Date().toISOString().split('T')[0],
+          views: data.views || data.viewCount || 0,
+          writer: data.writer || data.author || data.createdBy || '관리자',
+          content: data.content 
+            ? (Array.isArray(data.content) 
+                ? data.content 
+                : typeof data.content === 'string' 
+                  ? data.content.split('\n').filter((line: string) => line.trim())
+                  : [String(data.content)])
+            : [],
+          hasAttachment: data.hasAttachment || data.attachment || false,
+        };
+
+        // 첨부파일 정보 처리
+        if (data.attachments && Array.isArray(data.attachments)) {
+          setAttachments(data.attachments.map((att: any) => ({
+            name: att.name || att.fileName || att.filename || '',
+            size: att.size || att.fileSize || '',
+            url: att.url || att.downloadUrl,
+            fileKey: att.fileKey || att.key || att.fileId,
+          })));
+        } else if (transformedResource.hasAttachment && data.attachment) {
+          // 단일 첨부파일인 경우
+          setAttachments([{
+            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
+            size: data.attachment.size || data.attachment.fileSize || '',
+            url: data.attachment.url || data.attachment.downloadUrl,
+            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
+          }]);
+        }
+
+        if (!transformedResource.title) {
+          throw new Error('학습 자료를 찾을 수 없습니다.');
+        }
+
+        setResource(transformedResource);
+      } catch (err) {
+        console.error('학습 자료 조회 오류:', err);
+        setError('학습 자료를 불러오는 중 오류가 발생했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchResource();
+  }, [params?.id]);
+
+  const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
+    if (url) {
+      // URL이 있으면 직접 다운로드
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else if (fileKey) {
+      // fileKey가 있으면 API를 통해 다운로드
+      try {
+        const fileUrl = await apiService.getFile(fileKey);
+        if (fileUrl) {
+          const link = document.createElement('a');
+          link.href = fileUrl;
+          link.download = fileName || 'download';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      } catch (err) {
+        console.error('파일 다운로드 실패:', err);
+        alert('파일 다운로드에 실패했습니다.');
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full bg-white">
+        <div className="flex justify-center">
+          <div className="w-full max-w-[1440px]">
+            <div className="h-[100px] flex items-center justify-center px-8">
+              <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !resource) {
+    return (
+      <div className="w-full bg-white">
+        <div className="flex justify-center">
+          <div className="w-full max-w-[1440px]">
+            <div className="h-[100px] flex items-center gap-3 px-8">
+              <Link
+                href="/resources"
+                aria-label="뒤로 가기"
+                className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
+              >
+                <BackCircleSvg width={32} height={32} />
+              </Link>
+              <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
+                학습 자료 상세
+              </h1>
+            </div>
+            <div className="flex-1 flex items-center justify-center px-8 pb-8">
+              <p className="text-[16px] font-medium text-[#333c47]">
+                {error || '학습 자료를 찾을 수 없습니다.'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const item = resource;
 
   return (
     <div className="w-full bg-white">
@@ -119,7 +189,11 @@ export default async function ResourceDetailPage({
                   <span className="text-[#333C47]">{item.writer}</span>
                   <span className="w-px h-4 bg-[#DEE1E6]" />
                   <span className="text-[#8C95A1]">게시일</span>
-                  <span className="text-[#333C47]">{item.date}</span>
+                  <span className="text-[#333C47]">
+                    {item.date.includes('T') 
+                      ? new Date(item.date).toISOString().split('T')[0]
+                      : item.date}
+                  </span>
                   <span className="w-px h-4 bg-[#DEE1E6]" />
                   <span className="text-[#8C95A1]">조회수</span>
                   <span className="text-[#333C47]">{item.views.toLocaleString()}</span>
@@ -132,21 +206,25 @@ export default async function ResourceDetailPage({
               {/* 본문 */}
               <div className="p-8">
                 <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
-                  {item.content.map((p, idx) => (
-                    <p key={idx} className="m-0">
-                      {p}
-                    </p>
-                  ))}
+                  {item.content && item.content.length > 0 ? (
+                    item.content.map((p, idx) => (
+                      <p key={idx} className="m-0">
+                        {p}
+                      </p>
+                    ))
+                  ) : (
+                    <p className="m-0 text-[#8C95A1]">내용이 없습니다.</p>
+                  )}
                 </div>
               </div>
 
               {/* 첨부 파일 */}
-              {item.attachments?.length ? (
+              {attachments.length > 0 && (
                 <div className="p-8 pt-0">
                   <div className="mb-2 text-[15px] font-semibold text-[#6C7682]">
                     첨부 파일
                   </div>
-                  {item.attachments.map((f, idx) => (
+                  {attachments.map((f, idx) => (
                     <div
                       key={idx}
                       className="bg-white border border-[#DEE1E6] h-[64px] rounded-[6px] flex items-center gap-3 px-[17px]"
@@ -158,31 +236,24 @@ export default async function ResourceDetailPage({
                         <span className="text-[15px] text-[#1B2027] truncate">
                           {f.name}
                         </span>
-                        <span className="text-[13px] text-[#8C95A1] whitespace-nowrap">
-                          {f.size}
-                        </span>
+                        {f.size && (
+                          <span className="text-[13px] text-[#8C95A1] whitespace-nowrap">
+                            {f.size}
+                          </span>
+                        )}
                       </div>
-                      <a
-                        href={f.url}
-                        className="h-8 px-4 rounded-[6px] border border-[#8C95A1] text-[13px] text-[#4C5561] inline-flex items-center gap-1 hover:bg-[#F9FAFB] no-underline"
-                        download
+                      <button
+                        type="button"
+                        onClick={() => handleDownload(f.fileKey, f.url, f.name)}
+                        className="h-8 px-4 rounded-[6px] border border-[#8C95A1] text-[13px] text-[#4C5561] inline-flex items-center gap-1 hover:bg-[#F9FAFB] cursor-pointer"
                       >
-                        <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
-                          <path
-                            d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
+                        <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
                         다운로드
-                      </a>
+                      </button>
                     </div>
                   ))}
                 </div>
-              ) : null}
+              )}
             </div>
           </section>
         </div>

src/app/resources/page.tsx

@@ -1,65 +1,97 @@
 'use client';
 
+import { useState, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import PaperClipSvg from '../svgs/paperclipsvg';
-
-type ResourceRow = {
-  id: number;
-  title: string;
-  date: string;
-  views: number;
-  writer: string;
-  hasAttachment?: boolean;
-};
-
-const rows: ResourceRow[] = [
-  {
-    id: 6,
-    title: '방사선과 물질의 상호작용 관련 학습 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-    hasAttachment: true,
-  },
-  {
-    id: 5,
-    title: '감마선과 베타선의 특성 및 차이 분석 자료',
-    date: '2025-06-28',
-    views: 594,
-    writer: '강민재',
-  },
-  {
-    id: 4,
-    title: '방사선량 단위(Sv, Gy) 비교 및 계산 예제',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-  },
-  {
-    id: 3,
-    title: '의료 영상 촬영 시 방사선 안전 수칙 가이드',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-  },
-  {
-    id: 2,
-    title: 'X선 발생 원리 및 특성에 대한 이해 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-  },
-  {
-    id: 1,
-    title: '방사선의 기초 개념과 물질과의 상호작용 정리 자료',
-    date: '2025-06-28',
-    views: 1230,
-    writer: '강민재',
-  },
-];
+import ChevronDownSvg from '../svgs/chevrondownsvg';
+import apiService from '../lib/apiService';
+import type { Resource } from '../admin/resources/mockData';
 
 export default function ResourcesPage() {
   const router = useRouter();
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 날짜를 yyyy-mm-dd 형식으로 포맷팅
+  const formatDate = (dateString: string): string => {
+    if (!dateString) return '';
+    
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) {
+        // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
+        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+          return dateString;
+        }
+        return dateString;
+      }
+      
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    } catch {
+      return dateString;
+    }
+  };
+
+  // API에서 학습 자료 목록 가져오기
+  useEffect(() => {
+    async function fetchResources() {
+      try {
+        setIsLoading(true);
+        const response = await apiService.getLibrary();
+        const data = response.data;
+        
+        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
+        let resourcesArray: any[] = [];
+        if (Array.isArray(data)) {
+          resourcesArray = data;
+        } else if (data && typeof data === 'object') {
+          resourcesArray = data.items || data.resources || data.data || data.list || [];
+        }
+        
+        // API 응답 데이터를 Resource 형식으로 변환
+        const transformedResources: Resource[] = resourcesArray.map((resource: any) => ({
+          id: resource.id || resource.resourceId || 0,
+          title: resource.title || '',
+          date: resource.date || resource.createdAt || resource.createdDate || new Date().toISOString().split('T')[0],
+          views: resource.views || resource.viewCount || 0,
+          writer: resource.writer || resource.author || resource.createdBy || '관리자',
+          content: resource.content ? (Array.isArray(resource.content) ? resource.content : [resource.content]) : undefined,
+          hasAttachment: resource.hasAttachment || resource.attachment || false,
+        }));
+        
+        setResources(transformedResources);
+      } catch (error) {
+        console.error('학습 자료 목록 조회 오류:', error);
+        // 에러 발생 시 빈 배열로 설정
+        setResources([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchResources();
+  }, []);
+
+  const totalCount = useMemo(() => resources.length, [resources]);
+
+  const ITEMS_PER_PAGE = 10;
+  const sortedResources = useMemo(() => {
+    return [...resources].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.date.localeCompare(a.date);
+    });
+  }, [resources]);
+
+  const totalPages = Math.ceil(sortedResources.length / ITEMS_PER_PAGE);
+  const paginatedResources = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return sortedResources.slice(startIndex, endIndex);
+  }, [sortedResources, currentPage]);
 
   return (
     <div className="w-full bg-white">
@@ -77,70 +109,173 @@ export default function ResourcesPage() {
             {/* 총 건수 */}
             <div className="h-10 flex items-center">
               <p className="m-0 text-[15px] font-medium leading-[1.5] text-[#333C47]">
-                총 <span className="text-[#384FBF]">{rows.length}</span>건
+                총 <span className="text-[#384FBF]">{totalCount}</span>건
               </p>
             </div>
 
-            {/* 표 */}
-            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
-              {/* 헤더 */}
-              <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
-                <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  번호
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  제목
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  게시일
-                </div>
-                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                  조회수
-                </div>
-                <div className="flex items-center px-4 whitespace-nowrap">등록자</div>
+            {isLoading ? (
+              <div className="rounded-[8px] 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>
-                {rows.map((r) => (
-                  <div
-                    key={r.id}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => router.push(`/resources/${r.id}`)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        router.push(`/resources/${r.id}`);
-                      }
-                    }}
-                    className={[
-                      'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
-                    ].join(' ')}
-                  >
-                    <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
-                      {r.id}
+            ) : resources.length === 0 ? (
+              <div className="rounded-[8px] border border-[#DEE1E6] bg-white min-h-[400px] flex items-center justify-center">
+                <p className="text-[16px] font-medium leading-[1.5] text-[#333C47] text-center">
+                  등록된 학습 자료가 없습니다.
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 표 */}
+                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+                  {/* 헤더 */}
+                  <div className="grid grid-cols-[80px_1fr_140px_120px_120px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
+                    <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      번호
                     </div>
-                    <div
-                      className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
-                      title={r.title}
-                    >
-                      {r.title}
-                      {r.hasAttachment && (
-                        <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
-                      )}
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      제목
                     </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.date}
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      게시일
                     </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.views.toLocaleString()}
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                      조회수
                     </div>
-                    <div className="flex items-center px-4">{r.writer}</div>
+                    <div className="flex items-center px-4 whitespace-nowrap">작성자</div>
                   </div>
-                ))}
-              </div>
-            </div>
+
+                  {/* 바디 */}
+                  <div>
+                    {paginatedResources.map((resource, index) => {
+                      // 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
+                      const resourceNumber = sortedResources.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
+                      return (
+                        <div
+                          key={resource.id}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => router.push(`/resources/${resource.id}`)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              router.push(`/resources/${resource.id}`);
+                            }
+                          }}
+                          className={[
+                            'grid grid-cols-[80px_1fr_140px_120px_120px] h-[48px] text-[13px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
+                          ].join(' ')}
+                        >
+                          <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                            {resourceNumber}
+                          </div>
+                          <div
+                            className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
+                            title={resource.title}
+                          >
+                            {resource.title}
+                            {resource.hasAttachment && (
+                              <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
+                            )}
+                          </div>
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                            {formatDate(resource.date)}
+                          </div>
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                            {resource.views.toLocaleString()}
+                          </div>
+                          <div className="flex items-center px-4 whitespace-nowrap">{resource.writer}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                {resources.length > ITEMS_PER_PAGE && (
+                  <div className="pt-8 pb-[32px] flex items-center justify-center">
+                    <div className="flex items-center justify-center gap-[8px]">
+                      {/* First (맨 앞으로) */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage(1)}
+                        aria-label="맨 앞 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === 1}
+                      >
+                        <div className="relative flex items-center justify-center w-full h-full">
+                          <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
+                          <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
+                        </div>
+                      </button>
+
+                      {/* Prev */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                        aria-label="이전 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === 1}
+                      >
+                        <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
+                      </button>
+
+                      {/* Numbers */}
+                      {(() => {
+                        const pageGroup = Math.floor((currentPage - 1) / 10);
+                        const startPage = pageGroup * 10 + 1;
+                        const endPage = Math.min(startPage + 9, totalPages);
+                        const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+
+                        return visiblePages.map((n) => {
+                          const active = n === currentPage;
+                          return (
+                            <button
+                              key={n}
+                              type="button"
+                              onClick={() => setCurrentPage(n)}
+                              aria-current={active ? 'page' : undefined}
+                              className={[
+                                'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
+                                active ? 'bg-[#ecf0ff]' : 'bg-white',
+                              ].join(' ')}
+                            >
+                              <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
+                            </button>
+                          );
+                        });
+                      })()}
+
+                      {/* Next */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                        aria-label="다음 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === totalPages}
+                      >
+                        <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
+                      </button>
+
+                      {/* Last (맨 뒤로) */}
+                      <button
+                        type="button"
+                        onClick={() => setCurrentPage(totalPages)}
+                        aria-label="맨 뒤 페이지"
+                        className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                        disabled={currentPage === totalPages}
+                      >
+                        <div className="relative flex items-center justify-center w-full h-full">
+                          <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
+                          <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
           </section>
         </div>
       </div>

src/app/svgs/downloadicon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+type DownloadIconProps = React.SVGProps<SVGSVGElement>;
+
+export default function DownloadIcon(props: DownloadIconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+