고객후기 구현
This commit is contained in:
94
rules.md
Normal file
94
rules.md
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
# 프로젝트 코딩 가이드라인 (Java Backend)
|
||||||
|
|
||||||
|
AI 에디터(Agent)는 다음 규칙을 항상 준수하여 코드를 작성하고 수정해야 합니다.
|
||||||
|
|
||||||
|
## 0. 기본 소통 규칙 (Communication)
|
||||||
|
- **언어**: 사용자에 대한 모든 답변과 코드 설명은 항상 **한글(Korean)**로만 작성해야 합니다.
|
||||||
|
|
||||||
|
## 1. 패키지 구성 (Package Structure)
|
||||||
|
- **베이스 패키지**: `com.madeuhome`
|
||||||
|
- **컨트롤러 (Controller)**: `ctrl`
|
||||||
|
- **서비스 (Service)**: `svc`
|
||||||
|
- **DTO (Data Transfer Object)**: `dto`
|
||||||
|
- **매퍼 (Mapper)**: `mapper`
|
||||||
|
- **공통 서비스**: `com.madeuhome.common.service` (LogHistoryService 등 시스템 공통 모듈)
|
||||||
|
|
||||||
|
## 2. 파일 명명 규칙 및 구성 (File Naming Conventions)
|
||||||
|
- **컨트롤러 (Controller)**: `[도메인명]Controller.java` (예: `ABCDController.java`)
|
||||||
|
- **서비스 (Service)**: `[도메인명]Service.java` (인터페이스와 구현체(impl)를 분리하지 않고 Service 클래스 파일 하나로만 구현, 예: `ABCDService.java`)
|
||||||
|
- **DTO**: `[도메인명]DTO.java` (예: `ABCDDTO.java`)
|
||||||
|
- **매퍼 (Mapper)**: `[도메인명]Mapper.java` (예: `ABCDMapper.java`)
|
||||||
|
- **XML Mapper**: `[도메인명]SqlMap.xml` (namespace는 Mapper 인터페이스의 **FQCN**과 반드시 일치)
|
||||||
|
|
||||||
|
## 3. URL 및 메소드 명명 규칙 (RequestMapping & Method Naming)
|
||||||
|
|
||||||
|
### 1) RequestMapping (URL) 및 컨트롤러 메소드명
|
||||||
|
- 페이지 이동하는 url : `moveXXXX.do`
|
||||||
|
- 팝업 오픈하는 url : `openXXXX.do`
|
||||||
|
- 조회 url : `getXXXX.do`
|
||||||
|
- 저장 url : `putXXXX.do`
|
||||||
|
- 수정 url : `modXXXX.do`
|
||||||
|
- 삭제 url : `delXXXX.do`
|
||||||
|
- **단, 컨트롤러 메소드명은 위 url에서 `.do`를 제외한 이름과 동일하게 명명합니다.**
|
||||||
|
|
||||||
|
### 2) 서비스 메소드명
|
||||||
|
- 서비스 메소드명은 **컨트롤러 메소드명과 동일**하게 명명합니다.
|
||||||
|
- 조회: `getXXXX` / 목록 조회: `getXXXXList`
|
||||||
|
- 저장: `putXXXX`
|
||||||
|
- 수정: `modXXXX`
|
||||||
|
- 삭제: `delXXXX`
|
||||||
|
|
||||||
|
### 3) Mapper 인터페이스 메소드명
|
||||||
|
- 단일조회 : `selectXXXX`
|
||||||
|
- 리스트조회 : `selectListXXXX`
|
||||||
|
- insert : `insertXXXX`
|
||||||
|
- update : `updateXXXX`
|
||||||
|
- delete : `deleteXXXX`
|
||||||
|
|
||||||
|
## 4. 데이터베이스 연동 정보 (DB Connection)
|
||||||
|
- `application-local.yml`의 설정을 기반으로 한 공통 접속 정보입니다.
|
||||||
|
- **Host**: 183.98.184.84
|
||||||
|
- **Port**: 3306
|
||||||
|
- **Database**: madeu
|
||||||
|
- **User**: madeu
|
||||||
|
- **Password**: apdlemdb12#$
|
||||||
|
|
||||||
|
## 5. 아키텍처 및 코딩 원칙 (Architecture & Coding Principles)
|
||||||
|
|
||||||
|
### 5-1. 컨트롤러 원칙 (Skinny Controller)
|
||||||
|
- 컨트롤러에는 비즈니스 로직이나 예외처리 로직을 넣지 않고, **서비스 메서드를 호출하는 1줄로만 작성**합니다.
|
||||||
|
- 컨트롤러 클래스는 `@Controller` 대신 **`@RestController`**를 사용하며, `@ResponseBody`는 생략합니다.
|
||||||
|
- 데이터 입출력 메소드의 파라미터는 **단일 DTO 하나만 `@RequestBody`**로 받습니다.
|
||||||
|
- 파일 업로드가 포함된 경우에만 `@ModelAttribute` + `@RequestParam MultipartFile`을 허용합니다.
|
||||||
|
- 화면 이동(`move~`) 메소드는 **`ModelAndView`를 리턴**합니다. (`@RestController`에서 String 리턴 시 뷰 이름이 아닌 응답 바디로 해석되므로)
|
||||||
|
- 화면 이동 메소드의 뷰 경로는 **컨트롤러에서 직접 명시**합니다. (서비스에 위임 금지)
|
||||||
|
|
||||||
|
### 5-2. 서비스 원칙 (Service Layer)
|
||||||
|
- 에러 처리(try-catch), 응답 메시지(msgCode, msgDesc) 설정은 **서비스 계층에서 전담**합니다.
|
||||||
|
- `HttpServletRequest`, `HttpSession`은 `@Autowired`로 직접 주입받아 사용합니다. (Spring이 Request-scope 프록시로 제공)
|
||||||
|
- `session.getAttribute("loginMemberId")`를 통해 로그인 ID를 가져오고, DTO에 설정합니다.
|
||||||
|
|
||||||
|
### 5-3. DTO 원칙 (DTO Communication)
|
||||||
|
- **HashMap 사용 금지**. 컨트롤러 ↔ 서비스 ↔ 매퍼 간 모든 데이터는 **DTO 객체만 사용**합니다.
|
||||||
|
- DTO에는 `@Data` (Lombok)을 사용합니다.
|
||||||
|
- DTO 필드 구성:
|
||||||
|
- **DB 컬럼 매핑 필드**: `muProcedureReviewId`, `title`, `content` 등
|
||||||
|
- **조회 결과 전용 필드**: `rowNum`, `writeDate`, `writeName` 등
|
||||||
|
- **검색/UI 변수**: `startDate`, `endDate`, `start`, `limit`, `sort`, `dir` 등
|
||||||
|
- **응답 매핑 변수**: `msgCode`, `msgDesc`, `success`, `totalCount`, `rows`(Object 타입), `tId`
|
||||||
|
|
||||||
|
### 5-4. Mapper 원칙 (MyBatis Mapper)
|
||||||
|
- Mapper는 **`@Mapper` 어노테이션을 사용한 인터페이스**로 작성합니다. (`SqlSessionDaoSupport` 상속 금지)
|
||||||
|
- XML Mapper의 `namespace`는 Mapper 인터페이스의 **FQCN(Fully Qualified Class Name)**과 일치시킵니다.
|
||||||
|
- XML의 `resultType`은 `hashmap` 대신 **DTO FQCN**을 사용합니다.
|
||||||
|
- 예외: 도메인 외부 테이블 조회(카테고리 등)는 `hashmap` 허용
|
||||||
|
- XML alias는 **DTO 필드명(camelCase)**과 정확히 일치시킵니다.
|
||||||
|
- 단건 조회는 `List` 대신 **DTO 단일 객체를 리턴**합니다.
|
||||||
|
|
||||||
|
## 6. 파일 업로드 규칙 (File Upload)
|
||||||
|
- `MultipartFile.transferTo()` 사용 시 반드시 **절대경로를 명시**합니다:
|
||||||
|
```java
|
||||||
|
File dest = new File(outDir, savedName);
|
||||||
|
file.transferTo(dest.toPath().toAbsolutePath());
|
||||||
|
```
|
||||||
|
- 상대경로 사용 시 Tomcat 임시 디렉토리 기준으로 해석되어 오류가 발생합니다.
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
package com.madeuhome.controller.web.webreview;
|
||||||
|
|
||||||
|
import com.madeuhome.constants.Constants;
|
||||||
|
import com.madeuhome.init.ManagerDraftAction;
|
||||||
|
import com.madeuhome.service.web.webreview.WebReviewService;
|
||||||
|
import com.madeuhome.util.HttpUtil;
|
||||||
|
import jakarta.servlet.http.HttpServletRequest;
|
||||||
|
import jakarta.servlet.http.HttpServletResponse;
|
||||||
|
import jakarta.servlet.http.HttpSession;
|
||||||
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.ui.Model;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.servlet.ModelAndView;
|
||||||
|
|
||||||
|
import java.util.HashMap;
|
||||||
|
|
||||||
|
@Slf4j
|
||||||
|
@Controller
|
||||||
|
public class WebReviewController extends ManagerDraftAction {
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private WebReviewService webReviewService;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 리스트 화면으로 이동
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/webreview/selectListProcedureReviewIntro.do")
|
||||||
|
public String selectListProcedureReviewIntro(HttpSession session, HttpServletRequest request) {
|
||||||
|
log.debug("WebReviewController selectListProcedureReviewIntro START");
|
||||||
|
log.debug("WebReviewController selectListProcedureReviewIntro END");
|
||||||
|
return "/web/webreview/procedureReviewSelectList";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 리스트 조회 (AJAX)
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/webreview/selectListProcedureReview.do")
|
||||||
|
public ModelAndView selectListProcedureReview(HttpSession session, HttpServletRequest request,
|
||||||
|
HttpServletResponse response) {
|
||||||
|
log.debug("WebReviewController selectListProcedureReview START");
|
||||||
|
|
||||||
|
HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
|
||||||
|
HashMap<String, Object> map = new HashMap<String, Object>();
|
||||||
|
StringBuffer errorMsg = new StringBuffer();
|
||||||
|
|
||||||
|
try {
|
||||||
|
map = webReviewService.selectListProcedureReview(paramMap);
|
||||||
|
} catch (Exception e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
errorMsg.append(e);
|
||||||
|
return null;
|
||||||
|
} finally {
|
||||||
|
if (Constants.OK == map.get("msgCode")) {
|
||||||
|
} else {
|
||||||
|
if (null == map.get("msgCode") || ("").equals(map.get("msgCode"))) {
|
||||||
|
map.put("msgCode", Constants.FAIL);
|
||||||
|
}
|
||||||
|
map.put("success", false);
|
||||||
|
if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
|
||||||
|
map.put("msgDesc", "정상적으로 수행되지 않았습니다. 관리자에게 문의하시기 바랍니다.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug("WebReviewController selectListProcedureReview END");
|
||||||
|
return HttpUtil.makeHashToJsonModelAndView(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 상세 화면으로 이동
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/webreview/selectProcedureReviewIntro.do")
|
||||||
|
public String selectProcedureReviewIntro(HttpSession session, HttpServletRequest request, Model model) {
|
||||||
|
log.debug("WebReviewController selectProcedureReviewIntro START");
|
||||||
|
HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
|
||||||
|
model.addAttribute("muProcedureReviewId", paramMap.get("muProcedureReviewId"));
|
||||||
|
log.debug("WebReviewController selectProcedureReviewIntro END");
|
||||||
|
return "/web/webreview/procedureReviewSelect";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 상세 조회 (AJAX)
|
||||||
|
*/
|
||||||
|
@RequestMapping(value = "/webreview/selectProcedureReview.do")
|
||||||
|
public ModelAndView selectProcedureReview(HttpSession session, HttpServletRequest request,
|
||||||
|
HttpServletResponse response) {
|
||||||
|
log.debug("WebReviewController selectProcedureReview START");
|
||||||
|
|
||||||
|
HashMap<String, Object> paramMap = HttpUtil.getParameterMap(request);
|
||||||
|
HashMap<String, Object> map = new HashMap<String, Object>();
|
||||||
|
StringBuffer errorMsg = new StringBuffer();
|
||||||
|
|
||||||
|
try {
|
||||||
|
map = webReviewService.selectProcedureReview(paramMap);
|
||||||
|
} catch (Exception e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
errorMsg.append(e);
|
||||||
|
return null;
|
||||||
|
} finally {
|
||||||
|
if (Constants.OK == map.get("msgCode")) {
|
||||||
|
} else {
|
||||||
|
if (null == map.get("msgCode") || ("").equals(map.get("msgCode"))) {
|
||||||
|
map.put("msgCode", Constants.FAIL);
|
||||||
|
}
|
||||||
|
map.put("success", false);
|
||||||
|
if (null == map.get("msgDesc") || ("").equals(map.get("msgDesc"))) {
|
||||||
|
map.put("msgDesc", "정상적으로 수행되지 않았습니다. 관리자에게 문의하시기 바랍니다.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug("WebReviewController selectProcedureReview END");
|
||||||
|
return HttpUtil.makeHashToJsonModelAndView(map);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
package com.madeuhome.dao.web.webreview;
|
||||||
|
|
||||||
|
import jakarta.annotation.PostConstruct;
|
||||||
|
import org.mybatis.spring.SqlSessionTemplate;
|
||||||
|
import org.mybatis.spring.support.SqlSessionDaoSupport;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.dao.DataAccessException;
|
||||||
|
import org.springframework.stereotype.Repository;
|
||||||
|
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
|
||||||
|
@Repository
|
||||||
|
public class WebReviewSqlMapDAO extends SqlSessionDaoSupport {
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private SqlSessionTemplate sqlSessionTemplate;
|
||||||
|
|
||||||
|
@PostConstruct
|
||||||
|
void init() {
|
||||||
|
setSqlSessionTemplate(sqlSessionTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 전체 건수 조회
|
||||||
|
*/
|
||||||
|
public Map<String, Object> selectTotalProcedureReviewCount(HashMap<String, Object> paramMap)
|
||||||
|
throws DataAccessException {
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectTotalProcedureReviewCount START");
|
||||||
|
String sqlId = "WebReview.selectTotalProcedureReviewCount";
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectTotalProcedureReviewCount END");
|
||||||
|
return getSqlSession().selectOne(sqlId, paramMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 리스트 조회
|
||||||
|
*/
|
||||||
|
public List<Map<String, Object>> selectListProcedureReview(HashMap<String, Object> paramMap)
|
||||||
|
throws DataAccessException {
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectListProcedureReview START");
|
||||||
|
String sqlId = "WebReview.selectListProcedureReview";
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectListProcedureReview END");
|
||||||
|
return getSqlSession().selectList(sqlId, paramMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 상세 조회
|
||||||
|
*/
|
||||||
|
public Map<String, Object> selectProcedureReview(HashMap<String, Object> paramMap)
|
||||||
|
throws DataAccessException {
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectProcedureReview START");
|
||||||
|
String sqlId = "WebReview.selectProcedureReview";
|
||||||
|
logger.debug("WebReviewSqlMapDAO selectProcedureReview END");
|
||||||
|
return getSqlSession().selectOne(sqlId, paramMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 조회수 증가
|
||||||
|
*/
|
||||||
|
public void updateViewCount(HashMap<String, Object> paramMap)
|
||||||
|
throws DataAccessException {
|
||||||
|
logger.debug("WebReviewSqlMapDAO updateViewCount START");
|
||||||
|
String sqlId = "WebReview.updateViewCount";
|
||||||
|
getSqlSession().update(sqlId, paramMap);
|
||||||
|
logger.debug("WebReviewSqlMapDAO updateViewCount END");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
package com.madeuhome.service.web.webreview;
|
||||||
|
|
||||||
|
import java.util.HashMap;
|
||||||
|
|
||||||
|
public interface WebReviewService {
|
||||||
|
public HashMap<String, Object> selectListProcedureReview(HashMap<String, Object> paramMap) throws Exception;
|
||||||
|
|
||||||
|
public HashMap<String, Object> selectProcedureReview(HashMap<String, Object> paramMap) throws Exception;
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
package com.madeuhome.service.web.webreview.impl;
|
||||||
|
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.stereotype.Service;
|
||||||
|
|
||||||
|
import com.madeuhome.constants.Constants;
|
||||||
|
import com.madeuhome.dao.web.webreview.WebReviewSqlMapDAO;
|
||||||
|
import com.madeuhome.service.web.webreview.WebReviewService;
|
||||||
|
|
||||||
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
|
||||||
|
@Slf4j
|
||||||
|
@Service("WebReviewService")
|
||||||
|
public class WebReviewServiceImpl implements WebReviewService {
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private WebReviewSqlMapDAO webReviewSqlMapDAO;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 리스트 조회
|
||||||
|
*/
|
||||||
|
@Override
|
||||||
|
public HashMap<String, Object> selectListProcedureReview(HashMap<String, Object> paramMap) throws Exception {
|
||||||
|
log.debug("WebReviewServiceImpl selectListProcedureReview START");
|
||||||
|
|
||||||
|
HashMap<String, Object> map = new HashMap<String, Object>();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 전체 건수 조회
|
||||||
|
Map<String, Object> totalMap = webReviewSqlMapDAO.selectTotalProcedureReviewCount(paramMap);
|
||||||
|
map.put("totalCount", totalMap.get("totalCount"));
|
||||||
|
|
||||||
|
// 리스트 조회
|
||||||
|
List<Map<String, Object>> listMap = webReviewSqlMapDAO.selectListProcedureReview(paramMap);
|
||||||
|
map.put("rows", listMap);
|
||||||
|
|
||||||
|
map.put("msgCode", Constants.OK);
|
||||||
|
map.put("success", "true");
|
||||||
|
|
||||||
|
} catch (Exception e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug("WebReviewServiceImpl selectListProcedureReview END");
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시술후기 상세 조회
|
||||||
|
*/
|
||||||
|
@Override
|
||||||
|
public HashMap<String, Object> selectProcedureReview(HashMap<String, Object> paramMap) throws Exception {
|
||||||
|
log.debug("WebReviewServiceImpl selectProcedureReview START");
|
||||||
|
|
||||||
|
HashMap<String, Object> map = new HashMap<String, Object>();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 조회수 증가
|
||||||
|
webReviewSqlMapDAO.updateViewCount(paramMap);
|
||||||
|
|
||||||
|
// 상세 조회
|
||||||
|
Map<String, Object> detailMap = webReviewSqlMapDAO.selectProcedureReview(paramMap);
|
||||||
|
map.put("rows", detailMap);
|
||||||
|
|
||||||
|
map.put("msgCode", Constants.OK);
|
||||||
|
map.put("success", "true");
|
||||||
|
|
||||||
|
} catch (Exception e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug("WebReviewServiceImpl selectProcedureReview END");
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
}
|
||||||
68
src/main/resources/mappers/WebReviewSqlMap.xml
Normal file
68
src/main/resources/mappers/WebReviewSqlMap.xml
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||||
|
<mapper namespace="WebReview">
|
||||||
|
|
||||||
|
<!-- 시술후기 전체 건수 조회 -->
|
||||||
|
<select id="selectTotalProcedureReviewCount" parameterType="hashmap" resultType="hashmap">
|
||||||
|
SELECT COUNT(*) AS "totalCount"
|
||||||
|
FROM MU_PROCEDURE_REVIEW MPR
|
||||||
|
WHERE MPR.USE_YN = 'Y'
|
||||||
|
AND MPR.CATEGORY_DIV_CD = #{categoryDivCd}
|
||||||
|
<if test="title != null and title != ''">
|
||||||
|
AND MPR.TITLE LIKE CONCAT('%', TRIM(#{title}), '%')
|
||||||
|
</if>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- 시술후기 리스트 조회 -->
|
||||||
|
<select id="selectListProcedureReview" parameterType="hashmap" resultType="hashmap">
|
||||||
|
SELECT MPR.*
|
||||||
|
FROM (
|
||||||
|
SELECT MPR.*
|
||||||
|
,CAST(@RNUM:=@RNUM + 1 AS CHAR) AS "rowNum"
|
||||||
|
FROM (
|
||||||
|
SELECT MPR.MU_PROCEDURE_REVIEW_ID AS "muProcedureReviewId"
|
||||||
|
,MPR.CATEGORY_DIV_CD AS "categoryDivCd"
|
||||||
|
,MPR.TITLE AS "title"
|
||||||
|
,MPR.CONTENT AS "summary"
|
||||||
|
,MPR.HASHTAG AS "hashtag"
|
||||||
|
,MPR.VIEW_COUNT AS "viewCount"
|
||||||
|
,DATE_FORMAT(MPR.REG_DATE, '%Y-%m-%d') AS "writeDate"
|
||||||
|
FROM MU_PROCEDURE_REVIEW MPR
|
||||||
|
WHERE MPR.USE_YN = 'Y'
|
||||||
|
AND MPR.CATEGORY_DIV_CD = #{categoryDivCd}
|
||||||
|
<if test="title != null and title != ''">
|
||||||
|
AND MPR.TITLE LIKE CONCAT('%', TRIM(#{title}), '%')
|
||||||
|
</if>
|
||||||
|
ORDER BY MPR.REG_DATE DESC
|
||||||
|
LIMIT 18446744073709551615
|
||||||
|
) MPR, (SELECT @RNUM:=0) R
|
||||||
|
WHERE 1 = 1
|
||||||
|
) MPR
|
||||||
|
WHERE 1 = 1
|
||||||
|
LIMIT ${start}, ${limit}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- 시술후기 상세 조회 -->
|
||||||
|
<select id="selectProcedureReview" parameterType="hashmap" resultType="hashmap">
|
||||||
|
SELECT MPR.MU_PROCEDURE_REVIEW_ID AS "muProcedureReviewId"
|
||||||
|
,MPR.CATEGORY_DIV_CD AS "categoryDivCd"
|
||||||
|
,MPR.TITLE AS "title"
|
||||||
|
,MPR.CONTENT AS "content"
|
||||||
|
,MPR.HASHTAG AS "hashtag"
|
||||||
|
,MPR.VIEW_COUNT AS "viewCount"
|
||||||
|
,DATE_FORMAT(MPR.REG_DATE, '%Y-%m-%d') AS "writeDate"
|
||||||
|
FROM MU_PROCEDURE_REVIEW MPR
|
||||||
|
WHERE MPR.USE_YN = 'Y'
|
||||||
|
AND MPR.MU_PROCEDURE_REVIEW_ID = #{muProcedureReviewId}
|
||||||
|
LIMIT 0, 1
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- 조회수 증가 -->
|
||||||
|
<update id="updateViewCount" parameterType="hashmap">
|
||||||
|
UPDATE MU_PROCEDURE_REVIEW
|
||||||
|
SET VIEW_COUNT = IFNULL(VIEW_COUNT, 0) + 1
|
||||||
|
WHERE USE_YN = 'Y'
|
||||||
|
AND MU_PROCEDURE_REVIEW_ID = #{muProcedureReviewId}
|
||||||
|
</update>
|
||||||
|
|
||||||
|
</mapper>
|
||||||
@@ -0,0 +1,255 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #1a1a1a;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: calc(100vh - 300px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 브레드크럼 */
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a {
|
||||||
|
color: #6b7280;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a:hover {
|
||||||
|
color: #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 게시글 */
|
||||||
|
.review-article {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-header {
|
||||||
|
padding: 2rem 2rem 1.5rem;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-title {
|
||||||
|
font-size: clamp(1.375rem, 3vw, 1.75rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background: rgba(198, 11, 36, 0.08);
|
||||||
|
color: #C60B24;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quill 에디터 본문 */
|
||||||
|
.review-content {
|
||||||
|
padding: 2rem;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content p {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content h1,
|
||||||
|
.review-content h2,
|
||||||
|
.review-content h3 {
|
||||||
|
margin: 1.5rem 0 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content blockquote {
|
||||||
|
border-left: 4px solid #C60B24;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content ul,
|
||||||
|
.review-content ol {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content li {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
list-style: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quill 에디터 특수 클래스 */
|
||||||
|
.ql-editor .ql-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-align-justify {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-indent-1 {
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-indent-2 {
|
||||||
|
padding-left: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-indent-3 {
|
||||||
|
padding-left: 9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-size-small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-size-large {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-size-huge {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-font-serif {
|
||||||
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor .ql-font-monospace {
|
||||||
|
font-family: 'Monaco', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 목록 버튼 */
|
||||||
|
.btn-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-list {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.75rem 2.5rem;
|
||||||
|
background: white;
|
||||||
|
color: #1a1a1a;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-list:hover {
|
||||||
|
border-color: #C60B24;
|
||||||
|
color: #C60B24;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 로딩 */
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 반응형 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-header {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-meta {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-content {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,412 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #1a1a1a;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 메인 컨테이너 */
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: calc(100vh - 300px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 상단 헤더 */
|
||||||
|
.header {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
border-bottom: 3px solid #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 1.875rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-subtitle {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #6b7280;
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 검색 영역 */
|
||||||
|
.search-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
width: 280px;
|
||||||
|
padding: 0.625rem 1rem;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input:focus {
|
||||||
|
border-color: #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
padding: 0.625rem 1.25rem;
|
||||||
|
background: #C60B24;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn:hover {
|
||||||
|
background: #a5091e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 시술후기 그리드 */
|
||||||
|
.review-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 카드 */
|
||||||
|
.review-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #f1f5f9;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||||
|
border-color: #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 이미지 슬라이더 ===== */
|
||||||
|
.review-slider {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-slider-track {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-slider-track img {
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 슬라이더 화살표 */
|
||||||
|
.slider-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
z-index: 2;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-slider:hover .slider-arrow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-arrow.prev {
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-arrow.next {
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-arrow:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 슬라이더 도트 */
|
||||||
|
.slider-dots {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-dot.active {
|
||||||
|
background: white;
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 이미지 카운트 뱃지 */
|
||||||
|
.slider-count {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
color: white;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 이미지 없을 때 */
|
||||||
|
.review-no-image {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 카드 바디 */
|
||||||
|
.review-card-body {
|
||||||
|
padding: 1.25rem 1.5rem 1.5rem;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-title {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-summary {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
flex: 1;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.375rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
background: rgba(198, 11, 36, 0.08);
|
||||||
|
color: #C60B24;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-footer .views {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 페이지네이션 */
|
||||||
|
.pagination-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 1rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #6b7280;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:hover {
|
||||||
|
border-color: #C60B24;
|
||||||
|
color: #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #C60B24;
|
||||||
|
color: white;
|
||||||
|
border-color: #C60B24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 로딩 & 빈상태 */
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state .icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state .message {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 반응형 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-area {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-arrow {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card-body {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/main/resources/static/image/equip/온다리프팅.jpg
Normal file
BIN
src/main/resources/static/image/equip/온다리프팅.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/main/resources/static/image/quick_menu/review.png
Normal file
BIN
src/main/resources/static/image/quick_menu/review.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,117 @@
|
|||||||
|
class ReviewDetailManager {
|
||||||
|
constructor() {
|
||||||
|
this.quill = null;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
if (!muProcedureReviewId) {
|
||||||
|
this.showError('잘못된 접근입니다.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await this.loadReview();
|
||||||
|
}
|
||||||
|
|
||||||
|
async apiRequest(url, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
$.ajax({
|
||||||
|
url: encodeURI(url),
|
||||||
|
data: data,
|
||||||
|
dataType: 'json',
|
||||||
|
processData: false,
|
||||||
|
contentType: false,
|
||||||
|
type: 'POST',
|
||||||
|
success: resolve,
|
||||||
|
error: reject
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadReview() {
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('muProcedureReviewId', muProcedureReviewId);
|
||||||
|
|
||||||
|
const data = await this.apiRequest('/webreview/selectProcedureReview.do', formData);
|
||||||
|
|
||||||
|
if (data.msgCode === '0' && data.rows) {
|
||||||
|
this.renderReview(data.rows);
|
||||||
|
} else {
|
||||||
|
this.showError('게시글을 찾을 수 없습니다.');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.showError('게시글 조회 중 오류가 발생하였습니다.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderReview(review) {
|
||||||
|
// 제목
|
||||||
|
document.getElementById('review-title').textContent = review.title || '';
|
||||||
|
document.getElementById('breadcrumb-title').textContent = review.title || '상세보기';
|
||||||
|
|
||||||
|
// 메타 정보
|
||||||
|
document.getElementById('review-date').textContent = review.writeDate || '';
|
||||||
|
document.getElementById('review-views').textContent = review.viewCount || 0;
|
||||||
|
|
||||||
|
// 해시태그
|
||||||
|
const tagsContainer = document.getElementById('review-tags');
|
||||||
|
if (review.hashtag) {
|
||||||
|
const tags = review.hashtag.split(',').map(t => t.trim()).filter(t => t);
|
||||||
|
tagsContainer.innerHTML = tags.map(tag =>
|
||||||
|
`<span class="review-tag">#${tag}</span>`
|
||||||
|
).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Quill Delta JSON 본문 렌더링
|
||||||
|
const contentDiv = document.getElementById('review-content');
|
||||||
|
if (review.content) {
|
||||||
|
try {
|
||||||
|
// Base64 디코딩
|
||||||
|
const decoded = decodeURIComponent(escape(atob(review.content)));
|
||||||
|
const delta = JSON.parse(decoded);
|
||||||
|
|
||||||
|
// Quill read-only 모드로 렌더링
|
||||||
|
contentDiv.innerHTML = ''; // 로딩 메시지 제거
|
||||||
|
this.quill = new Quill(contentDiv, {
|
||||||
|
readOnly: true,
|
||||||
|
modules: { toolbar: false },
|
||||||
|
theme: 'snow'
|
||||||
|
});
|
||||||
|
this.quill.setContents(delta);
|
||||||
|
|
||||||
|
// 툴바 숨기기 (snow 테마 기본 요소)
|
||||||
|
const toolbar = contentDiv.parentElement.querySelector('.ql-toolbar');
|
||||||
|
if (toolbar) toolbar.style.display = 'none';
|
||||||
|
|
||||||
|
// 에디터 테두리 제거
|
||||||
|
const container = contentDiv.parentElement.querySelector('.ql-container');
|
||||||
|
if (container) {
|
||||||
|
container.style.border = 'none';
|
||||||
|
container.style.fontSize = '16px';
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
// Delta 파싱 실패 시 HTML로 시도
|
||||||
|
try {
|
||||||
|
const html = decodeURIComponent(escape(atob(review.content)));
|
||||||
|
contentDiv.innerHTML = html;
|
||||||
|
} catch (e2) {
|
||||||
|
contentDiv.innerHTML = review.content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
contentDiv.innerHTML = '<p style="color: #9ca3af; text-align: center;">내용이 없습니다.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showError(msg) {
|
||||||
|
document.getElementById('review-content').innerHTML = `
|
||||||
|
<div style="text-align: center; padding: 3rem; color: #6b7280;">
|
||||||
|
<div style="font-size: 2rem; margin-bottom: 1rem;">😔</div>
|
||||||
|
<div>${msg}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const reviewDetailManager = new ReviewDetailManager();
|
||||||
@@ -0,0 +1,259 @@
|
|||||||
|
class ReviewListManager {
|
||||||
|
constructor() {
|
||||||
|
this.reviews = [];
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.pageSize = 9;
|
||||||
|
this.totalCount = 0;
|
||||||
|
this.categoryDivCd = '07'; // 다이어트센터
|
||||||
|
this.sliders = {};
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
this.bindEvents();
|
||||||
|
await this.loadReviews();
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
|
document.getElementById('btnSearch').addEventListener('click', () => {
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.loadReviews();
|
||||||
|
});
|
||||||
|
document.getElementById('searchTitle').addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter') { this.currentPage = 1; this.loadReviews(); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async apiRequest(url, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
$.ajax({
|
||||||
|
url: encodeURI(url), data: data, dataType: 'json',
|
||||||
|
processData: false, contentType: false, type: 'POST',
|
||||||
|
success: resolve, error: reject
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadReviews() {
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('categoryDivCd', this.categoryDivCd);
|
||||||
|
formData.append('start', (this.currentPage - 1) * this.pageSize);
|
||||||
|
formData.append('limit', this.pageSize);
|
||||||
|
|
||||||
|
const searchTitle = document.getElementById('searchTitle').value.trim();
|
||||||
|
if (searchTitle) formData.append('title', searchTitle);
|
||||||
|
|
||||||
|
const data = await this.apiRequest('/webreview/selectListProcedureReview.do', formData);
|
||||||
|
if (data.msgCode === '0') {
|
||||||
|
this.reviews = data.rows || [];
|
||||||
|
this.totalCount = parseInt(data.totalCount) || 0;
|
||||||
|
this.renderReviews();
|
||||||
|
this.renderPagination();
|
||||||
|
} else {
|
||||||
|
this.showEmpty('조회 중 오류가 발생하였습니다.');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.showEmpty('조회 중 오류가 발생하였습니다.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Delta JSON에서 이미지 URL 배열 추출 */
|
||||||
|
extractImages(content) {
|
||||||
|
if (!content) return [];
|
||||||
|
try {
|
||||||
|
const decoded = decodeURIComponent(escape(atob(content)));
|
||||||
|
const delta = JSON.parse(decoded);
|
||||||
|
if (delta.ops) {
|
||||||
|
return delta.ops
|
||||||
|
.filter(op => op.insert && typeof op.insert === 'object' && op.insert.image)
|
||||||
|
.map(op => op.insert.image);
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
} catch (e) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Delta JSON에서 텍스트 요약 추출 */
|
||||||
|
extractSummary(content) {
|
||||||
|
if (!content) return '';
|
||||||
|
try {
|
||||||
|
const decoded = decodeURIComponent(escape(atob(content)));
|
||||||
|
const delta = JSON.parse(decoded);
|
||||||
|
if (delta.ops) {
|
||||||
|
const text = delta.ops
|
||||||
|
.filter(op => typeof op.insert === 'string')
|
||||||
|
.map(op => op.insert).join('').replace(/\n/g, ' ').trim();
|
||||||
|
return text.length > 100 ? text.substring(0, 100) + '...' : text;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
} catch (e) { return ''; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 이미지 슬라이더 HTML 생성 */
|
||||||
|
buildSliderHtml(images, cardIdx) {
|
||||||
|
if (images.length === 0) {
|
||||||
|
return '<div class="review-no-image">📷</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
const sliderId = `slider-${cardIdx}`;
|
||||||
|
const imagesHtml = images.map(src =>
|
||||||
|
`<img src="${src}" alt="고객후기" loading="lazy" />`
|
||||||
|
).join('');
|
||||||
|
|
||||||
|
// 도트 인디케이터
|
||||||
|
const dotsHtml = images.length > 1
|
||||||
|
? `<div class="slider-dots">${images.map((_, i) =>
|
||||||
|
`<button class="slider-dot ${i === 0 ? 'active' : ''}" data-idx="${i}"></button>`
|
||||||
|
).join('')}</div>` : '';
|
||||||
|
|
||||||
|
// 화살표
|
||||||
|
const arrowsHtml = images.length > 1
|
||||||
|
? `<button class="slider-arrow prev" data-dir="-1">‹</button>
|
||||||
|
<button class="slider-arrow next" data-dir="1">›</button>` : '';
|
||||||
|
|
||||||
|
// 이미지 카운트
|
||||||
|
const countHtml = images.length > 1
|
||||||
|
? `<span class="slider-count">1 / ${images.length}</span>` : '';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="review-slider" data-slider-id="${sliderId}" data-total="${images.length}" data-current="0">
|
||||||
|
<div class="review-slider-track">${imagesHtml}</div>
|
||||||
|
${arrowsHtml}
|
||||||
|
${dotsHtml}
|
||||||
|
${countHtml}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderReviews() {
|
||||||
|
const grid = document.getElementById('review-grid');
|
||||||
|
|
||||||
|
if (this.reviews.length === 0) {
|
||||||
|
grid.innerHTML = `<div class="empty-state"><div class="icon">📝</div><div class="message">등록된 고객후기가 없습니다.</div></div>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
grid.innerHTML = this.reviews.map((review, idx) => {
|
||||||
|
const images = this.extractImages(review.summary || review.content);
|
||||||
|
const summaryText = this.extractSummary(review.summary || review.content);
|
||||||
|
const sliderHtml = this.buildSliderHtml(images, idx);
|
||||||
|
|
||||||
|
let tagsHtml = '';
|
||||||
|
if (review.hashtag) {
|
||||||
|
const tags = review.hashtag.split(',').map(t => t.trim()).filter(t => t);
|
||||||
|
tagsHtml = `<div class="review-card-tags">${tags.slice(0, 3).map(tag =>
|
||||||
|
`<span class="review-tag">#${tag}</span>`).join('')}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="review-card" data-id="${review.muProcedureReviewId}">
|
||||||
|
${sliderHtml}
|
||||||
|
<div class="review-card-body">
|
||||||
|
<div class="review-card-title">${this.escapeHtml(review.title)}</div>
|
||||||
|
<div class="review-card-summary">${summaryText}</div>
|
||||||
|
${tagsHtml}
|
||||||
|
<div class="review-card-footer">
|
||||||
|
<span class="date">${review.writeDate}</span>
|
||||||
|
<span class="views">👁 ${review.viewCount || 0}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
// 슬라이더 이벤트 바인딩
|
||||||
|
this.bindSliderEvents();
|
||||||
|
|
||||||
|
// 카드 클릭 이벤트 (슬라이더 요소 클릭 제외)
|
||||||
|
grid.querySelectorAll('.review-card').forEach(card => {
|
||||||
|
card.addEventListener('click', (e) => {
|
||||||
|
// 슬라이더 화살표나 도트 클릭 시 이동 방지
|
||||||
|
if (e.target.closest('.slider-arrow') || e.target.closest('.slider-dot')) return;
|
||||||
|
const id = card.dataset.id;
|
||||||
|
location.href = `/webreview/selectProcedureReviewIntro.do?muProcedureReviewId=${id}`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 슬라이더 이벤트 바인딩 */
|
||||||
|
bindSliderEvents() {
|
||||||
|
document.querySelectorAll('.review-slider').forEach(slider => {
|
||||||
|
const total = parseInt(slider.dataset.total);
|
||||||
|
if (total <= 1) return;
|
||||||
|
|
||||||
|
const track = slider.querySelector('.review-slider-track');
|
||||||
|
const dots = slider.querySelectorAll('.slider-dot');
|
||||||
|
const countEl = slider.querySelector('.slider-count');
|
||||||
|
|
||||||
|
const goTo = (idx) => {
|
||||||
|
const current = Math.max(0, Math.min(idx, total - 1));
|
||||||
|
slider.dataset.current = current;
|
||||||
|
track.style.transform = `translateX(-${current * 100}%)`;
|
||||||
|
|
||||||
|
dots.forEach((d, i) => d.classList.toggle('active', i === current));
|
||||||
|
if (countEl) countEl.textContent = `${current + 1} / ${total}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 화살표 클릭
|
||||||
|
slider.querySelectorAll('.slider-arrow').forEach(arrow => {
|
||||||
|
arrow.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const dir = parseInt(arrow.dataset.dir);
|
||||||
|
let next = parseInt(slider.dataset.current) + dir;
|
||||||
|
if (next < 0) next = total - 1;
|
||||||
|
if (next >= total) next = 0;
|
||||||
|
goTo(next);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 도트 클릭
|
||||||
|
dots.forEach(dot => {
|
||||||
|
dot.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goTo(parseInt(dot.dataset.idx));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPagination() {
|
||||||
|
const area = document.getElementById('pagination-area');
|
||||||
|
const totalPages = Math.ceil(this.totalCount / this.pageSize);
|
||||||
|
if (totalPages <= 1) { area.innerHTML = ''; return; }
|
||||||
|
|
||||||
|
let html = `<button class="page-btn ${this.currentPage === 1 ? 'disabled' : ''}"
|
||||||
|
data-page="${this.currentPage - 1}" ${this.currentPage === 1 ? 'disabled' : ''}>‹</button>`;
|
||||||
|
const startPage = Math.max(1, this.currentPage - 2);
|
||||||
|
const endPage = Math.min(totalPages, startPage + 4);
|
||||||
|
for (let i = startPage; i <= endPage; i++) {
|
||||||
|
html += `<button class="page-btn ${i === this.currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
|
||||||
|
}
|
||||||
|
html += `<button class="page-btn ${this.currentPage === totalPages ? 'disabled' : ''}"
|
||||||
|
data-page="${this.currentPage + 1}" ${this.currentPage === totalPages ? 'disabled' : ''}>›</button>`;
|
||||||
|
area.innerHTML = html;
|
||||||
|
|
||||||
|
area.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
this.currentPage = parseInt(btn.dataset.page);
|
||||||
|
this.loadReviews();
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showEmpty(msg) {
|
||||||
|
document.getElementById('review-grid').innerHTML = `
|
||||||
|
<div class="empty-state"><div class="icon">⚠️</div><div class="message">${msg}</div></div>`;
|
||||||
|
document.getElementById('pagination-area').innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
escapeHtml(str) {
|
||||||
|
if (!str) return '';
|
||||||
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"').replace(/'/g, ''');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const reviewListManager = new ReviewListManager();
|
||||||
@@ -1,8 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!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/layout}">
|
||||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
||||||
layout:decorate="~{/web/layout/layout}">
|
|
||||||
<th:block layout:fragment="layoutCss">
|
<th:block layout:fragment="layoutCss">
|
||||||
<link rel="stylesheet" href="/css/web/introduction/introductionHospitalSelect.css?v1.0">
|
<link rel="stylesheet" href="/css/web/introduction/introductionHospitalSelect.css?v1.0">
|
||||||
</th:block>
|
</th:block>
|
||||||
@@ -87,7 +85,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">써마지</h3>
|
<h3 class="equipment-name">써마지</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 1,800,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 1,800,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -98,7 +96,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">울쎄라</h3>
|
<h3 class="equipment-name">울쎄라</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,18 +107,27 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">티타늄리프팅</h3>
|
<h3 class="equipment-name">티타늄리프팅</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 600,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 600,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="equipment-card">
|
||||||
|
<div class="equipment-image">
|
||||||
|
<img src="/image/equip/온다리프팅.jpg" alt="온다리프팅">
|
||||||
|
</div>
|
||||||
|
<div class="equipment-info">
|
||||||
|
<h3 class="equipment-name">온다리프팅</h3>
|
||||||
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
|
<!-- <p class="equipment-price">165,000<span>부터</span></p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="equipment-card">
|
<div class="equipment-card">
|
||||||
<div class="equipment-image">
|
<div class="equipment-image">
|
||||||
<img src="/image/equip/튠바디.jpg" alt="튠바디">
|
<img src="/image/equip/튠바디.jpg" alt="튠바디">
|
||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">튠바디</h3>
|
<h3 class="equipment-name">튠바디</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,7 +139,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">튠페이스</h3>
|
<h3 class="equipment-name">튠페이스</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -143,7 +150,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">울핏</h3>
|
<h3 class="equipment-name">울핏</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -154,7 +161,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">포텐자</h3>
|
<h3 class="equipment-name">포텐자</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -165,7 +172,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">인모드</h3>
|
<h3 class="equipment-name">인모드</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -177,7 +184,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">슈링크유니버스</h3>
|
<h3 class="equipment-name">슈링크유니버스</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 89,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 89,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -188,7 +195,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">바디고주파테라피</h3>
|
<h3 class="equipment-name">바디고주파테라피</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -199,21 +206,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="equipment-info">
|
<div class="equipment-info">
|
||||||
<h3 class="equipment-name">리포덤</h3>
|
<h3 class="equipment-name">리포덤</h3>
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
<!-- <p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p> -->
|
||||||
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
|
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="equipment-card">
|
|
||||||
<div class="equipment-image">
|
|
||||||
<img src="/image/equip/라비앙.jpg" alt="라비앙">
|
|
||||||
</div>
|
|
||||||
<div class="equipment-info">
|
|
||||||
<h3 class="equipment-name">라비앙</h3>
|
|
||||||
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
|
|
||||||
<p class="equipment-price"><!-- 165,000<span>부터</span> --></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -246,7 +244,8 @@
|
|||||||
<li class="red_box">
|
<li class="red_box">
|
||||||
<div class="text_box">
|
<div class="text_box">
|
||||||
<p>
|
<p>
|
||||||
<span>고객을 가족으로 생각하는 마음으로<br class="pc"/>정직한 시술, <br class="mb"/>만족할 수 있는 결과,</span><br/>
|
<span>고객을 가족으로 생각하는 마음으로<br class="pc" />정직한 시술, <br class="mb" />만족할 수 있는
|
||||||
|
결과,</span><br />
|
||||||
더 나은 감동을 선사하기 위해<br />
|
더 나은 감동을 선사하기 위해<br />
|
||||||
끊임없이 노력하겠습니다.
|
끊임없이 노력하겠습니다.
|
||||||
</p>
|
</p>
|
||||||
@@ -287,4 +286,5 @@
|
|||||||
</th:block>
|
</th:block>
|
||||||
<th:block layout:fragment="layoutContentScript">
|
<th:block layout:fragment="layoutContentScript">
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -21,6 +21,10 @@
|
|||||||
window.location.href = "https://diet.madeu.co.kr/webevent/selectListWebEventIntro.do";
|
window.location.href = "https://diet.madeu.co.kr/webevent/selectListWebEventIntro.do";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function moveReview() {
|
||||||
|
window.location.href = "https://diet.madeu.co.kr/webreview/selectListWebReviewIntro.do";
|
||||||
|
}
|
||||||
|
|
||||||
// 전화걸기 함수 (모바일에서만 동작)
|
// 전화걸기 함수 (모바일에서만 동작)
|
||||||
function makePhoneCall() {
|
function makePhoneCall() {
|
||||||
if (isMobileDevice()) {
|
if (isMobileDevice()) {
|
||||||
@@ -80,6 +84,9 @@
|
|||||||
</header>
|
</header>
|
||||||
<!-- 퀵메뉴 -->
|
<!-- 퀵메뉴 -->
|
||||||
<div class="quick-menu-simple">
|
<div class="quick-menu-simple">
|
||||||
|
<div class="quick-item" onclick="moveReview()">
|
||||||
|
<img src="/image/quick_menu/review.png" alt="고객후기">
|
||||||
|
</div>
|
||||||
<div class="quick-item" onclick="moveEvent()">
|
<div class="quick-item" onclick="moveEvent()">
|
||||||
<img src="/image/quick_menu/event.png" alt="이벤트">
|
<img src="/image/quick_menu/event.png" alt="이벤트">
|
||||||
</div>
|
</div>
|
||||||
@@ -103,4 +110,5 @@
|
|||||||
</div>
|
</div>
|
||||||
<script src="/js/web/layout/layoutHeader.js?ver=1"></script>
|
<script src="/js/web/layout/layoutHeader.js?ver=1"></script>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
<!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}">
|
||||||
|
<th:block layout:fragment="layoutCss">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" th:href="@{/css/web/webreview/procedureReviewSelect.css}" />
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block layout:fragment="layout_top_script">
|
||||||
|
<script th:inline="javascript">
|
||||||
|
const muProcedureReviewId = [[${ muProcedureReviewId }]];
|
||||||
|
const CDN_URL = [[${@environment.getProperty('url.cdn') }]];
|
||||||
|
</script>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block layout:fragment="layoutContent">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 상단 네비게이션 -->
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a href="/webreview/selectListProcedureReviewIntro.do">고객후기</a>
|
||||||
|
<span>></span>
|
||||||
|
<span id="breadcrumb-title">상세보기</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 게시글 컨텐츠 -->
|
||||||
|
<article class="review-article">
|
||||||
|
<div class="review-header">
|
||||||
|
<h1 class="review-title" id="review-title"></h1>
|
||||||
|
<div class="review-meta">
|
||||||
|
<span class="review-date" id="review-date"></span>
|
||||||
|
<span class="review-views">조회 <span id="review-views">0</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="review-tags" id="review-tags"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quill 에디터 본문 -->
|
||||||
|
<div class="review-content" id="review-content">
|
||||||
|
<div class="loading">게시글을 불러오는 중...</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- 목록 버튼 -->
|
||||||
|
<div class="btn-area">
|
||||||
|
<a href="/webreview/selectListProcedureReviewIntro.do" class="btn-list">목록으로</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block layout:fragment="layoutContentScript">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
||||||
|
<script th:src="@{/js/web/webreview/procedureReviewSelect.js}"></script>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
<!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}">
|
||||||
|
<th:block layout:fragment="layoutCss">
|
||||||
|
<link rel="stylesheet" th:href="@{/css/web/webreview/procedureReviewSelectList.css}" />
|
||||||
|
</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="layoutContent">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 상단 헤더 -->
|
||||||
|
<div class="header">
|
||||||
|
<h1 class="page-title">고객후기</h1>
|
||||||
|
<p class="page-subtitle">실제 고객님들의 생생한 후기를 확인하세요</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 검색 영역 -->
|
||||||
|
<div class="search-area">
|
||||||
|
<div class="search-box">
|
||||||
|
<input type="text" id="searchTitle" placeholder="제목으로 검색" />
|
||||||
|
<button id="btnSearch" class="search-btn">검색</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 시술후기 카드 리스트 -->
|
||||||
|
<div class="review-grid" id="review-grid">
|
||||||
|
<div class="loading">고객후기를 불러오는 중...</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 페이지네이션 -->
|
||||||
|
<div class="pagination-area" id="pagination-area"></div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block layout:fragment="layoutContentScript">
|
||||||
|
<script th:src="@{/js/web/webreview/procedureReviewSelectList.js}"></script>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user