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

loginpage 반응형형
메일페이지 수정중1
2025-12-01 11:31:09 +09:00 · 2025-12-01 10:46:10 +09:00 · 2025-12-01 09:56:04 +09:00 · 2025-11-30 00:25:16 +09:00 · 2025-11-29 23:57:31 +09:00 · 2025-11-29 15:40:39 +09:00
67 changed files with 14036 additions and 4144 deletions
--- a/API_USAGE.md
+++ b/API_USAGE.md
@@ -1,565 +0,0 @@
 # API 사용 가이드
 이 문서는 데이터베이스에 데이터를 생성하는 API의 사용 방법을 설명합니다.
 ## 📋 목차
 1. [기본 설정](#기본-설정)
 2. [사용자 API](#1-사용자-api)
 3. [교육과정 API](#2-교육과정-api)
 4. [강좌 API](#3-강좌-api)
 5. [공지사항 API](#4-공지사항-api)
 6. [에러 처리](#에러-처리)
 7. [실전 예제](#실전-예제)
 ---
 ## 기본 설정
 ### 환경 변수
 `.env` 파일에 데이터베이스 연결 정보가 설정되어 있어야 합니다:
 ```env
 DATABASE_URL="postgresql://user:password@localhost:5432/dbname"
 ```
 ### API 기본 URL
 - 개발 환경: `http://localhost:3000/api`
 - 프로덕션: `https://your-domain.com/api`
 ---
 ## 1. 사용자 API
 ### POST /api/users - 사용자 생성
 새로운 사용자를 생성합니다.
 #### 요청
 ```typescript
 const response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'hashed_password_here', // 실제로는 해시화된 비밀번호
    name: '홍길동',
    phone: '010-1234-5678',        // 선택사항
    gender: 'M',                    // 선택사항: 'M' 또는 'F'
    birthdate: '1990-01-01',        // 선택사항: YYYY-MM-DD 형식
    role: 'LEARNER',                // 선택사항: 'LEARNER' 또는 'ADMIN' (기본값: 'LEARNER')
    status: 'ACTIVE',               // 선택사항: 'ACTIVE' 또는 'INACTIVE' (기본값: 'ACTIVE')
  }),
 });
 const data = await response.json();
 ```
 #### 성공 응답 (201)
 ```json
 {
  "message": "사용자가 성공적으로 생성되었습니다.",
  "user": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "email": "user@example.com",
    "name": "홍길동",
    "phone": "010-1234-5678",
    "gender": "M",
    "birthdate": "1990-01-01T00:00:00.000Z",
    "role": "LEARNER",
    "status": "ACTIVE",
    "joinDate": "2024-11-21T00:00:00.000Z",
    "createdAt": "2024-11-21T00:00:00.000Z",
    "updatedAt": "2024-11-21T00:00:00.000Z"
  }
 }
 ```
 #### 에러 응답
 **400 Bad Request** - 필수 필드 누락
 ```json
 {
  "error": "이메일, 비밀번호, 이름은 필수입니다."
 }
 ```
 **409 Conflict** - 이메일 중복
 ```json
 {
  "error": "이미 존재하는 이메일입니다."
 }
 ```
 ### GET /api/users - 사용자 목록 조회
 사용자 목록을 조회합니다. 필터링 및 페이지네이션을 지원합니다.
 #### 요청
 ```typescript
 // 전체 사용자 조회
 const response = await fetch('/api/users');
 // 필터링 및 페이지네이션
 const response = await fetch('/api/users?role=LEARNER&status=ACTIVE&page=1&limit=10');
 const data = await response.json();
 ```
 #### 쿼리 파라미터
 - `role` (선택): `LEARNER` 또는 `ADMIN`
 - `status` (선택): `ACTIVE` 또는 `INACTIVE`
 - `page` (선택): 페이지 번호 (기본값: 1)
 - `limit` (선택): 페이지당 항목 수 (기본값: 10)
 #### 성공 응답 (200)
 ```json
 {
  "users": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440000",
      "email": "user@example.com",
      "name": "홍길동",
      "role": "LEARNER",
      "status": "ACTIVE",
      ...
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 30,
    "totalPages": 3
  }
 }
 ```
 ---
 ## 2. 교육과정 API
 ### POST /api/courses - 교육과정 생성
 새로운 교육과정을 생성합니다.
 #### 요청
 ```typescript
 const response = await fetch('/api/courses', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    courseName: '웹 개발 기초',
    instructorId: 'instructor-uuid-here',  // 필수: 강사(ADMIN 역할)의 ID
    createdById: 'admin-uuid-here',        // 선택사항: 등록자 ID (기본값: instructorId)
  }),
 });
 const data = await response.json();
 ```
 #### 성공 응답 (201)
 ```json
 {
  "message": "교육과정이 성공적으로 생성되었습니다.",
  "course": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "courseName": "웹 개발 기초",
    "instructorId": "instructor-uuid",
    "createdById": "admin-uuid",
    "createdAt": "2024-11-21T00:00:00.000Z",
    "instructor": {
      "id": "instructor-uuid",
      "name": "최예준",
      "email": "instructor@example.com"
    },
    "createdBy": {
      "id": "admin-uuid",
      "name": "관리자"
    }
  }
 }
 ```
 #### 에러 응답
 **400 Bad Request** - 필수 필드 누락
 ```json
 {
  "error": "교육과정명과 강사 ID는 필수입니다."
 }
 ```
 **404 Not Found** - 강사를 찾을 수 없음
 ```json
 {
  "error": "강사를 찾을 수 없습니다."
 }
 ```
 ### GET /api/courses - 교육과정 목록 조회
 교육과정 목록을 조회합니다.
 #### 요청
 ```typescript
 // 전체 교육과정 조회
 const response = await fetch('/api/courses');
 // 특정 강사의 교육과정 조회
 const response = await fetch('/api/courses?instructorId=instructor-uuid&page=1&limit=10');
 const data = await response.json();
 ```
 #### 쿼리 파라미터
 - `instructorId` (선택): 강사 ID로 필터링
 - `page` (선택): 페이지 번호 (기본값: 1)
 - `limit` (선택): 페이지당 항목 수 (기본값: 10)
 ---
 ## 3. 강좌 API
 ### POST /api/lessons - 강좌 생성
 새로운 강좌를 생성합니다.
 #### 요청
 ```typescript
 const response = await fetch('/api/lessons', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    courseId: 'course-uuid-here',           // 필수: 교육과정 ID
    lessonName: 'HTML 기초',                // 필수: 강좌명
    learningGoal: 'HTML의 기본 문법을 이해하고 활용할 수 있다.', // 선택사항: 학습 목표
    createdById: 'admin-uuid-here',         // 선택사항: 등록자 ID
  }),
 });
 const data = await response.json();
 ```
 #### 성공 응답 (201)
 ```json
 {
  "message": "강좌가 성공적으로 생성되었습니다.",
  "lesson": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "courseId": "course-uuid",
    "lessonName": "HTML 기초",
    "learningGoal": "HTML의 기본 문법을 이해하고 활용할 수 있다.",
    "createdAt": "2024-11-21T00:00:00.000Z",
    "course": {
      "id": "course-uuid",
      "courseName": "웹 개발 기초"
    },
    "createdBy": {
      "id": "admin-uuid",
      "name": "관리자"
    },
    "_count": {
      "videos": 0,
      "vrContents": 0,
      "questions": 0
    }
  }
 }
 ```
 ### GET /api/lessons - 강좌 목록 조회
 강좌 목록을 조회합니다.
 #### 요청
 ```typescript
 // 전체 강좌 조회
 const response = await fetch('/api/lessons');
 // 특정 교육과정의 강좌 조회
 const response = await fetch('/api/lessons?courseId=course-uuid&page=1&limit=10');
 const data = await response.json();
 ```
 ---
 ## 4. 공지사항 API
 ### POST /api/notices - 공지사항 생성
 새로운 공지사항을 생성합니다.
 #### 요청
 ```typescript
 const response = await fetch('/api/notices', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: '공지사항 제목',
    content: '공지사항 내용입니다.\n여러 줄로 작성할 수 있습니다.',
    writerId: 'admin-uuid-here',           // 필수: 작성자 ID
    hasAttachment: false,                   // 선택사항: 첨부파일 여부 (기본값: false)
  }),
 });
 const data = await response.json();
 ```
 #### 성공 응답 (201)
 ```json
 {
  "message": "공지사항이 성공적으로 생성되었습니다.",
  "notice": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "title": "공지사항 제목",
    "content": "공지사항 내용입니다.\n여러 줄로 작성할 수 있습니다.",
    "writerId": "admin-uuid",
    "views": 0,
    "hasAttachment": false,
    "date": "2024-11-21T00:00:00.000Z",
    "writer": {
      "id": "admin-uuid",
      "name": "관리자",
      "email": "admin@example.com"
    }
  }
 }
 ```
 ### GET /api/notices - 공지사항 목록 조회
 공지사항 목록을 조회합니다.
 #### 요청
 ```typescript
 // 전체 공지사항 조회
 const response = await fetch('/api/notices');
 // 특정 작성자의 공지사항 조회
 const response = await fetch('/api/notices?writerId=admin-uuid&page=1&limit=10');
 const data = await response.json();
 ```
 ---
 ## 에러 처리
 모든 API는 일관된 에러 응답 형식을 사용합니다:
 ```typescript
 try {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData),
  });
  if (!response.ok) {
    const error = await response.json();
    console.error('에러:', error.error);
    // 에러 처리 로직
    return;
  }
  const data = await response.json();
  console.log('성공:', data);
 } catch (error) {
  console.error('네트워크 오류:', error);
 }
 ```
 ### HTTP 상태 코드
 - `200` - 성공 (GET 요청)
 - `201` - 생성 성공 (POST 요청)
 - `400` - 잘못된 요청 (필수 필드 누락 등)
 - `404` - 리소스를 찾을 수 없음
 - `409` - 충돌 (중복 데이터 등)
 - `500` - 서버 오류
 ---
 ## 실전 예제
 ### React 컴포넌트에서 사용하기
 ```typescript
 'use client';
 import { useState } from 'react';
 export default function CreateUserForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    name: '',
    role: 'LEARNER',
  });
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');
    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      const data = await response.json();
      if (!response.ok) {
        setMessage(`오류: ${data.error}`);
        return;
      }
      setMessage('사용자가 성공적으로 생성되었습니다!');
      // 폼 초기화
      setFormData({ email: '', password: '', name: '', role: 'LEARNER' });
    } catch (error) {
      setMessage('네트워크 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="이메일"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        required
      />
      <input
        type="password"
        placeholder="비밀번호"
        value={formData.password}
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
        required
      />
      <input
        type="text"
        placeholder="이름"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        required
      />
      <select
        value={formData.role}
        onChange={(e) => setFormData({ ...formData, role: e.target.value })}
      >
        <option value="LEARNER">학습자</option>
        <option value="ADMIN">관리자</option>
      </select>
      <button type="submit" disabled={loading}>
        {loading ? '생성 중...' : '사용자 생성'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
 }
 ```
 ### Server Component에서 사용하기
 ```typescript
 // app/admin/users/page.tsx
 import { prisma } from '@/lib/prisma';
 export default async function UsersPage() {
  const users = await prisma.user.findMany({
    take: 10,
    orderBy: { createdAt: 'desc' },
  });
  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email}) - {user.role}
          </li>
        ))}
      </ul>
    </div>
  );
 }
 ```
 ### cURL로 테스트하기
 ```bash
 # 사용자 생성
 curl -X POST http://localhost:3000/api/users \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "test123",
    "name": "테스트 사용자",
    "role": "LEARNER"
  }'
 # 사용자 목록 조회
 curl http://localhost:3000/api/users?role=LEARNER&page=1&limit=10
 # 교육과정 생성
 curl -X POST http://localhost:3000/api/courses \
  -H "Content-Type: application/json" \
  -d '{
    "courseName": "웹 개발 기초",
    "instructorId": "instructor-uuid-here"
  }'
 ```
 ---
 ## 🔒 보안 고려사항
 1. **비밀번호 해시화**: 실제 프로덕션에서는 bcrypt 등을 사용하여 비밀번호를 해시화해야 합니다.
 2. **인증/인가**: 현재 API는 인증이 없습니다. 프로덕션에서는 JWT 또는 세션 기반 인증을 추가해야 합니다.
 3. **입력 검증**: 클라이언트 측 검증 외에도 서버 측 검증이 필요합니다.
 4. **CORS 설정**: 필요시 CORS 설정을 추가해야 합니다.
 ---
 ## 📚 추가 리소스
 - [Next.js API Routes 문서](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)
 - [Prisma Client 문서](https://www.prisma.io/docs/concepts/components/prisma-client)
--- a/prisma.config.ts
+++ b/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"),
  },
 });
--- a/prisma/README.md
+++ b/prisma/README.md
@@ -1,162 +0,0 @@
 # Prisma 데이터베이스 관리 가이드
 ## 📋 개요
 이 문서는 Prisma를 사용한 데이터베이스 스키마 관리 및 마이그레이션 워크플로우를 설명합니다.
 ## 🚀 개발 환경 워크플로우
 ### 1. 스키마 변경 후 데이터베이스 최신화
 #### 방법 A: 마이그레이션 생성 및 적용 (권장)
 ```bash
 # 1. 스키마 변경 (prisma/schema.prisma 수정)
 # 2. 마이그레이션 생성 및 적용
 npm run db:migrate
 # 마이그레이션 이름을 지정하려면:
 npx prisma migrate dev --name add_new_field
 ```
 이 명령어는:
 - 마이그레이션 파일 생성
 - 데이터베이스에 마이그레이션 적용
 - Prisma Client 자동 재생성
 #### 방법 B: 개발 중 빠른 프로토타이핑 (데이터 손실 가능)
 ```bash
 # 스키마 변경 후 즉시 적용 (마이그레이션 파일 생성 안 함)
 npm run db:push
 ```
 ⚠️ **주의**: `db:push`는 프로덕션 환경에서는 사용하지 마세요!
 ### 2. Seed 데이터 재실행
 ```bash
 # Seed 데이터 삽입
 npm run db:seed
 # 또는 마이그레이션 리셋 후 자동으로 seed 실행
 npm run db:migrate:reset
 ```
 ### 3. 전체 초기화 (개발 환경 전용)
 ```bash
 # 데이터베이스 완전히 리셋 + 마이그레이션 재적용 + seed 실행
 npm run db:migrate:reset
 ```
 ⚠️ **주의**: 모든 데이터가 삭제됩니다!
 ## 📦 프로덕션 환경 워크플로우
 ### 1. 마이그레이션 배포
 ```bash
 # 생성된 마이그레이션 파일들을 프로덕션 DB에 적용
 npm run db:migrate:deploy
 ```
 이 명령어는:
 - 마이그레이션 파일만 적용 (새로운 마이그레이션 생성 안 함)
 - 안전하게 프로덕션에 적용 가능
 ### 2. Prisma Client 재생성
 ```bash
 npm run db:generate
 ```
 ## 🔄 일반적인 워크플로우 시나리오
 ### 시나리오 1: 새로운 필드 추가
 ```bash
 # 1. schema.prisma에 필드 추가
 # 예: model User { ... newField String? }
 # 2. 마이그레이션 생성 및 적용
 npm run db:migrate --name add_new_field
 # 3. (선택) Seed 데이터 업데이트 필요 시
 npm run db:seed
 ```
 ### 시나리오 2: 관계 추가/변경
 ```bash
 # 1. schema.prisma에 관계 추가
 # 2. 마이그레이션 생성
 npm run db:migrate --name add_relation
 # 3. 기존 데이터 마이그레이션 필요 시 수동으로 처리
 ```
 ### 시나리오 3: 개발 중 스키마 실험
 ```bash
 # 빠르게 스키마 변경 테스트 (마이그레이션 파일 생성 안 함)
 npm run db:push
 # 만족스러우면 마이그레이션 생성
 npm run db:migrate --name experimental_changes
 ```
 ## 🛠️ 유용한 명령어
 ### Prisma Studio (데이터베이스 GUI)
 ```bash
 npm run db:studio
 ```
 브라우저에서 데이터베이스를 시각적으로 확인하고 편집할 수 있습니다.
 ### 기존 데이터베이스에서 스키마 가져오기
 ```bash
 npm run db:pull
 ```
 기존 데이터베이스 구조를 분석하여 `schema.prisma`를 생성합니다.
 ## 📝 마이그레이션 파일 관리
 - 마이그레이션 파일은 `prisma/migrations/` 폴더에 저장됩니다
 - 각 마이그레이션은 타임스탬프와 이름으로 식별됩니다
 - 마이그레이션 파일은 Git에 커밋해야 합니다
 - 팀원들과 마이그레이션을 공유하여 동일한 스키마를 유지합니다
 ## ⚠️ 주의사항
 1. **프로덕션 환경**에서는 절대 `db:push`나 `db:migrate:reset`을 사용하지 마세요
 2. **마이그레이션 파일**은 항상 Git에 커밋하세요
 3. **스키마 변경 전**에 백업을 권장합니다
 4. **Seed 데이터**는 개발 환경에서만 사용하세요
 ## 🔍 문제 해결
 ### 마이그레이션 충돌 시
 ```bash
 # 마이그레이션 상태 확인
 npx prisma migrate status
 # 문제 해결 후
 npm run db:migrate:resolve
 ```
 ### Prisma Client가 최신이 아닐 때
 ```bash
 npm run db:generate
 ```
 ## 📚 추가 리소스
 - [Prisma 마이그레이션 가이드](https://www.prisma.io/docs/concepts/components/prisma-migrate)
 - [Prisma CLI 참조](https://www.prisma.io/docs/reference/api-reference/command-reference)
--- a/prisma/migrations/20251121074818_new/migration.sql
+++ b/prisma/migrations/20251121074818_new/migration.sql
@@ -1,311 +0,0 @@
 -- CreateEnum
 CREATE TYPE "UserRole" AS ENUM ('LEARNER', 'ADMIN');
 -- CreateEnum
 CREATE TYPE "UserStatus" AS ENUM ('ACTIVE', 'INACTIVE');
 -- CreateEnum
 CREATE TYPE "QuestionType" AS ENUM ('MULTIPLE_CHOICE', 'SHORT_ANSWER', 'ESSAY');
 -- CreateTable
 CREATE TABLE "users" (
    "id" TEXT NOT NULL,
    "email" TEXT NOT NULL,
    "password" TEXT NOT NULL,
    "name" TEXT NOT NULL,
    "phone" TEXT,
    "gender" TEXT,
    "birthdate" TIMESTAMP(3),
    "role" "UserRole" NOT NULL DEFAULT 'LEARNER',
    "status" "UserStatus" NOT NULL DEFAULT 'ACTIVE',
    "joinDate" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "courses" (
    "id" TEXT NOT NULL,
    "courseName" TEXT NOT NULL,
    "instructorId" TEXT NOT NULL,
    "createdById" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "courses_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "lessons" (
    "id" TEXT NOT NULL,
    "courseId" TEXT NOT NULL,
    "lessonName" TEXT NOT NULL,
    "learningGoal" TEXT,
    "createdById" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "lessons_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "lesson_videos" (
    "id" TEXT NOT NULL,
    "lessonId" TEXT NOT NULL,
    "fileName" TEXT NOT NULL,
    "filePath" TEXT NOT NULL,
    "fileSize" INTEGER NOT NULL,
    "order" INTEGER NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "lesson_videos_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "lesson_vr_contents" (
    "id" TEXT NOT NULL,
    "lessonId" TEXT NOT NULL,
    "fileName" TEXT NOT NULL,
    "filePath" TEXT NOT NULL,
    "fileSize" INTEGER NOT NULL,
    "order" INTEGER NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "lesson_vr_contents_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "lesson_attachments" (
    "id" TEXT NOT NULL,
    "lessonId" TEXT NOT NULL,
    "fileName" TEXT NOT NULL,
    "filePath" TEXT NOT NULL,
    "fileSize" INTEGER NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "lesson_attachments_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "questions" (
    "id" TEXT NOT NULL,
    "lessonId" TEXT,
    "question" TEXT NOT NULL,
    "type" "QuestionType" NOT NULL DEFAULT 'MULTIPLE_CHOICE',
    "options" JSONB,
    "correctAnswer" TEXT NOT NULL,
    "explanation" TEXT,
    "points" INTEGER NOT NULL DEFAULT 1,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "questions_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "notices" (
    "id" TEXT NOT NULL,
    "title" TEXT NOT NULL,
    "content" TEXT NOT NULL,
    "writerId" TEXT NOT NULL,
    "views" INTEGER NOT NULL DEFAULT 0,
    "hasAttachment" BOOLEAN NOT NULL DEFAULT false,
    "date" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "notices_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "notice_attachments" (
    "id" TEXT NOT NULL,
    "noticeId" TEXT NOT NULL,
    "fileName" TEXT NOT NULL,
    "filePath" TEXT NOT NULL,
    "fileSize" INTEGER NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "notice_attachments_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "resources" (
    "id" TEXT NOT NULL,
    "title" TEXT NOT NULL,
    "description" TEXT,
    "filePath" TEXT,
    "fileName" TEXT,
    "fileSize" INTEGER,
    "category" TEXT,
    "views" INTEGER NOT NULL DEFAULT 0,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,
    CONSTRAINT "resources_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "enrollments" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "lessonId" TEXT NOT NULL,
    "progress" INTEGER NOT NULL DEFAULT 0,
    "completedAt" TIMESTAMP(3),
    "enrolledAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "enrollments_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "certificates" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "lessonId" TEXT,
    "courseId" TEXT,
    "verificationKey" TEXT NOT NULL,
    "issuedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "certificates_pkey" PRIMARY KEY ("id")
 );
 -- CreateTable
 CREATE TABLE "logs" (
    "id" TEXT NOT NULL,
    "userId" TEXT,
    "action" TEXT NOT NULL,
    "ipAddress" TEXT,
    "userAgent" TEXT,
    "details" JSONB,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "logs_pkey" PRIMARY KEY ("id")
 );
 -- CreateIndex
 CREATE UNIQUE INDEX "users_email_key" ON "users"("email");
 -- CreateIndex
 CREATE INDEX "users_email_idx" ON "users"("email");
 -- CreateIndex
 CREATE INDEX "users_role_idx" ON "users"("role");
 -- CreateIndex
 CREATE INDEX "users_status_idx" ON "users"("status");
 -- CreateIndex
 CREATE INDEX "courses_instructorId_idx" ON "courses"("instructorId");
 -- CreateIndex
 CREATE INDEX "courses_createdById_idx" ON "courses"("createdById");
 -- CreateIndex
 CREATE INDEX "courses_createdAt_idx" ON "courses"("createdAt");
 -- CreateIndex
 CREATE INDEX "lessons_courseId_idx" ON "lessons"("courseId");
 -- CreateIndex
 CREATE INDEX "lessons_createdById_idx" ON "lessons"("createdById");
 -- CreateIndex
 CREATE INDEX "lessons_createdAt_idx" ON "lessons"("createdAt");
 -- CreateIndex
 CREATE INDEX "lesson_videos_lessonId_idx" ON "lesson_videos"("lessonId");
 -- CreateIndex
 CREATE INDEX "lesson_vr_contents_lessonId_idx" ON "lesson_vr_contents"("lessonId");
 -- CreateIndex
 CREATE INDEX "lesson_attachments_lessonId_idx" ON "lesson_attachments"("lessonId");
 -- CreateIndex
 CREATE INDEX "questions_lessonId_idx" ON "questions"("lessonId");
 -- CreateIndex
 CREATE INDEX "notices_writerId_idx" ON "notices"("writerId");
 -- CreateIndex
 CREATE INDEX "notices_date_idx" ON "notices"("date");
 -- CreateIndex
 CREATE UNIQUE INDEX "notice_attachments_noticeId_key" ON "notice_attachments"("noticeId");
 -- CreateIndex
 CREATE INDEX "resources_category_idx" ON "resources"("category");
 -- CreateIndex
 CREATE INDEX "resources_createdAt_idx" ON "resources"("createdAt");
 -- CreateIndex
 CREATE INDEX "enrollments_userId_idx" ON "enrollments"("userId");
 -- CreateIndex
 CREATE INDEX "enrollments_lessonId_idx" ON "enrollments"("lessonId");
 -- CreateIndex
 CREATE UNIQUE INDEX "enrollments_userId_lessonId_key" ON "enrollments"("userId", "lessonId");
 -- CreateIndex
 CREATE UNIQUE INDEX "certificates_verificationKey_key" ON "certificates"("verificationKey");
 -- CreateIndex
 CREATE INDEX "certificates_userId_idx" ON "certificates"("userId");
 -- CreateIndex
 CREATE INDEX "certificates_verificationKey_idx" ON "certificates"("verificationKey");
 -- CreateIndex
 CREATE INDEX "logs_userId_idx" ON "logs"("userId");
 -- CreateIndex
 CREATE INDEX "logs_action_idx" ON "logs"("action");
 -- CreateIndex
 CREATE INDEX "logs_createdAt_idx" ON "logs"("createdAt");
 -- AddForeignKey
 ALTER TABLE "courses" ADD CONSTRAINT "courses_instructorId_fkey" FOREIGN KEY ("instructorId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "courses" ADD CONSTRAINT "courses_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "lessons" ADD CONSTRAINT "lessons_courseId_fkey" FOREIGN KEY ("courseId") REFERENCES "courses"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "lessons" ADD CONSTRAINT "lessons_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "lesson_videos" ADD CONSTRAINT "lesson_videos_lessonId_fkey" FOREIGN KEY ("lessonId") REFERENCES "lessons"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "lesson_vr_contents" ADD CONSTRAINT "lesson_vr_contents_lessonId_fkey" FOREIGN KEY ("lessonId") REFERENCES "lessons"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "lesson_attachments" ADD CONSTRAINT "lesson_attachments_lessonId_fkey" FOREIGN KEY ("lessonId") REFERENCES "lessons"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "questions" ADD CONSTRAINT "questions_lessonId_fkey" FOREIGN KEY ("lessonId") REFERENCES "lessons"("id") ON DELETE SET NULL ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "notices" ADD CONSTRAINT "notices_writerId_fkey" FOREIGN KEY ("writerId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "notice_attachments" ADD CONSTRAINT "notice_attachments_noticeId_fkey" FOREIGN KEY ("noticeId") REFERENCES "notices"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "enrollments" ADD CONSTRAINT "enrollments_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "enrollments" ADD CONSTRAINT "enrollments_lessonId_fkey" FOREIGN KEY ("lessonId") REFERENCES "lessons"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "certificates" ADD CONSTRAINT "certificates_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "logs" ADD CONSTRAINT "logs_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@@ -1,3 +0,0 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (e.g., Git)
 provider = "postgresql"
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,313 +0,0 @@
 // This is your Prisma schema file,
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
 // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
 generator client {
  provider = "prisma-client-js"
 }
 datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
 }
 // ============================================
 // 사용자 관련 모델
 // ============================================
 /// 사용자 (User)
 /// 권한 설정 페이지, 로그인/회원가입에서 사용
 model User {
  id        String   @id @default(uuid())
  email     String   @unique // 이메일 (아이디로 사용)
  password  String   // 비밀번호 (해시화되어 저장)
  name      String   // 성명
  phone     String?  // 휴대폰 번호
  gender    String?  // 성별 (M/F)
  birthdate DateTime? // 생년월일
  role      UserRole @default(LEARNER) // 권한: 학습자, 관리자
  status    UserStatus @default(ACTIVE) // 계정 상태: 활성화, 비활성화
  joinDate  DateTime @default(now()) // 가입일
  // 관계
  createdCourses Course[] @relation("CourseCreator")
  instructedCourses Course[] @relation("CourseInstructor")
  createdLessons Lesson[] @relation("LessonCreator")
  createdNotices Notice[] @relation("NoticeWriter")
  enrollments    Enrollment[] // 수강 등록
  certificates   Certificate[] // 수료증
  logs           Log[] // 로그 기록
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  @@index([email])
  @@index([role])
  @@index([status])
  @@map("users")
 }
 enum UserRole {
  LEARNER    // 학습자
  ADMIN      // 관리자 (강사 권한 포함)
 }
 enum UserStatus {
  ACTIVE   // 활성화
  INACTIVE // 비활성화
 }
 // ============================================
 // 교육과정 관련 모델
 // ============================================
 /// 교육과정 (Course)
 /// 교육과정 관리 페이지에서 사용
 model Course {
  id            String   @id @default(uuid())
  courseName    String   // 교육과정명
  instructorId  String   // 강사 ID (User의 ADMIN 역할)
  instructor    User     @relation("CourseInstructor", fields: [instructorId], references: [id])
  createdById   String   // 등록자 ID
  createdBy     User     @relation("CourseCreator", fields: [createdById], references: [id])
  createdAt     DateTime @default(now()) // 생성일
  // 관계
  lessons       Lesson[] // 강좌 목록
  updatedAt     DateTime @updatedAt
  @@index([instructorId])
  @@index([createdById])
  @@index([createdAt])
  @@map("courses")
 }
 /// 강좌 (Lesson)
 /// 강좌 관리 페이지에서 사용
 model Lesson {
  id            String   @id @default(uuid())
  courseId      String   // 교육과정 ID
  course        Course   @relation(fields: [courseId], references: [id], onDelete: Cascade)
  lessonName    String   // 강좌명
  learningGoal  String?  @db.Text // 학습 목표 (최대 1000자)
  createdById   String   // 등록자 ID
  createdBy     User     @relation("LessonCreator", fields: [createdById], references: [id])
  createdAt     DateTime @default(now()) // 등록일
  // 관계
  videos        LessonVideo[] // 강좌 영상
  vrContents    LessonVRContent[] // VR 콘텐츠
  questions     Question[] // 학습 평가 문제
  attachments   LessonAttachment[] // 첨부파일
  enrollments   Enrollment[] // 수강 등록
  updatedAt     DateTime @updatedAt
  @@index([courseId])
  @@index([createdById])
  @@index([createdAt])
  @@map("lessons")
 }
 /// 강좌 영상 (LessonVideo)
 /// 강좌 등록 시 첨부되는 영상 파일 (최대 10개, 30MB 미만)
 model LessonVideo {
  id          String   @id @default(uuid())
  lessonId    String   // 강좌 ID
  lesson      Lesson   @relation(fields: [lessonId], references: [id], onDelete: Cascade)
  fileName    String   // 파일명
  filePath    String   // 파일 저장 경로
  fileSize    Int      // 파일 크기 (bytes)
  order       Int      // 순서
  createdAt   DateTime @default(now())
  @@index([lessonId])
  @@map("lesson_videos")
 }
 /// VR 콘텐츠 (LessonVRContent)
 /// 강좌 등록 시 첨부되는 VR 콘텐츠 파일 (최대 10개, 30MB 미만)
 model LessonVRContent {
  id          String   @id @default(uuid())
  lessonId    String   // 강좌 ID
  lesson      Lesson   @relation(fields: [lessonId], references: [id], onDelete: Cascade)
  fileName    String   // 파일명
  filePath    String   // 파일 저장 경로
  fileSize    Int      // 파일 크기 (bytes)
  order       Int      // 순서
  createdAt   DateTime @default(now())
  @@index([lessonId])
  @@map("lesson_vr_contents")
 }
 /// 강좌 첨부파일 (LessonAttachment)
 /// 강좌 관련 기타 첨부파일
 model LessonAttachment {
  id          String   @id @default(uuid())
  lessonId    String   // 강좌 ID
  lesson      Lesson   @relation(fields: [lessonId], references: [id], onDelete: Cascade)
  fileName    String   // 파일명
  filePath    String   // 파일 저장 경로
  fileSize    Int      // 파일 크기 (bytes)
  createdAt   DateTime @default(now())
  @@index([lessonId])
  @@map("lesson_attachments")
 }
 // ============================================
 // 학습 평가 관련 모델
 // ============================================
 /// 문제 (Question)
 /// 문제 은행 페이지에서 사용, 강좌별 학습 평가 문제
 model Question {
  id          String   @id @default(uuid())
  lessonId    String?  // 강좌 ID (선택적, 문제 은행에만 있을 수도 있음)
  lesson      Lesson?  @relation(fields: [lessonId], references: [id], onDelete: SetNull)
  question    String   @db.Text // 문제 내용
  type        QuestionType @default(MULTIPLE_CHOICE) // 문제 유형
  options     Json?    // 선택지 (객관식인 경우)
  correctAnswer String @db.Text // 정답
  explanation String?  @db.Text // 해설
  points      Int      @default(1) // 배점
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  @@index([lessonId])
  @@map("questions")
 }
 enum QuestionType {
  MULTIPLE_CHOICE // 객관식
  SHORT_ANSWER    // 단답형
  ESSAY           // 서술형
 }
 // ============================================
 // 공지사항 관련 모델
 // ============================================
 /// 공지사항 (Notice)
 /// 공지사항 관리 페이지에서 사용
 model Notice {
  id            String   @id @default(uuid())
  title         String   // 제목
  content       String   @db.Text // 내용 (최대 1000자)
  writerId      String   // 작성자 ID
  writer        User     @relation("NoticeWriter", fields: [writerId], references: [id])
  views         Int      @default(0) // 조회수
  hasAttachment Boolean  @default(false) // 첨부파일 여부
  date          DateTime @default(now()) // 게시일
  // 관계
  attachment    NoticeAttachment? // 첨부파일
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  @@index([writerId])
  @@index([date])
  @@map("notices")
 }
 /// 공지사항 첨부파일 (NoticeAttachment)
 /// 공지사항에 첨부되는 파일 (최대 1개, 30MB 미만)
 model NoticeAttachment {
  id          String   @id @default(uuid())
  noticeId    String   @unique // 공지사항 ID
  notice      Notice   @relation(fields: [noticeId], references: [id], onDelete: Cascade)
  fileName    String   // 파일명
  filePath    String   // 파일 저장 경로
  fileSize    Int      // 파일 크기 (bytes)
  createdAt   DateTime @default(now())
  @@map("notice_attachments")
 }
 // ============================================
 // 학습 자료 관련 모델
 // ============================================
 /// 학습 자료 (Resource)
 /// 학습 자료실 페이지에서 사용
 model Resource {
  id          String   @id @default(uuid())
  title       String   // 제목
  description String?  @db.Text // 설명
  filePath    String?  // 파일 경로 (파일이 있는 경우)
  fileName    String?  // 파일명
  fileSize    Int?     // 파일 크기 (bytes)
  category    String?  // 카테고리
  views       Int      @default(0) // 조회수
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  @@index([category])
  @@index([createdAt])
  @@map("resources")
 }
 // ============================================
 // 수강 및 수료 관련 모델
 // ============================================
 /// 수강 등록 (Enrollment)
 /// 사용자가 강좌를 수강하는 관계
 model Enrollment {
  id          String   @id @default(uuid())
  userId      String   // 사용자 ID
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  lessonId    String   // 강좌 ID
  lesson      Lesson   @relation(fields: [lessonId], references: [id], onDelete: Cascade)
  progress    Int      @default(0) // 학습 진행률 (0-100)
  completedAt DateTime? // 완료일
  enrolledAt  DateTime @default(now()) // 등록일
  @@unique([userId, lessonId])
  @@index([userId])
  @@index([lessonId])
  @@map("enrollments")
 }
 /// 수료증 (Certificate)
 /// 수료증 발급/검증키 관리 페이지에서 사용
 model Certificate {
  id          String   @id @default(uuid())
  userId      String   // 사용자 ID
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  lessonId    String?  // 강좌 ID (강좌 완료 시 발급)
  courseId    String?  // 교육과정 ID (과정 완료 시 발급)
  verificationKey String @unique // 검증 키
  issuedAt    DateTime @default(now()) // 발급일
  @@index([userId])
  @@index([verificationKey])
  @@map("certificates")
 }
 // ============================================
 // 로그 관련 모델
 // ============================================
 /// 로그 (Log)
 /// 로그/접속 기록 페이지에서 사용
 model Log {
  id          String   @id @default(uuid())
  userId      String?  // 사용자 ID (로그인한 경우)
  user        User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
  action      String   // 액션 (예: LOGIN, LOGOUT, VIEW_LESSON, etc.)
  ipAddress   String?  // IP 주소
  userAgent   String?  // User Agent
  details     Json?    // 추가 상세 정보
  createdAt   DateTime @default(now()) // 기록 시간
  @@index([userId])
  @@index([action])
  @@index([createdAt])
  @@map("logs")
 }
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,205 +0,0 @@
 import { PrismaClient, UserRole, UserStatus } from '@prisma/client';
 const prisma = new PrismaClient();
 // 간단한 비밀번호 해시 함수 (실제 프로덕션에서는 bcrypt 사용 권장)
 function hashPassword(password: string): string {
  // 개발 환경용 간단한 해시 (실제로는 bcrypt 사용)
  // 모든 사용자의 기본 비밀번호는 "password123"으로 설정
  return '$2a$10$placeholder_hash_for_development_only';
 }
 async function main() {
  console.log('🌱 Seeding database...');
  // 1. 사용자 데이터 생성
  const mockUsers = [
    { id: "1", joinDate: "2024-01-15", name: "김민준", email: "user1@example.com", role: "learner", status: "active" },
    { id: "2", joinDate: "2024-01-20", name: "이서준", email: "user2@example.com", role: "learner", status: "active" },
    { id: "3", joinDate: "2024-02-05", name: "박도윤", email: "user3@example.com", role: "learner", status: "inactive" },
    { id: "4", joinDate: "2024-02-10", name: "최예준", email: "user4@example.com", role: "instructor", status: "active" },
    { id: "5", joinDate: "2024-02-15", name: "정시우", email: "user5@example.com", role: "instructor", status: "active" },
    { id: "6", joinDate: "2024-02-20", name: "강하준", email: "user6@example.com", role: "learner", status: "active" },
    { id: "7", joinDate: "2024-03-01", name: "조주원", email: "user7@example.com", role: "admin", status: "active" },
    { id: "8", joinDate: "2024-03-05", name: "윤지호", email: "user8@example.com", role: "learner", status: "active" },
    { id: "9", joinDate: "2024-03-10", name: "장준서", email: "user9@example.com", role: "learner", status: "inactive" },
    { id: "10", joinDate: "2024-03-15", name: "임건우", email: "user10@example.com", role: "instructor", status: "active" },
    { id: "11", joinDate: "2024-03-20", name: "한서연", email: "user11@example.com", role: "learner", status: "active" },
    { id: "12", joinDate: "2024-04-01", name: "오서윤", email: "user12@example.com", role: "learner", status: "active" },
    { id: "13", joinDate: "2024-04-05", name: "서지우", email: "user13@example.com", role: "instructor", status: "inactive" },
    { id: "14", joinDate: "2024-04-10", name: "신서현", email: "user14@example.com", role: "learner", status: "active" },
    { id: "15", joinDate: "2024-04-15", name: "권민서", email: "user15@example.com", role: "admin", status: "active" },
    { id: "16", joinDate: "2024-04-20", name: "황하은", email: "user16@example.com", role: "learner", status: "active" },
    { id: "17", joinDate: "2024-05-01", name: "안예은", email: "user17@example.com", role: "learner", status: "inactive" },
    { id: "18", joinDate: "2024-05-05", name: "송윤서", email: "user18@example.com", role: "instructor", status: "active" },
    { id: "19", joinDate: "2024-05-10", name: "전채원", email: "user19@example.com", role: "learner", status: "active" },
    { id: "20", joinDate: "2024-05-15", name: "홍지원", email: "user20@example.com", role: "learner", status: "active" },
    { id: "21", joinDate: "2024-05-20", name: "김민수", email: "user21@example.com", role: "instructor", status: "active" },
    { id: "22", joinDate: "2024-06-01", name: "이영희", email: "user22@example.com", role: "learner", status: "active" },
    { id: "23", joinDate: "2024-06-05", name: "박철수", email: "user23@example.com", role: "learner", status: "inactive" },
    { id: "24", joinDate: "2024-06-10", name: "최수진", email: "user24@example.com", role: "admin", status: "active" },
    { id: "25", joinDate: "2024-06-15", name: "정대현", email: "user25@example.com", role: "instructor", status: "active" },
    { id: "26", joinDate: "2024-06-20", name: "강미영", email: "user26@example.com", role: "learner", status: "active" },
    { id: "27", joinDate: "2024-07-01", name: "조성호", email: "user27@example.com", role: "learner", status: "active" },
    { id: "28", joinDate: "2024-07-05", name: "윤지은", email: "user28@example.com", role: "instructor", status: "inactive" },
    { id: "29", joinDate: "2024-07-10", name: "장현우", email: "user29@example.com", role: "learner", status: "active" },
    { id: "30", joinDate: "2024-07-15", name: "임소영", email: "user30@example.com", role: "learner", status: "active" },
  ];
  // 사용자 생성 및 ID 매핑 저장
  const userMap = new Map<string, string>();
  for (const userData of mockUsers) {
    const role = userData.role === 'instructor' ? UserRole.ADMIN : 
                 userData.role === 'admin' ? UserRole.ADMIN : 
                 UserRole.LEARNER;
    const status = userData.status === 'active' ? UserStatus.ACTIVE : UserStatus.INACTIVE;
    const user = await prisma.user.upsert({
      where: { email: userData.email },
      update: {},
      create: {
        email: userData.email,
        password: hashPassword('password123'), // 기본 비밀번호
        name: userData.name,
        role,
        status,
        joinDate: new Date(userData.joinDate),
      },
    });
    userMap.set(userData.id, user.id);
  }
  console.log(`✅ Created ${userMap.size} users`);
  // 관리자 계정 찾기 (공지사항 작성자용)
  const adminUsers = await prisma.user.findMany({
    where: { role: UserRole.ADMIN, status: UserStatus.ACTIVE },
  });
  const defaultAdmin = adminUsers[0];
  // 2. 교육과정 데이터 생성
  const mockCourses = [
    { id: "1", courseName: "웹 개발 기초", instructorName: "최예준", createdAt: "2024-01-15", createdBy: "관리자" },
    { id: "2", courseName: "React 실전 프로젝트", instructorName: "정시우", createdAt: "2024-02-20", createdBy: "관리자" },
    { id: "3", courseName: "데이터베이스 설계", instructorName: "임건우", createdAt: "2024-03-10", createdBy: "관리자" },
    { id: "4", courseName: "Node.js 백엔드 개발", instructorName: "송윤서", createdAt: "2024-03-25", createdBy: "관리자" },
    { id: "5", courseName: "TypeScript 마스터", instructorName: "김민수", createdAt: "2024-04-05", createdBy: "관리자" },
    { id: "6", courseName: "UI/UX 디자인 기초", instructorName: "정대현", createdAt: "2024-04-18", createdBy: "관리자" },
    { id: "7", courseName: "모바일 앱 개발", instructorName: "최예준", createdAt: "2024-05-02", createdBy: "관리자" },
    { id: "8", courseName: "클라우드 인프라", instructorName: "정시우", createdAt: "2024-05-15", createdBy: "관리자" },
    { id: "9", courseName: "머신러닝 입문", instructorName: "임건우", createdAt: "2024-06-01", createdBy: "관리자" },
    { id: "10", courseName: "DevOps 실무", instructorName: "송윤서", createdAt: "2024-06-20", createdBy: "관리자" },
  ];
  const courseMap = new Map<string, string>();
  for (const courseData of mockCourses) {
    // 강사 이름으로 사용자 찾기
    const instructor = await prisma.user.findFirst({
      where: { name: courseData.instructorName, role: UserRole.ADMIN },
    });
    if (!instructor) {
      console.warn(`⚠️  Instructor not found: ${courseData.instructorName}`);
      continue;
    }
    const course = await prisma.course.create({
      data: {
        courseName: courseData.courseName,
        instructorId: instructor.id,
        createdById: defaultAdmin?.id || instructor.id,
        createdAt: new Date(courseData.createdAt),
      },
    });
    courseMap.set(courseData.id, course.id);
  }
  console.log(`✅ Created ${courseMap.size} courses`);
  // 3. 공지사항 데이터 생성
  const mockNotices = [
    {
      id: 2,
      title: '공지사항 제목이 노출돼요',
      date: '2025-09-10',
      views: 1230,
      writer: '문지호',
      content: [
        '사이트 이용 관련 주요 변경 사항을 안내드립니다.',
        '변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
      ],
    },
    {
      id: 1,
      title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
      date: '2025-06-28',
      views: 594,
      writer: '문지호',
      hasAttachment: true,
      content: [
        '온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
        '수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
      ],
    },
  ];
  // 공지사항 작성자 찾기 또는 생성
  let noticeWriter = await prisma.user.findFirst({
    where: { name: '문지호' },
  });
  if (!noticeWriter) {
    noticeWriter = await prisma.user.create({
      data: {
        email: 'munjih@example.com',
        password: hashPassword('password123'),
        name: '문지호',
        role: UserRole.ADMIN,
        status: UserStatus.ACTIVE,
      },
    });
  }
  for (const noticeData of mockNotices) {
    const notice = await prisma.notice.create({
      data: {
        title: noticeData.title,
        content: noticeData.content?.join('\n') || '',
        writerId: noticeWriter.id,
        views: noticeData.views,
        hasAttachment: noticeData.hasAttachment || false,
        date: new Date(noticeData.date),
      },
    });
    // 첨부파일이 있는 경우
    if (noticeData.hasAttachment) {
      await prisma.noticeAttachment.create({
        data: {
          noticeId: notice.id,
          fileName: '공지사항_첨부파일.pdf',
          filePath: '/uploads/notices/sample.pdf',
          fileSize: 1024000, // 1MB
        },
      });
    }
  }
  console.log(`✅ Created ${mockNotices.length} notices`);
  console.log('🎉 Seeding completed!');
 }
 main()
  .catch((e) => {
    console.error('❌ Error seeding database:', e);
    process.exit(1);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });
--- a/src/app/NavBar.tsx
+++ b/src/app/NavBar.tsx
@@ -2,9 +2,10 @@
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import { usePathname } from "next/navigation";
+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,13 +13,94 @@ 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(() => {
    let isMounted = true;
    async function fetchUserInfo() {
      try {
        // localStorage와 쿠키 모두에서 토큰 확인
        const localStorageToken = localStorage.getItem('token');
        const cookieToken = document.cookie
          .split('; ')
          .find(row => row.startsWith('token='))
          ?.split('=')[1];
        const token = localStorageToken || cookieToken;
        if (!token) {
          return;
        }
        // localStorage에 토큰이 없고 쿠키에만 있으면 localStorage에도 저장 (동기화)
        if (!localStorageToken && cookieToken) {
          localStorage.setItem('token', cookieToken);
        }
        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 && pathname !== '/login') {
            router.push('/login');
          }
          return;
        }
        const data = response.data;
        // 계정 상태 확인
        const userStatus = data.status || data.userStatus;
        if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
          // 비활성화된 계정인 경우 로그아웃 처리
          localStorage.removeItem('token');
          document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
          // 로그인 페이지가 아닐 때만 리다이렉트
          if (isMounted && pathname !== '/login') {
            router.push('/login');
          }
          return;
        }
        if (isMounted) {
          const role = data.role || data.userRole || '';
          setUserRole(role);
          if (data.name) {
            setUserName(data.name);
          }
        }
      } catch (error) {
        console.error('사용자 정보 조회 오류:', error);
      }
    }
    fetchUserInfo();
    return () => {
      isMounted = false;
    };
  }, [router, pathname]);
  useEffect(() => {
    if (!isUserMenuOpen) return;
@@ -48,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 (
@@ -69,14 +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">
+              <button
-                내 정보
+                ref={userButtonRef}
-              </Link>
+                type="button"
-              <Link href="/login" className="px-4 py-2 text-[16px] font-semibold text-white">
+                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';
                    }}
                  >
                    로그아웃
-              </Link>
+                  </button>
                </div>
              )}
            </>
          ) : (
            <>
@@ -91,7 +231,7 @@ export default function NavBar() {
                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}
@@ -108,14 +248,23 @@ export default function NavBar() {
                  <Link
                    role="menuitem"
                    href="/menu/account"
-                    className="block w-full 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"
+                    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-nonq"
                    onClick={() => setIsUserMenuOpen(false)}
                  >
                    내 정보 수정
                  </Link>
                  <button
                    role="menuitem"
-                    className="w-full 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"
+                    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>
--- a/src/app/admin/banner/BannerRegistrationModal.tsx
+++ b/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>
      )}
    </>
  );
 }
--- a/src/app/admin/banner/page.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/courses/CourseRegistrationModal.tsx
+++ b/src/app/admin/courses/CourseRegistrationModal.tsx
@@ -3,8 +3,10 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import ModalCloseSvg from "@/app/svgs/closexsvg";
 import DropdownIcon from "@/app/svgs/dropdownicon";
-import { getInstructors, type UserRow } from "@/app/admin/id/mockData";
+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;
@@ -20,28 +22,141 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  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 dropdownRef = useRef<HTMLDivElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  // 강사 목록 가져오기
-  // TODO: 나중에 DB에서 가져오도록 변경 시 async/await 사용
+  const [instructors, setInstructors] = useState<UserRow[]>([]);
-  // 예: const [instructors, setInstructors] = useState<UserRow[]>([]);
+  const [isLoadingInstructors, setIsLoadingInstructors] = useState(false);
-  //     useEffect(() => { getInstructors().then(setInstructors); }, []);
+  
-  const instructors = useMemo(() => getInstructors(), []);
+  // 강사 목록 로드 함수
  const loadInstructors = async () => {
    if (isLoadingInstructors) return; // 이미 로딩 중이면 중복 호출 방지
    setIsLoadingInstructors(true);
    try {
      // 외부 API 호출 - type이 'ADMIN'인 사용자만 조회
      const response = await apiService.getUsersCompact({ type: 'ADMIN', limit: 10 });
      const data = response.data;
      // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
      let usersArray: any[] = [];
      if (Array.isArray(data)) {
        usersArray = data;
      } else if (data && typeof data === 'object') {
        usersArray = data.items || data.users || data.data || data.list || [];
      }
      // 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];
                }
              };
              // 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,
              };
            })
        : [];
      setInstructors(transformedUsers);
    } catch (error) {
      console.error('강사 목록 로드 오류:', error);
      setInstructors([]);
    } finally {
      setIsLoadingInstructors(false);
    }
  };
  // 선택된 강사 정보
  const selectedInstructor = useMemo(() => {
    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);
-      // 강사명으로 instructorId 찾기
+      // 수정 모드일 때 강사 목록 자동 로드
-      const instructor = instructors.find(inst => inst.name === editingCourse.instructorName);
+      loadInstructors();
-      if (instructor) {
+      
-        setInstructorId(instructor.id);
+      // 수정 모드일 때 이미지 로드
      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("");
@@ -49,6 +164,21 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
      setIsDropdownOpen(false);
      setErrors({});
      setIsDeleteConfirmOpen(false);
      setSelectedImage(null);
      setPreviewUrl(null);
      setIsDragging(false);
      setIsImageDeleted(false);
      setInstructors([]); // 모달 닫을 때 강사 목록 초기화
    }
  }, [open, editingCourse]);
  // instructors가 로드된 후 editingCourse의 강사 찾기
  useEffect(() => {
    if (open && editingCourse && instructors.length > 0) {
      const instructor = instructors.find(inst => inst.name === editingCourse.instructorName);
      if (instructor) {
        setInstructorId(instructor.id);
      }
    }
  }, [open, editingCourse, instructors]);
