회원탈퇴 팝업 UI 개선 및 관련 JS 이벤트 처리 추가

2026-03-05 15:24:37 +09:00
parent d22a1ad535
commit c1f584cbf1
6 changed files with 250 additions and 66 deletions
@@ -329,6 +329,149 @@ src/main/java/com/eactive/apim/portal/
 - `elink-portal-common`: 공통 유틸리티 (../elink-portal-common)
 - `kjb-safedb`: SafeDB 암호화 라이브러리 (../kjb-safedb)

+## SASS / CSS 스타일 개발
+
+### 개요
+
+이 프로젝트는 **Dart Sass**를 사용하여 CSS를 관리합니다.
+`src/main/resources/static/css/main.css`는 SASS에서 컴파일된 결과물이므로 **직접 수정하면 안 됩니다.**
+스타일 변경은 반드시 `src/main/resources/static/sass/` 하위 파일을 수정하세요.
+
+### 설치
+
+```bash
+# Node.js가 설치된 상태에서
+npm install
+```
+
+### 빌드 명령어
+
+```bash
+# 1회 컴파일 (개발용, 들여쓰기 유지)
+npm run sass:build
+
+# 1회 컴파일 (배포용, minified)
+npm run sass:build:minified
+
+# 파일 변경 감지 후 자동 컴파일 (개발 중 권장)
+npm run sass:watch
+
+# 빌드 + minified 동시 생성
+npm run build
+
+# 단축 스크립트 (npm 없이 sass 직접 실행)
+./sass-build.sh
+```
+
+### SASS 파일 구조
+
+```
+src/main/resources/static/sass/
+├── main.scss                  # 진입점 - 모든 파일을 @use로 조합
+│
+├── abstracts/                 # CSS 출력 없는 헬퍼 (변수, 믹스인 등)
+│   ├── _variables.scss        # 색상, 타이포그래피, 그림자 변수
+│   ├── _mixins.scss           # 재사용 믹스인
+│   └── _color-functions.scss  # Dart Sass 3.0 color 유틸리티
+│
+├── base/                      # 전역 기본 스타일
+│   ├── _reset.scss
+│   ├── _typography.scss
+│   ├── _animations.scss
+│   ├── _kjb-font.scss         # 광주은행 전용 폰트
+│   └── _utilities.scss        # 유틸리티 클래스
+│
+├── layout/                    # 페이지 레이아웃 구조
+│   ├── _header.scss
+│   ├── _footer.scss
+│   ├── _grid.scss
+│   └── _container.scss
+│
+├── components/                # 재사용 UI 컴포넌트
+│   ├── _buttons.scss
+│   ├── _forms.scss
+│   ├── _modals.scss           # customPopup 모달 스타일
+│   ├── _tables.scss
+│   ├── _badges.scss
+│   ├── _cards.scss
+│   ├── _navigation.scss
+│   ├── _pagination.scss
+│   └── ...
+│
+├── pages/                     # 페이지별 스타일
+│   ├── _mypage.scss
+│   ├── _login.scss
+│   ├── _apikey-list.scss
+│   └── ...
+│
+├── themes/
+│   └── _dark.scss             # 다크 테마 (예약)
+│
+└── vendors/
+    └── _overrides.scss        # 외부 라이브러리 스타일 덮어쓰기
+```
+
+### 새 스타일 추가하는 방법
+
+#### 1. 기존 컴포넌트/페이지 파일에 추가
+해당 `_*.scss` 파일을 직접 수정합니다.
+
+```scss
+// components/_buttons.scss 예시
+.btn-withdrawal {
+  color: $text-gray;
+  border: 1px solid $border-gray;
+
+  &:hover {
+    color: $accent-orange;
+  }
+}
+```
+
+#### 2. 새 페이지 스타일 파일 추가
+
+```bash
+# 1. 파일 생성 (언더스코어 접두사 필수)
+touch src/main/resources/static/sass/pages/_new-page.scss
+
+# 2. main.scss 에 @use 추가
+```
+
+```scss
+// main.scss 에 추가
+@use 'pages/new-page' as *;
+```
+
+#### 3. 변수 활용 예시
+
+```scss
+// abstracts/_variables.scss 에 정의된 변수 사용
+.my-component {
+  color: $primary-blue;          // #0049b4 (광주은행 블루)
+  background: $gray-bg;          // #F8FAFC
+  border: 1px solid $border-gray; // #E2E8F0
+  box-shadow: $shadow-md;
+  font-family: $font-family-primary;
+}
+```
+
+### 컴파일 결과 확인
+
+```bash
+# 컴파일 후 출력 파일 확인
+ls -lh src/main/resources/static/css/main.css
+ls -lh src/main/resources/static/css/main.min.css  # minified
+```
+
+### 주의사항
+
+- `src/main/resources/static/css/main.css` **직접 수정 금지** — SASS 재컴파일 시 덮어씌워짐
+- `style2.css` 는 레거시 파일(구 디자인 시스템)이며 `main.css` 와 **별도로 관리됨**
+- `@import` 대신 **`@use`** 사용 (Dart Sass 3.0 호환)
+- 파일명 앞에 언더스코어(`_`) 필수 — `_filename.scss` 형식이어야 단독 컴파일되지 않음
+
+---
+
 ## AI 코딩 어시스턴트 지침 파일

 이 프로젝트는 여러 AI 코딩 어시스턴트를 지원합니다. 각 도구는 다음 파일을 참조합니다: