Penta HandsOn System은 전자정부프레임워크(eGovFramework) 4.3.1 기반의 모바일 하이브리드 웹앱입니다. Android / iOS 기기에서 카메라, GPS, 바코드 스캔 등 디바이스 기능과 연동되며, 결재 워크플로우, 재고조사, 영업일지, 현장방문 등 다양한 업무 화면을 제공합니다.

1. Eclipse Temurin JDK 17 다운로드

   Eclipse Adoptium 공식 사이트에서 Windows x64 Installer (.msi) 다운로드
   OpenJDK17U-jdk_x64_windows_hotspot_17.0.x_x.msi 실행 후 기본 경로 설치
2. 환경변수 설정

   시스템 속성 → 환경변수 → 시스템 변수에 아래 항목 설정

   변수명	값 (예시)
   JAVA_HOME	C:\Program Files\Eclipse Adoptium\jdk-17.x.x.x-hotspot
   Path (추가)	%JAVA_HOME%\bin

3. 설치 확인

   명령 프롬프트(cmd)에서 버전 확인

   cmd

   java -version
   # 출력 예시:
   openjdk version "17.0.x" 2023-xx-xx
   OpenJDK Runtime Environment Temurin-17.0.x+x (build 17.0.x+x)
   OpenJDK 64-Bit Server VM Temurin-17.0.x+x (build 17.0.x+x, mixed mode, sharing)

1. eGovFrameDev 4.3.1 IDE 실행

   전자정부프레임워크 통합개발환경 IDE를 실행합니다.
   eGovFrameDev-4.3.1-64bit\eclipse.exe
2. JRE 등록: Window → Preferences → Java → Installed JREs

   Add → Standard VM → JDK 17 설치 경로 지정 → Finish → 체크박스 선택
3. 컴파일러 레벨 확인: Java → Compiler → Compiler compliance level: 18

   프로젝트 우클릭 → Properties → Java Compiler에서도 동일하게 설정
4. pom.xml 컴파일 설정 확인

   pom.xml (발췌)

   <properties>
     <java.version>18</java.version>
     <maven.compiler.source>18</maven.compiler.source>
     <maven.compiler.target>18</maven.compiler.target>
   </properties>

-- 1. 사용자(Role) 생성
CREATE USER handson WITH PASSWORD '비밀번호';

-- 2. 데이터베이스 생성
CREATE DATABASE handson
  WITH OWNER = handson
  ENCODING = 'UTF8'
  LC_COLLATE = 'ko_KR.UTF-8'
  LC_CTYPE = 'ko_KR.UTF-8'
  TEMPLATE = template0;

-- 3. 권한 부여
GRANT ALL PRIVILEGES ON DATABASE handson TO handson;

-- handson DB에 접속 후 schema 권한 부여 (psql: \c handson)
GRANT ALL ON SCHEMA public TO handson;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON TABLES TO handson;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON SEQUENCES TO handson;

1. 기본 테이블 생성

   TB_PENTA_USER → TB_PENTA_ROLE → TB_PENTA_PROGRAM → TB_PENTA_ROLE_PROGRAM → TB_PENTA_USER_ROLE
2. 로그 테이블 생성

   TB_PENTA_LOGIN_LOG → TB_PENTA_PROGRAM_RUN_LOG
3. 메시지 테이블 생성

   TB_PENTA_MESSAGE → TB_PENTA_MESSAGE_FILE
4. 파일 테이블 생성

   TB_PENTA_FILE_LIST → TB_PENTA_FILE_UPLOAD → TB_PENTA_FILE_DOWNLOAD
5. 게시판 테이블 생성

   TB_PENTA_BOARD → TB_PENTA_BOARD_CMT → TB_PENTA_BOARD_FILE → TB_PENTA_BOARD_READ
6. 조직도 테이블 생성

   TB_PENTA_ORGAN → TB_PENTA_USER.ORG_CD 컬럼 추가
7. 공통코드 테이블 생성

   TB_PENTA_CODE_MST
8. 업무 샘플 테이블 생성

   TB_PENTA_BUSINESS_SAMPLE_01 ~ 04 (SAMPLE_04는 04_00 ~ 04_04 순서로)
9. 초기 데이터 삽입

   관리자 계정, 역할, 프로그램 메뉴, 샘플 데이터 삽입

-- 비밀번호 SHA-256 해시: 'admin1234' → 아래 값은 예시
-- 실제 해시값은 애플리케이션의 SHA256Util.encode() 함수 결과를 사용
INSERT INTO TB_PENTA_USER (
  USER_ID, USER_PASSWORD, USER_NAME, USER_EMAIL,
  DEPT_NAME, POSITION, USE_YN, LOCK_YN, FAILED_LOGIN_COUNT
) VALUES (
  'admin',
  '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918', -- 'admin'의 SHA-256
  '관리자', 'admin@penta.com',
  'IT부서', '시스템관리자', 'Y', 'N', 0
);
COMMIT;

<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
  <property name="driverClassName"  value="org.postgresql.Driver"/>
  <property name="url"             value="jdbc:postgresql://192.168.100.66:5432/handson"/>
  <property name="username"        value="handson"/>
  <property name="password"        value="비밀번호"/>
  <property name="maxTotal"        value="20"/>
  <property name="maxIdle"         value="5"/>
  <property name="minIdle"         value="2"/>
</bean>

1. Apache Tomcat 9.x 다운로드

   apache.org에서 Core Windows zip 다운로드 후 적절한 위치에 압축 해제
   예: C:\servers\apache-tomcat-9.0.xx
2. JAVA_HOME 확인

   Tomcat 기동 전 JAVA_HOME 환경변수가 JDK 18을 가리키는지 확인
3. 포트 설정: conf/server.xml

   conf/server.xml (HTTP 포트 변경 예시)

   <Connector port="8080" protocol="HTTP/1.1"
              connectionTimeout="20000"
              redirectPort="8443"
              URIEncoding="UTF-8"/>
   
   <!-- HTTPS 설정 (자체 서명 인증서 예시) -->
   <Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
              maxThreads="150" SSLEnabled="true"
              scheme="https" secure="true"
              keystoreFile="/etc/ssl/penta.keystore"
              keystorePass="비밀번호"
              clientAuth="false" sslProtocol="TLS"
              URIEncoding="UTF-8"/>

파일 서버 경로, 최대 파일 크기 등 서버 환경에 맞게 반드시 수정해야 합니다.

# 파일 서버 설정
file.server.host=192.168.100.66
file.server.port=8090
file.upload.root=D:/fileserver/penta
file.max.size=52428800    # 50MB (0=무제한)
file.max.count=10          # 최대 파일 수 (0=무제한)

# 앱 기본 설정
app.name=PentaMobile
app.version=1.0.0
app.context=/HandsOn

# 세션 기본 타임아웃 (분)
session.default.timeout=30

rem 기동
cd C:\servers\apache-tomcat-9.0.xx\bin
startup.bat

rem 중지
shutdown.bat

# 기동
/opt/tomcat9/bin/startup.sh

# 중지
/opt/tomcat9/bin/shutdown.sh

# 상태 확인
ps aux | grep tomcat

rem Windows setenv.bat
set JAVA_OPTS=-Xms512m -Xmx1024m -XX:MaxMetaspaceSize=256m -Dfile.encoding=UTF-8

# Linux setenv.sh
export JAVA_OPTS="-Xms512m -Xmx1024m -XX:MaxMetaspaceSize=256m -Dfile.encoding=UTF-8"

아래 항목들은 서버 이전·신규 구축·담당자 인수인계 시 누락되기 쉬운 설정입니다. 각 항목의 출처 파일을 직접 열어 값이 적용되어 있는지 확인하세요.

① JVM 힙 메모리 (Heap Memory)

rem =====================================================
rem PentaMobile Tomcat JVM 설정
rem 이 파일은 Tomcat 기동 시 자동으로 읽힘
rem =====================================================

rem 힙 메모리 (개발: 1g, 운영: 2g 이상 권장)
set CATALINA_OPTS=-Xms512m -Xmx1024m
set CATALINA_OPTS=%CATALINA_OPTS% -XX:MaxMetaspaceSize=256m
set CATALINA_OPTS=%CATALINA_OPTS% -XX:+UseG1GC

rem 인코딩 (한글 깨짐 방지 — 필수)
set CATALINA_OPTS=%CATALINA_OPTS% -Dfile.encoding=UTF-8
set CATALINA_OPTS=%CATALINA_OPTS% -Dsun.stdout.encoding=UTF-8

rem JDK 17+ 모듈 접근 허용 (Spring 5.x / MyBatis 구동에 필요)
rem 출처: Eclipse 서버 launch 설정에서 확인된 실제 적용 값
rem  D:\...\workspace-egov\.metadata\.plugins\org.eclipse.debug.core\.launches\
rem  Tomcat v9.0 Server at localhost.launch 의 VM_ARGUMENTS 항목
set CATALINA_OPTS=%CATALINA_OPTS% --add-opens=java.base/java.lang=ALL-UNNAMED
set CATALINA_OPTS=%CATALINA_OPTS% --add-opens=java.base/java.io=ALL-UNNAMED
set CATALINA_OPTS=%CATALINA_OPTS% --add-opens=java.base/java.util=ALL-UNNAMED
set CATALINA_OPTS=%CATALINA_OPTS% --add-opens=java.base/java.util.concurrent=ALL-UNNAMED
set CATALINA_OPTS=%CATALINA_OPTS% --add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED

② JDK 17 모듈 열기 옵션 (Eclipse 서버 설정)

JDK 17 이후 모듈 시스템 강화로 인해 Spring 5.x / MyBatis 3.5가 내부 API에 접근하려면 아래 옵션이 필수입니다. 현재 Eclipse 서버에 적용되어 있으나, standalone 배포 시 setenv.bat에 누락되면 기동 오류가 발생합니다.

--add-opens=java.base/java.lang=ALL-UNNAMED        ← Spring 리플렉션
--add-opens=java.base/java.io=ALL-UNNAMED           ← 파일 스트림 접근
--add-opens=java.base/java.util=ALL-UNNAMED         ← 컬렉션 내부 접근
--add-opens=java.base/java.util.concurrent=ALL-UNNAMED  ← 비동기 처리
--add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED  ← RMI 내부 접근

