2026-02-13 contents bbs 수정

.classpath

@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="src" output="bin/main" path="src/main/java">
+	<classpathentry kind="src" output="bin/test" path="src/test/java">
 		<attributes>
-			<attribute name="gradle_scope" value="main"/>
+			<attribute name="gradle_scope" value="test"/>
-			<attribute name="gradle_used_by_scope" value="main,test"/>
+			<attribute name="gradle_used_by_scope" value="test"/>
+			<attribute name="test" value="true"/>
 		</attributes>
 	</classpathentry>
 	<classpathentry kind="src" output="bin/main" path="src/main/resources">
@@ -12,11 +13,10 @@
 			<attribute name="gradle_used_by_scope" value="main,test"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="src" output="bin/test" path="src/test/java">
+	<classpathentry kind="src" output="bin/main" path="src/main/java">
 		<attributes>
-			<attribute name="gradle_scope" value="test"/>
+			<attribute name="gradle_scope" value="main"/>
-			<attribute name="gradle_used_by_scope" value="test"/>
+			<attribute name="gradle_used_by_scope" value="main,test"/>
-			<attribute name="test" value="true"/>
 		</attributes>
 	</classpathentry>
 	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-21/"/>

.gitignore

@@ -55,3 +55,9 @@ Thumbs.db
 # gradle-wrapper.jar를 제외 목록에서 제거하거나
 # 다음 라인을 추가하여 명시적으로 포함
 !gradle/wrapper/gradle-wrapper.jar
+.classpath
+.settings/org.eclipse.buildship.core.prefs
+.settings/org.eclipse.jdt.core.prefs
+.settings/org.eclipse.jdt.core.prefs
+.settings/org.eclipse.buildship.core.prefs
+.classpath

.settings/org.eclipse.buildship.core.prefs

@@ -1,13 +1,13 @@
-arguments=--init-script C\:\\Users\\bd091\\AppData\\Roaming\\Antigravity\\User\\globalStorage\\redhat.java\\1.50.0\\config_win\\org.eclipse.osgi\\58\\0\\.cp\\gradle\\init\\init.gradle --init-script C\:\\Users\\bd091\\AppData\\Roaming\\Antigravity\\User\\globalStorage\\redhat.java\\1.50.0\\config_win\\org.eclipse.osgi\\58\\0\\.cp\\gradle\\protobuf\\init.gradle
+arguments=
 auto.sync=false
 build.scans.enabled=false
 connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
 gradle.user.home=
-java.home=C\:/Program Files/Java/jdk-21
+java.home=
 jvm.arguments=
 offline.mode=false
-override.workspace.settings=true
+override.workspace.settings=false
-show.console.view=true
+show.console.view=false
-show.executions.view=true
+show.executions.view=false

.settings/org.eclipse.jdt.core.prefs

@@ -1,11 +1,15 @@
 eclipse.preferences.version=1
+org.eclipse.jdt.core.classpath.outputOverlappingAnotherSource=ignore
 org.eclipse.jdt.core.compiler.annotation.missingNonNullByDefaultAnnotation=ignore
 org.eclipse.jdt.core.compiler.annotation.nonnull=javax.annotation.Nonnull
 org.eclipse.jdt.core.compiler.annotation.nonnullbydefault=javax.annotation.ParametersAreNonnullByDefault
 org.eclipse.jdt.core.compiler.annotation.nullable=javax.annotation.Nullable
 org.eclipse.jdt.core.compiler.annotation.nullanalysis=enabled
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=21
+org.eclipse.jdt.core.compiler.compliance=21
 org.eclipse.jdt.core.compiler.problem.nullAnnotationInferenceConflict=warning
 org.eclipse.jdt.core.compiler.problem.nullReference=warning
 org.eclipse.jdt.core.compiler.problem.nullSpecViolation=warning
 org.eclipse.jdt.core.compiler.problem.potentialNullReference=warning
 org.eclipse.jdt.core.compiler.problem.syntacticNullAnalysisForFields=enabled
+org.eclipse.jdt.core.compiler.source=21

.vscode/launch.json

@@ -9,6 +9,16 @@
             "projectName": "madeu",
             "args": "",
             "envFile": "${workspaceFolder}/.env"
+        },
+        {
+            "type": "java",
+            "name": "Spring Boot-MadeuApplication<madeu_crm>",
+            "request": "launch",
+            "cwd": "${workspaceFolder}",
+            "mainClass": "com.madeu.MadeuApplication",
+            "projectName": "madeu_crm",
+            "args": "",
+            "envFile": "${workspaceFolder}/.env"
         }
     ]
 }

src/main/java/com/madeu/crm/contentsBbs/ctrl/ContentsBbsController.java

