✨ 노트북 관리 UI 완성

🎯 주요 개선사항: - 노트북 목록 조회/표시 기능 완성 - 노트북 생성/편집/삭제 모달 구현 - 토스트 알림 시스템 추가 (alert 대신) - 노트북 통계 대시보드 표시 - 노트북별 노트 관리 및 빠른 노트 생성 기능 - URL 파라미터를 통한 노트북 자동 설정 🔧 기술적 개선: - CSS line-clamp 클래스 추가 - 필드명 불일치 수정 (notebook.name → notebook.title) - 삭제 확인 모달로 UX 개선 - 노트 에디터에서 노트북 자동 설정 지원 📱 UI/UX 개선: - 노트북 카드 호버 효과 및 색상 테마 - 빈 노트북 상태 처리 및 안내 - 반응형 그리드 레이아웃 - 로딩 상태 및 에러 처리 개선
2025-09-02 16:38:47 +09:00
parent d01cdeb2f5
commit 0dc4e3523f
6 changed files with 632 additions and 24 deletions
--- a/README.md
+++ b/README.md
@@ -103,7 +103,8 @@ PDF 문서를 OCR 처리하고 AI로 HTML로 변환한 후, 웹에서 효율적

 ### 인프라 & 배포
 - **컨테이너**: Docker 24+ & Docker Compose
- **배포 환경**: Mac Mini / Synology NAS
+- **주 배포 환경**: Synology DS1525+ (32GB RAM, SSD 캐싱)
+- **보조 배포 환경**: Mac Mini (개발/테스트)
 - **프로세스 관리**: Docker (컨테이너 오케스트레이션)
 - **로그 관리**: Python logging + 파일 로테이션
 - **모니터링**: 기본 헬스체크 (향후 Prometheus + Grafana)
