사이드바 상태 세션 저장 후 사용
박성영
5 months ago
parent
9f49ccfc0a
commit
fdd7908e4e
@ -1,20 +1,56 @@
|
||||
package go.kr.project.common.controller;
|
||||
|
||||
import go.kr.project.common.service.CommonHeaderService;
|
||||
import io.swagger.v3.oas.annotations.Operation;
|
||||
import io.swagger.v3.oas.annotations.Parameter;
|
||||
import io.swagger.v3.oas.annotations.tags.Tag;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
|
||||
import javax.servlet.http.HttpSession;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
|
||||
@RequestMapping("/common/header")
|
||||
@Controller
|
||||
@RequiredArgsConstructor
|
||||
@Slf4j
|
||||
@Tag(name = "공통 일정", description = "공통 일정 관련 API")
|
||||
@Tag(name = "공통 헤더", description = "공통 헤더 관련 API")
|
||||
public class CommonHeaderController {
|
||||
|
||||
private final CommonHeaderService commonHeaderService;
|
||||
|
||||
|
||||
/**
|
||||
* 사이드바 상태를 세션에 저장하는 API
|
||||
*
|
||||
* @param state 사이드바 상태 (collapsed, expanded, 또는 빈 문자열)
|
||||
* @param session HTTP 세션 객체
|
||||
* @return 응답 데이터
|
||||
*/
|
||||
@PostMapping("/sidebar/state.ajax")
|
||||
@ResponseBody
|
||||
@Operation(summary = "사이드바 상태 저장", description = "사이드바 상태를 세션에 저장합니다.")
|
||||
public ResponseEntity<Map<String, Object>> saveSidebarState(
|
||||
@Parameter(description = "사이드바 상태 (sidebar-collapse, 또는 빈 문자열)")
|
||||
@RequestParam(value = "state", required = false, defaultValue = "") String state,
|
||||
HttpSession session) {
|
||||
|
||||
// 세션에 사이드바 상태 저장
|
||||
session.setAttribute("sidebarState", state);
|
||||
|
||||
log.debug("사이드바 상태 저장: {}", state);
|
||||
|
||||
// 응답 데이터 구성
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("result", true);
|
||||
response.put("message", "사이드바 상태가 저장되었습니다.");
|
||||
|
||||
return ResponseEntity.ok(response);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,105 @@
|
||||
/* 사이드바 최적화를 위한 CSS */
|
||||
|
||||
/* 사이드바 하드웨어 가속 활성화 */
|
||||
.sidebar {
|
||||
will-change: transform, width;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 사이드바 배경 요소 최적화 */
|
||||
.sidebar-backdrop {
|
||||
will-change: opacity;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* 메인 콘텐츠 영역 최적화 */
|
||||
.main {
|
||||
will-change: margin-left;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* 사이드바 내부 요소 최적화 */
|
||||
.sidebar-body {
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* 사이드바 헤더 최적화 */
|
||||
.sidebar-header {
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* 사이드바 트랜지션 최적화 */
|
||||
@media (min-width: 992px) {
|
||||
body .sidebar {
|
||||
transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
body .main {
|
||||
transition: margin-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
body .sidebar {
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.sidebar-backdrop {
|
||||
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
}
|
||||
|
||||
/* 사이드바 펼치기/접기 상태 최적화 */
|
||||
body.sidebar-collapse .sidebar {
|
||||
width: 60px !important;
|
||||
min-width: 60px !important;
|
||||
max-width: 60px !important;
|
||||
}
|
||||
|
||||
body.sidebar-collapse .main {
|
||||
margin-left: 60px !important;
|
||||
}
|
||||
|
||||
body.sidebar-expand .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 사이드바 초기 로드 시 깜박임 방지 */
|
||||
.sidebar-loading {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-loaded {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* 메뉴 아이템 최적화 */
|
||||
.nav-item {
|
||||
will-change: transform, opacity;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* 메뉴 아이콘 최적화 */
|
||||
.nav-icon {
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
Loading…
Reference in New Issue