diff --git a/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityConfig.java b/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityConfig.java index fc5c89f..223e24a 100644 --- a/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityConfig.java +++ b/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityConfig.java @@ -48,7 +48,7 @@ public class SecurityConfig { // 인증 설정 http.authorizeHttpRequests(c -> c - .requestMatchers("/css/**", "/images/**", "/js/**").permitAll() + .requestMatchers("/css/**", "/images/**", "/js/**", "/font/**").permitAll() .requestMatchers("/common/modal/**").permitAll() .requestMatchers(LOGIN_PATH, LOGOUT_PATH, ERROR_PATH).permitAll() .anyRequest().authenticated()); diff --git a/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityFilterConstants.java b/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityFilterConstants.java index 2486400..00e0beb 100644 --- a/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityFilterConstants.java +++ b/poc/admin/src/main/java/com/bpgroup/poc/admin/security/SecurityFilterConstants.java @@ -1,5 +1,5 @@ package com.bpgroup.poc.admin.security; public class SecurityFilterConstants { - public static final String[] EXCLUDE_FILTER_STARTS_WITH_URI = {"/login", "/logout", "/error", "/css", "/js", "/images", "/favicon.ico", "/common/modal"}; + public static final String[] EXCLUDE_FILTER_STARTS_WITH_URI = {"/login", "/logout", "/error", "/css", "/js", "/images", "/favicon.ico", "/common/modal", "/font"}; } diff --git a/poc/admin/src/main/resources/static/css/fonts.css b/poc/admin/src/main/resources/static/css/fonts.css new file mode 100644 index 0000000..1cc0dda --- /dev/null +++ b/poc/admin/src/main/resources/static/css/fonts.css @@ -0,0 +1,63 @@ + +@font-face { + font-family: 'Pretendard'; + font-weight: 900; + font-display: swap; + src: local('Pretendard Black'), url(../font/Pretendard-Black.woff2) format('woff2'), url(../font/Pretendard-Black.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 800; + font-display: swap; + src: local('Pretendard ExtraBold'), url(../font/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/Pretendard-ExtraBold.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 700; + font-display: swap; + src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 600; + font-display: swap; + src: local('Pretendard SemiBold'), url(../font/Pretendard-SemiBold.woff2) format('woff2'), url(../font/Pretendard-SemiBold.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 500; + font-display: swap; + src: local('Pretendard Medium'), url(../font/Pretendard-Medium.woff2) format('woff2'), url(../font/Pretendard-Medium.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 400; + font-display: swap; + src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 300; + font-display: swap; + src: local('Pretendard Light'), url(../font/Pretendard-Light.woff2) format('woff2'), url(../font/Pretendard-Light.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 200; + font-display: swap; + src: local('Pretendard ExtraLight'), url(../font/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/Pretendard-ExtraLight.woff) format('woff'); +} + +@font-face { + font-family: 'Pretendard'; + font-weight: 100; + font-display: swap; + src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff'); +} diff --git a/poc/admin/src/main/resources/static/css/reset.css b/poc/admin/src/main/resources/static/css/reset.css index e40173e..c93a2c7 100644 --- a/poc/admin/src/main/resources/static/css/reset.css +++ b/poc/admin/src/main/resources/static/css/reset.css @@ -3,7 +3,7 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, -abbr, address, big, cite, code, del, +abbr, acsronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, @@ -15,12 +15,13 @@ summary, time, mark, audio, video, button, a, input { margin: 0; padding: 0; border: 0; + box-sizing: border-box; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-tap-highlight-color : rgba(0,0,0,0); line-height: 150%; - box-sizing: border-box; + word-break: keep-all; } /* HTML5 display-role reset for older browsers */ @@ -33,7 +34,7 @@ body { line-height: 1 } ol, ul { - list-style: none + list-style: none; } blockquote, q { quotes: none @@ -50,7 +51,3 @@ table { a { text-decoration: none } -* { - font-family: 'Pretendard', 'sans-serif'; - box-sizing: border-box; - } \ No newline at end of file diff --git a/poc/admin/src/main/resources/static/css/style.css b/poc/admin/src/main/resources/static/css/style.css index db78d88..3a4236d 100644 --- a/poc/admin/src/main/resources/static/css/style.css +++ b/poc/admin/src/main/resources/static/css/style.css @@ -1,61 +1,89 @@ @charset "utf-8"; -@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); @import 'reset.css'; +@import 'fonts.css'; + :root { /* color */ --color-black: #000000; --color-white: #ffffff; + --color-blue: #0059C5; + --color-333: #333; + --color-666: #666; + --color-999: #999; + --color-b6b6b6: #b6b6b6; + --color-c6c6c6: #c6c6c6; + --color-d6d6d6: #d6d6d6; + --color-e6e6e6: #e6e6e6; + --color-f5f5f5: #f5f5f5; + --color-f9f9f9: #f9f9f9; + --color-red: #ff0000; - /* font */ - --fs-30 : 1.875rem; - --fs-29 : 1.813rem; - --fs-28 : 1.75rem; - --fs-27 : 1.688rem; - --fs-26 : 1.625rem; - --fs-25 : 1.563rem; - --fs-24 : 1.5rem; - --fs-23 : 1.438rem; - --fs-22 : 1.375rem; - --fs-21 : 1.3125rem; - --fs-20 : 1.25rem; - --fs-19 : 1.1875rem; - --fs-18 : 1.125rem; - --fs-17 : 1.0625rem; - --fs-16 : 1rem; - --fs-15 : 0.9375rem; - --fs-14 : 0.875rem; - --fs-13 : 0.8125rem; - --fs-12 : 0.75rem; - --fs-11 : 0.6875rem; - --fs-10 : 0.625rem; + /* font Size */ + --fs-48: 3rem; + --fs-40: 2.5rem; + --fs-36: 2.25rem; + --fs-34: 2.125rem; + --fs-30: 1.875rem; + --fs-29: 1.813rem; + --fs-28: 1.75rem; + --fs-27: 1.688rem; + --fs-26: 1.625rem; + --fs-25: 1.563rem; + --fs-24: 1.5rem; + --fs-23: 1.438rem; + --fs-22: 1.375rem; + --fs-21: 1.3125rem; + --fs-20: 1.25rem; + --fs-19: 1.1875rem; + --fs-18: 1.125rem; + --fs-17: 1.0625rem; + --fs-16: 1rem; + --fs-15: 0.9375rem; + --fs-14: 0.875rem; + --fs-13: 0.8125rem; + --fs-12: 0.75rem; + --fs-11: 0.6875rem; - --fw-800 : 800; - --fw-700 : 700; - --fw-600 : 600; - --fw-500 : 500; - --fw-400 : 400; - --fw-300 : 300; - --fw-200 : 200; - --fw-100 : 100; + /* font Weight */ + --fw-300: 300; + --fw-400: 400; + --fw-500: 500; + --fw-600: 600; + --fw-700: 700; } /* 공통 */ .blind { - visibility: hidden; - overflow: hidden; - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - font-size: 0; + visibility: hidden; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + font-size: 0; line-height: 0 } -.wid400 { - width: 400px; + + +/* link */ + +a:-webkit-any-link { + color: -webkit-link; + cursor: pointer; + text-decoration: underline; +} +a:link, a:visited { + color: var(--color-black); +} +a:hover { + color: var(--color-blue); +} +a:active { + opacity: .75; } @@ -63,138 +91,63 @@ button { cursor: pointer; + background-color: var(--color-white); border-radius: 3px; } -a:active, button:active { +button:active { opacity: .75; } button:disabled { - color: #999; - opacity: 0.5; + opacity: 0.3; } -.btn_normal { - font-size: var(--fs-14); - color: #333; - height: 36px; - padding: 0 10px; - border: 1px solid #999; - background-color: #fff; -} -.btn_confirm { - font-size: var(--fs-14); - color: #fff; - height: 36px; - padding: 0 10px; - border: 1px solid #a6a6a6; - background-color: var(--color-black); -} -.closeButton { - display: none; - position: absolute; - top: 15px; - right: 15px; - background: transparent; -} - -/* layout */ - -html, body { - height: 100vh; - min-height: -webkit-fill-available; - min-height: var(--vh-100); - font-size: 16px; - color: #333; - line-height: 150%; - font-family: 'Pretendard', 'sans-serif'; -} -header { - /*position: fixed; - left: 0; - top: 0;*/ +.btn_blue, .btn_white { width: 100%; - padding: 16px 20px; - border-bottom: 1px solid #c6c6c6; - overflow: hidden; - background-color: #ffffff; - z-index: 100; -} -header a.nav_menu { - display: none; -} -.wrapper { - margin: 0 auto; - height: 100vh; -} -.container { - padding: 10px 30px 30px 30px; - margin: 0 auto; - min-width: 320px; - overflow-y: auto; -} -.container h2 { - font-size: var(--fs-30); - font-weight: var(--fw-800); - margin: 15px 0 10px 0; -} -.breadcrumb a { - font-size: 15px; - color: #999; -} -.breadcrumb a::after { - position: relative; - content: ">"; - padding-left: 10px; - padding-right: 5px; - font-size: 10px; - top: -2px -} -.breadcrumb a:last-child { - color: #333; -} -.breadcrumb a:last-child::after { - content: " "; -} -.option_wrap { - position: relative; - padding: 15px 12px; - border: 1px solid #d6d6d6; - border-radius: 6px; -} -.option_wrap ul { - overflow: hidden; -} -.option_wrap ul li { - display: inline-block; - padding: 5px 10px; -} -.option_wrap ul li span { - display: inline-block; - padding: 3px 0; -} -.position_right { - position: absolute; - right: 12px; - bottom: 12px; -} - - - -/* header */ -header h1 { - float: left; - font-size: var(--fs-26); - font-weight: var(--fw-800) -} -.menu_right { - float: right; font-size: var(--fs-14); - font-weight: var(--fw-400); - color: #666; - margin-top: 10px; + font-weight: var(--fw-600); + border-radius: 3px; } -.menu_right a { - display: inline-block; - padding: 0 10px; +.btn_blue { + color: var(--color-white); + background-color: var(--color-blue); + border: 1px solid var(--color-blue); +} +.btn_white { + color: var(--color-black); + background-color: var(--color-white); + border: 1px solid var(--color-c6c6c6); +} +.tb_button { + position: relative; +} +.tb_button button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 3px 10px; + font-size: var(--fs-13); + color: var(--color-333); + border: 1px solid var(--color-c6c6c6); +} +.posi_right { + max-width: 110px; + float: right; + position: relative; + top: 35px; + font-size: var(--fs-14); + padding: 7px 10px; +} +.ico_save { + padding-top: 20px; +} + + +/* heading */ + +h2 { + position: relative; + font-size: var(--fs-18); + font-weight: var(--fw-500); } @@ -204,26 +157,24 @@ header h1 { outline: none; } input { - -webkit-appearance : none; + -webkit-appearance: none; -moz-appearance:none; appearance:none; - height: 36px; - border: 1px solid #c6c6c6; - padding: 0 10px; + height: 46px; + border-bottom: 1px solid var(--color-d6d6d6); + padding: 0; box-sizing: border-box; outline: none; - font-size: var(--fs-15); - color: #333; - border-radius: 3px; + font-size: var(--fs-16); + transition: all .05s; } input:focus, input:active, input:hover { - border: 1px solid #333; outline: none; } input[type=number] { -moz-appearance: textfield; } -input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; @@ -245,24 +196,134 @@ input:invalid { box-shadow: none; } input:focus-within { - border: 1px solid #333; + border-bottom: 2px solid var(--color-blue); } input:disabled { - background: #f5f5f5; + color: var(--color-999); + background: var(--color-white); } input:read-only { - color: var(--color-black); - background: #f5f5f5; + color: var(--color-666); + background: var(--color-white); +} +input:disabled:focus, input:disabled:active, input:disabled:hover { + background: #fff !important; + box-shadow: inset 0 -2px 0 var(--color-d6d6d6); } input::placeholder { - color: #c6c6c6; - font-weight: var(--fw-400); + color: var(--color-c6c6c6); } *::placeholder { font-weight: var(--fw-300); } -.date_select input { +input[type="password"] { + letter-spacing: 1px; +} +input.id[type="text"] { + font-size: var(--fs-18); + font-weight: var(--fw-700); +} +input.big[type="password"] { + letter-spacing: -5px; + font-size: var(--fs-30) +} +input.sm { + width: 100%; + box-shadow: inset 0 -1px 0 var(--color-d6d6d6); + transition: all 0.1s ease; font-size: var(--fs-15); + overflow: hidden; + border: 0; +} +input.sm:focus, input.sm:active, input.sm:hover { + box-shadow: inset 0 -2px 0 var(--color-blue); +} +input.sm:disabled:focus, input.sm:disabled:active, input.sm:disabled:hover { + background: var(--color-white) !important; + box-shadow: inset 0 -1px 0 var(--color-d6d6d6); +} +.inp { + position: relative; +} +.err_msg { + display: none; +} +.err .err_msg { + display: block; + color: var(--color-red); + font-size: var(--fs-14); + margin-top: 10px; +} +.btn_clear { + position: absolute; + top: 50%; + right: 0; + width: 30px; + height: 30px; + transform: translateY(-50%); + background: url('../images/ico_clear.svg') no-repeat center; + background-size: 16px auto; + opacity: .5; +} + + +/* select */ + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 6px 30px 6px 10px; + border: 1px solid var(--color-c6c6c6); + border-radius: 3px; + background: url('../images/select_arrow.svg') no-repeat right 10px center; + outline: none; + transition: all .05s; +} +select:hover { + border-color: var(--color-black); + outline: none; +} +select:focus { + border-color: var(--color-black); + color: var(--color-black); + outline: none; +} +select:disabled { + opacity: 0.5; +} + + +/* flex */ + +.flexbox { + position: relative; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + flex-direction: row; +} +.flexitem { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; + padding: 0; + align-items: center; + -webkit-box-align: center; + -moz-box-align: center; + -ms-flex-align: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -moz-box-orient: horizontal; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } @@ -271,23 +332,33 @@ input::placeholder { .check_box { position: relative; display: inline-block; + padding-left: 30px; + padding-right: 30px; font-size: var(--fs-15); + font-weight: var(--fw-400); } .check_box label { + position: absolute; + left: 3px; + top: 0; cursor: pointer; + transition: all .05s; } -input[type="checkbox"] + label { - position: relative; - top: 5px; - display: block; - width: 16px; - height: 16px; - background: url(../images/chk_off.svg) no-repeat 0 0 / contain; +.check_box input[type="checkbox"] + label { + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + padding-left: 30px; + cursor: pointer; + background: url('../images/chk_off.svg') no-repeat 0 0 / contain; + background-size: 20px auto; } -input[type='checkbox']:checked + label { - background: url(../images/chk_on.svg) no-repeat 0 0 / contain; +.check_box input[type='checkbox']:checked + label { + background: url('../images/chk_on.svg') no-repeat 0 0 / contain; + background-size: 20px auto; } -input[type="checkbox"] { +.check_box input[type="checkbox"] { display: none; } @@ -299,504 +370,530 @@ input[type="checkbox"] { padding-left: 33px; padding-right: 30px; font-size: var(--fs-16); - margin-left: 12px; } .radio_box label { position: absolute; - left: 3px; - top: 2px; + left: 0; + top: 0; cursor: pointer; } input[type="radio"] + label { position: absolute; display: block; - height: 20px; + height: 24px; padding-left: 26px; - background: url(../images/radio_off.svg) no-repeat 0 0 / contain; + background: url('../images/radio_off.svg') no-repeat 0 0; + background-size: 18px auto; + background-position: 0 50%; } input[type='radio']:checked + label { - background: url(../images/radio_on.svg) no-repeat 0 0 / contain; + background: url('../images/radio_on.svg') no-repeat 0 0; + background-size: 18px auto; + background-position: 0 50%; } input[type="radio"] { display: none; } -/* select */ +/* list */ -select { - -webkit-appearance: none; - -moz-appearance:none; - appearance:none; - height: 36px; - padding: 0 25px 0 10px; - border: 0; - color: #333; - font-size: var(--fs-14); - font-weight: var(--fw-400); - border-radius: 3px; - -moz-border-radius: 3px; - outline: 0; - background: url('../images/ico_down_black.svg') no-repeat center right 8px, var(--color-white); - background-size: 10px auto; - transition: all .2s; - border: 1px solid #c6c6c6; - font-family: 'Pretendard', 'sans-serif'; +ul { + overflow: hidden; } -select:disabled { - opacity: 0.6; -} -select::-ms-expand { - display:none; -} -select:focus-within, select:active { - border: 1px solid #333; -} -select:disabled { - background-color: #f9f9f9; -} -select:disabled + span { - opacity: 0.3; -} - - -/* flex layout */ - -.flexbox { +ul li { position: relative; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -moz-box-align: center; - -ms-flex-align: center; - flex-direction: row; - align-items: stretch } -.flexitem { - flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - -ms-flex: 1; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -moz-box-orient: horizontal; - -ms-flex-wrap: wrap; - flex-wrap: wrap; +ul li em { + position: absolute; + left: 0; } -/* navigation */ +/* layout */ -.menu_wrap { - width: 100%; - max-width: 250px; - min-width: 200px; +* { + word-break: keep-all; + box-sizing: border-box; +} +html, body { height: 100%; - overflow: auto; - background-color: #333; - padding: 20px 0; + min-height: -webkit-fill-available; + min-height: var(--vh-100); + font-size: 16px; + color: #1c1c1c; + line-height: 150%; + font-family: 'Pretendard', 'sans-serif'; + background-color: var(--color-white); + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + /* scrollbar-gutter: stable; */ } -.menu_wrap h2 { - display: block; - font-size: var(--fs-20); - font-weight: var(--fw-800); - color: #fff; - padding: 0 20px; - margin-bottom: 10px; +input, button, select { + font-family: inherit; } -.menu_wrap_mobile { - display: none; +header, main, footer { + min-width: 768px; } -.menu_wrap_mobile h2 { - display: block; - font-size: var(--fs-20); - font-weight: var(--fw-800); - color: #fff; - padding: 0 20px; - margin-bottom: 10px; +main { + width: 100%; } -.nav_tit { +.login main { + width: 100%; + min-height: calc(100% - 103px); +} + + +/* header */ + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 5px; + background-color: var(--color-white); + border-bottom: 1px solid var(--color-e6e6e6); + box-shadow: 0 2px 12px rgb(0, 0, 0, 0.03); + z-index: 1000; +} +header > div { position: relative; - display: block; - cursor: pointer; - font-size: var(--fs-15); - color: #fff; - background: url('../images/ico_down.svg') no-repeat right 20px center; - background-size: 10px; - transition: background 0.1s ease; - padding: 8px 20px; } -.nav_tit.active { - background: url('../images/ico_up.svg') no-repeat right 20px center, #222; - background-size: 10px; +header > div h1 { + float: left; + font-size: var(--fs-20); + line-height: 50px; + padding-left: 10px; + font-weight: var(--fw-700); } -.nav_tit.active + .nav_section { - display: block; -} -.nav_section { - display: none; - list-style: none; - padding: 10px 20px; -} -.nav_section li { - padding: 2px 10px; -} -.nav_section li a { - display: block; - color: #fff; +header > div h1 span { + position: relative; + top: -2px; + left: 10px; + color: var(--color-666); + font-weight: var(--fw-400); font-size: var(--fs-14); } +header > div .language { + position: relative; + top: 10px; + right: 10px; + float: right; + font-size: var(--fs-14); + color: var(--color-333); +} +header > div .language span { + display: inline-block; + margin-left: 10px; +} +header > div::after { + content: " "; + clear: both; +} +header > div .user_info { + position: relative; + top: 12px; + right: 10px; + float: right; +} +header > div .user_info a { + font-size: var(--fs-14); + color: var(--color-333); +} +header > div .user_info a:last-child { + margin-left: 10px; +} + + +/* sidebar*/ + +.container { + display: flex; + flex-direction: row; + min-height: calc(100vh - 61px) +} +.sidebar { + width: 200px; + background-color: #333; + color: #fff; + transition: width 0.3s ease; + overflow: hidden; +} +.toggle-btn { + position: absolute; + top: 69px; + left: 10px; + width: 30px; + height: 30px; + padding: 10px; + background: url('../images/ico_max.svg') no-repeat center; + color: #fff; + border: none; + cursor: pointer; + border-radius: 3px; +} +.toggle-btn.active { + background: url('../images/ico_mini.svg') no-repeat center; + left: 5px; +} +.accordion { + list-style-type: none; +} +.accordion-content { + padding: 10px; + display: none; +} +.sidebar .accordion { + max-width: 300px; + color: var(--color-white); + margin-top: 50px; + height: calc(100% - 200px); +} +.sidebar .accordion-header { + padding: 10px; + cursor: pointer; + white-space: nowrap; + font-size: var(--fs-15); + color: var(--color-e6e6e6); +} +.sidebar .accordion-header::after { + content: '┼'; + float: right; + font-size: 7px; +} +.sidebar .accordion-item .accordion-header.active::after { + content: '━'; + font-size: 7px; +} +.accordion-item .accordion-header.active + .accordion-content { + display: block; +} +.sidebar .sub_menu a { + display: block; + font-size: var(--fs-14); + text-decoration: none; + color: var(--color-e6e6e6); + padding: 5px; +} + + +/* bread crum */ + +.con_header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-height: 40px; + font-size: var(--fs-14); + color: #999; + padding-left: 48px; +} +.con_header.active { + padding-left: 30px; +} +.con_header::before { + content: ""; + position: absolute; + top: 11px; + display: inline-block; + width: 1px; + height: 24px; + background-color: var(--color-c6c6c6); +} +.con_header.active::before { + content: none; +} +.con_header.active .breadcrum { + padding-left: 0; +} +.con_header .breadcrum { + position: relative; + top: 2px; + overflow: hidden; + display: inline-block; + padding-left: 20px; +} +.con_header .breadcrum a { + display: inline-block; + height: 40px; + line-height: 40px; + text-decoration: none; + color: var(--color-999); +} +.con_header .breadcrum a::after { + content: ">"; + display: inline-block; + margin: 0 4px 0 6px; + font-size: var(--fs-12); + color: #c6c6c6; +} +.con_header .breadcrum a:last-child:after { + content: none; +} +.con_header .breadcrum a:last-child { + color: var(--color-333); +} + + +/* footer */ + +.login footer { + position: relative; +} +.login footer > div { + padding: 20px; +} +.login .foot_head { + overflow: hidden; + height: 30px; +} +.login .foot_head h2 { + position: relative; + top: -17px; + float: right; + margin-left: 20px; +} +.login .foot_head h2 img { + height: 11px; +} +.login .foot_head a { + float: right; + font-size: var(--fs-13); + color: var(--color-333); +} +.login .foot_copy { + font-size: var(--fs-11); + color: var(--color-666); + text-align: right; + width: 100%; + padding: 0; +} +footer { + min-width: 200px; +} +.foot_head h2 { + padding-left: 10px; +} +.foot_head h2 img { + width: 60px; +} +.foot_head a { + color: var(--color-c6c6c6); + font-size: var(--fs-12); + padding-left: 10px; + text-decoration: none; +} +.foot_copy { + font-size: var(--fs-11); + word-break: break-all; + width: 200px; + padding: 0 10px 10px 10px; + color: var(--color-999); +} + +/* Heading */ + +h2 { + font-size: var(--fs-30); + font-weight: var(--fw-700); +} +h3 { + font-size: var(--fs-20); + font-weight: var(--fw-700); +} + + +/* scroll */ + +.scrollable::-webkit-scrollbar { + width: 5px; +} +.scrollable::-webkit-scrollbar-track { + background-color: #fff; +} +.scrollable::-webkit-scrollbar-thumb { + background-color: #c6c6c6; + border-radius: 8px; +} +.scrollable::-webkit-scrollbar-thumb:hover { + background-color: #999; +} + + +/* pagination */ + +.pagination { + display: inline-block; + margin-top: 30px; +} +.pagination a { + color: black; + float: left; + font-size: var(--fs-13); + padding: 8px 14px; + text-decoration: none; + border-radius: 3px; + border: 1px solid var(--color-c6c6c6); + margin: 0 5px; +} +.pagination a.active { + background-color: var(--color-blue); + color: var(--color-white); + border-radius: 5px; +} +.pagination a:hover:not(.active) { + background-color: #ddd; + border-radius: 5px; +} /* table */ -.table_wrap { - position: relative; -} -.table_wrap.mt-20 { - margin-top: 20px; -} -.table_wrap h4 { - display: inline-block; - font-size: 22px; - font-weight: var(--fw-800); - height: 36px; - line-height: 36px; - margin-bottom: 10px; -} -.tb_right { - position: absolute; - right: 0; - top: 0; -} + table { width: 100%; - border-top: 1px solid #333; table-layout:fixed; + text-align: left; + border-collapse: collapse; } -table caption{font-size:0; text-indent:-9999px;} -th, td { - text-align: center; - padding: 12px 8px; - color: #333; -} -th { +table th { + background-color: var(--color-f5f5f5); font-size: var(--fs-14); + font-weight: var(--fw-600); + padding: 8px 10px; + position: sticky; + top: 0; +} +table td { + border-top: 1px solid var(--color-d6d6d6); + font-size: var(--fs-14); + color: var(--color-333); + padding: 10px; +} +.tb_one { + width: 100%; + overflow: hidden; + text-align: center; + margin-top: 15px; +} +.tb_two { + display: flex; + width: 100%; +} +.tb_two .flex1 { + flex: 1; +} +.tb_one.sty_box { + position: relative; + border: 1px solid var(--color-d6d6d6); +} +.tb_sty01 th, .tb_sty01 td { + text-align: center; +} +table.num_txt td:first-child { + font-size: var(--fs-13); +} +.scrollable-container { + max-height: 300px; + overflow-y: auto; +} + + +/* 로그인 */ + +body.login { + background-color: var(--color-white); +} +body.login select { + background-size: 8px auto; +} +.login_wrapper { + width: 100%; + max-width: 400px; + margin: 0 auto; + padding-top: 10vh; +} +.login_wrapper h2 { + font-size: var(--fs-36); font-weight: var(--fw-700); - background-color: #f9f9f9; - border-bottom: 1px solid #c6c6c6 } -td { - font-size: var(--fs-15); - font-weight: var(--fw-400); - border-bottom: 1px solid #e6e6e6; +.login_wrapper .check_form { + text-align: right; + margin-top: 30px; } - - - -/* modal */ - -.modal { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 1000; +.login_wrapper .login_box .check_box { + font-size: var(--fs-14); + color: var(--color-333); + padding-left: 25px; + padding-right: 0; } -.modal-content { - position: absolute; - top: 50%; - left: 50%; - display: inline-block; - width: 100%; - max-width: 320px; - transform: translate(-50%, -50%); - background-color: white; - padding: 16px; +.login_wrapper .login_box .check_box input[type="checkbox"] + label { + background-size: 16px auto; + background-position: left 0 top 40%; } -.modal-header { - position: absolute; - top: 0; - left: 0; - width: 100%; - border-bottom: 1px solid #d6d6d6; -} -.modal-header h2 { - height: 50px; - line-height: 50px; - font-size: 20px; - margin: 0; - padding: 0 15px; - -} -.close { - position: absolute; - top: 10px; - right: 10px; - font-size: 20px; - cursor: pointer; -} -.modal-body { - margin-top: 50px; - font-size: var(--fs-15); +.login_wrapper .login_box .input_form { padding: 10px 0; } -.modal-body .col-box { - padding-bottom: 16px; +.login_wrapper .login_box .input_form p { + padding: 10px 0; } -p.col-box label { - display: block; - margin-bottom: 5px; -} -p.col-box input { +.login_wrapper .login_box .input_form input { width: 100%; -} -.btn_both { - display: flex; -} -.btn_both button { - width: 50%; - flex: 1; -} -.btn_both button:nth-child(1) { - margin-right: 3px; -} -.btn_both button:nth-child(2) { - margin-left: 3px; -} - - -/* login */ - -.login_wrap { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 1; -} -.login_box { - position: absolute; - top: 50%; - left: 50%; - display: inline-block; - width: 100%; - max-width: 420px; - transform: translate(-50%, -50%); - background-color: white; - padding: 30px; - border-radius: 6px; -} -.login_box h1 { - font-size: var(--fs-26); - font-weight: var(--fw-800); - margin-top: 5px; - margin-bottom: 20px; -} -.login_box p { - padding: 6px 0; -} -input.login_in { - width: 40% !important; - margin-right: 5px; -} -.login_box label { - display: inline-block; - min-width: 75px; - text-align: right; - padding-right: 10px; -} -.login_box input { - width: 76%; -} -.btn_login { - width: 100% !important; - margin-top: 30px; - height: 44px; - font-size: var(--fs-15); - font-weight: var(--fw-800); -} -.login_subtit { - position: relative; - top: -20px; - color: #999; -} - - -/* main */ - -.graph { - margin-top: 15px; - padding: 25px; - background-color: #f9f9f9; -} -.graph canvas { - max-height: 200px; -} -.main_count { - padding: 30px 0; -} -.count_wrap { - overflow: hidden; - width: 100%; - display: flex; -} -.count_wrap > li { - flex: 1; - font-size: var(--fs-16); - padding: 25px; - border: 1px solid #d6d6d6; - border-radius: 6px; - margin-right: 30px; -} -.count_wrap > li:last-child { - margin-right: 0; -} -.count_wrap > li strong { - font-weight: var(--fw-700); - font-size: var(--fs-15); -} -.count_wrap > li p { - position: relative; - padding-left: 10px; - margin-bottom: 5px; -} -.count_wrap > li p em { - position: absolute; - left: 0; - top: 0; -} -.count_wrap h5 { font-size: var(--fs-18); - font-weight: var(--fw-800); - margin-bottom: 15px; + font-weight: var(--fw-600); } -.date { - position: relative; - top: -1px; - left: 15px; - display: inline-block; +.login_wrapper .login_box .input_form > button { + margin-top: 20px; +} +.login_wrapper .out_link { + text-align: right; + margin-top: 20px; +} +.login_wrapper .out_link a { font-size: var(--fs-15); + color: var(--color-333); } - -/* 모바일 */ -@media (max-width: 767px){ - header { - padding: 10px 16px; - } - header h1 { - font-size: 20px; - } - header a.nav_menu { - position: absolute; - display: block; - top: 15px; - right: 15px; - } - .container { - padding: 16px; - height: 100%; - overflow: inherit; - } - .container h2 { - margin: 0 0 10px 0; - } - .menu_wrap, .menu_right, .breadcrumb { - display: none; - } - .menu_wrap.active { - position: fixed !important; - display: block; - top: 0 !important; - left: 0 !important; - width: 100%; - height: 100%; - max-width: inherit; - background-color: #333; - z-index: 1000; - } - .tb_right { - position: relative; - margin-bottom: 10px; - } - .closeButton { - display: block; - } - .option_wrap ul li { - width: 100%; - } - .position_right { - position: inherit; - } - .wid400 { - width: 100%; - } - .tb_wrapper { - overflow-x: auto; - } - .tb_sty01 { - width: 1000px; - } - th, td { - font-size: var(--fs-15); - } - .count_wrap { - display: block; - } - .count_wrap li { - flex: none; - padding: 16px; - margin-right: 0; - margin-bottom: 16px; - } - .graph { - padding: 16px; - } - .login_box label { - display: block; - text-align: left; - margin-bottom: 5px; - } - .login_box { - width: 92%; - } - .login_box input { - width: 100%; - } - - .login_box input.login_in { - width: 60%; - } - - /* modal */ - .modal-content { - width: 92%; - max-width: inherit; - } - - +.login_wrapper .out_link a:last-child { + margin-left: 10px; } - -/* 테블릿 세로 */ -@media (min-width: 768px) and (max-width: 991px) { - +.login_wrapper .sub_discription { + font-size: var(--fs-15); + color: var(--color-333); + margin-top: 60px; +} +.login_wrapper .sub_discription li { + position: relative; + padding: 2px 10px; } -/* 테블릿 가로 */ - -@media (min-width: 992px) and (max-width: 1199px) { +/* content */ +.content { + position: relative; + flex: 1; + padding: 70px 30px 50px 30px; } - - -/* 데스크탑 일반 */ - -@media (min-width: 1200px) { - +.con_wrap h3 { + display: inline-block; + margin-top: 40px; +} +.middle_box { + position: relative; + overflow: hidden; + width: 120px; + text-align: center; +} +.middle_box button { + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); + padding: 10px 15px; + max-width: 90px; +} +.discription { + font-size: var(--fs-15); + margin-top: 10px; + color: var(--color-333); } \ No newline at end of file diff --git a/poc/admin/src/main/resources/static/css/sub.css b/poc/admin/src/main/resources/static/css/sub.css deleted file mode 100644 index b74dfb8..0000000 --- a/poc/admin/src/main/resources/static/css/sub.css +++ /dev/null @@ -1,136 +0,0 @@ - -/*20240220 김보라 퍼블수정*/ -html, body {height:calc(100vh - 72px);} -.wrapper {height:100%} -#dayKo {margin-left: 20px;} -.terminal_wrap {margin:20px 0 10px 0; padding:15px; background:#f5f5f5} -.terminal_wrap .terminal_top{overflow: hidden;} -.terminal_wrap .terminal_top .terminal_btn {float:right;} -.terminal_wrap .terminal_list_wrap {border-top:1px solid #ddd; margin: 10px 0 0 0; padding:10px} -.terminal_list_wrap .terminal_list_in {padding: 5px 0;} -.terminal_list_wrap .terminal_list_in .checkbox-label {line-height: normal; padding-left: 25px; display: inline;} -.terminal_list_wrap .terminal_list_in > p {text-align: center;} - -.table_radio_wrap {vertical-align: middle;} -.table_radio_wrap .radio_box {display: inline-block !important; padding-right:10px !important; padding-left: 0; margin-left:0; } -.table_radio_wrap .radio_box input[type="radio"] + label {position:static;} - -.btn_wrap {position: relative; text-align: right; margin-top:10px;} -.table_select_box, .table_date_box {width: 225px;} - -.tb_sty01.tb_sty02 {border-top:1px solid #999} - -#batchRegisterTerminalModal .modal-content {max-width: 530px !important} -#depositDetailModal .modal-content, #withdrawDetailModal .modal-content, -#transferDetailModal .modal-content, #transferHistoryModal .modal-content {max-width: 750px !important} - -.btn_normal.excelbtn { - height: 36px; - display: inline-block; - vertical-align: top; - line-height: 36px; -} -.tb_wrapper.tb_wrapper_x_scroll {overflow-x: auto;} -.tb_wrapper.tb_wrapper_terminal {max-height: 170px; overflow-y: auto; overflow-x: auto;} -.wd_auto .tbl_bert_m > th{vertical-align: middle;} -.wd_auto input {width:100% !important;} - -.font_bold{font-weight: bold;} -.tooltip_prt {position:relative;} -.tooltip_chd { - visibility: hidden; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px; - position: absolute; - z-index: 1; - - width: max-content; - bottom: -5%; - left: 50%; - transform: translate(-50%, 50%); -} -.tooltip_prt:hover .tooltip_chd { - visibility: visible; -} -table colgroup > col { min-width:max-content !important} - -table td > p, table td > a { - display:block; - overflow:hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.mt-05 { - margin-top: 5px; -} -.mt-10 { - margin-top: 10px; -} - -.tb_wrapper {padding-bottom:35px} -/*20240226 김현종 퍼블 수정*/ -.clickable_text a:link, .clickable_text a:visited { - color: blue; - text-decoration: underline; - cursor: pointer; -} - -/*20240229 김현종 퍼블 수정*/ -.title_text a { - color: black; /* 원하는 색상으로 설정 */ - text-decoration: none; /* 밑줄 제거 */ -} - -.title_text a:visited { - color: black; /* 방문한 링크에 대해서도 동일한 색상 유지 */ -} - - -/* 모바일 */ -@media (max-width: 767px){ - .mb_w50 {overflow: hidden; margin-left:-5px;} - .mb_w50 > span {width:50%; float:left; padding:0 3px !important; box-sizing: border-box;} - .mb_w50 > span select {width:100%} - - table td > p, table td > a { - overflow: inherit; - white-space: inherit; - word-break: break-all; - } - - .tb_w_auto {width:130px !important;} - .table_wrap h4 { height: auto !important} - .table_wrap2 .tb_right {position:absolute;} -} - -/* 테블릿 세로 */ -@media (min-width: 768px) and (max-width: 991px) { - .menu_wrap { - max-width:200px - } - - .tb_w_auto {width:100px} -} - - -/* 테블릿 가로 */ - -@media (min-width: 992px) and (max-width: 1199px) { - .menu_wrap { - max-width:200px - } - - .tb_w_auto {width:130px} - -} - - -/* 데스크탑 일반 */ - -@media (min-width: 1200px) { - -} \ No newline at end of file diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Black.woff b/poc/admin/src/main/resources/static/font/Pretendard-Black.woff new file mode 100644 index 0000000..d07848c Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Black.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Black.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Black.woff2 new file mode 100644 index 0000000..eafe683 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Black.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff b/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff new file mode 100644 index 0000000..7837ae5 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff2 new file mode 100644 index 0000000..4d40a1a Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Bold.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff b/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff new file mode 100644 index 0000000..8058b76 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..dcd57e7 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-ExtraBold.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff b/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff new file mode 100644 index 0000000..f9498d8 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..e510402 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-ExtraLight.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Light.woff b/poc/admin/src/main/resources/static/font/Pretendard-Light.woff new file mode 100644 index 0000000..2cad608 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Light.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Light.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Light.woff2 new file mode 100644 index 0000000..7f82fe8 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Light.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff b/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff new file mode 100644 index 0000000..5370409 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff2 new file mode 100644 index 0000000..f8c743d Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Medium.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff b/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff new file mode 100644 index 0000000..e3b3a35 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a9f6231 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Regular.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff b/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff new file mode 100644 index 0000000..682e7a4 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..4c6a32d Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-SemiBold.woff2 differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff b/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff new file mode 100644 index 0000000..d28e448 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff differ diff --git a/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff2 b/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff2 new file mode 100644 index 0000000..6c9bc96 Binary files /dev/null and b/poc/admin/src/main/resources/static/font/Pretendard-Thin.woff2 differ diff --git a/poc/admin/src/main/resources/static/images/chk_off.svg b/poc/admin/src/main/resources/static/images/chk_off.svg index 1b747b6..1294f5a 100644 --- a/poc/admin/src/main/resources/static/images/chk_off.svg +++ b/poc/admin/src/main/resources/static/images/chk_off.svg @@ -1,6 +1,18 @@ - - - - + + + + + + + + + + + + + + + + diff --git a/poc/admin/src/main/resources/static/images/chk_on.svg b/poc/admin/src/main/resources/static/images/chk_on.svg index 2349793..27d1b65 100644 --- a/poc/admin/src/main/resources/static/images/chk_on.svg +++ b/poc/admin/src/main/resources/static/images/chk_on.svg @@ -1,6 +1,15 @@ - - - - + + + + + + + + + + + + + diff --git a/poc/admin/src/main/resources/static/images/favicon.ico b/poc/admin/src/main/resources/static/images/favicon.ico deleted file mode 100644 index 1cdc216..0000000 Binary files a/poc/admin/src/main/resources/static/images/favicon.ico and /dev/null differ diff --git a/poc/admin/src/main/resources/static/images/ico_clear.svg b/poc/admin/src/main/resources/static/images/ico_clear.svg new file mode 100644 index 0000000..ee0135b --- /dev/null +++ b/poc/admin/src/main/resources/static/images/ico_clear.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/poc/admin/src/main/resources/static/images/ico_close.svg b/poc/admin/src/main/resources/static/images/ico_close.svg deleted file mode 100644 index 1ac3669..0000000 --- a/poc/admin/src/main/resources/static/images/ico_close.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/poc/admin/src/main/resources/static/images/ico_down.svg b/poc/admin/src/main/resources/static/images/ico_down.svg deleted file mode 100644 index b2b9d88..0000000 --- a/poc/admin/src/main/resources/static/images/ico_down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/poc/admin/src/main/resources/static/images/ico_down_black.svg b/poc/admin/src/main/resources/static/images/ico_down_black.svg deleted file mode 100644 index ec2d636..0000000 --- a/poc/admin/src/main/resources/static/images/ico_down_black.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/poc/admin/src/main/resources/static/images/ico_max.svg b/poc/admin/src/main/resources/static/images/ico_max.svg new file mode 100644 index 0000000..e6bcf77 --- /dev/null +++ b/poc/admin/src/main/resources/static/images/ico_max.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/poc/admin/src/main/resources/static/images/ico_menu.svg b/poc/admin/src/main/resources/static/images/ico_menu.svg deleted file mode 100644 index 58322d3..0000000 --- a/poc/admin/src/main/resources/static/images/ico_menu.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/poc/admin/src/main/resources/static/images/ico_mini.svg b/poc/admin/src/main/resources/static/images/ico_mini.svg new file mode 100644 index 0000000..cf1fb14 --- /dev/null +++ b/poc/admin/src/main/resources/static/images/ico_mini.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/poc/admin/src/main/resources/static/images/ico_up.svg b/poc/admin/src/main/resources/static/images/ico_up.svg deleted file mode 100644 index 8e50b9e..0000000 --- a/poc/admin/src/main/resources/static/images/ico_up.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/poc/admin/src/main/resources/static/images/logo_secui.svg b/poc/admin/src/main/resources/static/images/logo_secui.svg new file mode 100644 index 0000000..5e841ed --- /dev/null +++ b/poc/admin/src/main/resources/static/images/logo_secui.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/poc/admin/src/main/resources/static/images/logo_secui_gray.svg b/poc/admin/src/main/resources/static/images/logo_secui_gray.svg new file mode 100644 index 0000000..77f9888 --- /dev/null +++ b/poc/admin/src/main/resources/static/images/logo_secui_gray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/poc/admin/src/main/resources/static/images/radio_off.svg b/poc/admin/src/main/resources/static/images/radio_off.svg deleted file mode 100644 index f78430a..0000000 --- a/poc/admin/src/main/resources/static/images/radio_off.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/poc/admin/src/main/resources/static/images/radio_on.svg b/poc/admin/src/main/resources/static/images/radio_on.svg deleted file mode 100644 index 73dae1d..0000000 --- a/poc/admin/src/main/resources/static/images/radio_on.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/poc/admin/src/main/resources/static/images/select_arrow.svg b/poc/admin/src/main/resources/static/images/select_arrow.svg new file mode 100644 index 0000000..10cb28c --- /dev/null +++ b/poc/admin/src/main/resources/static/images/select_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/poc/admin/src/main/resources/static/js/motion.js b/poc/admin/src/main/resources/static/js/motion.js index ee36f04..651893c 100644 --- a/poc/admin/src/main/resources/static/js/motion.js +++ b/poc/admin/src/main/resources/static/js/motion.js @@ -1,73 +1,88 @@ -// mobile 100vh err issue 대응 -const setVh = () => { - document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`) -}; -window.addEventListener('resize', setVh); -setVh(); -document.addEventListener('touchstart', function () { + +// header 높이 만큼 body의 padding-top으로 설정 + +window.addEventListener('load', function() { + var headerHeight = document.querySelector('header').offsetHeight; + document.body.style.paddingTop = headerHeight + 'px'; }); -// 콘텐츠영역 자동 높이 조절 -document.addEventListener('DOMContentLoaded', function () { - setupAccordion(); - // navigation 모바일 처리 - document.querySelector('#toggleLink').addEventListener('click', function () { - toggleMenu('.menu_wrap'); - }); +// Sidebar 열고 닫기 + +function toggleSidebar() { + var sidebar = document.querySelector('.sidebar'); + var contentHeader = document.querySelector('.content .con_header'); + var toggleBtn = document.querySelector('.toggle-btn'); + + if (sidebar.style.width === '200px') { + sidebar.style.width = '0'; + toggleBtn.classList.remove('active'); + contentHeader.classList.remove('active'); + } else { + sidebar.style.width = '200px'; + toggleBtn.classList.add('active'); + contentHeader.classList.add('active'); + } +} + + +document.addEventListener("DOMContentLoaded", function() { + + // Sidebar 아코디언 메뉴 + const accordionItems = document.querySelectorAll('.accordion-header'); + + accordionItems.forEach(item => { + item.addEventListener('click', () => { + item.classList.toggle('active'); + }); + }); + + // INPUT 내용 삭제 + document.querySelectorAll(".btn_clear").forEach(function(btn) { + btn.style.display = "none"; + }); + + document.querySelectorAll(".inp input").forEach(function(input) { + input.addEventListener("input", function() { + var parentLabel = this.closest(".inp"); + var clearButton = parentLabel.querySelector(".btn_clear"); + + if (this.value !== "") { + clearButton.style.display = "block"; + } else { + clearButton.style.display = "none"; + } + }); + }); + + document.querySelectorAll(".btn_clear").forEach(function(btn) { + btn.addEventListener("click", function() { + var parentLabel = this.closest(".inp"); + var input = parentLabel.querySelector("input"); + + input.value = ""; + this.style.display = "none"; + }); + }); + + + // 입력값 변경시 호출 함수 등록 + document.querySelectorAll(".inp_states").forEach(function(inputElement) { + inputElement.addEventListener("input", function() { + removeErrorClass(this); + }); + }); + + // 에러 클래스 제거 함수 + function removeErrorClass(inputElement) { + if (inputElement.value.trim() !== "") { + inputElement.closest(".inp").classList.remove("err"); + inputElement.nextElementSibling.style.display = "none"; + } + } + - document.querySelector('.closeButton').addEventListener('click', function () { - closeMenu('.menu_wrap'); - }); - document.querySelectorAll('.modal .close, .modal').forEach(function (element) { - element.addEventListener('click', function (e) { - if (e.target !== this) return; // 모달 내부를 클릭한 경우에는 닫히지 않도록 처리 - closeModal(); - }); - }); }); -// 아코디언 -function setupAccordion() { - document.querySelectorAll('.nav_tit').forEach(function (element) { - element.addEventListener('click', function () { - this.nextElementSibling.classList.toggle('active'); - document.querySelectorAll('.nav_section').forEach(function (section) { - if (section !== this.nextElementSibling) { - section.classList.remove('active'); - } else { - section.classList.toggle('active'); - } - }, this); - document.querySelectorAll('.nav_tit').forEach(function (tit) { - if (tit !== this) { - tit.classList.remove('active'); - } else { - tit.classList.toggle('active'); - } - }, this); - }); - }); -} - -// navigation 모바일 처리 -function toggleMenu(selector) { - document.querySelector(selector).classList.toggle('active'); -} - -function closeMenu(selector) { - document.querySelector(selector).classList.remove('active'); -} - -//modal 열기 닫기 -function openModal() { - document.querySelector('.modal').style.display = 'block'; - document.body.style.overflow = 'hidden'; -} - -function closeModal() { - document.querySelector('.modal').style.display = 'none'; - document.body.style.overflow = 'auto'; -} \ No newline at end of file diff --git a/poc/admin/src/main/resources/templates/layout/common.html b/poc/admin/src/main/resources/templates/layout/common.html index 989f341..c1950d7 100644 --- a/poc/admin/src/main/resources/templates/layout/common.html +++ b/poc/admin/src/main/resources/templates/layout/common.html @@ -6,9 +6,7 @@ 관리자 시스템 - - @@ -23,14 +21,14 @@
-
- -
- +
+
+ +
+ +
-
- - - + + diff --git a/poc/admin/src/main/resources/templates/layout/gnb.html b/poc/admin/src/main/resources/templates/layout/gnb.html index 2219552..bcd66a5 100644 --- a/poc/admin/src/main/resources/templates/layout/gnb.html +++ b/poc/admin/src/main/resources/templates/layout/gnb.html @@ -2,13 +2,15 @@ -

- 관리자 시스템 -

-

- 비밀번호 변경 - 로그아웃 -

- 메뉴 아이콘 +
+

+ SECUI logo + - Partner Inventory System +

+ +
- + \ No newline at end of file diff --git a/poc/admin/src/main/resources/templates/layout/lnb.html b/poc/admin/src/main/resources/templates/layout/lnb.html index e95b771..6524a53 100644 --- a/poc/admin/src/main/resources/templates/layout/lnb.html +++ b/poc/admin/src/main/resources/templates/layout/lnb.html @@ -3,23 +3,37 @@ xmlns:th="http://www.thymeleaf.org"> - + +
+ - \ No newline at end of file + diff --git a/poc/admin/src/main/resources/templates/login/login.html b/poc/admin/src/main/resources/templates/login/login.html index ba538a4..adb85ad 100644 --- a/poc/admin/src/main/resources/templates/login/login.html +++ b/poc/admin/src/main/resources/templates/login/login.html @@ -4,8 +4,7 @@ - 시스템 - + SECUI - Partner Inventory System @@ -15,30 +14,92 @@ - -
-
-

시스템

- -
-

- - -

-

- - -

-
- - + +
+
+

+ SECUI logo + - Partner Inventory System +

+
+ language : + + + +
-
- + +
+ +
+ + + diff --git a/poc/admin/src/main/resources/templates/main/admin/management/list.html b/poc/admin/src/main/resources/templates/main/admin/management/list.html index 9c79035..bf84c44 100644 --- a/poc/admin/src/main/resources/templates/main/admin/management/list.html +++ b/poc/admin/src/main/resources/templates/main/admin/management/list.html @@ -4,42 +4,40 @@ layout:decorate="~{main/admin/management/root.html}"> -
-

관리자 등록

-
- - - - - - -
+

관리자 등록

+
+ + + + + + +
-

관리자 조회

-
- - - -
+

관리자 조회

+
+ + + +
-

관리자 수정

-
- - - - - - -
+

관리자 수정

+
+ + + + + + +
-

관리자 삭제

-
- - - -
+

관리자 삭제

+
+ + +
diff --git a/poc/admin/src/main/resources/templates/main/admin/management/root.html b/poc/admin/src/main/resources/templates/main/admin/management/root.html index 761f575..51677a9 100644 --- a/poc/admin/src/main/resources/templates/main/admin/management/root.html +++ b/poc/admin/src/main/resources/templates/main/admin/management/root.html @@ -5,6 +5,12 @@ layout:decorate="~{layout/common.html}"> +
+
+ 메인화면 + 관리자 관리 +
+