edu/leadership_insight_top_banner_requirements.md

# 리더십/인사이트 상단 슬라이드 배너 개선 요구사항

## 1. 작업 목적
- 현재 퍼블리싱 완료된 `leadership.html` 상단 슬라이드 배너 영역을 기준으로 구조를 정리한다.
- 현재 하드코딩된 배너 데이터를 DB 연동 방식으로 전환하기 위한 요구사항을 누적 관리한다.
- 대상 페이지는 리더십 페이지와 인사이트 페이지 상단 슬라이드 배너 영역이다.

## 1.1 작업 전제
- 앞으로 적용할 CSS 파일과 이미지 파일은 이미 다른 작업자가 업데이트한 상태로 간주한다.
- 이번 배너 개선 작업에서는 기존 업데이트된 CSS/이미지 자산을 재사용하는 방향을 우선으로 한다.
- 신규 요구사항 검토 시 마크업, 데이터 구조, DB 연동, 노출 로직 중심으로 정리한다.
- 미리 퍼블리싱된 `leadership.html` 에서 사용 중인 element 구조, `id`, `class` 는 최대한 동일하게 유지해야 한다.
- 상단 배너 DB 연동 시에도 기존 element 명세를 유지해 CSS 및 이미지 리소스가 깨지지 않도록 해야 한다.
- `admin` 디렉토리 하위 파일은 수정하지 않는다.
- 구현상 `admin` 디렉토리 추가 작업이 꼭 필요하면 먼저 사용자에게 확인을 받고 진행한다.

## 2. 기준 파일
- 실제 적용 대상 페이지: `skin/leadership.php`
- 실제 적용 대상 페이지: `skin/insight.php`
- 퍼블리싱 참고 파일: `260604_배움터_배너/260604_배움터_배너/leadership.html`
- `leadership.html` 에 상단 배너 유형이 한 곳에 모두 정리되어 있으므로, 배너 구조 참고 기준은 해당 파일을 우선 사용한다.
- 리더십/인사이트 상단 배너의 기본 구조는 동일하므로, 마크업 구조는 `leadership.html` 기준으로 맞춘다.
- 기준 영역: Hero 섹션 내부 `.hero-banner`, `.hero-swiper`, `.swiper-slide`

## 3. 현재 퍼블리싱 구조 요약
- 배너는 Swiper 기반 슬라이드로 구성되어 있다.
- 슬라이드 컨테이너는 `.hero-swiper` 이며, 페이지네이션은 `.hero-pagination` 을 사용한다.
- 각 배너는 `.swiper-slide` 단위로 반복된다.
- 배너 유형은 현재 퍼블리싱 기준으로 아래 형태가 존재한다.

### 3.1 프로필 정보가 있는 배너
- 좌측에 프로필 이미지, 이름, 부서, 라벨이 노출된다.
- 본문은 제목성 문구(`dt`)와 설명 문구(`dd`)로 구성된다.
- 우측에는 대표 이미지와 프로필 정보가 한 번 더 노출되는 구조가 있다.

### 3.2 프로필 정보가 없는 배너
- 프로필 이미지 영역 없이 이름, 부서, 라벨만 노출된다.
- 본문은 제목성 문구(`dt`)와 설명 문구(`dd`)로 구성된다.
- 우측에는 대표 이미지와 프로필 정보가 노출된다.

### 3.3 일반 배너
- 프로필 박스 없이 텍스트 영역과 대표 이미지 중심으로 구성된다.
- 현재 예시 타입은 `Editor’s pick`, `Hot Issue`, `leadership` 배너가 포함되어 있다.

## 4. 현재 확인된 하드코딩 요소
- 배너 타이틀 이미지 경로
- 모바일/PC 분기용 `picture`, `source`, `img`
- 프로필 이미지 경로
- 프로필 이름, 부서, 라벨 텍스트
- 제목/설명 문구
- 대표 썸네일 이미지 경로
- 배너 슬라이드 개수와 순서