③ Connector 설정 (server.xml)

<Connector port="8080"
           protocol="HTTP/1.1"
           connectionTimeout="20000"      <!-- 현재 적용 값 -->
           redirectPort="8443"
           maxParameterCount="1000"      <!-- 현재 적용 값 -->
           URIEncoding="UTF-8"             <!-- 한글 URL 파라미터 깨짐 방지 — 추가 필요 -->
           maxThreads="200"               <!-- 동시 요청 처리 스레드 수 (기본 200) -->
           acceptCount="100"              <!-- maxThreads 초과 시 대기 큐 크기 -->
           compression="on"               <!-- 응답 gzip 압축 (모바일 트래픽 절감) -->
           compressableMimeType="text/html,text/css,application/javascript,application/json"/>

④ 세션 타임아웃

두 곳에 모두 설정되어 있으며 WEB-INF/web.xml이 우선합니다. 사용자가 설정 화면에서 세션 타임아웃을 변경하면 Spring의 세션 관리 코드에서 동적으로 덮어씁니다. Tomcat 기본값(conf/web.xml)은 건드리지 않아도 됩니다.

⑤ 인코딩 필터 (CharacterEncodingFilter)

<filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>  <!-- 이미 인코딩 설정된 요청도 강제 재설정 -->
    </init-param>
</filter>

forceEncoding=true가 없으면 일부 클라이언트가 Content-Type에 charset을 지정한 경우 필터가 적용되지 않아 한글이 깨질 수 있습니다. 현재 올바르게 설정되어 있습니다.

⑥ 에러 페이지 매핑

<error-page>
    <error-code>404</error-code>
    <location>/WEB-INF/jsp/common/error404.jsp</location>
</error-page>
<error-page>
    <error-code>500</error-code>
    <location>/WEB-INF/jsp/common/error500.jsp</location>
</error-page>
<error-page>
    <error-code>403</error-code>
    <location>/WEB-INF/jsp/common/error500.jsp</location>
</error-page>
<error-page>
    <exception-type>java.lang.Exception</exception-type>
    <location>/WEB-INF/jsp/common/error500.jsp</location>
</error-page>

⑦ DispatcherServlet URL 패턴