@@ -78,7 +208,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
  };
  // 저장 버튼 클릭 핸들러
-  const handleSave = () => {
+  const handleSave = async () => {
    const nextErrors: Record<string, string> = {};
    if (!courseName.trim()) {
@@ -94,22 +224,180 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
      return;
    }
    if (isSaving) return; // 이미 저장 중이면 중복 호출 방지
    // selectedInstructor가 없으면 종료
    if (!selectedInstructor) {
      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);
          // 응답에서 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 : '이미지 업로드 중 오류가 발생했습니다.';
          console.error('이미지 업로드 오류:', errorMessage);
          setErrors((prev) => ({ 
            ...prev, 
            image: '이미지 업로드 중 오류가 발생했습니다. 이미지 없이 계속 진행됩니다.',
          }));
          // 이미지 업로드 오류 발생해도 계속 진행 (선택사항)
        }
      }
      const requestBody: {
        title: string;
        instructor: string;
        imageKey?: string;
      } = {
        title: courseName.trim(),
        instructor: selectedInstructor.name,
      };
      // 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;
        }
      }
      // 수정 모드인지 등록 모드인지 확인
      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);
      setErrors({ submit: errorMessage });
    } finally {
      setIsSaving(false);
    }
  };
  // 삭제 버튼 클릭 핸들러