@@ -39,7 +39,8 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping("/contentsBbs/moveContentsBbsList.do")
-    public String  moveContentsBbsList(HttpSession session, HttpServletRequest request, HttpServletResponse response, Model model) {
+    public String moveContentsBbsList(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            Model model) {
         log.debug("WebTreatmentPetitController  selectListWebTreatmentPetitIntro START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -48,8 +49,7 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return "/web/login/logout";
-            }
+            } else {
-            else {
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.selectListWebTreatmentPetitIntro(paramMap);
 
@@ -59,14 +59,12 @@ public class ContentsBbsController extends ManagerDraftAction {
                 model.addAttribute("deleteUseYn", map.get("deleteUseYn"));
                 model.addAttribute("downloadUseYn", map.get("downloadUseYn"));
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             return "/web/login/logout";
         }
         log.debug("WebTreatmentPetitController  selectListWebTreatmentPetitIntro END");
 
-        
         model.addAttribute("categoryDivCd", getMenuToCdTitle(paramMap.get("menuClass")).get("cd"));
         model.addAttribute("title", getMenuToCdTitle(paramMap.get("menuClass")).get("title"));
 
@@ -81,7 +79,8 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping("/contentsBbs/getContentsBbsList.do")
-    public ModelAndView getContentsBbsList(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
+    public ModelAndView getContentsBbsList(HttpSession session, HttpServletRequest request,
+            HttpServletResponse response) {
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
         HashMap<String, Object> map = new HashMap<String, Object>();
@@ -89,21 +88,17 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return null;
-            }
+            } else {
-            else{
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.getContentsBbsList(paramMap);
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             return null;
-        }
+        } finally {
-        finally {
             if (Constants.OK == map.get("msgCode")) {
 
-            }
+            } else {
-            else{
                 map.put("msgCode", Constants.FAIL);
                 map.put("success", false);
                 if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
@@ -132,21 +127,17 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return null;
-            }
+            } else {
-            else{
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.getContentsBbs(paramMap);
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             return null;
-        }
+        } finally {
-        finally {
             if (Constants.OK == map.get("msgCode")) {
 
-            }
+            } else {
-            else{
                 map.put("msgCode", Constants.FAIL);
                 map.put("success", false);
                 if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
@@ -166,7 +157,8 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping("/contentsBbs/moveRegContentsBbs.do")
-    public String  moveRegContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response, Model model) {
+    public String moveRegContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            Model model) {
         log.debug("ContentsBbsController moveRegContentsBbs START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -175,8 +167,7 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return "/web/login/logout";
-            }
+            } else {
-            else {
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.insertWebTreatmentPetitIntro(paramMap);
 
@@ -187,8 +178,7 @@ public class ContentsBbsController extends ManagerDraftAction {
                 model.addAttribute("downloadUseYn", map.get("downloadUseYn"));
                 model.addAttribute("categorylist", map.get("categorylist"));
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             return "/web/login/logout";
         }
@@ -207,7 +197,9 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping(value = "/contentsBbs/putContentsBbs.do")
-    public ModelAndView putContentsBbs(HttpSession session,HttpServletRequest request, HttpServletResponse response,@RequestParam(value = "file", required = false) MultipartFile file,@RequestParam(value = "content_file", required = false) MultipartFile content_file) {
+    public ModelAndView putContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            @RequestParam(value = "file", required = false) MultipartFile file,
+            @RequestParam(value = "content_file", required = false) MultipartFile content_file) {
         log.debug("ContentsBbsController putContentsBbs START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -218,23 +210,19 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return null;
-            }
+            } else {
-            else{
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("regId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("modId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.putContentsBbs(paramMap, file, content_file);
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             errorMsg.append(e);
-        }
+        } finally {
-        finally {
             if (Constants.OK == map.get("msgCode")) {
 
-            }
+            } else {
-            else{
                 map.put("msgCode", Constants.FAIL);
                 map.put("success", false);
                 if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
@@ -254,18 +242,17 @@ public class ContentsBbsController extends ManagerDraftAction {
                 insertMap.put("requestValue", String.valueOf(paramMap));
                 insertMap.put("responseValue", String.valueOf(map));
                 insertMap.put("tId", map.get("tId"));
-                if((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null) || String.valueOf(errorMsg).length() == 0){
+                if ((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null)
+                        || String.valueOf(errorMsg).length() == 0) {
                     insertMap.put("resultCode", "SUCCESS");
-                }
+                } else {
-                else{
                     insertMap.put("resultCode", "ERROR");
                 }
                 insertMap.put("resultMsg", String.valueOf(errorMsg));
                 insertMap.put("muMemberId", paramMap.get("loginMemberId"));
 
                 webLogHistoryService.insertLogHistory(insertMap, visitLogParamMap);
-            }
+            } catch (Exception e) {
-            catch (Exception e) {
                 e.printStackTrace();
             }
         }
@@ -281,7 +268,8 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping(value = "/contentsBbs/moveContentsBbs.do")
-    public String  moveContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response, Model model) {
+    public String moveContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            Model model) {
         log.debug("ContentsBbsController  moveContentsBbs START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -290,8 +278,7 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return "/web/login/logout";
-            }
+            } else {
-            else {
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.moveContentsBbs(paramMap);
 
@@ -303,8 +290,7 @@ public class ContentsBbsController extends ManagerDraftAction {
                 model.addAttribute("categoryDivCd", paramMap.get("categoryDivCd"));
                 model.addAttribute("category", map.get("category"));
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             return "/web/login/logout";
         }
@@ -323,7 +309,9 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping(value = "/contentsBbs/modContentsBbs.do")
-    public ModelAndView modContentsBbs(HttpSession session,HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "file", required = false) MultipartFile file, @RequestParam(value = "content_file", required = false) MultipartFile content_file) {
+    public ModelAndView modContentsBbs(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            @RequestParam(value = "file", required = false) MultipartFile file,
+            @RequestParam(value = "content_file", required = false) MultipartFile content_file) {
         log.debug("WebTreatmentPetitController updateWebTreatmentPetit START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -334,23 +322,19 @@ public class ContentsBbsController extends ManagerDraftAction {
         try {
             if (!webCheckLogin(session)) {
                 return null;
-            }
+            } else {
-            else{
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("regId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("modId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.modContentsBbs(paramMap, file, content_file);
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             errorMsg.append(e);
-        }
+        } finally {
-        finally {
             if (Constants.OK == map.get("msgCode")) {
 
-            }
+            } else {
-            else{
                 map.put("msgCode", Constants.FAIL);
                 map.put("success", false);
                 if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
@@ -370,18 +354,17 @@ public class ContentsBbsController extends ManagerDraftAction {
                 insertMap.put("requestValue", String.valueOf(paramMap));
                 insertMap.put("responseValue", String.valueOf(map));
                 insertMap.put("tId", map.get("tId"));
-                if((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null) || String.valueOf(errorMsg).length() == 0){
+                if ((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null)
+                        || String.valueOf(errorMsg).length() == 0) {
                     insertMap.put("resultCode", "SUCCESS");
-                }
+                } else {
-                else{
                     insertMap.put("resultCode", "ERROR");
                 }
                 insertMap.put("resultMsg", String.valueOf(errorMsg));
                 insertMap.put("muMemberId", paramMap.get("loginMemberId"));
 
                 webLogHistoryService.insertLogHistory(insertMap, visitLogParamMap);
-            }
+            } catch (Exception e) {
-            catch (Exception e) {
                 e.printStackTrace();
             }
         }
@@ -389,7 +372,6 @@ public class ContentsBbsController extends ManagerDraftAction {
         return HttpUtil.makeHashToJsonModelAndView(map);
     }
 
-
     /**
      * 홈페이지 시술예약(쁘띠) 정보 삭제
      *
@@ -398,7 +380,8 @@ public class ContentsBbsController extends ManagerDraftAction {
      * @return
      */
     @PostMapping(value = "/contentsBbs/delContentsBbs.do")
-    public ModelAndView delContentsBbs(@RequestBody HashMap<String, Object> paramMap, HttpSession session, HttpServletRequest request, HttpServletResponse response) {
+    public ModelAndView delContentsBbs(@RequestBody HashMap<String, Object> paramMap, HttpSession session,
+            HttpServletRequest request, HttpServletResponse response) {
         log.debug("WebTreatmentPetitController deleteWebTreatmentPetit START");
 
         // HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -406,28 +389,22 @@ public class ContentsBbsController extends ManagerDraftAction {
 
         StringBuffer errorMsg = new StringBuffer();
 
-        
-        
         try {
             if (!webCheckLogin(session)) {
                 return null;
-            }
+            } else {
-            else{
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("regId", String.valueOf(session.getAttribute("loginMemberId")));
                 paramMap.put("modId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.delContentsBbs(paramMap);
             }
-        }
+        } catch (Exception e) {
-        catch (Exception e) {
             e.printStackTrace();
             errorMsg.append(e);
-        }
+        } finally {
-        finally {
             if (Constants.OK == map.get("msgCode")) {
 
-            }
+            } else {
-            else{
                 map.put("msgCode", Constants.FAIL);
                 map.put("success", false);
                 if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
@@ -447,18 +424,17 @@ public class ContentsBbsController extends ManagerDraftAction {
                 insertMap.put("requestValue", String.valueOf(paramMap));
                 insertMap.put("responseValue", String.valueOf(map));
                 insertMap.put("tId", map.get("tId"));
-                if((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null) || String.valueOf(errorMsg).length() == 0){
+                if ((String.valueOf(errorMsg)).equals("") || (String.valueOf(errorMsg) == null)
+                        || String.valueOf(errorMsg).length() == 0) {
                     insertMap.put("resultCode", "SUCCESS");
-                }
+                } else {
-                else{
                     insertMap.put("resultCode", "ERROR");
                 }
                 insertMap.put("resultMsg", String.valueOf(errorMsg));
                 insertMap.put("muMemberId", paramMap.get("loginMemberId"));
 
                 webLogHistoryService.insertLogHistory(insertMap, visitLogParamMap);
-            }
+            } catch (Exception e) {
-            catch (Exception e) {
                 e.printStackTrace();
             }
         }
@@ -469,12 +445,14 @@ public class ContentsBbsController extends ManagerDraftAction {
     /**
      * 시술 정보 리스트 조회 (option)
      * 시술등록 팝업
+     * 
      * @param request
      * @param response
      * @return
      */
     // @RequestMapping(value = "/webtreatmentpetit/selectListTreatmentOption.do")
-    public ModelAndView selectListTreatmentOption(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
+    public ModelAndView selectListTreatmentOption(HttpSession session, HttpServletRequest request,
+            HttpServletResponse response) {
         log.debug("WebTreatmentPetitController selectListTreatmentOption START");
 
         HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
@@ -487,8 +465,7 @@ public class ContentsBbsController extends ManagerDraftAction {
                 paramMap.put("loginMemberId", String.valueOf(session.getAttribute("loginMemberId")));
                 map = contentsBbsService.selectListTreatmentOption(paramMap);
             }
-        }
+        } catch (Exception e) {
-			catch (Exception e) {
             e.printStackTrace();
             return null;
         } finally {
@@ -533,7 +510,16 @@ public class ContentsBbsController extends ManagerDraftAction {
 
     }
 
-    
+    /**
+     * 미리보기 화면으로 이동
+     * 
+     * @param request
+     * @param response
+     * @return
+     */
+    @RequestMapping(value = "/contentsBbs/contentsBbsPreview.do")
+    public String contentsBbsPreview(HttpSession session, HttpServletRequest request, HttpServletResponse response,
+            Model model) {
+        return "/web/contentsBbs/ContentsBbsPreview";
+    }
 }
-
-

src/main/resources/mappers/WebTreatmentDietSqlMap.xml

@@ -332,7 +332,7 @@
               ,MTP.MU_TREATMENT_PROCEDURE_ID							AS "treatmentProcedureId"
               ,MTP.MU_TREATMENT_ID										AS "treatmentId"
               ,MTP.TREATMENT_PROCEDURE_NAME								AS "treatmentNm"
-              ,MTPP.PRICE												AS "price"
+              ,(MTPP.PRICE + MTPP.VAT)									AS "price"
               ,IFNULL(MTPP.DISCOUNT_PRICE, 0)							AS "discountPrice"
         FROM MU_TREATMENT_PROCEDURE AS MTP
         LEFT OUTER JOIN MU_TREATMENT_PROCEDURE_PRICE MTPP ON MTP.MU_TREATMENT_PROCEDURE_ID = MTPP.MU_TREATMENT_PROCEDURE_ID

src/main/resources/mappers/crm/contentsBbs/ContentsBbsSql.xml

@@ -103,7 +103,7 @@
              ,HCBP.MU_TREATMENT_ID
              ,HCBP.MU_TREATMENT_PROCEDURE_ID
              ,MTP.TREATMENT_PROCEDURE_NAME   
-             ,MTPP.PRICE
+             ,MTPP.PRICE + MTPP.VAT as PRICE
              ,IFNULL(MTPP.DISCOUNT_PRICE, 0) as DISCOUNT_PRICE
           FROM HP_CONTENTS_BBS_PROCEDURE AS HCBP
           LEFT OUTER JOIN MU_TREATMENT_PROCEDURE MTP ON HCBP.MU_TREATMENT_ID = MTP.MU_TREATMENT_ID AND HCBP.MU_TREATMENT_PROCEDURE_ID = MTP.MU_TREATMENT_PROCEDURE_ID

src/main/resources/static/css/web/ContentsBbsReg.css

@@ -1,35 +1,168 @@
-.project_wrap {width:100%; min-width:1080px; margin:0 auto;}
+.project_wrap {
+    width: 100%;
+    min-width: 1080px;
+    margin: 0 auto;
+}
 
 /*오른쪽영역*/
-.project_wrap .content_section {margin-top:50px; width:100%; min-width:1080px; display:table;}
+.project_wrap .content_section {
-.project_wrap .content_section .hospital_wrap {width: calc(100% - 72px); min-width:calc(1080px - 72px); height:calc(100vh - 50px); float:left; position:relative;}
+    margin-top: 50px;
+    width: 100%;
+    min-width: 1080px;
+    display: table;
+}
+
+.project_wrap .content_section .hospital_wrap {
+    width: calc(100% - 72px);
+    min-width: calc(1080px - 72px);
+    height: calc(100vh - 50px);
+    float: left;
+    position: relative;
+}
 
 
 /* 왼쪽_메뉴 영역 */
-.project_wrap .content_section .hospital_wrap .left_box {position:absolute; width:240px; height:calc(100vh - 50px); overflow:auto; padding:10px 20px;}
+.project_wrap .content_section .hospital_wrap .left_box {
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list {width:100%;}
+    position: absolute;
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu {width:100%; height:auto; margin:20px 0 10px 0; padding:0; font-size:14px; font-weight:700;}
+    width: 240px;
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu.first {margin-top:0;}
+    height: calc(100vh - 50px);
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a {width:100%; height:100%; display:block; margin-bottom:8px; padding:8px; font-size:14px; text-align:left; border-radius:5px;}
+    overflow: auto;
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a.on {background:#3985EA; border:none;}
+    padding: 10px 20px;
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li {width:100%; height:36px; margin-bottom:8px;}
+}
-.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a.on {color:#fff;}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list {
+    width: 100%;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu {
+    width: 100%;
+    height: auto;
+    margin: 20px 0 10px 0;
+    padding: 0;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu.first {
+    margin-top: 0;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a {
+    width: 100%;
+    height: 100%;
+    display: block;
+    margin-bottom: 8px;
+    padding: 8px;
+    font-size: 14px;
+    text-align: left;
+    border-radius: 5px;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a.on {
+    background: #3985EA;
+    border: none;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 8px;
+}
+
+.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a.on {
+    color: #fff;
+}
 
 /* 센터쪽 */
-.project_wrap .content_section .hospital_wrap .center_box {width:calc(100% - 240px); height:calc(100vh - 50px); position:absolute; left:240px; padding:10px 10px 10px 0;}
+.project_wrap .content_section .hospital_wrap .center_box {
-.project_wrap .content_section .hospital_wrap .center_box .page_title {min-width:90px; padding-left:10px; font-size:18px; font-weight:700; line-height:50px; float:left;}
+    width: calc(100% - 240px);
-.consultation-info input { width:80%; height:36px; padding:0 10px; border:1px solid #E9ECF0; border-radius:5px;}
+    height: calc(100vh - 50px);
-.consultation-info input input::placeholder {color:#B5BDC4;}
+    position: absolute;
-.consultation-info label {padding-left: 10px;}
+    left: 240px;
-.consultation-info input[type="checkbox"] {width: 15px; height:15px; padding:0 10px; border:1px solid #E9ECF0; border-radius:5px;}
+    padding: 10px 10px 10px 0;
-.consultation-info input[type="checkbox"] input::placeholder {color:#B5BDC4;}
+}
-.consultation-info select {width:80%; height:36px; padding:0 10px; border:1px solid #E9ECF0; border-radius:5px;}
+
-.consultation-info textarea { width:80%; padding:10px; border:1px solid #E9ECF0; border-radius:5px; resize:none; }
+.project_wrap .content_section .hospital_wrap .center_box .page_title {
-.consultation-info textarea::placeholder {color:#B5BDC4;}
+    min-width: 90px;
-.wp60 input { width:80%; height:36px; padding:0 10px; border:1px solid #E9ECF0; border-radius:5px;}
+    padding-left: 10px;
-.wp60 input input::placeholder {color:#B5BDC4;}
+    font-size: 18px;
-.wp60 textarea { width:80%; padding:10px; border:1px solid #E9ECF0; border-radius:5px; resize:none; }
+    font-weight: 700;
-.wp60 textarea::placeholder {color:#B5BDC4;}
+    line-height: 50px;
+    float: left;
+}
+
+.consultation-info input {
+    width: 80%;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+}
+
+.consultation-info input input::placeholder {
+    color: #B5BDC4;
+}
+
+.consultation-info label {
+    padding-left: 10px;
+}
+
+.consultation-info input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    padding: 0 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+}
+
+.consultation-info input[type="checkbox"] input::placeholder {
+    color: #B5BDC4;
+}
+
+.consultation-info select {
+    width: 80%;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+}
+
+.consultation-info textarea {
+    width: 80%;
+    padding: 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+    resize: none;
+}
+
+.consultation-info textarea::placeholder {
+    color: #B5BDC4;
+}
+
+.wp60 input {
+    width: 80%;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+}
+
+.wp60 input input::placeholder {
+    color: #B5BDC4;
+}
+
+.wp60 textarea {
+    width: 80%;
+    padding: 10px;
+    border: 1px solid #E9ECF0;
+    border-radius: 5px;
+    resize: none;
+}
+
+.wp60 textarea::placeholder {
+    color: #B5BDC4;
+}
+
 .content {
     width: 100%;
     height: 100%;
@@ -40,8 +173,15 @@
     background: #fff;
     float: left;
 }
+
 /* content_box */
-.project_wrap .content_section .hospital_wrap .center_box .content_box { width:100%; height:calc(100% - 50px); padding-top:20px; display:table; }
+.project_wrap .content_section .hospital_wrap .center_box .content_box {
+    width: 100%;
+    height: calc(100% - 50px);
+    padding-top: 20px;
+    display: table;
+}
+
 .add_btn {
     width: 24px;
     height: 24px;
@@ -51,21 +191,34 @@
     margin-top: 0px;
     line-height: 0px !important;
 }
+
 .ml50 {
     margin-left: 50%;
 }
-.button_box button { width:70px; font-size:12px; height:32px; border-radius: 16px;}
+
-.button_box button.cancel_btn {background: #F8FBFF;}
+.button_box button {
+    width: 70px;
+    font-size: 12px;
+    height: 32px;
+    border-radius: 16px;
+}
+
+.button_box button.cancel_btn {
+    background: #F8FBFF;
+}
+
 .button_box button.registration_btn {
     margin-left: 10px;
     color: #fff;
     background: #3985EA;
 }
+
 .button_box {
     width: 100%;
     margin-top: 30px;
     margin-left: 56%;
 }
+
 .fix_area {
     min-width: 1200px;
     width: 1200px;
@@ -108,6 +261,7 @@
     border-radius: 0.25rem;
     text-align: center;
 }
+
 .img_center img {
     position: absolute;
     top: 50%;
@@ -131,6 +285,7 @@
 .content>.wp60 {
     width: 60%;
 }
+
 .content>.wp40 {
     width: 40%;
 }
@@ -138,6 +293,7 @@
 .wp10 {
     width: 10%;
 }
+
 .wp90 {
     width: 90%;
 }
@@ -150,6 +306,7 @@
 .consultation-info h2 {
     font-size: 4rem;
 }
+
 .consultation-info p {
     margin-top: 2rem;
     font-size: 2rem;
@@ -162,6 +319,7 @@
     margin-top: 3rem;
     margin-bottom: 1rem;
 }
+
 .price-area .border-line {
     height: 1px;
     background-color: #ddd;
@@ -266,6 +424,7 @@
 .cs-checkbox>label.d-block {
     display: block;
 }
+
 .cs-checkbox>label {
     position: relative;
     display: inline-block;
@@ -297,7 +456,8 @@
 /* } */
 
 input[type="checkbox"] {
-  transform: scale(1.5); /* 크기를 1.5배로 확대 */
+    transform: scale(1.5);
+    /* 크기를 1.5배로 확대 */
 }
 
 .idxChk {
@@ -380,6 +540,7 @@ input[type="checkbox"] {
     padding-top: 0.2em;
     text-align: right;
 }
+
 .selt_info_wrap .info button {
     border: none;
     background-color: #fff;
@@ -428,6 +589,7 @@ input[type="checkbox"] {
     font-size: 2rem;
     opacity: 1;
 }
+
 .total-price-area .total .right strong {
     font-size: 22px;
     font-weight: 600;
@@ -483,72 +645,309 @@ input[type="checkbox"] {
 }
 
 /* 페이지게이션 */
-.project_wrap .content_section .hospital_wrap .center_box .page_box {position:absolute; bottom:20px; width:100%; height:24px;}
+.project_wrap .content_section .hospital_wrap .center_box .page_box {
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation {height:24px;}
+    position: absolute;
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination {margin:0 auto; display:table;}
+    bottom: 20px;
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li {display:inline-block; padding:0}
+    width: 100%;
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a, .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a {position:relative; width:24px; height:24px; background:none;}
+    height: 24px;
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a:hover, .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a:hover {background:none;}
+}
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a img {position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0); width:10px;}
+
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img {position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0) rotate(180deg); width:10px;}
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation {
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a {width:24px; height:24px; padding:0; border:none; text-align:center; line-height:22px; font-size:14px; font-weight:500; background:#FFF; font-size:14px;}
+    height: 24px;
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a:hover, .project_wrap .content_section .hospital_wrap .center_box .right_note .page_box .navigation .pagination li a:focus {background:#3985EA; color:#fff; font-weight:700;}
+}
-.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li.active a {background:#3985EA; color:#fff;}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination {
+    margin: 0 auto;
+    display: table;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li {
+    display: inline-block;
+    padding: 0
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a,
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    background: none;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a:hover,
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a:hover {
+    background: none;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 10px;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(180deg);
+    width: 10px;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    text-align: center;
+    line-height: 22px;
+    font-size: 14px;
+    font-weight: 500;
+    background: #FFF;
+    font-size: 14px;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a:hover,
+.project_wrap .content_section .hospital_wrap .center_box .right_note .page_box .navigation .pagination li a:focus {
+    background: #3985EA;
+    color: #fff;
+    font-weight: 700;
+}
+
+.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li.active a {
+    background: #3985EA;
+    color: #fff;
+}
 
 /*반응형 View*/
 @media only screen and (max-width:1500px) {
-    .project_wrap .content_section .hospital_wrap .left_box { width:160px; padding:10px 15px; }
+    .project_wrap .content_section .hospital_wrap .left_box {
-    .project_wrap .content_section .hospital_wrap .center_box { width:calc(100% - 160px); left:160px; }
+        width: 160px;
+        padding: 10px 15px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box {
+        width: calc(100% - 160px);
+        left: 160px;
+    }
 }
 
 @media only screen and (max-width:1280px) {
-    .project_wrap .content_section .hospital_wrap { width:calc(100% - 60px); }
+    .project_wrap .content_section .hospital_wrap {
-    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu { font-size:12px; }
+        width: calc(100% - 60px);
-    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li { height:32px; margin-bottom:5px; }
+    }
-    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a { font-size:12px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .page_title { min-width:80px; height:40px; font-size:16px; line-height:40px; }
+    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu {
-    .project_wrap .content_section .hospital_wrap .center_box .total { font-size:12px; line-height:40px; }
+        font-size: 12px;
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box { padding:15px 0; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box { width:120px; height:32px; background-size:18px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .label { padding:0 10px; font-size:12px; }
+    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li {
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item { font-size:12px; }
+        height: 32px;
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box { width:120px; height:32px; }
+        margin-bottom: 5px;
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box img { width:22px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box input { height:32px; font-size:12px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box { width:110px; height:32px; }
+    .project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a {
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box img { width:20px; }
+        font-size: 12px;
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box .date_picker { height:32px; padding-left:35px; font-size:10px; line-height:32px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .slash { line-height:32px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn { margin-left:5px; padding-left:10px; }
+    .project_wrap .content_section .hospital_wrap .center_box .page_title {
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn p { display:none; }
+        min-width: 80px;
-    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn img { width:12px; margin-top:-3px; position:static; transform:none; }
+        height: 40px;
-    .project_wrap .content_section .hospital_wrap .center_box .page_box { height:23px; }
+        font-size: 16px;
-    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation { height:23px; }
+        line-height: 40px;
-    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a { width:23px; height:23px; font-size:12px; }
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .total {
+        font-size: 12px;
+        line-height: 40px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box {
+        padding: 15px 0;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box {
+        width: 120px;
+        height: 32px;
+        background-size: 18px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .label {
+        padding: 0 10px;
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item {
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box {
+        width: 120px;
+        height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box img {
+        width: 22px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list_box .search_box input {
+        height: 32px;
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box {
+        width: 110px;
+        height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box img {
+        width: 20px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .date_box .date_picker {
+        height: 32px;
+        padding-left: 35px;
+        font-size: 10px;
+        line-height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .calendar_box .slash {
+        line-height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn {
+        margin-left: 5px;
+        padding-left: 10px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn p {
+        display: none;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn img {
+        width: 12px;
+        margin-top: -3px;
+        position: static;
+        transform: none;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .page_box {
+        height: 23px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation {
+        height: 23px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a {
+        width: 23px;
+        height: 23px;
+        font-size: 12px;
+    }
+
     .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a,
-    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a { width:23px; height:23px; }
+    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a {
+        width: 23px;
+        height: 23px;
+    }
+
     .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a img,
-    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img { width:9px; }
+    .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img {
-    .project_wrap .content_section .hospital_wrap .center_box .table_box { height:calc(100% - 155px); }
+        width: 9px;
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left { width:350px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left .title { font-size:14px; line-height:32px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label { text-indent:20px; }
+    .project_wrap .content_section .hospital_wrap .center_box .table_box {
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label { font-size:12px; }
+        height: calc(100% - 155px);
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label::after { width:15px; height:15px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li input[type='checkbox']:checked + label::before { width:5px; height:8px; left:5px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right p { font-size:14px; line-height:32px; }
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left {
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li label { font-size:12px; line-height:32px; }
+        width: 350px;
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box { width:120px; height:32px; background-size:18px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box .label { padding:0 10px; font-size:12px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box .select_option_list .option_list_item { font-size:12px; }
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left .title {
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li input { font-size:12px; height:32px; width:250px; }
+        font-size: 14px;
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li textarea { font-size:12px; }
+        line-height: 32px;
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.banner_li label { font-size:12px; height:32px; line-height:32px; }
+    }
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.banner_li label.file_btn img { width:22px; height:22px; }
+
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right { width:calc(100% - 350px); }
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label {
-    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right .button_box button { width:70px; font-size:12px; height:32px; }
+        text-indent: 20px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label {
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.checkbox_li label::after {
+        width: 15px;
+        height: 15px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li input[type='checkbox']:checked+label::before {
+        width: 5px;
+        height: 8px;
+        left: 5px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right p {
+        font-size: 14px;
+        line-height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li label {
+        font-size: 12px;
+        line-height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box {
+        width: 120px;
+        height: 32px;
+        background-size: 18px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box .label {
+        padding: 0 10px;
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li .select_box .select_option_list .option_list_item {
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li input {
+        font-size: 12px;
+        height: 32px;
+        width: 250px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.first li textarea {
+        font-size: 12px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.banner_li label {
+        font-size: 12px;
+        height: 32px;
+        line-height: 32px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_left ul.last li.banner_li label.file_btn img {
+        width: 22px;
+        height: 22px;
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right {
+        width: calc(100% - 350px);
+    }
+
+    .project_wrap .content_section .hospital_wrap .center_box .content_box .content_right .button_box button {
+        width: 70px;
+        font-size: 12px;
+        height: 32px;
+    }
 }
 
 @media only screen and (max-width:1080px) {
-    .project_wrap .content_section .hospital_wrap { width:calc(100% - 50px); }
+    .project_wrap .content_section .hospital_wrap {
+        width: calc(100% - 50px);
+    }
 }

src/main/resources/static/js/web/contentsBbs/ContentsBbsPop.js

@@ -20,18 +20,28 @@ let treatmentSelectModal = {
     },
     /* 그리드 이벤트 설정 */
     setEvent: function () {
-        $('#treatmentSelectModal .btnCancle').on("click", function () {
+        $('#treatmentSelectModal .btnCancle').off('click').on("click", function () {
             treatmentSelectModal.close();
         });
-        $('#treatmentSelectModal .btnSave').on("click", function () {
+
-            treatmentSelectModal.save();
+        // Remove existing listener to prevent duplicates if any
-        });
+        let searchBtn = document.getElementById("searchIntroUserBtn");
-        document.getElementById("searchIntroUserBtn").addEventListener('click',()=>{
+        if (searchBtn) {
+            let newSearchBtn = searchBtn.cloneNode(true);
+            searchBtn.parentNode.replaceChild(newSearchBtn, searchBtn);
+            newSearchBtn.addEventListener('click', () => {
                 treatmentSelectModal.searchIntroUserList('N');
             });
-        document.getElementById("introUserSearchKeyword").addEventListener('keypress',(e)=>{
+        }
+
+        let searchInput = document.getElementById("introUserSearchKeyword");
+        if (searchInput) {
+            let newSearchInput = searchInput.cloneNode(true);
+            searchInput.parentNode.replaceChild(newSearchInput, searchInput);
+            newSearchInput.addEventListener('keypress', (e) => {
                 fn_IntroUserEnter(e)
             });
+        }
     },
 
     /* 데이터 선택 */
@@ -80,6 +90,8 @@ let treatmentSelectModal = {
                     dataList = data.rows;
                     data.rows.forEach(function (treatment, index) {
                         let tr = document.createElement('tr');
+                        // Use style pointer to indicate clickable
+                        tr.style.cursor = 'pointer';
                         tr.innerHTML = '<td id="' + treatment.treatmentId + '">' + treatment.treatmentNm + '</td>';
                         tr.innerHTML += '<td id="' + treatment.price + '">' + treatment.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '</td>';
                         tr.innerHTML += '<td id="' + treatment.discountPrice + '">' + treatment.discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '</td>';
@@ -128,7 +140,11 @@ let treatmentSelectModal = {
         $('#treatmentSelectModal').modal('hide');
 
         setTimeout(function () {
+            // Properly dispose of modal if using bootstrap 5 or just remove for simple usage
             $('#treatmentSelectModal').remove();
+            $('.modal-backdrop').remove(); // Ensure backdrop is removed
+            $('body').removeClass('modal-open');
+            $('body').css('padding-right', '');
         }, 500);
     },
     HtmlTemplate: `

src/main/resources/static/js/web/contentsBbs/ContentsBbsReg.js

@@ -1,3 +1,39 @@
+// Custom Table Logic
+let treatmentList = [];
+
+function renderTreatmentTable() {
+    let tbody = document.getElementById("treatmentListBody");
+    if (!tbody) {
+        // If the tbody doesn't exist (e.g., on a page without the table), do nothing.
+        // This can happen if this JS is included on multiple pages.
+        return;
+    }
+    tbody.innerHTML = "";
+
+    treatmentList.forEach((item, index) => {
+        let row = document.createElement("tr");
+        row.innerHTML = `
+            <td><input type="checkbox" name="treatmentCheck" value="${index}"></td>
+            <td style="text-align:left; padding-left:10px;">${item.treatmentProcedureName}</td>
+            <td style="text-align:right;">${num2won(item.price)}</td>
+            <td style="text-align:right;">${num2won(item.discountPrice)}</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+function fn_checkAll(source) {
+    let checkboxes = document.getElementsByName('treatmentCheck');
+    for (var i = 0, n = checkboxes.length; i < n; i++) {
+        checkboxes[i].checked = source.checked;
+    }
+}
+
+function num2won(x) {
+    if (typeof x === 'undefined' || x === null) return '';
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
 /****************************************************************************
  * 이벤트 등록
  ****************************************************************************/
@@ -10,20 +46,16 @@ function fn_insertWebEvent(){
     let title = $("#title").val();
     let content = $("#content").val();
     let hashtag = $("#hashtag").val();
-	let thumbnail_bottom_txt = $("#thumbnail-bottom-txt").val();
+    let thumbnail_bottom_txt = $("#thumbnailBottomTxt").val();
-	let categoryNo = $("select[name=categorylist]").val();
+    let categoryNo = $("select[name=category]").val();
 
-	var treatmentlen = $("input[name=treatmentlist]").length;
+    var treatmentIdList = []; // muTreatmentId
-	var treatmentlist = new Array(treatmentlen);
+    var treatmentProcedureIdList = []; // muTreatmentProcedureId
-	for(var i=0; i<treatmentlen; i++){                          
-		treatmentlist[i] = $("input[name=treatmentlist]").eq(i).val();        
-	}
 
-	var treatmentprocedurelen = $("input[name=treatmentprocedurelist]").length;
+    treatmentList.forEach(item => {
-	var treatmentprocedurelist = new Array(treatmentprocedurelen);
+        treatmentIdList.push(item.muTreatmentId);
-	for(var i=0; i<treatmentprocedurelen; i++){                          
+        treatmentProcedureIdList.push(item.muTreatmentProcedureId);
-		treatmentprocedurelist[i] = $("input[name=treatmentprocedurelist]").eq(i).val();        
+    });
-	}
 
     //let eventStartDate  = $("#eventStartDate").val();
     //let eventEndDate       = $("#eventEndDate").val();
@@ -90,8 +122,8 @@ function fn_insertWebEvent(){
         formData.append("thumbnail_bottom_txt", thumbnail_bottom_txt);
         formData.append("file", file);
         formData.append("content_file", content_file);
-		formData.append("treatmentlist", treatmentlist);
+        formData.append("treatmentlist", treatmentIdList);
-		formData.append("treatmentprocedurelist", treatmentprocedurelist);
+        formData.append("treatmentprocedurelist", treatmentProcedureIdList);
         formData.append("oldCrmItemId", $("#oldCrmItemId").val());
         formData.append("ordNo", $("#ordNo").val());
 
@@ -126,42 +158,7 @@ function fn_insertWebEvent(){
     });
 }
 
-/****************************************************************************
+
- * html 에디터 이미지 업로드시
- ****************************************************************************/
-function uploadSummernoteImageFileNoticeInsert(files, editor){
-    Object.values(files).forEach(file => {
-        let formData = new FormData();
-        formData.append('menuClass', menuClass);
-        formData.append('file', file);
-        $.ajax({
-            url: encodeURI('/webtreatmentpetit/uploadFile.do'),
-            data: formData,
-            dataType: "json",
-            processData: false,
-            contentType: false,
-            type: 'POST',
-            async: true,
-            success: function (data) {
-                if ('0' == data.msgCode) {
-                    $(editor).summernote('insertImage', data.rows.filePath, function ($image) {
-                    });
-                }
-            },
-            error: function (xhr, status, error) {
-                modalEvent.danger('오류', '이미지 업로드 중 오류가 발생했습니다.');
-            },
-            beforeSend: function () {
-                // 로딩열기
-                $(".loading-image-layer").show();
-            },
-            complete: function () {
-                // 로딩닫기
-                $(".loading-image-layer").hide();
-            }
-        });
-    })
-}
 
 /****************************************************************************
  * 배너 이미지 미리보기
@@ -175,19 +172,16 @@ function fn_filePreview(width, height, obj){
     }
 
     if (file) {
-       $(obj).html('');
+        // 기존 이미지 제거 대신 src 교체를 위해 구조 변경됨
+        // 하지만 ContentsBbsUpd와 구조를 맞췄으므로 img 태그 id를 이용하는 것이 좋음
         const reader = new FileReader();
-
         reader.onload = function (e) {
-           // 이미지 요소를 생성하고 미리보기 추가
+            if (obj == '.img_box') {
-           const img = document.createElement('img');
+                $("#thumbnailImg").attr("src", e.target.result).show();
-           img.src = e.target.result;
+            } else {
-           img.style.width = width; // 원하는 크기로 조정
+                $("#contentsImg").attr("src", e.target.result).show();
-           img.style.height = height;
+            }
-           $(obj).append(img);
         };
-
-       // 파일을 읽기 시작
         reader.readAsDataURL(file);
     }
 }
@@ -196,25 +190,21 @@ function fn_filePreview(width, height, obj){
  ****************************************************************************/
 function fn_removePreview() {
     $("#file").val('');
-    $('.img_box').html('');
+    $("#thumbnailImg").attr("src", "").hide();
 }
 
 
 /****************************************************************************
- * 배너 이미지 미리보기
+ * 배너 이미지 미리보기 (컨텐츠) - Unified in fn_filePreview logic mostly but kept callback
  ****************************************************************************/
-function fn_fileContentPreview(){
+// fn_filePreview handles logic based on obj param
-   const file =  $("#content_file")[0].files[0];
+
-   if(file){
-       $('.file_box').html(file.name);
-   }
-}
 /****************************************************************************
- * 배너 이미지 삭제
+ * 배너 이미지 삭제 (컨텐츠)
  ****************************************************************************/
 function fn_removeContentPreview() {
     $("#content_file").val('');
-    $('.file_box').html('');
+    $("#contentsImg").attr("src", "").hide();
 }
 
 /****************************************************************************
@@ -223,6 +213,7 @@ function fn_removeContentPreview(){
 function fn_selectListWebTreatmentPetitIntro() {
     if ("Y" == selectUseYn) {
         let pagingParam = "?menuClass=" + menuClass;
+        pagingParam += "&categoryDivCd=" + categoryDivCd;
         fn_leftFormAction("/contentsBbs/moveContentsBbsList.do" + pagingParam);
     } else {
         modalEvent.warning("", "조회 권한이 없습니다.");
@@ -237,14 +228,7 @@ function fn_pageInit(){
     // 날짜 datepicker
     fn_searchDatePicker("#eventStartDate", "#eventEndDate");
 
-    $('#summernote').summernote({
+
-        height: 540,
-        callbacks: {	//여기 부분이 이미지를 첨부하는 부분
-            onImageUpload : function(files) {
-                uploadSummernoteImageFileNoticeInsert(files, this);
-            }
-        },
-    });
 }
 
 /****************************************************************************
@@ -263,6 +247,7 @@ function fn_pageEvent(){
         fn_removePreview();
     });
     $('#file').on('change', function (e) {
+        // Updated selector logic for new structure
         fn_filePreview('800px', '450px', '.img_box');
     })
     $('#content_delete_btn').on("click", function () {
@@ -279,27 +264,60 @@ function fn_pageEvent(){
 function listOpen() {
     let reqParam = {};
     treatmentSelectModal.popup(function (obj, reqParam) {
-		const childDivCount = $("#treatmentlist > div").length;
+
-		if($("#" + obj.treatmentProcedureId).length > 0){
+        let isDuplicate = false;
+        treatmentList.forEach((item) => {
+            if (item.muTreatmentProcedureId == obj.treatmentProcedureId) {
+                isDuplicate = true;
+            }
+        });
+
+        if (isDuplicate) {
             modalEvent.warning("", "이미 시술정보가 있습니다.");
             return;
         }
-		var htmlstring = `<div id="treatment`+childDivCount+`">
+
-								<input type="checkbox" id="`+obj.treatmentProcedureId+`" name="treatment">
+        let newItem = {
-								<input type="hidden" name="treatmentprocedurelist" value="`+obj.treatmentProcedureId+`">
+            treatmentProcedureName: obj.treatmentNm,
-								<input type="hidden" name="treatmentlist" value="`+obj.treatmentId+`">
+            price: obj.price,
-								<label for="`+obj.treatmentProcedureId+`">`+obj.treatmentNm + `-` + obj.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + `-` + obj.discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +`</label>
+            discountPrice: obj.discountPrice,
-							</div>`;
+            muTreatmentId: obj.treatmentId,
-		$('#treatmentlist').append(htmlstring);
+            muTreatmentProcedureId: obj.treatmentProcedureId
+        };
+        treatmentList.push(newItem);
+        renderTreatmentTable();
+
     }, reqParam);
 }
+
 function fn_removeRow() {
-	 $('input:checkbox[name="treatment"]').each(function() {      		
+    let checkboxes = document.getElementsByName('treatmentCheck');
-		if(this.checked){//checked 처리된 항목의 값            
+    let indicesToRemove = [];
-			$(this).parent().remove();    
+
-		} 
+    // Collect indices checking from end to start to maintain index validity
+    for (let i = checkboxes.length - 1; i >= 0; i--) {
+        if (checkboxes[i].checked) {
+            indicesToRemove.push(parseInt(checkboxes[i].value));
+        }
+    }
+
+    if (indicesToRemove.length === 0) {
+        modalEvent.warning("", "삭제할 항목을 선택해주세요.");
+        return;
+    }
+
+    // Remove items
+    indicesToRemove.forEach(index => {
+        treatmentList.splice(index, 1);
     });
 
+    // Uncheck "all" checkbox if checked
+    let checkAllCheckbox = document.getElementById("checkAll");
+    if (checkAllCheckbox) {
+        checkAllCheckbox.checked = false;
+    }
+
+    renderTreatmentTable();
 }
 
 
@@ -309,4 +327,19 @@ $(function(){
 
     // 페이지 event
     fn_pageEvent();
+
+    // Initial render for empty table
+    renderTreatmentTable();
 });
+
+/* =========================================
+   PREVIEW LOGIC
+   ========================================= */
+function fn_openPreview() {
+    let url = "/contentsBbs/contentsBbsPreview.do";
+    window.open(url, "preview", "width=1280,height=900,scrollbars=yes");
+}
+
+function getTreatmentListForPreview() {
+    return treatmentList;
+}

src/main/resources/static/js/web/contentsBbs/ContentsBbsUpd.js

@@ -1,3 +1,29 @@
+// Custom Table Logic
+let treatmentList = [];
+
+function renderTreatmentTable() {
+    let tbody = document.getElementById("treatmentListBody");
+    tbody.innerHTML = "";
+
+    treatmentList.forEach((item, index) => {
+        let row = document.createElement("tr");
+        row.innerHTML = `
+            <td><input type="checkbox" name="treatmentCheck" value="${index}"></td>
+            <td style="text-align:left; padding-left:10px;">${item.treatmentProcedureName}</td>
+            <td style="text-align:right;">${num2won(item.price)}</td>
+            <td style="text-align:right;">${num2won(item.discountPrice)}</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+function fn_checkAll(source) {
+    let checkboxes = document.getElementsByName('treatmentCheck');
+    for (var i = 0, n = checkboxes.length; i < n; i++) {
+        checkboxes[i].checked = source.checked;
+    }
+}
+
 /****************************************************************************
  * 이벤트 조회
  ****************************************************************************/
@@ -34,17 +60,17 @@ function fn_selectWebTreatmentPetit(){
                 $("#oldCrmItemId").val(data.oldCrmItemId);
                 $("#ordNo").val(data.ordNo);
 
-				var htmlstring = '';
+                treatmentList = [];
                 rst.treatmentList.forEach((item, i) => {
-				  htmlstring += `<div id="treatment${i}">
+                    treatmentList.push({
-				    <input type="checkbox" id="${item.muTreatmentProcedureId}" name="treatment">
+                        treatmentProcedureName: item.treatmentProcedureName,
-				    <input type="hidden" name="treatmentprocedurelist" value="${item.muTreatmentProcedureId}">
+                        price: item.price,
-				    <input type="hidden" name="treatmentlist" value="${item.muTreatmentId}">
+                        discountPrice: item.discountPrice,
-				    <label for="${item.muTreatmentProcedureId}">${item.treatmentProcedureName} - ${num2won(item.price)} - ${num2won(item.discountPrice)}</label>
+                        muTreatmentId: item.muTreatmentId,
-				  </div>`;
+                        muTreatmentProcedureId: item.muTreatmentProcedureId
                     });
-				
+                });
-				$('#treatmentlist').append(htmlstring);
+                renderTreatmentTable();
             }
             else {
                 modalEvent.danger("수정 오류", eventData.msgDesc);
@@ -83,17 +109,13 @@ function fn_updateWebTreatmentPetit(){
     let thumbnailBottomTxt = $("#thumbnailBottomTxt").val();
     let categoryNo = $("#categoryNo").val();
 
-		var treatmentlen = $("input[name=treatmentlist]").length;
+    var treatmentIdList = []; // muTreatmentId
-		var treatmentlist = new Array(treatmentlen);
+    var treatmentProcedureIdList = []; // muTreatmentProcedureId
-		for(var i=0; i<treatmentlen; i++){                          
-			treatmentlist[i] = $("input[name=treatmentlist]").eq(i).val();        
-		}
 
-		var treatmentprocedurelen = $("input[name=treatmentprocedurelist]").length;
+    treatmentList.forEach(item => {
-		var treatmentprocedurelist = new Array(treatmentlen);
+        treatmentIdList.push(item.muTreatmentId);
-		for(var i=0; i<treatmentprocedurelen; i++){                          
+        treatmentProcedureIdList.push(item.muTreatmentProcedureId);
-			treatmentprocedurelist[i] = $("input[name=treatmentprocedurelist]").eq(i).val();        
+    });
-		}
 
     //let eventStartDate  = $("#eventStartDate").val();
     //let eventEndDate       = $("#eventEndDate").val();
@@ -108,57 +130,7 @@ function fn_updateWebTreatmentPetit(){
         modalEvent.warning("등록", "제목을 입력하세요.");
         return;
     }
-		/** 20251024 이상우팀장 요청으로 인해 필수입력 validation 삭제
-	    if(true != fn_emptyCheck(content)) {
-	        modalEvent.warning("등록", "내용을 입력하세요.");
-	        return;
-	    }
-		if(true != fn_emptyCheck(hashtag)) {
-	        modalEvent.warning("등록", "해시태그를 입력하세요.");
-	        return;
-	    }
-		if(true != fn_emptyCheck(thumbnailBottomTxt)) {
-	        modalEvent.warning("등록", "썸네일 하단 내용을 입력하세요.");
-	        return;
-	    }
 
-	    if(true != fn_emptyCheck(file)) {
-			if($(".img_box > img").length > 0){
-				
-			}else{
-				modalEvent.warning("등록", "썸네일 정보가 없습니다.");
-		        return;	
-			}
-	        
-	    }else{
-	        for(let i=0; i<file.length; i++){
-	            let fileSize = file[i].size;
-	            if(fileSize > fn_maxFileSize()){
-	                modalEvent.warning("", "파일정보 용량이 50MB를 넘습니다. 업로드가 불가능합니다.");
-
-	                return;
-	            }
-	        }
-	    }
-		if(true != fn_emptyCheck(content_file)) {
-				if($(".file_box").text() != ''){
-					
-				}else{
-					modalEvent.warning("등록", "컨텐츠 정보가 없습니다.");
-			        return;	
-				}
-		        
-	    }else{
-	        for(let i=0; i<content_file.length; i++){
-	            let fileSize = content_file[i].size;
-	            if(fileSize > fn_maxFileSize()){
-	                modalEvent.warning("", "파일정보 용량이 50MB를 넘습니다. 업로드가 불가능합니다.");
-
-	                return;
-	            }
-	        }
-	    }
-		*/
     modalEvent.info("수정", categorytitle + " 정보를 수정하시겠습니까?", function () {
         let formData = new FormData();
         formData.append("menuClass", menuClass);
@@ -169,8 +141,8 @@ function fn_updateWebTreatmentPetit(){
         formData.append("content", content);
         formData.append("hashtag", hashtag);
         formData.append("thumbnailBottomTxt", thumbnailBottomTxt);
-		formData.append("treatmentlist", treatmentlist);	
+        formData.append("treatmentlist", treatmentIdList);
-		formData.append("treatmentprocedurelist", treatmentprocedurelist);	
+        formData.append("treatmentprocedurelist", treatmentProcedureIdList);
         //formData.append("eventStartDate", eventStartDate);
         //formData.append("eventEndDate", eventEndDate);
         formData.append("file", file);
@@ -209,42 +181,7 @@ function fn_updateWebTreatmentPetit(){
     });
 }
 
-/****************************************************************************
+
- * html 에디터 이미지 업로드시
- ****************************************************************************/
-function uploadSummernoteImageFileNoticeInsert(files, editor){
-    Object.values(files).forEach(file => {
-        let formData = new FormData();
-        formData.append('menuClass', menuClass);
-        formData.append('file', file);
-        $.ajax({
-            url: encodeURI('/webtreatmentpetit/uploadFile.do'),
-            data: formData,
-            dataType: "json",
-            processData: false,
-            contentType: false,
-            type: 'POST',
-            async: true,
-            success: function (data) {
-                if ('0' == data.msgCode) {
-                    $(editor).summernote('insertImage', data.rows.filePath, function ($image) {
-                    });
-                }
-            },
-            error: function (xhr, status, error) {
-                modalEvent.danger('오류', '이미지 업로드 중 오류가 발생했습니다.');
-            },
-            beforeSend: function () {
-                // 로딩열기
-                $(".loading-image-layer").show();
-            },
-            complete: function () {
-                // 로딩닫기
-                $(".loading-image-layer").hide();
-            }
-        });
-    })
-}
 
 /****************************************************************************
  * 썸네일 이미지 미리보기
@@ -321,14 +258,7 @@ function fn_pageInit(){
     // 날짜 datepicker
     fn_searchDatePicker("#eventStartDate", "#eventEndDate");
 
-    $('#summernote').summernote({
+
-        height: 540,
-        callbacks: {	//여기 부분이 이미지를 첨부하는 부분
-            onImageUpload : function(files) {
-                uploadSummernoteImageFileNoticeInsert(files, this);
-            }
-        },
-    });
     fn_selectWebTreatmentPetit();
 }
 
@@ -366,27 +296,56 @@ function fn_pageEvent(){
 function listOpen() {
     let reqParam = {};
     treatmentSelectModal.popup(function (obj, reqParam) {
-		const childDivCount = $("#treatmentlist > div").length;
+
-		if($("#" + obj.treatmentProcedureId).length > 0){
+        let isDuplicate = false;
+        treatmentList.forEach((item) => {
+            if (item.muTreatmentProcedureId == obj.treatmentProcedureId) {
+                isDuplicate = true;
+            }
+        });
+
+        if (isDuplicate) {
             modalEvent.warning("", "이미 시술정보가 있습니다.");
             return;
         }
-		var htmlstring = `<div id="treatment`+childDivCount+`">
+
-										<input type="checkbox" id="`+obj.treatmentProcedureId+`" name="treatment">
+        let newItem = {
-										<input type="hidden" name="treatmentprocedurelist" value="`+obj.treatmentProcedureId+`">
+            treatmentProcedureName: obj.treatmentNm,
-										<input type="hidden" name="treatmentlist" value="`+obj.treatmentId+`">
+            price: obj.price,
-										<label for="`+obj.treatmentProcedureId+`">`+obj.treatmentNm + `-` + obj.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + `-` + obj.discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +`</label>
+            discountPrice: obj.discountPrice,
-							</div>`;
+            muTreatmentId: obj.treatmentId,
-		$('#treatmentlist').append(htmlstring);
+            muTreatmentProcedureId: obj.treatmentProcedureId
+        };
+        treatmentList.push(newItem);
+        renderTreatmentTable();
+
     }, reqParam);
 }
 function fn_removeRow() {
-	 $('input:checkbox[name="treatment"]').each(function() {      		
+    let checkboxes = document.getElementsByName('treatmentCheck');
-		if(this.checked){//checked 처리된 항목의 값            
+    let indicesToRemove = [];
-			$(this).parent().remove();    
+
-		} 
+    // Collect indices checking from end to start to maintain index validity
+    for (let i = checkboxes.length - 1; i >= 0; i--) {
+        if (checkboxes[i].checked) {
+            indicesToRemove.push(parseInt(checkboxes[i].value));
+        }
+    }
+
+    if (indicesToRemove.length === 0) {
+        modalEvent.warning("", "삭제할 항목을 선택해주세요.");
+        return;
+    }
+
+    // Remove items
+    indicesToRemove.forEach(index => {
+        treatmentList.splice(index, 1);
     });
 
+    // Uncheck "all" checkbox if checked
+    document.getElementById("checkAll").checked = false;
+
+    renderTreatmentTable();
 }
 
 
@@ -397,3 +356,15 @@ $(function(){
     // 페이지 event
     fn_pageEvent();
 });
+
+/* =========================================
+   PREVIEW LOGIC
+   ========================================= */
+function fn_openPreview() {
+    let url = "/contentsBbs/contentsBbsPreview.do";
+    window.open(url, "preview", "width=1280,height=900,scrollbars=yes");
+}
+
+function getTreatmentListForPreview() {
+    return treatmentList;
+}

src/main/resources/templates/web/contentsBbs/ContentsBbsPreview.html

@@ -0,0 +1,729 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
+    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/layout}">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<th:block layout:fragment="layout_css">
+    <!-- Choices.js CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.css" />
+
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Noto Sans KR', sans-serif;
+            margin: 0;
+            background: #f7f7f9;
+            color: #222;
+        }
+
+        #service-header {
+            background: #fff;
+            border-bottom: 1px solid #ececec;
+            padding: 14px 0 14px 24px;
+            font-size: 0.98em;
+            color: #888;
+        }
+
+        .main-wrap {
+            max-width: 1280px;
+            margin: 0 auto;
+            background: #fff;
+            border-radius: 18px;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
+            margin-top: 32px;
+            padding: 0 0 32px 0;
+        }
+
+        .top-section {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 32px;
+            padding: 32px 32px 0 32px;
+            align-items: flex-start;
+        }
+
+        .img-box {
+            border-radius: 18px;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .img-box img {
+            width: 100%;
+            object-fit: cover;
+            border-radius: 18px;
+        }
+
+        .info-box {
+            flex: 1 1 300px;
+            min-width: 240px;
+        }
+
+        .info-title {
+            font-size: 1.7em;
+            font-weight: 700;
+            margin-bottom: 6px;
+            color: #222;
+        }
+
+        .info-desc {
+            color: #444;
+            font-size: 1.1em;
+            margin-bottom: 18px;
+        }
+
+        .info-price {
+            font-size: 1.2em;
+            font-weight: 700;
+            color: #b23c3c;
+            margin-bottom: 18px;
+        }
+
+        .select-row {
+            margin-bottom: 18px;
+        }
+
+        .select-row label {
+            font-weight: 500;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        .total-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 1.1em;
+            margin-bottom: 18px;
+        }
+
+        .total-row .total-label {
+            color: #888;
+        }
+
+        .total-row .total-price {
+            font-weight: bold;
+            color: #b23c3c;
+        }
+
+        .reserve-btn {
+            width: 100%;
+            padding: 14px 0;
+            background: #b23c3c;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            font-size: 1.1em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+
+        .reserve-btn:disabled {
+            background: #ddd;
+            color: #888;
+            cursor: not-allowed;
+        }
+
+        .desc-section {
+            margin-top: 36px;
+            padding: 0 32px;
+        }
+
+        .desc-title {
+            font-size: 1.25em;
+            font-weight: 700;
+            margin-bottom: 12px;
+            color: #222;
+        }
+
+        .desc-content {
+            color: #444;
+            font-size: 1.05em;
+            line-height: 1.7;
+            margin-bottom: 20px;
+        }
+
+        .hashtag-section {
+            margin-top: 30px;
+            padding: 20px 0;
+            border-top: 1px solid #eee;
+        }
+
+        .hashtag-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .hashtag-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .hashtag {
+            display: inline-block;
+            background-color: #f8f9fa;
+            color: #495057;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 14px;
+            text-decoration: none;
+            border: 1px solid #dee2e6;
+            transition: all 0.3s ease;
+        }
+
+        .hashtag:hover {
+            background-color: #007bff;
+            color: white;
+            border-color: #007bff;
+            cursor: pointer;
+        }
+
+        #thumbnail-bottom-txt {
+            padding: 8px;
+            margin-top: 10px;
+            background-color: #fff;
+        }
+
+        /* Choices.js 커스터마이징 - 개선된 버전 */
+        .choices {
+            border: 1px solid #ddd !important;
+            border-radius: 6px !important;
+            font-size: 1em !important;
+            background: #fff !important;
+            min-width: 300px !important;
+        }
+
+        .choices__inner {
+            background: #fff !important;
+            padding: 8px 12px !important;
+            min-height: 40px !important;
+            color: #222 !important;
+            min-width: 280px !important;
+            width: 100% !important;
+        }
+
+        /* 플레이스홀더 텍스트 잘림 방지 - 핵심 수정 */
+        .choices__placeholder {
+            color: #888 !important;
+            opacity: 1 !important;
+            width: 100% !important;
+            min-width: 200px !important;
+            white-space: nowrap !important;
+            overflow: visible !important;
+            text-overflow: clip !important;
+            display: block !important;
+        }
+
+        .choices__input {
+            color: #222 !important;
+            background: transparent !important;
+            min-width: 200px !important;
+            width: 100% !important;
+        }
+
+        .choices__input::placeholder {
+            color: #888 !important;
+            opacity: 1 !important;
+            width: 100% !important;
+            min-width: 200px !important;
+            white-space: nowrap !important;
+            overflow: visible !important;
+        }
+
+        /* 다중 선택시 입력 필드 너비 확보 */
+        .choices[data-type*="select-multiple"] .choices__input {
+            min-width: 200px !important;
+            width: auto !important;
+            flex: 1 !important;
+        }
+
+        /* 선택된 항목들과 입력 필드 공간 분배 */
+        .choices__list--multiple {
+            /* display: flex !important; */
+            flex-wrap: wrap !important;
+            align-items: center !important;
+        }
+
+        .choices__list--multiple:empty+.choices__input {
+            min-width: 200px !important;
+            width: 100% !important;
+            flex: 1 !important;
+        }
+
+        /* 선택된 항목의 가격 표시 스타일 - 새로 추가 */
+        .selected-item-content {
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: flex-start !important;
+            flex: 1 !important;
+        }
+
+        .selected-item-name {
+            font-weight: 500 !important;
+            margin-bottom: 2px !important;
+        }
+
+        .selected-item-price {
+            font-size: 0.85em !important;
+        }
+
+        .selected-price {
+            color: #b23c3c !important;
+            font-weight: bold !important;
+        }
+
+        .selected-price-discount {
+            color: #b23c3c !important;
+            font-weight: bold !important;
+            font-size: 0.9em !important;
+        }
+
+        .selected-price-original {
+            color: #aaa !important;
+            font-size: 0.85em !important;
+            text-decoration: line-through !important;
+            margin-left: 4px !important;
+        }
+
+        /* 선택된 항목들 스타일 수정 */
+        .choices__list--multiple .choices__item {
+            background-color: #f8f9fa !important;
+            border: 1px solid #dee2e6 !important;
+            border-radius: 16px !important;
+            padding: 8px 12px !important;
+            margin: 2px !important;
+            font-size: 0.9em !important;
+            color: #495057 !important;
+            flex-shrink: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            /* max-width: 300px !important; */
+        }
+
+        /* 빨간색으로 변경 */
+        .choices__button {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjYjIzYzNjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==') !important;
+            background-size: 14px 14px !important;
+            background-position: center !important;
+            background-repeat: no-repeat !important;
+            border-left: 0 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            width: 14px !important;
+        }
+
+        /* 드롭다운 컨테이너 */
+        .choices__list--dropdown {
+            background: #fff !important;
+            border: 1px solid #ddd !important;
+            border-radius: 6px !important;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+        }
+
+        /* 드롭다운 옵션들 스타일 */
+        .choices__list--dropdown .choices__item {
+            padding: 8px 12px !important;
+            display: flex !important;
+            justify-content: space-between !important;
+            align-items: center !important;
+            color: #222 !important;
+        }
+
+        .choices__list--dropdown .choices__item--selectable:hover {
+            background-color: #f5f5f5 !important;
+            color: #222 !important;
+        }
+
+        .choices__list--dropdown .choices__item--highlighted {
+            background-color: #b23c3c !important;
+            color: #fff !important;
+        }
+
+        /* 포커스 상태 */
+        .choices.is-focused .choices__inner {
+            border-color: #b23c3c !important;
+        }
+
+        /* 가격 표시 스타일 */
+        .procedure-price {
+            color: #b23c3c !important;
+            font-weight: bold !important;
+            font-size: 0.9em !important;
+        }
+
+        .procedure-price-discount {
+            color: #b23c3c !important;
+            font-weight: bold !important;
+            font-size: 0.9em !important;
+        }
+
+        .procedure-price-original {
+            color: #aaa !important;
+            font-size: 0.85em !important;
+            text-decoration: line-through !important;
+            margin-left: 4px !important;
+        }
+
+        /* 드롭다운이 열렸을 때 하이라이트된 항목의 가격 색상 */
+        .choices__list--dropdown .choices__item--highlighted .procedure-price,
+        .choices__list--dropdown .choices__item--highlighted .procedure-price-discount {
+            color: #fff !important;
+        }
+
+        .choices__list--dropdown .choices__item--highlighted .procedure-price-original {
+            color: #ddd !important;
+        }
+
+        /* 검색 입력창 스타일 */
+        .choices[data-type*="select-multiple"] .choices__input {
+            background-color: transparent !important;
+            color: #222 !important;
+        }
+
+        /* 비활성화 상태 */
+        .choices.is-disabled .choices__inner {
+            background-color: #f8f9fa !important;
+            color: #6c757d !important;
+            cursor: not-allowed !important;
+        }
+
+        /* 반응형 대응 */
+        @media (max-width: 600px) {
+            .choices {
+                min-width: 250px !important;
+            }
+
+            .choices__inner {
+                min-width: 230px !important;
+            }
+
+            .choices__placeholder,
+            .choices__input,
+            .choices__input::placeholder {
+                min-width: 150px !important;
+            }
+
+            .choices__list--multiple .choices__item {
+                max-width: 250px !important;
+                padding: 6px 10px !important;
+            }
+
+            .selected-item-name {
+                font-size: 0.9em !important;
+            }
+
+            .selected-item-price {
+                font-size: 0.8em !important;
+            }
+
+            .choices__list--multiple .choices__item[data-deletable] .choices__button {
+                width: 20px !important;
+                height: 20px !important;
+                font-size: 16px !important;
+                text-indent: 0 !important;
+            }
+        }
+
+        @media (max-width: 900px) {
+            .main-wrap {
+                margin-top: 16px;
+            }
+
+            .top-section {
+                flex-direction: column;
+                gap: 18px;
+                padding: 20px 10px 0 10px;
+            }
+
+            .img-box {
+                width: 100%;
+            }
+
+            .info-box {
+                min-width: unset;
+            }
+
+            .desc-section {
+                padding: 0 10px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .main-wrap {
+                margin-top: 0;
+                border-radius: 0;
+                box-shadow: none;
+            }
+
+            .top-section {
+                padding: 12px 2vw 0 2vw;
+            }
+
+            .desc-section {
+                padding: 0 2vw;
+            }
+        }
+    </style>
+</th:block>
+
+<th:block layout:fragment="layout_top_script">
+    <script th:inline="javascript">
+        const CDN_URL = [[${@environment.getProperty('url.cdn') }]];
+    </script>
+</th:block>
+
+<th:block layout:fragment="layout_content">
+    <div id="service-header">
+        시술안내/가격 &nbsp;&gt;&nbsp; <span id="header-category-nm"></span> &nbsp;&gt;&nbsp; <span id="header-title"></span>
+    </div>
+    <div class="main-wrap">
+        <div class="top-section">
+            <div class="img-box">
+                <img id="serviceThumb" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="썸네일 이미지">
+                <pre id="thumbnail-bottom-txt"></pre>
+            </div>
+
+            <div class="info-box">
+                <div class="info-title" id="title"></div>
+                <div class="info-desc" id="contents"></div>
+
+                <div class="hashtag-section">
+                    <div class="hashtag-container">
+                        <div class="hashtag-list">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="info-price"><span id="price">0</span>원 부터</div>
+
+                <div class="select-row">
+                    <label for="procedure-select">시술 선택</label>
+                    <select id="procedure-select" multiple></select>
+                </div>
+
+                <div class="total-row">
+                    <span class="total-label">총 금액</span>
+                    <span class="total-price" id="total">0원</span>
+                </div>
+                <button class="reserve-btn" id="reserve-btn" disabled>시술 예약하기</button>
+            </div>
+        </div>
+        <div class="desc-section">
+            <div class="desc-content">
+                <img id="contents_path" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="컨텐츠 이미지"
+                    width="100%" />
+            </div>
+        </div>
+    </div>
+</th:block>
+
+<th:block layout:fragment="layout_script">
+    <!-- Choices.js JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.js"></script>
+
+    <script>
+        // 전역 변수
+        let procedureChoices;
+        let priceList = [];
+        const totalEl = document.getElementById('total');
+        const reserveBtn = document.getElementById('reserve-btn');
+
+        // 초기화 - Opener 데이터 로드 (DOM 로드 후 실행)
+        document.addEventListener('DOMContentLoaded', function () {
+            fn_initPreview();
+        });
+
+        function fn_initPreview() {
+            if (!window.opener) {
+                alert('비정상적인 접근입니다.');
+                window.close();
+                return;
+            }
+
+            const opener = window.opener;
+            const $ = opener.jQuery; // Use jQuery from opener if possible, or use current document
+
+            // 1. 기본 정보 설정
+            document.getElementById('header-category-nm').innerText = opener.$("select[name=category] option:selected").text();
+            document.getElementById('header-title').innerText = opener.$("#title").val();
+            document.getElementById('title').innerText = opener.$("#title").val();
+            document.getElementById('contents').innerText = opener.$("#content").val();
+            document.getElementById('thumbnail-bottom-txt').innerText = opener.$("#thumbnailBottomTxt").val();
+
+            // 2. 이미지 설정
+            let thumbSrc = opener.$(".img_box img").attr("src");
+            if (!thumbSrc) thumbSrc = opener.$("#thumbnailImg").attr("src");
+            if (thumbSrc) document.getElementById('serviceThumb').src = thumbSrc;
+
+            let contentSrc = opener.$(".file_box img").attr("src");
+            if (!contentSrc) contentSrc = opener.$("#contentsImg").attr("src");
+            if (contentSrc) document.getElementById('contents_path').src = contentSrc;
+            else document.getElementById('contents_path').style.display = 'none';
+
+            // 3. 해시태그 설정
+            let hashtagStr = opener.$("#hashtag").val();
+            let hashtagHtml = '';
+            if (hashtagStr) {
+                let tags = hashtagStr.split('#');
+                tags.forEach(function (tag) {
+                    let trimmed = tag.trim();
+                    if (trimmed) {
+                        hashtagHtml += '<span class="hashtag">#' + trimmed + '</span>';
+                    }
+                });
+            }
+            document.querySelector('.hashtag-list').innerHTML = hashtagHtml;
+
+            // 4. 시술 목록 및 가격 설정
+            let treatmentList = opener.getTreatmentListForPreview ? opener.getTreatmentListForPreview() : opener.treatmentList; // Access global variable from opener or fall back
+            if (treatmentList && treatmentList.length > 0) {
+                updateProcedureOptions(treatmentList);
+            }
+        }
+
+        /****************************************************************************
+         * Choices.js 초기화 및 옵션 업데이트
+         ****************************************************************************/
+        function updateProcedureOptions(data) {
+            priceList = data;
+
+            let minPrice = -1;
+
+            // 선택 옵션 데이터 생성
+            const choices = data.map(item => {
+                const price = parseInt(item.price) || 0;
+                const discountPrice = parseInt(item.discountPrice) || 0;
+                const finalPrice = (discountPrice > 0 && discountPrice < price) ? discountPrice : price;
+
+                if (minPrice === -1 || finalPrice < minPrice) {
+                    minPrice = finalPrice;
+                }
+
+                return {
+                    value: item.muTreatmentProcedureId || item.muTreatmentId, // Adjust based on your object structure
+                    label: item.treatmentProcedureName,
+                    customProperties: {
+                        name: item.treatmentProcedureName,
+                        price: price,
+                        discountPrice: discountPrice
+                    }
+                };
+            }).filter(Boolean);
+
+            if (minPrice === -1) minPrice = 0;
+            document.getElementById('price').textContent = minPrice.toLocaleString();
+
+            // Choices.js 초기화
+            procedureChoices = new Choices('#procedure-select', {
+                removeItemButton: true,
+                searchEnabled: true,
+                searchPlaceholderValue: '시술명으로 검색...',
+                placeholder: true,
+                placeholderValue: '시술을 선택하세요',
+                maxItemCount: -1,
+                choices: choices,
+                shouldSort: false,
+                searchResultLimit: 10,
+                searchFields: ['label', 'value'],
+                itemSelectText: '',
+                noChoicesText: '선택 가능한 시술이 없습니다',
+                noResultsText: '검색 결과가 없습니다',
+                loadingText: '시술 정보를 불러오는 중...',
+
+                callbackOnCreateTemplates: function (template) {
+                    return {
+                        item: ({ classNames }, data) => {
+                            const customProps = data.customProperties || {};
+                            const name = customProps.name || data.label;
+                            const price = customProps.price || 0;
+                            const discountPrice = customProps.discountPrice;
+
+                            let priceHtml = '';
+                            if (discountPrice && discountPrice < price) {
+                                priceHtml = `
+                                <span class="selected-price-discount">${discountPrice.toLocaleString()}원</span>
+                                <span class="selected-price-original">${price.toLocaleString()}원</span>
+                            `;
+                            } else {
+                                priceHtml = `<span class="selected-price">${price.toLocaleString()}원</span>`;
+                            }
+
+                            return template(`
+                            <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}">
+                                <span class="selected-item-content">
+                                    <span class="selected-item-name">${name}</span>
+                                    <span class="selected-item-price">${priceHtml}</span>
+                                </span>
+                               	<button type="button" class="${classNames.button}" aria-label="Remove item: '${data.value}'" data-button>X</button>
+                            </div>
+                        `);
+                        },
+                        choice: ({ classNames }, data) => {
+                            const customProps = data.customProperties || {};
+                            const name = customProps.name || data.label;
+                            const price = customProps.price || 0;
+                            const discountPrice = customProps.discountPrice;
+
+                            let priceHtml = '';
+                            if (discountPrice && discountPrice < price) {
+                                priceHtml = `
+                                <span class="procedure-price-discount">${discountPrice.toLocaleString()}원</span>
+                                <span class="procedure-price-original">${price.toLocaleString()}원</span>
+                            `;
+                            } else {
+                                priceHtml = `<span class="procedure-price">${price.toLocaleString()}원</span>`;
+                            }
+
+                            return template(`
+                            <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}">
+                                <div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
+                                    <span>${name}</span>
+                                    ${priceHtml}
+                                </div>
+                            </div>
+                        `);
+                        }
+                    };
+                }
+            });
+
+            const selectElement = document.getElementById('procedure-select');
+            selectElement.addEventListener('change', updateTotalPrice);
+            selectElement.addEventListener('addItem', updateTotalPrice);
+            selectElement.addEventListener('removeItem', updateTotalPrice);
+        }
+
+        function updateTotalPrice() {
+            if (!procedureChoices) return;
+            const selectedValues = procedureChoices.getValue(true);
+            let total = 0;
+
+            selectedValues.forEach(value => {
+                // Find item in local priceList (which is data passed to updateProcedureOptions)
+                // Note: priceList elements structure depends on how we mapped it.
+                // Oh wait, priceList = data; which comes from opener.treatmentList.
+                // Items in treatmentList have { muTreatmentProcedureId, treatmentProcedureName, price, discountPrice ... }
+                const item = priceList.find(p => (p.muTreatmentProcedureId || p.muTreatmentId) == value);
+
+                if (item) {
+                    const basePrice = parseInt(item.price) || 0;
+                    const discountPrice = parseInt(item.discountPrice) || 0;
+                    const finalPrice = (discountPrice > 0 && discountPrice < basePrice) ? discountPrice : basePrice;
+                    total += finalPrice;
+                }
+            });
+
+            totalEl.textContent = total.toLocaleString() + '원';
+            reserveBtn.disabled = selectedValues.length === 0;
+        }
+    </script>
+</th:block>
+
+</html>

src/main/resources/templates/web/contentsBbs/ContentsBbsReg.html

@@ -1,15 +1,12 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{/web/layout/homeLayout}">
 <th:block layout:fragment="layout_css">
-    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
-    <link rel="stylesheet" href="/css/web/ContentsBbsReg.css">
 	<link rel="stylesheet" href="/css/web/grid.css?v1.1">
 </th:block>
 <th:block layout:fragment="layout_top_script">
-    <script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
+	<!-- Pagination usage removed -->
 	<script>
 		let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
 		let categoryDivCd = "[[${param.categoryDivCd}]]" == "" ? "" : "[[${param.categoryDivCd}]]";
@@ -21,6 +18,8 @@
 		let downloadUseYn = "[[${downloadUseYn}]]" == "" ? "N" : "[[${downloadUseYn}]]";
 
 		let categorytitle = "[[${title}]]";
+
+		const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";
 	</script>
 </th:block>
 <th:block layout:fragment="layout_content">
@@ -30,76 +29,140 @@
 
 		<!-- 테이블 -->
 		<div class="content_box">
-            <div class="content clear">
+			<div class="update-container">
-				<div class="wp60">
+				<!-- Left Panel: Data Forms -->
-					<div class="top">
+				<div class="left-panel">
-                        <label>썸네일 첨부파일</label>
+					<!-- Row 1: Category & Title -->
-                        <label for="file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
+					<div class="form-grid-row">
-                    </div>
+						<div class="form-group" style="flex: 0 0 150px;">
-                    <div class="btm">
+							<label>카테고리</label>
-                        <div class="img_box"><!-- img 미리보기 --></div>                        
+							<select name="category">
-                        <input type="file" id="file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
-                        <button id="delete_btn">삭제</button>
-                    </div>
-					<p class="thumbnail-bottom-txt">
-						썸네일 하단글
-					</p>
-					<textarea id="thumbnail-bottom-txt" placeholder="썸네일 하단글을 입력해주세요." ></textarea>
-					<p class="content-file">
-						컨텐츠 첨부파일
-						<label for="content_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
-					</p>
-					<input type="file" id="content_file" style="display: none;" placeholder="첨부파일을 입력해주세요."/>
-					<div class="file_box"><!-- img 미리보기 --></div>
-					<button id="content_delete_btn">삭제</button>
-				</div>
-				<div class="wp40">
-					<div class="consultation-info">
-						<p id="main_category">
-							카테고리
-						</p>
-						<select th:name="categorylist">
 								<option value="">선택하세요</option>
-  							<option th:each="category : ${categorylist}" th:value="${category.categoryNo}" th:text="${category.categoryNm}"></option>
+								<option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
+									th:text="${category.categoryNm}"></option>
 							</select>
-						<p id="main_title">
+							<input type="hidden" id="categoryNo" />
-							제목
-						</p>
-						<input type="text" id="title" placeholder="제목을 입력해주세요."/>
-						<p id="main_content">
-							내용
-						</p>						
-						<textarea id="content" placeholder="내용을 입력해주세요."></textarea>		                
-						<p id="main_hashtag">
-							해쉬태그
-						</p>
-						<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요."/>
-						<div>
-							<label for="oldCrmItemId">OLD CRM 연동ID</label>
-							<input type="text" id="oldCrmItemId" placeholder="OLD_CRM_ITEM_ID"/>
 						</div>
-						<div>
+						<div class="form-group">
-							<label for="ordNo">홈페이지 출력순서</label>
+							<label>제목</label>
+							<input type="text" id="title" placeholder="제목을 입력해주세요." />
+						</div>
+					</div>
+
+					<!-- Row 2: Content & Order -->
+					<div class="form-grid-row">
+						<div class="form-group" style="flex: 1;">
+							<label>내용</label>
+							<input type="text" id="content" placeholder="내용을 입력해주세요." />
+						</div>
+						<div class="form-group" style="flex: 0 0 150px;">
+							<label>홈페이지 출력순서</label>
 							<input type="text" id="ordNo" />
 						</div>
-						<p id="main_procedure">
+					</div>
-							시술선택
+
-							<button class="add_btn ml50" onclick="javascript:listOpen();">
+					<!-- Row 3: Hashtag & Old ID -->
+					<div class="form-grid-row">
+						<div class="form-group">
+							<label>해쉬태그</label>
+							<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
+						</div>
+						<div class="form-group">
+							<label>OLD CRM 연동ID</label>
+							<input type="text" id="oldCrmItemId" placeholder="OLD_CRM_ITEM_ID" />
+						</div>
+					</div>
+
+					<!-- Row 4: Procedure Selection (Grid) -->
+					<div class="grid-section">
+						<div class="grid-header">
+							<label>시술선택</label>
+							<div class="grid-controls">
+								<button class="add_btn" onclick="javascript:listOpen();">
 									<img src="/image/web/add.svg" alt="추가">
 								</button>
 								<button class="add_btn" onclick="javascript:fn_removeRow();">
 									<img src="/image/web/subtract.svg" alt="삭제">
 								</button>
-						</p>
-						<div id="treatmentlist">	    
 							</div>
 						</div>
-					<div class="button_box">
+						<div class="custom-grid-container">
-	                    <button class="registration_btn btnSave">등록</button>
+							<table class="treatment-table">
-	                    <button class="cancel_btn btnCancle">취소</button>
+								<colgroup>
+									<col style="width: 50px;">
+									<col style="width: auto;">
+									<col style="width: 120px;">
+									<col style="width: 120px;">
+								</colgroup>
+								<thead>
+									<tr>
+										<th>
+											<input type="checkbox" id="checkAll" onclick="fn_checkAll(this)">
+										</th>
+										<th>시술명</th>
+										<th>가격</th>
+										<th>할인가</th>
+									</tr>
+								</thead>
+								<tbody id="treatmentListBody">
+									<!-- Rows will be added here dynamically -->
+								</tbody>
+							</table>
 						</div>
 					</div>
 
+					<!-- Bottom Buttons -->
+					<div class="bottom-actions">
+						<button class="btn-basic btnPreview" onclick="fn_openPreview();"
+							style="width: 120px; height: 36px; border-radius: 4px; background: #fff; color: #333; border: 1px solid #ccc; margin-right: auto;">미리보기</button>
+						<button class="registration_btn btnSave"
+							style="width: 80px; height: 36px; border-radius: 4px; background: #3985EA; color: white;">등록</button>
+						<button class="cancel_btn btnCancle"
+							style="width: 80px; height: 36px; border-radius: 4px;">취소</button>
+					</div>
+				</div>
+
+				<!-- Right Panel: Images -->
+				<div class="right-panel">
+					<!-- Thumbnail Section -->
+					<div class="panel-section">
+						<div class="top-label">
+							<span>썸네일 첨부파일</span>
+							<div>
+								<label for="file" class="file_btn" style="cursor: pointer;"><img
+										src="/image/web/add.svg" alt="파일찾기"></label>
+								<button id="delete_btn"
+									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
+							</div>
+						</div>
+						<div class="img-preview-wrapper img_box">
+							<img id="thumbnailImg" src="" />
+						</div>
+						<input type="file" id="file" accept="image/jpeg, image/jpg, image/png" style="display: none;"
+							multiple>
+
+						<label style="margin-top: 10px; font-size: 13px; font-weight: 700;">썸네일 하단글</label>
+						<textarea id="thumbnailBottomTxt" placeholder="썸네일 하단글을 입력해주세요."></textarea>
+					</div>
+
+					<!-- Content File Section -->
+					<div class="panel-section">
+						<div class="top-label">
+							<span>컨텐츠 첨부파일</span>
+							<div>
+								<label for="content_file" class="file_btn" style="cursor: pointer;"><img
+										src="/image/web/add.svg" alt="파일찾기"></label>
+								<button id="content_delete_btn"
+									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
+							</div>
+						</div>
+						<div class="img-preview-wrapper file_box">
+							<!-- Using same class for consistent styling -->
+							<img id="contentsImg" src="" />
+						</div>
+						<input type="file" id="content_file" style="display: none;" placeholder="첨부파일을 입력해주세요." />
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -108,9 +171,8 @@
 <th:block layout:fragment="layout_popup">
 </th:block>
 <th:block layout:fragment="layout_script">
-    <script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
 	<script src="/js/web/contentsBbs/ContentsBbsReg.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
 	<script src="/js/web/contentsBbs/ContentsBbsPop.js"></script>
 </th:block>
+
 </html>

src/main/resources/templates/web/contentsBbs/ContentsBbsUpd.html

@@ -1,15 +1,12 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{/web/layout/homeLayout}">
 <th:block layout:fragment="layout_css">
-    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
-    <link rel="stylesheet" href="/css/web/ContentsBbsReg.css">
 	<link rel="stylesheet" href="/css/web/grid.css?v1.1">
 </th:block>
 <th:block layout:fragment="layout_top_script">
-    <script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
+	<!-- Pagination usage removed -->
 	<script>
 		let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
 
@@ -35,84 +32,143 @@
 
 		<!-- 테이블 -->
 		<div class="content_box">
-            <div class="content clear">
+			<div class="update-container">
-				<div class="wp60">
+				<!-- Left Panel: Data Forms -->
-					<div class="top">
+				<div class="left-panel">
-                        <label>썸네일 첨부파일</label>
+					<!-- Row 1: Category & Title -->
-                        <label for="file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
+					<div class="form-grid-row">
-                    </div>
+						<div class="form-group" style="flex: 0 0 150px;">
-                    <div class="btm">
+							<label>카테고리</label>
-                        <div class="img_box">
-                        	<img id="thumbnailImg" src="" width="800px" height="450px" />
-                        </div>                        
-                        <input type="file" id="file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
-                        <button id="delete_btn">삭제</button>
-                    </div>
-					<p class="thumbnail-bottom-txt">
-						썸네일 하단글
-					</p>
-					<textarea id="thumbnailBottomTxt" placeholder="썸네일 하단글을 입력해주세요." ></textarea>
-					<p class="content-file">
-						컨텐츠 첨부파일
-						<label for="content_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
-					</p>
-					<input type="file" id="content_file" style="display: none;" placeholder="첨부파일을 입력해주세요."/>
-					<div class="file_box">
-						<img id="contentsImg" src="" width="100%" height="100%" />
-					</div>
-					<button id="content_delete_btn">삭제</button>
-				</div>
-				<div class="wp40">
-					<div class="consultation-info">
-						<p id="main_category">
-							카테고리
-						</p>
 							<select th:name="category" th:disabled="true">
 								<option value="">선택하세요</option>
-  							<option th:each="item : ${category}" th:value="${item['categoryNo']}" th:text="${item['categoryNm']}" ></option>
+								<option th:each="item : ${category}" th:value="${item['categoryNo']}"
+									th:text="${item['categoryNm']}"></option>
 							</select>
-						<!-- disabled된 select의 값을 전송하기 위한 hidden input -->
 							<input type="hidden" id="categoryNo" />
-						<p id="main_title">
-							제목
-						</p>
-						<input type="text" id="title" placeholder="제목을 입력해주세요."/>
-						<p id="main_content">
-							내용
-						</p>						
-						<textarea id="content" placeholder="내용을 입력해주세요."></textarea>		                
-						<p id="main_hashtag">
-							해쉬태그
-						</p>
-						<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요."/>
-						<div>
-							<label for="oldCrmItemId">OLD CRM 연동ID</label>
-							<input type="text" id="oldCrmItemId" placeholder="OLD_CRM_ITEM_ID"/>
 						</div>
-						<div>
+						<div class="form-group">
-							<label for="ordNo">홈페이지 출력순서</label>
+							<label>제목</label>
+							<input type="text" id="title" placeholder="제목을 입력해주세요." />
+						</div>
+					</div>
+
+					<!-- Row 2: Content & Order -->
+					<div class="form-grid-row">
+						<div class="form-group" style="flex: 1;">
+							<label>내용</label>
+							<input type="text" id="content" placeholder="내용을 입력해주세요." />
+						</div>
+						<div class="form-group" style="flex: 0 0 70px;">
+							<label>출력순서</label>
 							<input type="text" id="ordNo" />
 						</div>
-						<p id="main_procedure">
+					</div>
-							시술선택
+
-							<button class="add_btn ml50" onclick="javascript:listOpen();">
+					<!-- Row 3: Hashtag & Old ID -->
+					<div class="form-grid-row">
+						<div class="form-group">
+							<label>해쉬태그</label>
+							<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
+						</div>
+						<div class="form-group">
+							<label>OLD CRM 연동ID</label>
+							<input type="text" id="oldCrmItemId" placeholder="OLD_CRM_ITEM_ID" />
+						</div>
+					</div>
+
+					<!-- Row 4: Treatment Grid -->
+					<div class="grid-section">
+						<div class="grid-header">
+							<p>시술선택</p>
+							<div>
+								<button class="add_btn" onclick="javascript:listOpen();"
+									style="border:none; background:none; cursor:pointer;">
 									<img src="/image/web/add.svg" alt="추가">
 								</button>
-							<button class="add_btn" onclick="javascript:fn_removeRow();">
+								<button class="add_btn" onclick="javascript:fn_removeRow();"
+									style="border:none; background:none; cursor:pointer; margin-left: 5px;">
 									<img src="/image/web/subtract.svg" alt="삭제">
 								</button>
-						</p>
-						<div id="treatmentlist">	    
 							</div>
 						</div>
-					<div class="button_box">
+						<div class="custom-grid-container">
-		              <button class="registration_btn btnSave">수정</button>
+							<table class="treatment-table">
-		              <button class="cancel_btn btnCancle">취소</button>
+								<colgroup>
+									<col style="width: 50px;">
+									<col style="width: 250px;">
+									<col style="width: 120px;">
+									<col style="width: 120px;">
+								</colgroup>
+								<thead>
+									<tr>
+										<th>
+											<input type="checkbox" id="checkAll" onclick="fn_checkAll(this)">
+										</th>
+										<th>시술명</th>
+										<th>가격</th>
+										<th>할인가</th>
+									</tr>
+								</thead>
+								<tbody id="treatmentListBody">
+									<!-- Rows will be added here dynamically -->
+								</tbody>
+							</table>
 						</div>
 					</div>
 
+					<!-- Bottom Buttons -->
+					<div class="bottom-actions">
+						<button class="btn-basic btnPreview" onclick="fn_openPreview();"
+							style="width: 120px; height: 36px; border-radius: 4px; background: #fff; color: #333; border: 1px solid #ccc; margin-right: auto;">미리보기</button>
+						<button class="registration_btn btnSave"
+							style="width: 80px; height: 36px; border-radius: 4px; background: #3985EA; color: white;">수정</button>
+						<button class="cancel_btn btnCancle"
+							style="width: 80px; height: 36px; border-radius: 4px;">취소</button>
+					</div>
 				</div>
 
+				<!-- Right Panel: Images -->
+				<div class="right-panel">
+					<!-- Thumbnail Section -->
+					<div class="panel-section">
+						<div class="top-label">
+							<span>썸네일 첨부파일</span>
+							<div>
+								<label for="file" class="file_btn" style="cursor: pointer;"><img
+										src="/image/web/add.svg" alt="파일찾기"></label>
+								<button id="delete_btn"
+									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
+							</div>
+						</div>
+						<div class="img-preview-wrapper img_box">
+							<img id="thumbnailImg" src="" />
+						</div>
+						<input type="file" id="file" accept="image/jpeg, image/jpg, image/png" style="display: none;"
+							multiple>
+
+						<label style="margin-top: 10px; font-size: 13px; font-weight: 700;">썸네일 하단글</label>
+						<textarea id="thumbnailBottomTxt" placeholder="썸네일 하단글을 입력해주세요."></textarea>
+					</div>
+
+					<!-- Content File Section -->
+					<div class="panel-section">
+						<div class="top-label">
+							<span>컨텐츠 첨부파일</span>
+							<div>
+								<label for="content_file" class="file_btn" style="cursor: pointer;"><img
+										src="/image/web/add.svg" alt="파일찾기"></label>
+								<button id="content_delete_btn"
+									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
+							</div>
+						</div>
+						<div class="img-preview-wrapper file_box">
+							<!-- Using same class for consistent styling -->
+							<img id="contentsImg" src="" />
+						</div>
+						<input type="file" id="content_file" style="display: none;" placeholder="첨부파일을 입력해주세요." />
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 	<form id="excelForm" method="POST" target="_blank"></form>
@@ -120,9 +176,8 @@
 <th:block layout:fragment="layout_popup">
 </th:block>
 <th:block layout:fragment="layout_script">
-    <script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
 	<script src="/js/web/contentsBbs/ContentsBbsUpd.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
 	<script src="/js/web/contentsBbs/ContentsBbsPop.js"></script>
 </th:block>
+
 </html>