/*-----------------------------------------------------------------------------------
*
* 사이트 초기화 스크립트 (jQuery v1.12.4 호환)
*
-----------------------------------------------------------------------------------*/
jQuery(document).ready(function ($) {
// window 객체를 jQuery 객체로 한 번만 변수에 할당하여 성능을 최적화합니다.
var $WIN = $(window);
/*================================================================================
1. Preloader (페이지 로딩 화면)
==================================================================================*/
function ssPreloader() {
// window의 'load' 이벤트 (모든 리소스 로드 완료) 발생 시 실행
$WIN.on('load', function () {
// 1. 로딩 아이콘(#loader)을 'slow' 속도(약 600ms)로 서서히 사라지게 합니다.
$('#loader').fadeOut('slow', function () {
// 2. 콜백 함수: 로딩 아이콘이 사라진 후, 300ms 지연 후
// 전체 프리로더(#preloader) 영역을 'slow' 속도로 사라지게 합니다.
$('#preloader').delay(300).fadeOut('slow');
});
});
}
/*================================================================================
2. 내비게이션 바 배경 투명도 조절
==================================================================================*/
function ssNavOpacity() {
// [개선] 헤더 높이를 변수에 캐시하여 스크롤 이벤트 발생 시 DOM 접근 최소화
var h = $('header').height();
var $header = $('#main-header');
// [개선] 창 크기가 변경되면 헤더 높이를 다시 계산합니다. (동적 높이 대응)
$WIN.on('resize', function() {
h = $('header').height();
});
// 페이지를 스크롤할 때마다 실행되도록 이벤트 바인딩
$WIN.on('scroll', function () {
var y = $WIN.scrollTop(); // 현재 수직 스크롤 위치(Y축)
// [개선] 화면 너비 조건도 변수로 분리하여 가독성 향상
var isDesktop = $WIN.outerWidth() > 1020;
// 조건:
// 1. 현재 스크롤 위치(y)가 캐시된 헤더 높이(h)보다 클 때
// 2. 뷰포트의 너비가 1020px을 초과할 때
if (y > h && isDesktop) {
// 조건 만족 시: 'opaque' 클래스를 추가합니다.
$header.addClass('opaque');
} else {
// 조건 불만족 시: 'opaque' 클래스를 제거합니다.
$header.removeClass('opaque');
}
});
}
/*================================================================================
3. Slick Slider 실행 (슬릭 슬라이더 플러그인 초기화)
==================================================================================*/
function ssSlickSlider() {
// --- 3-1. 메인 슬라이더 (.id-Slider) 설정
$('.id-Slider').slick({
autoplay: true, // 자동 재생 활성화
autoplaySpeed: 6000, // 자동 재생 간격 (6초)
speed: 600, // 슬라이드 전환 속도 (0.6초)
slidesToShow: 1, // 한 번에 보여줄 슬라이드 개수
slidesToScroll: 1, // 스크롤 시 넘어갈 슬라이드 개수
pauseOnHover: true, // 마우스 호버 시 자동 재생 일시정지
dots: false, // 하단 페이지네이션(점) 비활성화
pauseOnDotsHover: true, // 페이지네이션 호버 시 일시정지
cssEase: 'linear', // CSS Easing 효과
fade: true, // 페이드 인/아웃 효과로 슬라이드 전환
draggable: true, // 마우스 드래그로 슬라이드 이동 가능
prevArrow: '',
nextArrow: '',
customPaging: function (slider, i) {
// 각 슬라이드의 'data-thumbnail' 속성 값(이미지 파일명)을 가져옵니다.
var thumbnail = $(slider.$slides[i]).data('thumbnail');
// 썸네일 이미지를 포함한 링크 태그를 생성하여 반환합니다.
return '
';
},
});
// --- 3-2. 갤러리 슬라이더 (.gallery) 설정
$('.gallery').slick({
slidesToShow: 8, // 기본적으로 8개 슬라이드 표시
slidesToScroll: 4, // 한 번 스크롤 시 4개 슬라이드 이동
autoplay: false, // 자동 재생 비활성화
autoplaySpeed: 5000, // (자동 재생이 꺼져 있어 실제 작동하지 않음)
arrows: false, // 화살표 버튼 숨김
dots: false, // 페이지네이션 숨김
pauseOnHover: false, // 호버 시 일시정지 비활성화
centerMode: true, // [개선] 'centermode' -> 'centerMode' (오타 수정)
// 반응형 설정 (화면 크기에 따라 설정 변경)
responsive: [
{
breakpoint: 1920, // 화면 너비 1920px 이하일 때
settings: {
// [수정!] 원본 코드에 slidesToShow가 중복(6, 3)으로 기재되어 있었습니다.
// jQuery 플러그인은 마지막 값만 적용합니다.
// 의도한 값이 6이라면 6만 남겨야 합니다.
slidesToShow: 6,
slidesToScroll: 3,
},
},
{
breakpoint: 1280, // 화면 너비 1280px 이하일 때
settings: {
// [수정!] 여기도 마찬가지로 중복(4, 2)되어 있었습니다. 4로 수정합니다.
slidesToShow: 4,
slidesToScroll: 2,
},
},
{
breakpoint: 480, // 화면 너비 480px 이하일 때
settings: {
slidesToScroll: 2,
slidesToShow: 2,
},
},
],
});
// --- 3-3. 커스텀 화살표 버튼 클릭 이벤트 (이벤트 위임)
// $(document).on(...) : 페이지 로드 후 동적으로 생성되는 요소에도 이벤트를 바인딩합니다.
$(document).on('click', '.prevSlide', function () {
// '.prevSlide' 클릭 시 '.gallery' 슬라이더를 이전으로 넘김
$('.gallery').slick('slickPrev');
});
$(document).on('click', '.nextSlide', function () {
// '.nextSlide' 클릭 시 '.gallery' 슬라이더를 다음으로 넘김
$('.gallery').slick('slickNext');
});
}
/*================================================================================
4. Smooth Scrolling (앵커 링크 클릭 시 부드러운 스크롤 이동)
==================================================================================*/
function ssSmoothScroll() {
// '.smoothscroll' 클래스를 가진 모든 링크에 클릭 이벤트 바인딩
$('.smoothscroll').on('click', function (e) {
// 1. 링크의 기본 동작(즉시 해당 앵커 위치로 이동)을 막습니다.
e.preventDefault();
var target = this.hash; // 클릭한 링크의 href 속성 값(예: '#section-id')
var $target = $(target); // 해당 ID를 가진 DOM 요소를 jQuery 객체로 선택
// 2. html과 body 요소를 동시에 애니메이션으로 스크롤합니다.
$('html, body')
.stop() // 이전에 실행 중이던 애니메이션이 있다면 즉시 중지
.animate(
{
// 스크롤 목표: 목표 요소의 페이지 상단으로부터의 위치
scrollTop: $target.offset().top,
},
800, // 애니메이션 지속 시간 (0.8초)
'swing', // Easing 효과 (느리게-빠르게-느리게)
function () {
// 3. 콜백 함수: 스크롤이 끝난 후 URL 해시(#section-id)를 변경합니다.
window.location.hash = target;
},
);
});
}
/*================================================================================
5. Footer Select (푸터 커스텀 셀렉트 박스 UI 구현)
- [개선] 접근성(AX) 및 사용자 경험(UX)을 위해 외부 클릭, ESC 키 닫기 기능 포함
==================================================================================*/
function ssFooterSelect() {
var $select = $('.footer-select'); // 커스텀 셀렉트 박스 전체 요소
// 1. '.placeholder' (현재 선택된 항목 표시 영역) 클릭 이벤트
$select.on('click', '.placeholder', function (e) {
e.preventDefault(); // 태그 등으로 감싸도 기본 동작(페이지 이동/점프) 방지
var $parent = $(this).closest('.footer-select');
// 열려있는 다른 셀렉트 박스는 닫기
$('.footer-select.is-open').not($parent).removeClass('is-open');
// 현재 셀렉트 박스 열기/닫기 토글
$parent.toggleClass('is-open');
});
// 2. 옵션 목록 (ul > li) 클릭 이벤트
$select.on('click', 'ul > li', function () {
var $this = $(this);
var $parent = $this.closest('.footer-select');
var url = $this.data('url'); // li 태그의 data-url 속성 값 가져오기
// [사용자 요청] 옵션 클릭 시 placeholder 텍스트를 변경하지 않고 유지합니다.
// 셀렉트 박스를 닫습니다.
$parent.removeClass('is-open');
// 접근성을 위해 포커스를 다시 placeholder로 돌려놓습니다.
$parent.find('.placeholder').focus();
// data-url 값이 존재하면 새 창으로 해당 URL을 엽니다.
if (url) {
window.open(url);
}
});
// 3. [개선] 외부 영역 클릭 시 닫기 (문서 전체에 클릭 이벤트 바인딩)
$(document).on('click', function (e) {
// 클릭된 요소가 .footer-select 자신이거나 그 하위 요소가 *아닌* 경우
if (!$select.is(e.target) && $select.has(e.target).length === 0) {
$select.removeClass('is-open'); // 모든 .footer-select를 닫습니다.
}
});
// 4. [개선] 키보드 이벤트 처리 (ESC 키로 닫기)
$(document).on('keydown', function (e) {
// jQuery 1.12.4는 e.key를 완벽히 지원하지 않을 수 있으므로, e.keyCode를 함께 사용 (ESC = 27)
if (e.key === 'Escape' || e.keyCode === 27) {
// 열려있는 셀렉트 박스를 닫고, 포커스를 placeholder로 돌려줍니다.
$('.footer-select.is-open').removeClass('is-open').find('.placeholder').focus();
}
});
}
/*================================================================================
6. Back to Top (맨 위로 가기 버튼 기능)
==================================================================================*/
function ssBackToTop() {
var $scrollTop = $('.scrollTop'); // 맨 위로 가기 버튼 요소
// 1. 스크롤 이벤트: 버튼 표시/숨김 제어
$WIN.on('scroll', function () {
// 스크롤 위치가 100px보다 클 경우
if ($WIN.scrollTop() > 100) {
// CSS opacity 속성을 '1'로 설정하여 버튼을 나타나게 합니다.
// (CSS에서 transition: opacity 0.3s; 등이 설정되어 있어야 부드럽게 나타남)
$scrollTop.css('opacity', '1');
} else {
// 스크롤 위치가 100px 이하일 경우
$scrollTop.css('opacity', '0');
}
});
// 2. 클릭 이벤트: 부드러운 스크롤 이동
$scrollTop.on('click', function (e) {
e.preventDefault(); // 링크의 기본 동작(즉시 이동)을 막습니다.
// 페이지 상단(scrollTop: 0)으로 **0.3초** 동안 부드럽게 스크롤합니다.
$('html, body').animate({ scrollTop: 0 }, 300);
});
}
/*================================================================================
7. 기타 유틸리티 및 게시판 스타일 정리
- [개선] 관련 기능들을 별도 함수로 분리하여 관리
==================================================================================*/
function ssUtilityCleanup() {
// 1. (공백) 제거
// '.formmail_cell_bgcolor'와 '.table-nbsp' 요소 내부의 를 모두 제거
$('.formmail_cell_bgcolor, .table-nbsp').each(function () {
var $this = $(this);
$this.html($this.html().replace(/ /g, ''));
});
// 2. 특정 CSS 파일 제거
// 페이지 내에 'company.css'를 포함하는 태그를 DOM에서 제거
$('link[href*="company.css"]').remove();
// 3. 코멘트 영역 클래스 추가 (스타일링 용이성을 위함)
$('.table-comment').children().addClass('commentTable');
$('.commentTable table').addClass('commentInner');
$('.table-comment-write').children().addClass('commentWrite');
// 4. [개선] 게시판 래퍼(.brd_wrap)가 *존재할 경우* 스타일 정리
// $('div').hasClass() 대신 .length로 존재 여부를 확인하여 성능 향상
if ($('.brd_wrap').length > 0) {
var $board = $('.brd_wrap'); // 게시판 래퍼를 변수에 할당하여 재탐색 방지
// 불필요한 인라인 속성 제거
$board.find('tr').removeAttr('height');
$board.find('td').removeAttr('width').removeAttr('align').removeAttr('height').removeAttr('style');
$board.find('font').removeAttr('style');
// 게시판 내 불필요한 요소 제거
$board.find('link[rel=stylesheet]').remove(); // 게시판 내 로드되는 CSS
$board.find('.gallery_item_table_split').remove();
// 이미지 높이 자동 조절 (반응형 대응)
$board.find('img').css('height', 'auto');
}
// 5. [개선] 특정 검색 셀(.est_keyword_cell)이 *존재할 경우* 스타일 적용
if ($('td.est_keyword_cell').length > 0) {
$('#search_display1').css('display', 'inline');
}
// 6. Board 객체 (플레이스홀더로 추정)
// [개선] const -> var로 변경하여 IE 9/10 호환성 확보
var Board = function () {};
}
/*================================================================================
초기화 함수 실행 (IIFE)
- 위에서 정의한 모든 초기화 함수를 즉시 실행하여 사이트 기능을 활성화합니다.
==================================================================================*/
(function ssInit() {
ssPreloader();
ssNavOpacity();
ssSlickSlider();
ssSmoothScroll();
ssFooterSelect();
ssBackToTop();
ssUtilityCleanup(); // [추가] 유틸리티 함수 실행
})();
});