-  const handleDeleteClick = () => {
+  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsDeleteConfirmOpen(true);
  };
  // 삭제 확인 핸들러
-  const handleDeleteConfirm = () => {
+  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();
-      setIsDeleteConfirmOpen(false);
+      }
      onClose();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '교육과정 삭제 중 오류가 발생했습니다.';
      console.error('교육과정 삭제 실패:', errorMessage);
      setErrors({ submit: errorMessage });
    } finally {
      setIsDeleting(false);
    }
  };
@@ -118,9 +406,116 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
    setIsDeleteConfirmOpen(false);
  };
-  if (!open) return null;
+  // 파일 유효성 검사
  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}
@@ -135,10 +530,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
            className="relative z-10 shadow-xl"
            onClick={handleModalClick}
          >
-        <div className="bg-white border border-[#dee1e6] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
+            <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-[1.5] text-[#333c47]">
+            <h2 className="text-[20px] font-bold leading-normal text-[var(--color-neutral-700)]">
              {editingCourse ? "교육과정 수정" : "과목 등록"}
            </h2>
            <button
@@ -156,8 +551,8 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
            <div className="flex flex-col gap-6">
              {/* 교육 과정명 */}
              <div className="flex flex-col gap-2">
-                <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
-                  교육 과정명<span className="text-[#f64c4c]">*</span>
+                  교육 과정명<span className="text-[var(--color-error)]">*</span>
                </label>
                <input
                  type="text"
@@ -173,45 +568,56 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                    }
                  }}
                  placeholder="교육 과정명을 입력해 주세요."
-                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none ${
+                  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.courseName
-                      ? "border-[#f64c4c] focus:shadow-[inset_0_0_0_1px_#333c47]"
+                      ? "border-[var(--color-error)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
-                      : "border-[#dee1e6] focus:shadow-[inset_0_0_0_1px_#333c47]"
+                      : "border-[var(--color-neutral-40)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
                  }`}
                />
                {errors.courseName && (
-                  <p className="text-[#f64c4c] text-[13px] leading-tight">{errors.courseName}</p>
+                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.courseName}</p>
                )}
              </div>
              {/* 강사 */}
              <div className="flex flex-col gap-2">
-                <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
-                  강사<span className="text-[#f64c4c]">*</span>
+                  강사<span className="text-[var(--color-error)]">*</span>
                </label>
                <div className="relative" ref={dropdownRef}>
                  <button
                    type="button"
-                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                    onClick={async () => {
-                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
+                      const willOpen = !isDropdownOpen;
                      setIsDropdownOpen(willOpen);
                      // 드롭다운을 열 때만 API 호출
                      if (willOpen) {
                        await loadInstructors();
                      }
                    }}
                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] cursor-pointer ${
                      errors.instructor
-                        ? "border-[#f64c4c]"
+                        ? "border-border-error"
-                        : "border-[#dee1e6]"
+                        : "border-[var(--color-neutral-40)]"
                    }`}
                  >
                    <span