@@ -231,18 +232,30 @@ notes (
 - [x] API 오류 처리 및 사용자 피드백
 - [x] 실시간 문서 목록 새로고침

-### Phase 7: 최우선 개선사항 (진행 중) 🔥
- [ ] **메모-하이라이트 통합**: 하이라이트 기반 메모 기능 완전 통합
- [ ] **노트 뷰어 기능**: 노트에서 하이라이트, 메모, 링크 등 모든 기능 지원
- [ ] **API 구조 정리**: 메모(`/api/notes/`) vs 노트(`/api/note-documents/`) 명확한 분리
- [ ] **용어 통일**: 전체 시스템에서 메모/노트 용어 일관성 확보
+### Phase 7: 최우선 개선사항 ✅
+- [x] **메모-하이라이트 통합**: 하이라이트 기반 메모 기능 완전 통합
+- [x] **노트 뷰어 기능**: 노트에서 하이라이트, 메모, 링크 등 모든 기능 지원
+- [x] **API 구조 정리**: 메모(`/api/notes/`) vs 노트(`/api/note-documents/`) 명확한 분리
+- [x] **용어 통일**: 전체 시스템에서 메모/노트 용어 일관성 확보
+- [x] **노트북-서적 링크 시스템**: 양방향 링크/백링크 완전 구현

-### Phase 8: 향후 개선사항 (예정)
+### Phase 8: 미완성 핵심 기능 (우선순위) 🚧
+- [x] **노트 편집기**: 노트 생성/편집 UI 완성 (`/note-editor.html`) ✅
+- [x] **노트북 관리 API**: 노트북 CRUD 백엔드 완성 ✅
+- [x] **노트북 관리 UI**: 프론트엔드 CRUD 기능 완성 (`/notebooks.html`) ✅
+  - 노트북 목록 조회/표시, 생성/편집/삭제 모달
+  - 토스트 알림 시스템, 통계 대시보드
+  - 노트북별 노트 관리 및 빠른 노트 생성
+- [ ] **메모 트리 시스템**: 계층적 메모 구조 및 관리 (`/memo-tree.html` 완성)
+- [ ] **고급 검색**: 문서/노트/메모 통합 검색 필터링
+- [ ] **사용자 관리**: 다중 사용자 지원 및 권한 관리
+
+### Phase 9: 관리 및 최적화 (예정)
 - [ ] 관리자 대시보드 UI
 - [ ] 문서 통계 및 분석
 - [ ] 모바일 반응형 최적화
- [ ] 고급 검색 필터
 - [ ] 문서 버전 관리
+- [ ] 성능 최적화 및 캐싱

 ## 현재 상태 (2025-08-21)

@@ -289,6 +302,192 @@ docker-compose -f docker-compose.dev.yml up
 docker-compose -f docker-compose.prod.yml up -d
 ```

+## 🏢 Synology DS1525+ 최적화 배포
+
+### 하드웨어 사양
+- **모델**: Synology DS1525+ (5-Bay NAS)
+- **CPU**: AMD Ryzen R1600 (4코어/8스레드)
+- **메모리**: 32GB DDR4 ECC
+- **스토리지**: SSD 읽기/쓰기 캐싱 활성화
+- **네트워크**: 기가비트 이더넷
+
+### 스토리지 최적화 전략
+
+#### SSD 배치 (고성능 요구)
+```bash
+# 시스템 및 고빈도 액세스 데이터
+/volume1/docker/document-server/
+├── database/          # PostgreSQL 데이터 (SSD)
+├── redis/            # Redis 캐시 (SSD)
+├── logs/             # 애플리케이션 로그 (SSD)
+└── config/           # 설정 파일 (SSD)
+```
+
+#### HDD 배치 (대용량 저장)
+```bash
+# 대용량 파일 저장소
+/volume2/document-storage/
+├── documents/        # HTML 문서 파일 (HDD)
+├── uploads/          # 업로드된 원본 파일 (HDD)
+├── backups/          # 데이터베이스 백업 (HDD)
+└── archives/         # 아카이브 파일 (HDD)
+```
+
+### Docker Compose 최적화 설정
+
+#### 볼륨 매핑 (docker-compose.synology.yml)
+```yaml
+version: '3.8'
+
+services:
+  database:
+    volumes:
+      # SSD: 데이터베이스 성능 최적화
+      - /volume1/docker/document-server/database:/var/lib/postgresql/data
+      
+  redis:
+    volumes:
+      # SSD: 캐시 성능 최적화
+      - /volume1/docker/document-server/redis:/data
+      
+  backend:
+    volumes:
+      # SSD: 로그 및 설정
+      - /volume1/docker/document-server/logs:/app/logs
+      - /volume1/docker/document-server/config:/app/config
+      # HDD: 대용량 파일 저장
+      - /volume2/document-storage/uploads:/app/uploads
+      - /volume2/document-storage/documents:/app/documents
+      
+  nginx:
+    volumes:
+      # SSD: 설정 및 캐시
+      - /volume1/docker/document-server/nginx:/etc/nginx/conf.d
+      # HDD: 정적 파일 서빙
+      - /volume2/document-storage/documents:/usr/share/nginx/html/documents:ro
+```
+
+### 시놀로지 환경 배포 명령어
+
+```bash
+# 1. 디렉토리 생성
+sudo mkdir -p /volume1/docker/document-server/{database,redis,logs,config,nginx}
+sudo mkdir -p /volume2/document-storage/{documents,uploads,backups,archives}
+
+# 2. 권한 설정
+sudo chown -R 1000:1000 /volume1/docker/document-server/
+sudo chown -R 1000:1000 /volume2/document-storage/
+
+# 3. 시놀로지 최적화 배포
+docker-compose -f docker-compose.synology.yml up -d
+
+# 4. 서비스 상태 확인
+docker-compose -f docker-compose.synology.yml ps
+```
+
+### 성능 최적화 설정
+
+#### PostgreSQL 튜닝 (32GB RAM 환경)
+```ini
+# postgresql.conf
+shared_buffers = 8GB                    # RAM의 25%
+effective_cache_size = 24GB             # RAM의 75%
+work_mem = 256MB                        # 복잡한 쿼리용
+maintenance_work_mem = 2GB              # 인덱스 구축용
+checkpoint_completion_target = 0.9      # SSD 최적화
+wal_buffers = 64MB                      # WAL 버퍼
+random_page_cost = 1.1                  # SSD 환경 최적화
+```
+
+#### Redis 설정 (캐싱 최적화)
+```conf
+# redis.conf
+maxmemory 4gb                           # 캐시 메모리 제한
+maxmemory-policy allkeys-lru            # LRU 정책
+save 900 1                              # 자동 저장 설정
+save 300 10
+save 60 10000
+```
+
+### 백업 전략
+
+#### 자동 백업 스크립트
+```bash
+#!/bin/bash
+# /volume1/docker/document-server/scripts/backup.sh
+
+BACKUP_DIR="/volume2/document-storage/backups"
+DATE=$(date +%Y%m%d_%H%M%S)
+
+# 데이터베이스 백업
+docker-compose -f docker-compose.synology.yml exec -T database \
+  pg_dump -U postgres document_server > "$BACKUP_DIR/db_backup_$DATE.sql"
+
+# 설정 파일 백업
+tar -czf "$BACKUP_DIR/config_backup_$DATE.tar.gz" \
+  /volume1/docker/document-server/config/
+
+# 7일 이상 된 백업 파일 삭제
+find "$BACKUP_DIR" -name "*.sql" -mtime +7 -delete
+find "$BACKUP_DIR" -name "*.tar.gz" -mtime +7 -delete
+
+echo "Backup completed: $DATE"
+```
+
+#### 시놀로지 작업 스케줄러 설정
+```bash
+# 매일 새벽 2시 자동 백업
+# 제어판 > 작업 스케줄러 > 생성 > 사용자 정의 스크립트
+0 2 * * * /volume1/docker/document-server/scripts/backup.sh
+```
+
+### 모니터링 및 유지보수
+
+#### 리소스 모니터링
+```bash
+# 컨테이너 리소스 사용량 확인
+docker stats
+
+# 디스크 사용량 확인
+df -h /volume1 /volume2
+
+# 시놀로지 시스템 상태
+cat /proc/meminfo | grep -E "MemTotal|MemAvailable"
+```
+
+#### 로그 로테이션 설정
+```bash
+# /etc/logrotate.d/document-server
+/volume1/docker/document-server/logs/*.log {
+    daily
+    rotate 30
+    compress
+    delaycompress
+    missingok
+    notifempty
+    create 644 1000 1000
+    postrotate
+        docker-compose -f docker-compose.synology.yml restart backend
+    endscript
+}
+```
+
+### 네트워크 최적화
+
+#### 포트 포워딩 설정
+- **외부 포트**: 24100 (HTTPS 리버스 프록시 권장)
+- **내부 포트**: 24100 (Nginx)
+- **방화벽**: 필요한 포트만 개방
+
+#### SSL/TLS 설정 (Let's Encrypt)
+```bash
+# Certbot을 통한 SSL 인증서 자동 갱신
+docker run --rm -v /volume1/docker/document-server/ssl:/etc/letsencrypt \
+  certbot/certbot certonly --webroot \
+  -w /volume2/document-storage/documents \
+  -d your-domain.com
+```
+
 ## API 엔드포인트 (예상)

 ### 인증 관리
--- a/config/postgresql.synology.conf
+++ b/config/postgresql.synology.conf
@@ -0,0 +1,91 @@
+# PostgreSQL 설정 - Synology DS1525+ 최적화 (32GB RAM)
+# /volume1/docker/document-server/config/postgresql.conf
+
+# 메모리 설정 (32GB RAM 환경)
+shared_buffers = 8GB                    # RAM의 25% (8GB)
+effective_cache_size = 24GB             # RAM의 75% (24GB)
+work_mem = 256MB                        # 복잡한 쿼리용 (정렬, 해시 조인)
+maintenance_work_mem = 2GB              # 인덱스 구축, VACUUM용
+
+# 체크포인트 설정 (SSD 최적화)
+checkpoint_completion_target = 0.9      # 체크포인트 분산 (SSD 수명 연장)
+checkpoint_timeout = 15min              # 체크포인트 간격
+max_wal_size = 4GB                      # WAL 파일 최대 크기
+min_wal_size = 1GB                      # WAL 파일 최소 크기
+
+# WAL 설정
+wal_buffers = 64MB                      # WAL 버퍼 크기
+wal_writer_delay = 200ms                # WAL 쓰기 지연
+commit_delay = 0                        # 커밋 지연 (SSD에서는 0)
+
+# 비용 기반 최적화 (SSD 환경)
+random_page_cost = 1.1                  # SSD는 랜덤 액세스가 빠름
+seq_page_cost = 1.0                     # 순차 액세스 기준값
+cpu_tuple_cost = 0.01                   # CPU 튜플 처리 비용
+cpu_index_tuple_cost = 0.005            # 인덱스 튜플 처리 비용
+cpu_operator_cost = 0.0025              # 연산자 처리 비용
+
+# 연결 설정
+max_connections = 200                   # 최대 연결 수
+superuser_reserved_connections = 3      # 슈퍼유저 예약 연결
+
+# 쿼리 플래너 설정
+default_statistics_target = 100         # 통계 정확도
+constraint_exclusion = partition        # 파티션 제약 조건 최적화
+enable_partitionwise_join = on          # 파티션별 조인 최적화
+enable_partitionwise_aggregate = on     # 파티션별 집계 최적화
+
+# 백그라운드 작업자 설정
+max_worker_processes = 8                # 최대 워커 프로세스 (CPU 코어 수)
+max_parallel_workers_per_gather = 4     # 병렬 쿼리 워커
+max_parallel_workers = 8                # 전체 병렬 워커
+max_parallel_maintenance_workers = 4    # 병렬 유지보수 워커
+
+# 자동 VACUUM 설정
+autovacuum = on                         # 자동 VACUUM 활성화
+autovacuum_max_workers = 3              # VACUUM 워커 수
+autovacuum_naptime = 1min               # VACUUM 실행 간격
+autovacuum_vacuum_threshold = 50        # VACUUM 임계값
+autovacuum_analyze_threshold = 50       # ANALYZE 임계값
+autovacuum_vacuum_scale_factor = 0.2    # VACUUM 스케일 팩터
+autovacuum_analyze_scale_factor = 0.1   # ANALYZE 스케일 팩터
+
+# 로깅 설정
+log_destination = 'stderr'              # 로그 출력 대상
+logging_collector = off                 # Docker 환경에서는 off
+log_min_messages = warning              # 최소 로그 레벨
+log_min_error_statement = error         # 에러 문장 로그
+log_min_duration_statement = 1000       # 1초 이상 쿼리 로깅
+log_checkpoints = on                    # 체크포인트 로깅
+log_connections = off                   # 연결 로깅 (성능상 off)
+log_disconnections = off                # 연결 해제 로깅 (성능상 off)
+log_lock_waits = on                     # 락 대기 로깅
+log_temp_files = 10MB                   # 임시 파일 로깅 (10MB 이상)
+
+# 전문 검색 설정
+default_text_search_config = 'pg_catalog.english'
+
+# 시간대 설정
+timezone = 'Asia/Seoul'
+log_timezone = 'Asia/Seoul'
+
+# 문자 인코딩
+lc_messages = 'C'
+lc_monetary = 'C'
+lc_numeric = 'C'
+lc_time = 'C'
+
+# 기타 성능 설정
+effective_io_concurrency = 200          # SSD 동시 I/O (SSD는 높게)
+maintenance_io_concurrency = 10         # 유지보수 I/O 동시성
+wal_compression = on                    # WAL 압축 (디스크 절약)
+full_page_writes = on                   # 전체 페이지 쓰기 (안정성)
+
+# JIT 컴파일 설정 (PostgreSQL 11+)
+jit = on                               # JIT 컴파일 활성화
+jit_above_cost = 100000                # JIT 활성화 비용 임계값
+jit_inline_above_cost = 500000         # 인라인 JIT 비용 임계값
+jit_optimize_above_cost = 500000       # 최적화 JIT 비용 임계값
+
+# 확장 모듈 설정
+shared_preload_libraries = 'pg_stat_statements'  # 쿼리 통계 모듈
--- a/docker-compose.synology.yml
+++ b/docker-compose.synology.yml
@@ -0,0 +1,154 @@
+version: '3.8'
+
+services:
+  # PostgreSQL 데이터베이스 (SSD 최적화)
+  database:
+    image: postgres:15-alpine
+    container_name: document-server-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: document_server
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-postgres123}
+      POSTGRES_INITDB_ARGS: "--encoding=UTF8 --locale=C"
+    volumes:
+      # SSD: 데이터베이스 성능 최적화
+      - /volume1/docker/document-server/database:/var/lib/postgresql/data
+      - /volume1/docker/document-server/config/postgresql.conf:/etc/postgresql/postgresql.conf:ro
+    ports:
+      - "24101:5432"
+    command: >
+      postgres
+      -c config_file=/etc/postgresql/postgresql.conf
+      -c shared_buffers=8GB
+      -c effective_cache_size=24GB
+      -c work_mem=256MB
+      -c maintenance_work_mem=2GB
+      -c checkpoint_completion_target=0.9
+      -c wal_buffers=64MB
+      -c random_page_cost=1.1
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - document-network
+
+  # Redis 캐시 (SSD 최적화)
+  redis:
+    image: redis:7-alpine
+    container_name: document-server-redis
+    restart: unless-stopped
+    volumes:
+      # SSD: 캐시 성능 최적화
+      - /volume1/docker/document-server/redis:/data
+    ports:
+      - "24103:6379"
+    command: >
+      redis-server
+      --maxmemory 4gb
+      --maxmemory-policy allkeys-lru
+      --save 900 1
+      --save 300 10
+      --save 60 10000
+      --appendonly yes
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - document-network
+
+  # FastAPI 백엔드
+  backend:
+    build: 
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: document-server-backend
+    restart: unless-stopped
+    environment:
+      - DATABASE_URL=postgresql://postgres:${DB_PASSWORD:-postgres123}@database:5432/document_server
+      - REDIS_URL=redis://redis:6379
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-your-super-secret-jwt-key-change-this-in-production}
+      - ENVIRONMENT=production
+      - LOG_LEVEL=INFO
+    volumes:
+      # SSD: 로그 및 설정 (빠른 액세스)
+      - /volume1/docker/document-server/logs:/app/logs
+      - /volume1/docker/document-server/config:/app/config
+      # HDD: 대용량 파일 저장 (비용 효율적)
+      - /volume2/document-storage/uploads:/app/uploads
+      - /volume2/document-storage/documents:/app/documents
+    ports:
+      - "24102:8000"
+    depends_on:
+      database:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - document-network
+
+  # Nginx 웹서버
+  nginx:
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    container_name: document-server-nginx
+    restart: unless-stopped
+    volumes:
+      # SSD: 설정 및 캐시 (빠른 액세스)
+      - /volume1/docker/document-server/nginx:/etc/nginx/conf.d
+      - /volume1/docker/document-server/logs/nginx:/var/log/nginx
+      # HDD: 정적 파일 서빙 (읽기 전용)
+      - /volume2/document-storage/documents:/usr/share/nginx/html/documents:ro
+      - ./frontend:/usr/share/nginx/html:ro
+    ports:
+      - "24100:80"
+    depends_on:
+      backend:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - document-network
+
+networks:
+  document-network:
+    driver: bridge
+    ipam:
+      config:
+        - subnet: 172.20.0.0/16
+
+volumes:
+  # 명시적 볼륨 정의 (시놀로지 경로 매핑)
+  database_data:
+    driver: local
+    driver_opts:
+      type: none
+      o: bind
+      device: /volume1/docker/document-server/database
+  
+  redis_data:
+    driver: local
+    driver_opts:
+      type: none
+      o: bind
+      device: /volume1/docker/document-server/redis
+  
+  document_storage:
+    driver: local
+    driver_opts:
+      type: none
+      o: bind
+      device: /volume2/document-storage
--- a/frontend/notebooks.html
+++ b/frontend/notebooks.html
@@ -23,6 +23,18 @@
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
+        .line-clamp-2 {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .line-clamp-3 {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
    </style>
 </head>
 <body class="bg-gray-50 min-h-screen" x-data="notebooksApp()">
@@ -200,7 +212,7 @@
                    </div>
                    
                    <!-- 노트북 메타데이터 -->
-                    <div class="flex items-center justify-between text-xs text-gray-500">
+                    <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
                        <span x-text="formatDate(notebook.updated_at)"></span>
                        <div class="flex items-center space-x-2">
                            <span x-show="!notebook.is_active" class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full">
@@ -212,6 +224,28 @@
                            </span>
                        </div>
                    </div>
+                    
+                    <!-- 빠른 액션 -->
+                    <div x-show="notebook.note_count === 0" class="text-center py-2">
+                        <p class="text-xs text-gray-400 mb-2">노트가 없습니다</p>
+                        <button @click.stop="createNoteInNotebook(notebook)" 
+                                class="text-xs bg-blue-50 text-blue-600 px-3 py-1 rounded-full hover:bg-blue-100 transition-colors">
+                            <i class="fas fa-plus mr-1"></i>
+                            첫 노트 작성
+                        </button>
+                    </div>
+                    
+                    <div x-show="notebook.note_count > 0" class="flex items-center justify-between text-xs">
+                        <span class="text-gray-400">
+                            <i class="fas fa-clock mr-1"></i>
+                            <span x-text="formatDate(notebook.last_note_created_at || notebook.updated_at)"></span>
+                        </span>
+                        <button @click.stop="createNoteInNotebook(notebook)" 
+                                class="text-blue-600 hover:text-blue-800 transition-colors">
+                            <i class="fas fa-plus mr-1"></i>
+                            노트 추가
+                        </button>
+                    </div>
                </div>
            </template>
        </div>
@@ -229,6 +263,35 @@
        </div>
    </main>

+    <!-- 토스트 알림 -->
+    <div x-show="notification.show" 
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 transform translate-x-full"
+         x-transition:enter-end="opacity-100 transform translate-x-0"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 transform translate-x-0"
+         x-transition:leave-end="opacity-0 transform translate-x-full"
+         class="fixed top-4 right-4 z-50 max-w-sm">
+        <div class="rounded-lg shadow-lg border p-4"
+             :class="{
+                'bg-green-50 border-green-200 text-green-800': notification.type === 'success',
+                'bg-red-50 border-red-200 text-red-800': notification.type === 'error',
+                'bg-blue-50 border-blue-200 text-blue-800': notification.type === 'info'
+             }">
+            <div class="flex items-center">
+                <i :class="{
+                    'fas fa-check-circle text-green-600': notification.type === 'success',
+                    'fas fa-exclamation-circle text-red-600': notification.type === 'error',
+                    'fas fa-info-circle text-blue-600': notification.type === 'info'
+                   }" class="mr-2"></i>
+                <span x-text="notification.message"></span>
+                <button @click="notification.show = false" class="ml-auto text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
    <!-- 노트북 생성/편집 모달 -->
    <div x-show="showCreateModal || showEditModal" 
         x-transition:enter="transition ease-out duration-300"
@@ -321,6 +384,66 @@
        </div>
    </div>

+    <!-- 삭제 확인 모달 -->
+    <div x-show="showDeleteModal" 
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        
+        <div class="bg-white rounded-lg max-w-md w-full p-6"
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 transform scale-95"
+             x-transition:enter-end="opacity-100 transform scale-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100 transform scale-100"
+             x-transition:leave-end="opacity-0 transform scale-95">
+            
+            <div class="flex items-center mb-4">
+                <div class="p-3 rounded-full bg-red-100 mr-4">
+                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold text-gray-900">노트북 삭제</h3>
+                    <p class="text-sm text-gray-600">이 작업은 되돌릴 수 없습니다.</p>
+                </div>
+            </div>
+            
+            <div class="mb-6">
+                <p class="text-gray-700 mb-2">
+                    <strong x-text="deletingNotebook?.title"></strong> 노트북을 삭제하시겠습니까?
+                </p>
+                <div x-show="deletingNotebook?.note_count > 0" class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                    <div class="flex items-center">
+                        <i class="fas fa-info-circle text-yellow-600 mr-2"></i>
+                        <span class="text-sm text-yellow-800">
+                            포함된 <strong x-text="deletingNotebook?.note_count"></strong>개의 노트는 미분류 상태가 됩니다.
+                        </span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="flex justify-end space-x-3">
+                <button type="button" 
+                        @click="closeDeleteModal()"
+                        class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
+                    취소
+                </button>
+                <button type="button" 
+                        @click="confirmDeleteNotebook()"
+                        :disabled="deleting"
+                        :class="deleting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700'"
+                        class="px-4 py-2 text-white rounded-lg transition-colors">
+                    <span x-show="!deleting">삭제</span>
+                    <span x-show="deleting">삭제 중...</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
    <!-- JavaScript 파일들 -->
    <script src="/static/js/header-loader.js?v=2025012603"></script>
    <script src="/static/js/api.js?v=2025012607"></script>
--- a/frontend/static/js/note-editor.js
+++ b/frontend/static/js/note-editor.js
@@ -54,13 +54,21 @@ function noteEditorApp() {
                    return;
                }
                
-                // URL에서 노트 ID 확인 (편집 모드)
+                // URL에서 노트 ID 및 노트북 정보 확인
                const urlParams = new URLSearchParams(window.location.search);
                this.noteId = urlParams.get('id');
+                const notebookId = urlParams.get('notebook_id');
+                const notebookName = urlParams.get('notebook_name');
                
                // 노트북 목록 로드
                await this.loadNotebooks();
                
+                // URL에서 노트북이 지정된 경우 자동 설정
+                if (notebookId && !this.noteId) { // 새 노트 생성 시에만
+                    this.noteData.notebook_id = notebookId;
+                    console.log('📚 노트북 자동 설정:', notebookName || notebookId);
+                }
+                
                if (this.noteId) {
                    this.isEditing = true;
                    await this.loadNote(this.noteId);
--- a/frontend/static/js/notebooks.js
+++ b/frontend/static/js/notebooks.js
@@ -7,6 +7,13 @@ window.notebooksApp = () => ({
    saving: false,
    error: '',
    
+    // 알림 시스템
+    notification: {
+        show: false,
+        message: '',
+        type: 'info' // 'success', 'error', 'info'
+    },
+    
    // 필터링
    searchQuery: '',
    activeOnly: true,
@@ -18,7 +25,10 @@ window.notebooksApp = () => ({
    // 모달 상태
    showCreateModal: false,
    showEditModal: false,
+    showDeleteModal: false,
    editingNotebook: null,
+    deletingNotebook: null,
+    deleting: false,
    
    // 노트북 폼
    notebookForm: {
@@ -168,7 +178,12 @@ window.notebooksApp = () => ({

    // 노트북 열기 (노트 목록으로 이동)
    openNotebook(notebook) {
-        window.location.href = `/notes.html?notebook_id=${notebook.id}&notebook_name=${encodeURIComponent(notebook.name)}`;
+        window.location.href = `/notes.html?notebook_id=${notebook.id}&notebook_name=${encodeURIComponent(notebook.title)}`;
+    },
+
+    // 노트북에 노트 생성
+    createNoteInNotebook(notebook) {
+        window.location.href = `/note-editor.html?notebook_id=${notebook.id}&notebook_name=${encodeURIComponent(notebook.title)}`;
    },

    // 노트북 편집
@@ -185,22 +200,37 @@ window.notebooksApp = () => ({
        this.showEditModal = true;
    },

-    // 노트북 삭제
-    async deleteNotebook(notebook) {
-        if (!confirm(`"${notebook.title}" 노트북을 삭제하시겠습니까?\n\n${notebook.note_count > 0 ? `포함된 ${notebook.note_count}개의 노트는 미분류 상태가 됩니다.` : ''}`)) {
-            return;
-        }
+    // 노트북 삭제 (모달 표시)
+    deleteNotebook(notebook) {
+        this.deletingNotebook = notebook;
+        this.showDeleteModal = true;
+    },

+    // 삭제 확인
+    async confirmDeleteNotebook() {
+        if (!this.deletingNotebook) return;
+
+        this.deleting = true;
        try {
-            await this.api.deleteNotebook(notebook.id, true); // force=true
+            await this.api.deleteNotebook(this.deletingNotebook.id, true); // force=true
            this.showNotification('노트북이 삭제되었습니다.', 'success');
+            this.closeDeleteModal();
            await this.refreshNotebooks();
        } catch (error) {
            console.error('노트북 삭제 실패:', error);
            this.showNotification('노트북 삭제에 실패했습니다.', 'error');
+        } finally {
+            this.deleting = false;
        }
    },

+    // 삭제 모달 닫기
+    closeDeleteModal() {
+        this.showDeleteModal = false;
+        this.deletingNotebook = null;
+        this.deleting = false;
+    },
+
    // 노트북 저장
    async saveNotebook() {
        if (!this.notebookForm.title.trim()) {
@@ -266,12 +296,15 @@ window.notebooksApp = () => ({

    // 알림 표시
    showNotification(message, type = 'info') {
-        if (type === 'error') {
-            alert('❌ ' + message);
-        } else if (type === 'success') {
-            alert('✅ ' + message);
-        } else {
-            alert('ℹ️ ' + message);
-        }
+        this.notification = {
+            show: true,
+            message: message,
+            type: type
+        };
+        
+        // 3초 후 자동으로 숨김
+        setTimeout(() => {
+            this.notification.show = false;
+        }, 3000);
    }
 });