모든 업무 URL은 *.do로 끝나야 Spring MVC가 처리합니다. *.do 이외의 패턴(예: /api/*)을 추가하려면 이 파일에 <servlet-mapping>을 추가해야 합니다.

⑧ Eclipse 서버 VM Arguments 위치

Eclipse에서 직접 서버를 실행할 때만 적용됩니다. Tomcat을 standalone으로 기동할 때(startup.bat)는 적용되지 않으므로 운영/스테이징 서버에는 반드시 setenv.bat에 동일 설정을 복사해야 합니다.

-Dcatalina.base="...\.metadata\...\tmp0"            ← Eclipse 임시 catalina 경로
-Dcatalina.home="...\tomcat\apache-tomcat-9.0.86"   ← Tomcat 설치 경로
-Dwtp.deploy="...tmp0\wtpwebapps"                   ← Eclipse WTP 배포 경로
--add-opens=java.base/java.lang=ALL-UNNAMED
--add-opens=java.base/java.io=ALL-UNNAMED
--add-opens=java.base/java.util=ALL-UNNAMED
--add-opens=java.base/java.util.concurrent=ALL-UNNAMED
--add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED
⚠ -Xms / -Xmx 없음 — 힙 설정 미적용 상태

✅ WAS 설정 체크리스트

# HTTP → HTTPS 리다이렉트
server {
    listen 80;
    server_name penta.example.com;
    return 301 https://$host$request_uri;
}

# HTTPS
server {
    listen 443 ssl;
    server_name penta.example.com;

    ssl_certificate     /etc/ssl/penta.crt;
    ssl_certificate_key /etc/ssl/penta.key;
    ssl_protocols       TLSv1.2 TLSv1.3;

    client_max_body_size 60m;

    location / {
        proxy_pass         http://127.0.0.1:8080;
        proxy_set_header   Host              $host;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_read_timeout 120s;
    }

    # 정적 파일 직접 서빙 (옵션)
    location /HandsOn/js/ {
        alias /opt/penta/static/js/;
        expires 7d;
    }
}

# certbot 설치 (Ubuntu 예시)
sudo apt install certbot python3-certbot-nginx

# 인증서 발급
sudo certbot --nginx -d penta.example.com

# 자동 갱신 확인
sudo certbot renew --dry-run

1. Eclipse에서 빌드

   프로젝트 우클릭 → Run As → Maven build → Goals: clean package -DskipTests
2. 명령행에서 빌드

   cmd

   cd D:\project\handson\eGovFrameDev-4.3.1-64bit\workspace-egov\handson
   mvn clean package -DskipTests
   
   # 성공 시 target/handson.war 파일 생성

1. WAR 파일 복사

   빌드된 target/handson.war를 Tomcat의 webapps/ 디렉토리에 복사

   cmd

   copy target\handson.war C:\servers\apache-tomcat-9.0.xx\webapps\HandsOn.war

2. Tomcat 재시작

   Tomcat을 재시작하면 WAR가 자동으로 압축 해제되어 배포됩니다
3. 배포 확인

   브라우저에서 http://서버IP:8080/HandsOn/login/login.do 접속하여 로그인 화면 확인

1. Servers 뷰에서 Tomcat 추가

   Window → Show View → Servers → New Server → Apache Tomcat 9.0 → Tomcat 설치 경로 지정
2. 프로젝트 추가

   서버 우클릭 → Add and Remove → handson 프로젝트를 Configured 측으로 이동 → Finish
3. 서버 시작

   서버 우클릭 → Start (또는 Debug) → Console에 기동 로그 확인

웹 화면 하나를 만들려면 최소 4~6개의 파일이 필요합니다. 각각 역할이 나뉘어져 있고, 서로 연결됩니다. 전체 흐름을 먼저 이해하는 것이 중요합니다.

1. Package Explorer에서 파일 찾기

   Eclipse 왼쪽 Package Explorer 패널에서 파일을 탐색합니다.
   찾는 파일이 있는 폴더를 펼쳐서 더블클릭하면 편집창이 열립니다.

   주요 파일 위치 (handson 프로젝트 기준)

   handson/
   ├── src/main/java/egovframework/penta/
   │   └── business/
   │       ├── controller/   → BusinessController.java  (URL 매핑)
   │       ├── dao/          → BusinessDAO.java          (DB 접근)
   │       ├── service/      → BusinessService.java      (인터페이스)
   │       ├── service/impl/ → BusinessServiceImpl.java  (실제 구현)
   │       └── vo/           → BusinessSample01VO.java   (컬럼 정의)
   │
   ├── src/main/resources/egovframework/sqlmap/business/
   │   └── BusinessSample01_SQL.xml  (SQL 쿼리)
   │
   └── src/main/webapp/WEB-INF/jsp/business/
       └── sample01view.jsp           (화면 HTML)

2. 파일을 빠르게 찾는 단축키

   파일명을 알고 있을 때는 단축키가 훨씬 빠릅니다.

   단축키	기능	사용 예시
   Ctrl + Shift + R	파일명으로 빠른 검색	"BusinessSample01" 입력 → 관련 파일 목록 표시
   Ctrl + H	프로젝트 전체 텍스트 검색	"sample01List" 입력 → 어느 파일에서 쓰이는지 확인
   Ctrl + F	현재 파일 내 검색	열린 파일에서 특정 단어 찾기
   Ctrl + Z	실행 취소	잘못 수정했을 때 되돌리기
   Ctrl + S	저장	수정 후 반드시 저장

3. Java 파일 수정 후 서버 재시작 없이 반영하기

   JSP 파일은 저장하면 브라우저 새로고침만 해도 바로 반영됩니다.
   Java 파일 (Controller, VO, DAO 등)은 Eclipse가 자동으로 컴파일하지만, 변경사항이 실행 중인 서버에 반영되려면 서버를 재시작해야 합니다.

   서버 재시작 방법

   방법 1: Eclipse 하단 Servers 탭 → 서버 우클릭 → Restart
   방법 2: Eclipse 상단 Run 메뉴 → Restart Server
   방법 3: Servers 탭에서 서버 선택 후 툴바의 재시작 버튼(■ → ▶) 클릭

   ⚠️

   자주 하는 실수: Java 파일을 수정하고 저장했는데 화면이 안 바뀐다 → 서버 재시작을 안 했기 때문입니다.
   SQL XML 파일은 서버 재시작 없이 반영되는 경우도 있지만, 안전하게는 재시작하는 것이 좋습니다.
4. 컴파일 오류(빨간 X) 해결 방법

   Eclipse에서 파일에 빨간 X가 표시되면 문법 오류가 있는 것입니다. 개발을 진행하기 전에 반드시 해결해야 합니다.

   증상	원인	해결
   import 빨간 줄	클래스를 찾을 수 없음	해당 줄에서 Ctrl+1 → "Import 추가" 선택
   클래스명 빨간 줄	VO 클래스명 오타 또는 미생성	VO 파일이 있는지 확인, 클래스명 철자 확인
   메서드 빨간 줄	Service/DAO에 메서드가 없음	해당 인터페이스에 메서드 선언 추가
   세미콜론 누락	Java 문법 오류	오류 줄 끝에 ; 추가

1. ① 데이터베이스 테이블 설계 및 생성

   DBeaver 또는 pgAdmin에서 테이블을 생성합니다. 파워빌더에서 DB 테이블 만들던 것과 동일합니다.

   SQL Developer에서 실행

   -- PK: USER_ID + REG_DATE + SEQ (시퀀스 없이 MAX+1 방식)
   CREATE TABLE TB_PENTA_BUSINESS_SAMPLE_15 (
       USER_ID      VARCHAR2(50)  NOT NULL,
       REG_DATE     DATE          NOT NULL,
       SEQ          NUMBER(10,0)  NOT NULL,
       CUST_NM      VARCHAR2(100) NOT NULL,  -- 고객명
       CUST_TEL     VARCHAR2(20),            -- 전화번호
       CUST_EMAIL   VARCHAR2(200),           -- 이메일
       NOTE         VARCHAR2(500),           -- 비고
       REG_USER     VARCHAR2(50)  NOT NULL,
       UPD_USER     VARCHAR2(50),
       UPD_DATE     DATE,
       CONSTRAINT PK_TB_PENTA_BUSINESS_SAMPLE_15
           PRIMARY KEY (USER_ID, REG_DATE, SEQ)
   );
   COMMENT ON TABLE TB_PENTA_BUSINESS_SAMPLE_15 IS '고객관리 샘플 테이블';
   COMMENT ON COLUMN TB_PENTA_BUSINESS_SAMPLE_15.CUST_NM IS '고객명';

2. ② VO(Value Object) 클래스 생성

   파워빌더의 컬럼 정의와 같습니다. 테이블의 각 컬럼에 해당하는 Java 변수를 선언합니다.
   기존 파일 복사: BusinessSample01VO.java를 복사하여 BusinessSample15VO.java로 저장 후 수정합니다.

   src/main/java/egovframework/penta/business/vo/BusinessSample15VO.java

   package egovframework.penta.business.vo;
   
   import lombok.Data;
   
   @Data    // getter/setter 자동 생성 (파워빌더의 인스턴스변수와 유사)
   public class BusinessSample15VO {
       // PK
       private String userId;     // USER_ID
       private String regDate;    // REG_DATE (문자열 형태 "YYYY-MM-DD")
       private int    seq;        // SEQ
   
       // 업무 컬럼
       private String custNm;     // CUST_NM (DB: CUST_NM → Java: custNm, 자동 camelCase 변환)
       private String custTel;    // CUST_TEL
       private String custEmail;  // CUST_EMAIL
       private String note;       // NOTE
       private String regUser;    // REG_USER
       private String updUser;    // UPD_USER
       private String updDate;    // UPD_DATE
   
       // 조회 조건용 (DB 컬럼 아님)
       private String searchKeyword;
       private String searchDateFrom;
       private String searchDateTo;
   }

   💡

   camelCase 자동 변환: DB 컬럼 CUST_NM은 Java에서 custNm으로 자동 매핑됩니다. mybatis-config.xml에 mapUnderscoreToCamelCase=true 설정이 있기 때문입니다. 밑줄(_)이 자동으로 제거되고 그 다음 글자가 대문자로 바뀝니다.
3. ③ SQL Mapper XML 작성

   파워빌더의 DataWindow SQL과 같습니다.
   기존 파일 복사: BusinessSample01_SQL.xml을 복사하여 BusinessSample15_SQL.xml로 저장합니다.

   src/main/resources/egovframework/sqlmap/business/BusinessSample15_SQL.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
   
   <!-- namespace = DAO 클래스의 전체 경로 (패키지명.클래스명) -->
   <mapper namespace="egovframework.penta.business.dao.BusinessDAO">
   
     <!-- 목록 조회 -->
     <select id="selectSample15List"
             parameterType="egovframework.penta.business.vo.BusinessSample15VO"
             resultType="egovframework.penta.business.vo.BusinessSample15VO">
       SELECT USER_ID, REG_DATE, SEQ,
              CUST_NM, CUST_TEL, CUST_EMAIL, NOTE,
              REG_USER, UPD_USER, UPD_DATE
       FROM TB_PENTA_BUSINESS_SAMPLE_15
       WHERE USER_ID = #{userId}
       <if test="searchKeyword != null and searchKeyword != ''">
         AND (CUST_NM LIKE '%' || #{searchKeyword} || '%'
           OR CUST_TEL LIKE '%' || #{searchKeyword} || '%')
       </if>
       <if test="searchDateFrom != null and searchDateFrom != ''">
         AND REG_DATE >= TO_DATE(#{searchDateFrom}, 'YYYY-MM-DD')
       </if>
       ORDER BY REG_DATE DESC, SEQ DESC
     </select>
   
     <!-- 단건 조회 -->
     <select id="selectSample15Detail"
             parameterType="egovframework.penta.business.vo.BusinessSample15VO"
             resultType="egovframework.penta.business.vo.BusinessSample15VO">
       SELECT * FROM TB_PENTA_BUSINESS_SAMPLE_15
       WHERE USER_ID = #{userId} AND REG_DATE = TO_DATE(#{regDate},'YYYY-MM-DD') AND SEQ = #{seq}
     </select>
   
     <!-- 등록 -->
     <insert id="insertSample15"
              parameterType="egovframework.penta.business.vo.BusinessSample15VO">
       INSERT INTO TB_PENTA_BUSINESS_SAMPLE_15
       (USER_ID, REG_DATE, SEQ, CUST_NM, CUST_TEL, CUST_EMAIL, NOTE, REG_USER, REG_DATE)
       VALUES (
         #{userId}, SYSDATE,
         (SELECT NVL(MAX(SEQ),0)+1 FROM TB_PENTA_BUSINESS_SAMPLE_15
          WHERE USER_ID=#{userId} AND TRUNC(REG_DATE)=TRUNC(SYSDATE)),
         #{custNm}, #{custTel}, #{custEmail}, #{note}, #{regUser}, SYSDATE
       )
     </insert>
   
     <!-- 수정 -->
     <update id="updateSample15"
              parameterType="egovframework.penta.business.vo.BusinessSample15VO">
       UPDATE TB_PENTA_BUSINESS_SAMPLE_15
       SET CUST_NM = #{custNm}, CUST_TEL = #{custTel}, CUST_EMAIL = #{custEmail},
           NOTE = #{note}, UPD_USER = #{updUser}, UPD_DATE = SYSDATE
       WHERE USER_ID = #{userId} AND REG_DATE = TO_DATE(#{regDate},'YYYY-MM-DD') AND SEQ = #{seq}
     </update>
   
     <!-- 삭제 -->
     <delete id="deleteSample15"
              parameterType="egovframework.penta.business.vo.BusinessSample15VO">
       DELETE FROM TB_PENTA_BUSINESS_SAMPLE_15
       WHERE USER_ID = #{userId} AND REG_DATE = TO_DATE(#{regDate},'YYYY-MM-DD') AND SEQ = #{seq}
     </delete>
   
   </mapper>

   💡

   SQL ID 명명 규칙: select/insert/update/delete + SampleNN + 기능명
<if test="...">는 파워빌더의 IF 조건과 같습니다. 값이 있을 때만 WHERE 조건에 추가됩니다.
   #{변수명}은 파워빌더의 :변수명 바인딩과 동일합니다.
4. ④ DAO 메서드 추가

   SQL Mapper와 Java를 연결하는 인터페이스입니다. SQL ID와 동일한 이름의 메서드를 추가합니다.
   파일: src/main/java/egovframework/penta/business/dao/BusinessDAO.java

   BusinessDAO.java에 메서드 추가 (기존 파일 열어서 추가)

   // SAMPLE_15 고객관리
   public List<BusinessSample15VO> selectSample15List(BusinessSample15VO vo);
   public BusinessSample15VO selectSample15Detail(BusinessSample15VO vo);
   public int insertSample15(BusinessSample15VO vo);
   public int updateSample15(BusinessSample15VO vo);
   public int deleteSample15(BusinessSample15VO vo);

5. ⑤ Service 인터페이스에 메서드 추가

   파일: src/main/java/egovframework/penta/business/service/BusinessService.java
   DAO와 동일한 메서드 시그니처를 추가합니다 (보통 DAO 코드를 복사하면 됩니다).

   BusinessService.java에 추가

   // SAMPLE_15
   List<BusinessSample15VO> selectSample15List(BusinessSample15VO vo) throws Exception;
   BusinessSample15VO selectSample15Detail(BusinessSample15VO vo) throws Exception;
   int insertSample15(BusinessSample15VO vo) throws Exception;
   int updateSample15(BusinessSample15VO vo) throws Exception;
   int deleteSample15(BusinessSample15VO vo) throws Exception;

6. ⑥ ServiceImpl에 구현 추가

   파일: src/main/java/egovframework/penta/business/service/impl/BusinessServiceImpl.java
   Service 메서드를 구현합니다. DAO를 호출하는 코드만 작성하면 됩니다.

   BusinessServiceImpl.java에 추가

   @Override
   public List<BusinessSample15VO> selectSample15List(BusinessSample15VO vo) throws Exception {
       return businessDAO.selectSample15List(vo);  // DAO 호출만 하면 됨
   }
   
   @Override
   public int insertSample15(BusinessSample15VO vo) throws Exception {
       return businessDAO.insertSample15(vo);
   }
   // ... 나머지 메서드도 동일한 패턴으로 추가

7. ⑦ Controller에 URL 매핑 추가

   파일: src/main/java/egovframework/penta/business/controller/BusinessController.java
   파워빌더로 비유하면 Application Script에서 URL 요청을 받는 부분입니다.

   BusinessController.java에 추가 (기존 SAMPLE_01 메서드 아래에 추가)

   // =====================================================================
   // SAMPLE_15: 고객관리
   // =====================================================================
   
   /** 화면 진입 */
   @GetMapping("/business/sample15view.do")
   public String sample15View(
           @RequestParam(value="progId", required=false) String progId,
           HttpSession session, Model model) {
       String userId = (String) session.getAttribute("userId");
       log.info("[SAMPLE15] 화면 진입 userId={}", userId);
       model.addAttribute("progId", progId);
       return "business/sample15view";  // JSP 경로 (확장자 .jsp 없이)
   }
   
   /** 목록 조회 (AJAX) */
   @GetMapping("/business/sample15List.do")
   @ResponseBody
   public Map<String, Object> sample15List(BusinessSample15VO vo, HttpSession session) {
       Map<String, Object> result = new HashMap<>();
       try {
           String userId = (String) session.getAttribute("userId");
           vo.setUserId(userId);
           List<BusinessSample15VO> list = businessService.selectSample15List(vo);
           result.put("success", true);
           result.put("list", list);
       } catch (Exception e) {
           log.error("[SAMPLE15] 목록 조회 오류", e);
           result.put("success", false);
           result.put("message", e.getMessage());
       }
       return result;
   }
   
   /** 저장 (등록/수정) */
   @PostMapping("/business/sample15Save.do")
   @ResponseBody
   public Map<String, Object> sample15Save(@RequestBody BusinessSample15VO vo, HttpSession session) {
       Map<String, Object> result = new HashMap<>();
       try {
           String userId = (String) session.getAttribute("userId");
           vo.setRegUser(userId);
           vo.setUserId(userId);
           int cnt = (vo.getSeq() == 0)
                   ? businessService.insertSample15(vo)
                   : businessService.updateSample15(vo);
           result.put("success", cnt > 0);
       } catch (Exception e) {
           log.error("[SAMPLE15] 저장 오류", e);
           result.put("success", false);
           result.put("message", e.getMessage());
       }
       return result;
   }

   💡

   @GetMapping vs @PostMapping: 목록 조회는 GET, 저장/삭제는 POST를 사용합니다.
   @ResponseBody: 이 어노테이션이 있으면 JSON 데이터를 반환합니다 (AJAX 응답용).
   없으면 JSP 파일 경로를 반환합니다 (화면 이동용).
8. ⑧ JSP 화면 파일 작성

   기존 JSP 복사: sample01view.jsp를 복사하여 sample15view.jsp로 저장.
   파워빌더의 Window 디자인과 같습니다. HTML로 화면을 구성하고 JavaScript로 동작을 처리합니다.

   sample15view.jsp 주요 구조

   <!-- 1. 페이지 상단: 헤더, CSS -->
   <style>
     /* 이 화면만의 CSS를 여기에 작성 (공통 CSS 파일 없음) */
   </style>
   
   <!-- 2. 조회조건 패널 (한 줄로 접혀있다가 클릭시 펼쳐짐) -->
   <div id="searchPanel">
     <input type="text" id="searchKeyword" placeholder="고객명 검색">
     <button onclick="loadList()">조회</button>
   </div>
   
   <!-- 3. 데이터 목록 표시 영역 -->
   <div id="listArea"></div>
   
   <!-- 4. 상세/등록 팝업 (위에서 아래로 슬라이드) -->
   <div id="detailPanel" class="side-panel">...</div>
   
   <!-- 5. JavaScript: 화면 동작 로직 -->
   <script>
     // 목록 조회 함수
     function loadList() {
       $.ajax({
         url: '/HandsOn/business/sample15List.do',  // Controller URL
         data: { searchKeyword: $('#searchKeyword').val() },
         success: function(res) {
           if (res.success) renderList(res.list);
         }
       });
     }
   </script>

9. ⑨ 프로그램 메뉴 DB 등록

   신규 화면을 메뉴에 표시하려면 DB 테이블에 등록해야 합니다.

   SQL

   INSERT INTO TB_PENTA_PROGRAM (PROG_ID, PARENT_PROG_ID, PROG_NM, PROG_TYPE,
     PROG_URL, PROG_LEVEL, SORT_ORDER, ICON_CLASS, USE_YN, REG_ID, SYS_TYPE)
   VALUES ('00019', '00000', '고객관리', 'PROGRAM',
     '/business/sample15view.do?progId=00019',
     2, 19, 'fas fa-users', 'Y', 'admin', 'WEB');
   
   -- 역할-프로그램 권한 부여 (ADMIN 역할에 조회/추가/수정/삭제 권한)
   INSERT INTO TB_PENTA_ROLE_PROGRAM
     (ROLE_ID, PROG_ID, VIEW_YN, ADD_YN, UPD_YN, DEL_YN, SAVE_YN, SYS_TYPE)
   VALUES ('ADMIN', '00019', 'Y', 'Y', 'Y', 'Y', 'Y', 'WEB');
   
   COMMIT;

10. ⑩ 서버 재시작 및 테스트

    Eclipse에서 Servers 뷰 → 서버 우클릭 → Restart.
    브라우저에서 http://localhost:8080/HandsOn/business/sample15view.do?progId=00019 접속 확인.

    ✅

    체크리스트
    □ 화면이 정상 표시되는가?
    □ 목록 조회 시 데이터가 나오는가?
    □ 등록/수정/삭제 동작이 되는가?
    □ 로그인 없이 접근 시 로그인 페이지로 이동하는가?
    □ 메뉴에서 이 화면으로 이동이 되는가?

-- 기존 테이블에 컬럼 추가 (ALTER TABLE)
ALTER TABLE TB_PENTA_BUSINESS_SAMPLE_15
  ADD CUST_GRADE VARCHAR2(10) DEFAULT '일반';

-- 컬럼 설명 추가
COMMENT ON COLUMN TB_PENTA_BUSINESS_SAMPLE_15.CUST_GRADE
  IS '고객등급 (VIP/일반/신규)';

-- 추가 확인
DESC TB_PENTA_BUSINESS_SAMPLE_15;

COMMIT;

// BusinessSample15VO.java 파일에 아래 한 줄 추가
@Data
public class BusinessSample15VO {
    private String userId;
    private String regDate;
    private int    seq;
    private String custNm;
    private String custTel;
    private String custEmail;
    private String note;
    private String custGrade;   // ← 이 줄을 추가! DB: CUST_GRADE → Java: custGrade
    private String regUser;
    private String updUser;
    private String updDate;
    private String searchKeyword;
    private String searchDateFrom;
    private String searchDateTo;
}

<!-- SELECT: 조회 컬럼 목록에 CUST_GRADE 추가 -->
<select id="selectSample15List" ...>
  SELECT USER_ID, REG_DATE, SEQ,
         CUST_NM, CUST_TEL, CUST_EMAIL, NOTE,
         CUST_GRADE,   <!-- ← 여기에 추가 -->
         REG_USER, UPD_USER, UPD_DATE
  FROM TB_PENTA_BUSINESS_SAMPLE_15
  ...
</select>

<!-- INSERT: 삽입 컬럼 목록과 VALUES에 추가 -->
<insert id="insertSample15" ...>
  INSERT INTO TB_PENTA_BUSINESS_SAMPLE_15
    (USER_ID, REG_DATE, SEQ, CUST_NM, CUST_TEL, CUST_EMAIL, NOTE,
     CUST_GRADE,   <!-- ← 컬럼 목록에 추가 -->
     REG_USER)
  VALUES (
    #{userId}, SYSDATE,
    (SELECT NVL(MAX(SEQ),0)+1 FROM TB_PENTA_BUSINESS_SAMPLE_15 WHERE USER_ID=#{userId} AND TRUNC(REG_DATE)=TRUNC(SYSDATE)),
    #{custNm}, #{custTel}, #{custEmail}, #{note},
    #{custGrade},  <!-- ← VALUES에도 추가 (VO 필드명 사용) -->
    #{regUser}
  )
</insert>

<!-- UPDATE: SET 절에 추가 -->
<update id="updateSample15" ...>
  UPDATE TB_PENTA_BUSINESS_SAMPLE_15
  SET CUST_NM = #{custNm},
      CUST_TEL = #{custTel},
      CUST_EMAIL = #{custEmail},
      NOTE = #{note},
      CUST_GRADE = #{custGrade},  <!-- ← SET 절에 추가 -->
      UPD_USER = #{updUser},
      UPD_DATE = SYSDATE
  WHERE USER_ID = #{userId} AND REG_DATE = TO_DATE(#{regDate},'YYYY-MM-DD') AND SEQ = #{seq}
</update>

<!-- 목록 표시: renderList 함수에 고객등급 컬럼 추가 -->
<script>
function renderList(list) {
  var html = '<table><thead><tr>'
    + '<th>고객명</th><th>전화번호</th><th>이메일</th>'
    + '<th>고객등급</th>'  // ← 헤더에 추가
    + '</tr></thead><tbody>';
  list.forEach(function(row) {
    html += '<tr onclick="openDetail(row)">'
      + '<td>' + row.custNm + '</td>'
      + '<td>' + (row.custTel || '-') + '</td>'
      + '<td>' + (row.custEmail || '-') + '</td>'
      + '<td>' + (row.custGrade || '일반') + '</td>'  // ← 데이터 셀에 추가
      + '</tr>';
  });
  $('#listArea').html(html + '</tbody></table>');
}

// 상세/등록 팝업: 입력 필드 추가
function openDetail(item) {
  $('#inputCustNm').val(item ? item.custNm : '');
  $('#inputCustGrade').val(item ? item.custGrade : '일반');  // ← 추가
  // ... 다른 필드들
  $('#detailPanel').show();
}

// 저장: 전송 데이터에 추가
function saveSample15() {
  $.ajax({
    url: '/HandsOn/business/sample15Save.do',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      custNm    : $('#inputCustNm').val(),
      custGrade : $('#inputCustGrade').val(),  // ← 추가
      custTel   : $('#inputCustTel').val(),
      // ... 기존 필드들
    }),
    success: function(res) { if(res.success) loadList(); }
  });
}
</script>

