관리자 업로드 파일 관리

그누보드5 관리자 페이지에서 게시판 첨부파일을 통합 관리하는 기능입니다. 이미지와 pdf 파일은 미리보기를 지원합니다.
기존 업로드된 g5_board_files 테이블 데이타와 업로드 파일을  쉽게 관리할수 있습니다.
등록 / 수정 / 삭제 / 순서 변경 등의 기능을 시각적 UI 를 통해서 쉽게 제어할수 있습니다. 

개요

주요 기능

1. 게시물 단위 파일 그룹화

파일 목록을 게시물(bo_table + wr_id) 기준으로 그룹화하여 표시합니다.

• 게시판명, 게시글 제목을 rowspan으로 묶어 표시
• 게시글당 파일 개수 표시
• 게시글 원본 링크 제공

┌─────────┬─────────────┬──────────────┬────────┐
│ 게시판  │ 게시글 제목  │ 파일정보     │ 관리   │
├─────────┼─────────────┼──────────────┼────────┤
│ 자유    │ #123 테스트  │ image1.jpg   │ 관리   │
│ 게시판  │ 3개 파일     ├──────────────┼────────┤
│         │             │ image2.png   │ 관리   │
│         │             ├──────────────┼────────┤
│         │             │ doc.pdf      │ 관리   │
├─────────┼─────────────┼──────────────┼────────┤
│ 공지    │ #45 공지사항 │ notice.pdf   │ 관리   │
│ 사항    │ 1개 파일     │              │        │
└─────────┴─────────────┴──────────────┴────────┘

2. 검색 및 필터

3. 파일 관리 모달

file-uploader 웹 컴포넌트를 활용한 통합 파일 관리 UI입니다.

지원 기능

• 파일 추가: 드래그 앤 드롭 또는 클릭으로 새 파일 추가
• 파일 삭제: 파일 위 X 버튼으로 삭제
• 순서 변경: 드래그로 파일 순서 변경
• 미리보기: 이미지/PDF 클릭 시 전체 화면 미리보기

사용 방법

1. 파일 목록에서 "관리" 버튼 클릭
2. 모달에서 파일 추가/삭제/순서변경
3. "저장" 버튼으로 변경사항 적용

4. 파일 추가 (독립 기능)

목록 상단의 "파일 추가" 버튼으로 특정 게시글에 파일을 직접 추가할 수 있습니다.

1. 게시판 선택
2. 게시글 선택 (AJAX로 목록 로드)
3. 파일 선택
4. 업로드

5. 일괄 삭제

체크박스로 여러 파일을 선택하여 일괄 삭제할 수 있습니다.

기술 구현

파일 구조

adm/
├── board_file_list.php      # 목록 페이지 (메인 UI)
├── board_file_ajax.php      # AJAX 핸들러
├── board_file_delete.php    # 일괄 삭제 처리
└── js/
    └── file-uploader.js     # 파일 업로더 웹 컴포넌트

AJAX API

get_write_files - 게시물 파일 목록 조회

// Request
{
    action: 'get_write_files',
    bo_table: 'free',
    wr_id: 123
}

// Response
{
    success: true,
    data: {
        bo_table: 'free',
        bo_subject: '자유게시판',
        wr_id: 123,
        wr_subject: '테스트 글',
        files: [
            { id: 'free_123_0', name: 'image.jpg', url: '...', size: 50000, type: 'image/jpeg' },
            { id: 'free_123_1', name: 'doc.pdf', url: '...', size: 120000, type: 'application/pdf' }
        ]
    }
}

update_write_files - 파일 변경사항 저장

변경사항이 있으면 모든 파일을 blob/File로 전달받아 기존 파일 삭제 후 재등록합니다.

// Request (FormData)
{
    action: 'update_write_files',
    bo_table: 'free',
    wr_id: 123,
    is_changed: 'true',
    'all_files[0]': (blob),
    'all_files[1]': (blob),
    ...
}

// Response
{
    success: true,
    message: '변경사항이 저장되었습니다.'
}

처리 흐름:

1. 기존 물리 파일 및 썸네일 삭제
2. DB 레코드 전체 삭제
3. 전달받은 파일을 순서대로 새로 등록
4. wr_file 카운트 업데이트

get_writes - 게시글 목록 조회

파일 추가 시 게시글 선택용 목록을 가져옵니다.

// Request
{
    action: 'get_writes',
    bo_table: 'free'
}

// Response
{
    success: true,
    data: [
        { wr_id: 123, wr_subject: '테스트 글' },
        { wr_id: 122, wr_subject: '다른 글' }
    ]
}

add - 새 파일 추가

// Request (FormData)
{
    action: 'add',
    bo_table: 'free',
    wr_id: 123,
    'files[0]': (file),
    'files[1]': (file)
}

delete - 단건 파일 삭제

// Request
{
    action: 'delete',
    bo_table: 'free',
    wr_id: 123,
    bf_no: 0
}

file-uploader 웹 컴포넌트

주요 메서드

파일 로드 형식

uploader.loadFiles([
    {
        id: 'free_123_0',      // 고유 식별자
        name: 'image.jpg',      // 원본 파일명
        url: '/data/file/...',  // 파일 URL
        size: 50000,            // 파일 크기 (bytes)
        type: 'image/jpeg'      // MIME 타입
    }
]);

MIME 타입 처리

UI 스타일

디자인 시스템

그누보드5 관리자 UI 패턴을 따르며, 추가로 다음 스타일이 적용됩니다:

로딩 인디케이터

파일 저장 시 스피너 애니메이션으로 처리 중 상태를 표시합니다.

.loading_spinner {
    width: 40px; height: 40px;
    border: 4px solid #e9ecef;
    border-top-color: #ff4081;
    animation: spin 0.8s linear infinite;
}

권한 처리

// 그룹 관리자 권한 확인
if ($is_admin != 'super') {
    $sql_check = "SELECT COUNT(*) as cnt FROM {$g5['board_table']} a
                  LEFT JOIN {$g5['group_table']} b ON a.gr_id = b.gr_id
                  WHERE a.bo_table = '{$bo_table}' AND b.gr_admin = '{$member['mb_id']}'";
}

보안 고려사항