rlagkdud898 / TAKENSOFT star
mycoms 2024-03-18
240318 김하영 최초커밋
@5e8864077741c6f1531855cb53b29d89d425640e
 
5e88640
resources/css/common.css (added)
+++ resources/css/common.css
@@ -0,0 +1,853 @@
+@charset "utf-8";
+
+:root {
+    /* color */
+    --color-black: #3f454d;
+    --color-gray: #c6c6c6;
+    --color-white: #ffffff;
+    --color-orange: #fbbe28;
+    --color-light-orange: #fff4d7;
+    --color-green: #13833b;
+    --color-red: #ff5d5d;
+    --color-blue: #213f99;
+    --color-darkG: #434343;
+    --color-blueE: #e3ecff;
+    --color-skyBlue: #f5f8ff;
+}
+
+/* 정렬 */
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.align-start {
+    align-items: flex-start;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.align-end {
+    align-items: flex-end;
+}
+
+
+.flex5,
+.flex10,
+.flex15,
+.flex20,
+.flex25,
+.flex30,
+.flex35,
+.flex40,
+.flex45,
+.flex50,
+.flex55,
+.flex60,
+.flex65,
+.flex70,
+.flex75,
+.flex80,
+.flex85,
+.flex90,
+.flex95,
+.flex100 {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.no-gutter>.flex5,
+.no-gutter>.flex10,
+.no-gutter>.flex15,
+.no-gutter>.flex20,
+.no-gutter>.flex25,
+.no-gutter>.flex30,
+.no-gutter>.flex35,
+.no-gutter>.flex40,
+.no-gutter>.flex45,
+.no-gutter>.flex50,
+.no-gutter>.flex55,
+.no-gutter>.flex60,
+.no-gutter>.flex65,
+.no-gutter>.flex70,
+.no-gutter>.flex75,
+.no-gutter>.flex80,
+.no-gutter>.flex85,
+.no-gutter>.flex90,
+.no-gutter>.flex95,
+.no-gutter>.flex100 {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* 정렬 배율 */
+.flex5 {
+    flex: 0 0 5%
+}
+
+.flex10 {
+    flex: 0 0 10%
+}
+
+.flex15 {
+    flex: 0 0 15%
+}
+
+.flex20 {
+    flex: 0 0 20%
+}
+
+.flex25 {
+    flex: 0 0 25%
+}
+
+.flex30 {
+    flex: 0 0 30%
+}
+
+.flex35 {
+    flex: 0 0 35%
+}
+
+.flex40 {
+    flex: 0 0 40%
+}
+
+.flex45 {
+    flex: 0 0 45%
+}
+
+.flex50 {
+    flex: 0 0 50%
+}
+
+.flex55 {
+    flex: 0 0 55%
+}
+
+.flex60 {
+    flex: 0 0 60%
+}
+
+.flex65 {
+    flex: 0 0 65%
+}
+
+.flex70 {
+    flex: 0 0 70%
+}
+
+.flex75 {
+    flex: 0 0 75%
+}
+
+.flex80 {
+    flex: 0 0 80%
+}
+
+.flex85 {
+    flex: 0 0 85%
+}
+
+
+.flex90 {
+    flex: 0 0 90%
+}
+
+.flex95 {
+    flex: 0 0 95%
+}
+
+.flex100 {
+    flex: 0 0 100%;
+}
+
+/* 너비 */
+.w10 {
+    width: 10%;
+}
+
+.w20 {
+    width: 20%;
+}
+
+.w30 {
+    width: 30%;
+}
+
+.w40 {
+    width: 40%;
+}
+
+.w50 {
+    width: 50%;
+}
+
+.w60 {
+    width: 60%;
+}
+
+.w70 {
+    width: 70%;
+}
+
+.w80 {
+    width: 80%;
+}
+
+.w90 {
+    width: 90%;
+}
+
+.w100 {
+    width: 100%;
+}
+
+
+
+/* 마진 */
+.ml0 {
+    margin-left: 0px;
+}
+
+.ml5 {
+    margin-left: 5px;
+}
+
+.ml10 {
+    margin-left: 10px;
+}
+
+.ml20 {
+    margin-left: 20px;
+}
+
+.ml30 {
+    margin-left: 30px;
+}
+
+.ml40 {
+    margin-left: 40px;
+}
+
+.ml50 {
+    margin-left: 50px;
+}
+
+.ml60 {
+    margin-left: 60px;
+}
+
+.ml70 {
+    margin-left: 70px;
+}
+
+.ml80 {
+    margin-left: 80px;
+}
+
+.ml90 {
+    margin-left: 90px;
+}
+
+.ml100 {
+    margin-left: 100px;
+}
+
+.mr0 {
+    margin-right: 0px;
+}
+
+.mr5 {
+    margin-right: 5px;
+}
+
+.mr10 {
+    margin-right: 10px;
+}
+
+.mr20 {
+    margin-right: 20px;
+}
+
+.mr30 {
+    margin-right: 30px;
+}
+
+.mr40 {
+    margin-right: 40px;
+}
+
+.mr50 {
+    margin-right: 50px;
+}
+
+.mr60 {
+    margin-right: 60px;
+}
+
+.mr70 {
+    margin-right: 70px;
+}
+
+.mr80 {
+    margin-right: 80px;
+}
+
+.mr90 {
+    margin-right: 90px;
+}
+
+.mr100 {
+    margin-right: 100px;
+}
+
+.mt0 {
+    margin-top: 0px;
+}
+
+.mt5 {
+    margin-top: 5px;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+
+.mt20 {
+    margin-top: 20px;
+}
+
+.mt30 {
+    margin-top: 30px;
+}
+
+.mt40 {
+    margin-top: 40px;
+}
+
+.mt50 {
+    margin-top: 50px;
+}
+
+.mt60 {
+    margin-top: 60px;
+}
+
+.mt70 {
+    margin-top: 70px;
+}
+
+.mt80 {
+    margin-top: 80px;
+}
+
+.mt90 {
+    margin-top: 90px;
+}
+
+.mt100 {
+    margin-top: 100px;
+}
+
+.mb0 {
+    margin-bottom: 0px;
+}
+
+.mb5 {
+    margin-bottom: 5px;
+}
+
+.mb10 {
+    margin-bottom: 10px;
+}
+
+.mb20 {
+    margin-bottom: 20px;
+}
+
+.mb30 {
+    margin-bottom: 30px;
+}
+
+.mb40 {
+    margin-bottom: 40px;
+}
+
+.mb50 {
+    margin-bottom: 50px;
+}
+
+.mb60 {
+    margin-bottom: 60px;
+}
+
+.mb70 {
+    margin-bottom: 70px;
+}
+
+.mb80 {
+    margin-bottom: 80px;
+}
+
+.mb90 {
+    margin-bottom: 90px;
+}
+
+.mb100 {
+    margin-bottom: 100px;
+}
+
+/* 패딩 */
+.pd0 {
+    padding: 0;
+}
+
+.pd5 {
+    padding: 5px;
+}
+
+.pd10 {
+    padding: 10px;
+}
+
+.pd20 {
+    padding: 20px;
+}
+
+.pd30 {
+    padding: 30px;
+}
+
+.pd40 {
+    padding: 40px;
+}
+
+.pd50 {
+    padding: 50px;
+}
+
+.pd60 {
+    padding: 60px;
+}
+
+.pd70 {
+    padding: 70px;
+}
+
+.pd80 {
+    padding: 80px;
+}
+
+.pd90 {
+    padding: 90px;
+}
+
+.pd100 {
+    padding: 100px;
+}
+
+.pt0 {
+    padding-top: 0;
+}
+
+.pt5 {
+    padding-top: 5px;
+}
+
+.pt10 {
+    padding-top: 10px;
+}
+
+.pt20 {
+    padding-top: 20px;
+}
+
+.pt30 {
+    padding-top: 30px;
+}
+
+.pt40 {
+    padding-top: 40px;
+}
+
+.pt50 {
+    padding-top: 50px;
+}
+
+.pt60 {
+    padding-top: 60px;
+}
+
+.pt70 {
+    padding-top: 70px;
+}
+
+.pt80 {
+    padding-top: 80px;
+}
+
+.pt90 {
+    padding-top: 90px;
+}
+
+.pt100 {
+    padding-top: 100px;
+}
+
+.pb0 {
+    padding-bottom: 0;
+}
+
+.pb5 {
+    padding-bottom: 5px;
+}
+
+.pb10 {
+    padding-bottom: 10px;
+}
+
+.pb20 {
+    padding-bottom: 20px;
+}
+
+.pb30 {
+    padding-bottom: 30px;
+}
+
+.pb40 {
+    padding-bottom: 40px;
+}
+
+.pb50 {
+    padding-bottom: 50px;
+}
+
+.pb60 {
+    padding-bottom: 60px;
+}
+
+.pb70 {
+    padding-bottom: 70px;
+}
+
+.pb80 {
+    padding-bottom: 80px;
+}
+
+.pb90 {
+    padding-bottom: 90px;
+}
+
+.pb100 {
+    padding-bottom: 100px;
+}
+
+.pl0 {
+    padding-left: 0;
+}
+
+.pl5 {
+    padding-left: 5px;
+}
+
+.pl10 {
+    padding-left: 10px;
+}
+
+.pl20 {
+    padding-left: 20px;
+}
+
+.pl30 {
+    padding-left: 30px;
+}
+
+.pl40 {
+    padding-left: 40px;
+}
+
+.pl50 {
+    padding-left: 50px;
+}
+
+.pl60 {
+    padding-left: 60px;
+}
+
+.pl70 {
+    padding-left: 70px;
+}
+
+.pl80 {
+    padding-left: 80px;
+}
+
+.pl90 {
+    padding-left: 90px;
+}
+
+.pl100 {
+    padding-left: 100px;
+}
+
+/* btn */
+.small-btn {
+    width: 120px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+.set-btn {
+    width: 50px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+.large-btn {
+    width: 100%;
+    padding: 5px 15px;
+    border-radius: 5px;
+}
+
+.icon-btn {
+    padding: 5px;
+    border-radius: 50%;
+
+}
+
+.custom-toggle {
+    position: absolute;
+    bottom: 0;
+    background-color: var(--color-skyBlue);
+    margin-left: 0;
+    border: 1px solid #eee;
+    border-left: 0;
+}
+
+.custom-toggle::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 5px;
+    height: 5px;
+    background-color: var(--color-skyBlue);
+    bottom: 0;
+}
+
+.logout-btn {
+    padding: 5px 10px;
+    color: #aaa;
+    position: relative;
+}
+
+.logout-btn::before {
+    content: "";
+    width: 1px;
+    height: 10px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    background-color: #aaa;
+}
+
+.close-btn {
+    color: #d6def6;
+}
+
+.style-btn {
+    border: 1px solid #eee;
+    border-radius: 3px;
+    background-color: var(--color-white);
+}
+
+.style-btn>svg {
+    color: #aaa;
+}
+
+.btn-active {
+    border: 1px solid var(--color-blue);
+}
+
+.btn-active>svg {
+    color: var(--color-blue);
+}
+
+.attribute-btn {
+    position: relative;
+}
+
+.blue-btn,
+.blue-border-btn:hover {
+    background-color: var(--color-blue);
+    color: var(--color-white);
+    transition: all 0.3s ease-in-out;
+}
+
+.red-btn,
+.red-border-btn:hover {
+    background-color: var(--color-red);
+    color: var(--color-white);
+    transition: all 0.3s ease-in-out;
+}
+
+.green-btn,
+.green-border-btn:hover {
+    background-color: var(--color-green);
+    color: var(--color-white);
+    transition: all 0.3s ease-in-out;
+}
+
+.orange-btn,
+.orange-border-btn:hover {
+    background-color: var(--color-orange);
+    color: var(--color-white);
+    transition: all 0.3s ease-in-out;
+}
+
+.darkg-btn,
+.darkg-border-btn:hover {
+    background-color: var(--color-darkG);
+    color: var(--color-white);
+    transition: all 0.3s ease-in-out;
+}
+
+.gray-btn,
+.gray-border-btn:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all 0.3s ease-in-out;
+}
+
+
+.blue-border-btn {
+    border: 1px solid var(--color-blue);
+    color: var(--color-blue);
+    background-color: var(--color-white);
+}
+
+.red-border-btn {
+    border: 1px solid var(--color-red);
+    color: var(--color-red);
+    background-color: var(--color-white);
+}
+
+.green-border-btn {
+    border: 1px solid var(--color-green);
+    color: var(--color-green);
+    background-color: var(--color-white);
+}
+
+.orange-border-btn {
+    border: 1px solid var(--color-orange);
+    color: var(--color-orange);
+    background-color: #fff;
+}
+
+.darkg-border-btn {
+    border: 1px solid #434343;
+    color: #434343;
+    background-color: var(--color-white);
+}
+
+.gray-border-btn {
+    border: 1px solid #aaa;
+    color: #aaa;
+    background-color: var(--color-white);
+}
+
+.tp-btn {
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
+    margin-left: 10px;
+}
+
+button:disabled {
+    background-color: #eee;
+    color: #333;
+}
+
+/* .del-icon-btn{
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--color-red);
+    color: var(--color-white);
+    border-radius: 50%;
+}
+
+.set-icon-btn{
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--color-darkG);
+    color: var(--color-white);
+    border-radius: 50%;
+} */
+
+
+
+/* text 정렬 */
+.text-lf {
+    text-align: left;
+}
+
+.text-ct {
+    text-align: center;
+}
+
+.text-rg {
+    text-align: right;
+}
+
+/* text color */
+.orange {
+    color: var(--color-orange);
+}
+
+.green {
+    color: var(--color-green);
+}
+
+.blue {
+    color: var(--color-blue);
+}
+
+.red {
+    color: var(--color-red);
+}
+
+.cursor {
+    cursor: pointer;
+}(No newline at end of file)
 
5e88640
resources/css/component.css (added)
+++ resources/css/component.css
@@ -0,0 +1,640 @@
+@charset "utf-8";
+
+/* box 공통 */
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.content-box {
+    width: 100%;
+    height: 100%;
+}
+
+.left-content,
+.right-content {
+    height: 100%;
+}
+
+.content-wrap {
+    height: calc(100% - 47px);
+}
+
+.content {
+    width: 100%;
+    overflow-y: auto;
+}
+
+.content:last-child {
+    margin-bottom: 0;
+}
+
+.content-zone {
+    height: calc(100% - 57px);
+}
+
+.left-content,
+.right-content,
+.row,
+.content {
+    padding: 15px 0;
+    border-radius: 10px;
+    background-color: #fff;
+
+    position: relative;
+}
+
+.row {
+    padding: 0;
+}
+
+.form-box {
+    background-color: #edf0ff;
+    border: 1px solid #dbe3fb;
+    padding: 15px;
+}
+
+
+.border {
+    border: 1px solid #eee;
+    border-radius: 5px;
+}
+
+.border.active {
+    border: 1px solid var(--color-blue);
+    border-radius: 5px;
+}
+
+.overflow-y {
+    overflow-y: auto;
+}
+
+/* title 공통 */
+.page-titleZone {
+    margin-bottom: 10px;
+}
+
+.main-title {
+    font-family: 'GmarketSansB';
+    font-size: 2rem;
+    color: #213f99;
+}
+
+.content-titleZone {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 10px;
+}
+
+.box-title {
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+
+.object-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: var(--color-blue);
+}
+
+/* 테이블 공통 */
+.table-zone {
+    padding: 15px 0;
+}
+
+
+.form-table {
+    border-bottom: 1px solid #aaa;
+}
+.sticky-table th,
+.sticky-table td,
+.list-table th,
+.list-table td,
+.form-table th {
+    text-align: center;
+}
+
+.form-table th,
+.form-table td {
+    border-top: 1px solid #aaa;
+}
+.sticky-table thead th,
+.list-table thead th {
+    background-color: #dbe3fb;
+    color: #213f99;
+}
+
+.list-table.orange thead tr,
+.sticky-table.orange thead tr {
+    background-color: #f29600;
+    color: #fff;
+}
+
+.list-table tbody tr,
+.sticky-table tbody tr {
+    cursor: pointer;
+}
+
+.list-table tbody tr:nth-child(even),
+.sticky-table tbody tr:nth-child(even) {
+    background-color: #f4f6ff;
+}
+
+.list-table.orange tbody tr:nth-child(even),
+.sticky-table.orange tbody tr:nth-child(even) {
+    background-color: #fff2de;
+}
+
+.form-table th {
+    color: #213f99;
+    text-align: center;
+    background-color: #dbe3fb;
+}
+
+.sticky-table thead th{
+    position: sticky;
+    top: 0;
+}
+
+.form-table2 th,
+.custom-subtitle {
+    color: #213f99;
+    /* text-align: center; */
+    font-weight: 800;
+}
+
+.option-table th {
+    color: #213f99;
+}
+
+.list-info {
+    margin-bottom: 10px;
+}
+
+.no-list {
+    text-align: center;
+    font-size: 1.3rem;
+    line-height: 120px;
+}
+
+.modal-table {
+    border-bottom: 0;
+}
+
+.modal-table td {
+    border-top: 0;
+}
+
+
+
+
+/* 서치바 공통 */
+/* .table-zone */
+.searchbar-zone {
+    margin-bottom: 10px;
+}
+
+/* 기본 서치바 */
+.search-square {
+    position: relative;
+    margin-left: 5px;
+}
+
+.square-date,
+.square-select {
+    width: 150px;
+}
+
+.square-input {
+    color: #646464;
+    padding: 6px 10px;
+    border-radius: 5px;
+    width: 300px;
+    transition: all ease-in-out .5s;
+}
+
+.square-input:hover,
+.square-input:focus {
+    box-shadow: 0 0 1em #00000013;
+}
+
+.square-input:focus {
+    outline: none;
+    background-color: #f0eeee;
+}
+
+.square-input::-webkit-input-placeholder {
+    font-weight: 100;
+    color: #ccc;
+}
+
+.square-input:focus {
+    background-color: #f0eeee;
+}
+
+.square-button {
+    border: none;
+    margin-left: 0;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.square-button:hover {
+    cursor: pointer;
+}
+
+.square-icon {
+    color: #b4b4b4;
+}
+
+input[type="text"].full-input,
+.full-select {
+    width: 100%;
+}
+
+input[type="text"].half-input,
+.half-select {
+    width: 50%;
+}
+
+/* 상세 서치바 */
+.search-bottom {
+    padding: 10px 0;
+}
+
+.option-searchbar {
+    width: 75%;
+    margin: 0 auto;
+    padding: 15px;
+    background-color: #f8f9fe;
+    border-radius: 10px;
+}
+
+/* 기타 공통 */
+.coupler {
+    font-size: 1.3rem;
+    margin-left: 5px;
+}
+
+.option-title {
+    padding: 0 5px;
+    font-size: 1.3rem;
+    color: #213f99;
+    margin-left: 5px;
+}
+
+.count-zone {
+    font-size: 1.3rem;
+}
+
+.count-zone span {
+    font-weight: 900;
+    color: #213f99;
+}
+
+
+/* 모달 */
+.modal-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100000;
+}
+
+.modal-container {
+    background: #fff;
+    min-width: 500px;
+    width: 50%;
+    height: 90%;
+    border-radius: 5px;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    padding: 20px;
+    box-sizing: border-box;
+    max-height: 95%;
+    min-height: 500px;
+}
+
+.modal-title {
+    width: 100%;
+    border-bottom: 1px solid #d4cccc;
+    padding: 10px 0;
+}
+
+.modal-subtitle {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.modal-content-monthly {
+    width: 100%;
+    padding: 20px 0;
+    overflow-y: auto;
+}
+
+.large-modal {
+    width: 90%;
+}
+
+.small-modal {
+    min-width: 200px;
+    min-height: 200px;
+    max-width: 450px;
+    height: auto;
+    max-height: 50%;
+}
+
+.list-modal {
+    width: 80%;
+    height: 80%;
+}
+
+.alert-write {
+    font-size: 1.6rem;
+    line-height: 180%;
+}
+
+
+.modal-content-monthly::-webkit-scrollbar {
+    width: 10px;
+}
+
+.modal-content-monthly::-webkit-scrollbar-thumb {
+    background-color: #6b6b6b;
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+}
+
+.modal-content-monthly::-webkit-scrollbar-track {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: inset 0px 0px 5px white;
+}
+
+.modal-end {
+    width: 100%;
+    padding: 15px 0;
+    border-top: 1px solid #eee;
+}
+
+.alert-modal .modal-end button,
+.small-modal .modal-end button {
+    margin-left: 0;
+}
+
+
+/* 탭 */
+.tab-nav {
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+}
+
+.tab-nav li a {
+    display: block;
+    font-size: 1.6rem;
+    text-align: center;
+    border-right: 1px solid #eee;
+    padding: 0 10px;
+}
+
+.tab-nav li a.activeTab {
+    color: #213f99;
+    font-weight: 600;
+}
+
+.tab-nav li:last-child a {
+    border-right: 0;
+}
+
+.tab-nav2 {
+    border-bottom: 1px solid #eee;
+}
+
+.tab-nav2 li a {
+    display: block;
+    font-size: 1.6rem;
+    text-align: center;
+    border: 1px solid #eee;
+    padding: 0 10px;
+    background-color: #f8f8f8;
+    padding: 10px;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 5px solid #f8f8f8;
+}
+
+.tab-nav2 li a.activeTab {
+    color: var(--color-blue);
+    font-weight: 600;
+    background-color: #fff;
+    border-bottom: 5px solid var(--color-blue);
+}
+
+.column-nav {
+    height: 100%;
+    background-color: var(--color-blue);
+    padding: 10px 0;
+}
+
+.column-nav ul li a {
+    display: block;
+    font-size: 1.1rem;
+    text-align: center;
+    padding: 10px;
+    color: var(--color-gray);
+}
+
+.column-nav ul li a.activeTab {
+    color: var(--color-white);
+    font-weight: bold;
+}
+
+.tab-content {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.tab-content2 {
+    height: calc(100% - 46px);
+}
+
+.tab-content2 .content-box {
+    padding: 10px;
+}
+
+/* 라벨 css(상세 조회랑 다름) */
+.chekck-type {
+    display: none;
+}
+
+.chekcktype-label {
+    border-radius: 5px;
+    padding: 5px 10px;
+    background-color: #d6def6;
+    color: #213f99;
+}
+
+.chekck-type:checked+label {
+    background-color: #213f99;
+    color: #fff;
+}
+
+
+/* file tree */
+.file-list {
+    display: block;
+    padding: 5px;
+    font-size: 1.3rem;
+}
+
+.selected {
+    background-color: rgb(255, 249, 239);
+    border: 1px solid var(--color-orange);
+    color: var(--color-orange);
+    border-radius: 5px;
+}
+
+.item {
+    background-color: var(--color-white);
+    border-radius: 5px;
+    padding: 5px;
+    width: 100%;
+    border: 1px solid #eee;
+}
+
+.item>p {
+    font-size: 1.3rem;
+}
+
+.color-picker {
+    width: 40px;
+    height: 40px;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 0 2px;
+    position: relative;
+}
+
+.color-picker::after {
+    content: "+";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-white);
+    color: #6b6b6b;
+    border-radius: 20px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    font-size: 2rem;
+    line-height: 20px;
+}
+
+.up,
+.down {
+    border: 1px solid #aaa;
+    text-align: center;
+    padding: 1.5px 0;
+    background-color: var(--color-white);
+}
+
+.up {
+    border-radius: 0 5px 5px 0;
+    border-left: none;
+}
+
+.down {
+    border-radius: 5px 0 0 5px;
+    border-right: none;
+}
+
+.up button,
+.down button {
+    font-size: 2rem;
+}
+
+input[type="text"].size-input {
+    border-radius: 0;
+    text-align: center;
+}
+
+.color-list {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+}
+
+
+.tabnav2>ul>li {
+    border: 1px solid var(--color-blue);
+    border-radius: 5px;
+    color: var(--color-blue);
+    background-color: var(--color-white);
+}
+
+.tabnav2>ul>li p {
+    font-size: 1.3rem;
+    padding: 8px 10px;
+}
+
+.tabnav2>ul>li p.activeTab2 {
+    background-color: var(--color-blue);
+    color: var(--color-white);
+}
+
+.tab-content2 {
+    padding: 10px 0;
+}
+
+/* 투명도 */
+.slider-container {
+    position: relative;
+}
+
+.slider {
+    width: 100%;
+    background: linear-gradient(to right, red var(--slider-percentage), transparent var(--slider-percentage));
+}
+
+.slider::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, red var(--slider-percentage), transparent var(--slider-percentage));
+}
+
+.component-title-zone {
+    display: table;
+}
+
+.component-maintitle {
+    font-size: 1.8rem;
+    font-weight: bold;
+    position: relative;
+    padding-left: 10px;
+    margin-right: 10px;
+
+}
+
+.component-maintitle::before {
+    content: "";
+    position: absolute;
+    width: 3px;
+    height: 100%;
+    background-color: var(--color-blue);
+    left: 0px;
+}
+
+.component-subtitle {
+    font-size: 1.4rem;
+    color: #aaa;
+    display: table-cell;
+    vertical-align: middle;
+}(No newline at end of file)
 
5e88640
resources/css/font.css (added)
+++ resources/css/font.css
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Pretendard';
+    src: url('../font/PretendardVariable.woff2') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansM";
+    src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansL";
+    src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansB";
+    src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
+    font-weight: bold;
+    font-style: normal;
+}(No newline at end of file)
 
5e88640
resources/css/layout.css (added)
+++ resources/css/layout.css
@@ -0,0 +1,199 @@
+@charset "utf-8";
+
+.dashboard-wrap {
+    width: 100%;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 270px minmax(auto, 1fr);
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "header header "
+        "nav  main  "
+        "nav  main  "
+}
+
+.layout-wrap {
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+
+}
+
+
+header {
+    background-color: #fff;
+    padding: 15px 30px;
+    grid-area: header;
+    position: relative;
+}
+
+.logo {
+    width: 200px;
+}
+
+.logo>a {
+    display: block;
+    width: 100%;
+}
+
+.logo>a>img {
+    display: block;
+    width: 100%;
+}
+
+.user-name {
+    font-size: 1.3rem;
+    margin-left: 5px;
+}
+
+.sms,
+.user {
+    margin-left: 10px;
+}
+
+.layout-wrap header{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+
+
+/* 메뉴 공통 */
+nav {
+    background-color: #213f99;
+    position: relative;
+}
+
+nav ul li a,
+nav ul li p {
+    padding: 5px;
+    display: block;
+    color: #fff;
+}
+
+nav.side-menu ul.sub-menu,
+nav.top-menu ul.sub-menu {
+    font-size: 1.3rem;
+    overflow: hidden;
+    transition: all 0.5s ease-in-out;
+}
+
+ul.sub-menu>li {
+    padding: 10px 20px;
+
+}
+
+p.active {
+    background-color: #fff;
+    color: #213f99;
+    border-radius: 50px
+}
+
+/* 사이드 메뉴 */
+nav.side-menu {
+    width: 100%;
+    height: 100vh;
+    border-radius: 0 70px 70px 0;
+    grid-area: nav;
+    overflow-y: auto;
+}
+
+nav.side-menu::-webkit-scrollbar {
+    display: none;
+}
+
+nav.side-menu::-ms-scrollbar {
+    display: none;
+}
+
+
+nav.side-menu>ul.main-menu {
+    padding: 50px 30px;
+}
+
+nav.side-menu>ul.main-menu>li>div>a,
+nav>ul>li {
+    padding: 10px 0;
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+
+
+/* 상단 메뉴 */
+.top-menu{
+    position: absolute;
+    width: 100%;
+    top: 57px;
+    left: 0;
+    z-index: 2;
+}
+.top-menu>ul.main-menu {
+    display: flex;
+    justify-content: center;
+}
+
+.depth1 {
+    cursor: default;
+}
+
+.top-menu>ul>li {
+    /* min-width: 152px; */
+    /* padding: 10px 30px; */
+    text-align: center;
+    position: relative;
+}
+
+.top-menu>ul>li>p {
+    padding: 5px 47px;
+}
+
+.top-menu ul.sub-menu {
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    transition: max-height 1.8s ease-in-out, opacity 1.3s ease-in-out;
+}
+
+.top-menu ul.sub-menu li a {
+    text-align: center;
+    color: #213f99;
+}
+
+.navbg {
+    overflow: hidden;
+    background-color: #fff;
+    border-bottom: 2px solid #213f99;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    width: 100%;
+    z-index: 3;
+    transition: height 0.6s ease-in-out;
+}
+
+
+
+/* 메인 */
+.main {
+    padding: 20px;
+    height: 100vh;
+    grid-area: main;
+}
+
+.layout-wrap .main {
+    padding: 123px 20px 20px;
+}
+
+.login{
+    width: 100%;
+    height: 100vh;
+}(No newline at end of file)
 
5e88640
resources/css/reset.css (added)
+++ resources/css/reset.css
@@ -0,0 +1,132 @@
+@charset "utf-8";
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+    width: 100%;
+    min-height: 100vh;
+    font-size: 10px;
+    color: var(--color-black);
+    font-family: 'Pretendard';
+}
+
+body {
+    min-width: 1356px;
+    background-color: #f7f6fb;
+}
+
+
+a {
+    color: #333;
+    text-decoration: none;
+}
+
+ol,
+ul,
+li {
+    list-style: none;
+}
+
+img,
+svg {
+    vertical-align: middle;
+}
+table {
+    min-width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+table th,
+table td {
+    padding: 8px;
+    font-size: 1.3rem;
+}
+
+button {
+    border: none;
+    background-color: transparent;
+    font-size: 1.3rem;
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+label {
+    display: block;
+    font-size: 1.3rem;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="date"],
+input[type="number"] {
+    padding: 5px 10px;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    font-size: 1.3rem;
+}
+
+input:focus,
+select:focus {
+    outline: none;
+}
+
+input:disabled {
+    background: #aaa;
+    border: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    vertical-align: sub;
+}
+
+input[type='date'] {
+    max-width: 240px;
+    padding: 5px;
+}
+
+input[type='date'].date-placeholder::before {
+    content: attr(data-placeholder);
+    width: 100%;
+    color: #ddd;
+}
+
+button:first-child,
+select:first-child,
+input:first-child,
+button.only,
+select.only,
+input.only {
+    margin-left: 0;
+}
+
+textarea {
+    width: 100%;
+    height: 100%;
+}
+
+
+/* 스크롤바 디자인 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #ededed;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 10px;
+}(No newline at end of file)
 
5e88640
resources/css/responsive.css (added)
+++ resources/css/responsive.css
@@ -0,0 +1,101 @@
+/* @media screen and (min-width: 1537px){
+    .gall-list.flex25{
+        flex: 0 0 24%
+    }
+
+
+
+}
+
+@media screen and (min-width:1356px) and (max-width: 1536px) {
+	html{
+        font-size: 8.5px;
+    }
+    button {
+        font-size: 1.2rem;
+    }
+
+    .flex5 {
+        flex: 0 0 4%
+    }
+    
+    .flex10 {
+        flex: 0 0 9%
+    }
+    
+    .flex15 {
+        flex: 0 0 14%
+    }
+    
+    .flex20 {
+        flex: 0 0 19%
+    }
+    
+    .flex25 {
+        flex: 0 0 24%
+    }
+    
+    .flex30 {
+        flex: 0 0 29%
+    }
+    
+    .flex35 {
+        flex: 0 0 34%
+    }
+    
+    .flex40 {
+        flex: 0 0 39%
+    }
+    
+    .flex45 {
+        flex: 0 0 44%
+    }
+    
+    .flex50 {
+        flex: 0 0 49%
+    }
+    
+    .flex55 {
+        flex: 0 0 54%
+    }
+    
+    
+    .flex60 {
+        flex: 0 0 59%
+    }
+    
+    .flex65 {
+        flex: 0 0 64%
+    }
+    
+    
+    .flex70 {
+        flex: 0 0 69%
+    }
+    
+    .flex75 {
+        flex: 0 0 74%
+    }
+    
+    .flex80 {
+        flex: 0 0 79%
+    }
+    
+    .flex85 {
+        flex: 0 0 84%
+    }
+    
+    .flex90 {
+        flex: 0 0 89%
+    }
+    
+    .flex95 {
+        flex: 0 0 94%
+    }
+
+    .content-list{
+        min-height: 449px;
+    }
+
+
+} */(No newline at end of file)
 
5e88640
resources/css/style.css (added)
+++ resources/css/style.css
@@ -0,0 +1,480 @@
+@charset "utf-8";
+
+/* page 추가 */
+/* 작업관리 페이지*/
+.node-zone {
+    /* height: calc(100% - 61px); */
+    margin-bottom: 10px;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.text-over {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.state span {
+    font-size: 1.3rem;
+}
+
+.vue-flow__panel button {
+    margin-left: 0;
+}
+
+/* 파일관리 페이지*/
+.file-zone {
+    height: calc(100% - 55px);
+}
+
+.tree-wrap {
+    height: 100%;
+    overflow: auto;
+}
+
+.file-table th {
+    position: sticky;
+    top: 0;
+}
+
+.file-table tr .icon-btn {
+    opacity: 0;
+}
+
+.file-table tr:hover,
+.file-table tr:nth-child(even):hover {
+    background-color: var(--color-light-orange);
+}
+
+.file-table tr:hover .icon-btn {
+    opacity: 1;
+    transition: all 0.5s ease-in-out;
+}
+
+
+/* 데이터활용관리 */
+.gall-list li {
+    padding: 0 10px;
+    max-width: 24%;
+}
+
+.gall-list li>div {
+    min-height: 274px;
+    padding: 10px;
+    box-shadow: 0 0 5px #aaa;
+}
+
+.gall-list li>div a {
+    display: block;
+    width: 100%;
+}
+
+.gall-list li>div a .gall-img {
+    width: 100%;
+    height: 200px;
+    text-align: center;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.gall-list li>div a .gall-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.gall-list li>div a .gall-title {
+    font-size: 1.6rem;
+    font-weight: 800;
+    margin-bottom: 10px;
+}
+
+.gall-info {
+    width: 100%;
+}
+
+.gall-list li>div a .gall-detail {
+    font-size: 1.3rem;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+.custom-info {
+    position: absolute;
+    width: calc(100% - 0px);
+    z-index: 1;
+}
+
+.layout-option,
+.layout{
+    padding: 15px 0;
+    height: 100%;
+}
+
+.custom-info details summary,
+.component-zone details summary,
+.chart-zone details summary {
+    font-size: 1.6rem;
+    padding: 15px;
+    border: 1px solid #213f99;
+    background-color: rgb(243, 246, 255);
+    border-radius: 5px;
+    position: relative;
+}
+
+.component-zone details summary,
+.chart-zone details summary {
+    border: 1px solid var(--color-orange);
+    background-color: rgb(255, 249, 239);
+    color: var(--color-orange);
+}
+
+.custom-info details[open] summary,
+.component-zone details[open] summary,
+.chart-zone details[open] summary {
+    border-radius: 5px 5px 0 0;
+}
+
+
+.custom-info .info-zone {
+    border: 1px solid #eee;
+    border-radius: 0 0 5px 5px;
+    padding: 15px;
+    background-color: #fff;
+}
+
+.data-list {
+    height: 100px;
+    overflow-y: auto;
+    background-color: #f8f8f8;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.tab-zone{
+    position: relative;
+}
+
+.tab-zone,
+.preview-zone {
+    height: 100%;
+}
+
+.column-item {
+    width: 100%;
+    font-size: 1.3rem;
+    text-align: center;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid var(--color-orange);
+    background-color: rgb(255, 249, 239);
+    color: var(--color-orange);
+    margin-bottom: 10px;
+}
+
+.column-item:last-child {
+    margin-bottom: 0;
+}
+
+.component-content {
+    padding: 10px;
+
+}
+
+.layout-content>li,
+.component-content>li {
+    margin-top: 10px;
+    margin-right: 10px;
+}
+
+.layout-content>li:nth-child(3n),
+.component-content>li:nth-child(3n) {
+    margin-right: 0px;
+}
+
+.icon-content {
+    margin-left: 10px;
+    font-size: 1.3rem;
+}
+
+.component-wrap {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #f8f8f8;
+}
+
+input[type="text"].com-dbZone {
+    margin-left: 0;
+}
+
+.db-input {
+    height: 100%;
+}
+
+.active-layout .vertical-icon,
+.active-layout .horizental-icon {
+    background-color: var(--color-blueE);
+    border: 3px solid var(--color-blue);
+}
+
+.active-layout .horizental-icon>span,
+.active-layout .vertical-icon>span {
+    border: 3px solid var(--color-blue);
+}
+
+.component-content li img {
+    width: 100%;
+}
+
+.page-info > .info-area,
+.layout-tree ul{
+    height: calc(100% - 40px);
+    overflow-y: auto;
+}
+
+.layout-option{
+    background-color:var(--color-skyBlue);
+
+}
+.layout-option > div:nth-child(2){
+    overflow-y: auto;
+}
+
+.section-title{
+    font-size: 1.4rem;
+    position: relative;
+}
+
+.section-title::before{
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 50%;
+    background-color: var(--color-orange);
+    left: 0;
+    bottom: 0;
+    opacity: 0.2;
+}
+
+.detail-content{
+    background-color: var(--color-white);
+    border: 1px solid var(--color-blue);
+    border-radius: 0 0 5px 5px;
+    border-top: 0;
+}
+
+.tab-box{
+    border: 1px solid #eee;
+    border-radius: 0 5px 0 0;
+}
+
+.attribute-modal{
+    position: absolute;
+    min-width: 120px;
+    max-width: 200px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--color-white);
+    transform: translateY(100%);
+    border: 1px solid #ddd;
+}
+
+.attribute-modal > ul>li{
+    padding: 8px 5px;
+    border-top: 1px solid #eee;
+}
+
+.attribute-modal > ul>li:first-child{
+    border-top: 0;
+}
+
+.attribute-modal > ul>li svg,
+.attribute-modal > ul>li p{
+    color: var(--color-darkG);
+}
+
+.attribute-modal > ul>li:hover svg,
+.attribute-modal > ul>li:hover p{
+    color: var(--color-blue);
+}
+
+.editor-box{
+    background-color: var(--color-skyBlue);
+    border: 1px dashed var(--color-blue);
+}
+
+
+
+/* 알람 */
+
+.speaker {
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.speaker>span {
+    display: inline-block;
+    background-color: #eee;
+}
+
+.speaker>span:nth-of-type(1) {
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+}
+
+.speaker>span:nth-of-type(2) {
+    width: 60px;
+    height: 10px;
+    border-radius: 10px;
+    margin-left: 10px;
+}
+
+.text-areaZone {
+    height: calc(50% - 22px);
+    margin-bottom: 10px;
+}
+
+.user-list {
+    width: 100%;
+    height: calc(100% - 50% - 22px);
+}
+
+.user-list .user-title {
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--color-blue);
+    margin-bottom: 10px;
+}
+
+.user-list>ul {
+    padding: 10px;
+    height: calc(100% - 29px);
+    overflow-y: auto;
+    border-top: 1px solid #eee;
+}
+
+.user-list>ul>li {
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--color-orange);
+    background-color: rgb(255, 249, 239);
+    color: var(--color-orange);
+    border-radius: 5px;
+    font-size: 1.3rem;
+}
+
+.user-list>ul>li:last-child {
+    margin-bottom: 0;
+}
+
+.user-zone,
+.log-zone {
+    height: 100vh;
+}
+
+.all-user,
+.check-user {
+    height: 100vh;
+    border: 1px solid #eee;
+}
+
+.log-content {
+    height: 99%;
+    background-color: var(--color-blueE);
+    padding: 10px 10px 10px 25px;
+    overflow-y: auto;
+}
+
+.log-content li {
+    font-size: 1.3rem;
+    color: var(--color-blue);
+    list-style: disc;
+    padding: 5px;
+}
+
+.push-text {
+    padding: 10px;
+    font-family: 'Pretendard';
+    font-size: 15px;
+}
+
+
+/* 요소옵션 추가 240216 김하영 */
+.optionBox {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    padding: 2rem;
+    background-color: #f9f9f9;
+
+}
+
+.optionBoxText {
+    font-size: 1.5rem;
+    color: #213f99;
+    font-family: 'Pretendard';
+    font-weight: 600;
+}
+
+.selectBoxArea select {
+    border: 0px;
+    background-color: white;
+}
+
+.optionBox {
+    font-size: 1.5rem;
+}
+
+.optionSubText {
+    text-align: center;
+}
+
+.optionSubBox {
+    background-color: white;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-y: scroll;
+    height: 225px;
+}
+
+.optionSubBox li {
+    margin-bottom: 10px;
+}
+
+.cyberpunk-checkbox {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-blue);
+    border-radius: 5px;
+    background-color: transparent;
+    display: inline-block;
+    position: relative;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.cyberpunk-checkbox:before {
+    content: "";
+    background-color: var(--color-blue);
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    transition: all 0.3s ease-in-out;
+}
+
+.cyberpunk-checkbox:checked:before {
+    transform: translate(-50%, -50%) scale(1);
+}
 
5e88640
resources/font/GmarketSansBold.woff (Binary) (added)
+++ resources/font/GmarketSansBold.woff
Binary file is not shown
 
5e88640
resources/font/GmarketSansLight.woff (Binary) (added)
+++ resources/font/GmarketSansLight.woff
Binary file is not shown
 
5e88640
resources/font/GmarketSansMedium.woff (Binary) (added)
+++ resources/font/GmarketSansMedium.woff
Binary file is not shown
 
5e88640
resources/font/PretendardVariable.woff2 (Binary) (added)
+++ resources/font/PretendardVariable.woff2
Binary file is not shown
 
5e88640
views/main.html (added)
+++ views/main.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+
+    <title>TAKENSOFT</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+</head>
+
+<body>
+
+</body>
+
+</html>(No newline at end of file)
Add a comment
List