<!-- 상세 팝업 HTML: 고객등급 선택 드롭다운 추가 -->
<div id="detailPanel">
  <label>고객명</label>
  <input type="text" id="inputCustNm">

  <label>고객 등급</label>   <!-- ← 추가 -->
  <select id="inputCustGrade">  <!-- ← 추가 -->
    <option value="VIP">VIP</option>
    <option value="일반">일반</option>
    <option value="신규">신규</option>
  </select>

  <button onclick="saveSample15()">저장</button>
</div>

-- PostgreSQL: 컬럼명 변경
ALTER TABLE TB_PENTA_BUSINESS_SAMPLE_15
  RENAME COLUMN CUST_TEL TO CUST_PHONE;

-- 코멘트도 다시 달기
COMMENT ON COLUMN TB_PENTA_BUSINESS_SAMPLE_15.CUST_PHONE
  IS '전화번호';

COMMIT;

// 변경 전
private String custTel;

// 변경 후
private String custPhone;   // CUST_TEL → CUST_PHONE 으로 변경

<!-- Eclipse Ctrl+H: BusinessSample15_SQL.xml 파일 안에서 일괄 변경 -->
<!-- 검색어: CUST_TEL  →  치환어: CUST_PHONE -->
<!-- "Replace All" 클릭하면 파일 내 모든 CUST_TEL이 CUST_PHONE으로 변경됨 -->