-                      className={`text-[16px] font-normal leading-[1.5] flex-1 ${
+                      className={`text-[16px] font-normal leading-normal flex-1 ${
-                        selectedInstructor ? "text-[#1b2027]" : "text-[#6c7682]"
+                        selectedInstructor ? "text-[var(--color-text-title)]" : "text-[var(--color-text-label)]"
                      }`}
                    >
                      {selectedInstructor?.name || "강사를 선택해 주세요."}
                    </span>
-                    <DropdownIcon stroke="#8C95A1" className="shrink-0" />
+                    <DropdownIcon stroke="var(--color-text-meta)" className="shrink-0" />
                  </button>
                  {isDropdownOpen && (
-                    <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto">
+                    <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[var(--color-neutral-40)] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto">
-                      {instructors.length === 0 ? (
+                      {isLoadingInstructors ? (
-                        <div className="px-3 py-2 text-[16px] font-normal leading-[1.5] text-[#6c7682] text-center">
+                        <div className="px-3 py-2 text-[16px] font-normal leading-normal text-[var(--color-text-label)] text-center">
                          로딩 중...
                        </div>
                      ) : instructors.length === 0 ? (
                        <div className="px-3 py-2 text-[16px] font-normal leading-normal text-[var(--color-text-label)] text-center">
                          등록된 강사가 없습니다.
                        </div>
                      ) : (
@@ -230,10 +636,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                                });
                              }
                            }}
-                            className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors cursor-pointer ${
+                            className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-normal hover:bg-[var(--color-bg-gray-light)] transition-colors cursor-pointer ${
                              instructorId === instructor.id
-                                ? "bg-[#ecf0ff] text-[#1f2b91] font-semibold"
+                                ? "bg-[var(--color-bg-primary-light)] text-[var(--color-active-button)] font-semibold"
-                                : "text-[#1b2027]"
+                                : "text-[var(--color-text-title)]"
                            } ${
                              index === 0 ? "rounded-t-[8px]" : ""
                            } ${
@@ -248,7 +654,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                  )}
                </div>
                {errors.instructor && (
-                  <p className="text-[#f64c4c] text-[13px] leading-tight">{errors.instructor}</p>
+                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.instructor}</p>
                )}
              </div>
@@ -256,15 +662,64 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
              <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-[1.5] text-[#6c7682] whitespace-pre">
+                    <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-[#8c95a1]">
+                    <span className="text-[13px] font-normal leading-[1.4] text-[var(--color-text-meta)]">
                      30MB 미만의 PNG, JPG
                    </span>
                  </div>
                </div>
-                <div className="bg-gray-50 border border-[#dee1e6] border-dashed h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer hover:bg-gray-100 transition-colors px-0 py-4">
+                <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"
@@ -275,7 +730,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                        >
                          <path
                            d="M20 13.3333V26.6667M13.3333 20H26.6667"
-                        stroke="#8C95A1"
+                            stroke="var(--color-text-meta)"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
@@ -283,16 +738,28 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                        </svg>
                      </div>
                      <div className="text-center">
-                    <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] whitespace-pre">
+                        <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">
@@ -301,7 +768,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                <button
                  type="button"
                  onClick={handleDeleteClick}
-                  className="h-[48px] px-4 rounded-[10px] bg-[#fef2f2] text-[16px] font-semibold leading-[1.5] text-[#f64c4c] w-[136px] hover:bg-[#fae6e6] transition-colors cursor-pointer"
+                  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>
@@ -309,21 +776,24 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
              <button
                type="button"
                onClick={onClose}
-                className="h-[48px] px-4 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[136px] hover:bg-[#e5e7eb] transition-colors cursor-pointer"
+                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}
-                className="h-[48px] px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white w-[136px] hover:bg-[#1a2478] transition-colors cursor-pointer"
+                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 && (
@@ -333,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-[1.5] text-[#333c47]">
+              <div className="flex gap-[8px] items-start w-full">
-                교육과정을 삭제하시겠습니까?
+                <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
-              </h2>
+                  강좌를 삭제하시겠습니까?
              <p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
                삭제된 교육과정은 복구할 수 없습니다.
                <br />
                정말 삭제하시겠습니까?
                </p>
              </div>
-            <div className="flex gap-2 items-center justify-end">
+              <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="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] hover:bg-[#e5e7eb] 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-[1.5] text-[#f64c4c] 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>
+    </>
  );
 }
--- a/src/app/admin/courses/mockData.ts
+++ b/src/app/admin/courses/mockData.ts
@@ -1,4 +1,4 @@
-import { getInstructors } from "@/app/admin/id/mockData";
+import apiService from "@/app/lib/apiService";
 export type Course = {
  id: string;
@@ -7,97 +7,82 @@ export type Course = {
  createdAt: string; // 생성일 (YYYY-MM-DD)
  createdBy: string; // 등록자
  hasLessons: boolean; // 강좌포함여부
  imageKey?: string; // 이미지 키
 };
-// TODO: 나중에 DB에서 가져오도록 변경
+// 과목 리스트 조회 API
-export const MOCK_CURRENT_USER = "관리자"; // 현재 로그인한 사용자 이름
+export async function getCourses(): Promise<Course[]> {
  try {
    // 교육과정과 강좌 리스트를 동시에 가져오기
    const [subjectsResponse, lecturesResponse] = await Promise.all([
      apiService.getSubjects(),
      apiService.getLectures().catch(() => ({ data: [] })), // 강좌 리스트 조회 실패 시 빈 배열 반환
    ]);
-// 강사 목록 가져오기
+    const subjectsData = subjectsResponse.data;
-const instructors = getInstructors();
+    const lecturesData = lecturesResponse.data || [];
 const instructorNames = instructors.map(instructor => instructor.name);
-// TODO: 이 부분도 나중에는 db에서 받아오도록 변경 예정
+    // 디버깅: API 응답 구조 확인
-// 임시 데이터 - 강사명은 mockData.ts의 강사 데이터 활용
+    console.log('🔍 [getCourses] API 원본 응답:', subjectsData);
-export const MOCK_COURSES: Course[] = [
+    console.log('🔍 [getCourses] 응답 타입:', Array.isArray(subjectsData) ? '배열' : typeof subjectsData);
-  {
+    console.log('🔍 [getCourses] 강좌 리스트:', lecturesData);
    id: "1",
    courseName: "웹 개발 기초",
    instructorName: instructorNames[0] || "최예준",
    createdAt: "2024-01-15",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "2",
    courseName: "React 실전 프로젝트",
    instructorName: instructorNames[1] || "정시우",
    createdAt: "2024-02-20",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "3",
    courseName: "데이터베이스 설계",
    instructorName: instructorNames[2] || "임건우",
    createdAt: "2024-03-10",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "4",
    courseName: "Node.js 백엔드 개발",
    instructorName: instructorNames[3] || "송윤서",
    createdAt: "2024-03-25",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "5",
    courseName: "TypeScript 마스터",
    instructorName: instructorNames[4] || "김민수",
    createdAt: "2024-04-05",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "6",
    courseName: "UI/UX 디자인 기초",
    instructorName: instructorNames[5] || "정대현",
    createdAt: "2024-04-18",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "7",
    courseName: "모바일 앱 개발",
    instructorName: instructorNames[0] || "최예준",
    createdAt: "2024-05-02",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "8",
    courseName: "클라우드 인프라",
    instructorName: instructorNames[1] || "정시우",
    createdAt: "2024-05-15",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "9",
    courseName: "머신러닝 입문",
    instructorName: instructorNames[2] || "임건우",
    createdAt: "2024-06-01",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
  {
    id: "10",
    courseName: "DevOps 실무",
    instructorName: instructorNames[3] || "송윤서",
    createdAt: "2024-06-20",
    createdBy: MOCK_CURRENT_USER,
    hasLessons: false,
  },
 ];
    // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
    let coursesArray: any[] = [];
    if (Array.isArray(subjectsData)) {
      coursesArray = subjectsData;
    } else if (subjectsData && typeof subjectsData === 'object') {
      // 더 많은 가능한 필드명 확인
      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: 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: hasLessons,
        imageKey: item.imageKey || item.image_key || item.fileKey || item.file_key || undefined,
      };
      console.log('🔍 [getCourses] 변환된 항목:', transformed);
      return transformed;
    });
    console.log('🔍 [getCourses] 최종 변환된 배열:', transformedCourses);
    console.log('🔍 [getCourses] 최종 배열 길이:', transformedCourses.length);
    return transformedCourses;
  } catch (error) {
    console.error('과목 리스트 조회 오류:', error);
    return [];
  }
 }
--- a/src/app/admin/courses/page.tsx
+++ b/src/app/admin/courses/page.tsx
@@ -1,17 +1,58 @@
 'use client';
-import { useState, useMemo } 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 { MOCK_COURSES, MOCK_CURRENT_USER, type Course } from "./mockData";
+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[]>(MOCK_COURSES);
+  const [courses, setCourses] = useState<Course[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  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(() => {
    async function fetchCourses() {
      try {
        setIsLoading(true);
        const data = await getCourses();
        console.log('📋 [AdminCoursesPage] 받은 데이터:', data);
        console.log('📋 [AdminCoursesPage] 데이터 개수:', data.length);
        setCourses(data);
      } catch (error) {
        console.error('과목 리스트 로드 오류:', error);
        setCourses([]);
      } finally {
        setIsLoading(false);
      }
    }
    fetchCourses();
  }, []);
  const totalCount = useMemo(() => courses.length, [courses]);
@@ -30,26 +71,8 @@ export default function AdminCoursesPage() {
    return sortedCourses.slice(startIndex, endIndex);
  }, [sortedCourses, currentPage]);
-  const handleSaveCourse = (courseName: string, instructorName: string) => {
+  const handleSaveCourse = async (courseName: string, instructorName: string) => {
-    if (editingCourse) {
+    shouldRefreshRef.current = true; // 새로고침 플래그 설정
      // 수정 모드
      setCourses(prev => prev.map(course => 
        course.id === editingCourse.id
          ? { ...course, courseName, instructorName }
          : course
      ));
    } else {
      // 등록 모드
      const newCourse: Course = {
        id: String(Date.now()),
        courseName,
        instructorName,
        createdAt: new Date().toISOString().split('T')[0],
        createdBy: MOCK_CURRENT_USER,
        hasLessons: false, // 기본값: 미포함
      };
      setCourses(prev => [...prev, newCourse]);
    }
    setIsModalOpen(false);
    setEditingCourse(null);
  };
@@ -69,17 +92,39 @@ export default function AdminCoursesPage() {
    setIsModalOpen(true);
  };
-  const handleDeleteCourse = () => {
+  const handleDeleteCourse = async () => {
-    if (editingCourse) {
+    shouldRefreshRef.current = true; // 새로고침 플래그 설정
      setCourses(prev => prev.filter(course => course.id !== editingCourse.id));
    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">
      {/* 메인 레이아웃 */}
@@ -115,7 +160,13 @@ export default function AdminCoursesPage() {
              {/* 콘텐츠 영역 */}
              <div className="flex-1 pt-2 flex flex-col">
-                {courses.length === 0 ? (
+                {isLoading ? (
                  <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] text-center">
                      로딩 중...
                    </p>
                  </div>
                ) : courses.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] text-center">
                      등록된 교육과정이 없습니다.
@@ -128,18 +179,16 @@ export default function AdminCoursesPage() {
                    <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
                      <table className="min-w-full border-collapse">
                        <colgroup>
-                          <col />
+                          <col style={{ width: '40%' }} />
-                          <col />
+                          <col style={{ width: '25%' }} />
-                          <col style={{ width: 140 }} />
+                          <col style={{ width: '20%' }} />
-                          <col />
+                          <col style={{ width: '15%' }} />
                          <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-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌포함여부</th>
                          </tr>
                        </thead>
@@ -157,10 +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-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.createdBy}
                              </td>
                              <td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.hasLessons ? (
--- a/src/app/admin/id/mockData.ts
+++ b/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';
@@ -10,48 +12,85 @@ export type UserRow = {
  status: AccountStatus;
 };
-// 임시 데이터
+// 더미 데이터 제거됨 - 이제 API에서 데이터를 가져옵니다
 export const mockUsers: UserRow[] = [
  { id: "1", joinDate: "2024-01-15", name: "김민준", email: "user1@example.com", role: "learner", status: "active" },
  { id: "2", joinDate: "2024-01-20", name: "이서준", email: "user2@example.com", role: "learner", status: "active" },
  { id: "3", joinDate: "2024-02-05", name: "박도윤", email: "user3@example.com", role: "learner", status: "inactive" },
  { id: "4", joinDate: "2024-02-10", name: "최예준", email: "user4@example.com", role: "instructor", status: "active" },
  { id: "5", joinDate: "2024-02-15", name: "정시우", email: "user5@example.com", role: "instructor", status: "active" },
  { id: "6", joinDate: "2024-02-20", name: "강하준", email: "user6@example.com", role: "learner", status: "active" },
  { id: "7", joinDate: "2024-03-01", name: "조주원", email: "user7@example.com", role: "admin", status: "active" },
  { id: "8", joinDate: "2024-03-05", name: "윤지호", email: "user8@example.com", role: "learner", status: "active" },
  { id: "9", joinDate: "2024-03-10", name: "장준서", email: "user9@example.com", role: "learner", status: "inactive" },
  { id: "10", joinDate: "2024-03-15", name: "임건우", email: "user10@example.com", role: "instructor", status: "active" },
  { id: "11", joinDate: "2024-03-20", name: "한서연", email: "user11@example.com", role: "learner", status: "active" },
  { id: "12", joinDate: "2024-04-01", name: "오서윤", email: "user12@example.com", role: "learner", status: "active" },
  { id: "13", joinDate: "2024-04-05", name: "서지우", email: "user13@example.com", role: "instructor", status: "inactive" },
  { id: "14", joinDate: "2024-04-10", name: "신서현", email: "user14@example.com", role: "learner", status: "active" },
  { id: "15", joinDate: "2024-04-15", name: "권민서", email: "user15@example.com", role: "admin", status: "active" },
  { id: "16", joinDate: "2024-04-20", name: "황하은", email: "user16@example.com", role: "learner", status: "active" },
  { id: "17", joinDate: "2024-05-01", name: "안예은", email: "user17@example.com", role: "learner", status: "inactive" },
  { id: "18", joinDate: "2024-05-05", name: "송윤서", email: "user18@example.com", role: "instructor", status: "active" },
  { id: "19", joinDate: "2024-05-10", name: "전채원", email: "user19@example.com", role: "learner", status: "active" },
  { id: "20", joinDate: "2024-05-15", name: "홍지원", email: "user20@example.com", role: "learner", status: "active" },
  { id: "21", joinDate: "2024-05-20", name: "김민수", email: "user21@example.com", role: "instructor", status: "active" },
  { id: "22", joinDate: "2024-06-01", name: "이영희", email: "user22@example.com", role: "learner", status: "active" },
  { id: "23", joinDate: "2024-06-05", name: "박철수", email: "user23@example.com", role: "learner", status: "inactive" },
  { id: "24", joinDate: "2024-06-10", name: "최수진", email: "user24@example.com", role: "admin", status: "active" },
  { id: "25", joinDate: "2024-06-15", name: "정대현", email: "user25@example.com", role: "instructor", status: "active" },
  { id: "26", joinDate: "2024-06-20", name: "강미영", email: "user26@example.com", role: "learner", status: "active" },
  { id: "27", joinDate: "2024-07-01", name: "조성호", email: "user27@example.com", role: "learner", status: "active" },
  { id: "28", joinDate: "2024-07-05", name: "윤지은", email: "user28@example.com", role: "instructor", status: "inactive" },
  { id: "29", joinDate: "2024-07-10", name: "장현우", email: "user29@example.com", role: "learner", status: "active" },
  { id: "30", joinDate: "2024-07-15", name: "임소영", email: "user30@example.com", role: "learner", status: "active" },
 ];
-// 강사 목록 가져오기 함수 export
+// 강사 목록 가져오기 함수 - API에서 가져오기
-// TODO: 나중에 DB에서 가져오도록 변경 예정
+export async function getInstructors(): Promise<UserRow[]> {
-// 예: export async function getInstructors(): Promise<UserRow[]> {
+  try {
-//     const response = await fetch('/api/instructors');
+    const token = typeof window !== 'undefined' 
-//     return response.json();
+      ? (localStorage.getItem('token') || document.cookie
-//   }
+          .split('; ')
-export function getInstructors(): UserRow[] {
+          .find(row => row.startsWith('token='))
-  // 현재는 mock 데이터 사용, 나중에 DB에서 가져오도록 변경
+          ?.split('=')[1])
-  return mockUsers.filter(user => user.role === 'instructor' && user.status === 'active');
+      : null;
    const response = await apiService.getUsersCompact();
    const data = response.data;
    console.log('📦 [getInstructors] 원본 API 응답 데이터:', {
      type: typeof data,
      isArray: Array.isArray(data),
      length: Array.isArray(data) ? data.length : 'N/A',
      data: data,
      sampleItem: Array.isArray(data) && data.length > 0 ? data[0] : null
    });
    // API 응답 데이터를 UserRow 형식으로 변환하고 강사만 필터링 (null 값도 표시)
    const users: UserRow[] = Array.isArray(data) 
      ? data
          .map((user: any, index: number) => {
            // null 값을 명시적으로 처리 (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);
            };
            const transformed = {
              id: getValue(user.id || user.userId, `user-${index + 1}`),
              joinDate: getValue(user.joinDate || user.createdAt || user.join_date, new Date().toISOString().split('T')[0]),
              name: getValue(user.name || user.userName, '(없음)'),
              email: getValue(user.email || user.userEmail, '(없음)'),
              role: (user.role === 'instructor' || user.role === 'INSTRUCTOR' ? 'instructor' :
                     user.role === 'admin' || user.role === 'ADMIN' ? 'admin' : 'learner') as RoleType,
              status: (user.status === 'inactive' || user.status === 'INACTIVE' ? 'inactive' : 'active') as AccountStatus,
            };
            // 모든 항목의 null 체크
            console.log(`🔎 [getInstructors] [${index + 1}번째] 사용자 데이터 변환:`, {
              원본: user,
              변환됨: transformed,
              null체크: {
                id: user.id === null || user.id === undefined,
                userId: user.userId === null || user.userId === undefined,
                joinDate: user.joinDate === null || user.joinDate === undefined,
                createdAt: user.createdAt === null || user.createdAt === undefined,
                join_date: user.join_date === null || user.join_date === undefined,
                name: user.name === null || user.name === undefined,
                userName: user.userName === null || user.userName === undefined,
                email: user.email === null || user.email === undefined,
                userEmail: user.userEmail === null || user.userEmail === undefined,
                role: user.role === null || user.role === undefined,
                status: user.status === null || user.status === undefined,
              }
            });
            return transformed;
          })
          .filter((user: UserRow) => user.role === 'admin' && user.status === 'active')
      : [];
    console.log('✅ [getInstructors] 변환된 강사 데이터:', {
      총개수: users.length,
      필터링전개수: Array.isArray(data) ? data.length : 0,
      데이터: users,
      빈배열여부: users.length === 0
    });
    return users;
  } catch (error) {
    console.error('강사 목록 가져오기 오류:', error);
    return [];
  }
 }
--- a/src/app/admin/id/page.tsx
+++ b/src/app/admin/id/page.tsx
@@ -2,9 +2,9 @@
 import { useState, useEffect, useRef, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import DropdownIcon from "@/app/svgs/dropdownicon";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
-import { mockUsers, type UserRow } from "./mockData";
+import { type UserRow } from "./mockData";
 import apiService from "@/app/lib/apiService";
 type TabType = 'all' | 'learner' | 'instructor' | 'admin';
 type RoleType = 'learner' | 'instructor' | 'admin';
@@ -24,7 +24,9 @@ const statusLabels: Record<AccountStatus, string> = {
 export default function AdminIdPage() {
  const [activeTab, setActiveTab] = useState<TabType>('all');
-  const [users, setUsers] = useState<UserRow[]>(mockUsers);
+  const [users, setUsers] = useState<UserRow[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
  const [isActivateModalOpen, setIsActivateModalOpen] = useState(false);
  const [isDeactivateModalOpen, setIsDeactivateModalOpen] = useState(false);
@@ -32,10 +34,92 @@ export default function AdminIdPage() {
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [deactivateReason, setDeactivateReason] = useState('');
  const dropdownRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
  const ITEMS_PER_PAGE = 10;
  // API에서 사용자 데이터 가져오기
  useEffect(() => {
    async function fetchUsers() {
      try {
        setIsLoading(true);
        setError(null);
        // 외부 API 호출
        const response = await apiService.getUsersCompact();
        const data = response.data;
        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
        let usersArray: any[] = [];
        if (Array.isArray(data)) {
          usersArray = data;
        } else if (data && typeof data === 'object') {
          usersArray = data.items || data.users || data.data || data.list || [];
        }
        // 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];
                }
              };
              // 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: AccountStatus = 
                user.status === 'ACTIVE' || user.status === 'active' ? 'active' : 'inactive';
              // role 데이터 처리 (API에서 role이 없을 수 있음)
              let userRole: RoleType = '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,
              };
            })
          : [];
        setUsers(transformedUsers);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : '사용자 데이터를 불러오는 중 오류가 발생했습니다.';
        setError(errorMessage);
        console.error('사용자 데이터 로드 오류:', err);
      } finally {
        setIsLoading(false);
      }
    }
    fetchUsers();
  }, [currentPage]);
  const filteredUsers = useMemo(() => {
    return activeTab === 'all' 
      ? users 
@@ -76,13 +160,35 @@ export default function AdminIdPage() {
    setIsActivateModalOpen(true);
  }
-  function handleActivateConfirm() {
+  async function handleActivateConfirm() {
-    if (selectedUserId) {
+    if (!selectedUserId) {
      setIsActivateModalOpen(false);
      setSelectedUserId(null);
      return;
    }
    try {
      // selectedUserId로 사용자 찾기
      const user = users.find(u => u.id === selectedUserId);
      if (!user || !user.email || user.email === '-') {
        setToastMessage('사용자 정보를 찾을 수 없습니다.');
        setShowToast(true);
        setTimeout(() => {
          setShowToast(false);
        }, 3000);
        setIsActivateModalOpen(false);
        setSelectedUserId(null);
        return;
      }
      await apiService.unsuspendUser(selectedUserId);
      // API 호출 성공 시 로컬 상태 업데이트
      setUsers(prevUsers => 
-        prevUsers.map(user => 
+        prevUsers.map(u => 
-          user.id === selectedUserId 
+          u.id === selectedUserId 
-            ? { ...user, status: 'active' }
+            ? { ...u, status: 'active' }
-            : user
+            : u
        )
      );
      setToastMessage('계정을 활성화했습니다.');
@@ -90,10 +196,19 @@ export default function AdminIdPage() {
      setTimeout(() => {
        setShowToast(false);
      }, 3000);
-    }
+    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '계정 활성화 중 오류가 발생했습니다.';
      setToastMessage(errorMessage);
      setShowToast(true);
      setTimeout(() => {
        setShowToast(false);
      }, 3000);
      console.error('계정 활성화 오류:', err);
    } finally {
      setIsActivateModalOpen(false);
      setSelectedUserId(null);
    }
  }
  function handleActivateCancel() {
    setIsActivateModalOpen(false);
@@ -105,8 +220,18 @@ export default function AdminIdPage() {
    setIsDeactivateModalOpen(true);
  }
-  function handleDeactivateConfirm() {
+  async function handleDeactivateConfirm() {
-    if (selectedUserId) {
+    if (!selectedUserId) {
      setIsDeactivateModalOpen(false);
      setSelectedUserId(null);
      setDeactivateReason('');
      return;
    }
    try {
      await apiService.suspendUser(selectedUserId);
      // API 호출 성공 시 로컬 상태 업데이트
      setUsers(prevUsers => 
        prevUsers.map(user => 
          user.id === selectedUserId 
@@ -119,14 +244,25 @@ export default function AdminIdPage() {
      setTimeout(() => {
        setShowToast(false);
      }, 3000);
-    }
+    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '계정 비활성화 중 오류가 발생했습니다.';
      setToastMessage(errorMessage);
      setShowToast(true);
      setTimeout(() => {
        setShowToast(false);
      }, 3000);
      console.error('계정 비활성화 오류:', err);
    } finally {
      setIsDeactivateModalOpen(false);
      setSelectedUserId(null);
      setDeactivateReason('');
    }
  }
  function handleDeactivateCancel() {
    setIsDeactivateModalOpen(false);
    setSelectedUserId(null);
    setDeactivateReason('');
  }
  function toggleAccountStatus(userId: string) {
@@ -168,13 +304,13 @@ export default function AdminIdPage() {
            <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 className="text-[24px] font-bold leading-normal text-text-title">
                권한 설정
              </h1>
            </div>
            {/* 탭 네비게이션 */}
-            <div>
+            {/* <div>
-              <div className="flex items-center gap-8 border-b border-[#dee1e6]">
+              <div className="flex items-center gap-8 border-b border-input-border">
                {[
                  { id: 'all' as TabType, label: '전체' },
                  { id: 'learner' as TabType, label: '학습자' },
@@ -186,50 +322,60 @@ export default function AdminIdPage() {
                    type="button"
                    onClick={() => setActiveTab(tab.id)}
                    className={[
-                      "pb-4 px-1 text-[16px] font-medium leading-[1.5] transition-colors relative cursor-pointer",
+                      "pb-4 px-1 text-[16px] font-medium leading-normal transition-colors relative cursor-pointer",
                      activeTab === tab.id
-                        ? "text-[#1f2b91] font-semibold"
+                        ? "text-active-button font-semibold"
-                        : "text-[#6c7682]",
+                        : "text-text-label",
                    ].join(" ")}
                  >
                    {tab.label}
                    {activeTab === tab.id && (
-                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#1f2b91]" />
+                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-active-button" />
                    )}
                  </button>
                ))}
              </div>
-            </div>
+            </div> */}
            {/* 콘텐츠 영역 */}
            <div className="flex-1 pt-8 flex flex-col">
-              {filteredUsers.length === 0 ? (
+              {isLoading ? (
-                <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
+                <div className="rounded-lg border border-input-border 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-normal text-neutral-700">
                    데이터를 불러오는 중...
                  </p>
                </div>
              ) : error ? (
                <div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
                  <p className="text-[16px] font-medium leading-normal text-error">
                    {error}
                  </p>
                </div>
              ) : filteredUsers.length === 0 ? (
                <div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
                  <p className="text-[16px] font-medium leading-normal text-neutral-700">
                    현재 관리할 수 있는 회원 계정이 없습니다.
                  </p>
                </div>
              ) : (
                <>
                  <div className="rounded-[8px]">
-                    <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
+                    <div className="w-full rounded-[8px] border border-input-border overflow-visible">
                      <table className="min-w-full border-collapse">
                        <colgroup>
-                          <col style={{ width: 140 }} />
+                          <col style={{ width: 200 }} />
                          <col />
                          <col />
-                          <col style={{ width: 120 }} />
+                          <col style={{ width: 150 }} />
-                          <col style={{ width: 120 }} />
+                          <col style={{ width: 150 }} />
                          <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-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">가입일</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">성명</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">성명</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">아이디(이메일)</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">아이디(이메일)</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">권한설정</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">계정상태</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정상태</th>
+                            <th className="px-4 text-center text-[14px] font-semibold leading-normal text-basic-text">계정관리</th>
                            <th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정관리</th>
                          </tr>
                        </thead>
                        <tbody>
@@ -238,68 +384,31 @@ export default function AdminIdPage() {
                            key={user.id}
                            className="h-12"
                          >
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                              {user.joinDate}
                            </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                              {user.name}
                            </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                              {user.email}
                            </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                              <div className="relative flex items-center justify-between">
                                <span>{roleLabels[user.role]}</span>
                                <div 
                                  ref={(el) => { dropdownRefs.current[user.id] = el; }}
                                  className="relative"
                                >
                                  <button
                                    type="button"
                                    onClick={() => toggleDropdown(user.id)}
                                    className="ml-2 flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity"
                                  >
                                    <DropdownIcon width={16} height={16} stroke="#8C95A1" />
                                  </button>
                                  {openDropdownId === user.id && (
                                    <div className="absolute right-0 top-full mt-1 z-[100] min-w-[120px] bg-white border border-[#dee1e6] rounded-[4px] shadow-lg flex flex-col">
                                      {(['learner', 'instructor', 'admin'] as RoleType[]).map((role) => (
                                        <button
                                          key={role}
                                          type="button"
                                          onClick={() => changeUserRole(user.id, role)}
                                          className={[
                                            "w-full px-4 py-2 text-left text-[14px] leading-[1.5] hover:bg-gray-50 transition-colors cursor-pointer",
                                            user.role === role 
                                              ? "text-[#1f2b91] font-semibold bg-[#ecf0ff]" 
                                              : "text-[#1b2027]",
                                            role !== 'admin' && "border-b border-[#dee1e6]"
                                          ].join(" ")}
                                        >
                                          {roleLabels[role]}
                                        </button>
                                      ))}
                                    </div>
                                  )}
                                </div>
                              </div>
                            </td>
                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                              {user.status === 'active' ? (
-                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
+                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-primary-light">
-                                  <span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
+                                  <span className="text-[13px] font-semibold leading-[1.4] text-primary whitespace-nowrap">
                                    {statusLabels[user.status]}
                                  </span>
                                </div>
                              ) : (
-                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
+                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-gray-light">
-                                  <span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                                  <span className="text-[13px] font-semibold leading-[1.4] text-basic-text whitespace-nowrap">
                                    {statusLabels[user.status]}
                                  </span>
                                </div>
                              )}
                            </td>
-                            <td className="border-t border-[#dee1e6] px-4 text-center text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-input-border px-4 text-center text-[13px] leading-normal text-text-body whitespace-nowrap">
                              <button
                                type="button"
                                onClick={() => toggleAccountStatus(user.id)}
@@ -331,7 +440,7 @@ export default function AdminIdPage() {
                          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"
+                          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">
@@ -345,7 +454,7 @@ export default function AdminIdPage() {
                          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"
+                          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" />
@@ -362,10 +471,10 @@ export default function AdminIdPage() {
                              aria-current={active ? 'page' : undefined}
                              className={[
                                'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
-                                active ? 'bg-[#ecf0ff]' : 'bg-white',
+                                active ? 'bg-bg-primary-light' : 'bg-white',
                              ].join(' ')}
                            >
-                              <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
+                              <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
                            </button>
                          );
                        })}
@@ -375,7 +484,7 @@ export default function AdminIdPage() {
                          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"
+                          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" />
@@ -386,7 +495,7 @@ export default function AdminIdPage() {
                          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"
+                          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">
@@ -417,7 +526,7 @@ export default function AdminIdPage() {
          <div className="relative z-10 bg-white rounded-[8px] p-6 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-8 items-end justify-end min-w-[500px]">
            <div className="flex flex-col gap-4 items-start justify-center w-full">
              <div className="flex gap-2 items-start w-full">
-                <h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+                <h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
                  계정을 활성화하시겠습니까?
                </h2>
              </div>
@@ -426,14 +535,14 @@ export default function AdminIdPage() {
              <button
                type="button"
                onClick={handleActivateCancel}
-                className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+                className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
              >
                취소
              </button>
              <button
                type="button"
                onClick={handleActivateConfirm}
-                className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white cursor-pointer hover:bg-[#1a2478] transition-colors"
+                className="h-[40px] px-4 rounded-[8px] bg-active-button text-[16px] font-semibold leading-normal text-white cursor-pointer hover:bg-active-button-hover transition-colors"
              >
                활성화하기
              </button>
@@ -452,27 +561,36 @@ export default function AdminIdPage() {
          />
          <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="flex flex-col gap-[16px] items-start justify-center w-full">
-              <h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+              <h2 className="text-[18px] font-semibold leading-normal text-[#333c47]">
                계정을 비활성화 하시겠습니까?
              </h2>
-              <p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+              <p className="text-[15px] font-normal leading-normal text-basic-text">
                학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다.
                <br />
                계정을 비활성화 처리하시겠습니까?
              </p>
              <div className="w-full">
                <input
                  type="text"
                  value={deactivateReason}
                  onChange={(e) => setDeactivateReason(e.target.value)}
                  placeholder="비활성화 사유를 입력해주세요"
                  className="w-full h-[40px] px-[12px] rounded-[8px] border border-input-border text-[14px] leading-normal text-text-body placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-active-button focus:border-transparent"
                />
              </div>
            </div>
            <div className="flex gap-2 items-center justify-end">
              <button
                type="button"
                onClick={handleDeactivateCancel}
-                className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+                className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
              >
                취소
              </button>
              <button
                type="button"
                onClick={handleDeactivateConfirm}
-                className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-[1.5] text-[#f64c4c] cursor-pointer hover:bg-red-100 transition-colors"
+                className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-normal text-error cursor-pointer hover:bg-red-100 transition-colors"
              >
                비활성화하기
              </button>
@@ -484,14 +602,14 @@ export default function AdminIdPage() {
      {/* 활성화 완료 토스트 */}
      {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="bg-white border border-input-border 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"/>
+                <circle cx="8.5" cy="8.5" r="8.5" fill="var(--color-primary)"/>
                <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 className="text-[15px] font-medium leading-normal text-text-body text-nowrap">
              {toastMessage}
            </p>
          </div>
--- a/src/app/admin/lessons/[id]/edit/page.tsx
+++ b/src/app/admin/lessons/[id]/edit/page.tsx
--- a/src/app/admin/lessons/[id]/page.tsx
+++ b/src/app/admin/lessons/[id]/page.tsx
--- a/src/app/admin/lessons/page.tsx
+++ b/src/app/admin/lessons/page.tsx
--- a/src/app/admin/notices/NoChangesModal.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/notices/NoticeCancelModal.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/notices/NoticeDeleteModal.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/notices/NoticeValidationModal.tsx
+++ b/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>
 	);
 }
--- a/src/app/admin/notices/[id]/edit/page.tsx
+++ b/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>
    </>
  );
 }
--- a/src/app/admin/notices/[id]/page.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/notices/page.tsx
+++ b/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,58 +112,146 @@ 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;
      }
      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 = () => {
+  const handleSave = async () => {
-    if (!title.trim()) {
+    if (!title.trim() || !content.trim()) {
-      alert('제목을 입력해주세요.');
+      setIsValidationModalOpen(true);
      return;
    }
    if (!content.trim()) {
      alert('내용을 입력해주세요.');
      return;
    }
-    // 새 공지사항 추가
+    try {
-    const newNotice: Notice = {
+      setIsLoading(true);
-      id: notices.length > 0 ? Math.max(...notices.map(n => n.id)) + 1 : 1,
+      
      // 공지사항 생성 API 호출
      const noticeData: any = {
        title: title.trim(),
-      date: new Date().toISOString().split('T')[0],
+        content: content.trim(),
      views: 0,
      writer: '관리자', // TODO: 실제 작성자 정보 사용
      content: content.split('\n'),
      hasAttachment: attachedFile !== null,
      };
-    setNotices([newNotice, ...notices]);
+      // 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 (title.trim() || content.trim() || attachedFile || fileKey) {
-      if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
+      setIsCancelModalOpen(true);
        handleBack();
      }
    } else {
      handleBack();
    }
  };
  const handleCancelConfirm = () => {
    setIsCancelModalOpen(false);
    handleBack();
  };
  const ITEMS_PER_PAGE = 10;
  const sortedNotices = useMemo(() => {
    return [...notices].sort((a, b) => {
@@ -92,6 +268,16 @@ export default function AdminNoticesPage() {
  }, [sortedNotices, currentPage]);
  return (
    <>
      <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">
@@ -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>
      )}
    </>
  );
 }
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,6 @@
 import { redirect } from 'next/navigation';
 export default function AdminPage() {
  redirect('/admin/id');
 }
--- a/src/app/admin/resources/[id]/edit/page.tsx
+++ b/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>
    </>
  );
 }
--- a/src/app/admin/resources/[id]/page.tsx
+++ b/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>
  );
 }
--- a/src/app/admin/resources/mockData.ts
+++ b/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: [
      '방사선학 강의에 필요한 학습 자료를 첨부합니다.',
      '학습 자료는 강의 수강 시 참고하시기 바랍니다.',
    ],
  },
 ];
--- a/src/app/admin/resources/page.tsx
+++ b/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 router = useRouter();
-  const items: any[] = [];
+  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 sortedResources = useMemo(() => {
-  const paginatedItems = 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);
+    return sortedResources.slice(startIndex, endIndex);
-  }, [items, currentPage]);
+  }, [sortedResources, currentPage]);
  return (
    <div className="min-h-screen flex flex-col bg-white">
@@ -30,6 +273,135 @@ export default function AdminResourcesPage() {
          {/* 메인 콘텐츠 */}
          <main className="w-[1120px] bg-white">
            <div className="h-full flex flex-col px-8">
              {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 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]">
@@ -37,20 +409,86 @@ export default function AdminResourcesPage() {
                    </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-8 flex flex-col">
+                  <div className="flex-1 pt-2 flex flex-col">
-                {items.length === 0 ? (
+                {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;
@@ -135,10 +573,29 @@ export default function AdminResourcesPage() {
                  </>
                )}
                  </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>
  );
 }
--- a/src/app/api/README.md
+++ b/src/app/api/README.md
@@ -1,211 +0,0 @@
 # API 엔드포인트 문서
 이 문서는 데이터베이스에 데이터를 생성하는 API 엔드포인트를 설명합니다.
 ## 📋 API 목록
 ### 1. 사용자 API (`/api/users`)
 #### POST - 사용자 생성
 ```bash
 POST /api/users
 Content-Type: application/json
 {
  "email": "user@example.com",
  "password": "hashed_password",
  "name": "홍길동",
  "phone": "010-1234-5678",
  "gender": "M",
  "birthdate": "1990-01-01",
  "role": "LEARNER",  // 또는 "ADMIN"
  "status": "ACTIVE"  // 또는 "INACTIVE"
 }
 ```
 **응답:**
 ```json
 {
  "message": "사용자가 성공적으로 생성되었습니다.",
  "user": {
    "id": "uuid",
    "email": "user@example.com",
    "name": "홍길동",
    ...
  }
 }
 ```
 #### GET - 사용자 목록 조회
 ```bash
 GET /api/users?role=LEARNER&status=ACTIVE&page=1&limit=10
 ```
 **쿼리 파라미터:**
 - `role`: 필터링할 역할 (LEARNER, ADMIN)
 - `status`: 필터링할 상태 (ACTIVE, INACTIVE)
 - `page`: 페이지 번호 (기본값: 1)
 - `limit`: 페이지당 항목 수 (기본값: 10)
 ---
 ### 2. 교육과정 API (`/api/courses`)
 #### POST - 교육과정 생성
 ```bash
 POST /api/courses
 Content-Type: application/json
 {
  "courseName": "웹 개발 기초",
  "instructorId": "instructor_uuid",
  "createdById": "admin_uuid"  // 선택사항, 기본값: instructorId
 }
 ```
 **응답:**
 ```json
 {
  "message": "교육과정이 성공적으로 생성되었습니다.",
  "course": {
    "id": "uuid",
    "courseName": "웹 개발 기초",
    "instructor": { ... },
    "createdBy": { ... }
  }
 }
 ```
 #### GET - 교육과정 목록 조회
 ```bash
 GET /api/courses?instructorId=uuid&page=1&limit=10
 ```
 ---
 ### 3. 강좌 API (`/api/lessons`)
 #### POST - 강좌 생성
 ```bash
 POST /api/lessons
 Content-Type: application/json
 {
  "courseId": "course_uuid",
  "lessonName": "HTML 기초",
  "learningGoal": "HTML의 기본 문법을 이해하고 활용할 수 있다.",
  "createdById": "admin_uuid"  // 선택사항
 }
 ```
 **응답:**
 ```json
 {
  "message": "강좌가 성공적으로 생성되었습니다.",
  "lesson": {
    "id": "uuid",
    "lessonName": "HTML 기초",
    "course": { ... },
    "createdBy": { ... }
  }
 }
 ```
 #### GET - 강좌 목록 조회
 ```bash
 GET /api/lessons?courseId=uuid&page=1&limit=10
 ```
 ---
 ### 4. 공지사항 API (`/api/notices`)
 #### POST - 공지사항 생성
 ```bash
 POST /api/notices
 Content-Type: application/json
 {
  "title": "공지사항 제목",
  "content": "공지사항 내용",
  "writerId": "admin_uuid",
  "hasAttachment": false  // 선택사항
 }
 ```
 **응답:**
 ```json
 {
  "message": "공지사항이 성공적으로 생성되었습니다.",
  "notice": {
    "id": "uuid",
    "title": "공지사항 제목",
    "content": "공지사항 내용",
    "writer": { ... }
  }
 }
 ```
 #### GET - 공지사항 목록 조회
 ```bash
 GET /api/notices?writerId=uuid&page=1&limit=10
 ```
 ---
 ## 🔧 사용 예시
 ### JavaScript/TypeScript (fetch)
 ```typescript
 // 사용자 생성
 const response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'hashed_password',
    name: '홍길동',
    role: 'LEARNER',
  }),
 });
 const data = await response.json();
 console.log(data);
 ```
 ### cURL
 ```bash
 # 사용자 생성
 curl -X POST http://localhost:3000/api/users \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "hashed_password",
    "name": "홍길동",
    "role": "LEARNER"
  }'
 ```
 ---
 ## ⚠️ 주의사항
 1. **비밀번호 해시화**: 실제 프로덕션에서는 비밀번호를 해시화하여 저장해야 합니다.
 2. **인증/인가**: 현재 API는 인증이 없습니다. 프로덕션에서는 JWT나 세션 기반 인증을 추가해야 합니다.
 3. **에러 처리**: 모든 API는 적절한 에러 응답을 반환합니다.
 4. **데이터 검증**: 필수 필드 검증이 포함되어 있습니다.
 ---
 ## 📝 다음 단계
 - [ ] 인증 미들웨어 추가
 - [ ] 비밀번호 해시화 로직 추가
 - [ ] 파일 업로드 API 추가 (공지사항 첨부파일 등)
 - [ ] 수정/삭제 API 추가
 - [ ] 상세 조회 API 추가
--- a/src/app/api/courses/route.ts
+++ b/src/app/api/courses/route.ts
@@ -1,126 +0,0 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 // 교육과정 생성
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { courseName, instructorId, createdById } = body;
    // 필수 필드 검증
    if (!courseName || !instructorId) {
      return NextResponse.json(
        { error: '교육과정명과 강사 ID는 필수입니다.' },
        { status: 400 }
      );
    }
    // 강사 존재 확인
    const instructor = await prisma.user.findUnique({
      where: { id: instructorId },
    });
    if (!instructor) {
      return NextResponse.json(
        { error: '강사를 찾을 수 없습니다.' },
        { status: 404 }
      );
    }
    // 교육과정 생성
    const course = await prisma.course.create({
      data: {
        courseName,
        instructorId,
        createdById: createdById || instructorId,
      },
      include: {
        instructor: {
          select: {
            id: true,
            name: true,
            email: true,
          },
        },
        createdBy: {
          select: {
            id: true,
            name: true,
          },
        },
      },
    });
    return NextResponse.json(
      { message: '교육과정이 성공적으로 생성되었습니다.', course },
      { status: 201 }
    );
  } catch (error) {
    console.error('교육과정 생성 오류:', error);
    return NextResponse.json(
      { error: '교육과정 생성 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
 // 교육과정 목록 조회
 export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const instructorId = searchParams.get('instructorId');
    const page = parseInt(searchParams.get('page') || '1');
    const limit = parseInt(searchParams.get('limit') || '10');
    const skip = (page - 1) * limit;
    const where: any = {};
    if (instructorId) where.instructorId = instructorId;
    const [courses, total] = await Promise.all([
      prisma.course.findMany({
        where,
        skip,
        take: limit,
        orderBy: { createdAt: 'desc' },
        include: {
          instructor: {
            select: {
              id: true,
              name: true,
              email: true,
            },
          },
          createdBy: {
            select: {
              id: true,
              name: true,
            },
          },
          _count: {
            select: {
              lessons: true,
            },
          },
        },
      }),
      prisma.course.count({ where }),
    ]);
    return NextResponse.json({
      courses,
      pagination: {
        page,
        limit,
        total,
        totalPages: Math.ceil(total / limit),
      },
    });
  } catch (error) {
    console.error('교육과정 조회 오류:', error);
    return NextResponse.json(
      { error: '교육과정 조회 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
--- a/src/app/api/examples.ts
+++ b/src/app/api/examples.ts
@@ -1,272 +0,0 @@
 /**
 * API 사용 예제 모음
 * 
 * 이 파일은 API를 사용하는 다양한 예제를 제공합니다.
 * 실제 프로젝트에서 참고하여 사용하세요.
 */
 // ============================================
 // 1. 사용자 API 예제
 // ============================================
 /**
 * 사용자 생성 예제
 */
 export async function createUserExample() {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: 'newuser@example.com',
      password: 'hashed_password_here', // 실제로는 bcrypt로 해시화
      name: '홍길동',
      phone: '010-1234-5678',
      gender: 'M',
      birthdate: '1990-01-01',
      role: 'LEARNER',
      status: 'ACTIVE',
    }),
  });
  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error);
  }
  const data = await response.json();
  return data.user;
 }
 /**
 * 사용자 목록 조회 예제 (필터링)
 */
 export async function getUsersExample() {
  const params = new URLSearchParams({
    role: 'LEARNER',
    status: 'ACTIVE',
    page: '1',
    limit: '10',
  });
  const response = await fetch(`/api/users?${params.toString()}`);
  const data = await response.json();
  return data;
 }
 // ============================================
 // 2. 교육과정 API 예제
 // ============================================
 /**
 * 교육과정 생성 예제
 */
 export async function createCourseExample(instructorId: string) {
  const response = await fetch('/api/courses', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      courseName: '웹 개발 기초',
      instructorId: instructorId,
      createdById: instructorId, // 선택사항
    }),
  });
  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error);
  }
  const data = await response.json();
  return data.course;
 }
 /**
 * 교육과정 목록 조회 예제
 */
 export async function getCoursesExample(instructorId?: string) {
  const params = new URLSearchParams();
  if (instructorId) {
    params.append('instructorId', instructorId);
  }
  params.append('page', '1');
  params.append('limit', '10');
  const response = await fetch(`/api/courses?${params.toString()}`);
  const data = await response.json();
  return data;
 }
 // ============================================
 // 3. 강좌 API 예제
 // ============================================
 /**
 * 강좌 생성 예제
 */
 export async function createLessonExample(courseId: string) {
  const response = await fetch('/api/lessons', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      courseId: courseId,
      lessonName: 'HTML 기초',
      learningGoal: 'HTML의 기본 문법을 이해하고 활용할 수 있다.',
      createdById: undefined, // 선택사항
    }),
  });
  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error);
  }
  const data = await response.json();
  return data.lesson;
 }
 /**
 * 강좌 목록 조회 예제
 */
 export async function getLessonsExample(courseId?: string) {
  const params = new URLSearchParams();
  if (courseId) {
    params.append('courseId', courseId);
  }
  params.append('page', '1');
  params.append('limit', '10');
  const response = await fetch(`/api/lessons?${params.toString()}`);
  const data = await response.json();
  return data;
 }
 // ============================================
 // 4. 공지사항 API 예제
 // ============================================
 /**
 * 공지사항 생성 예제
 */
 export async function createNoticeExample(writerId: string) {
  const response = await fetch('/api/notices', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      title: '공지사항 제목',
      content: '공지사항 내용입니다.\n여러 줄로 작성할 수 있습니다.',
      writerId: writerId,
      hasAttachment: false,
    }),
  });
  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error);
  }
  const data = await response.json();
  return data.notice;
 }
 /**
 * 공지사항 목록 조회 예제
 */
 export async function getNoticesExample(writerId?: string) {
  const params = new URLSearchParams();
  if (writerId) {
    params.append('writerId', writerId);
  }
  params.append('page', '1');
  params.append('limit', '10');
  const response = await fetch(`/api/notices?${params.toString()}`);
  const data = await response.json();
  return data;
 }
 // ============================================
 // 5. 통합 예제 - 전체 워크플로우
 // ============================================
 /**
 * 전체 워크플로우 예제
 * 1. 관리자 사용자 생성
 * 2. 교육과정 생성
 * 3. 강좌 생성
 * 4. 공지사항 생성
 */
 export async function completeWorkflowExample() {
  try {
    // 1. 관리자 사용자 생성
    const adminUser = await createUserExample();
    console.log('관리자 생성:', adminUser);
    // 2. 교육과정 생성
    const course = await createCourseExample(adminUser.id);
    console.log('교육과정 생성:', course);
    // 3. 강좌 생성
    const lesson = await createLessonExample(course.id);
    console.log('강좌 생성:', lesson);
    // 4. 공지사항 생성
    const notice = await createNoticeExample(adminUser.id);
    console.log('공지사항 생성:', notice);
    return {
      admin: adminUser,
      course,
      lesson,
      notice,
    };
  } catch (error) {
    console.error('워크플로우 실행 중 오류:', error);
    throw error;
  }
 }
 // ============================================
 // 6. 에러 처리 예제
 // ============================================
 /**
 * 에러 처리를 포함한 안전한 API 호출 예제
 */
 export async function safeApiCall<T>(
  apiCall: () => Promise<Response>
 ): Promise<{ data?: T; error?: string }> {
  try {
    const response = await apiCall();
    if (!response.ok) {
      const errorData = await response.json();
      return { error: errorData.error || '알 수 없는 오류가 발생했습니다.' };
    }
    const data = await response.json();
    return { data: data as T };
  } catch (error) {
    return {
      error: error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.',
    };
  }
 }
 // 사용 예시:
 // const result = await safeApiCall(() => 
 //   fetch('/api/users', { method: 'POST', ... })
 // );
 // if (result.error) {
 //   console.error(result.error);
 // } else {
 //   console.log(result.data);
 // }
--- a/src/app/api/lessons/route.ts
+++ b/src/app/api/lessons/route.ts
@@ -1,127 +0,0 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 // 강좌 생성
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { courseId, lessonName, learningGoal, createdById } = body;
    // 필수 필드 검증
    if (!courseId || !lessonName) {
      return NextResponse.json(
        { error: '교육과정 ID와 강좌명은 필수입니다.' },
        { status: 400 }
      );
    }
    // 교육과정 존재 확인
    const course = await prisma.course.findUnique({
      where: { id: courseId },
    });
    if (!course) {
      return NextResponse.json(
        { error: '교육과정을 찾을 수 없습니다.' },
        { status: 404 }
      );
    }
    // 강좌 생성
    const lesson = await prisma.lesson.create({
      data: {
        courseId,
        lessonName,
        learningGoal: learningGoal || null,
        createdById: createdById || course.createdById,
      },
      include: {
        course: {
          select: {
            id: true,
            courseName: true,
          },
        },
        createdBy: {
          select: {
            id: true,
            name: true,
          },
        },
      },
    });
    return NextResponse.json(
      { message: '강좌가 성공적으로 생성되었습니다.', lesson },
      { status: 201 }
    );
  } catch (error) {
    console.error('강좌 생성 오류:', error);
    return NextResponse.json(
      { error: '강좌 생성 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
 // 강좌 목록 조회
 export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const courseId = searchParams.get('courseId');
    const page = parseInt(searchParams.get('page') || '1');
    const limit = parseInt(searchParams.get('limit') || '10');
    const skip = (page - 1) * limit;
    const where: any = {};
    if (courseId) where.courseId = courseId;
    const [lessons, total] = await Promise.all([
      prisma.lesson.findMany({
        where,
        skip,
        take: limit,
        orderBy: { createdAt: 'desc' },
        include: {
          course: {
            select: {
              id: true,
              courseName: true,
            },
          },
          createdBy: {
            select: {
              id: true,
              name: true,
            },
          },
          _count: {
            select: {
              videos: true,
              vrContents: true,
              questions: true,
            },
          },
        },
      }),
      prisma.lesson.count({ where }),
    ]);
    return NextResponse.json({
      lessons,
      pagination: {
        page,
        limit,
        total,
        totalPages: Math.ceil(total / limit),
      },
    });
  } catch (error) {
    console.error('강좌 조회 오류:', error);
    return NextResponse.json(
      { error: '강좌 조회 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
--- a/src/app/api/notices/route.ts
+++ b/src/app/api/notices/route.ts
@@ -1,109 +0,0 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 // 공지사항 생성
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { title, content, writerId, hasAttachment } = body;
    // 필수 필드 검증
    if (!title || !content || !writerId) {
      return NextResponse.json(
        { error: '제목, 내용, 작성자 ID는 필수입니다.' },
        { status: 400 }
      );
    }
    // 작성자 존재 확인
    const writer = await prisma.user.findUnique({
      where: { id: writerId },
    });
    if (!writer) {
      return NextResponse.json(
        { error: '작성자를 찾을 수 없습니다.' },
        { status: 404 }
      );
    }
    // 공지사항 생성
    const notice = await prisma.notice.create({
      data: {
        title,
        content,
        writerId,
        hasAttachment: hasAttachment || false,
      },
      include: {
        writer: {
          select: {
            id: true,
            name: true,
            email: true,
          },
        },
      },
    });
    return NextResponse.json(
      { message: '공지사항이 성공적으로 생성되었습니다.', notice },
      { status: 201 }
    );
  } catch (error) {
    console.error('공지사항 생성 오류:', error);
    return NextResponse.json(
      { error: '공지사항 생성 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
 // 공지사항 목록 조회
 export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const writerId = searchParams.get('writerId');
    const page = parseInt(searchParams.get('page') || '1');
    const limit = parseInt(searchParams.get('limit') || '10');
    const skip = (page - 1) * limit;
    const where: any = {};
    if (writerId) where.writerId = writerId;
    const [notices, total] = await Promise.all([
      prisma.notice.findMany({
        where,
        skip,
        take: limit,
        orderBy: { date: 'desc' },
        include: {
          writer: {
            select: {
              id: true,
              name: true,
            },
          },
        },
      }),
      prisma.notice.count({ where }),
    ]);
    return NextResponse.json({
      notices,
      pagination: {
        page,
        limit,
        total,
        totalPages: Math.ceil(total / limit),
      },
    });
  } catch (error) {
    console.error('공지사항 조회 오류:', error);
    return NextResponse.json(
      { error: '공지사항 조회 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
--- a/src/app/api/users/route.ts
+++ b/src/app/api/users/route.ts
@@ -1,115 +0,0 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { UserRole, UserStatus } from '@prisma/client';
 // 사용자 생성
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { email, password, name, phone, gender, birthdate, role, status } = body;
    // 필수 필드 검증
    if (!email || !password || !name) {
      return NextResponse.json(
        { error: '이메일, 비밀번호, 이름은 필수입니다.' },
        { status: 400 }
      );
    }
    // 이메일 중복 확인
    const existingUser = await prisma.user.findUnique({
      where: { email },
    });
    if (existingUser) {
      return NextResponse.json(
        { error: '이미 존재하는 이메일입니다.' },
        { status: 409 }
      );
    }
    // 사용자 생성
    const user = await prisma.user.create({
      data: {
        email,
        password, // 실제로는 해시화된 비밀번호를 저장해야 합니다
        name,
        phone: phone || null,
        gender: gender || null,
        birthdate: birthdate ? new Date(birthdate) : null,
        role: role || UserRole.LEARNER,
        status: status || UserStatus.ACTIVE,
      },
    });
    // 비밀번호 제외하고 반환
    const { password: _, ...userWithoutPassword } = user;
    return NextResponse.json(
      { message: '사용자가 성공적으로 생성되었습니다.', user: userWithoutPassword },
      { status: 201 }
    );
  } catch (error) {
    console.error('사용자 생성 오류:', error);
    return NextResponse.json(
      { error: '사용자 생성 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
 // 사용자 목록 조회
 export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const role = searchParams.get('role');
    const status = searchParams.get('status');
    const page = parseInt(searchParams.get('page') || '1');
    const limit = parseInt(searchParams.get('limit') || '10');
    const skip = (page - 1) * limit;
    const where: any = {};
    if (role) where.role = role;
    if (status) where.status = status;
    const [users, total] = await Promise.all([
      prisma.user.findMany({
        where,
        skip,
        take: limit,
        orderBy: { createdAt: 'desc' },
        select: {
          id: true,
          email: true,
          name: true,
          phone: true,
          gender: true,
          birthdate: true,
          role: true,
          status: true,
          joinDate: true,
          createdAt: true,
          updatedAt: true,
        },
      }),
      prisma.user.count({ where }),
    ]);
    return NextResponse.json({
      users,
      pagination: {
        page,
        limit,
        total,
        totalPages: Math.ceil(total / limit),
      },
    });
  } catch (error) {
    console.error('사용자 조회 오류:', error);
    return NextResponse.json(
      { error: '사용자 조회 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
 }
--- a/src/app/components/AdminSidebar.tsx
+++ b/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() {
--- a/src/app/components/CsvViewer.tsx
+++ b/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>
  );
 }
--- a/src/app/components/FooterVisibility.tsx
+++ b/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();
--- a/src/app/course-list/[id]/page.tsx
+++ b/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>
 	);
 }
--- a/src/app/course-list/page.tsx
+++ b/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,80 +11,180 @@ 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
+interface Subject {
-const imgThumbC = '/imgs/thumb-c.png'; // public/imgs/thumb-c.png
+  id: string | number;
-const imgThumbD = '/imgs/thumb-d.png'; // public/imgs/thumb-d.png
+  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 (
-    <div className="bg-[#e5f5ec] box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]">
+    <div className="bg-bg-success-light box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]">
-      <p className="font-['Pretendard:SemiBold',sans-serif] text-[#0c9d61] text-[13px] leading-[1.4]">{text}</p>
+      <p className="font-['Pretendard:SemiBold',sans-serif] text-success text-[13px] leading-[1.4]">{text}</p>
    </div>
  );
 }
 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();
  // 과목 리스트 가져오기
  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);
              }
            }
  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}`,
