feat : 오픈 API & 공지사항 퍼블리싱
This commit is contained in:
hong
@@ -5822,6 +5822,119 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.board-table {
|
||||
width: 100%;
|
||||
border-top: 1px solid #c4c7c8;
|
||||
}
|
||||
.board-table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.board-table .board-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f9f9f9;
|
||||
height: 50px;
|
||||
padding: 0 45px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.board-table .board-table-header .header-cell {
|
||||
font-size: 14px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
.board-table .board-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.board-table .board-table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 45px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
transition: background-color 0.2s;
|
||||
background: #ffffff;
|
||||
}
|
||||
.board-table .board-table-row:hover {
|
||||
background-color: #f8fbfe;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.board-table .board-table-row .row-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-row .row-cell {
|
||||
justify-content: flex-start;
|
||||
width: 100% !important;
|
||||
}
|
||||
.board-table .board-table-row .row-cell::before {
|
||||
content: attr(data-label);
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
margin-right: 10px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
.board-table .board-table-row .row-cell--title {
|
||||
justify-content: flex-start;
|
||||
white-space: normal;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-row .row-cell--title::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.board-table .board-table-row .row-cell--title .notice-title-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
.board-table .board-table-row .row-cell--title .notice-title-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.board-table .board-table-row .row-cell--title .notice-title-link .notice-number {
|
||||
display: none;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-row .row-cell--title .notice-title-link .notice-number {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.board-table .board-table-row .row-cell--number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-table {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
@@ -6678,6 +6791,7 @@ select.form-control {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 13px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.pagination .page-first,
|
||||
.pagination .page-prev,
|
||||
@@ -9756,27 +9870,98 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
|
||||
.api-market-container {
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 40px;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background-color: #FFFFFF;
|
||||
gap: 60px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.api-market-hero {
|
||||
background: linear-gradient(to right, #eff9fe, #fcfeff);
|
||||
border: 1px solid #e3e8f0;
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(100vw - 80px);
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.api-market-hero__inner {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 138px;
|
||||
padding: 0 37px;
|
||||
}
|
||||
.api-market-hero__illust .cloud-image-placeholder {
|
||||
width: 331px;
|
||||
height: 229px;
|
||||
background: url("../img/hero_image_1.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.api-market-hero__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
.api-market-hero__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1e6f0;
|
||||
border-radius: 38px;
|
||||
font-size: 13px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1b4ab7;
|
||||
}
|
||||
.api-market-hero__badge .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1b4ab7;
|
||||
}
|
||||
.api-market-hero__title {
|
||||
font-size: 36px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
.api-market-hero__desc {
|
||||
font-size: 16px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.api-market-sidebar {
|
||||
width: 283px;
|
||||
background-color: #F8FBFD;
|
||||
width: 213px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e3e8f0;
|
||||
border-radius: 20px;
|
||||
padding: 40px 24px;
|
||||
padding: 28px 30px;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
height: calc(100vh - 32px);
|
||||
top: 40px;
|
||||
height: fit-content;
|
||||
flex-shrink: 0;
|
||||
margin: 16px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-market-sidebar {
|
||||
width: 240px;
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@@ -9797,60 +9982,35 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
}
|
||||
|
||||
.api-sidebar-header {
|
||||
.api-sidebar-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
.api-sidebar-header img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.api-sidebar-nav .menu-section {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
.api-sidebar-nav .menu-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.api-sidebar-nav .menu-title {
|
||||
padding: 16px 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #1A1A2E;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #0d0e11;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.api-sidebar-nav .menu-title:hover {
|
||||
background-color: rgba(0, 73, 180, 0.05);
|
||||
color: #2a69de;
|
||||
background-color: transparent;
|
||||
}
|
||||
.api-sidebar-nav .menu-title.active {
|
||||
font-weight: 700;
|
||||
color: #0049b4;
|
||||
}
|
||||
.api-sidebar-nav .menu-title .api-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background-color: rgba(0, 73, 180, 0.1);
|
||||
color: #0049b4;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.api-sidebar-nav .menu-title.active .api-count {
|
||||
background-color: #0049b4;
|
||||
color: #FFFFFF;
|
||||
color: #2a69de;
|
||||
}
|
||||
.api-sidebar-nav .accordion-section .menu-title.accordion-trigger .menu-title-text {
|
||||
flex: 1;
|
||||
@@ -9935,9 +10095,6 @@ button.djb-comment-submit:disabled {
|
||||
|
||||
.api-market-content {
|
||||
flex: 1;
|
||||
padding-top: 80px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10017,7 +10174,7 @@ button.djb-comment-submit:disabled {
|
||||
|
||||
.api-market-search {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
width: 228px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-market-search {
|
||||
@@ -10031,8 +10188,9 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
.api-market-search input {
|
||||
flex: 1;
|
||||
padding: 12px 48px 12px 16px;
|
||||
border: 1px solid #E2E8F0;
|
||||
height: 44px;
|
||||
padding: 0 40px 0 16px;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
@@ -10043,128 +10201,144 @@ button.djb-comment-submit:disabled {
|
||||
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
|
||||
}
|
||||
.api-market-search input::placeholder {
|
||||
color: #94A3B8;
|
||||
color: #7f8a95;
|
||||
}
|
||||
.api-market-search .search-submit-btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
color: #64748B;
|
||||
}
|
||||
.api-market-search .search-submit-btn:hover {
|
||||
background: #EFF6FF;
|
||||
color: #0049b4;
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
.api-market-search .search-submit-btn:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
.api-market-search .search-submit-btn .search-icon {
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
.api-market-search .search-submit-btn svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.api-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 320px);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
.api-card-grid {
|
||||
grid-template-columns: repeat(2, 312px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-card-grid {
|
||||
grid-template-columns: repeat(2, 320px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.api-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 20px;
|
||||
border: 1px solid #DDDDDD;
|
||||
box-shadow: 0px 4px 2px rgba(194, 194, 194, 0.25);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
border: 1px solid #E2E8F0;
|
||||
width: 100%;
|
||||
height: 312px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.api-card:active {
|
||||
transform: scale(0.98);
|
||||
.api-card:hover, .api-card:focus, .api-card:active {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 8px 12px rgba(194, 194, 194, 0.4);
|
||||
background: linear-gradient(to bottom, #50caff, #2088ff);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.api-card-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.api-card:hover .api-card-badge, .api-card:focus .api-card-badge, .api-card:active .api-card-badge {
|
||||
background-color: #d8f0ff;
|
||||
}
|
||||
|
||||
.api-card-group-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
.api-card:hover .api-card-title,
|
||||
.api-card:hover .api-card-desc, .api-card:focus .api-card-title,
|
||||
.api-card:focus .api-card-desc, .api-card:active .api-card-title,
|
||||
.api-card:active .api-card-desc {
|
||||
color: #ffffff;
|
||||
}
|
||||
.api-card-badge {
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 32px;
|
||||
background-color: #f2f2f3;
|
||||
border-radius: 10px;
|
||||
padding: 2px 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F8FAFC;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.api-card-group-icon img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.api-card-group-icon i {
|
||||
font-size: 16px;
|
||||
color: #0049b4;
|
||||
}
|
||||
|
||||
.api-card-group-name {
|
||||
.api-card-badge span {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #1b4ab7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.api-card-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
line-height: 1.2;
|
||||
.api-card-title {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
left: 36px;
|
||||
right: 40px;
|
||||
font-size: 18px;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.api-card-description {
|
||||
.api-card-desc {
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
left: 36px;
|
||||
right: 40px;
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
line-height: 1.6;
|
||||
font-family: "Spoqa Han Sans Neo", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
.api-card-image {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
right: 20px;
|
||||
width: 93px;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.api-card-image img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.api-empty-state {
|
||||
@@ -10546,7 +10720,8 @@ button.djb-comment-submit:disabled {
|
||||
min-width: 500px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.api-detail-card .detail-content table th, .api-detail-card .detail-content table td {
|
||||
.api-detail-card .detail-content table th,
|
||||
.api-detail-card .detail-content table td {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
@@ -14768,26 +14943,64 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.notice-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #212529;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-detail-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-date {
|
||||
font-size: 16px;
|
||||
color: #767e89;
|
||||
font-weight: 400;
|
||||
margin: 0 0 17px 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-detail-date {
|
||||
font-size: 14px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-detail-title-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.notice-type-badge--incident {
|
||||
border: 1px solid #f1c2d6;
|
||||
background: #fbe7e9;
|
||||
color: #bb1026;
|
||||
}
|
||||
.notice-type-badge--maintenance {
|
||||
background: #fff4d6;
|
||||
color: #9a6700;
|
||||
}
|
||||
|
||||
.notice-detail-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
line-height: 1;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
@@ -14796,19 +15009,13 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-date {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #515151;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-detail-date {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-attachment {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px 20px;
|
||||
background: #f8fbfe;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.notice-detail-attachment .attachment-list {
|
||||
display: flex;
|
||||
@@ -14821,54 +15028,79 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.notice-attachment-link {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #515151;
|
||||
font-size: 18px;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-attachment-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.notice-attachment-link:hover {
|
||||
color: #0049b4;
|
||||
}
|
||||
.notice-attachment-link svg {
|
||||
flex-shrink: 0;
|
||||
color: #515151;
|
||||
color: #333;
|
||||
}
|
||||
.notice-attachment-link:hover svg {
|
||||
color: #0049b4;
|
||||
}
|
||||
.notice-attachment-link .attachment-label {
|
||||
margin-right: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
.notice-attachment-link .attachment-filename {
|
||||
color: #515151;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.notice-detail-incident-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.notice-detail-incident-info .detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
border-top: 1px solid #e3e8f0;
|
||||
border-bottom: 1px solid #e3e8f0;
|
||||
}
|
||||
.notice-detail-incident-info .detail-table tr {
|
||||
border-bottom: 1px solid #e3e8f0;
|
||||
}
|
||||
.notice-detail-incident-info .detail-table th {
|
||||
background: #f9f9f9;
|
||||
height: 43px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
.notice-detail-incident-info .detail-table td {
|
||||
padding-left: 19px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.notice-detail-content {
|
||||
padding: 20px 0 60px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 48px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
background: #F6F9FB;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
min-height: 280px;
|
||||
font-size: 16px;
|
||||
color: #1A1A2E;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
min-height: 280px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notice-content-body {
|
||||
padding: 24px;
|
||||
min-height: 200px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.notice-content-body p {
|
||||
@@ -14897,46 +15129,40 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.notice-content-body li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.notice-content-body {
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.btn-notice-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
width: 247px;
|
||||
height: 60px;
|
||||
background: #E5E7EB;
|
||||
background: #2a69de;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #5F666C;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.btn-notice-list {
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
min-width: 120px;
|
||||
padding: 0 20px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.btn-notice-list:hover {
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-notice-list:active {
|
||||
transform: scale(0.98);
|
||||
@@ -19149,11 +19375,7 @@ body.commission-print-page .btn-primary:hover {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.signup-guide-v2 {
|
||||
background-color: #fff;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero {
|
||||
.service-hero {
|
||||
background: linear-gradient(to right, #eff9fe, #fcfeff);
|
||||
border: 1px solid #9cc2ff;
|
||||
padding: 60px 0;
|
||||
@@ -19165,7 +19387,7 @@ body.commission-print-page .btn-primary:hover {
|
||||
transform: translateX(-50%);
|
||||
margin-top: 40px;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__inner {
|
||||
.service-hero__inner {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -19173,7 +19395,7 @@ body.commission-print-page .btn-primary:hover {
|
||||
gap: 138px;
|
||||
padding: 0 37px;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__icon-wrapper {
|
||||
.service-hero__icon-wrapper {
|
||||
width: 230px;
|
||||
height: 167px;
|
||||
position: relative;
|
||||
@@ -19184,13 +19406,13 @@ body.commission-print-page .btn-primary:hover {
|
||||
font-size: 14px;
|
||||
color: #adb5bd;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__content {
|
||||
.service-hero__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__badge {
|
||||
.service-hero__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -19199,30 +19421,35 @@ body.commission-print-page .btn-primary:hover {
|
||||
border: 1px solid #d1e6f0;
|
||||
border-radius: 38px;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__badge-dot {
|
||||
.service-hero__badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__badge-text {
|
||||
.service-hero__badge-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1b4ab7;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__title {
|
||||
.service-hero__title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
.signup-guide-v2 .signup-hero__desc {
|
||||
.service-hero__desc {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #6678ad;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signup-guide-v2 {
|
||||
background-color: #fff;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.signup-guide-v2 .signup-info-box {
|
||||
background: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 174 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 149 KiB |
@@ -20,6 +20,7 @@ $pagination-text-disabled: #adb5bd;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $pagination-gap;
|
||||
margin-top:50px;
|
||||
|
||||
// Page navigation buttons (first, prev, next, last)
|
||||
.page-first,
|
||||
|
||||
@@ -275,10 +275,138 @@
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Board Table - Standard BBS design (Figma: 165-125)
|
||||
// Used in: Notice, Q&A, FAQ etc.
|
||||
// -----------------------------------------------------------------------------
|
||||
.board-table {
|
||||
width: 100%;
|
||||
border-top: 1px solid #c4c7c8;
|
||||
|
||||
&-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
// Table Header - Gray background (#f9f9f9)
|
||||
.board-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f9f9f9;
|
||||
height: 50px;
|
||||
padding: 0 45px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
font-size: 14px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Table Body
|
||||
.board-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Table Row
|
||||
.board-table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 45px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
transition: background-color 0.2s;
|
||||
background: #ffffff;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8fbfe;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.row-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
justify-content: flex-start;
|
||||
width: 100% !important;
|
||||
|
||||
&::before {
|
||||
content: attr(data-label);
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
margin-right: 10px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
justify-content: flex-start;
|
||||
white-space: normal;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
&::before { display: none; }
|
||||
}
|
||||
|
||||
.notice-title-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Mobile number prefix [1] [2] etc
|
||||
.notice-number {
|
||||
display: none;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--number {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// List Table - Modern design with colored header (Figma: 984-2173)
|
||||
// Used in: User management, API key list, etc.
|
||||
// Refined: Clean Minimal sizing with original KJB colors
|
||||
// -----------------------------------------------------------------------------
|
||||
.list-table {
|
||||
width: 100%;
|
||||
|
||||
@@ -8,38 +8,128 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.api-market-container {
|
||||
// display: flex;
|
||||
// max-width: 1240px;
|
||||
// margin: 0 auto;
|
||||
// min-height: 100vh;
|
||||
// background-color: transparent;
|
||||
// position: relative;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 40px;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background-color: $white;
|
||||
gap: 60px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Hero Section
|
||||
.api-market-hero {
|
||||
background: linear-gradient(to right, #eff9fe, #fcfeff);
|
||||
border: 1px solid #e3e8f0;
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: calc(100vw - 80px);
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
&__inner {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 138px;
|
||||
padding: 0 37px;
|
||||
}
|
||||
|
||||
&__illust {
|
||||
.cloud-image-placeholder {
|
||||
width: 331px;
|
||||
height: 229px;
|
||||
background: url('../img/hero_image_1.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1e6f0;
|
||||
border-radius: 38px;
|
||||
font-size: 13px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1b4ab7;
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1b4ab7;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Navigation
|
||||
.api-market-sidebar {
|
||||
width: 283px;
|
||||
background-color: #F8FBFD;
|
||||
width: 213px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e3e8f0;
|
||||
border-radius: 20px;
|
||||
padding: $spacing-2xl $spacing-lg;
|
||||
padding: 28px 30px;
|
||||
position: sticky;
|
||||
top: $spacing-lg;
|
||||
height: calc(100vh - 32px);
|
||||
top: 40px;
|
||||
height: fit-content;
|
||||
flex-shrink: 0;
|
||||
margin: $spacing-md;
|
||||
margin-right: 40px;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: 240px;
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 60px; // Below mobile header
|
||||
top: 60px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: $shadow-lg;
|
||||
z-index: $z-index-modal;
|
||||
height: calc(100vh - 60px); // Full height minus header
|
||||
height: calc(100vh - 60px);
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -49,67 +139,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
.api-sidebar-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $spacing-xl;
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.api-sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
|
||||
.menu-section {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
padding: 16px 10px;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-regular;
|
||||
color: $text-dark;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 500;
|
||||
color: #0d0e11;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($primary-blue, 0.05);
|
||||
color: #2a69de;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
.api-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 $spacing-sm;
|
||||
background-color: rgba($primary-blue, 0.1);
|
||||
color: $primary-blue;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: $border-radius-full;
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
&.active .api-count {
|
||||
background-color: $primary-blue;
|
||||
color: $white;
|
||||
font-weight: 700;
|
||||
color: #2a69de;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,9 +280,8 @@
|
||||
// Main Content Area
|
||||
.api-market-content {
|
||||
flex: 1;
|
||||
padding-top: $spacing-5xl;
|
||||
padding-left: $spacing-sm;
|
||||
padding-right: $spacing-sm;
|
||||
// padding-left: $spacing-sm;
|
||||
// padding-right: $spacing-sm;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -311,7 +370,7 @@
|
||||
// Search Box
|
||||
.api-market-search {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
width: 228px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
@@ -325,53 +384,41 @@
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 12px 48px 12px $spacing-md;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: $font-size-sm;
|
||||
height: 44px;
|
||||
padding: 0 40px 0 16px;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: $transition-base;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-blue;
|
||||
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
|
||||
border-color: #0049b4;
|
||||
box-shadow: 0 0 0 3px rgba(#0049b4, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
color: #7f8a95;
|
||||
}
|
||||
}
|
||||
|
||||
.search-submit-btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $border-radius-md;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: $transition-base;
|
||||
color: $text-gray;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
color: $primary-blue;
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -381,101 +428,131 @@
|
||||
// Card Grid
|
||||
.api-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 320px); // 3 cards per row on desktop (고정폭)
|
||||
gap: $spacing-lg;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Tablet view - 2 cards per row (고정폭)
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: repeat(2, 320px);
|
||||
// Tablet view
|
||||
@media (max-width: 1300px) {
|
||||
grid-template-columns: repeat(2, 312px);
|
||||
}
|
||||
|
||||
// Mobile view - 1 card per row (화면에 맞춤)
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
// Mobile view
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// API Card
|
||||
.api-card {
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-xl;
|
||||
box-shadow: $shadow-sm;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #DDDDDD;
|
||||
box-shadow: 0px 4px 2px rgba(194, 194, 194, 0.25);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
border: 1px solid $border-gray;
|
||||
width: 100%;
|
||||
height: 312px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 8px 12px rgba(194, 194, 194, 0.4);
|
||||
background: linear-gradient(to bottom, #50caff, #2088ff);
|
||||
border: none;
|
||||
|
||||
// Group Info Section (Icon + Name)
|
||||
.api-card-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
.api-card-badge {
|
||||
background-color: #d8f0ff;
|
||||
}
|
||||
|
||||
.api-card-group-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $gray-bg;
|
||||
border-radius: $border-radius-md;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
.api-card-title,
|
||||
.api-card-desc {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
color: $primary-blue;
|
||||
&-badge {
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 32px;
|
||||
background-color: #f2f2f3;
|
||||
border-radius: 10px;
|
||||
padding: 2px 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 500;
|
||||
color: #1b4ab7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-card-group-name {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
&-title {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
left: 36px;
|
||||
right: 40px;
|
||||
font-size: 18px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// API Name (Title)
|
||||
.api-card-name {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
line-height: $line-height-tight;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
&-desc {
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
left: 36px;
|
||||
right: 40px;
|
||||
font-size: 14px;
|
||||
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// API Description
|
||||
.api-card-description {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
line-height: $line-height-normal;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
&-image {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
right: 20px;
|
||||
width: 93px;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty State
|
||||
@@ -832,6 +909,7 @@
|
||||
// Mobile Responsive Styles (sm: 768px)
|
||||
// -----------------------------------------------------------------------------
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
|
||||
// API Detail Tabs - Mobile
|
||||
.api-detail-tabs {
|
||||
gap: 0;
|
||||
@@ -928,7 +1006,8 @@
|
||||
min-width: 500px; // 테이블 최소 너비 보장
|
||||
margin: $spacing-sm 0;
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
white-space: nowrap;
|
||||
@@ -1003,4 +1082,4 @@
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,25 +78,63 @@
|
||||
|
||||
// Notice Detail Header - Title and Date in one row
|
||||
.notice-detail-header {
|
||||
margin-bottom: 26px;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-date {
|
||||
font-size: 16px;
|
||||
color: #767e89;
|
||||
font-weight: 400;
|
||||
margin: 0 0 17px 0;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 14px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-title-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 1px solid #212529;
|
||||
margin-bottom: $spacing-xl;
|
||||
gap: 15px;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
|
||||
&--incident {
|
||||
border: 1px solid #f1c2d6;
|
||||
background: #fbe7e9;
|
||||
color: #bb1026;
|
||||
}
|
||||
|
||||
&--maintenance {
|
||||
background: #fff4d6;
|
||||
color: #9a6700;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-title {
|
||||
font-size: 24px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
line-height: 1;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
@@ -104,24 +142,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.notice-detail-date {
|
||||
font-size: 24px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #515151;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Notice Attachment Section
|
||||
.notice-detail-attachment {
|
||||
margin-bottom: $spacing-lg;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px 20px;
|
||||
background: #f8fbfe;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
@@ -131,25 +164,20 @@
|
||||
}
|
||||
|
||||
.notice-attachment-link {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
color: #515151;
|
||||
font-size: 18px;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: $transition-base;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
color: #515151;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
@@ -157,32 +185,68 @@
|
||||
}
|
||||
|
||||
.attachment-label {
|
||||
margin-right: $spacing-md;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.attachment-filename {
|
||||
color: #515151;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// Incident Info Table
|
||||
.notice-detail-incident-info {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
border-top: 1px solid #e3e8f0;
|
||||
border-bottom: 1px solid #e3e8f0;
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #e3e8f0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f9f9f9;
|
||||
height: 43px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-left: 19px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notice Content Section
|
||||
.notice-detail-content {
|
||||
padding: 20px 0 60px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: $spacing-3xl;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
background: #F6F9FB;
|
||||
border-radius: 20px;
|
||||
padding: $spacing-2xl;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
min-height: 280px;
|
||||
font-size: $font-size-base;
|
||||
color: $text-dark;
|
||||
line-height: $line-height-loose;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: $spacing-lg;
|
||||
min-height: 200px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
// Rich text content styling
|
||||
@@ -218,17 +282,13 @@
|
||||
li {
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
background: $white;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Notice Detail Actions
|
||||
.notice-detail-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
// List Button - Figma Design
|
||||
@@ -236,29 +296,28 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
width: 247px;
|
||||
height: 60px;
|
||||
background: #E5E7EB;
|
||||
background: #2a69de;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #5F666C;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
min-width: 120px;
|
||||
padding: 0 20px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(#E5E7EB, 5%);
|
||||
background: darken(#2a69de, 10%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -200,95 +200,96 @@ $service-card-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgb
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 회원가입 안내 페이지 V2 (New Figma Design)
|
||||
// Common Service Hero
|
||||
// =============================================================================
|
||||
.service-hero {
|
||||
background: linear-gradient(to right, #eff9fe, #fcfeff);
|
||||
border: 1px solid #9cc2ff;
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.signup-guide-v2 {
|
||||
background-color: #fff;
|
||||
padding-bottom: 100px;
|
||||
// `.container` 영역을 벗어나 브라우저 전체 넓이(Full-width)를 차지하게 만드는 마법의 코드
|
||||
width: calc(100vw - 80px);
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 40px;
|
||||
|
||||
.signup-hero {
|
||||
background: linear-gradient(to right, #eff9fe, #fcfeff);
|
||||
border: 1px solid #9cc2ff;
|
||||
padding: 60px 0;
|
||||
&__inner {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 138px;
|
||||
padding: 0 37px;
|
||||
}
|
||||
|
||||
// `.container` 영역을 벗어나 브라우저 전체 넓이(Full-width)를 차지하게 만드는 마법의 코드
|
||||
width: calc(100vw - 80px);
|
||||
&__icon-wrapper {
|
||||
width: 230px;
|
||||
height: 167px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 40px;
|
||||
// Placeholder since we don't have the 3D icon
|
||||
background: radial-gradient(circle at 50% 120%, rgba(0, 73, 180, 0.1), transparent 70%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 138px;
|
||||
padding: 0 37px;
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1e6f0;
|
||||
border-radius: 38px;
|
||||
|
||||
&-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__icon-wrapper {
|
||||
width: 230px;
|
||||
height: 167px;
|
||||
position: relative;
|
||||
// Placeholder since we don't have the 3D icon
|
||||
background: radial-gradient(circle at 50% 120%, rgba(0, 73, 180, 0.1), transparent 70%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1e6f0;
|
||||
border-radius: 38px;
|
||||
|
||||
&-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1b4ab7;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
&-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #6678ad;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
color: #1b4ab7;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #6678ad;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 회원가입 안내 페이지 V2 (New Figma Design)
|
||||
// =============================================================================
|
||||
.signup-guide-v2 {
|
||||
background-color: #fff;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.signup-info-box {
|
||||
background: #f5f5f5;
|
||||
|
||||
@@ -1,42 +1,43 @@
|
||||
<!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="~{layout/djbank_title_layout}">
|
||||
<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="~{layout/djbank_title_layout}">
|
||||
|
||||
<body>
|
||||
<th:block layout:fragment="title">
|
||||
<div class="page-title-banner" style="margin-bottom: 24px;">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||
<h1>API 마켓</h1>
|
||||
</div>
|
||||
</th:block>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<!-- Hero Section -->
|
||||
<section class="service-hero">
|
||||
<div class="service-hero__inner">
|
||||
<div class="service-hero__icon-wrapper">
|
||||
<img th:src="@{/img/keyimage/api_img.svg}" alt="OPEN API 3D 아이콘"
|
||||
style="width: 100%; height: 100%; object-fit: contain;" />
|
||||
</div>
|
||||
<div class="service-hero__content">
|
||||
<div class="service-hero__badge">
|
||||
<span class="service-hero__badge-dot"></span>
|
||||
<span class="service-hero__badge-text">OPEN API 목록</span>
|
||||
</div>
|
||||
<h1 class="service-hero__title">OPEN API</h1>
|
||||
<p class="service-hero__desc">비즈니스 확장을 위한 DJBank의 핵심 API 인프라를 제공합니다.<br>원하는 API를 선택하여 상세 가이드를 확인하고, 테스트 키를
|
||||
발급받아 지금 바로 개발을 시작해 보세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="api-market-container">
|
||||
<section class="api-market-container">
|
||||
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="api-market-sidebar" id="apiSidebar">
|
||||
<!-- Sidebar Header Image -->
|
||||
<div class="api-sidebar-header">
|
||||
<img th:src="@{/img/api_sidebar.png}" alt="API">
|
||||
</div>
|
||||
|
||||
<nav class="api-sidebar-nav">
|
||||
<aside class="service-sidebar" id="apiSidebar">
|
||||
<nav class="service-nav">
|
||||
<!-- All APIs -->
|
||||
<div class="menu-section">
|
||||
<div class="menu-title" th:classappend="${selected == '-1'} ? 'active'" data-group="">
|
||||
전체
|
||||
</div>
|
||||
<div class="service-nav__item js-menu-trigger" style="cursor: pointer;"
|
||||
th:classappend="${selected == '-1' || selected == null} ? 'service-nav__item--active' : ''" data-group="">
|
||||
전체
|
||||
</div>
|
||||
|
||||
<!-- Service Categories -->
|
||||
<div class="menu-section" th:each="service : ${services}">
|
||||
<div class="menu-title"
|
||||
th:classappend="${selected == service.id} ? 'active'"
|
||||
th:data-group="${service.id}">
|
||||
[[${service.groupName}]]
|
||||
</div>
|
||||
<div class="service-nav__item js-menu-trigger" style="cursor: pointer;" th:each="service : ${services}"
|
||||
th:classappend="${selected == service.id} ? 'service-nav__item--active' : ''" th:data-group="${service.id}">
|
||||
[[${service.groupName}]]
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
@@ -59,15 +60,15 @@
|
||||
</div>
|
||||
<div class="api-market-search">
|
||||
<form id="searchForm" th:action="@{/apis}" method="get">
|
||||
<input type="hidden" name="groupIds" th:value="${search.groupIds != null and !search.groupIds.isEmpty() ? search.groupIds[0] : ''}"/>
|
||||
<input type="text"
|
||||
class="search-input"
|
||||
name="keyword"
|
||||
th:value="${search.keyword}"
|
||||
placeholder="어떤 API를 찾고 계신가요?">
|
||||
<input type="hidden" name="groupIds"
|
||||
th:value="${search.groupIds != null and !search.groupIds.isEmpty() ? search.groupIds[0] : ''}" />
|
||||
<input type="text" class="search-input" name="keyword" th:value="${search.keyword}"
|
||||
placeholder="검색어를 입력하세요.">
|
||||
<button type="submit" class="search-submit-btn" aria-label="검색">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.23047 0C14.3285 0 18.4618 4.0539 18.4619 9.05469C18.4619 11.1083 17.7634 13.0014 16.5889 14.5205C16.5913 14.5229 16.5942 14.5249 16.5967 14.5273L19.5498 17.4238C20.1502 18.0131 20.1501 18.9683 19.5498 19.5576C18.949 20.147 17.9748 20.147 17.374 19.5576L14.4209 16.6621C14.3966 16.6383 14.3749 16.6119 14.3525 16.5869C12.8868 17.5478 11.1257 18.1094 9.23047 18.1094C4.13258 18.1092 0 14.0554 0 9.05469C0.000110268 4.05404 4.13265 0.000222701 9.23047 0ZM9.23047 3.01855C5.83201 3.01878 3.07726 5.721 3.07715 9.05469C3.07715 12.3885 5.83194 15.0916 9.23047 15.0918C12.6292 15.0918 15.3848 12.3886 15.3848 9.05469C15.3847 5.72086 12.6291 3.01855 9.23047 3.01855Z" fill="#515961"/>
|
||||
<path
|
||||
d="M9.23047 0C14.3285 0 18.4618 4.0539 18.4619 9.05469C18.4619 11.1083 17.7634 13.0014 16.5889 14.5205C16.5913 14.5229 16.5942 14.5249 16.5967 14.5273L19.5498 17.4238C20.1502 18.0131 20.1501 18.9683 19.5498 19.5576C18.949 20.147 17.9748 20.147 17.374 19.5576L14.4209 16.6621C14.3966 16.6383 14.3749 16.6119 14.3525 16.5869C12.8868 17.5478 11.1257 18.1094 9.23047 18.1094C4.13258 18.1092 0 14.0554 0 9.05469C0.000110268 4.05404 4.13265 0.000222701 9.23047 0ZM9.23047 3.01855C5.83201 3.01878 3.07726 5.721 3.07715 9.05469C3.07715 12.3885 5.83194 15.0916 9.23047 15.0918C12.6292 15.0918 15.3848 12.3886 15.3848 9.05469C15.3847 5.72086 12.6291 3.01855 9.23047 3.01855Z"
|
||||
fill="#515961" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@@ -76,34 +77,26 @@
|
||||
|
||||
<!-- API Cards Grid -->
|
||||
<div class="api-card-grid" th:if="${apis != null and !apis.isEmpty()}">
|
||||
<div class="api-card"
|
||||
th:each="api : ${apis}"
|
||||
th:data-href="@{/apis/detail(id=${api.apiId})}"
|
||||
role="button"
|
||||
tabindex="0">
|
||||
<!-- Group Info -->
|
||||
<div class="api-card-group">
|
||||
<div class="api-card-group-icon">
|
||||
<img th:if="${api.mainIcon}"
|
||||
th:src="${api.mainIcon}"
|
||||
th:alt="${api.apiGroupName}"
|
||||
onerror="this.style.display='none'; this.parentElement.innerHTML='<i class=\'fas fa-cube\'></i>'">
|
||||
<i th:if="${#strings.isEmpty(api.mainIcon)}" class="fas fa-cube"></i>
|
||||
</div>
|
||||
<span class="api-card-group-name" th:text="${api.apiGroupName}">
|
||||
그룹 이름
|
||||
</span>
|
||||
<div class="api-card" th:each="api : ${apis}" th:data-href="@{/apis/detail(id=${api.apiId})}" role="button"
|
||||
tabindex="0">
|
||||
|
||||
<!-- Group Badge -->
|
||||
<div class="api-card-badge">
|
||||
<span th:text="${api.apiGroupName}">그룹 이름</span>
|
||||
</div>
|
||||
|
||||
<!-- API Name -->
|
||||
<h3 class="api-card-name" th:text="${api.apiName}">
|
||||
API 이름
|
||||
</h3>
|
||||
<h3 class="api-card-title" th:text="${api.apiName}">API 이름</h3>
|
||||
|
||||
<!-- API Description -->
|
||||
<p class="api-card-description" th:text="${api.apiSimpleDescription ?: 'API 설명이 없습니다.'}">
|
||||
API 설명
|
||||
</p>
|
||||
<p class="api-card-desc" th:text="${api.apiSimpleDescription ?: 'API 설명이 없습니다.'}">API 설명</p>
|
||||
|
||||
<!-- API Image (Bottom Right) -->
|
||||
<div class="api-card-image">
|
||||
<img th:if="${api.mainIcon}" th:src="${api.mainIcon}" th:alt="${api.apiGroupName}"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,14 +108,14 @@
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</section>
|
||||
</th:block>
|
||||
</section>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// DOM Elements
|
||||
const sidebar = document.getElementById('apiSidebar');
|
||||
const mobileToggle = document.getElementById('mobileToggle');
|
||||
@@ -133,9 +126,9 @@
|
||||
|
||||
// API Card Click Handlers
|
||||
const apiCards = document.querySelectorAll('.api-card');
|
||||
apiCards.forEach(function(card) {
|
||||
apiCards.forEach(function (card) {
|
||||
// Click handler
|
||||
card.addEventListener('click', function() {
|
||||
card.addEventListener('click', function () {
|
||||
const href = this.getAttribute('data-href');
|
||||
if (href) {
|
||||
window.location.href = href;
|
||||
@@ -143,7 +136,7 @@
|
||||
});
|
||||
|
||||
// Keyboard accessibility
|
||||
card.addEventListener('keypress', function(e) {
|
||||
card.addEventListener('keypress', function (e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const href = this.getAttribute('data-href');
|
||||
@@ -155,9 +148,9 @@
|
||||
});
|
||||
|
||||
// Category/Service Selection
|
||||
const menuTitles = document.querySelectorAll('.menu-title');
|
||||
menuTitles.forEach(function(title) {
|
||||
title.addEventListener('click', function(e) {
|
||||
const menuTitles = document.querySelectorAll('.js-menu-trigger');
|
||||
menuTitles.forEach(function (title) {
|
||||
title.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const groupId = this.getAttribute('data-group');
|
||||
@@ -175,7 +168,7 @@
|
||||
});
|
||||
|
||||
// Search on Enter key
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
searchInput.addEventListener('keypress', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
searchForm.submit();
|
||||
@@ -184,7 +177,7 @@
|
||||
|
||||
// Mobile Menu Toggle
|
||||
if (mobileToggle && sidebar && mobileOverlay) {
|
||||
mobileToggle.addEventListener('click', function(e) {
|
||||
mobileToggle.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -202,14 +195,14 @@
|
||||
});
|
||||
|
||||
// Add touch event for better mobile support
|
||||
mobileToggle.addEventListener('touchend', function(e) {
|
||||
mobileToggle.addEventListener('touchend', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.click();
|
||||
});
|
||||
|
||||
// Close menu on overlay click
|
||||
mobileOverlay.addEventListener('click', function() {
|
||||
mobileOverlay.addEventListener('click', function () {
|
||||
sidebar.classList.remove('mobile-open');
|
||||
this.classList.remove('active');
|
||||
mobileToggle.innerHTML = '☰';
|
||||
@@ -217,8 +210,8 @@
|
||||
});
|
||||
|
||||
// Close menu on category selection (mobile)
|
||||
menuTitles.forEach(function(title) {
|
||||
title.addEventListener('click', function() {
|
||||
menuTitles.forEach(function (title) {
|
||||
title.addEventListener('click', function () {
|
||||
if (window.innerWidth <= 768) {
|
||||
sidebar.classList.remove('mobile-open');
|
||||
mobileOverlay.classList.remove('active');
|
||||
@@ -236,7 +229,7 @@
|
||||
}
|
||||
|
||||
// Close mobile menu on resize to desktop
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerWidth > 768 && sidebar.classList.contains('mobile-open')) {
|
||||
sidebar.classList.remove('mobile-open');
|
||||
mobileOverlay.classList.remove('active');
|
||||
@@ -248,4 +241,4 @@
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -3,83 +3,106 @@
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
|
||||
|
||||
<body>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
||||
<h1>FAQ</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="user-management-container">
|
||||
|
||||
<!-- Search and Filter Controls -->
|
||||
<form name="faqForm" th:action="@{/faq_list}" method="post" th:object="${search}" onsubmit="return false;">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
<input type="hidden" name="page" value="1">
|
||||
|
||||
<div class="table-controls">
|
||||
<h2 class="total-count">
|
||||
총 <strong th:text="${page.totalElements}">0</strong>건
|
||||
</h2>
|
||||
|
||||
<div class="search-field">
|
||||
<input type="text"
|
||||
th:field="*{searchWrd}"
|
||||
placeholder="질문 또는 답변 내용으로 검색"
|
||||
onkeypress="if(event.keyCode === 13) { fn_search_faq(); return false; }">
|
||||
<button type="button" class="search-field-btn" onclick="fn_search_faq()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="blind">검색</span>
|
||||
</button>
|
||||
<div class="signup-guide-v2">
|
||||
<!-- Hero Section -->
|
||||
<section class="service-hero">
|
||||
<div class="service-hero__inner">
|
||||
<div class="service-hero__icon-wrapper">
|
||||
<!-- TODO: Update icon to faq icon -->
|
||||
<img th:src="@{/img/keyimage/notice_img.svg}" alt="FAQ 아이콘" style="width: 100%; height: 100%; object-fit: contain;" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- FAQ Accordion -->
|
||||
<div class="faq-accordion" th:if="${!#lists.isEmpty(page.content)}">
|
||||
<div class="faq-item" th:each="faq : ${page.content}">
|
||||
<div class="faq-question">
|
||||
<span class="faq-question-text" th:text="${faq.faqQuestion}">질문 내용이 여기에 표시됩니다.</span>
|
||||
<span class="faq-icon">
|
||||
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content editor-content" th:utext="${faq.faqAnswer}">
|
||||
답변 내용이 여기에 표시됩니다.
|
||||
<div class="service-hero__content">
|
||||
<div class="service-hero__badge">
|
||||
<span class="service-hero__badge-dot"></span>
|
||||
<span class="service-hero__badge-text">FAQ 게시판</span>
|
||||
</div>
|
||||
<h1 class="service-hero__title">FAQ</h1>
|
||||
<p class="service-hero__desc">서비스 이용 중 궁금한 사항에 대한 답변을 빠르게 확인해 보세요<br>카테고리별 분류와 검색을 통해 원하는 정보를 쉽게 찾아보실 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="user-empty-state" th:if="${#lists.isEmpty(page.content)}">
|
||||
<div class="empty-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none" role="img" aria-label="데이터 없음">
|
||||
<circle cx="60" cy="60" r="50" fill="#F3F4F6"/>
|
||||
<rect x="30" y="35" width="60" height="50" rx="4" fill="#E5E7EB" stroke="#D1D5DB" stroke-width="2"/>
|
||||
<line x1="40" y1="50" x2="80" y2="50" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="40" y1="60" x2="72" y2="60" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="40" y1="70" x2="65" y2="70" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="85" cy="80" r="14" fill="#F9FAFB" stroke="#D1D5DB" stroke-width="2"/>
|
||||
<line x1="95" y1="90" x2="102" y2="97" stroke="#D1D5DB" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="81" y1="80" x2="89" y2="80" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>조회된 FAQ가 없습니다</h3>
|
||||
<p>검색 조건을 변경하여 다시 시도해주세요.</p>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="service-main">
|
||||
<!-- Sidebar -->
|
||||
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('faq')}"></th:block>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<section class="service-content">
|
||||
<div class="notice-list-container" style="padding: 0; min-height: auto; margin: 0; background: transparent; box-shadow: none;">
|
||||
|
||||
</section>
|
||||
<!-- Search and Filter Controls -->
|
||||
<form name="faqForm" th:action="@{/faq_list}" method="post" th:object="${search}" onsubmit="return false;">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
<input type="hidden" name="page" value="1">
|
||||
|
||||
<div class="table-controls">
|
||||
<h2 class="total-count">
|
||||
총 <strong th:text="${page.totalElements}">0</strong>건
|
||||
</h2>
|
||||
|
||||
<div class="search-field">
|
||||
<input type="text"
|
||||
th:field="*{searchWrd}"
|
||||
placeholder="질문 또는 답변 내용으로 검색"
|
||||
onkeypress="if(event.keyCode === 13) { fn_search_faq(); return false; }">
|
||||
<button type="button" class="search-field-btn" onclick="fn_search_faq()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="blind">검색</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- FAQ Accordion -->
|
||||
<div class="faq-accordion" th:if="${!#lists.isEmpty(page.content)}">
|
||||
<div class="faq-item" th:each="faq : ${page.content}">
|
||||
<div class="faq-question">
|
||||
<span class="faq-question-q" style="font-family: 'OneShinhan', sans-serif; font-size: 20px; font-weight: 700; color: #555; margin-right: 15px;">Q</span>
|
||||
<span class="faq-question-text" th:text="${faq.faqQuestion}">질문 내용이 여기에 표시됩니다.</span>
|
||||
<span class="faq-icon">
|
||||
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content editor-content" th:utext="${faq.faqAnswer}">
|
||||
답변 내용이 여기에 표시됩니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="user-empty-state" th:if="${#lists.isEmpty(page.content)}">
|
||||
<div class="empty-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none" role="img" aria-label="데이터 없음">
|
||||
<circle cx="60" cy="60" r="50" fill="#F3F4F6"/>
|
||||
<rect x="30" y="35" width="60" height="50" rx="4" fill="#E5E7EB" stroke="#D1D5DB" stroke-width="2"/>
|
||||
<line x1="40" y1="50" x2="80" y2="50" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="40" y1="60" x2="72" y2="60" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="40" y1="70" x2="65" y2="70" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="85" cy="80" r="14" fill="#F9FAFB" stroke="#D1D5DB" stroke-width="2"/>
|
||||
<line x1="95" y1="90" x2="102" y2="97" stroke="#D1D5DB" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="81" y1="80" x2="89" y2="80" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>조회된 FAQ가 없습니다</h3>
|
||||
<p>검색 조건을 변경하여 다시 시도해주세요.</p>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -10,84 +10,107 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section layout:fragment="contentFragment">
|
||||
<div class="notice-detail-container">
|
||||
|
||||
<!-- Notice Header: Title and Date -->
|
||||
<div class="notice-detail-header">
|
||||
<h2 class="notice-detail-title">
|
||||
<span th:if="${portalNotice.noticeType == '3'}"
|
||||
style="display:inline-block;padding:2px 10px;margin-right:8px;border-radius:12px;font-size:14px;vertical-align:middle;background:#fde7e9;color:#c0152a;">장애</span>
|
||||
<span th:if="${portalNotice.noticeType == '2'}"
|
||||
style="display:inline-block;padding:2px 10px;margin-right:8px;border-radius:12px;font-size:14px;vertical-align:middle;background:#fff4d6;color:#9a6700;">점검</span>
|
||||
<span th:text="${portalNotice.noticeSubject}">개인정보처리 방침 정정 공지</span>
|
||||
</h2>
|
||||
<span class="notice-detail-date" th:text="${#temporals.format(portalNotice.createdDate, 'yyyy.MM.dd')}">2025.11.01</span>
|
||||
</div>
|
||||
|
||||
<!-- 장애/점검 정보 영역 -->
|
||||
<div class="notice-detail-incident-info" th:if="${portalNotice.incidentOrMaintenance}"
|
||||
style="margin:16px 0;padding:16px;background:#f7f8fa;border:1px solid #e3e6eb;border-radius:8px;">
|
||||
<table style="width:100%;border-collapse:collapse;">
|
||||
<colgroup>
|
||||
<col style="width:120px;"><col><col style="width:120px;"><col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th style="text-align:left;padding:6px 8px;">시작</th>
|
||||
<td style="padding:6px 8px;"
|
||||
th:text="${portalNotice.startedAt != null ? #temporals.format(portalNotice.startedAt, 'yyyy.MM.dd HH:mm') : '-'}">-</td>
|
||||
<th style="text-align:left;padding:6px 8px;">종료</th>
|
||||
<td style="padding:6px 8px;"
|
||||
th:text="${portalNotice.endAt != null ? #temporals.format(portalNotice.endAt, 'yyyy.MM.dd HH:mm') : '진행중'}">-</td>
|
||||
</tr>
|
||||
<tr th:if="${portalNotice.incidentType}">
|
||||
<th style="text-align:left;padding:6px 8px;">상태</th>
|
||||
<td colspan="3" style="padding:6px 8px;" th:text="${portalNotice.state != null ? portalNotice.state : '-'}">-</td>
|
||||
</tr>
|
||||
<tr th:if="${portalNotice.affectedApis != null and !portalNotice.affectedApis.isEmpty()}">
|
||||
<th style="text-align:left;padding:6px 8px;vertical-align:top;">영향 API</th>
|
||||
<td colspan="3" style="padding:6px 8px;">
|
||||
<ul style="margin:0;padding-left:18px;">
|
||||
<li th:each="api : ${portalNotice.affectedApis}">
|
||||
<strong th:text="${api.apiId}">API_ID</strong>
|
||||
<span th:if="${api.apiName != null and !api.apiName.isEmpty()}"
|
||||
th:text="| - ${api.apiName}|"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Attachment Section -->
|
||||
<div class="notice-detail-attachment" th:if="${!#strings.isEmpty(portalNotice.fileId)}">
|
||||
<div class="attachment-list" th:with="fileInfo=${@fileService.findById(portalNotice.fileId)}">
|
||||
<div class="attachment-item" th:each="fileDetail, status : ${fileInfo.getFileDetails()}">
|
||||
<a th:href="'javascript:fn_downloadFile(\'' + ${fileDetail.fileId} + '\',\''+ ${fileDetail.fileSn} +'\')'" class="notice-attachment-link">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="attachment-label">첨부파일</span>
|
||||
<span class="attachment-filename">[[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]]</span>
|
||||
</a>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<div class="signup-guide-v2">
|
||||
<!-- Hero Section -->
|
||||
<section class="service-hero">
|
||||
<div class="service-hero__inner">
|
||||
<div class="service-hero__icon-wrapper">
|
||||
<img th:src="@{/img/keyimage/notice_img.svg}" alt="공지사항 아이콘"
|
||||
style="width: 100%; height: 100%; object-fit: contain;" />
|
||||
</div>
|
||||
<div class="service-hero__content">
|
||||
<div class="service-hero__badge">
|
||||
<span class="service-hero__badge-dot"></span>
|
||||
<span class="service-hero__badge-text">고객지원</span>
|
||||
</div>
|
||||
<h1 class="service-hero__title">공지사항</h1>
|
||||
<p class="service-hero__desc">DJBank 오픈 API 포털의 주요 안내 및 업데이트 소식을 전해드립니다.<br>원활한 서비스 연동을 위해 변경 사항을 주기적으로 확인해 주시기 바랍니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="notice-detail-content">
|
||||
<div id="noticeDetail" class="notice-content-body editor-content" th:utext="${portalNotice.noticeDetail}">
|
||||
공지사항 내용이 여기에 표시됩니다.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="service-main">
|
||||
<!-- Sidebar -->
|
||||
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('notice')}"></th:block>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="notice-detail-actions">
|
||||
<button type="button" class="btn-notice-list" th:onclick="|location.href='@{/portalnotice}'|">목록</button>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<section class="service-content">
|
||||
<div class="notice-detail-container" style="padding: 0; min-height: auto; margin: 0; background: transparent; box-shadow: none;">
|
||||
|
||||
<!-- Notice Header: Title and Date -->
|
||||
<div class="notice-detail-header">
|
||||
<p class="notice-detail-date" th:text="${#temporals.format(portalNotice.createdDate, 'yyyy.MM.dd')}">2026.06.24</p>
|
||||
<div class="notice-detail-title-wrapper">
|
||||
<span class="notice-type-badge notice-type-badge--incident" th:if="${portalNotice.noticeType == '3'}">장애</span>
|
||||
<span class="notice-type-badge notice-type-badge--maintenance" th:if="${portalNotice.noticeType == '2'}">점검</span>
|
||||
<h2 class="notice-detail-title" th:text="${portalNotice.noticeSubject}">공지사항 디테일 입니다</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 장애/점검 정보 영역 -->
|
||||
<div class="notice-detail-incident-info" th:if="${portalNotice.incidentOrMaintenance}">
|
||||
<table class="detail-table">
|
||||
<colgroup>
|
||||
<col style="width: 160px;"><col><col style="width: 160px;"><col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>시작</th>
|
||||
<td th:text="${portalNotice.startedAt != null ? #temporals.format(portalNotice.startedAt, 'yyyy-MM-dd HH:mm') : '-'}">-</td>
|
||||
<th>끝</th>
|
||||
<td th:text="${portalNotice.endAt != null ? #temporals.format(portalNotice.endAt, 'yyyy-MM-dd HH:mm') : '진행중'}">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>상태</th>
|
||||
<td th:text="${portalNotice.state != null ? portalNotice.state : '-'}">-</td>
|
||||
<th>영향 API</th>
|
||||
<td>
|
||||
<th:block th:if="${portalNotice.affectedApis != null and !portalNotice.affectedApis.isEmpty()}">
|
||||
<span th:each="api, iterStat : ${portalNotice.affectedApis}">
|
||||
<strong th:text="${api.apiId}">API_ID</strong><span th:if="${api.apiName != null and !api.apiName.isEmpty()}" th:text="| - ${api.apiName}|"></span><th:block th:if="${!iterStat.last}">, </th:block>
|
||||
</span>
|
||||
</th:block>
|
||||
<th:block th:unless="${portalNotice.affectedApis != null and !portalNotice.affectedApis.isEmpty()}">-</th:block>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Attachment Section -->
|
||||
<div class="notice-detail-attachment" th:if="${!#strings.isEmpty(portalNotice.fileId)}">
|
||||
<div class="attachment-list" th:with="fileInfo=${@fileService.findById(portalNotice.fileId)}">
|
||||
<div class="attachment-item" th:each="fileDetail, status : ${fileInfo.getFileDetails()}">
|
||||
<a th:href="'javascript:fn_downloadFile(\'' + ${fileDetail.fileId} + '\',\''+ ${fileDetail.fileSn} +'\')'" class="notice-attachment-link">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="attachment-label">첨부파일</span>
|
||||
<span class="attachment-filename">[[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]]</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="notice-detail-content">
|
||||
<div id="noticeDetail" class="notice-content-body editor-content" th:utext="${portalNotice.noticeDetail}">
|
||||
공지사항 내용이 여기에 표시됩니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="notice-detail-actions">
|
||||
<button type="button" class="btn-notice-list" th:onclick="|location.href='@{/portalnotice}'|">목록</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,97 +1,126 @@
|
||||
<!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="~{layout/djbank_title_layout}">
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
|
||||
|
||||
<body>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
||||
<h1>공지사항</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="user-management-container notice-list-container">
|
||||
|
||||
<!-- Search and Filter Controls -->
|
||||
<form name="noticeForm" th:action="@{/portalnotice}" method="get" onsubmit="return false;">
|
||||
<input type="hidden" name="page" value="1">
|
||||
|
||||
<div class="table-controls">
|
||||
<h2 class="total-count">
|
||||
총 <strong th:text="${page.totalElements}">0</strong>건
|
||||
</h2>
|
||||
|
||||
<div class="search-field">
|
||||
<input type="text"
|
||||
name="searchSubjectOrDetail"
|
||||
th:value="${search.searchSubjectOrDetail}"
|
||||
placeholder="제목/내용 검색"
|
||||
onkeypress="if(event.keyCode === 13) { fn_search_notice(); return false; }">
|
||||
<button type="button" class="search-field-btn" onclick="fn_search_notice()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="blind">검색</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Notice Table -->
|
||||
<div class="list-table" th:if="${!portalNotices.isEmpty()}">
|
||||
<!-- Table Header -->
|
||||
<div class="list-table-header">
|
||||
<div class="header-cell" style="width: 80px;">NO</div>
|
||||
<div class="header-cell" style="flex: 1; min-width: 200px;">제목</div>
|
||||
<div class="header-cell" style="width: 120px;">등록일</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Body -->
|
||||
<div class="list-table-body">
|
||||
<div class="list-table-row"
|
||||
th:each="notice, status : ${portalNotices}"
|
||||
th:onclick="'location.href=\'' + @{/portalnotice/detail(id=${notice.id})} + '\''"
|
||||
style="cursor: pointer;">
|
||||
<div class="row-cell row-cell--number" style="width: 80px;" data-label="NO"
|
||||
th:text="${page.totalElements - (page.number * page.size) - status.index}">1</div>
|
||||
<div class="row-cell row-cell--title" style="flex: 1; min-width: 200px;" data-label="제목">
|
||||
<a th:href="@{/portalnotice/detail(id=${notice.id})}" class="notice-title-link">
|
||||
<span class="notice-number" th:text="|[${page.totalElements - (page.number * page.size) - status.index}]|">[1]</span>
|
||||
<span class="notice-fix-badge"
|
||||
th:if="${notice.fixYn == 'Y'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#e5f0ff;color:#0a4ea3;font-weight:600;">고정</span>
|
||||
<span class="notice-type-badge notice-type-badge--incident"
|
||||
th:if="${notice.noticeType == '3'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#fde7e9;color:#c0152a;">장애</span>
|
||||
<span class="notice-type-badge notice-type-badge--maintenance"
|
||||
th:if="${notice.noticeType == '2'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#fff4d6;color:#9a6700;">점검</span>
|
||||
<span th:text="${notice.noticeSubject}">공지사항 제목</span>
|
||||
<span class="file-icon" th:if="${notice.fileId != null and !notice.fileId.isEmpty()}">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row-cell" style="width: 120px;" data-label="등록일"
|
||||
th:text="${#temporals.format(notice.createdDate, 'yyyy.MM.dd')}">2025.01.01</div>
|
||||
</div>
|
||||
</div>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
||||
<h1>공지사항</h1>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="user-empty-state" th:if="${portalNotices.isEmpty()}">
|
||||
<h3>조회된 공지사항이 없습니다</h3>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<div class="signup-guide-v2">
|
||||
<!-- Hero Section -->
|
||||
<section class="service-hero">
|
||||
<div class="service-hero__inner">
|
||||
<div class="service-hero__icon-wrapper">
|
||||
<img th:src="@{/img/keyimage/notice_img.svg}" alt="공지사항 아이콘"
|
||||
style="width: 100%; height: 100%; object-fit: contain;" />
|
||||
</div>
|
||||
<div class="service-hero__content">
|
||||
<div class="service-hero__badge">
|
||||
<span class="service-hero__badge-dot"></span>
|
||||
<span class="service-hero__badge-text">고객지원</span>
|
||||
</div>
|
||||
<h1 class="service-hero__title">공지사항</h1>
|
||||
<p class="service-hero__desc">DJBank 오픈 API 포털의 주요 안내 및 업데이트 소식을 전해드립니다.<br>원활한 서비스 연동을 위해 변경 사항을 주기적으로 확인해
|
||||
주시기 바랍니다</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="service-main">
|
||||
<!-- Sidebar -->
|
||||
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('notice')}"></th:block>
|
||||
|
||||
<!-- Content -->
|
||||
<section class="service-content">
|
||||
<section class="user-management-container notice-list-container"
|
||||
style="padding: 0; min-height: auto; margin: 0; background: transparent; box-shadow: none;">
|
||||
|
||||
<!-- Search and Filter Controls -->
|
||||
<form name="noticeForm" th:action="@{/portalnotice}" method="get" onsubmit="return false;">
|
||||
<input type="hidden" name="page" value="1">
|
||||
|
||||
<div class="table-controls">
|
||||
<h2 class="total-count">
|
||||
총 <strong th:text="${page.totalElements}">0</strong>건
|
||||
</h2>
|
||||
|
||||
<div class="search-field">
|
||||
<input type="text" name="searchSubjectOrDetail" th:value="${search.searchSubjectOrDetail}"
|
||||
placeholder="제목/내용 검색" onkeypress="if(event.keyCode === 13) { fn_search_notice(); return false; }">
|
||||
<button type="button" class="search-field-btn" onclick="fn_search_notice()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
|
||||
stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span class="blind">검색</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Notice Table -->
|
||||
<div class="board-table" th:if="${!portalNotices.isEmpty()}">
|
||||
<!-- Table Header -->
|
||||
<div class="board-table-header">
|
||||
<div class="header-cell" style="width: 80px;">NO</div>
|
||||
<div class="header-cell" style="flex: 1; min-width: 200px;">제목</div>
|
||||
<div class="header-cell" style="width: 120px;">등록일</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Body -->
|
||||
<div class="board-table-body">
|
||||
<div class="board-table-row" th:each="notice, status : ${portalNotices}"
|
||||
th:onclick="'location.href=\'' + @{/portalnotice/detail(id=${notice.id})} + '\''"
|
||||
style="cursor: pointer;">
|
||||
<div class="row-cell row-cell--number" style="width: 80px;" data-label="NO"
|
||||
th:text="${page.totalElements - (page.number * page.size) - status.index}">1</div>
|
||||
<div class="row-cell row-cell--title" style="flex: 1; min-width: 200px;" data-label="제목">
|
||||
<a th:href="@{/portalnotice/detail(id=${notice.id})}" class="notice-title-link">
|
||||
<span class="notice-number"
|
||||
th:text="|[${page.totalElements - (page.number * page.size) - status.index}]|">[1]</span>
|
||||
<span class="notice-fix-badge" th:if="${notice.fixYn == 'Y'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#e5f0ff;color:#0a4ea3;font-weight:600;">고정</span>
|
||||
<span class="notice-type-badge notice-type-badge--incident" th:if="${notice.noticeType == '3'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#fde7e9;color:#c0152a;">장애</span>
|
||||
<span class="notice-type-badge notice-type-badge--maintenance" th:if="${notice.noticeType == '2'}"
|
||||
style="display:inline-block;padding:2px 8px;margin-right:6px;border-radius:10px;font-size:12px;background:#fff4d6;color:#9a6700;">점검</span>
|
||||
<span th:text="${notice.noticeSubject}">공지사항 제목</span>
|
||||
<span class="file-icon" th:if="${notice.fileId != null and !notice.fileId.isEmpty()}">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row-cell" style="width: 120px;" data-label="등록일"
|
||||
th:text="${#temporals.format(notice.createdDate, 'yyyy.MM.dd')}">2025.01.01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="user-empty-state" th:if="${portalNotices.isEmpty()}">
|
||||
<h3>조회된 공지사항이 없습니다</h3>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -111,9 +140,10 @@
|
||||
document.noticeForm.submit();
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$(function () {
|
||||
fn_init();
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -7,19 +7,19 @@
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<div class="signup-guide-v2">
|
||||
<!-- Hero Section -->
|
||||
<section class="signup-hero">
|
||||
<div class="signup-hero__inner">
|
||||
<div class="signup-hero__icon-wrapper">
|
||||
<section class="service-hero">
|
||||
<div class="service-hero__inner">
|
||||
<div class="service-hero__icon-wrapper">
|
||||
<img th:src="@{/img/keyimage/signUp_img.svg}" alt="회원가입 소개 3D 아이콘"
|
||||
style="width: 100%; height: 100%; object-fit: contain;" />
|
||||
</div>
|
||||
<div class="signup-hero__content">
|
||||
<div class="signup-hero__badge">
|
||||
<span class="signup-hero__badge-dot"></span>
|
||||
<span class="signup-hero__badge-text">회원가입 소개</span>
|
||||
<div class="service-hero__content">
|
||||
<div class="service-hero__badge">
|
||||
<span class="service-hero__badge-dot"></span>
|
||||
<span class="service-hero__badge-text">회원가입 소개</span>
|
||||
</div>
|
||||
<h1 class="signup-hero__title">회원 가입 안내</h1>
|
||||
<p class="signup-hero__desc">DJ Bank API 개발자 포털에 방문해 주셔서 감사합니다.<br>DJBank API 사용을 위해서는 다음과 같은
|
||||
<h1 class="service-hero__title">회원 가입 안내</h1>
|
||||
<p class="service-hero__desc">DJ Bank API 개발자 포털에 방문해 주셔서 감사합니다.<br>DJBank API 사용을 위해서는 다음과 같은
|
||||
이용절차로 진행하여야 합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,15 +4,34 @@
|
||||
<!-- Service Left Sidebar Fragment -->
|
||||
<aside class="service-sidebar" th:fragment="sidebar(activeMenu)">
|
||||
<nav class="service-nav">
|
||||
<a th:href="@{/service/intro}"
|
||||
th:classappend="${activeMenu == 'intro'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">API 포탈 소개</a>
|
||||
<a th:href="@{/service/guide}"
|
||||
th:classappend="${activeMenu == 'guide'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">회원가입 안내</a>
|
||||
<a th:href="@{/service/oauth2-guide}"
|
||||
th:classappend="${activeMenu == 'oauth2'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">OAuth2 개발가이드</a>
|
||||
<!-- 서비스 소개 그룹 (Service) -->
|
||||
<th:block th:if="${activeMenu == 'intro' or activeMenu == 'guide' or activeMenu == 'oauth2'}">
|
||||
<a th:href="@{/service/intro}"
|
||||
th:classappend="${activeMenu == 'intro'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">API 포탈 소개</a>
|
||||
<a th:href="@{/service/guide}"
|
||||
th:classappend="${activeMenu == 'guide'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">회원가입 안내</a>
|
||||
<a th:href="@{/service/oauth2-guide}"
|
||||
th:classappend="${activeMenu == 'oauth2'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">OAuth2 개발가이드</a>
|
||||
</th:block>
|
||||
|
||||
<!-- 고객지원 그룹 (Customer Support) -->
|
||||
<th:block th:if="${activeMenu == 'notice' or activeMenu == 'faq' or activeMenu == 'qna' or activeMenu == 'feedback'}">
|
||||
<a th:href="@{/portalnotice}"
|
||||
th:classappend="${activeMenu == 'notice'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">공지사항</a>
|
||||
<a th:href="@{/faq_list}"
|
||||
th:classappend="${activeMenu == 'faq'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">FAQ</a>
|
||||
<a th:href="@{/inquiry}"
|
||||
th:classappend="${activeMenu == 'qna'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">Q&A</a>
|
||||
<a th:href="@{/partnership}"
|
||||
th:classappend="${activeMenu == 'feedback'} ? 'service-nav__item--active' : ''"
|
||||
class="service-nav__item">피드백/개선요청</a>
|
||||
</th:block>
|
||||
</nav>
|
||||
</aside>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user