<!-- 또한 #{custTel} → #{custPhone} 도 변경 (VO 필드명) -->

// Eclipse Ctrl+H → File Search 탭
// "File name patterns": *.jsp
// "Containing text": custTel
// → 검색 후 각 파일에서 Replace All 실행

// 또는 해당 JSP 파일만 열어서 Ctrl+H → 현재 파일에서 치환

// 변경 전
'<td>' + row.custTel + '</td>'
$('#inputCustTel').val(item.custTel);

// 변경 후
'<td>' + row.custPhone + '</td>'
$('#inputCustPhone').val(item.custPhone);

-- 컬럼 길이 늘리기 (줄이면 기존 데이터 손실 위험 — 주의!)
ALTER TABLE TB_PENTA_BUSINESS_SAMPLE_15
  MODIFY (CUST_NM VARCHAR2(200));

-- NUMBER 타입: 소수점 추가 (INT → DECIMAL)
-- 기존 데이터가 있으면 MODIFY 전에 데이터 확인 필요
ALTER TABLE TB_PENTA_BUSINESS_SAMPLE_15
  MODIFY (PAY_AMT NUMBER(15,2));   -- 소수점 2자리 추가

COMMIT;

// PAY_AMT가 정수에서 소수점 포함으로 변경되면 VO도 변경

// 변경 전 (정수)
private int payAmt;

// 변경 후 (소수점 포함)
private double payAmt;    // 또는 BigDecimal payAmt; (금액은 BigDecimal 권장)

-- ① DB 컬럼 삭제
ALTER TABLE TB_PENTA_BUSINESS_SAMPLE_15
  DROP COLUMN CUST_EMAIL;
COMMIT;

-- ② VO.java: 해당 필드 줄 삭제
// private String custEmail;  ← 이 줄 삭제

-- ③ SQL XML: SELECT/INSERT/UPDATE에서 CUST_EMAIL 및 #{custEmail} 삭제
--    SELECT에서 CUST_EMAIL 제거
--    INSERT 컬럼 목록과 VALUES에서 제거
--    UPDATE SET 절에서 제거

-- ④ JSP: 이메일 관련 HTML/JS 코드 제거
--    <td>row.custEmail</td> 제거
--    <input id="inputCustEmail"> 제거
--    JSON 전송 데이터에서 custEmail: ... 제거

// VO에는 DB 컬럼 외에 화면용 조회조건 변수를 함께 넣습니다.
@Data
public class BusinessSample15VO {
    // DB 컬럼
    private String userId;
    private String custNm;
    ...

    // 조회 조건용 (DB에 없는 변수 — SQL XML에서만 사용)
    private String searchKeyword;
    private String searchDateFrom;  // ← 추가
    private String searchDateTo;    // ← 추가
}

