From c1f584cbf12a3545f6d2714e0b60043c67e06785 Mon Sep 17 00:00:00 2001 From: Rinjae Date: Thu, 5 Mar 2026 15:24:37 +0900 Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=ED=83=88=ED=87=B4=20?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20UI=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20JS=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 143 ++++++++++++++++++ .../static/js/popup/custom-popups.js | 45 ++++++ .../apps/mypage/updateCorporateManager.html | 13 ++ .../apps/mypage/updateCorporateUser.html | 6 +- .../views/apps/mypage/updatePersonalUser.html | 6 +- .../views/fragment/popup/withdrawalPopup.html | 103 +++++-------- 6 files changed, 250 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 82a1ca3..1417139 100644 --- a/README.md +++ b/README.md @@ -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 코딩 어시스턴트를 지원합니다. 각 도구는 다음 파일을 참조합니다: diff --git a/src/main/resources/static/js/popup/custom-popups.js b/src/main/resources/static/js/popup/custom-popups.js index fdb5d1a..715ef4e 100644 --- a/src/main/resources/static/js/popup/custom-popups.js +++ b/src/main/resources/static/js/popup/custom-popups.js @@ -576,6 +576,51 @@ const customPopups = { $(document).off('keydown.changeRole'); }, + showWithdrawal: function () { + $('#withdrawalPopup').show(); + setTimeout(function() { + $('#withdrawalModalBackdrop').addClass('show'); + $('#withdrawalModal').addClass('show'); + }, 10); + + $('body').css('overflow', 'hidden'); + + $('#withdrawalPopupConfirmButton').off('click').on('click', function () { + customPopups.hideWithdrawal(); + $('#withdrawalForm').submit(); + }); + + $('#withdrawalPopupCancelButton').off('click').on('click', function () { + customPopups.hideWithdrawal(); + }); + + $('#withdrawalPopupCloseButton').off('click').on('click', function () { + customPopups.hideWithdrawal(); + }); + + $(document).off('keydown.withdrawal').on('keydown.withdrawal', function (e) { + if (e.key === 'Escape') { + customPopups.hideWithdrawal(); + } + }); + }, + + hideWithdrawal: function () { + $('#withdrawalModalBackdrop').removeClass('show'); + $('#withdrawalModal').removeClass('show'); + + setTimeout(function() { + $('#withdrawalPopup').hide(); + }, 300); + + $('body').css('overflow', ''); + + $('#withdrawalPopupConfirmButton').off('click'); + $('#withdrawalPopupCancelButton').off('click'); + $('#withdrawalPopupCloseButton').off('click'); + $(document).off('keydown.withdrawal'); + }, + init: function () { // emailValidationPopup 팝업의 닫기 버튼에 이벤트 리스너 추가 $('#emailValidationPopupCloseButton').on('click', function () { diff --git a/src/main/resources/templates/views/apps/mypage/updateCorporateManager.html b/src/main/resources/templates/views/apps/mypage/updateCorporateManager.html index 0da5ab9..dad393e 100644 --- a/src/main/resources/templates/views/apps/mypage/updateCorporateManager.html +++ b/src/main/resources/templates/views/apps/mypage/updateCorporateManager.html @@ -225,6 +225,7 @@ + +
+ +
diff --git a/src/main/resources/templates/views/apps/mypage/updateCorporateUser.html b/src/main/resources/templates/views/apps/mypage/updateCorporateUser.html index 93f8c42..4623f35 100644 --- a/src/main/resources/templates/views/apps/mypage/updateCorporateUser.html +++ b/src/main/resources/templates/views/apps/mypage/updateCorporateUser.html @@ -40,6 +40,7 @@ + +
+ +
diff --git a/src/main/resources/templates/views/apps/mypage/updatePersonalUser.html b/src/main/resources/templates/views/apps/mypage/updatePersonalUser.html index fbea85c..c4e367b 100644 --- a/src/main/resources/templates/views/apps/mypage/updatePersonalUser.html +++ b/src/main/resources/templates/views/apps/mypage/updatePersonalUser.html @@ -56,6 +56,7 @@ + +
+ +
diff --git a/src/main/resources/templates/views/fragment/popup/withdrawalPopup.html b/src/main/resources/templates/views/fragment/popup/withdrawalPopup.html index dd10383..59c58a4 100644 --- a/src/main/resources/templates/views/fragment/popup/withdrawalPopup.html +++ b/src/main/resources/templates/views/fragment/popup/withdrawalPopup.html @@ -1,65 +1,40 @@ -
- -
\ No newline at end of file + +