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 추후 추가 예정

• 사용자가 후속으로 전달하는 요구사항을 순차 반영