## 5. 개선 방향 초안
- 배너 데이터를 DB에서 조회해 슬라이드 목록을 동적으로 구성해야 한다.
- 리더십/인사이트 페이지에서 공통으로 사용할 수 있는 배너 데이터 구조 정의가 필요하다.
- 배너 유형별 노출 조건(프로필 이미지 있음/없음, 일반 배너 등)을 데이터 기준으로 제어해야 한다.
- PC/모바일 이미지 분기 정책을 데이터 필드로 관리할지, 규칙 기반으로 처리할지 정리가 필요하다.

## 5.1 현재 확인된 데이터 연동 방향
- 작업 대상은 총 2곳이다: 인사이트 상단 슬라이드 배너, 리더십 상단 슬라이드 배너.
- 두 영역 모두 현재 하드코딩 상태이며, 관리페이지 등록 데이터를 DB에서 조회해 노출하는 구조로 전환해야 한다.
- 관리페이지에서 영상을 업로드할 때 배너 노출 대상 구분값을 함께 저장해야 한다.
- 저장된 구분값을 기준으로 리더십 페이지와 인사이트 페이지가 각각 해당 배너 데이터를 조회해 표시해야 한다.
- 배너 구분값은 `edu_contents.issue_type_code` 컬럼에 코드 형태로 저장된 값을 기준으로 사용한다.

## 6. 요구사항 정리 규칙
- 이후 전달받는 요구사항은 아래 형식으로 계속 누적한다.
- 확정된 요구사항과 검토 필요 항목을 분리해서 기록한다.
- 구현 전 확인이 필요한 데이터 구조, 예외 케이스, 운영 정책은 별도 섹션에 관리한다.

## 7. 요구사항 누적 기록

### 7.1 확정 요구사항
- 앞으로 적용할 CSS와 이미지 파일은 이미 다른 작업자가 업데이트해 둔 상태를 기준으로 작업한다.
- 배너 개선 요구사항은 우선적으로 데이터 연동 구조와 마크업/로직 반영 범위 중심으로 정리한다.
- 미리 퍼블리싱된 `leadership.html` 에서 사용 중인 element(`id`, `class` 등)는 유지해야 한다.
- 상단 배너를 DB 연동 구조로 바꾸더라도 기존 퍼블리싱 마크업 셀렉터를 변경하지 않는 것을 원칙으로 한다.
- `admin` 디렉토리 파일은 절대 수정하지 않는다.
- 구현 중 `admin` 디렉토리 수정이 반드시 필요해지면 사용자의 사전 확인 없이 진행하지 않는다.
- 실제 적용 파일은 `skin/leadership.php`, `skin/insight.php` 두 곳이다.
- 배너 유형별 퍼블리싱 참고는 `leadership.html` 한 파일을 기준으로 삼는다.
- `leadership.html` 에 배너 종류가 한곳에 정리되어 있으므로, 리더십/인사이트 모두 동일 구조를 전제로 구현한다.
- 작업 대상은 인사이트 상단 슬라이드 배너와 리더십 상단 슬라이드 배너 총 2개 영역이다.
- 두 영역 모두 현재 하드코딩된 배너를 제거하고, 관리페이지에서 업로드/저장한 DB 데이터를 조회해 노출하는 방식으로 변경한다.
- 관리페이지에서 영상 업로드 시 배너 노출 대상 구분을 둘 수 있어야 하며, 해당 구분값이 DB에 저장되어야 한다.
- 인사이트 상단 배너는 `edu_contents.category_code = 'CA10005'` 인 데이터를 기준으로 노출한다.
- 리더십 상단 배너는 `edu_contents.category_code = 'CA10004'` 인 데이터를 기준으로 노출한다.
- 리더십 상단 배너 구분은 `edu_contents.issue_type_code = 'LD10010'` 인 데이터 1종만 사용한다.
- 인사이트 상단 배너 구분은 `edu_contents.issue_type_code` 기준으로 `IS10001`, `IS10002`, `IS10003` 3종을 사용한다.
- 인사이트 배너 구분명은 각각 `IS10001 = Hot Issue`, `IS10002 = Editor's Pick`, `IS10003 = Top Learner's Choice` 로 매핑한다.
- 캡처 기준 배너 본문의 볼드 텍스트 2줄은 `edu_contents.description1`, `edu_contents.description2` 값을 각각 줄 단위로 노출한다.
- 캡처 기준 배너 본문의 회색 텍스트 영역은 `edu_contents.description3` 값을 노출한다.
- 배너 우측 영상 썸네일은 하단 영상 리스트에서 썸네일을 불러오는 기존 방식과 동일한 기준으로 표시한다.
- 각 페이지 상단 슬라이드 배너는 `category_code` 와 `issue_type_code` 조합에 맞는 데이터만 조회해 표시해야 한다.
- `Top Learner's Choice` 배너는 `edu_contents.issue_type_code = 'IS10003'` 이고 `edu_contents.is_offer = 1` 인 경우에만 사용자 정보를 함께 노출한다.
- `Top Learner's Choice` 배너의 사용자 정보는 `edu_contents.offer_id` 와 동일한 `edu_content_offer.offer_id` 행을 매핑해 `member_id` 를 찾은 뒤 조회한다.
- 조회된 `member_id` 를 기준으로 `edu_users` 테이블에서 사용자 상세 정보를 불러와야 한다.
- `Top Learner's Choice` 배너에는 사용자 사진, 이름, 직급, 소속팀 정보를 표시해야 한다.
- 사용자 정보 출력 로직은 현재 마이페이지에서 정상 노출 중인 사용자 정보 표시 방식을 우선 재사용 또는 응용한다.
- 사용자 프로필 이미지는 `img/profile` 디렉토리 기준으로 불러오며, 파일명 규칙은 `사번 6자리_소속팀코드 2자리` 형식이다.