<select id="selectSample15List" ...>
  SELECT ...
  FROM TB_PENTA_BUSINESS_SAMPLE_15
  WHERE USER_ID = #{userId}
  <!-- 날짜 조건: 값이 있을 때만 추가됨 -->
  <if test="searchDateFrom != null and searchDateFrom != ''">
    AND REG_DATE >= TO_DATE(#{searchDateFrom}, 'YYYY-MM-DD')
  </if>
  <if test="searchDateTo != null and searchDateTo != ''">
    AND REG_DATE < TO_DATE(#{searchDateTo}, 'YYYY-MM-DD') + 1
  </if>
  ORDER BY REG_DATE DESC
</select>

<!-- 포인트: <if test="...조건..."> 안의 SQL은 조건이 참일 때만 실행됨 -->
<!-- 파워빌더 비교: DataWindow의 "Where" 절에 IF 조건 추가하던 것과 유사 -->

<!-- 조회조건 패널에 날짜 범위 추가 -->
<div class="search-expand">
  <label>등록일</label>
  <input type="date" id="searchDateFrom"> ~
  <input type="date" id="searchDateTo">  <!-- ← 추가 -->
  <button onclick="loadList()">조회</button>
</div>

<script>
function loadList() {
  $.ajax({
    url: '/HandsOn/business/sample15List.do',
    data: {
      searchKeyword  : $('#searchKeyword').val(),
      searchDateFrom : $('#searchDateFrom').val(),  // ← 추가
      searchDateTo   : $('#searchDateTo').val()      // ← 추가
    },
    success: function(res) { if(res.success) renderList(res.list); }
  });
}
</script>

<!-- 조회조건: 항상 1줄 표시, 클릭하면 펼쳐짐 -->
<div id="searchBar" class="search-bar-collapsed">
  <div class="search-summary" onclick="toggleSearch()">
    <!-- 접힌 상태에서 보여줄 현재 조회조건 요약 -->
    <span id="searchSummary">최근 15일</span>
    <i class="fas fa-chevron-down"></i>
  </div>
  <div class="search-expand" id="searchExpand" style="display:none">
    <!-- 펼쳐진 조회조건 폼 -->
    <input type="date" id="dateFrom"> ~ <input type="date" id="dateTo">
    <select id="payStatus">
      <option value="">전체</option>
      <option value="APR">승인</option>
      <option value="CAN">취소</option>
    </select>
    <button onclick="doSearch()">조회</button>
  </div>
</div>

<script>
// 조회조건 패널 포커스 이탈 시 자동 닫기 + 자동 조회
function toggleSearch() {
  var $exp = $('#searchExpand');
  $exp.slideToggle(200, function() {
    if ($exp.is(':visible')) $exp.find('input,select').first().focus();
  });
}
$('#searchExpand').on('focusout', function(e) {
  if (!$.contains(this, e.relatedTarget)) {
    $(this).slideUp(200);
    updateSummary();
    loadList(); // 자동 조회
  }
});
</script>

<!-- 목록 조회: 최근 15일, 다중 조건 -->
<select id="selectSample01List" ...>
  SELECT USER_ID, PAY_DTTM, PAY_SEQ, CARD_NM, MERCHANT_NM,
         MERCHANT_CAT, PAY_AMT, DISCOUNT_AMT, FINAL_AMT,
         INSTALLMENT, APPROVAL_NO, PAY_STATUS
  FROM TB_PENTA_BUSINESS_SAMPLE_01
  WHERE USER_ID = #{userId}
    AND PAY_DTTM >= TO_TIMESTAMP(#{dateFrom}, 'YYYY-MM-DD')
    AND PAY_DTTM <  TO_TIMESTAMP(#{dateTo}, 'YYYY-MM-DD') + 1
  <if test="payStatus != null and payStatus != ''">
    AND PAY_STATUS = #{payStatus}
  </if>
  ORDER BY PAY_DTTM DESC
</select>

<!-- PK 자동 증가 (MAX+1): 시퀀스 없이 PK3 계산 -->
<insert id="insertSample01" ...>
  INSERT INTO TB_PENTA_BUSINESS_SAMPLE_01
    (USER_ID, PAY_DTTM, PAY_SEQ, ...)
  VALUES (
    #{userId}, SYSTIMESTAMP,
    (SELECT NVL(MAX(PAY_SEQ),0)+1
     FROM TB_PENTA_BUSINESS_SAMPLE_01
     WHERE USER_ID=#{userId}
       AND PAY_DTTM=SYSTIMESTAMP),
    ...
  )
</insert>

// 화면 진입 (GET) - 세션 체크 후 JSP 반환
@GetMapping("/business/sample1View.do")
public String sample01View(@RequestParam String progId,
        HttpSession session, Model model) {
    log.info("[SAMPLE01] 진입 userId={}", session.getAttribute("userId"));
    model.addAttribute("progId", progId);
    return "business/sample01view";
}

// 목록 조회 (AJAX-GET) → JSON 반환
@GetMapping("/business/sample01List.do")
@ResponseBody
public Map<String, Object> sample01List(
        BusinessSample01VO vo, HttpSession session) {
    Map<String, Object> result = new HashMap<>();
    try {
        vo.setUserId((String) session.getAttribute("userId"));
        result.put("list", businessService.selectSample01List(vo));
        result.put("success", true);
    } catch(Exception e) { result.put("success",false); }
    return result;
}

var sortCol = 'PROD_NM', sortDir = 'ASC';

function doSort(col) {
  if (sortCol === col) {
    sortDir = (sortDir === 'ASC') ? 'DESC' : 'ASC';
  } else {
    sortCol = col; sortDir = 'ASC';
  }
  loadList(); // 정렬 변경 후 재조회
}

function renderSortIcon(col) {
  if (sortCol !== col) return '<i class="fas fa-sort text-muted"></i>';
  return sortDir === 'ASC'
    ? '<i class="fas fa-sort-up text-primary"></i>'
    : '<i class="fas fa-sort-down text-primary"></i>';
}

// 테이블 헤더 HTML (정렬 아이콘 포함)
function renderTableHeader() {
  return '<thead><tr>'
    + '<th onclick="doSort(\'PROD_NM\')">제품명 ' + renderSortIcon('PROD_NM') + '</th>'
    + '<th onclick="doSort(\'STOCK_QTY\')">재고수량 ' + renderSortIcon('STOCK_QTY') + '</th>'
    + '</tr></thead>';
}

/* 모바일: 주요 컬럼만 보임 */
@media (max-width: 768px) {
  .col-optional { display: none; }
}
/* PC: 모든 컬럼 표시 */
@media (min-width: 769px) {
  .col-optional { display: table-cell; }
}

// 행 클릭 시 상세 패널 표시 (위에서 아래로 슬라이드)
function openDetail(item) {
  // 상세 패널에 데이터 채우기
  $('#detailProdNm').text(item.prodNm);
  $('#detailStockQty').val(item.stockQty);
  // 위에서 아래로 슬라이드
  $('#detailPanel').css({top:'-100%'}).show()
    .animate({top: '0'}, 300);
}

function closeDetail() {
  $('#detailPanel').animate({top:'-100%'}, 300, function() {
    $(this).hide();
  });
}

Chart.js를 활용한 13종 차트 구현 방법입니다. 각 차트는 연도 선택 드롭다운으로 데이터를 갱신합니다.

var barChart = null;  // 차트 인스턴스 전역 변수로 관리

function loadBarChart(year) {
  $.ajax({
    url: '/HandsOn/business/sample03BarData.do',
    data: { year: year },
    success: function(res) {
      if (!res.success) return;

      // ⚠️ 기존 차트 인스턴스 반드시 파괴 후 재생성 (메모리 누수 방지)
      if (barChart) { barChart.destroy(); barChart = null; }

      var ctx = document.getElementById('barChartCanvas').getContext('2d');
      barChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: res.labels,           // ['1월','2월',...,'12월']
          datasets: [{
            label: '서울',
            data: res.seoulData,
            backgroundColor: 'rgba(54,162,235,0.7)'
          },{
            label: '경기',
            data: res.gyeonggiData,
            backgroundColor: 'rgba(255,99,132,0.7)'
          }]
        },
        options: { responsive: true, plugins: { legend: { position: 'top' } } }
      });
    }
  });
}

// 연도 선택 변경 시 모든 차트 갱신
$('#yearSelect').on('change', function() {
  var year = $(this).val();
  loadBarChart(year);
  loadLineChart(year);
  // ... 나머지 차트도 동일 패턴
});

@GetMapping("/business/sample03BarData.do")
@ResponseBody
public Map<String, Object> sample03BarData(
        BusinessSample03VO vo, HttpSession session) {
    Map<String, Object> result = new HashMap<>();
    try {
        // DB에서 원시 데이터 조회
        List<BusinessSample03VO> rawList =
            businessService.selectSample03BarList(vo);

        // Chart.js 형식으로 가공: 레이블 배열 + 시리즈별 데이터 배열
        List<String> labels = new ArrayList<>();
        List<Double> seoulData = new ArrayList<>();
        List<Double> gyeonggiData = new ArrayList<>();

        for(BusinessSample03VO row : rawList) {
            if("서울".equals(row.getSeries())) {
                labels.add(row.getLabel());
                seoulData.add(row.getValue1());
            } else if("경기".equals(row.getSeries())) {
                gyeonggiData.add(row.getValue1());
            }
        }
        result.put("labels", labels);
        result.put("seoulData", seoulData);
        result.put("gyeonggiData", gyeonggiData);
        result.put("success", true);
    } catch(Exception e) { result.put("success", false); }
    return result;
}

@PostMapping("/business/sample04Approve.do")
@ResponseBody
public Map<String, Object> sample04Approve(
        @RequestBody BusinessSample04VO vo, HttpSession session) {
    Map<String, Object> result = new HashMap<>();
    try {
        String loginUser = (String) session.getAttribute("userId");

        // 1. 결재 이력 저장 (TB_PENTA_BUSINESS_SAMPLE_04_03)
        businessService.insertSample04ApprovalHistory(vo);

        // 2. 결재선 상태 업데이트 (TB_PENTA_BUSINESS_SAMPLE_04_00)
        businessService.updateSample04LineStatus(vo);

        // 3. 다음 결재자에게 메시지 발송 또는 최종 완료 처리
        businessService.processSample04NextStep(vo, loginUser);

        result.put("success", true);
    } catch(Exception e) {
        log.error("[SAMPLE04] 결재 처리 오류", e);
        result.put("success", false);
    }
    return result;
}

public void processSample04NextStep(BusinessSample04VO vo, String loginUser) throws Exception {
    if ("REJECTED".equals(vo.getApprovalStatus())) {
        // 반려: 요청자에게 메시지 발송
        sendApprovalMessage(vo.getRequestUser(),
            "결재 반려: " + vo.getTitle(),
            "결재가 반려되었습니다. 의견: " + vo.getOpinion());
        // 요청 상태 REJECTED로 변경
        businessDAO.updateSample04RequestStatus(vo.getRequestDate(),
            vo.getRequestUser(), vo.getRequestSeq(), "REJECTED");
    } else {
        // 승인: 다음 결재선 IN_PROGRESS로 변경
        BusinessSample04VO nextLine =
            businessDAO.selectSample04NextLine(vo);
        if (nextLine != null) {
            // 다음 결재자에게 메시지 발송
            sendApprovalMessage(nextLine.getApproverId(),
                "결재 요청: " + vo.getTitle(), "결재가 도착했습니다.");
        } else {
            // 최종 완료: 요청자에게 완료 메시지
            sendApprovalMessage(vo.getRequestUser(),
                "결재 완료: " + vo.getTitle(), "모든 결재가 완료되었습니다.");
            businessDAO.updateSample04RequestStatus(vo.getRequestDate(),
                vo.getRequestUser(), vo.getRequestSeq(), "APPROVED");
        }
    }
}

// 결재선 렌더링 함수
function renderApprovalLines(lines) {
  return lines.map(function(line, idx) {
    var statusBadge = {
      'WAIT'       : '<span class="badge gray">대기</span>',
      'IN_PROGRESS': '<span class="badge warning">결재중</span>',
      'APPROVED'   : '<span class="badge success">승인</span>',
      'REJECTED'   : '<span class="badge danger">반려</span>'
    }[line.lineStatus] || '';

    return '<div class="approval-line">'
      + '<span class="line-num">' + (idx+1) + '차</span>'
      + '<span class="approver-name">' + line.approverName + '</span>'
      + statusBadge
      + (line.opinion ? '<p class="opinion">'+line.opinion+'</p>' : '')
      + '</div>';
  }).join('');
}

<!-- JSP: 드롭다운 자리에 id 부여 -->
<select id="jobGrade" name="jobGrade">
  <option value="">직급 선택</option>
</select>

<script>
// 공통코드 로드 함수 (UPPER_CODE_ID 기준)
function loadCodeSelect(upperCode, selectId) {
  $.ajax({
    url: '/HandsOn/common/getCodeList.do',
    data: { upperCodeId: upperCode },
    success: function(res) {
      var opts = '<option value="">선택</option>';
      res.list.forEach(function(c) {
        opts += '<option value="'+c.codeId+'">'+c.codeName+'</option>';
      });
      $('#' + selectId).html(opts);
    }
  });
}
// 페이지 로드 시 직급 코드 로드
loadCodeSelect('JOB_GRADE', 'jobGrade');
</script>

function saveSample05() {
  // 필수값 체크
  var title = $('#inputTitle').val().trim();
  if (!title) {
    Swal.fire({ icon: 'warning', title: '입력 오류', text: '제목을 입력해주세요.' });
    $('#inputTitle').focus();
    return;
  }
  // 저장 확인
  Swal.fire({
    title: '저장하시겠습니까?', icon: 'question',
    showCancelButton: true, confirmButtonText: '저장', cancelButtonText: '취소'
  }).then(function(result) {
    if (result.isConfirmed) {
      $.ajax({
        url: '/HandsOn/business/sample05Save.do',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ title: title, ... }),
        success: function(res) {
          if (res.success) {
            Swal.fire({ icon: 'success', title: '저장 완료' });
            loadList(); closeDetail();
          }
        }
      });
    }
  });
}

// Android / iOS 공통 바코드 스캔 함수
function startBarcodeScam() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('android') > -1) {
    // Android WebView 인터페이스
    if (typeof pentaApp !== 'undefined') {
      pentaApp.scanBarcode('onBarcodeResult');
    }
  } else if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1) {
    // iOS WKWebView 인터페이스
    window.webkit.messageHandlers.scanBarcode
      .postMessage({ callback: 'onBarcodeResult' });
  } else {
    // 웹 브라우저: 직접 입력 폼 표시
    $('#barcodeInput').show().focus();
  }
}

// 앱에서 스캔 완료 후 호출하는 콜백
function onBarcodeResult(barcodeValue) {
  $('#barcodeDisplay').text(barcodeValue);
  searchByBarcode(barcodeValue);
}

// 바코드로 재고 조회
function searchByBarcode(code) {
  $.ajax({
    url: '/HandsOn/api/sample06Search.do',
    data: { barcode: code },
    success: function(res) {
      if (res.item) renderItemDetail(res.item);
      else Swal.fire({ icon:'warning', text:'해당 바코드 상품 없음' });
    }
  });
}

// Leaflet 지도 초기화 (페이지 로드 시 1회)
var leafletMap, leafletMarker;
function initLeafletMap(lat, lng) {
  leafletMap = L.map('mapContainer').setView([lat, lng], 15);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(leafletMap);
  leafletMarker = L.marker([lat, lng]).addTo(leafletMap);
}

// GPS 현재 위치 취득 (앱: PentaNative, 웹: navigator.geolocation)
function getCurrentLocation() {
  PentaNative.getCurrentLocation()
    .then(function(loc) {
      var lat = loc.latitude, lng = loc.longitude;
      $('#inputLat').val(lat);
      $('#inputLng').val(lng);
      if (leafletMap) {
        leafletMap.setView([lat, lng], 15);
        leafletMarker.setLatLng([lat, lng]);
      } else {
        initLeafletMap(lat, lng);
      }
    })
    .catch(function(err) {
      Swal.fire({ icon:'warning', text:'위치 정보 오류: ' + err });
    });
}

// Leaflet 마커 이동 헬퍼
function moveMapMarker(lat, lng) {
  if (leafletMap) {
    leafletMap.setView([lat, lng], 15);
    leafletMarker.setLatLng([lat, lng]);
  } else {
    initLeafletMap(lat, lng);
  }
}

// 앱에서 사진 촬영 완료 후 콜백 (Base64 데이터 수신)
function onPhotoTaken(base64Data) {
  // 미리보기 표시
  $('#photoPreview').attr('src', 'data:image/jpeg;base64,' + base64Data);

  // 서버에 업로드
  $.ajax({
    url: '/HandsOn/api/sample07Upload.do',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ photoData: base64Data, userId: LOGIN_USER_ID }),
    success: function(res) {
      if (res.success) {
        $('#hiddenFileId').val(res.fileId);
        Swal.fire({ icon:'success', title:'사진 저장 완료', timer:1500 });
      }
    }
  });
}

