🚀 메인 초기화 로직 — 완전 분석

페이지가 열리는 순간부터 모든 준비가 끝날 때까지, 어떤 코드가 어떤 순서로 실행되는지 분석합니다.

📑 목차

시작 시퀀스 (타임라인)
핵심 전역변수
$(function()) 초기화
숨은 input 값들
스크롤 이벤트
초등학생도 따라하기

⏱️ 시작 시퀀스 — 시간 순서대로

브라우저가 [서비스URL]/?cur_win=paper_card 주소를 열었을 때, 어떤 일이 순서대로 일어나는지 살펴볼게요.

시간순      무슨 일이?                           코드 위치
──────────────────────────────────────────────────────────────────
T+0ms     HTML 파싱 시작                        <!DOCTYPE html>
T+1ms     <head> 내 CSS 파일 다운로드 시작       bootstrap.min.css, iam.css...
T+10ms    <head> 내 JS 파일 다운로드 시작        jquery, bootstrap, main.js...
T+50ms    DOM 트리 구성 (body 파싱)              body onclick="resizeImg()"
T+80ms    숨은 input 값들 메모리에 저장            mem_id, send_ids, exp_status...
T+100ms   body 태그 onclick 등록                 resizeImg() 바인딩
T+150ms   스크립트 실행 시작 (인라인 JS)          var cur_win_name = "paper_card";
T+160ms   전역변수 정의                          defaults, contextarray, busy...
T+180ms   함수 정의 (수십 개)                     add_paper_card, settlement...
T+200ms   DOMContentLoaded 이벤트                문서 준비 완료
T+210ms   $(function() { ... }) 실행 ★★★        refresh_page() 첫 호출!
T+220ms   refresh_page() → AJAX 요청들 시작      getIamContact(), getIamPaper()...
T+250ms   첫 AJAX 응답 도착 → .sample_main 채움   HTML 렌더링
T+300ms   이미지 로딩 & resizeImg() 실행           card_logo 크기 조정
T+500ms   모든 AJAX 완료 → 페이지 완전 로딩        busy = false
──────────────────────────────────────────────────────────────────
T+500ms~  사용자 인터랙션 대기                    클릭, 스크롤, 입력...

📦 핵심 전역변수 — 페이지의 두뇌

변수명	초기값	역할
`cur_win_name`	`"paper_card"`	현재 화면 이름 (보안패치로 XSS 방지)
`busy`	`false`	AJAX 중복 요청 방지 플래그
`contextarray`	`[]`	AI 대화 컨텍스트 저장 배열
`defaults`	`{h:...}`	기본 설정값 객체
`site`	도메인 문자열	사이트 구분 ([앱식별자1] vs [앱식별자2])

⚡ $(function()) 초기화 블록 — 진짜 시작점

이 부분이 페이지의 진짜 엔진 시동입니다. 593번 줄부터 시작돼요.

$(function() {                          // ← DOM 준비 완료!
    // 1. 언어 설정 확인
    var current_url = window.location.href;
    if (current_url.indexOf('lang=') > -1) {
        // URL에 lang 파라미터 있으면 해당 언어로 설정
        var lang_idx = getParam('lang');
        setLanguage(lang_idx);
    }

    // 2. 푸터 메뉴 활성화
    //    paper_card 페이지이므로 "명함관리" 아이콘이 active 상태

    // 3. 초기 데이터 로딩 ★
    refresh_page();
    // → 이 한 줄이 아래 모든 걸 실행:
    //   getIamContact()  - 연락처 목록
    //   getIamFriends()  - 친구 목록
    //   getIamPaper()    - 종이명함 목록
    //   get_request_list() - 요청 목록
    //   get_recom_list()   - 추천 목록
    //   displayMall()      - 몰 상품 목록
    //   show_comment()     - 코멘트 불러오기

    // 4. 이벤트 리스너 등록
    //    - 스크롤 이벤트 → .panel-group 클래스 토글
    //    - 리사이즈 이벤트 → resizeImg()
    //    - 키보드 이벤트 → enterkey()
});

🔒 숨은 input 값들 — 페이지의 비밀 메모

이 값들은 화면에 보이지 않지만, 모든 AJAX 요청에 실려서 서버로 전달돼요.

ID	값 예시	용도
`#mem_id`	로그인 ID	사용자 식별. 모든 요청에 포함
`#send_ids`	선택된 대상 ID들	발송 대상 목록. ,로 구분
`#exp_status`	체험판 여부	무료체험 기능 제한 판단
`#Gn_contents_limit`	`200`	콘텐츠 표시 개수 제한
`#card_url`	명함 URL	발송 시 포함될 명함 링크
`#card_send_mode`	0 또는 ""	발송모드 (clone/share)

📜 스크롤 이벤트 — UI 동적 제어

main.js에 정의된 스크롤 핸들러가 paper_card 페이지에서도 작동합니다:

// main.js 스크롤 로직
$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

    // .panel-group: 일정 스크롤 이상이면 'scrolled' 클래스 추가
    if (scrollTop > 100) {
        $('.panel-group').addClass('scrolled');
    } else {
        $('.panel-group').removeClass('scrolled');
    }

    // .mall-group: 스크롤 위치에 따라 awake/sleep 상태 전환
    if (scrollTop > 300) {
        $('.mall-group').addClass('awake').removeClass('sleep');
    } else {
        $('.mall-group').addClass('sleep').removeClass('awake');
    }
});

🎓 초등학생도 따라하는 분석법

크롬 개발자도구 열기
F12 키 누르기 → "Sources" 탭 클릭

소스코드 찾기
왼쪽 파일 목록에서 [서비스도메인] → 펼쳐서 파일들 보기

중단점 찍기
593번 줄 근처 $(function() 부분 클릭 → 파란색 표시

새로고침
F5 누르면 중단점에서 멈춤! 코드가 한 줄씩 어떻게 실행되는지 볼 수 있어요.

한 줄씩 실행 (F10)
F10 누르면 한 줄씩 실행돼요. 변수 값은 오른쪽 패널에서 확인!

Network 탭 보기
AJAX 요청이 어떻게 가는지 Network 탭에서 실시간 확인!

💡 개발자 꿀팁

console.log(cur_win_name) 을 콘솔에 치면 현재 페이지가 "paper_card"라고 출력돼요. 이 변수 하나로 페이지의 모든 분기 로직이 결정됩니다. 페이지마다 이 값만 바뀌고 나머지 로직은 공유돼요!

📁 관련 파일 목록

파일	역할
`main.js`	메뉴 토글, 스크롤, 설정 팝업
`rlatjd_fun.js`	지역 데이터, UI 유틸리티
`rlatjd.js`	로그인, 회원가입, 비번 검증
`chat.js`	AI 채팅 컨텍스트 관리
`iam.css`	카드, 버튼, 반응형 스타일

← 이전: 퍼널발송채널 다음: AJAX 통신 →