### 7.1.1 화면-DB 매핑 규칙
- 볼드 1행 텍스트: `edu_contents.description1`
- 볼드 2행 텍스트: `edu_contents.description2`
- 회색 설명 텍스트: `edu_contents.description3`
- 배너 노출 구분: `edu_contents.category_code`
- 배너 타입 구분: `edu_contents.issue_type_code`
- 리더십 배너 대상 값: `CA10004`
- 인사이트 배너 대상 값: `CA10005`
- 리더십 배너 타입 값: `LD10010` (`leadership`)
- 인사이트 배너 타입 값 1: `IS10001` (`hot issue`)
- 인사이트 배너 타입 값 2: `IS10002` (`editor's pick`)
- 인사이트 배너 타입 값 3: `IS10003` (`Top Learner's Choice`)
- 썸네일: 하단 영상 리스트 썸네일 조회/출력 방식과 동일 로직 재사용

### 7.1.2 Top Learner's Choice 사용자 정보 매핑 규칙
- 적용 대상 조건: `edu_contents.issue_type_code = 'IS10003'` and `edu_contents.is_offer = 1`
- 제안 정보 연결 키: `edu_contents.offer_id = edu_content_offer.offer_id`
- 사용자 식별 값: `edu_content_offer.member_id`
- 사용자 정보 조회 테이블: `edu_users`
- 노출 사용자 정보: 사진, 이름, 직급, 소속팀
- 프로필 이미지 경로 기준: `img/profile`
- 프로필 이미지 파일명 규칙: `사번6자리_소속팀코드2자리`
- 사용자 정보 UI/로직 참고 기준: 현재 마이페이지에 노출 중인 사용자 정보 출력 방식

### 7.2 검토 필요 사항
- 배너 데이터 테이블 구조
- 노출 우선순위 및 정렬 기준
- 노출 기간, 사용 여부 등 운영 필드 필요 여부
- 관리페이지 업로드 화면에서 배너 노출 대상 구분값을 어떤 UI로 입력/선택할지
- 한 카테고리에 배너 노출 대상 영상이 여러 건일 때 상단 슬라이드 정렬 기준을 무엇으로 할지
- `edu_users` 에서 프로필 이미지 파일명 생성을 위해 사용하는 정확한 사번/소속팀코드 컬럼명 확인 필요

### 7.3 추후 추가 예정
- 사용자가 후속으로 전달하는 요구사항을 순차 반영