스마트폰 카메라로 바코드를 스캔해 상품 정보를 조회·처리하는 화면입니다. Android / iOS 앱의 네이티브 스캐너를 호출하고, 결과를 JavaScript 콜백으로 받아 서버 조회까지 연결합니다.

📁 수정할 파일 목록

// GET /HandsOn/api/sample07Search.do?barcode=ABC123
@RequestMapping(value = "/api/sample07Search.do", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> sample07Search(
        @RequestParam String barcode,
        HttpSession session) {
    Map<String, Object> result = new HashMap<>();
    try {
        logger.info("[SAMPLE07] 바코드 조회 시작: {}", barcode);
        Map<String, Object> item = apiService.getSample07ByBarcode(barcode);
        result.put("success", item != null);
        result.put("item", item);
    } catch (Exception e) {
        logger.error("[SAMPLE07] 바코드 조회 오류", e);
        result.put("success", false);
    }
    return result;
}

// 바코드 스캔 시작 (Android/iOS/웹 분기)
function startScan07() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('android') > -1 && typeof pentaApp !== 'undefined') {
    pentaApp.scanBarcode('onScan07Result');          // Android
  } else if (/iphone|ipad/.test(ua)) {
    window.webkit.messageHandlers.scanBarcode
      .postMessage({ callback: 'onScan07Result' });    // iOS
  } else {
    $('#manualInput07').show().focus();               // PC 수동 입력
  }
}

// 앱이 스캔 완료 후 JS 호출
function onScan07Result(barcodeVal) {
  $('#barcodeValue').text(barcodeVal);
  $.ajax({
    url: '/HandsOn/api/sample07Search.do',
    data: { barcode: barcodeVal },
    success: function(res) {
      if (res.success && res.item) {
        showItemDetail07(res.item);
      } else {
        Swal.fire({ icon: 'warning', text: '해당 바코드 상품을 찾을 수 없습니다.' });
      }
    }
  });
}

창고별 품목 재고 현황을 조회하고, 실사(현물 확인) 수량을 입력해 시스템 재고와 차이를 관리하는 화면입니다. SAMPLE_02의 표 기반 화면에 편집 기능을 추가한 형태로 이해하면 됩니다.

📁 수정할 파일 목록

<!-- 재고 목록 조회 -->
<select id="getSample08List" parameterType="map" resultType="BusinessSample08VO">
  SELECT ITEM_CD, ITEM_NM, WAREHOUSE_CD, SYS_QTY, REAL_QTY,
         (REAL_QTY - SYS_QTY) AS DIFF_QTY, INSP_DATE
  FROM   TB_PENTA_BUSINESS_SAMPLE_08
  WHERE  1=1
  <if test="warehouseCd != null and warehouseCd != ''">
    AND WAREHOUSE_CD = #{warehouseCd}
  </if>
  ORDER BY ITEM_CD
</select>

<!-- 실사 수량 업데이트 -->
<update id="updateSample08RealQty" parameterType="BusinessSample08VO">
  UPDATE TB_PENTA_BUSINESS_SAMPLE_08
  SET    REAL_QTY = #{realQty},
         INSP_DATE = SYSDATE,
         UPD_USER  = #{updUser},
         UPD_DATE  = SYSDATE
  WHERE  ITEM_CD      = #{itemCd}
    AND  WAREHOUSE_CD = #{warehouseCd}
</update>

// 수량 셀 클릭 시 input으로 전환
$('#sample08Table').on('click', '.real-qty-cell', function() {
  var $td = $(this);
  var curVal = $td.data('val');
  $td.html('<input type="number" class="qty-input" value="' + curVal + '">');
  $td.find('.qty-input').focus();
});

// 변경된 행 수집 → 서버 일괄 저장
function saveSample08() {
  var rows = [];
  $('.qty-input').each(function() {
    var $tr = $(this).closest('tr');
    rows.push({
      itemCd:      $tr.data('item'),
      warehouseCd: $tr.data('wh'),
      realQty:     $(this).val()
    });
  });
  if (rows.length === 0) { Swal.fire({ icon:'info', text:'변경된 항목이 없습니다.' }); return; }
  $.ajax({
    url:  '/HandsOn/business/sample08Save.do',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ rows: rows }),
    success: function(res) {
      if (res.success) { Swal.fire({ icon:'success', text:'저장 완료', timer:1500 }); loadSample08List(); }
    }
  });
}

출고 지시 목록을 조회하고, 담당자가 출고 확인(피킹 완료)을 처리하는 화면입니다. 상태 전환(대기→피킹중→출고완료)이 핵심이며, 각 단계에서 처리자/처리 시각을 기록합니다.

📁 수정할 파일 목록

<!-- 출고 지시 목록 조회 (상태별 필터) -->
<select id="getSample09List" parameterType="map" resultType="BusinessSample09VO">
  SELECT ORDER_NO, ITEM_CD, ITEM_NM, ORDER_QTY, STATUS_CD,
         REQUEST_USER, REQUEST_DATE, PICK_USER, PICK_DATE
  FROM   TB_PENTA_BUSINESS_SAMPLE_09
  WHERE  1=1
  <if test="statusCd != null and statusCd != ''">
    AND STATUS_CD = #{statusCd}
  </if>
  <if test="fromDate != null">
    AND TRUNC(REQUEST_DATE) >= TO_DATE(#{fromDate}, 'YYYYMMDD')
  </if>
  ORDER BY REQUEST_DATE DESC
</select>

<!-- 출고 상태 변경 (피킹 완료 처리) -->
<update id="updateSample09Status" parameterType="BusinessSample09VO">
  UPDATE TB_PENTA_BUSINESS_SAMPLE_09
  SET    STATUS_CD = #{statusCd},
         PICK_USER = #{pickUser},
         PICK_DATE = SYSDATE,
         UPD_USER  = #{updUser},
         UPD_DATE  = SYSDATE
  WHERE  ORDER_NO = #{orderNo}
</update>

// 출고 처리 버튼 클릭
function processShipment09(orderNo, currentStatus) {
  var nextStatus = { 'WAIT': 'PICKING', 'PICKING': 'DONE' };
  var statusNm  = { 'PICKING': '피킹 시작', 'DONE': '출고 완료' };
  var toStatus  = nextStatus[currentStatus];
  if (!toStatus) { Swal.fire({ icon:'info', text:'이미 처리 완료된 건입니다.' }); return; }

  Swal.fire({
    icon: 'question',
    title: statusNm[toStatus] + ' 처리하시겠습니까?',
    showCancelButton: true
  }).then(function(r) {
    if (!r.isConfirmed) return;
    $.ajax({
      url:  '/HandsOn/business/sample09UpdateStatus.do',
      type: 'POST',
      data: { orderNo: orderNo, statusCd: toStatus },
      success: function(res) {
        if (res.success) loadSample09List();
      }
    });
  });
}

스마트폰 카메라로 사진을 촬영하고 서버에 저장한 뒤, 저장된 사진 목록을 갤러리 형태로 표시하는 화면입니다. 사진 데이터는 Base64로 전송하여 서버에서 BLOB 또는 파일 시스템으로 저장합니다.

📁 수정할 파일 목록

// 카메라 촬영 시작
function takePhoto10() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('android') > -1 && typeof pentaApp !== 'undefined') {
    pentaApp.takePicture('onPhoto10Taken');
  } else if (/iphone|ipad/.test(ua)) {
    window.webkit.messageHandlers.takePicture
      .postMessage({ callback: 'onPhoto10Taken' });
  } else {
    // PC: input[type=file] 트리거
    $('#fileInput10').click();
  }
}

// 앱 콜백 — Base64 이미지 수신 후 업로드
window.onPhoto10Taken = function(base64) {
  $('#preview10').attr('src', 'data:image/jpeg;base64,' + base64).show();
  $.ajax({
    url:  '/HandsOn/api/sample10Upload.do',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      photoData: base64,
      refKey:    $('#refKey10').val(),   // 연결 대상 PK
      userId:    LOGIN_USER_ID
    }),
    success: function(res) {
      if (res.success) {
        Swal.fire({ icon:'success', text:'사진이 저장되었습니다.', timer:1500 });
        loadGallery10();  // 갤러리 새로고침
      }
    }
  });
};