+              id: subject.id,
-      title: item.title,
+              title: subject.title || '',
-      image: item.image,
+              image: imageUrl,
-      inProgress: item.inProgress ?? (i % 7 === 0),
+              inProgress: false, // TODO: 수강 중 상태는 진행률 API에서 가져와야 함
              meta: subject.instructor ? `강사: ${subject.instructor}` : 'VOD • 온라인',
            };
-  });
+          })
-  const totalPages = Math.ceil(courses.length / ITEMS_PER_PAGE);
+        );
        if (isMounted) {
          setCourses(coursesWithImages);
        }
      } catch (error) {
        console.error('과목 리스트 조회 오류:', error);
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    }
    fetchSubjects();
    return () => {
      isMounted = false;
    };
  }, []);
  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">
      {/* 상단 타이틀 영역 */}
      <div className="flex h-[100px] w-full max-w-[1440px] items-center px-8">
-        <h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">교육 과정 목록</h1>
+        <h1 className="text-[24px] font-bold leading-normal text-text-title">교육 과정 목록</h1>
      </div>
      {/* 콘텐츠 래퍼: Figma 기준 1440 컨테이너, 내부 1376 그리드 폭 */}
      <section className="w-full max-w-[1440px] px-8 pt-8 pb-20">
        {/* 상단 카운트/정렬 영역 */}
        <div className="flex items-center justify-between">