// POST /HandsOn/api/sample10Upload.do
@RequestMapping(value = "/api/sample10Upload.do", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> sample10Upload(
        @RequestBody Map<String, Object> param,
        HttpSession session) {
    Map<String, Object> result = new HashMap<>();
    try {
        String base64 = (String) param.get("photoData");
        // Base64 디코딩 → byte[]
        byte[] photoBytes = Base64.getDecoder().decode(base64);
        param.put("photoBytes", photoBytes);
        param.put("fileSize", photoBytes.length);
        apiService.insertSample10Photo(param);
        result.put("success", true);
    } catch (Exception e) {
        logger.error("[SAMPLE10] 사진 업로드 오류", e);
        result.put("success", false);
    }
    return result;
}

작업 지시서를 조회하고, 작업 시작 시각과 완료 시각을 기록하면서 상태를 관리하는 화면입니다. 현장 담당자가 모바일에서 직접 작업 시작/완료 버튼을 눌러 실시간으로 진행 상황을 갱신합니다.

📁 수정할 파일 목록

<!-- 작업 시작 처리 -->
<update id="startSample11Work" parameterType="map">
  UPDATE TB_PENTA_BUSINESS_SAMPLE_11
  SET    STATUS_CD  = 'IN_PROGRESS',
         START_DATE = SYSDATE,
         WORKER_ID  = #{workerId},
         UPD_USER   = #{workerId},
         UPD_DATE   = SYSDATE
  WHERE  WORK_NO = #{workNo}
    AND  STATUS_CD = 'WAIT'
</update>

<!-- 작업 완료 처리 -->
<update id="completeSample11Work" parameterType="map">
  UPDATE TB_PENTA_BUSINESS_SAMPLE_11
  SET    STATUS_CD   = 'DONE',
         END_DATE    = SYSDATE,
         RESULT_NOTE = #{resultNote},
         UPD_USER    = #{workerId},
         UPD_DATE    = SYSDATE
  WHERE  WORK_NO = #{workNo}
    AND  STATUS_CD = 'IN_PROGRESS'
    AND  WORKER_ID = #{workerId}
</update>

// 작업 시작 버튼
function startWork11(workNo) {
  Swal.fire({ icon:'question', title:'작업을 시작하시겠습니까?', showCancelButton:true })
    .then(function(r) {
      if (!r.isConfirmed) return;
      $.post('/HandsOn/business/sample11Start.do', { workNo: workNo },
        function(res) {
          if (res.success) loadSample11List();
        });
    });
}

// 작업 완료 버튼 — 결과 메모 입력 받기
function completeWork11(workNo) {
  Swal.fire({
    icon:  'question',
    title: '작업을 완료 처리합니다.',
    input: 'textarea',
    inputLabel: '처리 결과 메모 (선택)',
    inputPlaceholder: '이상 없음 / 교체 완료 등',
    showCancelButton: true
  }).then(function(r) {
    if (!r.isConfirmed) return;
    $.post('/HandsOn/business/sample11Complete.do',
      { workNo: workNo, resultNote: r.value },
      function(res) {
        if (res.success) loadSample11List();
      });
  });
}

공장·현장의 설비 가동 상태(가동/비가동)를 실시간으로 확인하고 변경 이력을 남기는 화면입니다. 토글 버튼 하나로 상태를 전환하고, 변경 사유와 담당자를 이력 테이블에 기록합니다.

📁 수정할 파일 목록

<!-- 설비 가동 상태 변경 -->
<update id="updateSample12Status" parameterType="map">
  UPDATE TB_PENTA_BUSINESS_SAMPLE_12
  SET    OPER_STATUS = #{operStatus},
         CHG_USER    = #{chgUser},
         CHG_DATE    = SYSDATE,
         CHG_REASON  = #{chgReason},
         UPD_USER    = #{chgUser},
         UPD_DATE    = SYSDATE
  WHERE  EQUIP_ID = #{equipId}
</update>

<!-- 상태 변경 이력 INSERT -->
<insert id="insertSample12History" parameterType="map">
  INSERT INTO TB_PENTA_BUSINESS_SAMPLE_12_HIS
    (EQUIP_ID, BEFORE_STATUS, AFTER_STATUS, CHG_USER, CHG_DATE, CHG_REASON)
  VALUES
    (#{equipId}, #{beforeStatus}, #{operStatus}, #{chgUser}, SYSDATE, #{chgReason})
</insert>

// 가동/비가동 토글 클릭
function toggleEquip12(equipId, currentStatus) {
  var newStatus = (currentStatus === 'RUN') ? 'STOP' : 'RUN';
  var msg       = (newStatus === 'RUN') ? '가동' : '비가동';
  Swal.fire({
    icon:        'question',
    title:       msg + ' 처리',
    input:       'text',
    inputLabel:  '변경 사유 입력',
    inputAttributes: { required: true },
    showCancelButton: true
  }).then(function(r) {
    if (!r.isConfirmed || !r.value) return;
    $.post('/HandsOn/business/sample12Toggle.do', {
      equipId:       equipId,
      beforeStatus:  currentStatus,
      operStatus:    newStatus,
      chgReason:     r.value
    }, function(res) {
      if (res.success) loadSample12List();
    });
  });
}

현재 GPS 위치를 취득해 DB에 저장하고, 저장된 위치들을 지도 위에 마커로 표시하는 화면입니다. Leaflet + OpenStreetMap을 사용합니다 (무료, API 키 불필요).

📁 수정할 파일 목록

// head에 Leaflet CSS/JS 포함 (CDN)
// <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
// <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

var map13, markers13 = [];
function initMap13(centerLat, centerLng) {
  map13 = L.map('map13Container').setView([centerLat, centerLng], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map13);
}

// DB 조회 후 마커 일괄 생성
function loadMarkers13() {
  $.ajax({
    url: '/HandsOn/business/sample13Markers.do',
    success: function(res) {
      $.each(res.list, function(i, item) {
        var marker = L.marker([item.lat, item.lng])
          .addTo(map13)
          .bindPopup('<b>' + item.locNm + '</b><br>' + item.regDate);
        markers13.push(marker);
      });
    }
  });
}

// 현재 위치 취득 → DB 저장 → 마커 추가
function saveCurrentLocation13() {
  PentaNative.getCurrentLocation()
    .then(function(pos) {
      $.ajax({
        url:  '/HandsOn/business/sample13SaveLoc.do',
        type: 'POST',
        data: {
          lat:   pos.lat,
          lng:   pos.lng,
          locNm: $('#inputLocNm13').val()
        },
        success: function(res) {
          if (res.success) { loadMarkers13(); Swal.fire({ icon:'success', text:'위치 저장 완료', timer:1200 }); }
        }
      });
    })
    .catch(function() { Swal.fire({ icon:'error', text:'GPS 위치 정보를 가져올 수 없습니다.' }); });
}

현장 방문 시 GPS 위치를 자동으로 기록하고, 방문 목적·결과·사진을 함께 저장하는 화면입니다. SAMPLE_10(사진)과 SAMPLE_13(지도)의 기능을 결합한 복합 유형입니다.

📁 수정할 파일 목록

// 현장 체크인 처리
function checkIn14() {
  var locData = { lat: null, lng: null };
  // 1단계: GPS 취득
  navigator.geolocation.getCurrentPosition(function(pos) {
    locData.lat = pos.coords.latitude;
    locData.lng = pos.coords.longitude;
    // 2단계: 사진 촬영 여부 확인
    var photoBase64 = $('#hiddenPhoto14').val() || '';
    // 3단계: 폼 데이터와 함께 서버 전송
    $.ajax({
      url:  '/HandsOn/business/sample14CheckIn.do',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        visitPurpose: $('#visitPurpose14').val(),
        custNm:       $('#custNm14').val(),
        lat:          locData.lat,
        lng:          locData.lng,
        photoData:    photoBase64,
        note:         $('#note14').val()
      }),
      success: function(res) {
        if (res.success) {
          Swal.fire({ icon:'success', title:'체크인 완료', timer:1500 });
          closeSidePanel();
          loadSample14List();
        }
      }
    });
  }, function() {
    Swal.fire({ icon:'warning', text:'GPS 권한이 필요합니다. 위치 권한을 허용해 주세요.' });
  });
}

<!-- 방문 헤더 INSERT -->
<insert id="insertSample14Visit" parameterType="BusinessSample14VO">
  INSERT INTO TB_PENTA_BUSINESS_SAMPLE_14
    (VISIT_DATE, VISIT_USER, VISIT_SEQ,
     CUST_NM, VISIT_PURPOSE, LAT, LNG, NOTE,
     REG_USER, REG_DATE)
  VALUES
    (TRUNC(SYSDATE), #{visitUser},
     (SELECT NVL(MAX(VISIT_SEQ),0)+1
      FROM TB_PENTA_BUSINESS_SAMPLE_14
      WHERE VISIT_DATE = TRUNC(SYSDATE) AND VISIT_USER = #{visitUser}),
     #{custNm}, #{visitPurpose}, #{lat}, #{lng}, #{note},
     #{visitUser}, SYSDATE)
</insert>

1. Eclipse Console 로그 확인

   빨간색 에러 메시지를 확인합니다. 클래스명, 메서드명, 라인번호가 표시됩니다.
2. 브라우저 개발자 도구 (F12) → Console/Network 확인

   AJAX 요청 실패 시 Network 탭에서 응답 내용을 확인합니다.
3. 자주 발생하는 오류

   오류 메시지	원인	해결 방법
   Invalid bound statement	SQL ID가 DAO 메서드명과 다름	XML의 id="..." 와 DAO 메서드명 일치 확인
   Could not find result map	resultType 클래스 경로 오류	VO 클래스 패키지 경로 확인
   404 Not Found	Controller URL 매핑 오류	@GetMapping URL과 실제 호출 URL 일치 확인
   NullPointerException	세션에서 값 없음	session.getAttribute() 결과 null 체크
   ORA-00942	테이블 없음	테이블 생성 확인, 스키마 확인

<configuration>
  <settings>
    <!-- DB 컬럼 CUST_NM → Java 변수 custNm 자동 변환 -->
    <setting name="mapUnderscoreToCamelCase" value="true"/>
    <!-- NULL 값도 SQL에 전달 -->
    <setting name="jdbcTypeForNull" value="NULL"/>
    <!-- 로그 레벨 -->
    <setting name="logImpl" value="SLF4J"/>
  </settings>
</configuration>

-- 최근 로그인 이력 확인
SELECT * FROM TB_PENTA_LOGIN_LOG ORDER BY LOGIN_DATE DESC FETCH FIRST 20 ROWS ONLY;

-- 사용자별 화면 접근 이력
SELECT * FROM TB_PENTA_PROGRAM_RUN_LOG WHERE USER_ID='admin'
ORDER BY EXEC_DATE DESC FETCH FIRST 20 ROWS ONLY;

-- 미결재 현황 확인
SELECT r.REQUEST_USER, r.TITLE, r.STATUS,
       l.APPROVER_ID, l.LINE_STATUS
FROM TB_PENTA_BUSINESS_SAMPLE_04_01 r
JOIN TB_PENTA_BUSINESS_SAMPLE_04_00 l
  ON r.REQUEST_DATE = l.REQUEST_DATE
 AND r.REQUEST_TIME = l.REQUEST_TIME
 AND r.REQUEST_USER = l.REQUEST_USER
 AND r.REQUEST_SEQ  = l.REQUEST_SEQ
WHERE l.LINE_STATUS = 'IN_PROGRESS'
ORDER BY r.REQUEST_DATE DESC;

-- 미확인 메시지 수
SELECT RECEIVER_ID, COUNT(*) AS UNREAD_CNT
FROM TB_PENTA_MESSAGE
WHERE READ_YN = 'N'
GROUP BY RECEIVER_ID;