-          <p className="text-[15px] font-medium leading-normal text-[#333c47]">
+          <p className="text-[15px] font-medium leading-normal text-neutral-700">
-            총 <span className="text-[#384fbf]">{courses.length}</span>건
+            총 <span className="text-primary">{totalCount}</span>건
          </p>
          <div className="h-[40px] w-[114px]" />
        </div>
        {loading ? (
          <div className="mt-4 flex items-center justify-center h-[400px]">
            <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
          </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"
+                    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]">
+                    <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=""
+                        alt={c.title}
-                    className="absolute inset-0 size-full object-cover"
+                        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>
@@ -90,14 +192,14 @@ export default function CourseListPage() {
                    <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-[#333c47]">
+                        <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-[#8c95a1]">
+                        <p className="text-[13px] font-medium leading-[1.4] text-text-meta">
-                      VOD · 총 6강 · 4시간 20분
+                          {c.meta || 'VOD • 온라인'}
                        </p>
                      </div>
                    </div>
@@ -106,21 +208,36 @@ export default function CourseListPage() {
              </div>
            </div>
-        {/* 페이지네이션 (피그마 스타일 반영) */}
+            {/* 페이지네이션 - 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>
                {/* 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-[#333c47] disabled:opacity-40"
+                  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 */}
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => {
+                {visiblePages.map((n) => {
                  const active = n === page;
                  return (
                    <button
@@ -129,11 +246,11 @@ export default function CourseListPage() {
                      onClick={() => setPage(n)}
                      aria-current={active ? 'page' : undefined}
                      className={[
-                  'flex items-center justify-center rounded-[1000px] size-[32px]',
+                        'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
-                  active ? 'bg-[#ecf0ff]' : 'bg-white',
+                        active ? 'bg-bg-primary-light' : 'bg-white',
                      ].join(' ')}
                    >
-                <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
+                      <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
                    </button>
                  );
                })}
@@ -143,15 +260,30 @@ export default function CourseListPage() {
                  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-[#333c47] disabled:opacity-40"
+                  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>
  );
 }
--- a/src/app/find-id/IdFindDone.tsx
+++ b/src/app/find-id/IdFindDone.tsx
@@ -49,20 +49,20 @@ export default function IdFindDone({
 								</p>
 							</div>
 							<div className="mt-[60px]">
-								<div className="bg-[#f9fafb] border border-neutral-40 rounded-[16px] py-[24px]">
+								<div className="bg-[#f9fafb] border border-neutral-40 rounded-[16px] py-[24px] min-h-[108px] flex items-center justify-center">
 									{userId && (
-										<p className="text-[18px] font-semibold text-neutral-700">
+										<p className="text-[18px] font-semibold text-neutral-700 text-center">
 											{userId}
 										</p>
 									)}
-									{joinedAtText && (
+									{/* {joinedAtText && (
 										<p className="text-[16px] text-[#6c7682] mt-2">
 											({joinedAtText})
 										</p>
-									)}
+									)} */}
 								</div>
 							</div>
-							<div className="mt-[24px] flex gap-3">
+							<div className="mt-[60px] flex gap-3">
 								<Link
 									href={secondaryHref}
 									className="h-[56px] flex-1 rounded-[12px] bg-[#f1f3f5] text-[18px] font-semibold text-basic-text flex items-center justify-center"
--- a/src/app/find-id/page.tsx
+++ b/src/app/find-id/page.tsx
@@ -5,11 +5,13 @@ 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);
 	const [isFailedOpen, setIsFailedOpen] = useState(false);
 	const [foundUserId, setFoundUserId] = useState<string | undefined>(undefined);
 	const [joinedAt, setJoinedAt] = useState<string | undefined>(undefined);
 	const [name, setName] = useState("");
 	const [phone, setPhone] = useState("");
 	const [focused, setFocused] = useState<Record<string, boolean>>({});
@@ -19,6 +21,22 @@ export default function FindIdPage() {
 	const isPhoneValid = useMemo(() => /^\d{9,11}$/.test(phone), [phone]);
 	const canSubmit = useMemo(() => isNameValid && isPhoneValid, [isNameValid, isPhoneValid]);
 	function formatPhoneNumber(value: string): string {
 		const numbers = value.replace(/[^0-9]/g, "");
 		if (numbers.length <= 3) return numbers;
 		if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
 		if (numbers.length <= 11) return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
 		return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
 	}
 	// function formatJoinedAt(dateString: string | Date): string {
 	// 	const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
 	// 	const year = date.getFullYear();
 	// 	const month = date.getMonth() + 1;
 	// 	const day = date.getDate();
 	// 	return `${year}년 ${month}월 ${day}일`;
 	// }
 	function validateAll() {
 		const next: Record<string, string> = {};
 		if (!isNameValid) next.name = "이름을 입력해 주세요.";
@@ -27,12 +45,26 @@ export default function FindIdPage() {
 		return Object.keys(next).length === 0;
 	}
-	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault();
 		if (!validateAll()) return;
-		const mockUserId = `${name.trim()}@example.com`;
+
-		setFoundUserId(mockUserId);
+		try {
 			const response = await apiService.findUserId(name, phone);
 			const data = response.data;
 			// body의 emails 배열에서 첫 번째 이메일 가져오기
 			if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
 				setFoundUserId(data.emails[0]);
 			} else if (data.email) {
 				setFoundUserId(data.email);
 			}
 			setIsDoneOpen(true);
 		} catch (error) {
 			console.error('아이디 찾기 오류:', error);
 			setIsFailedOpen(true);
 		}
 	}
 	return (
@@ -40,6 +72,7 @@ export default function FindIdPage() {
 			<IdFindDone
 				on={isDoneOpen}
 				userId={foundUserId}
 				// joinedAtText={joinedAt ? `가입일: ${joinedAt}` : undefined}
 				onClose={() => setIsDoneOpen(false)}
 			/>
 			<IdFindFailed
@@ -47,6 +80,7 @@ export default function FindIdPage() {
 				onClose={() => setIsFailedOpen(false)}
 			/>
 			<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">
@@ -58,7 +92,7 @@ export default function FindIdPage() {
 						</p>
 					</div>
-				<form onSubmit={handleSubmit} className="space-y-6">
+					<form onSubmit={handleSubmit}>
 						<div className="space-y-2">
 							<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
 								이름
@@ -68,11 +102,23 @@ export default function FindIdPage() {
 									id="name"
 									name="name"
 									value={name}
-								onChange={(e) => setName(e.target.value)}
+									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] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+									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
@@ -82,7 +128,7 @@ export default function FindIdPage() {
 											setName("");
 										}}
 										aria-label="입력 지우기"
-									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer">
+										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
 										<LoginInputSvg />
 									</button>
 								)}
@@ -90,7 +136,7 @@ export default function FindIdPage() {
 							{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
 						</div>
-					<div className="space-y-2">
+						<div className="space-y-2 mt-6">
 							<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
 								휴대폰 번호
 							</label>
@@ -100,14 +146,27 @@ export default function FindIdPage() {
 									name="phone"
 									type="tel"
 									inputMode="numeric"
-								value={phone}
+									value={formatPhoneNumber(phone)}
-								onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ""))}
+									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 border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+									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.trim().length > 0 && focused.phone && (
+								{phone.length > 0 && focused.phone && (
 									<button
 										type="button"
 										onMouseDown={(e) => {
@@ -115,7 +174,7 @@ export default function FindIdPage() {
 											setPhone("");
 										}}
 										aria-label="입력 지우기"
-									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer">
+										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
 										<LoginInputSvg />
 									</button>
 								)}
@@ -125,13 +184,14 @@ export default function FindIdPage() {
 						<button
 							type="submit"
-						className={`h-[40px] w-full rounded-[12px] text-[18px] font-semibold text-white ${canSubmit ? "bg-active-button" : "bg-inactive-button"} cursor-pointer`}>
+							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>
 				</div>
 			</div>
 			<FindIdOption
 				doneEnabled={isDoneOpen}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,33 +11,122 @@
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
-  
+  /* ===== 텍스트 색상 ===== */
-  /*login color start*/
+  --color-text-title: #1b2027;
-  --color-input-placeholder-text: #b1b8c0;
+  --color-text-body: #1b2027;
-
+  --color-text-label: #6c7682;
-  --color-neutral-40: #dee1e6;
+  --color-text-meta: #8c95a1;
-  --color-input-border: #dee1e6;
+  --color-text-placeholder: #9ca3af;
-
+  --color-text-placeholder-alt: #b1b8c0;
  --color-basic-text: #4c5561;
  /* color natural 700*/
  --color-neutral-700: #333c47;
  --color-logo-text: #333c47;
  --color-input-border-select: #333c47;
  --color-input-alert-text: #333c47;
-  --color-error: #f64c4c;
+  /* ===== 배경 색상 ===== */
  --color-bg-gray-light: #f1f3f5;
  --color-bg-gray-hover: #e5e7eb;
  --color-bg-success-light: #e5f5ec;
  --color-bg-primary-light: #ecf0ff;
  --color-bg-header: #060958;
-  --color-inactive-checkbox: #c2c9cf;
+  /* ===== 테두리 색상 ===== */
  --color-neutral-40: #dee1e6;
  --color-input-border: #dee1e6;
  --color-input-border-select: #333c47;
  /* ===== 버튼/액션 색상 ===== */
  --color-inactive-button: #8598e8;
  --color-active-button: #1f2b91;
-  /*login color end*/
+  --color-active-button-hover: #1a2478;
-
+  --color-primary: #384fbf;
  --color-primary-alt: #384FBF;
  /* ===== 상태 색상 ===== */
  --color-error: #f64c4c;
  --color-success: #0c9d61;
  --color-inactive-checkbox: #c2c9cf;
  --color-input-placeholder-text: #b1b8c0;
 }
 body {
  background: var(--background);
  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;
 }
 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);
 }
--- a/src/app/instructor/courses/page.tsx
+++ b/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>
  );
 }
--- a/src/app/instructor/page.tsx
+++ b/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>
  );
 }
--- a/src/app/lib/apiService.ts
+++ b/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 };
--- a/src/app/login/LoginErrorModal.tsx
+++ b/src/app/login/LoginErrorModal.tsx
@@ -5,11 +5,14 @@ import React from "react";
 type LoginErrorModalProps = {
 	open: boolean;
 	onClose: () => void;
 	errorMessage?: string;
 };
-export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps) {
+export default function LoginErrorModal({ open, onClose, errorMessage }: LoginErrorModalProps) {
 	if (!open) return null;
 	const isSuspendedAccount = errorMessage?.includes("정지된 계정입니다");
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center">
 			<button
@@ -25,9 +28,19 @@ export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps)
 				className="relative bg-white box-border flex flex-col items-stretch justify-start p-6 rounded-[8px] min-w-[500px] max-w-[calc(100%-48px)]"
 			>
 				<div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8" id="login-error-title">
 					{isSuspendedAccount ? (
 						<>
 							정지된 계정입니다.
 							<br />
 							확인 후 다시 시도해 주세요.
 						</>
 					) : (
 						<>
 							아이디 또는 비밀번호가 일치하지 않습니다.
 							<br />
 							확인 후 다시 시도해 주세요.
 						</>
 					)}
 				</div>
 				<div className="flex items-center justify-end gap-[8px]">
 					<button
--- a/src/app/login/loginoption.tsx
+++ b/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) {
-
+  return null;
  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>
 	);
 }
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,15 +1,18 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import MainLogo from "@/app/svgs/mainlogosvg"
 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();
 	const [userId, setUserId] = useState("");
 	const [password, setPassword] = useState("");
 	const [rememberId, setRememberId] = useState(false);
@@ -17,32 +20,163 @@ export default function LoginPage() {
 	const [isUserIdFocused, setIsUserIdFocused] = useState(false);
 	const [isPasswordFocused, setIsPasswordFocused] = useState(false);
 	const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
 	const [loginErrorMessage, setLoginErrorMessage] = useState("");
 	const [idError, setIdError] = useState("");
 	const [passwordError, setPasswordError] = useState("");
-	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+	// 컴포넌트 마운트 시 저장된 아이디 불러오기 및 자동 로그인 확인
 	useEffect(() => {
 		const savedId = localStorage.getItem('savedUserId');
 		if (savedId) {
 			setUserId(savedId);
 			setRememberId(true);
 		}
 		// 자동 로그인 확인: localStorage에 토큰이 있고 쿠키에도 토큰이 있으면 자동 로그인
 		const savedToken = localStorage.getItem('token');
 		const cookieToken = document.cookie
 			.split('; ')
 			.find(row => row.startsWith('token='))
 			?.split('=')[1];
 		if (savedToken && cookieToken && savedToken === cookieToken) {
 			// 토큰이 유효한지 확인
 			apiService.getCurrentUser()
 				.then(response => {
 					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(() => {
 					// 에러 발생 시 토큰 삭제
 					localStorage.removeItem('token');
 					document.cookie = 'token=; path=/; max-age=0';
 				});
 		}
 	}, [router]);
 	// 아이디 기억하기 상태나 아이디가 변경될 때마다 저장 처리
 	useEffect(() => {
 		if (rememberId && userId.trim()) {
 			localStorage.setItem('savedUserId', userId);
 		} else if (!rememberId) {
 			localStorage.removeItem('savedUserId');
 		}
 	}, [rememberId, userId]);
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault();
-		// 실제 로그인 API 연동 전까지는 실패 모달을 노출합니다.
+
-		// API 연동 시 결과에 따라 성공/실패 분기에서 setIsLoginErrorOpen(true) 호출로 교체하세요.
+		// 에러 초기화
-		// if (userId.trim().length > 0 && password.trim().length > 0) {
+		setIdError("");
-		// 	setIsLoginErrorOpen(true);
+		setPasswordError("");
-		// }
+
 		// 입력 검증
 		let hasError = false;
 		if (userId.trim().length === 0) {
 			setIdError("아이디를 입력해 주세요.");
 			hasError = true;
 		}
 		if (password.trim().length === 0) {
 			setPasswordError("비밀번호를 입력해 주세요.");
 			hasError = true;
 		}
 		if (hasError) {
 			return;
 		}
 		try {
 			const response = await apiService.login(userId, password);
 			const data = response.data;
 			console.log("로그인 성공:", data);
 			// 로그인 성공 시 토큰 저장 (다양한 필드명 지원)
 			const token = data.token || data.accessToken || data.access_token;
 			if (token) {
 				if (autoLogin) {
 					// 자동 로그인이 체크되어 있으면 localStorage와 쿠키에 장기 저장 (30일)
 					localStorage.setItem('token', token);
 					document.cookie = `token=${token}; path=/; max-age=${30 * 24 * 60 * 60}; SameSite=Lax`;
 					console.log("자동 로그인 토큰 저장 완료 (30일 유지)");
 				} else {
 					// 자동 로그인이 체크되어 있지 않으면 쿠키에만 세션 쿠키로 저장 (브라우저 종료 시 삭제)
 					// localStorage에는 저장하지 않음
 					document.cookie = `token=${token}; path=/; SameSite=Lax`;
 					console.log("세션 토큰 저장 완료 (브라우저 종료 시 삭제)");
 				}
 			} else {
 				console.warn("토큰이 응답에 없습니다. 응답 데이터:", data);
 				// 토큰이 없어도 로그인은 성공했으므로 진행
 			}
 			// 사용자 정보 가져오기 (권한 확인을 위해)
 			try {
 				const userResponse = await apiService.getCurrentUser();
 				const userData = userResponse.data;
 				const userRole = userData.role || userData.userRole;
 				// admin 권한이면 /admin/id로 리다이렉트
 				if (userRole === 'ADMIN' || userRole === 'admin') {
 					router.push('/admin/id');
 					return;
 				}
 			} catch (error) {
 				console.error("사용자 정보 조회 오류:", error);
 				// 사용자 정보 조회 실패 시에도 기존 로직대로 진행
 			}
 			// 리다이렉트 경로 확인
 			const searchParams = new URLSearchParams(window.location.search);
 			const redirectPath = searchParams.get('redirect') || '/';
 			// 메인 페이지로 이동
 			router.push(redirectPath);
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			console.error("로그인 오류:", errorMessage);
 			setLoginErrorMessage(errorMessage);
 			setIsLoginErrorOpen(true);
 		}
 	}
 	return (
-		<div className="min-h-screen w-full flex flex-col items-center justify-between">
+		<>
 			<LoginErrorModal
 				open={isLoginErrorOpen}
-				onClose={() => setIsLoginErrorOpen(false)}
+				onClose={() => {
 					setIsLoginErrorOpen(false);
 					setLoginErrorMessage("");
 				}}
 				errorMessage={loginErrorMessage}
 			/>
 			<LoginOption
 				onClick={() => setIsLoginErrorOpen(true)}
 				loginErrorModalEnabled={isLoginErrorOpen}
 				setLoginErrorModalEnabled={setIsLoginErrorOpen}
 			/>
-
+			<div className="h-screen w-full flex flex-col overflow-hidden">
-			<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
+				{/* 메인 컨텐츠 영역 - 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]">
@@ -54,7 +188,7 @@ export default function LoginPage() {
 						</div>
 						{/* 폼 */}
-				<form onSubmit={handleSubmit} className="space-y-5">
+						<form onSubmit={handleSubmit} className="space-y-4">
 							<div className="space-y-4">
 								{/* 아이디 */}
 								<div className="relative">
@@ -65,17 +199,14 @@ export default function LoginPage() {
 										id="userId"
 										name="userId"
 										value={userId}
-								onChange={(e) => setUserId(e.target.value)}
+										onChange={(e) => {
 											setUserId(e.target.value);
 											if (idError) setIdError("");
 										}}
 										onFocus={() => setIsUserIdFocused(true)}
 										onBlur={() => setIsUserIdFocused(false)}
 										placeholder="아이디(이메일)"
-								className="
+										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'}`}
                h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40
                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
                focus:appearance-none focus:border-neutral-700
                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
                pr-[40px]
                "
 									/>
 									{userId.trim().length > 0 && isUserIdFocused && (
 										<button
@@ -91,6 +222,7 @@ export default function LoginPage() {
 										</button>
 									)}
 								</div>
 								{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
 								{/* 비밀번호 */}
 								<div className="relative">
 									<label htmlFor="password" className="sr-only">
@@ -101,17 +233,14 @@ export default function LoginPage() {
 										name="password"
 										type="password"
 										value={password}
-								onChange={(e) => setPassword(e.target.value)}
+										onChange={(e) => {
 											setPassword(e.target.value);
 											if (passwordError) setPasswordError("");
 										}}
 										onFocus={() => setIsPasswordFocused(true)}
 										onBlur={() => setIsPasswordFocused(false)}
-								placeholder="비밀번호"
+										placeholder="비밀번호 입력"
-								className="
+										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'}`}
                h-[40px] px-[12px] py-[7px] rounded-[8px] w-full border border-neutral-40
                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
                focus:appearance-none focus:border-neutral-700
                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
                pr-[40px]
                "
 									/>
 									{password.trim().length > 0 && isPasswordFocused && (
 										<button
@@ -127,6 +256,7 @@ export default function LoginPage() {
 										</button>
 									)}
 								</div>
 								{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
 							</div>
 							{/* 체크박스들 */}
@@ -164,7 +294,7 @@ export default function LoginPage() {
 							{/* 로그인 버튼 */}
 							<button
 								type="submit"
-						className={`h-[40px] 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" : "bg-inactive-button"}`}
+								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>
@@ -191,11 +321,12 @@ export default function LoginPage() {
 							</div>
 						</form>
 					</div>
-      <div></div>
+				</div>
-			<p className="text-center py-[40px] text-[15px] text-basic-text">
+				{/* Copyright 영역 - 하단 고정 */}
 				<p className="text-center py-[40px] text-[15px] text-basic-text flex-shrink-0">
 					Copyright ⓒ 2025 XL LMS. All rights reserved
 				</p>
 			</div>
 		</>
 	);
 }
--- a/src/app/menu/AccountDeleteModal.tsx
+++ b/src/app/menu/AccountDeleteModal.tsx
@@ -1,6 +1,9 @@
 'use client';
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import ModalCloseSvg from "../svgs/closexsvg";
 import apiService from "../lib/apiService";
 type Props = {
  open: boolean;
@@ -9,6 +12,31 @@ type Props = {
 };
 export default function AccountDeleteModal({ open, onClose, onConfirm }: Props) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const handleConfirm = async () => {
    if (onConfirm) {
      onConfirm();
      return;
    }
    setIsLoading(true);
    try {
      await apiService.deleteAccount();
      // 성공 시 토큰 제거 및 로그인 페이지로 이동
      localStorage.removeItem('token');
      onClose();
      router.push('/login');
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
      console.error('회원 탈퇴 오류:', errorMessage);
      alert(errorMessage);
      setIsLoading(false);
    }
  };
  if (!open) return null;
  return (
@@ -20,7 +48,7 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
      <div className="w-[528px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
        {/* header */}
        <div className="flex items-center justify-between p-6">
-          <h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">회원 탈퇴</h2>
+          <h2 className="text-[20px] font-bold leading-normal text-[#333c47]">회원 탈퇴</h2>
          <button
            type="button"
            aria-label="닫기"
@@ -34,10 +62,10 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
        {/* body */}
        <div className="px-6">
          <div className="rounded-[16px] border border-[#dee1e6] bg-gray-50 p-6">
-            <p className="mb-3 text-[15px] font-bold leading-[1.5] text-[#4c5561]">
+            <p className="mb-3 text-[15px] font-bold leading-normal text-basic-text">
              회원 탈퇴 시 유의사항을 확인해주세요.
            </p>
-            <div className="text-[15px] leading-[1.5] text-[#4c5561]">
+            <div className="text-[15px] leading-normal text-basic-text">
              <p className="mb-0">- 탈퇴 후에도 재가입은 가능합니다.</p>
              <p className="mb-0">- 수강 및 학습 이력이 모두 삭제되며, 복구가 불가능합니다.</p>
              <p>- 수강 서비스 이용 권한이 즉시 종료됩니다.</p>
@@ -50,16 +78,17 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
          <button
            type="button"
            onClick={onClose}
-            className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561] cursor-pointer"
+            className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-normal text-basic-text cursor-pointer"
          >
            취소
          </button>
          <button
            type="button"
-            onClick={onConfirm}
+            onClick={handleConfirm}
-            className="h-12 w-[136px] rounded-[10px] bg-red-50 px-4 text-[16px] font-semibold leading-[1.5] text-[#f64c4c] cursor-pointer"
+            disabled={isLoading}
            className="h-12 w-[136px] rounded-[10px] bg-red-50 px-4 text-[16px] font-semibold leading-normal text-error cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
          >
-            회원 탈퇴
+            {isLoading ? '처리 중...' : '회원 탈퇴'}
          </button>
        </div>
      </div>
--- a/src/app/menu/ChangePasswordModal.tsx
+++ b/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;
@@ -9,10 +11,12 @@ type Props = {
  onSubmit?: (payload: { email: string; code?: string; newPassword: string }) => void;
  showVerification?: boolean;
  devVerificationState?: 'initial' | 'sent' | 'verified' | 'failed';
  initialEmail?: string;
 };
-export default function ChangePasswordModal({ open, onClose, onSubmit, showVerification = false, devVerificationState }: Props) {
+export default function ChangePasswordModal({ open, onClose, onSubmit, showVerification = false, devVerificationState, initialEmail }: Props) {
-  const [email, setEmail] = useState("xrlms2025@gmail.com");
+  const router = useRouter();
  const [email, setEmail] = useState(initialEmail || "");
  const [code, setCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
@@ -21,8 +25,18 @@ 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 업데이트
  useEffect(() => {
    if (initialEmail) {
      setEmail(initialEmail);
    }
  }, [initialEmail]);
  // 외부에서 전달된 개발모드 상태(devVerificationState)에 따라 UI 동기화
  useEffect(() => {
    if (!devVerificationState) return;
@@ -60,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) {
@@ -78,25 +101,102 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
      setError("새 비밀번호가 일치하지 않습니다.");
      return;
    }
    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]"
      role="dialog"
      aria-modal="true"
    >
-      <div className="w-[480px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
+      <div className="w-[480px] rounded-[12px] border border-input-border bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
        {/* header */}
        <div className="flex items-center justify-between p-6">
-          <h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">비밀번호 변경</h2>
+          <h2 className="text-[20px] font-bold leading-[1.5] text-neutral-700">비밀번호 변경</h2>
          <button
            type="button"
            aria-label="닫기"
            onClick={onClose}
-            className="inline-flex size-6 items-center justify-center text-[#333c47] hover:opacity-80 cursor-pointer"
+            className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
          >
            <ModalCloseSvg />
          </button>
@@ -105,86 +205,131 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
        {/* body */}
        <div className="flex flex-col gap-[10px] px-6">
          <div className="flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">아이디 (이메일)</label>
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">아이디 (이메일)</label>
            <div className="flex items-center gap-3">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={[
-                  "h-10 flex-1 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                  "h-10 flex-1 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                  hasError ? "bg-white" : isCodeSent ? "bg-neutral-50" : "bg-white",
                ].join(" ")}
                placeholder="이메일"
              />
              <button
                type="button"
-                onClick={() => {
+                onClick={async () => {
                  if (!email.trim()) {
                    setError("이메일을 입력해 주세요.");
                    return;
                  }
                  setIsSending(true);
                  setError(null);
                  try {
                    await apiService.sendPasswordReset(email);
                    setRequireCode(true);
                    setIsCodeSent(true);
-                  setError(null);
+                    // 재전송 시 기존 인증 상태 초기화
                    setCode("");
                    setIsVerified(false);
                  } catch (err) {
                    setError(err instanceof Error ? err.message : "인증번호 전송에 실패했습니다.");
                  } finally {
                    setIsSending(false);
                  }
                }}
-                className="h-10 w-[136px] rounded-[8px] bg-[#f1f3f5] px-3 text-[16px] font-semibold leading-[1.5] text-[#333c47] 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>
          {requireCode ? (
            <div className="flex flex-col gap-2">
-              <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">인증번호</div>
+              <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">인증번호</div>
              <div className="flex items-center gap-3">
                <input
                  type="text"
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
-                  className="h-10 flex-1 rounded-[8px] border border-[#dee1e6] bg-white px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] 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",
+                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5]",
-                    canConfirm ? "bg-[#f1f3f5] text-[#4c5561]" : "bg-gray-50 text-[#b1b8c0]",
+                    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 ? (
                <div className="px-1">
-                  <p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                    인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
                  </p>
-                  <p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                    이메일을 확인해 주세요.
                  </p>
                </div>
              ) : null}
              {error ? (
-                <p className="px-1 text-[13px] font-semibold leading-[1.4] text-[#f64c4c]">
+                <p className="px-1 text-[13px] font-semibold leading-[1.4] text-error">
                  {error}
                </p>
              ) : null}
            </div>
          ) : null}
          <div className="flex flex-col gap-2">
-            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">새 비밀번호</label>
+            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">새 비밀번호</label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              disabled={!isVerified}
              className={[
-                "h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                isVerified ? "bg-white" : "bg-neutral-50",
              ].join(" ")}
              placeholder="새 비밀번호"
            />
          </div>
          <div className="flex flex-col gap-2">
-            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">
              새 비밀번호 확인
            </label>
            <input
@@ -193,7 +338,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
              onChange={(e) => setConfirmPassword(e.target.value)}
              disabled={!isVerified}
              className={[
-                "h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                isVerified ? "bg-white" : "bg-neutral-50",
              ].join(" ")}
              placeholder="새 비밀번호 확인"
@@ -205,15 +350,15 @@ 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-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561] cursor-pointer"
+            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"
          >
            취소
          </button>
          <button
            type="button"
            onClick={handleSubmit}
-            className="h-12 w-[136px] rounded-[10px] bg-[#8598e8] px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
+            className="h-12 w-[136px] rounded-[10px] bg-inactive-button px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
          >
            비밀번호 변경
          </button>
--- a/src/app/menu/account/page.tsx
+++ b/src/app/menu/account/page.tsx
@@ -1,18 +1,97 @@
 'use client';
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 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';
 type UserInfo = {
  email?: string;
  name?: string;
  phone?: string;
 };
 export default function AccountPage() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [verificationState, setVerificationState] = useState<VerificationState>('initial');
  const [doneOpen, setDoneOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [userInfo, setUserInfo] = useState<UserInfo>({});
  const [isLoading, setIsLoading] = useState(true);
  // 페이지 로드 시 사용자 정보 가져오기
  useEffect(() => {
    let isMounted = true;
    async function fetchUserInfo() {
      try {
        // localStorage와 쿠키 모두에서 토큰 확인
        const localStorageToken = localStorage.getItem('token');
        const cookieToken = document.cookie
          .split('; ')
          .find(row => row.startsWith('token='))
          ?.split('=')[1];
        const token = localStorageToken || cookieToken;
        if (!token) {
          if (isMounted) {
            router.push('/login');
          }
          return;
        }
        // localStorage에 토큰이 없고 쿠키에만 있으면 localStorage에도 저장 (동기화)
        if (!localStorageToken && cookieToken) {
          localStorage.setItem('token', cookieToken);
        }
        const response = await apiService.getCurrentUser();
        if (response.status === 401) {
          // 토큰이 만료되었거나 유효하지 않은 경우
          localStorage.removeItem('token');
          if (isMounted) {
            router.push('/login');
          }
          return;
        }
        if (response.status !== 200) {
          const errorMessage = response.message || `사용자 정보 조회 실패 (${response.status})`;
          console.error('사용자 정보 조회 실패:', errorMessage);
          if (isMounted) {
            setIsLoading(false);
          }
          return;
        }
        const data = response.data;
        if (isMounted) {
          setUserInfo(data);
          setIsLoading(false);
        }
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
        console.error('사용자 정보 조회 오류:', errorMessage);
        if (isMounted) {
          setIsLoading(false);
        }
      }
    }
    fetchUserInfo();
    return () => {
      isMounted = false;
    };
  }, []);
  // 개발 옵션에서 'changed'로 전환하면 완료 모달 표시
  useEffect(() => {
@@ -22,30 +101,32 @@ export default function AccountPage() {
  return (
    <main className="flex w-full flex-col">
      <div className="flex h-[100px] items-center px-8">
-        <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">내 정보 수정</h1>
+        <h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">내 정보 수정</h1>
      </div>
      <div className="px-8 pb-20">
-        <div className="rounded-lg border border-[#dee1e6] bg-white p-8">
+        <div className="rounded-lg border border-input-border bg-white p-8">
          <div className="flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
              아이디 (이메일)
            </label>
-            <div className="h-10 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2">
+            <div className="h-10 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
-              <span className="text-[16px] leading-[1.5] text-[#333c47]">skyblue@edu.com</span>
+              <span className="text-[16px] leading-normal text-neutral-700">
                {isLoading ? '로딩 중...' : (userInfo.email || '이메일 정보 없음')}
              </span>
            </div>
          </div>
          <div className="mt-6 flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
              비밀번호 변경
            </label>
            <div className="flex items-center gap-3">
-              <div className="h-10 flex-1 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2">
+              <div className="h-10 flex-1 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
-                <span className="text-[16px] leading-[1.5] text-[#333c47]">●●●●●●●●●●</span>
+                <span className="text-[16px] leading-normal text-neutral-700">●●●●●●●●●●</span>
              </div>
              <button
                type="button"
                onClick={() => setOpen(true)}
-                className="h-10 rounded-lg bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561]"
+                className="h-10 rounded-lg bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text"
              >
                비밀번호 변경
              </button>
@@ -72,6 +153,7 @@ export default function AccountPage() {
        devVerificationState={
          verificationState === 'changed' ? 'verified' : verificationState
        }
        initialEmail={userInfo.email}
      />
      <MenuAccountOption
@@ -89,9 +171,19 @@ export default function AccountPage() {
      <AccountDeleteModal
        open={deleteOpen}
        onClose={() => setDeleteOpen(false)}
-        onConfirm={() => {
+        onConfirm={async () => {
-          // TODO: 탈퇴 API 연동
+          try {
            await apiService.deleteAccount();
            // 성공 시 토큰 제거 및 로그인 페이지로 이동
            localStorage.removeItem('token');
            setDeleteOpen(false);
            router.push('/login');
          } catch (error) {
            const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
            console.error('회원 탈퇴 오류:', errorMessage);
            alert(errorMessage);
          }
        }}
      />
    </main>
--- a/src/app/menu/courses/CourseCard.tsx
+++ b/src/app/menu/courses/CourseCard.tsx
@@ -26,9 +26,9 @@ type Course = {
 function ProgressBar({ value }: { value: number }) {
 	const pct = Math.max(0, Math.min(100, value));
 	return (
-		<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-[#ecf0ff]">
+		<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-bg-primary-light">
 			<div
-				className="h-full rounded-full bg-[#384fbf] transition-[width] duration-300 ease-out"
+				className="h-full rounded-full bg-primary transition-[width] duration-300 ease-out"
 				style={{ width: `${pct}%` }}
 			/>
 		</div>
@@ -45,7 +45,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 	const firstIncomplete = course.lessons.find((l) => !l.isCompleted)?.id;
 	const cardClassName = [
 		"rounded-xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.02)]",
-		open ? "border-[3px] border-[#384fbf]" : "border border-[#ecf0ff]",
+		open ? "border-[3px] border-primary" : "border border-bg-primary-light",
 	].join(" ");
 	const formatDuration = (m: number) => {
@@ -57,7 +57,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 	return (
 		<article className={cardClassName}>
 			<header className="flex items-center gap-6 px-8 py-6">
-				<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-[#f1f3f5]">
+				<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-bg-gray-light">
 					<Image
 						src={`https://picsum.photos/seed/${encodeURIComponent(course.id)}/240/152`}
 						alt=""
@@ -69,19 +69,19 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 				</div>
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-2">
-						<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-[#e5f5ec] px-[4px] text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
+						<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-bg-success-light px-[4px] text-[13px] font-semibold leading-[1.4] text-success">
 							{course.status}
 						</span>
-						<h2 className="truncate text-[18px] font-semibold leading-normal text-[#333c47]">
+						<h2 className="truncate text-[18px] font-semibold leading-normal text-neutral-700">
 							{course.title}
 						</h2>
 					</div>
 					<p className="mt-1 line-clamp-2 text-[14px] leading-normal text-basic-text">{course.description}</p>
 					<div className="mt-2 flex items-center justify-between gap-3">
-						<p className="text-[13px] leading-[1.4] text-[#8c95a1]">
+						<p className="text-[13px] leading-[1.4] text-text-meta">
 							VOD · 총 {course.lessons.length}강 · {totalHours}시간 {restMinutes}분
 						</p>
-						<p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+						<p className="text-[13px] font-semibold leading-[1.4] text-primary">
 							전체 진도율: {course.progressPct}%
 						</p>
 					</div>
@@ -94,7 +94,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 						type="button"
 						aria-expanded={open}
 						onClick={() => setOpen((v) => !v)}
-						className="flex h-8 w-8 items-center justify-center text-[#6c7682] cursor-pointer"
+						className="flex h-8 w-8 items-center justify-center text-text-label cursor-pointer"
 						aria-label={open ? "접기" : "펼치기"}
 					>
 						<ChevronDownSvg
@@ -110,14 +110,14 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 				<div className="px-6 pb-6">
 					<ul className="flex flex-col gap-2">
 						{course.lessons.map((lesson, idx) => (
-							<li key={lesson.id} className="rounded-lg border border-[#dee1e6] bg-white">
+							<li key={lesson.id} className="rounded-lg border border-input-border bg-white">
 								<div className="flex items-center justify-between gap-4 px-[24px] py-[16px]">
 									<div className="min-w-0 flex-1">
-										<p className="truncate text-[16px] font-semibold leading-normal text-[#333c47]">
+										<p className="truncate text-[16px] font-semibold leading-normal text-neutral-700">
 											{`${idx + 1}. ${lesson.title}`}
 										</p>
 										<div className="mt-2 flex items-center gap-3">
-											<span className="text-[13px] leading-[1.4] text-[#8c95a1]">
+											<span className="text-[13px] leading-[1.4] text-text-meta">
 												{formatDuration(lesson.durationMin)}
 											</span>
 										</div>
@@ -128,8 +128,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 											className={[
 												"inline-flex h-[32px] w-[140px] items-center justify-center gap-[6px] rounded-[6px] px-4 text-center whitespace-nowrap cursor-pointer",
 												lesson.isCompleted
-													? "bg-white text-[13px] font-medium leading-[1.4] text-[#384fbf]"
+													? "bg-white text-[13px] font-medium leading-[1.4] text-primary"
-													: "bg-white text-[14px] font-medium leading-normal text-basic-text border border-[#8c95a1]",
+													: "bg-white text-[14px] font-medium leading-normal text-basic-text border border-text-meta",
 											].join(" ")}
 										>
 											{lesson.isCompleted ? (
@@ -144,7 +144,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 													>
 														<path
 															d="M8.75 0.75L3.25 6.25L0.75 3.75"
-															stroke="#384FBF"
+															stroke="var(--color-primary)"
 															strokeWidth="1.5"
 															strokeLinecap="round"
 															strokeLinejoin="round"
@@ -160,7 +160,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 											<button
 												type="button"
 												onClick={() => router.push(`/menu/courses/lessons/${lesson.id}/review`)}
-												className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-[#f1f3f5] px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer"
+												className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-bg-gray-light px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer"
 											>
 												복습하기
 											</button>
@@ -177,8 +177,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 												className={[
 													"inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] px-4 text-center text-[14px] font-medium leading-normal whitespace-nowrap cursor-pointer",
 													lesson.id === firstIncomplete
-														? "bg-[#ecf0ff] text-[#384fbf]"
+														? "bg-bg-primary-light text-primary"
-														: "border border-[#dee1e6] text-basic-text",
+														: "border border-input-border text-basic-text",
 												].join(" ")}
 											>
 												{lesson.id === firstIncomplete ? "이어서 수강하기" : "수강하기"}
--- a/src/app/menu/layout.tsx
+++ b/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>
--- a/src/app/notices/[id]/page.tsx
+++ b/src/app/notices/[id]/page.tsx
@@ -1,17 +1,169 @@
-import Link from 'next/link';
+'use client';
 import { notFound } from 'next/navigation';
 import BackCircleSvg from '../../svgs/backcirclesvg';
 import { MOCK_NOTICES } from '../../admin/notices/mockData';
-export default async function NoticeDetailPage({
+import { useState, useEffect } from 'react';
-  params,
+import { useRouter, useParams } from 'next/navigation';
-}: {
+import BackCircleSvg from '../../svgs/backcirclesvg';
-  params: Promise<{ id: string }>;
+import DownloadIcon from '../../svgs/downloadicon';
-}) {
+import apiService from '../../lib/apiService';
-  const { id } = await params;
+import type { Notice } from '../../admin/notices/mockData';
-  const numericId = Number(id);
+
-  const item = MOCK_NOTICES.find((r) => r.id === numericId);
+type Attachment = {
-  if (!item || !item.content) return notFound();
+  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
+            <button
-              href="/notices"
+              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,15 +208,80 @@ export default async function NoticeDetailPage({
              <div className="h-px bg-[#DEE1E6] w-full" />
              {/* 본문 */}
-              <div className="p-8">
+              <div className="p-8 flex flex-col gap-10">
-                <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
+                <div className="text-[15px] leading-normal text-[#333C47]">
-                  {item.content.map((p, idx) => (
+                  {notice.content && notice.content.length > 0 ? (
-                    <p key={idx} className="m-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>
        </div>
@@ -71,6 +289,3 @@ export default async function NoticeDetailPage({
    </div>
  );
 }
--- a/src/app/notices/page.tsx
+++ b/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 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 rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));
+        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,10 +127,16 @@ 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>
            {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">
                  {/* 헤더 */}
@@ -51,49 +158,131 @@ export default function NoticesPage() {
                  {/* 바디 */}
                  <div>
-                {rows.map((r, index) => {
+                    {pagedNotices.length === 0 ? (
-                  // 번호는 정렬된 목록에서의 순서
+                      <div className="flex items-center justify-center h-[240px]">
-                  const noticeNumber = rows.length - index;
+                        <p className="text-[16px] font-medium text-[#6C7682]">공지사항이 없습니다.</p>
                      </div>
                    ) : (
                      pagedNotices.map((notice, index) => {
                        // 번호는 전체 목록에서의 순서 (최신이 1번)
                        const noticeNumber = totalCount - ((currentPage - 1) * ITEMS_PER_PAGE + index);
                        return (
                          <div
-                      key={r.id}
+                            key={notice.id}
                            role="button"
                            tabIndex={0}
-                      onClick={() => router.push(`/notices/${r.id}`)}
+                            onClick={() => router.push(`/notices/${notice.id}`)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter' || e.key === ' ') {
                                e.preventDefault();
-                          router.push(`/notices/${r.id}`);
+                                router.push(`/notices/${notice.id}`);
                              }
                            }}
-                      className={[
+                            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"
                        '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>
                            <div
                              className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
-                      title={r.title}
+                              title={notice.title}
                            >
-                      {r.title}
+                              {notice.title}
-                      {r.hasAttachment && (
+                              {notice.hasAttachment && (
                                <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
                              )}
                            </div>
                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.date}
+                              {notice.date}
                            </div>
                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
-                      {r.views.toLocaleString()}
+                              {notice.views.toLocaleString()}
                            </div>
-                    <div className="flex items-center px-4">{r.writer}</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>
                )}
              </>
            )}
          </section>
        </div>
      </div>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,92 +2,37 @@
 'use client';
 import { useEffect, useMemo, useRef, 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';
 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 [isNameActive, setIsNameActive] = useState(false);
+  const [userName, setUserName] = useState<string>('');
-
+  const [subjects, setSubjects] = useState<Subject[]>([]);
-  // 코스, 공지사항 더미 데이터
+  const [courseCards, setCourseCards] = useState<CourseCard[]>([]);
-  const courseCards = useMemo(
+  const [loadingSubjects, setLoadingSubjects] = useState(true);
-    () =>
+  const [totalSubjectsCount, setTotalSubjectsCount] = useState(0);
-      [
+  const [notices, setNotices] = useState<Notice[]>([]);
-        {
+  const [loadingNotices, setLoadingNotices] = useState(true);
          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: '운영팀' },
      ],
    []
  );
  // NOTE: 실제 이미지 자산 연결 시 해당 src를 교체하세요.
  const slides = useMemo(
@@ -114,6 +59,227 @@ export default function Home() {
    []
  );
  // 사용자 정보 가져오기
  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) {
          return;
        }
        const response = await apiService.getCurrentUser();
        if (response.status !== 200) {
          return;
        }
        const data = response.data;
        if (isMounted) {
          // 사용자 권한 확인
          const userRole = data.role || data.userRole;
          if (userRole === 'ADMIN' || userRole === 'admin') {
            // admin 권한이면 /admin/id로 리다이렉트
            router.push('/admin/id');
            return;
          }
          if (data.name) {
            setUserName(data.name);
          }
        }
      } catch (error) {
        console.error('사용자 정보 조회 오류:', error);
      }
    }
    fetchUserInfo();
    return () => {
      isMounted = false;
    };
  }, []);
  // 과목 리스트 가져오기
  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;
@@ -141,10 +307,6 @@ export default function Home() {
  const handlePrev = () => scrollToIndex(currentIndex - 1);
  const handleNext = () => scrollToIndex(currentIndex + 1);
  const handleNameClick = () => {
    setIsNameActive((prev) => !prev);
  };
  return (
    <div className="w-full min-h-screen flex flex-col bg-white">
      <main className="flex-1">
@@ -223,19 +385,9 @@ export default function Home() {
                  <div className="px-8 py-8">
                    <div className="mb-6">
                      <div className="flex items-center gap-2">
-                        <button
+                        <span className="text-[18px] font-bold leading-normal text-[#333C47]">
-                          type="button"
+                          {userName ? `${userName}님` : '사용자님'}
-                          onClick={handleNameClick}
+                        </span>
                          aria-expanded={isNameActive}
                          className="m-0 p-0 bg-transparent border-0 text-[18px] font-bold leading-normal text-[#333C47] cursor-pointer inline-flex items-center gap-1"
                        >
                          김하늘님
                          <ChevronDownSvg
                            width={20}
                            height={20}
                            className={'transition-transform duration-200 ' + (isNameActive ? 'rotate-180' : 'rotate-0')}
                          />
                        </button>
                        <span className="text-[18px] font-bold leading-normal text-[#333C47]">환영합니다.</span>
                      </div>
                    </div>
@@ -282,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
+                <Link
-                  href="#"
+                  href="/course-list"
                  className="flex items-center gap-0.5 text-[14px] font-medium leading-normal text-[#6C7682] no-underline"
                >
                  전체보기
@@ -300,17 +452,26 @@ export default function Home() {
                      strokeLinejoin="round"
                    />
                  </svg>
-                </a>
+                </Link>
              </div>
              {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} className="flex flex-col gap-4 h-[260px]">
+                    <article 
-                    <div className="h-[166.4px] overflow-hidden rounded-[8px]">
+                      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="w-full h-full object-cover block"
+                          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';
@@ -318,11 +479,6 @@ export default function Home() {
                        />
                      </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>
@@ -336,19 +492,20 @@ export default function Home() {
                    </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
+                <Link
-                  href="#"
+                  href="/notices"
                  className="flex items-center gap-0.5 text-[14px] font-medium leading-normal text-[#6C7682] no-underline"
                >
                  전체보기
@@ -362,9 +519,14 @@ export default function Home() {
                      strokeLinejoin="round"
                    />
                  </svg>
-                </a>
+                </Link>
              </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>
@@ -375,25 +537,39 @@ export default function Home() {
                  </div>
                  <div>
-                  {noticeRows.map((r) => (
+                    {notices.map((notice, index) => {
                      // 번호는 정렬된 목록에서의 순서 (최신이 1번)
                      const noticeNumber = notices.length - index;
                      return (
                        <div
-                      key={r.id}
+                          key={notice.id}
-                      className="grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6]"
+                          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]">{r.id}</div>
+                          <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={r.title}
+                            title={notice.title}
                          >
-                        {r.title}
+                            {notice.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]">{notice.date}</div>
-                      <div className="flex items-center px-4 border-r border-[#DEE1E6]">{r.views.toLocaleString()}</div>
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6]">{notice.views.toLocaleString()}</div>
-                      <div className="flex items-center px-4">{r.writer}</div>
+                          <div className="flex items-center px-4">{notice.writer}</div>
                        </div>
-                  ))}
+                      );
                    })}
                  </div>
                </div>
              )}
            </section>
          </div>
        </div>
--- a/src/app/register/RegisterForm.tsx
+++ b/src/app/register/RegisterForm.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import Link from "next/link";
 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" | "";
+type Gender = "MALE" | "FEMALE" | "";
 type RegisterFormProps = {
 	onOpenDone: () => void;
@@ -21,6 +23,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 	const [passwordConfirm, setPasswordConfirm] = useState("");
 	const [gender, setGender] = useState<Gender>("");
 	const [birthdate, setBirthdate] = useState("");
 	const [birthdateInput, setBirthdateInput] = useState("");
 	// 이메일 인증 관련
 	const [emailCodeSent, setEmailCodeSent] = useState(false);
@@ -41,9 +44,57 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 	const [focused, setFocused] = useState<Record<string, boolean>>({});
 	const [errors, setErrors] = useState<Record<string, string>>({});
 	// 휴대폰 번호 포맷팅 함수
 	function formatPhoneNumber(phoneNumber: string): string {
 		const numbers = phoneNumber.replace(/[^0-9]/g, "");
 		if (numbers.length <= 3) return numbers;
 		if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
 		if (numbers.length <= 11) return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
 		return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
 	}
 	// 생년월일 YYYYMMDD를 YYYY-MM-DD로 변환하는 함수
 	function parseBirthdate(input: string): string {
 		// 숫자만 추출
 		const numbers = input.replace(/[^0-9]/g, "");
 		// YYYYMMDD 형식인지 확인 (8자리)
 		if (numbers.length === 8) {
 			const year = numbers.slice(0, 4);
 			const month = numbers.slice(4, 6);
 			const day = numbers.slice(6, 8);
 			// 유효한 날짜인지 검증
 			const yearNum = parseInt(year, 10);
 			const monthNum = parseInt(month, 10);
 			const dayNum = parseInt(day, 10);
 			if (yearNum >= 1900 && yearNum <= 2100 && monthNum >= 1 && monthNum <= 12 && dayNum >= 1 && dayNum <= 31) {
 				// 날짜 유효성 검사
 				const date = new Date(yearNum, monthNum - 1, dayNum);
 				if (date.getFullYear() === yearNum && date.getMonth() === monthNum - 1 && date.getDate() === dayNum) {
 					return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
 				}
 			}
 		}
 		// YYYY-MM-DD 형식이면 그대로 반환
 		if (/^\d{4}-\d{2}-\d{2}$/.test(input)) {
 			return input;
 		}
 		return "";
 	}
 	const isEmailValid = useMemo(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email), [email]);
 	const isPhoneValid = useMemo(() => /^\d{9,11}$/.test(phone), [phone]);
-	const isPasswordValid = useMemo(() => password.length >= 8 && password.length <= 16, [password]);
+	const isPasswordValid = useMemo(() => {
 		if (password.length < 8 || password.length > 16) return false;
 		const hasEnglish = /[a-zA-Z]/.test(password);
 		const hasNumber = /[0-9]/.test(password);
 		const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
 		return hasEnglish && hasNumber && hasSpecialChar;
 	}, [password]);
 	const isPasswordConfirmValid = useMemo(() => passwordConfirm === password && passwordConfirm.length > 0, [password, passwordConfirm]);
 	const canSubmit = useMemo(() => {
@@ -64,7 +115,18 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 		if (name.trim().length === 0) nextErrors.name = "이름을 입력해 주세요.";
 		if (!isPhoneValid) nextErrors.phone = "휴대폰 번호를 숫자만 9~11자리로 입력해 주세요.";
 		if (!isEmailValid) nextErrors.email = "올바른 이메일 형식을 입력해 주세요.";
-		if (!isPasswordValid) nextErrors.password = "비밀번호는 8~16자여야 합니다.";
+		if (!isPasswordValid) {
 			if (password.length < 8 || password.length > 16) {
 				nextErrors.password = "비밀번호는 8~16자여야 합니다.";
 			} else {
 				const hasEnglish = /[a-zA-Z]/.test(password);
 				const hasNumber = /[0-9]/.test(password);
 				const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
 				if (!hasEnglish || !hasNumber || !hasSpecialChar) {
 					nextErrors.password = "8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요.";
 				}
 			}
 		}
 		if (!isPasswordConfirmValid) nextErrors.passwordConfirm = "비밀번호가 일치하지 않습니다.";
 		if (gender === "") nextErrors.gender = "성별을 선택해 주세요.";
 		if (birthdate.trim().length === 0) nextErrors.birthdate = "생년월일을 선택해 주세요.";
@@ -73,10 +135,95 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 		return Object.keys(nextErrors).length === 0;
 	}
-	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+	// 입력 필드가 유효해지면 해당 필드의 에러를 자동으로 지움
 	useEffect(() => {
 		setErrors((prev) => {
 			const next = { ...prev };
 			if (name.trim().length > 0 && prev.name) delete next.name;
 			if (isPhoneValid && prev.phone) delete next.phone;
 			if (isEmailValid && prev.email) delete next.email;
 			if (isPasswordValid && prev.password) delete next.password;
 			if (isPasswordConfirmValid && prev.passwordConfirm) delete next.passwordConfirm;
 			if (gender !== "" && prev.gender) delete next.gender;
 			if (birthdate.trim().length > 0 && prev.birthdate) delete next.birthdate;
 			if (allAgree && prev.agreements) delete next.agreements;
 			return next;
 		});
 	}, [name, isPhoneValid, isEmailValid, isPasswordValid, isPasswordConfirmValid, gender, birthdate, allAgree]);
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		console.log("handleSubmit");
 		e.preventDefault();
 		if (!validateAll()) return;
 		await RegisterUser();
 	}
 	async function verifyEmailCode() {
 		try {
 			await apiService.verifyEmailCode(email, emailCode);
 			// 인증 성공 시 상태 업데이트
 			setEmailCodeVerified(true);
 		}
 		catch (error) {
 			console.error("이메일 인증번호 검증 오류:", error);
 			onOpenCodeError();
 		}
 	}
 	async function sendEmailCode() {
 		if (!isEmailValid) return;
 		try {
 			await apiService.sendEmailVerification(email);
 			// 성공 시에만 상태 업데이트
 			setEmailCodeSent(true);
 			setEmailCode("");
 			setEmailCodeVerified(false);
 			// 성공 시 이메일 에러 제거
 			setErrors((prev) => {
 				const next = { ...prev };
 				if (next.email) delete next.email;
 				return next;
 			});
 		} catch (error) {
 			console.error("이메일 인증번호 전송 오류:", error);
 			if (error instanceof Error && error.message.includes("409")) {
 				setErrors((prev) => ({ ...prev, email: "이메일이 중복되었습니다." }));
 			} else {
 				alert("인증번호 전송실패");
 			}
 		}
 	}
 	async function RegisterUser() {
 		if (!emailCodeVerified) {
 			onOpenCodeError("이메일 인증을 완료해주세요.");
 			return false;
 		}
 		if (gender === "") {
 			onOpenCodeError("성별을 선택해주세요.");
 			return false;
 		}
 		try {
 			await apiService.register({
 				email,
 				emailCode,
 				password,
 				passwordConfirm,
 				name,
 				phone,
 				gender: gender as "MALE" | "FEMALE",
 				birthDate: birthdate
 			});
 			onOpenDone();
 			return true;
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			console.error("회원가입 오류:", errorMessage);
 			onOpenCodeError(errorMessage);
 			return false;
 		}
 	}
 	return (
@@ -87,7 +234,6 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 					회원가입
 				</div>
 			</div>
 			<form onSubmit={handleSubmit} className="space-y-6">
 				{/* 이름 */}
 				<div className="space-y-2">
@@ -101,7 +247,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							onFocus={() => setFocused((p) => ({ ...p, name: true }))}
 							onBlur={() => setFocused((p) => ({ ...p, name: false }))}
 							placeholder="이름을 입력해 주세요."
-							className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+							className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.name ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 						/>
 						{name.trim().length > 0 && focused.name && (
 							<button
@@ -114,7 +260,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							</button>
 						)}
 					</div>
-					{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
+					{errors.name && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.name}</p>}
 				</div>
 				{/* 휴대폰 번호 */}
@@ -126,12 +272,12 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							name="phone"
 							type="tel"
 							inputMode="numeric"
-							value={phone}
+							value={formatPhoneNumber(phone)}
 							placeholder="-없이 입력해 주세요."
 							onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ""))}
 							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 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.phone ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 							className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
 						/>
 						{phone.trim().length > 0 && focused.phone && (
 							<button
@@ -144,7 +290,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							</button>
 						)}
 					</div>
-					{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
+					{errors.phone && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.phone}</p>}
 				</div>
 				{/* 아이디(이메일) + 인증번호 전송 */}
@@ -157,13 +303,24 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 								name="email"
 								type="email"
 								value={email}
-								onChange={(e) => setEmail(e.target.value)}
+								onChange={(e) => {
 									setEmail(e.target.value);
 									// 이메일 변경 시 중복 오류 제거
 									if (errors.email === "이메일이 중복되었습니다.") {
 										setErrors((prev) => {
 											const next = { ...prev };
 											delete next.email;
 											return next;
 										});
 									}
 								}}
 								onFocus={() => setFocused((p) => ({ ...p, email: true }))}
 								onBlur={() => setFocused((p) => ({ ...p, email: false }))}
 								placeholder="이메일을 입력해 주세요."
-								className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+								disabled={emailCodeVerified}
 								className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] disabled:bg-gray-100 disabled:cursor-not-allowed ${emailCodeVerified ? '' : (errors.email ? 'border-error' : 'border-neutral-40 focus:border-neutral-700')}`}
 							/>
-							{email.trim().length > 0 && focused.email && (
+							{email.trim().length > 0 && focused.email && !emailCodeVerified && (
 								<button
 									type="button"
 									onMouseDown={(e) => { e.preventDefault(); setEmail(""); }}
@@ -176,20 +333,14 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 						</div>
 						<button
 							type="button"
-							disabled={!isEmailValid}
+							disabled={!isEmailValid || emailCodeVerified}
-							className={`h-[40px] px-[12px] rounded-[8px] text-[16px] font-semibold ${isEmailValid ? "bg-inactive-button text-white" : "bg-gray-50 text-input-placeholder-text"}`}
+							className={`h-[40px] w-[130px] px-[12px] rounded-[8px] text-[16px] font-semibold ${isEmailValid && !emailCodeVerified ? "bg-[#F1F3F5] text-neutral-700" : "bg-gray-50 text-input-placeholder-text"}`}
-							onClick={() => {
+							onClick={sendEmailCode}
 								if (!isEmailValid) return;
 								alert("인증번호 전송 (가상 동작)");
 								setEmailCodeSent(true);
 								setEmailCode("");
 								setEmailCodeVerified(false);
 							}}
 						>
-							인증번호 전송
+							{emailCodeSent && !emailCodeVerified ? "인증번호 재전송" : "인증번호 전송"}
 						</button>
 					</div>
-					{errors.email && <p className="text-error text-[13px] leading-tight">{errors.email}</p>}
+					{errors.email && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.email}</p>}
 					{emailCodeSent && (
 						<div className="space-y-2" aria-expanded={emailCodeSent}>
 							<label htmlFor="emailCode" className="sr-only">인증번호</label>
@@ -207,7 +358,8 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 										onFocus={() => setFocused((p) => ({ ...p, emailCode: true }))}
 										onBlur={() => setFocused((p) => ({ ...p, emailCode: false }))}
 										placeholder="인증번호 6자리"
-										className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+										disabled={emailCodeVerified}
 										className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] disabled:bg-gray-100 disabled:cursor-not-allowed"
 									/>
 									{emailCode.trim().length > 0 && focused.emailCode && !emailCodeVerified && (
 										<button
@@ -223,19 +375,23 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 								<button
 									type="button"
 									disabled={emailCodeVerified}
-									className={`h-[40px] px-[12px] rounded-[8px] text-[16px] font-semibold ${!emailCodeVerified ? "bg-active-button text-white" : "bg-gray-50 text-input-placeholder-text"}`}
+									className={`h-[40px] w-[130px] px-[12px] rounded-[8px] text-[16px] font-semibold ${!emailCodeVerified ? "bg-[#F1F3F5] text-neutral-700" : "bg-gray-50 text-input-placeholder-text"}`}
-									onClick={() => {
+									onClick={verifyEmailCode}
 										// 가상 검증: 6자리면 성공, 아니면 에러 모달
 										if (emailCode.length !== 6) {
 											onOpenCodeError();
 											return;
 										}
 										setEmailCodeVerified(true);
 									}}
 								>
 									{emailCodeVerified ? "인증완료" : "인증하기"}
 								</button>
 							</div>
 							<p className="text-[13px] leading-[normal] text-[#384fbf]">
 								{emailCodeVerified ? (
 									"인증이 완료됐습니다"
 								) : (
 									<>
 										인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
 										<br />
 										이메일을 확인해 주세요.
 									</>
 								)}
 							</p>
 						</div>
 					)}
 				</div>
@@ -253,7 +409,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							onFocus={() => setFocused((p) => ({ ...p, password: true }))}
 							onBlur={() => setFocused((p) => ({ ...p, password: false }))}
 							placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
-							className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+							className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.password ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 						/>
 						{password.trim().length > 0 && focused.password && (
 							<button
@@ -266,7 +422,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							</button>
 						)}
 					</div>
-					{errors.password && <p className="text-error text-[13px] leading-tight">{errors.password}</p>}
+					{errors.password && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.password}</p>}
 				</div>
 				{/* 비밀번호 확인 */}
@@ -282,7 +438,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							onFocus={() => setFocused((p) => ({ ...p, passwordConfirm: true }))}
 							onBlur={() => setFocused((p) => ({ ...p, passwordConfirm: false }))}
 							placeholder="비밀번호를 다시 입력해 주세요."
-							className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+							className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.passwordConfirm ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 						/>
 						{passwordConfirm.trim().length > 0 && focused.passwordConfirm && (
 							<button
@@ -295,7 +451,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							</button>
 						)}
 					</div>
-					{errors.passwordConfirm && <p className="text-error text-[13px] leading-tight">{errors.passwordConfirm}</p>}
+					{errors.passwordConfirm && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.passwordConfirm}</p>}
 				</div>
 				{/* 성별 */}
@@ -306,13 +462,13 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							<input
 								type="radio"
 								name="gender"
-								value="male"
+								value="MALE"
-								checked={gender === "male"}
+								checked={gender === "MALE"}
-								onChange={() => setGender("male")}
+								onChange={() => setGender("MALE")}
 								className="sr-only"
 							/>
-							<span className={`inline-block rounded-full size-[18px] border ${gender === "male" ? "border-active-button" : "border-[#8c95a1]"}`}>
+							<span className={`relative inline-flex items-center justify-center rounded-full w-[18px] h-[18px] shrink-0 border box-border ${gender === "MALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
-								{gender === "male" && <span className="block size-[9px] rounded-full bg-active-button m-[4.5px]" />}
+								{gender === "MALE" && <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 block size-[9px] rounded-full bg-active-button" />}
 							</span>
 							남성
 						</label>
@@ -320,32 +476,74 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							<input
 								type="radio"
 								name="gender"
-								value="female"
+								value="FEMALE"
-								checked={gender === "female"}
+								checked={gender === "FEMALE"}
-								onChange={() => setGender("female")}
+								onChange={() => setGender("FEMALE")}
 								className="sr-only"
 							/>
-							<span className={`inline-block rounded-full size-[18px] border ${gender === "female" ? "border-active-button" : "border-[#8c95a1]"}`}>
+							<span className={`relative inline-flex items-center justify-center rounded-full w-[18px] h-[18px] shrink-0 border box-border ${gender === "FEMALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
-								{gender === "female" && <span className="block size-[9px] rounded-full bg-active-button m-[4.5px]" />}
+								{gender === "FEMALE" && <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 block size-[9px] rounded-full bg-active-button" />}
 							</span>
 							여성
 						</label>
 					</div>
-					{errors.gender && <p className="text-error text-[13px] leading-tight">{errors.gender}</p>}
+					{errors.gender && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.gender}</p>}
 				</div>
 				{/* 생년월일 */}
 				<div className="space-y-2">
 					<label htmlFor="birthdate" className="text-[15px] font-semibold text-[#6c7682]">생년월일</label>
 					<div className="relative">
 						<input
 							id="birthdate"
 							name="birthdate"
 							type="text"
 							value={birthdateInput || (birthdate ? birthdate.replace(/-/g, ".") : "")}
 							onChange={(e) => {
 								const inputValue = e.target.value;
 								setBirthdateInput(inputValue);
 								if (inputValue === "") {
 									setBirthdate("");
 								}
 							}}
 							onBlur={(e) => {
 								// 포커스를 잃을 때 YYYYMMDD 형식이면 변환
 								const formatted = parseBirthdate(e.target.value);
 								if (formatted) {
 									setBirthdate(formatted);
 									setBirthdateInput("");
 								} else if (e.target.value === "") {
 									setBirthdate("");
 									setBirthdateInput("");
 								}
 							}}
 							placeholder="생년월일"
 							className={`h-[40px] px-[12px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] flex items-center ${errors.birthdate ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
 						/>
 						<button
 							type="button"
 							onClick={(e) => {
 								e.preventDefault();
 								const dateInput = document.getElementById("birthdate-date-picker") as HTMLInputElement;
 								dateInput?.showPicker?.();
 							}}
 							className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
 							aria-label="날짜 선택"
 						>
 							<CalendarSvg width="20" height="20" />
 						</button>
 						<input
 							id="birthdate-date-picker"
 							type="date"
 							value={birthdate}
-						onChange={(e) => setBirthdate(e.target.value)}
+							onChange={(e) => {
-						className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[16px] text-neutral-700"
+								setBirthdate(e.target.value);
 								setBirthdateInput("");
 							}}
 							className="absolute right-50 top-1 h-full w-[20px] opacity-0 cursor-pointer"
 						/>
-					{errors.birthdate && <p className="text-error text-[13px] leading-tight">{errors.birthdate}</p>}
+					</div>
 					{errors.birthdate && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.birthdate}</p>}
 				</div>
 				{/* 약관 동의 */}
@@ -399,11 +597,11 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
 							</span>
 						</label>
 					</div>
-					{errors.agreements && <p className="text-error text-[13px] leading-tight">{errors.agreements}</p>}
+					{errors.agreements && <p className="text-error text-[13px] leading-tight mt-[10px]">{errors.agreements}</p>}
 				</div>
 				{/* 액션 버튼 */}
-				<div className="flex gap-3">
+				<div className="flex gap-3 pt-[60px]">
 					<Link
 						href="/login"
 						className="h-[40px] flex-1 rounded-[12px] bg-[#f1f3f5] text-[18px] font-semibold text-center flex items-center justify-center text-basic-text"
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -14,6 +14,7 @@ export default function RegisterPage() {
 	return (
 		<>
 			<div className="min-h-screen w-full flex flex-col items-center justify-between">
 				<RegisterForm
 					onOpenDone={() => setDoneOpen(true)}
 					onOpenCodeError={(msg) => {
@@ -21,6 +22,7 @@ export default function RegisterPage() {
 						setCodeErrorOpen(true);
 					}}
 				/>
 				<RegisterOption
 					doneOpen={doneOpen}
 					setDoneOpen={setDoneOpen}
--- a/src/app/reset-password/page.tsx
+++ b/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);
@@ -14,13 +15,18 @@ export default function ResetPasswordPage() {
 	const [focused, setFocused] = useState<Record<string, boolean>>({});
 	const [errors, setErrors] = useState<Record<string, string>>({});
 	// 인증번호 관련 상태
 	const [emailCodeSent, setEmailCodeSent] = useState(false);
 	const [emailCode, setEmailCode] = useState("");
 	const [emailCodeVerified, setEmailCodeVerified] = useState(false);
 	const isEmailValid = useMemo(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email), [email]);
 	const isPasswordValid = useMemo(() => password.length >= 8 && password.length <= 16, [password]);
 	const isPasswordConfirmValid = useMemo(() => passwordConfirm === password && passwordConfirm.length > 0, [password, passwordConfirm]);
 	const canSubmit = useMemo(() => {
-		return isEmailValid && isPasswordValid && isPasswordConfirmValid;
+		return isEmailValid && isPasswordValid && isPasswordConfirmValid && emailCodeVerified;
-	}, [isEmailValid, isPasswordValid, isPasswordConfirmValid]);
+	}, [isEmailValid, isPasswordValid, isPasswordConfirmValid, emailCodeVerified]);
 	function validateAll() {
 		const nextErrors: Record<string, string> = {};
@@ -31,11 +37,63 @@ export default function ResetPasswordPage() {
 		return Object.keys(nextErrors).length === 0;
 	}
-	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+	async function handleSendVerificationCode() {
 		if (!isEmailValid) return;
 		try {
 			await apiService.sendPasswordReset(email);
 			// 성공 시 상태 업데이트
 			setEmailCodeSent(true);
 			setEmailCode("");
 			setEmailCodeVerified(false);
 			// 성공 시 에러 메시지 제거
 			setErrors((prev) => {
 				const next = { ...prev };
 				delete next.email;
 				return next;
 			});
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			console.error("인증번호 전송 오류:", errorMessage);
 			setErrors((prev) => ({ ...prev, email: errorMessage }));
 		}
 	}
 	async function verifyEmailCode() {
 		try {
 			await apiService.verifyPasswordResetCode(email, emailCode);
 			// 인증 성공 시 상태 업데이트
 			setEmailCodeVerified(true);
 			// 성공 시 에러 메시지 제거
 			setErrors((prev) => {
 				const next = { ...prev };
 				delete next.emailCode;
 				return next;
 			});
 		} catch (error) {
 			let errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			// 특정 에러 메시지를 사용자 친화적인 메시지로 변경
 			if (errorMessage.includes("잘못되었거나 만료된 코드") || errorMessage.includes("잘못되었거나") || errorMessage.includes("만료된")) {
 				errorMessage = "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.";
 			}
 			console.error("인증번호 확인 오류:", errorMessage);
 			setErrors((prev) => ({ ...prev, emailCode: errorMessage }));
 		}
 	}
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault();
 		if (!validateAll()) return;
 		try {
 			await apiService.resetPassword(email, emailCode, password, passwordConfirm);
 			// 성공 시 완료 오버레이 표시
 			setIsDoneOpen(true);
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			console.error("비밀번호 재설정 오류:", errorMessage);
 			setErrors((prev) => ({ ...prev, submit: errorMessage }));
 		}
 	}
 	return (
@@ -53,7 +111,7 @@ export default function ResetPasswordPage() {
 					<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
 						비밀번호 재설정
 					</div>
-					<p className="mt-2 text-[18px] font-normal leading-[150%] text-[#6c7682]">
+					<p className="mt-2 text-[18px] font-normal leading-[150%] text-text-label">
 						비밀번호 재설정을 위해 아래 정보를 입력해 주세요.
 					</p>
 				</div>
@@ -61,7 +119,7 @@ export default function ResetPasswordPage() {
 				<form onSubmit={handleSubmit} className="space-y-6">
 					{/* 아이디(이메일) + 인증번호 전송 */}
 					<div className="space-y-2">
-						<label htmlFor="email" className="text-[15px] font-semibold text-[#6c7682]">아이디 (이메일)</label>
+						<label htmlFor="email" className="text-[15px] font-semibold text-text-label">아이디 (이메일)</label>
 						<div className="flex gap-2 items-center">
 							<div className="relative flex-1">
 								<input
@@ -73,9 +131,10 @@ export default function ResetPasswordPage() {
 									onFocus={() => setFocused((p) => ({ ...p, email: true }))}
 									onBlur={() => setFocused((p) => ({ ...p, email: false }))}
 									placeholder="이메일을 입력해 주세요."
-									className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
+									disabled={emailCodeVerified}
 									className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] disabled:bg-gray-100 disabled:cursor-not-allowed ${emailCodeVerified ? '' : (errors.email ? 'border-error' : 'border-neutral-40 focus:border-neutral-700')}`}
 								/>
-								{email.trim().length > 0 && focused.email && (
+								{email.trim().length > 0 && focused.email && !emailCodeVerified && (
 									<button
 										type="button"
 										onMouseDown={(e) => { e.preventDefault(); setEmail(""); }}
@@ -88,22 +147,75 @@ export default function ResetPasswordPage() {
 							</div>
 							<button
 								type="button"
-								disabled={!isEmailValid}
+								disabled={!isEmailValid || emailCodeVerified}
-								className={`h-[40px] px-[12px] rounded-[8px] text-[16px] font-semibold ${isEmailValid ? "bg-inactive-button text-white" : "bg-gray-50 text-input-placeholder-text"}`}
+								className={`h-[40px] w-[130px] px-[12px] rounded-[8px] text-[16px] font-semibold ${isEmailValid && !emailCodeVerified ? "bg-[#F1F3F5] text-neutral-700" : "bg-gray-50 text-input-placeholder-text"}`}
-								onClick={() => {
+								onClick={handleSendVerificationCode}
 									if (!isEmailValid) return;
 									alert("인증번호 전송 (가상 동작)");
 								}}
 							>
-								인증번호 전송
+								{emailCodeSent && !emailCodeVerified ? "인증번호 재전송" : "인증번호 전송"}
 							</button>
 						</div>
 						{errors.email && <p className="text-error text-[13px] leading-tight">{errors.email}</p>}
 						{emailCodeSent && (
 							<div className="space-y-2" aria-expanded={emailCodeSent}>
 								<label htmlFor="emailCode" className="sr-only">인증번호</label>
 								<div className="flex gap-2 items-center">
 									<div className="relative flex-1">
 										<input
 											id="emailCode"
 											name="emailCode"
 											inputMode="numeric"
 											value={emailCode}
 											onChange={(e) => {
 												const onlyDigits = e.target.value.replace(/[^0-9]/g, "");
 												setEmailCode(onlyDigits.slice(0, 6));
 											}}
 											onFocus={() => setFocused((p) => ({ ...p, emailCode: true }))}
 											onBlur={() => setFocused((p) => ({ ...p, emailCode: false }))}
 											placeholder="인증번호 6자리"
 											disabled={emailCodeVerified}
 											className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] disabled:bg-gray-100 disabled:cursor-not-allowed"
 										/>
 										{emailCode.trim().length > 0 && focused.emailCode && !emailCodeVerified && (
 											<button
 												type="button"
 												onMouseDown={(e) => { e.preventDefault(); setEmailCode(""); }}
 												aria-label="입력 지우기"
 												className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
 											>
 												<LoginInputSvg />
 											</button>
 										)}
 									</div>
 									<button
 										type="button"
 										disabled={emailCodeVerified || emailCode.trim().length === 0}
 										className={`h-[40px] w-[130px] px-[12px] rounded-[8px] text-[16px] font-semibold ${!emailCodeVerified && emailCode.trim().length > 0 ? "bg-[#F1F3F5] text-neutral-700" : "bg-gray-50 text-input-placeholder-text"}`}
 										onClick={verifyEmailCode}
 									>
 										{emailCodeVerified ? "인증완료" : "인증하기"}
 									</button>
 								</div>
 								{!errors.emailCode && (
 									<p className="text-[13px] leading-[normal] text-primary">
 										{emailCodeVerified ? (
 											"인증이 완료됐습니다"
 										) : (
 											<>
 												인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
 												<br />
 												이메일을 확인해 주세요.
 											</>
 										)}
 									</p>
 								)}
 								{errors.emailCode && <p className="text-error text-[13px] leading-tight">{errors.emailCode}</p>}
 							</div>
 						)}
 					</div>
 					{/* 새 비밀번호 */}
 					<div className="space-y-2">
-						<label htmlFor="password" className="text-[15px] font-semibold text-[#6c7682]">새 비밀번호</label>
+						<label htmlFor="password" className="text-[15px] font-semibold text-text-label">새 비밀번호</label>
 						<div className="relative">
 							<input
 								id="password"
@@ -132,7 +244,7 @@ export default function ResetPasswordPage() {
 					{/* 새 비밀번호 확인 */}
 					<div className="space-y-2">
-						<label htmlFor="passwordConfirm" className="text-[15px] font-semibold text-[#6c7682]">새 비밀번호 확인</label>
+						<label htmlFor="passwordConfirm" className="text-[15px] font-semibold text-text-label">새 비밀번호 확인</label>
 						<div className="relative">
 							<input
 								id="passwordConfirm"
@@ -163,7 +275,7 @@ export default function ResetPasswordPage() {
 					<div className="flex gap-3">
 						<Link
 							href="/login"
-							className="h-[40px] flex-1 rounded-[12px] bg-[#f1f3f5] text-[18px] font-semibold text-center flex items-center justify-center text-basic-text"
+							className="h-[40px] flex-1 rounded-[12px] bg-bg-gray-light text-[18px] font-semibold text-center flex items-center justify-center text-basic-text"
 						>
 							이전
 						</Link>
--- a/src/app/resources/[id]/page.tsx
+++ b/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 = {
+type Attachment = {
-  id: number;
+  name: string;
-  title: string;
+  size: string;
-  date: string;
+  url?: string;
-  views: number;
+  fileKey?: string;
  writer: string;
  content: string[];
  attachments?: Array<{ name: string; size: string; url: string }>;
 };
-const DATA: ResourceRow[] = [
+export default function ResourceDetailPage() {
-  {
+  const params = useParams();
-    id: 6,
+  const router = useRouter();
-    title: '방사선과 물질의 상호작용 관련 학습 자료',
+  const [resource, setResource] = useState<Resource | null>(null);
-    date: '2025-06-28',
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
-    views: 1230,
+  const [loading, setLoading] = useState(true);
-    writer: '강민재',
+  const [error, setError] = useState<string | null>(null);
    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 async function ResourceDetailPage({
+  useEffect(() => {
-  params,
+    async function fetchResource() {
-}: {
+      if (!params?.id) return;
-  params: Promise<{ id: string }>;
+
-}) {
+      try {
-  const { id } = await params;
+        setLoading(true);
-  const numericId = Number(id);
+        setError(null);
-  const item = DATA.find((r) => r.id === numericId);
+        
-  if (!item) return notFound();
+        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) => (
+                  {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>
                        {f.size && (
                          <span className="text-[13px] text-[#8C95A1] whitespace-nowrap">
                            {f.size}
                          </span>
                        )}
                      </div>
-                      <a
+                      <button
-                        href={f.url}
+                        type="button"
-                        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"
+                        onClick={() => handleDownload(f.fileKey, f.url, f.name)}
-                        download
+                        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>
+                        <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
                          <path
                            d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                        다운로드
-                      </a>
+                      </button>
                    </div>
                  ))}
                </div>
-              ) : null}
+              )}
            </div>
          </section>
        </div>
--- a/src/app/resources/page.tsx
+++ b/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';
-
+import ChevronDownSvg from '../svgs/chevrondownsvg';
-type ResourceRow = {
+import apiService from '../lib/apiService';
-  id: number;
+import type { Resource } from '../admin/resources/mockData';
  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: '강민재',
  },
 ];
 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,14 +109,28 @@ 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>
            {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>
            ) : 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-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
+                  <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>
@@ -97,50 +143,139 @@ export default function ResourcesPage() {
                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
                      조회수
                    </div>
-                <div className="flex items-center px-4 whitespace-nowrap">등록자</div>
+                    <div className="flex items-center px-4 whitespace-nowrap">작성자</div>
                  </div>
                  {/* 바디 */}
                  <div>
-                {rows.map((r) => (
+                    {paginatedResources.map((resource, index) => {
                      // 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
                      const resourceNumber = sortedResources.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
                      return (
                        <div
-                    key={r.id}
+                          key={resource.id}
                          role="button"
                          tabIndex={0}
-                    onClick={() => router.push(`/resources/${r.id}`)}
+                          onClick={() => router.push(`/resources/${resource.id}`)}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter' || e.key === ' ') {
                              e.preventDefault();
-                        router.push(`/resources/${r.id}`);
+                              router.push(`/resources/${resource.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',
+                            '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-2 whitespace-nowrap border-r border-[#DEE1E6]">
+                          <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                      {r.id}
+                            {resourceNumber}
                          </div>
                          <div
                            className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
-                      title={r.title}
+                            title={resource.title}
                          >
-                      {r.title}
+                            {resource.title}
-                      {r.hasAttachment && (
+                            {resource.hasAttachment && (
                              <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
                            )}
                          </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                      {r.date}
+                            {formatDate(resource.date)}
                          </div>
-                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                          <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
-                      {r.views.toLocaleString()}
+                            {resource.views.toLocaleString()}
                          </div>
-                    <div className="flex items-center px-4">{r.writer}</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>
--- a/src/app/svgs/callendar.tsx
+++ b/src/app/svgs/callendar.tsx
@@ -0,0 +1,46 @@
 import React from "react";
 const CalendarSvg: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
    <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
    >
        <path
            d="M16 2V6"
            stroke="#333C47"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M8 2V6"
            stroke="#333C47"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M3 9H21"
            stroke="#333C47"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M19 4H5C3.895 4 3 4.895 3 6V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V6C21 4.895 20.105 4 19 4Z"
            stroke="#333C47"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <rect x="3" y="4" width="18" height="5" rx="2" fill="#333C47" />
    </svg>
 );
 export default CalendarSvg;
--- a/src/app/svgs/downloadicon.tsx
+++ b/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>
  );
 }
--- a/src/lib/prisma.ts
+++ b/src/lib/prisma.ts
@@ -1,14 +0,0 @@
 import { PrismaClient } from '@prisma/client';
 const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
 };
 export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
  });
 if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -0,0 +1,57 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  // 공개 경로 (인증 불필요)
  const publicPaths = [
    '/login',
    '/register',
    '/find-id',
    '/reset-password',
  ];
  // 정적 파일 및 API 경로는 제외
  if (
    pathname.startsWith('/_next') ||
    pathname.startsWith('/api') ||
    pathname.startsWith('/fonts') ||
    pathname.startsWith('/imgs') ||
    pathname.match(/\.(ico|png|jpg|jpeg|svg|woff|woff2)$/)
  ) {
    return NextResponse.next();
  }
  // 공개 경로는 통과
  if (publicPaths.some(path => pathname.startsWith(path))) {
    return NextResponse.next();
  }
  // 토큰 확인 (쿠키에서)
  const token = request.cookies.get('token')?.value;
  // 토큰이 없으면 로그인 페이지로 리다이렉트
  if (!token) {
    const loginUrl = new URL('/login', request.url);
    // 원래 요청한 경로를 쿼리 파라미터로 저장 (로그인 후 돌아갈 수 있도록)
    loginUrl.searchParams.set('redirect', pathname);
    return NextResponse.redirect(loginUrl);
  }
  return NextResponse.next();
 }
 export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
 };
Author	SHA1	Message	Date
wallace	3ef3990f1d	교육과정정 상세보기 수정1	2025-12-01 11:31:09 +09:00
wallace	8ec9e4e402	loginpage 반응형형	2025-12-01 10:46:10 +09:00
wallace	8bdd615ec9	메일페이지 수정중1	2025-12-01 09:56:04 +09:00
wallace	54d763e008	banner page	2025-11-30 00:25:16 +09:00
wallace	109ca05e23	공지사항 admin ok	2025-11-29 23:57:31 +09:00
wallace	eb7871133d	공지사항 삭제등록 등11	2025-11-29 15:40:39 +09:00
wallace	872a88866e	idonknow	2025-11-29 14:27:01 +09:00
wallace	91d14fdabf	공지사항, csv 표출 작업1	2025-11-29 13:41:13 +09:00
wallace	39d21a475b	api link to page	2025-11-29 13:00:50 +09:00
wallace	32e9fed5cd	instructor page	2025-11-28 21:54:39 +09:00
wallace	5e4337c7e8	강사페이지	2025-11-28 21:45:31 +09:00
wallace	5a26d96386	강좌 삭제 구현1	2025-11-28 21:37:05 +09:00
wallace	03b4fa108a	강좌 수정 삭제 작업중1	2025-11-28 20:33:25 +09:00
wallace	7db3b7732c	교육과정, 강의등록 완료1	2025-11-28 19:52:32 +09:00
wallace	adae8b130b	login 수정1	2025-11-28 15:40:39 +09:00
wallace	04feb84192	비밀번호 변경 수정2	2025-11-28 14:49:56 +09:00
wallace	c021303182	api 재활용2	2025-11-28 14:27:35 +09:00
wallace	c91dd4a30f	API 재활용1	2025-11-28 14:26:54 +09:00
wallace	0963cfdf5b	교육과정 관리 등록	2025-11-27 21:31:18 +09:00
wallace	b1e2f6012c	권한설정 페이지 수정/student만	2025-11-27 20:36:38 +09:00
wallace	91c886298c	123	2025-11-27 19:31:19 +09:00
wallace	e2b7330c5e	교육과정 관리 이미지 미리보기1	2025-11-27 01:00:36 +09:00
wallace	5a2d770589	global css 적용, 권한설정 완료1	2025-11-27 00:45:55 +09:00
wallace	5a5cf3e9e6	계정 suspend	2025-11-26 21:43:28 +09:00
wallace	53a5713ddd	회원 불러오기 작업하는 중1	2025-11-26 21:40:56 +09:00
wallace	47eedf6837	자동로그인, 아이디 패스워드 찾기 적용1	2025-11-26 20:38:03 +09:00
wallace	6434c580fe	idfind 수정정	2025-11-26 18:23:42 +09:00
wallace	6bfa2f367d	idfind api 적용1	2025-11-25 22:51:12 +09:00
wallace	4c52627c2c	find-id 디자인 수정중1	2025-11-25 12:38:11 +09:00
wallace	53dea825b0	register form redesign	2025-11-25 11:02:18 +09:00
wallace	71feecb8d1	file rename	2025-11-25 10:30:17 +09:00
wallace	e74061057d	middleware	2025-11-25 00:03:05 +09:00
wallace	12413795f4	회원가입 api	2025-11-24 23:31:05 +09:00
wallace	7e122453bb	아이디찾기 post	2025-11-24 22:50:42 +09:00
wallace	eaec13e386	내부 api 삭제	2025-11-24 22:50:28 +09:00
wallace	74eee0a3c0	register api	2025-11-24 22:14:46 +09:00