Commit @fdad3b0367d7074592a5ac5dac66cccd04402d00

박정하 05-16

250516 박정하 변경사항 수정

@fdad3b0367d7074592a5ac5dac66cccd04402d00

1e536dc

fdad3b0

client/resources/css/common/common.css

--- client/resources/css/common/common.css

+++ client/resources/css/common/common.css


-*{
-    padding: 0; margin: 0;  color: #000;
-    font-family: "Pretendard-R"; box-sizing: border-box;
+* {
+  padding: 0;
+  margin: 0;
+  color: #000;
+  font-family: "Pretendard-R";
+  box-sizing: border-box;
 }
-html{font-size: 10px;}
 
-a{text-decoration: none; display: block;}
-li{list-style: none;}
-button{border: 0; background: none; cursor: pointer;}
-input{border: 0; flex-shrink: 0; outline: 0;}
-input::placeholder{color: #999999;}
-input[type="checkbox"]{
-    width: 15px;
-    height: 15px;
+html {
+  font-size: 10px;
+}
+
+a {
+  text-decoration: none;
+  display: block;
+}
+
+li {
+  list-style: none;
+}
+
+button {
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+input {
+  border: 0;
+  flex-shrink: 0;
+  outline: 0;
+}
+
+input::placeholder {
+  color: #999999;
+}
+
+input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
 }
 
 
 input[readonly] {
-    background-color: #f6f6f6 !important; 
-    color: #999;
+  background-color: #f6f6f6 !important;
+  color: #999;
 }
-select{background-color: transparent ;}
-select:focus {border: 0; outline: 0;}
-textarea{resize: none;}
+
+select {
+  background-color: transparent;
+}
+
+select:focus {
+  border: 0;
+  outline: 0;
+}
+
+textarea {
+  resize: none;
+}
 
 
-.w130{width: 130px;}
-.w1500{width: 1500px; margin: 0 auto;}
-.wfull{width: -webkit-fill-available;}
+.w130 {
+  width: 130px;
+}
+
+.w1500 {
+  width: 1500px;
+  margin: 0 auto;
+}
+
+.wfull {
+  width: -webkit-fill-available;
+}
 
 
 @media screen and (max-width: 1500px) {
-    .w1500{width: auto; }
+  .w1500 {
+    width: auto;
   }
-.flex{display: flex;}
-.align-center{align-items: center;}
-.flex-end{
-    display: flex;
-    justify-content: end;
-}
-.flex-center{
-    display: flex;
-    justify-content: center;
-}
-.flex-sp-bw{
-    display: flex;
-    justify-content: space-between;
 }
 
-.mt-5{margin-top: 5px;}
-.mt-20{margin-top: 20px;}
-.mt-40{margin-top: 40px;}
-
-.mb-5{margin-bottom: 5px;}
-.mb-10{margin-bottom: 10px;}
-.mb-15{margin-bottom: 15px;}
-.mb-20{margin-bottom: 20px;}
-.mb-25{margin-bottom: 25px;}
-.mb-30{margin-bottom: 30px;}
-.mb-40{margin-bottom: 40px;}
-.mb-50{margin-bottom: 50px;}
-.mb-60{margin-bottom: 60px;}
-.mb-110{margin-bottom: 110px;}
-
-
-.btn-group button{
-    width: 130px;
-    padding: 15px 0px;
-    border-radius: 10px;
-    font-size: 20px;
-   
+.flex {
+  display: flex;
 }
-.btn-group-small .button{
-    padding: 10px 25px;
-    border-radius: 5px;
+
+.align-center {
+  align-items: center;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: end;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-sp-bw {
+  display: flex;
+  justify-content: space-between;
+}
+
+.mt-5 {
+  margin-top: 5px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.mb-5 {
+  margin-bottom: 5px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-15 {
+  margin-bottom: 15px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.mb-25 {
+  margin-bottom: 25px;
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+.mb-40 {
+  margin-bottom: 40px;
+}
+
+.mb-50 {
+  margin-bottom: 50px;
+}
+
+.mb-60 {
+  margin-bottom: 60px;
+}
+
+.mb-110 {
+  margin-bottom: 110px;
+}
+
+
+.btn-group button {
+  width: 130px;
+  padding: 15px 0px;
+  border-radius: 10px;
+  font-size: 20px;
+
+}
+
+.btn-group-small .button {
+  padding: 10px 25px;
+  border-radius: 5px;
+  font-size: 16px;
+  font-family: "Pretendard-M";
+  cursor: pointer;
+
+  p {
     font-size: 16px;
     font-family: "Pretendard-M";
-    cursor: pointer;
-    p{
-        font-size: 16px;
-    font-family: "Pretendard-M";
-    }
+  }
 }
 
-.button, button{
-    &.red-line{
-        border: 1px solid #ce3e48;
-        color: #ce3e48;
+.button,
+button {
+  &.red-line {
+    border: 1px solid #ce3e48;
+    color: #ce3e48;
+  }
+
+  &.blue-line {
+    border: 1px solid #275cbd;
+    color: #275cbd;
+  }
+
+  &.blue-line-bg {
+    border: 1px solid #007ac3;
+    background-color: #eff5f9;
+    color: #0271b3;
+
+    p {
+      color: #0271b3;
     }
-    &.blue-line{
-        border: 1px solid #275cbd;
-        color: #275cbd;
+  }
+
+  &.green-line {
+    border: 1px solid #32b31d;
+    color: #2d9b1b;
+  }
+
+  &.gray-line {
+    border: 1px solid #636364;
+    color: #000;
+  }
+
+  &.gray-bg {
+    background-color: #636364;
+    color: #fff;
+  }
+
+  &.gray-line-bg {
+    border: 1px solid #636364;
+    background-color: #f9f9f9;
+    color: #000;
+  }
+
+  &.pink-line-bg {
+    border: 1px solid #a5067b;
+    background-color: #f7ebf4;
+    color: #a5067b;
+
+    p {
+      color: #a5067b;
     }
-    &.blue-line-bg{
-        border: 1px solid #007ac3;
-        background-color: #eff5f9;
-        color: #0271b3;
-        p{
-            color: #0271b3;
-        }
+  }
+
+  &.gradient {
+    position: relative;
+    background: linear-gradient(132deg, #3e355c, #763954);
+    color: #fff;
+    padding-right: 20px;
+
+    &::after {
+      content: '';
+      background-image: url(../../images/icon/down.png);
+      width: 15px;
+      height: 15px;
+      display: block;
+      position: absolute;
+      right: 17px;
+      top: 20px;
     }
-    &.green-line{
-        border: 1px solid #32b31d;
-        color: #2d9b1b;
-    }
-    &.gray-line{
-        border: 1px solid #636364;
-        color: #000;
-    }
-    &.gray-bg{
-        background-color: #636364;
-        color: #fff;
-    }
-    &.gray-line-bg{
-        border: 1px solid #636364;
-        background-color: #f9f9f9;
-        color: #000;
-    }
-    &.pink-line-bg{
-        border: 1px solid #a5067b;
-        background-color: #f7ebf4;
-        color: #a5067b;
-        p{
-            color: #a5067b;
-        }
-    }
-    &.gradient{
-        position: relative;
-        background: linear-gradient(132deg, #3e355c, #763954);
-        color: #fff;
-        padding-right: 20px;
-        &::after{
-            content: '';
-            background-image: url(../../images/icon/down.png);
-            width: 15px;
-            height: 15px;
-            display: block;
-            position: absolute;
-            right: 17px;
-            top: 20px;
-        }
-    }
+  }
 }
 
-    /* 닫기 버튼 스타일 */
+/* 닫기 버튼 스타일 */
 
-    button.closebtn {
-        font-size: 20px;
-        width: 40px;
-        height: 40px;
-        background-color: #000;
-        color: white;
-        border: none;
-        border-radius: 50px;
-    }
+button.closebtn {
+  font-size: 20px;
+  width: 40px;
+  height: 40px;
+  background-color: #000;
+  color: white;
+  border: none;
+  border-radius: 50px;
+}
+
+
+/* 텍스트 정렬 */
+.txt-left {
+  text-align: left;
+}
+
+.txt-center {
+  text-align: center;
+}
+
+.txt-right {
+  text-align: right;
+}

1e536dc

fdad3b0

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


 .hr {
-    background-color: #eeeeee;
-    margin: 10px 0;
-    width: 100%;
-    height: 1px;
+  background-color: #eeeeee;
+  margin: 10px 0;
+  width: 100%;
+  height: 1px;
 }
+
 .hr.pink {
-    background-color: rgba(194, 61, 71, 0.1);
-    margin: 10px 0;
-    width: 100%;
-    height: 1px;
+  background-color: rgba(194, 61, 71, 0.1);
+  margin: 10px 0;
+  width: 100%;
+  height: 1px;
 }
+
 @media screen and (max-width: 1500px) {
-    .content{width: auto !important; }
+  .content {
+    width: auto !important;
   }
+}
+
 .content {
-    width: 1500px;
-    margin: 0 auto;
-    padding-bottom: 27rem;
-    padding-top: 56px;
+  width: 1500px;
+  margin: 0 auto;
+  padding-bottom: 27rem;
+  padding-top: 56px;
 
-    h2 {
-        font-family: "HAPPINESS-SANS-title";
-        font-size: 40px;
+  h2 {
+    font-family: "HAPPINESS-SANS-title";
+    font-size: 40px;
+  }
+
+  h3 {
+    font-family: "Pretendard-B";
+    font-size: 25px;
+    position: relative;
+    padding-left: 20px;
+    margin-bottom: 20px;
+
+    &::before {
+      content: '';
+      background: url(../../images/icon/subtitle.png);
+      width: 7px;
+      top: 6px;
+      left: 0;
+      height: 17px;
+      display: block;
+      position: absolute;
+    }
+  }
+
+  .gopage {
+    font-family: "Pretendard-L";
+    font-size: 17px;
+    text-align: right;
+
+  }
+
+  .gopage::after {
+    content: '\2192';
+    font-size: 18px;
+  }
+
+  /* pagination */
+  .pagination {
+    button {
+      width: 40px;
+      height: 40px;
+      margin: 0 4px;
+      border: 1px solid #f0f1f4;
+      background-color: #fff;
+      border-radius: 50px;
     }
 
-    h3 {
-        font-family: "Pretendard-B";
-        font-size: 25px;
-        position: relative;
-        padding-left: 20px;
-        margin-bottom: 20px;
-
-        &::before {
-            content: '';
-            background: url(../../images/icon/subtitle.png);
-            width: 7px;
-            top: 6px;
-            left: 0;
-            height: 17px;
-            display: block;
-            position: absolute;
-        }
+    button.page-number {
+      font-size: 20px;
+      color: #555555;
+      width: 40px;
+      height: 40px;
+      background-color: #f0f1f4;
+      border-radius: 50px;
     }
 
-    .gopage {
-        font-family: "Pretendard-L";
+    button.page-number.clicked {
+      background-color: #ce3e48;
+      color: #fff;
+    }
+
+    .anticon {
+      svg {
         font-size: 17px;
-        text-align: right;
 
+        path {
+          color: #636364;
+        }
+      }
     }
-
-    .gopage::after {
-        content: '\2192';
-        font-size: 18px;
-    }
-
-
-    /* pagination */
-    .pagination {
-        button {
-            width: 40px;
-            height: 40px;
-            margin: 0 4px;
-            border: 1px solid #f0f1f4;
-            background-color: #fff;
-            border-radius: 50px;
-        }
-
-        button.page-number {
-            font-size: 20px;
-            color: #555555;
-            width: 40px;
-            height: 40px;
-            background-color: #f0f1f4;
-            border-radius: 50px;
-        }
-
-        button.page-number.clicked {
-            background-color: #ce3e48;
-            color: #fff;
-        }
-
-        .anticon {
-            svg {
-                font-size: 17px;
-
-                path {
-                    color: #636364;
-                }
-            }
-
-
-        }
-    }
-
-
-
+  }
 }
 
 .sub-title-area {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
 
 .breadcrumb-list {
-    ul {
-        display: flex;
-        align-items: center;
-        gap: 15px;
+  ul {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  li {
+    font-size: 16px;
+
+    p {
+      font-size: 16px;
+      color: #000;
+      font-family: "Pretendard-L";
+      margin-left: 5px;
     }
 
-    li {
-        font-size: 16px;
-
-        p {
-            font-size: 16px;
-            color: #000;
-            font-family: "Pretendard-L";
-            margin-left: 5px;
-        }
-
-        &:first-child {
-            display: flex;
-            align-items: center;
-        }
-
-        &:last-child {
-            font-family: "Pretendard-SB";
-        }
+    &:first-child {
+      display: flex;
+      align-items: center;
     }
+
+    &:last-child {
+      font-family: "Pretendard-SB";
+    }
+  }
 }
 
 
 .btn-group {
-    gap: 10px;
+  gap: 10px;
 
-    button.cancel {
-        width: 130px;
-        background-color: #f9f9f9;
-        border: 1px solid #636364;
+  button.cancel {
+    width: 130px;
+    background-color: #f9f9f9;
+    border: 1px solid #636364;
+  }
+
+  button.register {
+    width: 130px;
+    background-color: #ce3e48;
+    color: #fff;
+
+    a,
+    span {
+      color: #fff;
     }
-
-    button.register {
-        width: 130px;
-        background-color: #ce3e48;
-        color: #fff;
-
-        a, span {
-            color: #fff;
-        }
-    }
+  }
 }
 
-form, .form {
-    margin: 0 auto;
+form,
+.form {
+  margin: 0 auto;
+  border: 1px solid #dddddd;
+  border-radius: 20px;
+
+  input {
+    padding: 0 15px;
+    height: 50px;
     border: 1px solid #dddddd;
-    border-radius: 20px;
+    border-radius: 5px;
+    font-size: 16px;
+    width: inherit;
+  }
 
-    input {
-        padding: 0 15px;
-        height: 50px;
-        border: 1px solid #dddddd;
-        border-radius: 5px;
-        font-size: 16px;
-        width: inherit;
+  dd {
+    display: flex;
+    align-items: center;
+
+    p {
+      font-size: 20px;
+      font-family: "Pretendard-L";
+      line-height: 30px;
     }
 
-    dd {
-        display: flex;
-        align-items: center;
-
-        p {
-            font-size: 20px;
-            font-family: "Pretendard-L";
-            line-height: 30px;
-        }
-
-        span {
-            font-size: 20px;
-            font-family: "Pretendard-SB";
-        }
+    span {
+      font-size: 20px;
+      font-family: "Pretendard-SB";
     }
+  }
 
-    label {
-        position: relative;
-        width: 200px;
-        font-size: 18px;
-        flex-shrink: 0;
+  label {
+    position: relative;
+    width: 200px;
+    font-size: 18px;
+    flex-shrink: 0;
 
-        &.require::after {
-            position: absolute;
-            top: 5px;
-            padding-left: 3px;
-            content: "*";
-            color: #df2d2d;
-        }
+    &.require::after {
+      position: absolute;
+      top: 5px;
+      padding-left: 3px;
+      content: "*";
+      color: #df2d2d;
     }
-
-
+  }
 }
 
 /* 카테고리 */
 .category {
+  display: flex;
+  gap: 5px;
+
+  .category-item {
     display: flex;
-    gap: 5px;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
 
-    .category-item {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 10px;
+  li {
+    width: fit-content;
+    border-radius: 3px;
+    padding: 5px 10px;
+    font-family: "Pretendard-SB" !important;
+    font-size: 14px;
+
+    &:nth-child(odd) {
+      color: #a5067b;
+      border: 1px solid #a5067b;
     }
 
-    li {
-        width: fit-content;
-        border-radius: 3px;
-        padding: 5px 10px;
-        font-family: "Pretendard-SB" !important;
-        font-size: 14px;
-
-        &:nth-child(odd) {
-            color: #a5067b;
-            border: 1px solid #a5067b;
-        }
-
-        &:nth-child(even) {
-            color: #007ac3;
-            border: 1px solid #007ac3;
-        }
-
-        button {
-            margin-left: 15px;
-        }
+    &:nth-child(even) {
+      color: #007ac3;
+      border: 1px solid #007ac3;
     }
+
+    button {
+      margin-left: 15px;
+    }
+  }
 }
 
 /* 로그인 */
 .login-form {
-    width: 600px;
-    padding: 50px 60px;
-    dd{display: block;}
+  width: 600px;
+  padding: 50px 60px;
+
+  dd {
+    display: block;
+  }
+
+  label {
+    color: #666;
+    font-size: 16px;
+    display: block;
+    margin-bottom: 6px;
+  }
+
+  button {
+    font-size: 22px;
+    font-family: "Pretendard-B";
+    background: linear-gradient(132deg, #3e355c, #763954);
+    width: 100%;
+    padding: 19px 0;
+    border-radius: 15px;
+    margin-top: 10px;
+
+    img {
+      margin: 0 12px 0 0;
+    }
+
+    span {
+      color: #fff;
+    }
+  }
+
+  input {
+    width: -webkit-fill-available;
+  }
+
+  .check-area {
+    display: flex;
+
+    input {
+      margin-right: 5px;
+    }
+
     label {
-        color: #666;
-        font-size: 16px;
-        display: block;
-        margin-bottom: 6px;
+      width: auto;
     }
-
-    button {
-        font-size: 22px;
-        font-family: "Pretendard-B";
-        background: linear-gradient(132deg, #3e355c, #763954);
-        width: 100%;
-        padding: 19px 0;
-        border-radius: 15px;
-        margin-top: 10px;
-
-        img {
-            margin: 0 12px 0 0;
-        }
-
-        span {
-            color: #fff;
-        }
-    }
-    input{width: -webkit-fill-available;}
-    .check-area {
-        display: flex;
-        input {
-            margin-right: 5px;
-        }
-        label{width: auto;}
-    }
+  }
 }
 
 /* 내정보 */
 .info-form,
 .pwchange-form {
-
-    padding: 30px 50px;
-
+  padding: 30px 50px;
 }
 
 .pwchange-form {
-    input {
-        width: 40%;
-    }
+  input {
+    width: 40%;
+  }
 }
 
 .invalid-feedback.border {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    background-color: #fbf1f2 !important;
-    border: 1px solid #ce3e48 !important;
-    border-radius: 20px;
-    padding: 8px 24px;
-    margin-left: 20px !important;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: #fbf1f2 !important;
+  border: 1px solid #ce3e48 !important;
+  border-radius: 20px;
+  padding: 8px 24px;
+  margin-left: 20px !important;
 
-    span {
-        font-size: 14px !important;
-        color: #e22d2d;
-        font-family: "Pretendard-EL" !important;
-    }
+  span {
+    font-size: 14px !important;
+    color: #e22d2d;
+    font-family: "Pretendard-EL" !important;
+  }
 }
 
 .info-form {
-    dd {
-        img {
-            margin-right: 17px;
-        }
-
-        span {
-            width: 118px;
-        }
-        .ck-content{font-size: 20px;     font-family: "Pretendard-L";}
+  dd {
+    img {
+      margin-right: 17px;
     }
+
+    span {
+      width: 118px;
+    }
+
+    .ck-content {
+      font-size: 20px;
+      font-family: "Pretendard-L";
+    }
+  }
 }
 
 /* 통합검색 */
 .search-form {
-    dl {
-        padding: 35px 75px;
+  dl {
+    padding: 35px 75px;
 
-        dd {
-            display: flex;
-            align-items: center;
+    dd {
+      display: flex;
+      align-items: center;
 
-            p {
-                font-size: 18px;
-                font-family: "Pretendard-SB";
-                width: 180px;
-                flex-shrink: 0;
-            }
+      p {
+        font-size: 18px;
+        font-family: "Pretendard-SB";
+        width: 180px;
+        flex-shrink: 0;
+      }
 
-            input[type="text"] {
-                background-color: #f6f6f6;
-                border: 0;
-            }
-        }
-        dd.category-dd{
-            ul{
-                flex-wrap: wrap;
-            max-height: 80px;
-            width: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-            }
-
-        }
-        .mark {
-            width: fit-content;
-            margin: 0 11px;
-        }
-
+      input[type="text"] {
+        background-color: #f6f6f6;
+        border: 0;
+      }
     }
 
-    background-image: linear-gradient(#fff, #fff),
-    linear-gradient(-45deg, #ca3e49, #3f355c);
-    background-origin: border-box;
-    background-clip: content-box,
-    border-box;
-    border: 3px solid transparent;
-    border-radius: 32px;
+    dd.category-dd {
+      ul {
+        flex-wrap: wrap;
+        max-height: 80px;
+        width: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
 
+    .mark {
+      width: fit-content;
+      margin: 0 11px;
+    }
+  }
 
-    .btn-group {
-        display: flex;
-        justify-content: center;
+  background-image: linear-gradient(#fff, #fff),
+  linear-gradient(-45deg, #ca3e49, #3f355c);
+  background-origin: border-box;
+  background-clip: content-box,
+  border-box;
+  border: 3px solid transparent;
+  border-radius: 32px;
 
-        button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            width: 140px;
-            font-family: "Pretendard-B";
-            font-size: 16px;
-            border-radius: 30px;
+  .btn-group {
+    display: flex;
+    justify-content: center;
 
-            &.reset {
-                border: 1px solid #ccc;
-            }
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 140px;
+      font-family: "Pretendard-B";
+      font-size: 16px;
+      border-radius: 30px;
 
-            &.search {
-                background: linear-gradient(132deg, #3e355c, #763954);
+      &.reset {
+        border: 1px solid #ccc;
+      }
 
-                p {
-                    color: #fff;
-                }
-            }
+      &.search {
+        background: linear-gradient(132deg, #3e355c, #763954);
+
+        p {
+          color: #fff;
         }
+      }
     }
+  }
 
-    ul {
-        display: flex;
-        gap: 15px;
+  ul {
+    display: flex;
+    gap: 15px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    width: 175px;
+    gap: 12px;
+
+    label {
+      cursor: pointer;
     }
-
-    li {
-        display: flex;
-        align-items: center;
-        width: 175px;
-        gap: 12px;
-        label{cursor: pointer;}
-    }
-
-
-
-
+  }
 }
 
 .select-box {
-    width: 106px;
-    height: 30px;
-    border: 1px solid #cccccc;
-    border-radius: 5px;
-    flex-shrink: 0;
-    line-height: 30px;
-    margin-left: 30px;
+  width: 106px;
+  height: 30px;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  flex-shrink: 0;
+  line-height: 30px;
+  margin-left: 30px;
 
-    select {
-        background: url(../../images/icon/select.png) calc(100% - 5px) center no-repeat;
-        width: 100%;
-        padding: 5px 30px 5px 10px;
-        border: 0;
-        font-size: 14px;
-        -o-appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0 none;
-    }
-    select::-ms-expand { 
-        display: none;
-        
-    }
-    select option {
-        padding: 3px 0;
-      }
-    
+  select {
+    background: url(../../images/icon/select.png) calc(100% - 5px) center no-repeat;
+    width: 100%;
+    padding: 5px 30px 5px 10px;
+    border: 0;
+    font-size: 14px;
+    -o-appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: 0 none;
+  }
+
+  select::-ms-expand {
+    display: none;
+
+  }
+
+  select option {
+    padding: 3px 0;
+  }
+
 }
 
 .search-result {
-    margin-top: 40px;
+  .float-div {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 5;
+    padding: 5px 10px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+    background-color: #FFFFFF;
+  }
 
+  .float-txt {
+    color: inherit;
+    font-size: 14px;
+    font-family: "Pretendard-SB" !important;
+  }
 
+  .result-list-wrap:nth-child(odd) .float-div {
+    color: #a5067b;
+    border: 1px solid #a5067b;
+  }
 
-    .resultext {
-        .main-img {
-            width: 320px;
-            height: 220px;
-            border-radius: 24px;
-        }
-
-        display: flex;
-        align-items: center;
-
-        p {
-            width: max-content;
-            font-family: "Pretendard-L";
-            font-size: 17px;
-
-            b {
-                color: #ce3e48;
-            }
-        }
-
-        img {
-            object-fit: contain;
-        }
-    }
-
-    .result-box {
-        display: flex;
-        justify-content: space-between;
-        border: 1px solid #ddd;
-        border-radius: 24px;
-        padding: 30px;
-        margin-bottom: 30px;
-        cursor: pointer;
-        .main-img{
-            width: 320px;
-            height: 220px;
-            border-radius: 24px;
-            flex-shrink: 0;
-            img{
-                width: 100%;
-                height: 100%;
-                border-radius: 24px;
-                object-fit: contain;
-            }
-        }
-    }
-
-    .text-box {
-        cursor: pointer;
-        p,
-        li {
-            font-family: "Pretendard-L";
-
-        }
-
-        .text {
-            width: 1048px;
-            font-size: 16px;
-            color: #555555;
-            overflow: hidden;
-            /* Hide any overflow */
-            text-overflow: ellipsis;
-            /* Add an ellipsis at the end */
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            /* Limit to 2 lines */
-            -webkit-box-orient: vertical;
-            margin-bottom: 20px;
-        }
-
-        h5 {
-            font-family: "Pretendard-B";
-            font-size: 25px;
-            margin-bottom: 20px;
-
-        }
-
-        .address {
-            font-size: 20px;
-            margin-bottom: 18px;
-        }
-
-        .date {
-            ul {
-                display: flex;
-                gap: 20px;
-            }
-
-            li {
-                font-size: 17px;
-
-                b {
-                    margin-left: 5px;
-                }
-            }
-        }
-    }
-
-    .tabs {
-        .tab-box {
-            display: flex;
-            justify-content: end;
-            gap: 25px;
-        }
-
-        .tab-title {
-            display: flex;
-            align-items: center;
-            gap: 13px;
-
-            p {
-                cursor: pointer;
-                font-family: "HAPPINESS-SANS-REGULAR";
-                color: #cccccc;
-                font-size: 17px;
-
-                b {
-                    color: #cccccc;
-                }
-            }
-
-        }
-
-        .tab-title.active p {
-            color: #000;
-
-            b {
-                color: #ff4141;
-
-            }
-
-        }
-
-        .tab-content {
-            .content-wrap {
-                margin-top: -23px;
-            }
-
-            .box-wrap {
-                width: 454px;
-                height: 370px;
-
-                .box {
-                    background-image: linear-gradient(#fff, #fff),
-                        linear-gradient(-45deg, #fff, #fff);
-                    background-origin: border-box;
-                    background-clip: content-box, border-box;
-                    border: 3px solid transparent;
-                    border-radius: 32px;
-                }
-
-                .box:hover {
-                    background-image: linear-gradient(#fff, #fff),
-                        linear-gradient(-45deg, #ca3e49, #3d355d);
-                }
-
-                .tab-image {
-                    width: 100%;
-                    height: 297px;
-                    object-fit: cover;
-                    border-radius: 30px;
-                }
-
-            }
-
-        }
-
-    }
-
-    .list-wrap {
-        border-top: 2px solid #000;
-
-        &>li {
-            border-bottom: 2px solid #eeeeee;
-            padding: 30px 10px;
-        }
-    }
-    .no-results{
-        text-align: center;
-        padding: 60px 0;
-        border-bottom: 1px solid #ddd;
-        border-top: 1px solid #ddd;
-
-    }
-    .no-results p:first-of-type {
-        font-size: 32px;
-        font-family: "Pretendard-B";
-        margin-top: 45px;
-    }
-
-    .no-results p:last-of-type {
-        font-size: 18px;
-        line-height: 30px;
-        font-family: "Pretendard-L";
-        margin-top: 30px;
-    }
+  .result-list-wrap:nth-child(even) .float-div {
+    color: #007ac3;
+    border: 1px solid #007ac3;
+  }
 }
 
+.search-result {
+  margin-top: 40px;
 
+  .resultext {
+    .main-img {
+      width: 320px;
+      height: 220px;
+      border-radius: 24px;
+    }
+
+    display: flex;
+    align-items: center;
+
+    p {
+      width: max-content;
+      font-family: "Pretendard-L";
+      font-size: 17px;
+
+      b {
+        color: #ce3e48;
+      }
+    }
+
+    img {
+      object-fit: cover;
+    }
+  }
+
+  .result-box {
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #ddd;
+    border-radius: 24px;
+    padding: 30px;
+    margin-bottom: 30px;
+    cursor: pointer;
+
+    .main-img {
+      position: relative;
+      width: 320px;
+      height: 220px;
+      border-radius: 24px;
+      flex-shrink: 0;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 24px;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .text-box {
+    cursor: pointer;
+
+    p,
+    li {
+      font-family: "Pretendard-L";
+
+    }
+
+    .text {
+      width: 1048px;
+      font-size: 16px;
+      color: #555555;
+      overflow: hidden;
+      /* Hide any overflow */
+      text-overflow: ellipsis;
+      /* Add an ellipsis at the end */
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* Limit to 2 lines */
+      -webkit-box-orient: vertical;
+      margin-bottom: 20px;
+    }
+
+    h5 {
+      font-family: "Pretendard-B";
+      font-size: 25px;
+      margin-bottom: 20px;
+
+    }
+
+    .address {
+      font-size: 20px;
+      margin-bottom: 18px;
+    }
+
+    .date {
+      ul {
+        display: flex;
+        gap: 20px;
+      }
+
+      li {
+        font-size: 17px;
+
+        b {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  .tabs {
+    .tab-box {
+      display: flex;
+      justify-content: end;
+      gap: 25px;
+    }
+
+    .tab-title {
+      display: flex;
+      align-items: center;
+      gap: 13px;
+
+      p {
+        cursor: pointer;
+        font-family: "HAPPINESS-SANS-REGULAR";
+        color: #cccccc;
+        font-size: 17px;
+
+        b {
+          color: #cccccc;
+        }
+      }
+
+    }
+
+    .tab-title.active p {
+      color: #000;
+
+      b {
+        color: #ff4141;
+      }
+    }
+
+    .tab-content {
+      .content-wrap {
+        margin-top: -23px;
+      }
+
+      .box-wrap {
+        width: 454px;
+        height: 370px;
+
+        .box {
+          background-image: linear-gradient(#fff, #fff),
+            linear-gradient(-45deg, #fff, #fff);
+          background-origin: border-box;
+          background-clip: content-box, border-box;
+          border: 3px solid transparent;
+          border-radius: 32px;
+        }
+
+        .box:hover {
+          background-image: linear-gradient(#fff, #fff),
+            linear-gradient(-45deg, #ca3e49, #3d355d);
+        }
+
+        .tab-image {
+          width: 100%;
+          height: 297px;
+          object-fit: cover;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+
+  .list-wrap {
+    border-top: 2px solid #000;
+
+    &>li {
+      border-bottom: 2px solid #eeeeee;
+      padding: 30px 10px;
+    }
+  }
+
+  .no-results {
+    text-align: center;
+    padding: 60px 0;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+
+  }
+
+  .no-results p:first-of-type {
+    font-size: 32px;
+    font-family: "Pretendard-B";
+    margin-top: 45px;
+  }
+
+  .no-results p:last-of-type {
+    font-size: 18px;
+    line-height: 30px;
+    font-family: "Pretendard-L";
+    margin-top: 30px;
+  }
+}
 
 /*사진 기록물 등록페이지 */
 .insert-form {
-    padding: 10px 0;
-    border-top: 2px solid #000;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1px solid #eee;
-    border-radius: 0;
+  padding: 10px 0;
+  border-top: 2px solid #000;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid #eee;
+  border-radius: 0;
 
-    dl {
-        dd {
-            padding: 0 24px;
+  dl {
+    dd {
+      padding: 0 24px;
 
-            li {
-                p {
-                    font-family: "Pretendard-L";
-                    font-size: 16px;
-                }
-            }
+      li {
+        p {
+          font-family: "Pretendard-L";
+          font-size: 16px;
         }
-
-        textarea {
-            min-height: 425px;
-            width: 100%;
-            padding: 15px;
-        }
-        textarea:focus {
-            outline: none;
-            box-shadow: none;
-          }
-        .category-add {
-            width: 72px;
-            height: 29px;
-            color: #fff;
-            background-color: #000;
-            border-radius: 15px;
-            margin-left: 10px;
-        }
+      }
     }
 
-    .invalid-feedback {
-        display: flex;
-        border: 0;
-        background-color: transparent;
-        margin-left: 10px;
-        span{
-            color: #e22d2d;
-            font-size: 14px;
-            font-family: "Pretendard-EL";
-        }
-
+    textarea {
+      min-height: 425px;
+      width: 100%;
+      padding: 15px;
     }
 
+    textarea:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .category-add {
+      width: 72px;
+      height: 29px;
+      color: #fff;
+      background-color: #000;
+      border-radius: 15px;
+      margin-left: 10px;
+    }
+  }
+
+  .invalid-feedback {
+    display: flex;
+    border: 0;
+    background-color: transparent;
+    margin-left: 10px;
+
+    span {
+      color: #e22d2d;
+      font-size: 14px;
+      font-family: "Pretendard-EL";
+    }
+  }
 }
 
 .file-input {
-    display: none;
+  display: none;
 }
 
 /* Style the custom label (the clickable button) */
 .file-label {
-    display: inline-block;
-    padding: 25px 0px;
-    width: 100% !important;
-    background-color: #f6f6f6;
-    border: 2px dashed #dadada;
-    color: white;
-    font-size: 16px;
-    border-radius: 10px;
-    cursor: pointer;
-    text-align: center;
-    transition: background-color 0.3s ease;
+  display: inline-block;
+  padding: 25px 0px;
+  width: 100% !important;
+  background-color: #f6f6f6;
+  border: 2px dashed #dadada;
+  color: white;
+  font-size: 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.3s ease;
 
 }
 
 .file-label>div p {
-    font-family: "Pretendard-B" !important;
-    font-size: 20px !important;
+  font-family: "Pretendard-B" !important;
+  font-size: 20px !important;
 }
 
 /* Style the label on hover */

 
 /* Style for the file names display */
 .file-names {
-    display: block;
-    /* Make each file name appear on a new line */
-    font-size: 16px;
-    color: #333;
+  display: block;
+  /* Make each file name appear on a new line */
+  font-size: 16px;
+  color: #333;
 
-    &> div, span {
-        color: #dadada;
+  &>div,
+  span {
+    color: #dadada;
+  }
+
+  .file-wrap {
+    border: 1px solid #dadada;
+    border-radius: 10px;
+    padding: 12px;
+
+    .file-name {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-right: 10px;
+      }
+
     }
-
-    .file-wrap {
-        border: 1px solid #dadada;
-        border-radius: 10px;
-        padding: 12px;
-
-        .file-name {
-            display: flex;
-            align-items: center;
-
-            img {
-                margin-right: 10px;
-            }
-
-        }
-    }
+  }
 }
 
 
 /* 모달 */
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    /* 배경 어두운 투명도 */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  /* 배경 어두운 투명도 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
 }
 
 .modal-content {
-    background-color: #fff;
-    padding: 50px 35px;
-    border-radius: 8px;
-    max-width: 1000px;
-    width: 100%;
-    text-align: center;
+  background-color: #fff;
+  padding: 50px 35px;
+  border-radius: 8px;
+  max-width: 1000px;
+  width: 100%;
+  text-align: center;
 
-    h2 {
-        font-family: "Pretendard-B";
-        font-size: 30px;
+  h2 {
+    font-family: "Pretendard-B";
+    font-size: 30px;
+  }
+
+  /* pagination */
+  .pagination {
+    button {
+      width: 40px;
+      height: 40px;
+      margin: 0 4px;
+      border: 1px solid #f0f1f4;
+      background-color: #fff;
+      border-radius: 50px;
     }
 
-    /* pagination */
-    .pagination {
-        button {
-            width: 40px;
-            height: 40px;
-            margin: 0 4px;
-            border: 1px solid #f0f1f4;
-            background-color: #fff;
-            border-radius: 50px;
-        }
-
-        button.page-number {
-            font-size: 20px;
-            color: #555555;
-            width: 40px;
-            height: 40px;
-            background-color: #f0f1f4;
-            border-radius: 50px;
-        }
-
-        button.page-number.clicked {
-            background-color: #ce3e48;
-            color: #fff;
-        }
-
-        .anticon {
-            svg {
-                font-size: 17px;
-
-                path {
-                    color: #636364;
-                }
-            }
-
-
-        }
+    button.page-number {
+      font-size: 20px;
+      color: #555555;
+      width: 40px;
+      height: 40px;
+      background-color: #f0f1f4;
+      border-radius: 50px;
     }
 
-    .modal-search {
-        padding: 13px;
-        background-color: rgba(0, 61, 97, 0.05);
-        border-radius: 10px;
-
-        input {
-            padding: 0px 20px;
-            background-color: #fff;
-            border-radius: 5px;
-            width: 300px;
-            height: 45px;
-            font-size: 16px;
-            margin-right: 5px;
-        }
-
-        .search-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 80px;
-            height: 45px;
-            gap: 5px;
-            border-radius: 5px;
-            background-color: #000;
-            p {
-                font-size: 16px;
-                color: #fff;
-                font-family: "Pretendard-SB";
-            }
-        }
+    button.page-number.clicked {
+      background-color: #ce3e48;
+      color: #fff;
     }
 
+    .anticon {
+      svg {
+        font-size: 17px;
 
+        path {
+          color: #636364;
+        }
+      }
+    }
+  }
 
-    .register-b {
-        width: 110px;
-        height: 40px;
-        font-size: 18px;
-        background-color: #000;
+  .modal-search {
+    padding: 13px;
+    background-color: rgba(0, 61, 97, 0.05);
+    border-radius: 10px;
+
+    input {
+      padding: 0px 20px;
+      background-color: #fff;
+      border-radius: 5px;
+      width: 300px;
+      height: 45px;
+      font-size: 16px;
+      margin-right: 5px;
+    }
+
+    .search-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 45px;
+      gap: 5px;
+      border-radius: 5px;
+      background-color: #000;
+
+      p {
+        font-size: 16px;
         color: #fff;
-        font-family: "Pretendard-M";
-        border-radius: 50px;
+        font-family: "Pretendard-SB";
+      }
     }
+  }
 
+  .register-b {
+    width: 110px;
+    height: 40px;
+    font-size: 18px;
+    background-color: #000;
+    color: #fff;
+    font-family: "Pretendard-M";
+    border-radius: 50px;
+  }
 }
-
 
 /* 사진기록물 상세페이지 */
 .gallery-form {
-    border: 0;
+  border: 0;
 
-    dl {
-        padding: 30px 0 0 0;
-        border-top: 2px solid #000;
+  dl {
+    padding: 30px 0 0 0;
+    border-top: 2px solid #000;
+
+    dd {
+      position: relative;
+      background: #f6f6f6;
+      padding: 25px 0px;
+
+      p {
+        flex: 1;
+        font-size: 35px;
+        text-align: center;
+        font-family: "Pretendard-B"
+      }
+
+      .date {
+        position: absolute;
+        right: 30px;
+
+        span {
+          font-family: "Pretendard-R";
+          font-size: 18px;
+        }
+
+        img {
+          object-fit: contain;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .gallery {
+    margin-bottom: 107px;
+    position: relative;
+
+    &.video {
+      margin-bottom: 50px;
+
+      img {
+        height: 800px;
+        border-radius: 20px;
+      }
+
+      .video-container {
+        position: relative;
+        width: 100%;
+        padding-top: 56.25%;
+        /* 16:9 비율 */
+        overflow: hidden;
+      }
+
+      .video-container iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .main-swiper {
+      .swiper {
+        width: 100%;
+
+        .swiper-slide {
+          img {
+            width: 100%;
+            aspect-ratio: 15 / 8;
+            object-fit: contain;
+            background-color: #ddd;
+            display: block;
+          }
+        }
+
+      }
+    }
+
+    .thumbnail {
+      /* width: 1127px; */
+      padding: 30px 95px;
+      background-color: #fff;
+      border-radius: 90px;
+      position: absolute;
+      z-index: 1;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -10%;
+      box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);
+
+      .swiper {
+        width: 940px;
+        position: initial;
+        height: 120px;
+        margin: 0 auto;
+
+        .swiper-slide {
+          background-image: linear-gradient(#fff, #fff),
+            linear-gradient(-45deg, #fff, #fff);
+          background-origin: border-box;
+          background-clip: content-box, border-box;
+          border: 3px solid transparent;
+        }
+
+        .swiper-slide:hover,
+        .active-thumb {
+          background-image: linear-gradient(#fff, #fff),
+            linear-gradient(-45deg, #ca3e49, #3d355d);
+        }
+
+        .swiper-wrapper {
+          margin: 0;
+        }
+
+        .swiper-slide img {
+          width: -webkit-fill-available;
+          cursor: pointer;
+          object-fit: contain;
+        }
+
+        input {
+          position: absolute;
+          right: 6px;
+          top: 6px;
+          z-index: 5;
+        }
+      }
+    }
+
+    .swiper-button-prev,
+    .swiper-button-next {
+      box-shadow: none;
+      margin-top: -35px;
+    }
+
+    .swiper-button-prev {
+      left: 20px;
+    }
+
+    .swiper-button-next {
+      right: 20px;
+    }
+  }
+
+  .img-box {
+    margin-right: 50px;
+    width: 600px;
+    height: 360px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .info-form {
+    background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    border: 3px solid transparent;
+    border-radius: 32px;
+    padding: 0;
+    height: 360px;
+
+    .info-box {
+      padding: 50px 40px;
+
+      dl {
+        border: 0;
+        padding: 37px;
+        border-radius: 20px;
+        background-color: #f5f6f8;
 
         dd {
-            position: relative;
-            background: #f6f6f6;
-            padding: 25px 0px;
+          background-color: transparent;
+          padding: 0;
 
-            p {
-                flex: 1;
-                font-size: 35px;
-                text-align: center;
-                font-family: "Pretendard-B"
-            }
-
-            .date {
-                position: absolute;
-                right: 30px;
-
-                span {
-                    font-family: "Pretendard-R";
-                    font-size: 18px;
-                }
-
-                img {
-
-                    object-fit: contain;
-                    margin-right: 10px;
-                }
-
-            }
-
-
-        }
-
-    }
-
-    .gallery {
-        margin-bottom: 107px;
-        position: relative;
-
-        &.video {
-            margin-bottom: 50px;
-
-            img {
-                height: 800px;
-                border-radius: 20px;
-            }
-            .video-container {
-                position: relative;
-                width: 100%;
-                padding-top: 56.25%; /* 16:9 비율 */
-                overflow: hidden;
-              }
-              
-              .video-container iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-              }
-        }
-
-        .main-swiper {
-            .swiper {
-                width: 100%;
-
-                .swiper-slide {
-                    img {
-                        width: 100%;
-                        aspect-ratio: 15 / 8;
-                        object-fit: contain;
-                        background-color: #ddd;
-                        display: block;
-                    }
-                }
-
-            }
-        }
-
-        .thumbnail {
-            /* width: 1127px; */
-            padding: 30px 95px;
-            background-color: #fff;
-            border-radius: 90px;
-            position: absolute;
-            z-index: 1;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: -10%;
-            box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);
-
-            .swiper {
-                width: 940px;
-                position: initial;
-                height: 120px;
-                margin: 0 auto;
-                .swiper-slide{
-                    background-image: linear-gradient(#fff, #fff),
-                    linear-gradient(-45deg, #fff, #fff);
-                    background-origin: border-box;
-                    background-clip: content-box, border-box;
-                    border: 3px solid transparent;
-                }
-                .swiper-slide:hover,
-                .active-thumb {
-                    background-image: linear-gradient(#fff, #fff),
-                    linear-gradient(-45deg, #ca3e49, #3d355d);
-                }
-                .swiper-wrapper {
-                    margin: 0;
-                }
-
-                .swiper-slide img {
-                    width: -webkit-fill-available;
-                    cursor: pointer;
-                    object-fit: contain;
-
-                }
-
-                input{position: absolute; right: 6px; top: 6px; z-index: 5;}
-            }
-        }
-
-        .swiper-button-prev,
-        .swiper-button-next {
-            box-shadow: none;
-            margin-top: -35px;
-        }
-
-        .swiper-button-prev {
-            left: 20px;
-        }
-
-        .swiper-button-next {
-            right: 20px;
-        }
-
-
-    }
-
-    .img-box {
-        margin-right: 50px;
-        width: 600px;
-        height: 360px;
-        img{
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-    }
-
-    .info-form {
-        background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
-        background-origin: border-box;
-        background-clip: content-box, border-box;
-        border: 3px solid transparent;
-        border-radius: 32px;
-        padding: 0;
-        height: 360px;
-
-        .info-box {
-            padding: 50px 40px;
-
-            dl {
-                border: 0;
-                padding: 37px;
-                border-radius: 20px;
-                background-color: #f5f6f8;
-
-                dd {
-                    background-color: transparent;
-                    padding: 0;
-
-                    p {
-                        font-size: 20px;
-                        text-align: left;
-                        font-family: "Pretendard-L";
-                    }
-                }
-            }
-        }
-
-    }
-
-
-    .btn-group {
-        margin-top: 24px;
-        text-align: center;
-
-        button {
-            width: 160px;
-            height: 45px;
-            font-family: "Pretendard-B";
-            font-size: 16px;
-            padding: 13px 21px;
+          p {
+            font-size: 20px;
             text-align: left;
-            margin: 0 5px;
+            font-family: "Pretendard-L";
+          }
         }
+      }
+    }
+  }
 
-        .select-down {
-            background-image: url(../../images/downbtn_border.png);
-        }
+  .btn-group {
+    margin-top: 24px;
+    text-align: center;
 
-        .all-down {
-            background-image: url(../../images/downbtn_bg.png);
-            color: #fff;
-        }
+    button {
+      width: 160px;
+      height: 45px;
+      font-family: "Pretendard-B";
+      font-size: 16px;
+      padding: 13px 21px;
+      text-align: left;
+      margin: 0 5px;
     }
 
+    .select-down {
+      background-image: url(../../images/downbtn_border.png);
+    }
 
+    .all-down {
+      background-image: url(../../images/downbtn_bg.png);
+      color: #fff;
+    }
+  }
 }
+
 .loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-    p{color: #fff;}
-    p:first-of-type {
-        font-size: 30px;
-        font-family: "Pretendard-B";
-        margin-top: 28px;
-    }
-    p:last-of-type {
-        font-size: 22px;
-        font-family: "Pretendard-M";
-        margin-top: 18px;
-    }
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+
+  p {
+    color: #fff;
   }
-  .loading-spinner {
-    background: url(../../images/loading.png);
-   width: 178px;
-   height: 178px;
+
+  p:first-of-type {
+    font-size: 30px;
+    font-family: "Pretendard-B";
+    margin-top: 28px;
   }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+
+  p:last-of-type {
+    font-size: 22px;
+    font-family: "Pretendard-M";
+    margin-top: 18px;
   }
+}
+
+.loading-spinner {
+  background: url(../../images/loading.png);
+  width: 178px;
+  height: 178px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 /* 회원관리,  카테고리 관리 */
 .management {
-    .left-con {
-        width: 350px;
-        margin-right: 55px;
-    }
+  .left-con {
+    width: 350px;
+    margin-right: 55px;
+  }
 
-    .search-area {
-        gap: 5px;
-        padding: 0;
-        height: 40px;
-    }
+  .search-area {
+    gap: 5px;
+    padding: 0;
+    height: 40px;
+  }
 
-    .search-wrap {
+  .search-wrap {
 
-        position: initial;
-        transform: none;
+    position: initial;
+    transform: none;
 
-        input {
-            width: 100%;
-            height: 100%;
-            border: 1px solid #000;
-            border-radius: 5px;
-        }
-
-        .select-box {
-            border-color: #000;
-            width: 100px;
-            height: 100%;
-
-            select {
-                width: 100%;
-                color: #000;
-            }
-        }
-
-        .search-btn {
-            position: relative;
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            background-color: #000;
-            border-radius: 5px;
-
-            img {
-                position: absolute;
-                left: 50%;
-                right: 50%;
-                transform: translateX(-50%) translateY(-50%);
-            }
-
-        }
-    }
-
-    .btn-group-small {
-        gap: 5px;
-
-        .button {
-            &.flex {
-                img {
-                    text-align: left;
-                    margin-right: 10px;
-                }
-
-                p {
-                    text-align: center;
-                }
-            }
-        }
+    input {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #000;
+      border-radius: 5px;
     }
 
     .select-box {
-        width: 230px;
-        height: 50px;
-        border: 1px solid #ddd;
-        padding: 0 15px;
-        margin: 0;
+      border-color: #000;
+      width: 100px;
+      height: 100%;
 
-        select {
-            width: 100%;
-            height: 100%;
-            font-size: 16px;
-            /* color: #999999; */
-        }
+      select {
+        width: 100%;
+        color: #000;
+      }
     }
 
-    .switch {
-        label {
-            margin-top: -12px;
-        }
-    }
+    .search-btn {
+      position: relative;
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      background-color: #000;
+      border-radius: 5px;
 
-    table {
-        .selected {
-            background-color: rgba(194, 61, 74, 0.2);
-        }
-        border-radius: 10px;
-        overflow: hidden;
-
-        thead {
-            display: table;
-            width: 100%;
-            background-color: #636364;
-
-            th {
-                color: #fff;
-                border: 1px solid #eee;
-            }
-        }
-
-        td {
-            /* border: 1px solid #eee; */
-            text-align: center;
-        }
-        tbody {
-            border: 1px solid #eee;
-            display: block;
-            min-height: 53rem;
-            max-height: 53rem; /* Adjust the height as per your requirement */
-            overflow-y: auto;
-            overflow-x: hidden; /* Optional: Prevent horizontal scroll */
-          }
-          tbody tr{
-            table-layout: fixed; display: table;width: 100%;
-            td{cursor: pointer;}
-        }
-        tbody tr:hover td {
-            background-color: rgba(194, 61, 74, 0.1);
-        }
+      img {
+        position: absolute;
+        left: 50%;
+        right: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
 
     }
+  }
 
-    .delete-member {
-        background-color: #f5f8f9;
+  .btn-group-small {
+    gap: 5px;
 
-        td {
-            color: #aaaaaa;
-
+    .button {
+      &.flex {
+        img {
+          text-align: left;
+          margin-right: 10px;
         }
+
+        p {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .select-box {
+    width: 230px;
+    height: 50px;
+    border: 1px solid #ddd;
+    padding: 0 15px;
+    margin: 0;
+
+    select {
+      width: 100%;
+      height: 100%;
+      font-size: 16px;
+      /* color: #999999; */
+    }
+  }
+
+  .switch {
+    label {
+      margin-top: -12px;
+    }
+  }
+
+  table {
+    .selected {
+      background-color: rgba(194, 61, 74, 0.2);
     }
 
-    textarea {
-        border-color: #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+
+    thead {
+      display: table;
+      width: 100%;
+      background-color: #636364;
+
+      th {
+        color: #fff;
+        border: 1px solid #eee;
+      }
     }
+
+    td {
+      /* border: 1px solid #eee; */
+      text-align: center;
+    }
+
+    tbody {
+      border: 1px solid #eee;
+      display: block;
+      min-height: 53rem;
+      max-height: 53rem;
+      /* Adjust the height as per your requirement */
+      overflow-y: auto;
+      overflow-x: hidden;
+      /* Optional: Prevent horizontal scroll */
+    }
+
+    tbody tr {
+      table-layout: fixed;
+      display: table;
+      width: 100%;
+
+      td {
+        cursor: pointer;
+      }
+    }
+
+    tbody tr:hover td {
+      background-color: rgba(194, 61, 74, 0.1);
+    }
+
+  }
+
+  .delete-member {
+    background-color: #f5f8f9;
+
+    td {
+      color: #aaaaaa;
+
+    }
+  }
+
+  textarea {
+    border-color: #ddd;
+  }
 }
 
 

 
 
 input[type="date"] {
-    position: relative;
-    width: 158px;
-    border-radius: 8px;
-    background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
+  position: relative;
+  width: 158px;
+  border-radius: 8px;
+  background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
 }
 
 input[type="date"]::placeholder {
-    color: #fff;
-    ;
+  color: #fff;
+  ;
 }
 
 input[type='date']::-webkit-calendar-picker-indicator {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    color: transparent;
-    cursor: pointer;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
 }
 
 input[type="checkbox"] {
-    position: relative;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    accent-color: #544483;
-    /* This will change the checkbox color when checked */
-    border: 1px solid #cccccc;
-    /* This controls the border color */
-    border-radius: 4px;
-    /* Optional: rounded corners */
-    background-color: #fff;
-    /* Default background */
-    appearance: none;
-    /* Remove the default checkbox appearance */
-    cursor: pointer;
+  position: relative;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  accent-color: #544483;
+  /* This will change the checkbox color when checked */
+  border: 1px solid #cccccc;
+  /* This controls the border color */
+  border-radius: 4px;
+  /* Optional: rounded corners */
+  background-color: #fff;
+  /* Default background */
+  appearance: none;
+  /* Remove the default checkbox appearance */
+  cursor: pointer;
 }
 
 /* Checked state of the checkbox */
 input[type="checkbox"]:checked {
-    background-color: #544483;
-    /* Custom background when checked */
-    border-color: #544483;
-    /* Custom border color when checked */
+  background-color: #544483;
+  /* Custom background when checked */
+  border-color: #544483;
+  /* Custom border color when checked */
 }
 
 input[type="checkbox"]:checked::before {
-    content: '';
-    background-image: url(../../images/check.png);
-    background-repeat: no-repeat;
-    position: absolute;
-    left: 2px;
-    top: 5px;
-    width: 15px;
-    height: 11px;
+  content: '';
+  background-image: url(../../images/check.png);
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 2px;
+  top: 5px;
+  width: 15px;
+  height: 11px;
 }
 
 input[type="checkbox"]:checked+label {
-    color: rgba(0, 0, 0, 0.12);
-    /* Change the label color when checkbox is checked */
+  color: rgba(0, 0, 0, 0.12);
+  /* Change the label color when checkbox is checked */
 }
 
 input[type="checkbox"]+label,
 input[type='radio']+label {
-    font-size: 17px;
-    font-family: "Pretendard-L";
-    width: 140px;
-    flex-shrink: 0;
+  font-size: 17px;
+  font-family: "Pretendard-L";
+  width: 140px;
+  flex-shrink: 0;
 }
 
 /* 기본스타일 제거, 버튼 모양 재설정 */
 input[type='radio'] {
-    flex-shrink: 0;
-    -webkit-appearance: none;
-    /* 웹킷 브라우저에서 기본 스타일 제거*/
-    -moz-appearance: none;
-    /* 모질라 브라우저에서 기본 스타일 제거*/
-    appearance: none;
-    /*기본 브라우저에서 기본 스타일 제거*/
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: 1px solid #ccc;
-    /*체크되지 않았을 때의 테두리 색상*/
-    border-radius: 50%;
-    outline: none;
-    /*focus 시에 나타나는 기본 스타일 제거*/
-    cursor: pointer;
+  flex-shrink: 0;
+  -webkit-appearance: none;
+  /* 웹킷 브라우저에서 기본 스타일 제거*/
+  -moz-appearance: none;
+  /* 모질라 브라우저에서 기본 스타일 제거*/
+  appearance: none;
+  /*기본 브라우저에서 기본 스타일 제거*/
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid #ccc;
+  /*체크되지 않았을 때의 테두리 색상*/
+  border-radius: 50%;
+  outline: none;
+  /*focus 시에 나타나는 기본 스타일 제거*/
+  cursor: pointer;
 }
 
 /* 체크 시 버튼 모양 스타일*/
 input[type='radio']:checked {
-    background-color: #544483;
-    /*체크 시 내부 원 색상*/
-    border: 4px solid #fff;
-    /*라인이 아닌, 라인과 원 사이 색상*/
-    box-shadow: 0 0 0 1px #ccc;
-    /*라인*/
+  background-color: #544483;
+  /*체크 시 내부 원 색상*/
+  border: 4px solid #fff;
+  /*라인이 아닌, 라인과 원 사이 색상*/
+  box-shadow: 0 0 0 1px #ccc;
+  /*라인*/
 }
 
 .switch {
-    input[type="checkbox"] {
-        height: 0;
-        width: 0;
-        visibility: hidden;
-    }
+  input[type="checkbox"] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+  }
 
-    label {
-        cursor: pointer;
-        text-indent: -9999px;
-        width: 65px;
-        height: 28px;
-        background: #787878;
-        display: block;
-        border-radius: 100px;
-        position: relative;
-        transition: background-color 0.3s ease;
-        /* Added smooth transition for background */
-    }
+  label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 65px;
+    height: 28px;
+    background: #787878;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+    transition: background-color 0.3s ease;
+    /* Added smooth transition for background */
+  }
 
-    label:after {
-        content: '';
-        position: absolute;
-        top: 4px;
-        left: 5px;
-        width: 20px;
-        height: 20px;
-        background: #fff;
-        border-radius: 50%;
-    }
+  label:after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 5px;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border-radius: 50%;
+  }
 
-    /* When the input is checked */
-    input:checked+label {
-        background: #544483;
-        /* Color when active */
-    }
+  /* When the input is checked */
+  input:checked+label {
+    background: #544483;
+    /* Color when active */
+  }
 
-    input:checked+label:after {
-        left: calc(100% - 5px);
-        transform: translateX(-100%);
-        /* Keeps the ball moving smoothly */
-    }
+  input:checked+label:after {
+    left: calc(100% - 5px);
+    transform: translateX(-100%);
+    /* Keeps the ball moving smoothly */
+  }
 
-    /* Optional: Make the toggle ball slightly larger during the click for a better effect */
-    label:active:after {
-        width: 20px;
-        /* Slightly increase the ball size */
-        height: 20px;
-    }
+  /* Optional: Make the toggle ball slightly larger during the click for a better effect */
+  label:active:after {
+    width: 20px;
+    /* Slightly increase the ball size */
+    height: 20px;
+  }
 }
 
 

 
 /* table*/
 table {
-    width: 100%;
-    border-collapse: collapse;
-    border-top: 2px solid #000;
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 2px solid #000;
 }
 
 thead {
-    background-color: #f6f6f6;
+  background-color: #f6f6f6;
 }
 
 th {
-    font-family: "Pretendard-SB";
-    font-size: 18px;
+  font-family: "Pretendard-SB";
+  font-size: 18px;
 }
 
 tbody tr {
-    border-bottom: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
 
-    td {
-        font-size: 16px;
-        font-family: "Pretendard-L";
-    }
+  td {
+    font-size: 16px;
+    font-family: "Pretendard-L";
+  }
 }
 
 td,
 th {
-    padding: 10px 0;
+  padding: 10px 0;
 }
 
 /* 에디터 */
-.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable){
-    border-color: #ddd !important;
-    box-shadow: 0 0 0 0 !important;
+.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
+  border-color: #ddd !important;
+  box-shadow: 0 0 0 0 !important;
 }
-  .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content{
-    border-color: #ddd !important;
+
+.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
+  border-color: #ddd !important;
+}
+
+.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
+  border-color: #ddd !important;
+}
+
+.ck.ck-balloon-panel.ck-balloon-panel_visible {
+  display: none !important;
+}
+
+
+/* 카드형 목록 보기 (사진 기록물 전용 / 갤러리형) */
+.gallery-wrap {
+  width: 100%;
+  display: grid;
+  gap: 30px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: auto;
+}
+
+.gallery-item {
+  cursor: pointer;
+
+  .item {
+    padding: 30px;
+    border: 1px solid #ddd;
+    border-radius: 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
-  .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused){
-    border-color: #ddd !important;
+
+  .img-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    border-radius: 24px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
-  .ck.ck-balloon-panel.ck-balloon-panel_visible{
-    display: none !important;
-  }
+
+  .text-box {
+    width: 100%;
+    margin-top: 20px;
+    font-family: "Pretendard-L";
+    font-size: 16px;
+  }
+
+  .category {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+
+.img-view {
+  display: flex;
+  gap: 20px;
+
+  .current-img-wrap {
+    width: 60%;
+    aspect-ratio: 6 / 4;
+    background-color: #ddd;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .thumb-view {
+    width: 40%;
+    aspect-ratio: 6 / 4;
+  }
+}
+
+.thumbnails {
+  width: 100%;
+  height: calc(100% - 65px);
+  overflow-y: auto;
+
+  >div {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+  }
+
+  .thumbnail-wrap {
+    position: relative;
+    width: 100%;
+  }
+
+  .thumbnail {
+    width: 100%;
+    aspect-ratio: 6 / 4;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .float-div {
+    position: absolute;
+    right: .5rem;
+    bottom: .5rem;
+    z-index: 5;
+  }
+}
+
+.download-btn {
+  .btn {
+    width: 160px;
+    height: 45px;
+    font-family: "Pretendard-B";
+    font-size: 16px;
+    padding: 13px 21px;
+    text-align: left;
+    margin: 0 5px;
+    background-image: url(../../images/downbtn_bg.png);
+    color: #fff;
+  }
+
+  .select-down {
+    background-image: url(../../images/downbtn_border.png);
+  }
+}
+
+.btn-sm {
+  color: inherit;
+  font-size: 14px;
+  font-family: "Pretendard-SB" !important;
+
+  padding: 5px 10px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+
+  &.red {
+    color: #a5067b;
+    border: 1px solid #a5067b;
+  }
+}
+
+.category-dd {
+  ul {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    max-height: 80px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    width: 175px;
+    gap: 12px;
+
+    label {
+      cursor: pointer;
+    }
+  }
+}

1e536dc

fdad3b0

client/resources/js/cmmnPlugin.js

--- client/resources/js/cmmnPlugin.js

+++ client/resources/js/cmmnPlugin.js

...	...	@@ -96,6 +96,36 @@
96	96	Vue.config.globalProperties.$processTitle = (title) => {
97	97	if (!title) return '';
98	98	return title.trim().replace(/\s+/g, ' ');
	99	+ };
	100	+
	101	+ // 생산연도 포맷팅 함수
	102	+ Vue.config.globalProperties.$formatPrdctnDate = (prdctnYear) => {
	103	+ if (!prdctnYear) return '-';
	104	+
	105	+ const prdctnYearStr = String(prdctnYear);
	106	+
	107	+ // 길이에 따른 처리
	108	+ if (prdctnYearStr.length === 4) {
	109	+ // YYYY 형식인 경우 - 년도만 있는 경우
	110	+ return `${prdctnYearStr}`;
	111	+ } else if (prdctnYearStr.length === 8) {
	112	+ // YYYYMMDD 형식인 경우
	113	+ const year = prdctnYearStr.substring(0, 4);
	114	+ const month = prdctnYearStr.substring(4, 6);
	115	+ const day = prdctnYearStr.substring(6, 8);
	116	+
	117	+ // 월과 일이 00인 경우 처리
	118	+ if (month === '00' && day === '00') {
	119	+ return `${year}`;
	120	+ } else if (day === '00') {
	121	+ return `${year}.${month}`;
	122	+ } else {
	123	+ return `${year}.${month}.${day}`;
	124	+ }
	125	+ }
	126	+
	127	+ // 다른 형식은 그대로 반환
	128	+ return prdctnYearStr;
99	129	}
100	130	},
101	131	} (파일 끝에 줄바꿈 문자 없음)

1e536dc

fdad3b0

client/views/component/CardViewList.vue (Renamed from client/views/component/listLayout/CardViewList.vue)

--- client/views/component/listLayout/CardViewList.vue

+++ client/views/component/CardViewList.vue


 <template>
-  <div class="mb-30">
+  <div class="result-list-wrap mb-30">
     <div class="flex-sp-bw mb-20">
       <div class="resultext">
         <img :src="resulticon" alt="">

       <button type="button" class="gopage" @click="fnMoveTo">모두보기</button>
     </div>
     <div v-if="list.length > 0">
-      <CardStyleComponent :name="name" :list="list" />
+      <CardStyleComponent :typeText="typeText" :name="name" :list="list" />
     </div>
     <div v-else class="no-results">
       <img :src="nosearch" alt="">

   },
 
   computed: {
+    typeText() {
+      switch (this.name) {
+        case 'P':
+          return '사진';
+        case 'V':
+          return '영상';
+        case 'M':
+          return '미디어 영상';
+        case 'N':
+          return '스크랩 자료';
+      }
+    },
     helpText() {
       switch (this.name) {
         case 'P':

fdad3b0

client/views/component/CategoryListComponent.vue (added)

+++ client/views/component/CategoryListComponent.vue

...	...	@@ -0,0 +1,85 @@
	1	+<template>
	2	+ <ul>
	3	+ <li v-for="(category, idx) of categoryList" :key="idx">
	4	+ <input type="checkbox" :id="'ctgry_' + idx" name="categorys" :value="category.ctgryId" :checked="isSelected(category)" @change="updateSelected(category)" />
	5	+ <label :for="'ctgry_' + idx">{{ category.ctgryNm }}</label>
	6	+ </li>
	7	+ </ul>
	8	+</template>
	9	+<script>
	10	+// API
	11	+import { findAllByNullProc } from "@/resources/api/category";
	12	+
	13	+// 카테고리 목록 검색
	14	+export default {
	15	+ name: 'CategoryListComponent',
	16	+
	17	+ props: {
	18	+ modelValue: {
	19	+ type: Array,
	20	+ default: () => [],
	21	+ }
	22	+ },
	23	+
	24	+ emits: ['update:modelValue'],
	25	+
	26	+ data() {
	27	+ return {
	28	+ categoryList: [], // 카테고리 목록
	29	+ };
	30	+ },
	31	+
	32	+ created() {
	33	+ this.fnFindCategorys(); // 카테고리 목록 조회
	34	+ },
	35	+
	36	+ methods: {
	37	+ // 카테고리 목록 조회
	38	+ async fnFindCategorys() {
	39	+ try {
	40	+ const response = await findAllByNullProc();
	41	+ if (response.data && response.data.data && response.data.data.ctgry) {
	42	+ this.categoryList = response.data.data.ctgry;
	43	+ } else {
	44	+ this.categoryList = [];
	45	+ }
	46	+ } catch (error) {
	47	+ this.categoryList = []; // 카테고리 목록 초기화
	48	+ if (error.response) {
	49	+ alert(error.response.data.message);
	50	+ }
	51	+ console.error(error.message);
	52	+ }
	53	+ },
	54	+
	55	+ // 체크박스가 선택되었는지 확인
	56	+ isSelected(category) {
	57	+ return this.modelValue.some(item =>
	58	+ item.ctgryId === category.ctgryId \|\| item === category.ctgryId);
	59	+ },
	60	+
	61	+ // 선택된 카테고리 업데이트 (부모 컴포넌트에 이벤트 발생)
	62	+ updateSelected(category) {
	63	+ // 현재 선택된 항목의 복사본 생성
	64	+ const updatedSelection = [...this.modelValue];
	65	+
	66	+ // 이미 선택된 항목인지 확인
	67	+ const index = updatedSelection.findIndex(item =>
	68	+ (typeof item === 'object' && item.ctgryId === category.ctgryId) \|\|
	69	+ item === category.ctgryId
	70	+ );
	71	+
	72	+ if (index === -1) {
	73	+ // 선택되지 않은 경우 추가
	74	+ updatedSelection.push(category);
	75	+ } else {
	76	+ // 이미 선택된 경우 제거
	77	+ updatedSelection.splice(index, 1);
	78	+ }
	79	+
	80	+ // 부모 컴포넌트에 업데이트된 목록 전달
	81	+ this.$emit('update:modelValue', updatedSelection);
	82	+ }
	83	+ }
	84	+};
	85	+</script>(파일 끝에 줄바꿈 문자 없음)

1e536dc

fdad3b0

client/views/component/DefaultPagination.vue (Renamed from client/views/component/listLayout/DefaultPagination.vue)

--- client/views/component/listLayout/DefaultPagination.vue

+++ client/views/component/DefaultPagination.vue

No changes

fdad3b0

client/views/component/PrdctnSelectComponent.vue (added)

+++ client/views/component/PrdctnSelectComponent.vue

...	...	@@ -0,0 +1,166 @@
	1	+<template>
	2	+ <div class="date-input-group">
	3	+ <select id="prdctnYear" v-model="localDateForm.year" class="year-select" @change="emitChanges">
	4	+ <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
	5	+ </select>
	6	+ <input type="text" id="prdctnMonth" placeholder="월" v-model="localDateForm.month" maxlength="2" @input="onlyNumberInput('month')" class="month-input">
	7	+ <input type="text" id="prdctnDay" placeholder="일" v-model="localDateForm.day" maxlength="2" @input="onlyNumberInput('day')" class="day-input">
	8	+ </div>
	9	+</template>
	10	+<script>
	11	+export default {
	12	+ name: "PrdctnSelectComponent",
	13	+
	14	+ props: {
	15	+ // 초기값 또는 부모에서 전달하는 날짜 객체
	16	+ modelValue: {
	17	+ type: Object,
	18	+ default: () => ({
	19	+ year: new Date().getFullYear(),
	20	+ month: '',
	21	+ day: ''
	22	+ })
	23	+ },
	24	+
	25	+ // 포맷팅된 날짜 문자열 (YYYYMMDD)
	26	+ value: {
	27	+ type: String,
	28	+ default: ''
	29	+ }
	30	+ },
	31	+
	32	+ emits: ['update:modelValue', 'formatted-date'],
	33	+
	34	+ data() {
	35	+ return {
	36	+ // 내부적으로 사용할 로컬 데이터
	37	+ localDateForm: {
	38	+ year: this.modelValue.year \|\| new Date().getFullYear(),
	39	+ month: this.modelValue.month \|\| '',
	40	+ day: this.modelValue.day \|\| ''
	41	+ }
	42	+ };
	43	+ },
	44	+
	45	+ computed: {
	46	+ // 년도 옵션 (현재부터 1970년까지)
	47	+ yearOptions() {
	48	+ const currentYear = new Date().getFullYear();
	49	+ const years = [];
	50	+ for (let year = currentYear; year >= 1970; year--) {
	51	+ years.push(year);
	52	+ }
	53	+ return years;
	54	+ },
	55	+
	56	+ // 날짜 포맷팅 (YYYYMMDD 형식)
	57	+ formattedDate() {
	58	+ const year = this.localDateForm.year \|\| '';
	59	+ const month = this.localDateForm.month \|\| '00';
	60	+ const day = this.localDateForm.day \|\| '00';
	61	+
	62	+ if (!year) return '';
	63	+ return `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}`;
	64	+ }
	65	+ },
	66	+
	67	+ watch: {
	68	+ // 부모로부터 변경된 값 감지
	69	+ modelValue: {
	70	+ handler(newValue) {
	71	+ // 참조 공유가 아닌 값 복사로 변경
	72	+ this.localDateForm = {
	73	+ year: newValue.year \|\| new Date().getFullYear(),
	74	+ month: newValue.month \|\| '',
	75	+ day: newValue.day \|\| ''
	76	+ };
	77	+ },
	78	+ deep: true,
	79	+ immediate: true
	80	+ },
	81	+
	82	+ // 외부에서 전달된 포맷팅된 날짜값 감지
	83	+ value: {
	84	+ handler(newValue) {
	85	+ if (newValue && newValue !== this.formattedDate) {
	86	+ this.parsePrdctnYear(newValue);
	87	+ }
	88	+ },
	89	+ immediate: true
	90	+ }
	91	+ },
	92	+
	93	+ created() {
	94	+ // 컴포넌트 생성 시 값이 있으면 파싱
	95	+ if (this.value) {
	96	+ this.parsePrdctnYear(this.value);
	97	+ }
	98	+ },
	99	+
	100	+ methods: {
	101	+ // 값 변경 시 부모에게 전달
	102	+ emitChanges() {
	103	+ this.$emit('update:modelValue', { ...this.localDateForm });
	104	+ this.$emit('formatted-date', this.formattedDate);
	105	+ },
	106	+
	107	+ // 숫자만 입력 가능하도록 제한
	108	+ onlyNumberInput(field) {
	109	+ this.localDateForm[field] = this.localDateForm[field].replace(/[^0-9]/g, '');
	110	+
	111	+ // 월 입력 범위 제한 (1-12)
	112	+ if (field === 'month' && this.localDateForm.month) {
	113	+ const month = parseInt(this.localDateForm.month);
	114	+ if (month > 12) this.localDateForm.month = '12';
	115	+ if (month < 1) this.localDateForm.month = '01';
	116	+ }
	117	+
	118	+ // 일 입력 범위 제한 (1-31)
	119	+ if (field === 'day' && this.localDateForm.day) {
	120	+ const day = parseInt(this.localDateForm.day);
	121	+ if (day > 31) this.localDateForm.day = '31';
	122	+ if (day < 1) this.localDateForm.day = '01';
	123	+ }
	124	+
	125	+ // 값 변경 알림
	126	+ this.emitChanges();
	127	+ },
	128	+
	129	+ // 날짜 문자열 파싱 메서드
	130	+ parsePrdctnYear(prdctnYear) {
	131	+ if (!prdctnYear) {
	132	+ this.localDateForm = {
	133	+ year: new Date().getFullYear(),
	134	+ month: '',
	135	+ day: ''
	136	+ };
	137	+ this.emitChanges();
	138	+ return;
	139	+ }
	140	+
	141	+ const prdctnYearStr = String(prdctnYear);
	142	+
	143	+ if (prdctnYearStr.length === 4) {
	144	+ // YYYY 형식인 경우
	145	+ this.localDateForm = {
	146	+ year: prdctnYearStr,
	147	+ month: '',
	148	+ day: ''
	149	+ };
	150	+ } else if (prdctnYearStr.length === 8) {
	151	+ // YYYYMMDD 형식인 경우
	152	+ const year = prdctnYearStr.substring(0, 4);
	153	+ let month = prdctnYearStr.substring(4, 6);
	154	+ month = month === '00' ? '' : month;
	155	+ let day = prdctnYearStr.substring(6, 8);
	156	+ day = day === '00' ? '' : day;
	157	+
	158	+ this.localDateForm = { year, month, day };
	159	+ }
	160	+
	161	+ // 값 변경 알림
	162	+ this.emitChanges();
	163	+ }
	164	+ }
	165	+};
	166	+</script>(파일 끝에 줄바꿈 문자 없음)

1e536dc

fdad3b0

client/views/component/listLayout/CardStyleComponent.vue

--- client/views/component/listLayout/CardStyleComponent.vue

+++ client/views/component/listLayout/CardStyleComponent.vue


     <li v-for="(item, idx) in list" :key="idx" class="mb-30" @click="fnMoveTo(item)">
       <div class="result-box">
         <div class="main-img">
+          <div v-if="!$isEmpty(typeText)" class="float-div">
+            <p class="float-txt">{{ typeText }}</p>
+          </div>
           <img v-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">
           <img v-else-if="!$isEmpty(item.thumbnail)" :src="item.thumbnail.filePath" :alt="item.sj + ' 썸네일'">
           <img v-else src="client/resources/images/img6.png" alt="Not found image">

           </div>
           <div class="date">
             <ul>
-              <li>생산연도 <b>{{ item.prdctnYear ? item.prdctnYear : '-' }}</b></li>
+              <li>생산연도 <b>{{ item.prdctnYear ? $formatPrdctnDate(item.prdctnYear) : '-' }}</b></li>
               <li>|</li>
               <li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
             </ul>

   name: "CardStyleComponent",
 
   props: {
+    typeText: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: 'P'

fdad3b0

client/views/component/listLayout/GalleryStyleComponent.vue (added)

+++ client/views/component/listLayout/GalleryStyleComponent.vue

...	...	@@ -0,0 +1,77 @@
	1	+<template>
	2	+ <ul class="gallery-wrap">
	3	+ <li v-for="(item, idx) in list" :key="idx" class="gallery-item" @click="fnMoveTo(item)">
	4	+ <div class="item">
	5	+ <figure class="img-wrap">
	6	+ <img v-if="!$isEmpty(item.thumbnail)" :src="item.thumbnail.filePath" :alt="item.sj + ' 썸네일'">
	7	+ <img v-else src="client/resources/images/img6.png" alt="Not found image">
	8	+ </figure>
	9	+ <div class="text-box">
	10	+ <h5 class="txt-center">{{ item.sj }}</h5>
	11	+ <div class="txt-right mb-20">
	12	+ <p class="mb-5">생산연도 <b>{{ item.prdctnYear ? $formatPrdctnDate(item.prdctnYear) : '-' }}</b></p>
	13	+ <p>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></p>
	14	+ </div>
	15	+ <ul class="category">
	16	+ <li v-for="(ctgry, ctgryIdx) of item.ctgrys" :key="ctgryIdx" class="category1">{{ ctgry.ctgryNm }}</li>
	17	+ </ul>
	18	+ </div>
	19	+ </div>
	20	+ </li>
	21	+ </ul>
	22	+</template>
	23	+<script>
	24	+export default {
	25	+ name: "GalleryStyleComponent",
	26	+
	27	+ props: {
	28	+ typeText: {
	29	+ type: String,
	30	+ default: null
	31	+ },
	32	+ name: {
	33	+ type: String,
	34	+ default: 'P'
	35	+ },
	36	+ list: {
	37	+ type: Array,
	38	+ default: () => [],
	39	+ },
	40	+ },
	41	+
	42	+ computed: {
	43	+ page() {
	44	+ switch (this.name) {
	45	+ case 'P':
	46	+ return 'PicHistoryDetail';
	47	+ case 'V':
	48	+ return 'VideoHistoryDetail';
	49	+ case 'M':
	50	+ return 'MediaVideoDetail';
	51	+ case 'N':
	52	+ return 'NewsReleaseDetail';
	53	+ }
	54	+ },
	55	+ },
	56	+
	57	+ methods: {
	58	+ // 페이지 이동
	59	+ fnMoveTo(item) {
	60	+ let key = null;
	61	+ switch (this.name) {
	62	+ case 'P':
	63	+ case 'V':
	64	+ key = 'dcryId';
	65	+ break;
	66	+ case 'M':
	67	+ key = 'mediaVidoId';
	68	+ break;
	69	+ case 'N':
	70	+ key = 'nesDtaId';
	71	+ break;
	72	+ }
	73	+ this.$router.push({ name: this.page, query: { id: item[key] } });
	74	+ }
	75	+ },
	76	+};
	77	+</script>(파일 끝에 줄바꿈 문자 없음)

1e536dc

fdad3b0

client/views/component/listLayout/ListStyleComponent.vue

--- client/views/component/listLayout/ListStyleComponent.vue

+++ client/views/component/listLayout/ListStyleComponent.vue

...	...	@@ -12,7 +12,7 @@
12	12	</div>
13	13	<div class="date ">
14	14	<ul>
15		- <li>생산연도 <b>{{ item.prdctnYear ? item.prdctnYear : '-' }}</b></li>
	15	+ <li>생산연도 <b>{{ item.prdctnYear ? $formatPrdctnDate(item.prdctnYear) : '-' }}</b></li>
16	16	<li>\|</li>
17	17	<li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
18	18	</ul>

1e536dc

fdad3b0

client/views/component/player/VideoComponent.vue

--- client/views/component/player/VideoComponent.vue

+++ client/views/component/player/VideoComponent.vue


 <style scoped>
 .video-player {
   width: 100%;
-  max-width: 800px;
   margin: 0 auto;
 }
 

1e536dc

fdad3b0

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import MyInfo from "./user/MyInfo.vue";
 import MemberManagement from "./member/MemberManagement.vue";
 // 기록물 - 사진
-import PicHistorySearch from "./bbsDcry/photo/PicHistorySearch.vue";
-import PicHistoryInsert from "./bbsDcry/photo/PicHistoryInsert.vue";
-import PicHistoryDetail from "./bbsDcry/photo/PicHistoryDetail.vue";
+import PicHistorySearch from "./bbsDcryPhoto/PicHistorySearch.vue";
+import PicHistoryInsert from "./bbsDcryPhoto/PicHistoryInsert.vue";
+import PicHistoryDetail from "./bbsDcryPhoto/PicHistoryDetail.vue";
 // 기록물 - 영상
-import VideoHistoryInsert from "./bbsDcry/video/VideoHistoryInsert.vue";
-import VideoHistoryDetail from "./bbsDcry/video/VideoHistoryDetail.vue";
-import VideoHistorySearch from "./bbsDcry/video/VideoHistorySearch.vue";
+import VideoHistoryInsert from "./bbsDcryVideo/VideoHistoryInsert.vue";
+import VideoHistoryDetail from "./bbsDcryVideo/VideoHistoryDetail.vue";
+import VideoHistorySearch from "./bbsDcryVideo/VideoHistorySearch.vue";
 // 미디어 영상
 import MediaVideoInsert from "./bbsMediaVido/MediaVideoInsert.vue";
 import MediaVideoDetail from "./bbsMediaVido/MediaVideoDetail.vue";

1e536dc

fdad3b0

client/views/pages/bbsDcryPhoto/PicHistoryDetail.vue (Renamed from client/views/pages/bbsDcry/photo/PicHistoryDetail.vue)

--- client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

+++ client/views/pages/bbsDcryPhoto/PicHistoryDetail.vue


           </div>
         </dd>
       </dl>
-      <div>
-        <div class="gallery">
-          <div class="main-swiper">
-            <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2" @slideChange="handleMainSlideChange">
-              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
-                <img :src="item.filePath" :alt="item.fileNm" />
-              </swiper-slide>
-            </swiper>
-          </div>
-          <div class="thumbnail">
-            <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
-              <swiper-slide v-for="(item, idx) of findResult.files" :key="idx" :class="{ 'active-thumb': activeIndex === idx }">
-                <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
-                <img :src="item.filePath" :alt="item.fileNm" />
-              </swiper-slide>
-            </swiper>
-          </div>
+      <div class="img-view">
+        <div class="current-img-wrap">
+          <img :src="currentImg.filePath" :alt="currentImg.fileNm" />
         </div>
-        <div class="btn-group">
-          <button class="select-down" @click="fnDownload('selected')">선택 다운로드</button>
-          <button class="all-down" @click="fnDownload('all')">전체 다운로드</button>
-          <div v-if="loading" class="loading-overlay">
-            <div class="loading-spinner"></div>
+        <div class="thumb-view">
+          <div class="download-btn txt-right mb-20">
+            <button class="btn all-down" @click="fnDownload('all')">전체 다운로드</button>
+          </div>
+          <div class="thumbnails">
             <div>
-              <p>다운로드 중입니다</p>
-              <p>잠시만 기다려주세요</p>
+              <div v-for="(item, idx) of findResult.files" :key="idx" class="thumbnail-wrap">
+                <figure class="thumbnail" @click="onchangeImg(item)">
+                  <img :src="item.filePath" :alt="item.fileNm" />
+                </figure>
+                <div class="float-div">
+                  <button type="button" class="btn-sm red" @click="fnDownload('selected', item)">다운로드</button>
+                </div>
+              </div>
             </div>
           </div>
         </div>

       <button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
     </div>
   </div>
+  <div v-if="loading" class="loading-overlay">
+    <div class="loading-spinner"></div>
+    <div>
+      <p>다운로드 중입니다</p>
+      <p>잠시만 기다려주세요</p>
+    </div>
+  </div>
 </template>
 <script>
 import { ref } from 'vue';

 // import required modules
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 // COMPONENT
-import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
 // API
 import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
 import { fileDownloadProc, multiFileDownloadProc } from '@/resources/api/file';

 
       activeIndex: 0,
 
+      currentImg: {
+        fileNm: "기본이미지",
+        filePath: "client/resources/images/no_img.png",
+      },
+
       isRegister: false,
     };
   },

   },
 
   methods: {
+    onchangeImg(img) {
+      this.currentImg = img;
+    },
+
     handleMainSlideChange(swiper) {
       this.activeIndex = swiper.realIndex;
     },

           alert('올바른 접근이 아닙니다.');
           this.fnMoveTo('list'); // 목록으로 이동
         }
+
+        this.currentImg = this.findResult.files[0];
+
         this.isRegister = this.$registerChk(this.findResult.register);
       } catch (error) {
         alert('조회중 오류가 발생했습니다.');

     },
 
     // 파일 다운로드
-    async fnDownload(type) {
-      // Set loading to true when download starts
+    async fnDownload(type, file) {
       this.loading = true;
-
-      // 유효성 검사
-      if (type === 'selected') {
-        if (this.selectedFiles.length === 0) {
-          alert("파일을 1개 이상 선택하거나 전체 다운로드를 클릭해주세요.");
-          this.loading = false; // Hide loading if validation fails
-          return;
-        }
-      }
 
       let url = null;
       let link = null;
 
       try {
-        let fileList;
+        let fileList = [];
         if (type === 'selected') {
-          fileList = this.selectedFiles;
+          fileList.push(file);
         } else if (type === 'all') {
           fileList = this.findResult.files;
         }

1e536dc

fdad3b0

client/views/pages/bbsDcryPhoto/PicHistoryInsert.vue (Renamed from client/views/pages/bbsDcry/photo/PicHistoryInsert.vue)

--- client/views/pages/bbsDcry/photo/PicHistoryInsert.vue

+++ client/views/pages/bbsDcryPhoto/PicHistoryInsert.vue


         <div class="hr"></div>
         <dd>
           <label for="prdctnYear">생산연도</label>
-          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
+          <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
         </dd>
         <div class="hr"></div>
         <dd>

           </div>
         </dd>
         <div class="hr"></div>
-        <dd>
-          <label for="category" class="flex align-center">
-            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
-          </label>
-          <ul class="category">
-            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
-          </ul>
+        <dd class="category-dd">
+          <label for="category" class="flex align-center">카테고리</label>
+          <category-list-component v-model="selectedCtgries" />
         </dd>
         <div class="hr"></div>
         <dd>

       </button>
     </div>
   </div>
-  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
   <div v-if="loading" class="loading-overlay">
     <div class="loading-spinner"></div>
     <div>

 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 // COMPONENT
-import EditorComponent from '../../../component/editor/EditorComponent.vue';
-import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';
+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
 // API
 import { findDcryProc, saveDcry, updateDcry } from '@/resources/api/dcry';
 

     LeftOutlined,
     RightOutlined,
     DoubleRightOutlined,
+    PrdctnSelectComponent,
+    // COMPONENT
+    PrdctnSelectComponent,
     EditorComponent,
-    CategorySelectModal,
+    CategoryListComponent,
   },
 
   data() {

 
       pageId: null,
 
-      isModalOpen: false,
       isDragging: false,
 
       fileNames: [],

         fileId: null,
         files: [],
         ctgryIds: [],
+      },
+
+      // 날짜 객체 (자식 컴포넌트와 동기화)
+      dateForm: {
+        year: new Date().getFullYear(),
+        month: '',
+        day: ''
       },
 
       multipartFiles: [],

     async fnFindDcry() {
       try {
         const response = await findDcryProc(this.pageId);
-
         if (response.data.data.dcry.ty !== 'P') {
           alert('올바른 접근이 아닙니다.');
           this.fnMoveTo('list'); // 목록으로 이동

       if (thumbFile) {
         this.selectedThumb = thumbFile.fileNm;
       }
-    },
-
-    // 카테고리 모달 열기/닫기
-    fnToggleModal() {
-      this.isModalOpen = !this.isModalOpen;
-    },
-
-    // 카테고리 등록
-    fnAddCtgries(selectedCtgries) {
-      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
-
-      this.fnToggleModal(); // 카테고리 모달 닫기
-    },
-
-    // 카테고리 삭제
-    fnDelCtgry(id) {
-      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
     },
 
     // 드래그 앤 드롭 이벤트 핸들러

         alert("제목을 입력해 주세요.");
         return;
       }
+
       if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
         if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
           alert("생산연도는 숫자만 입력 가능합니다.");
           return;
         }
-        if (this.requestDTO.prdctnYear.length !== 4) {
-          alert("생산연도는 4자리로 입력해주세요.");
-          return;
-        }
       }
+
       if (this.$isEmpty(this.selectedThumb)) {
         alert("썸네일로 사용할 이미지를 선택해주세요.");
         return;

       }
 
       this.loading = true; // 로딩 시작
+
       try {
         const formData = new FormData();
 

         this.$router.push(routes['list']);
       }
     },
-
-    // 생산연도 입력 제한
-    onlyNumberInput() {
-      this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
-    }
   }
 };
 </script>

1e536dc

fdad3b0

client/views/pages/bbsDcryPhoto/PicHistorySearch.vue (Renamed from client/views/pages/bbsDcry/photo/PicHistorySearch.vue)

--- client/views/pages/bbsDcry/photo/PicHistorySearch.vue

+++ client/views/pages/bbsDcryPhoto/PicHistorySearch.vue


         </div>
         <div class="tab-content">
           <div v-if="searchResult.length > 0">
-            <CardStyleComponent v-if="selectedTabId === 'CARD'" :name="'P'" :list="searchResult" />
+            <gallery-style-component v-if="selectedTabId === 'CARD'" :name="'P'" :list="searchResult" />
             <ListStyleComponent v-if="selectedTabId === 'LIST'" :name="'P'" :list="searchResult" />
           </div>
           <div v-else class="no-results">

 <script>
 // COMPONENT
 import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
-import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
+import GalleryStyleComponent from '@/views/component/listLayout/GalleryStyleComponent.vue';
 import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
+import DefaultPagination from '@/views/component/DefaultPagination.vue';
 // API
 import { findDcrysProc } from "@/resources/api/dcry";
 

   components: {
     SearchFormComponent,
     DefaultPagination,
-    CardStyleComponent,
+    GalleryStyleComponent,
     ListStyleComponent,
   },
 

1e536dc

fdad3b0

client/views/pages/bbsDcryVideo/VideoHistoryDetail.vue (Renamed from client/views/pages/bbsDcry/video/VideoHistoryDetail.vue)

--- client/views/pages/bbsDcry/video/VideoHistoryDetail.vue

+++ client/views/pages/bbsDcryVideo/VideoHistoryDetail.vue


 </template>
 <script>
 // COMPONENT
-import VideoComponent from '../../../component/player/VideoComponent.vue';
-import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
+import VideoComponent from '@/views/component/player/VideoComponent.vue';
+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
 // API
 import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
 import { fileDownloadProc } from '@/resources/api/file';

1e536dc

fdad3b0

client/views/pages/bbsDcryVideo/VideoHistoryInsert.vue (Renamed from client/views/pages/bbsDcry/video/VideoHistoryInsert.vue)

--- client/views/pages/bbsDcry/video/VideoHistoryInsert.vue

+++ client/views/pages/bbsDcryVideo/VideoHistoryInsert.vue


         <div class="hr"></div>
         <dd>
           <label for="prdctnYear">생산연도</label>
-          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
+          <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
         </dd>
         <div class="hr"></div>
         <dd>

           </div>
         </dd>
         <div class="hr"></div>
-        <dd>
-          <label for="category" class="flex align-center">
-            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
-          </label>
-          <ul class="category">
-            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
-          </ul>
+        <dd class="category-dd">
+          <label for="category" class="flex align-center">카테고리</label>
+          <category-list-component v-model="selectedCtgries" />
         </dd>
         <div class="hr"></div>
         <dd>

               <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 건당 최대 10GB를 초과할 수 없습니다.</span></div>
             </li>
             <li class="file-insert">
-              <input type="file" id="fileInput" ref="fileInput" class="file-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/webm,video/x-matroska" @change="handleFileSelect">
+              <input type="file" id="fileInput" ref="fileInput" class="file-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/webm,video/x-matroska,application/mxf" @change="handleFileSelect">
               <label for="fileInput" class="file-label mb-20" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'drag-over': isDragging }">
                 <div class="flex-center align-center">
                   <img :src="fileicon" alt="">

       <p>잠시만 기다려주세요</p>
     </div>
   </div>
-  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 // COMPONENT
-import EditorComponent from '../../../component/editor/EditorComponent.vue';
-import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';
+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
 // API
 import { findDcryProc, saveDcry, updateDcry } from '@/resources/api/dcry';
 

     LeftOutlined,
     RightOutlined,
     DoubleRightOutlined,
+    // COMPONENT
+    PrdctnSelectComponent,
     EditorComponent,
-    CategorySelectModal,
+    CategoryListComponent,
   },
 
   data() {

 
       pageId: null,
 
-      isModalOpen: false,
       isDragging: false,
 
       fileNames: [],

         fileId: null,
         files: [],
         ctgryIds: [],
+      },
+
+      // 날짜 객체 (자식 컴포넌트와 동기화)
+      dateForm: {
+        year: new Date().getFullYear(),
+        month: '',
+        day: ''
       },
 
       multipartFiles: [],

       this.selectedCtgries = dcry.ctgrys.length > 0 ? dcry.ctgrys : [];
     },
 
-    // 카테고리 모달 열기/닫기
-    fnToggleModal() {
-      this.isModalOpen = !this.isModalOpen;
-    },
-
-    // 카테고리 등록
-    fnAddCtgries(selectedCtgries) {
-      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
-
-      this.fnToggleModal(); // 카테고리 모달 닫기
-    },
-
-    // 카테고리 삭제
-    fnDelCtgry(id) {
-      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
-    },
-
     // 드래그 앤 드롭 이벤트 핸들러
     handleDragOver(event) {
       this.isDragging = true;

 
     // 파일 업로드 처리 함수
     processFiles(files) {
-      const allowedTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm']; // 영상 파일만 허용
+      const allowedTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm', 'mxf']; // 'mxf' 추가
       const maxSize = 10 * 1024 * 1024 * 1024; // 10GB
 
       // 유효성 검사

 
         // 파일 타입 검증
         if (!allowedTypes.includes(fileType)) {
-          alert(`${file.name} 파일은 허용되지 않는 형식입니다. 영상 파일(mp4, mov, avi, wmv, mkv, webm)만 업로드 가능합니다.`);
+          alert(`${file.name} 파일은 허용되지 않는 형식입니다. 영상 파일(mp4, mov, avi, wmv, mkv, webm, mxf)만 업로드 가능합니다.`);
           this.resetFileInput(); // input 파일 목록 비움
           return;
         }

       // 공백제거
       this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);
       this.requestDTO.adres = this.$processTitle(this.requestDTO.adres);
+
       // 유효성 검사
       if (this.$isEmpty(this.requestDTO.sj)) {
         alert("제목을 입력해 주세요.");
         return;
       }
+
       if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
         if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
           alert("생산연도는 숫자만 입력 가능합니다.");
-          return;
-        }
-        if (this.requestDTO.prdctnYear.length !== 4) {
-          alert("생산연도는 4자리로 입력해주세요.");
           return;
         }
       }

       }
 
       this.loading = true; // 로딩 시작
+
       try {
         const formData = new FormData();
 

         this.$router.push(routes['list']);
       }
     },
-
-    // 생산연도 입력 제한
-    onlyNumberInput() {
-      this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
-    }
   }
 };
 </script>

1e536dc

fdad3b0

client/views/pages/bbsDcryVideo/VideoHistorySearch.vue (Renamed from client/views/pages/bbsDcry/video/VideoHistorySearch.vue)

--- client/views/pages/bbsDcry/video/VideoHistorySearch.vue

+++ client/views/pages/bbsDcryVideo/VideoHistorySearch.vue


 import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
 import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
 import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
+import DefaultPagination from '@/views/component/DefaultPagination.vue';
 // API
 import { findDcrysProc } from "@/resources/api/dcry";
 

1e536dc

fdad3b0

client/views/pages/bbsMediaVido/MediaVideoDetail.vue

--- client/views/pages/bbsMediaVido/MediaVideoDetail.vue

+++ client/views/pages/bbsMediaVido/MediaVideoDetail.vue


 </template>
 <script>
 // COMPONENT
-import YoutubeComponent from '../../component/player/YoutubeComponent.vue';
-import ViewerComponent from '../../component/editor/ViewerComponent.vue';
+import YoutubeComponent from '@/views/component/player/YoutubeComponent.vue';
+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
 // API
 import { findMediaVidoProc, deleteMediaVidoProc } from '@/resources/api/mediaVido';
 import { fileDownloadProc } from '@/resources/api/file';

1e536dc

fdad3b0

client/views/pages/bbsMediaVido/MediaVideoInsert.vue

--- client/views/pages/bbsMediaVido/MediaVideoInsert.vue

+++ client/views/pages/bbsMediaVido/MediaVideoInsert.vue


         <div class="hr"></div>
         <dd>
           <label for="prdctnYear">생산연도</label>
-          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
+          <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
         </dd>
         <div class="hr"></div>
         <dd>
           <label for="link">주소</label>
           <input type="text" id="link" class="invalid-url" placeholder="유튜브 URL 주소를 입력하세요" v-model="requestDTO.link">
-          <div class="invalid-feedback border">
+          <div class="invalid-feedback border" v-if="!isValidYoutubeURL && requestDTO.link">
             <img :src="erroricon" alt="">
             <span>유튜브 URL만 입력 가능합니다.</span>
           </div>

           </div>
         </dd>
         <div class="hr"></div>
-        <dd>
-          <label for="category" class="flex align-center">
-            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
-          </label>
-          <ul class="category">
-            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
-          </ul>
+        <dd class="category-dd">
+          <label for="category" class="flex align-center">카테고리</label>
+          <category-list-component v-model="selectedCtgries" />
         </dd>
       </dl>
     </form>

       </button>
     </div>
   </div>
-  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 // COMPONENT
-import EditorComponent from '../../component/editor/EditorComponent.vue';
-import CategorySelectModal from '../../component/modal/CategorySelectModal.vue';
+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
 // API
 import { findMediaVidoProc, saveMediaVidoProc, updateMediaVidoDcry } from '@/resources/api/mediaVido';
 

     LeftOutlined,
     RightOutlined,
     DoubleRightOutlined,
+    // COMPONENT
+    PrdctnSelectComponent,
     EditorComponent,
-    CategorySelectModal,
+    CategoryListComponent,
   },
 
   data() {

       searchicon: 'client/resources/images/icon/search.png',
 
       pageId: null,
-
-      isModalOpen: false,
       isDragging: false,
 
       // 등록/수정 요청 객체

         ctgryIds: [], // 카테고리 정보
       },
 
+      // 날짜 객체 (자식 컴포넌트와 동기화)
+      dateForm: {
+        year: new Date().getFullYear(),
+        month: '',
+        day: ''
+      },
+
       isValidYoutubeURL: true,
       selectedCtgries: [], // 카테고리 목록
     };
+  },
+
+  computed: {
+    // URL 유효성 검사
+    isValidYoutubeURL() {
+      if (!this.requestDTO.link) return true;
+      const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/shorts\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})(\S*)?$/;
+      return youtubeRegex.test(this.requestDTO.link);
+    }
   },
 
   created() {

       this.selectedCtgries = mediaVido.ctgrys.length > 0 ? mediaVido.ctgrys : [];
     },
 
-    // 카테고리 모달 열기/닫기
-    fnToggleModal() {
-      this.isModalOpen = !this.isModalOpen;
-    },
-
-    // 카테고리 등록
-    fnAddCtgries(selectedCtgries) {
-      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
-
-      this.fnToggleModal(); // 카테고리 모달 닫기
-    },
-
-    // 카테고리 삭제
-    fnDelCtgry(id) {
-      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
-    },
-
     // 등록
     async submitForm() {
       // 공백제거
       this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);
+
       // 유효성 검사
       if (this.$isEmpty(this.requestDTO.sj)) {
         alert("제목을 입력해 주세요.");
         return;
       }
+
       if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
         if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
           alert("생산연도는 숫자만 입력 가능합니다.");
           return;
         }
-        if (this.requestDTO.prdctnYear.length !== 4) {
-          alert("생산연도는 4자리로 입력해주세요.");
-          return;
-        }
       }
-      if (!this.$isEmpty(this.requestDTO.link)) {
-        const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/shorts\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})(\S*)?$/;
-        if (!youtubeRegex.test(this.requestDTO.link)) {
-          alert("주소는 유튜브 URL만 입력 가능합니다.");
-          return;
-        }
+
+      if (!this.$isEmpty(this.requestDTO.link) && !this.isValidYoutubeURL) {
+        alert("주소는 유튜브 URL만 입력 가능합니다.");
+        return;
       }
 
       try {

         this.requestDTO.ctgryIds = this.selectedCtgries.map(ctgry => ctgry.ctgryId);
 
         // API 통신
-        const response = this.$isEmpty(this.pageId) ? await saveMediaVidoProc(this.requestDTO) : await updateMediaVidoDcry(this.requestDTO);
+        const response = this.$isEmpty(this.pageId)
+          ? await saveMediaVidoProc(this.requestDTO)
+          : await updateMediaVidoDcry(this.requestDTO);
+
         let id = response.data.data.mediaVidoId;
         alert(this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.");
 

         alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
         this.$router.push(routes['list']);
       }
-    },
-
-    // 생산연도 입력 제한
-    onlyNumberInput() {
-      this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
     },
   }
 };

1e536dc

fdad3b0

client/views/pages/bbsMediaVido/MediaVideoSearch.vue

--- client/views/pages/bbsMediaVido/MediaVideoSearch.vue

+++ client/views/pages/bbsMediaVido/MediaVideoSearch.vue


 import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
 import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
 import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
+import DefaultPagination from '@/views/component/DefaultPagination.vue';
 // API
 import { findAllMediaVidosProc } from "@/resources/api/mediaVido";
 

1e536dc

fdad3b0

client/views/pages/bbsNesDta/NewsReleaseInsert.vue

--- client/views/pages/bbsNesDta/NewsReleaseInsert.vue

+++ client/views/pages/bbsNesDta/NewsReleaseInsert.vue


         <div class="hr"></div>
         <dd>
           <label for="prdctnYear">생산연도</label>
-          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
+          <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
         </dd>
         <div class="hr"></div>
         <dd>

           </div>
         </dd>
         <div class="hr"></div>
-        <dd>
-          <label for="category" class="flex align-center">
-            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
-          </label>
-          <ul class="category">
-            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
-          </ul>
+        <dd class="category-dd">
+          <label for="category" class="flex align-center">카테고리</label>
+          <category-list-component v-model="selectedCtgries" />
         </dd>
         <div class="hr"></div>
         <dd>

       </button>
     </div>
   </div>
-  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 // COMPONENT
+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
 import EditorComponent from '@/views/component/editor/EditorComponent.vue';
-import CategorySelectModal from '@/views/component/modal/CategorySelectModal.vue';
+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
 // API
 import { findNesDtaProc, saveNesDtaProc, updateNesDtaProc } from '@/resources/api/nesDta';
 

     LeftOutlined,
     RightOutlined,
     DoubleRightOutlined,
+    // COMPONENT
+    PrdctnSelectComponent,
     EditorComponent,
-    CategorySelectModal,
+    CategoryListComponent,
   },
 
   data() {

 
       pageId: null,
 
-      isModalOpen: false,
       isDragging: false,
 
       fileNames: [],

         fileId: null,
         files: [],
         ctgryIds: [],
+      },
+
+      // 날짜 객체 (자식 컴포넌트와 동기화)
+      dateForm: {
+        year: new Date().getFullYear(),
+        month: '',
+        day: ''
       },
 
       multipartFiles: [],

 
       this.multipartFiles = [];
       this.selectedCtgries = nesDta.ctgrys.length > 0 ? nesDta.ctgrys : [];
-    },
-
-    // 카테고리 모달 열기/닫기
-    fnToggleModal() {
-      this.isModalOpen = !this.isModalOpen;
-    },
-
-    // 카테고리 등록
-    fnAddCtgries(selectedCtgries) {
-      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
-
-      this.fnToggleModal(); // 카테고리 모달 닫기
-    },
-
-    // 카테고리 삭제
-    fnDelCtgry(id) {
-      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
     },
 
     // 드래그 앤 드롭 이벤트 핸들러

     async submitForm() {
       // 공백제거
       this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);
+
       // 유효성 검사
       if (this.$isEmpty(this.requestDTO.sj)) {
         alert("제목을 입력해 주세요.");
         return;
       }
+
       if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
         if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
           alert("생산연도는 숫자만 입력 가능합니다.");
           return;
         }
-        if (this.requestDTO.prdctnYear.length !== 4) {
-          alert("생산연도는 4자리로 입력해주세요.");
-          return;
-        }
       }
+
       if (!this.$isEmpty(this.requestDTO.link)) {
         const urlRegex = /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
         if (!urlRegex.test(this.requestDTO.link)) {

         this.$router.push(routes['list']);
       }
     },
-
-    // 생산연도 입력 제한
-    onlyNumberInput() {
-      this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
-    }
   }
 };
 </script>

1e536dc

fdad3b0

client/views/pages/bbsNesDta/NewsReleaseSearch.vue

--- client/views/pages/bbsNesDta/NewsReleaseSearch.vue

+++ client/views/pages/bbsNesDta/NewsReleaseSearch.vue


 import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
 import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
 import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
+import DefaultPagination from '@/views/component/DefaultPagination.vue';
 // API
 import { findAllNesDtasProc } from "@/resources/api/nesDta";
 

1e536dc

fdad3b0

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


       <div class="swiper-button-prev"></div>
       <div class="pagination_container">
         <div class="swiper-pagination"></div>
-       <div class="flex align-center" >
+        <div class="flex align-center">
           <div class="swiper-pagination2"></div>
-          <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
-       </div>
+          <button class="swiper-play-pause-btn" @click="toggleAutoplay">
+            <component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" />
+          </button>
+        </div>
       </div>
     </div>
-    <!-- <swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
-      delay: 2500,
-      disableOnInteraction: false,
-    }" :pagination="{
-      type: ['fraction', 'progressbar'], progressbarOpposite: true,
-    }" :navigation="true" :modules="modules" class="mySwiper" :allowTouchMove="false">
-      <swiper-slide v-for="(item, index) in slides" :key="index">
-        <img :src="item.img" :alt="item.alt" />
-      </swiper-slide>
-    </swiper> -->
     <div class="search-wrap">
       <div class="search-area">
         <div class="custom-select" @click="toggleDropdown">
-  <div class="selected-option">{{ getSelectedText }}</div>
-  <ul v-if="isDropdownOpen" class="select-options">
-    <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)">
-      {{ option.text }}
-    </li>
-  </ul>
-</div>
+          <div class="selected-option">{{ getSelectedText }}</div>
+          <ul v-if="isDropdownOpen" class="select-options">
+            <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)"> {{ option.text }} </li>
+          </ul>
+        </div>
         <div class="line"></div>
-        <div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText"
-            @keyup.enter="fnMoveTo('TotalSearch')"></div>
+        <div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText" @keyup.enter="fnMoveTo('TotalSearch')"></div>
         <button type="button" class="search-btn" @click="fnMoveTo('TotalSearch')"><img :src="search" alt=""></button>
       </div>
       <div class="total-search">

         <div><span>기록물 현황</span></div>
       </div>
       <ul>
-
         <template v-for="(item, idx) of icons" :key="idx">
           <li @click="fnMoveTo(item.routeName)">
             <div class="labeling"><img :src="item.url" :alt="item.name + '아이콘'"><span>{{ item.name }}</span></div>

           <li class="line" v-if="idx < icons.length - 1"></li>
         </template>
       </ul>
-
     </div>
   </div>
-  <div class="new-update w1500 mb-50">
-    <div class="tabs">
-      <ul class="">
-        <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === tab.id }"
-          @click="selectTab(tab.id)">
-          <img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
-          <p><b>{{ tab.title }}</b>&nbsp;기록물</p>
-        </li>
-      </ul>
+  <div class="new-update w1500">
+    <div v-for="(tab, index) in tabs" :key="index" class="tabs mb-50">
+      <div class="title mb-30">
+        <h4>{{ tab.title }}</h4>
+        <button type="button" class="gopage" @click="fnMoveTo(tab.contents.search)">더보기</button>
+      </div>
       <div class="tab-content">
-        <template v-for="(tabContent, idx1) of tabContents" :key="idx1">
-          <div v-show="tabContent.id === selectedTab" class="content-wrap">
-            <div style="text-align: right;">
-              <button type="button" class="gopage" @click="fnMoveTo(tabContent.search)">더보기</button>
-            </div>
-            <div class="new-pic">
-              <div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
-                <div class="box" @click="fnMoveTo(tabContent.view, item.dcryId)">
-                  <div class="img-area"><img :src="item.thumbnail.filePath" :alt="item.sj" class="tab-image" /></div>
-                  <div class="info">
-                    <p>{{ item.sj }}</p>
-                    <span>{{ $dotFormatDate(item.rgsde) }}</span>
-                  </div>
-                </div>
+        <div class="new-pic">
+          <div v-for="(item, idx2) in tab.contents.list" :key="idx2" class="box-wrap">
+            <div class="box" @click="fnMoveTo(tab.contents.view, item.dcryId)">
+              <div class="img-area">
+                <img :src="item.thumbnail.filePath" :alt="item.sj" class="tab-image" />
               </div>
-              <!-- 게시물이 없는 경우 -->
-              <div v-for="i in Math.max(0, 3 - tabContent.list.length)" :key="`empty-${i}`" class="box-wrap">
-                <div class="box">
-                  <div class="img-area"><img :src="noimg" class="tab-image" /></div>
-                  <div class="info">
-                    <p>등록된 게시물이 없습니다.</p>
-                  </div>
-                </div>
+              <div class="info">
+                <p>{{ item.sj }}</p>
+                <span>{{ $dotFormatDate(item.rgsde) }}</span>
               </div>
             </div>
           </div>
-        </template>
+          <div v-for="i in Math.max(0, 3 - tab.contents.list.length)" :key="`empty-${i}`" class="box-wrap">
+            <div class="box">
+              <div class="img-area"><img :src="noimg" class="tab-image" /></div>
+              <div class="info">
+                <p>등록된 게시물이 없습니다.</p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

 import 'swiper/css';
 import Swiper from 'swiper/bundle';
 
-// Import Swiper Vue components
-// import { Swiper, SwiperSlide } from 'swiper/vue';
-// import 'swiper/css';
-// import 'swiper/css/pagination';
-// import 'swiper/css/navigation';
 import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
 

   setup() {
     const swiperContainer = ref(null);
     const slides = [
-        { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
-        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-        // Add more slides as needed
-      ];
-      const isAutoplay = ref(true); // Tracks the autoplay state
-      let swiperInstance = null;
+      { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
+      { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
+      { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+      // Add more slides as needed
+    ];
+    const isAutoplay = ref(true); // Tracks the autoplay state
+    let swiperInstance = null;
 
     onMounted(() => {
       // Main Swiper with Fraction Pagination

       isAutoplay,
     };
   },
+
   data() {
     return {
       noimg: "client/resources/images/no_img.png",

       tabs: [
         {
           id: "newPhoto",
-          title: "신규 사진",
-          activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
-          inactiveImage: "client/resources/images/mCont_ico1_off.png",
+          title: "신규 사진 기록물",
+          contents: { list: [], search: 'PicHistorySearch', view: 'PicHistoryDetail' },
         },
         {
           id: "newVideo",
-          title: "신규 영상",
-          activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
-          inactiveImage: "client/resources/images/mCont_ico2_off.png",
+          title: "신규 영상 기록물",
+          contents: { list: [], search: 'VideoHistorySearch', view: 'VideoHistoryDetail' },
         },
       ],
-      tabContents: [], // 신규 사진, 영상 기록물
       mediaContents: [], // 신규 미디어 영상
       bodoContents: [], // 신규 스크랩 자료
       searchRecord: 'all', // 통합검색 Selectbox 내용
       isDropdownOpen: false,
-    options: [
-      { value: 'all', text: '전체' },
-      { value: 'pic', text: '사진' },
-      { value: 'video', text: '영상' },
-      { value: 'media', text: '미디어 영상' },
-      { value: 'bodo', text: '스크랩 자료' },
-    ],
+      options: [
+        { value: 'all', text: '전체' },
+        { value: 'pic', text: '사진' },
+        { value: 'video', text: '영상' },
+        { value: 'media', text: '미디어 영상' },
+        { value: 'bodo', text: '스크랩 자료' },
+      ],
       searchText: null, // 통합검색 Input 내용
       icons: [
         {

       navigation: true, // Enable navigation buttons (prev/next)
     };
   },
+
+  computed: {
+    getSelectedText() {
+      const selected = this.options.find(opt => opt.value === this.searchRecord);
+      return selected ? selected.text : '';
+    }
+  },
+
   created() {
     this.fnFindAllSttuses();
   },
-  computed: {
-  getSelectedText() {
-    const selected = this.options.find(opt => opt.value === this.searchRecord);
-    return selected ? selected.text : '';
-  }
-},
+
   methods: {
     toggleDropdown() {
-    this.isDropdownOpen = !this.isDropdownOpen;
-  },
-  selectOption(option) {
-    this.searchRecord = option.value;
-    this.isDropdownOpen = false;
-  },
-    selectTab(index) {
-      this.selectedTab = index; // Update the selected tab index
+      this.isDropdownOpen = !this.isDropdownOpen;
+    },
+    selectOption(option) {
+      this.searchRecord = option.value;
+      this.isDropdownOpen = false;
     },
 
     // 메인화면 정보 조회

           });
 
           let photoDcrys = response.data.data.photoDcrys;
-          this.tabContents.push({ id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' });
+          this.tabs[0].contents = { id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' };
 
           let vidoDcrys = response.data.data.vidoDcrys;
-          this.tabContents.push({ id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' });
+          this.tabs[1].contents = { id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' };
 
           let mediaVidos = response.data.data.mediaVidos;
           this.mediaContents = this.onChangeList(mediaVidos);

1e536dc

fdad3b0

client/views/pages/main/TotalSearch.vue

--- client/views/pages/main/TotalSearch.vue

+++ client/views/pages/main/TotalSearch.vue


 </template>
 <script>
 // COMPONENT
-import SearchFormComponent from '../../component/SearchFormComponent.vue';
-import CardViewList from "../../component/listLayout/CardViewList.vue";
+import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
+import CardViewList from "../../component/CardViewList.vue";
 // API
 import { findAllDatas } from "../../../resources/api/main"; // 통합 검색
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,155 +1,276 @@
1		-*{
2		- padding: 0; margin: 0; color: #000;
3		- font-family: "Pretendard-R"; box-sizing: border-box;
	1	+* {
	2	+ padding: 0;
	3	+ margin: 0;
	4	+ color: #000;
	5	+ font-family: "Pretendard-R";
	6	+ box-sizing: border-box;
4	7	}
5		-html{font-size: 10px;}
6	8
7		-a{text-decoration: none; display: block;}
8		-li{list-style: none;}
9		-button{border: 0; background: none; cursor: pointer;}
10		-input{border: 0; flex-shrink: 0; outline: 0;}
11		-input::placeholder{color: #999999;}
12		-input[type="checkbox"]{
13		- width: 15px;
14		- height: 15px;
	9	+html {
	10	+ font-size: 10px;
	11	+}
	12	+
	13	+a {
	14	+ text-decoration: none;
	15	+ display: block;
	16	+}
	17	+
	18	+li {
	19	+ list-style: none;
	20	+}
	21	+
	22	+button {
	23	+ border: 0;
	24	+ background: none;
	25	+ cursor: pointer;
	26	+}
	27	+
	28	+input {
	29	+ border: 0;
	30	+ flex-shrink: 0;
	31	+ outline: 0;
	32	+}
	33	+
	34	+input::placeholder {
	35	+ color: #999999;
	36	+}
	37	+
	38	+input[type="checkbox"] {
	39	+ width: 15px;
	40	+ height: 15px;
15	41	}
16	42
17	43
18	44	input[readonly] {
19		- background-color: #f6f6f6 !important;
20		- color: #999;
	45	+ background-color: #f6f6f6 !important;
	46	+ color: #999;
21	47	}
22		-select{background-color: transparent ;}
23		-select:focus {border: 0; outline: 0;}
24		-textarea{resize: none;}
	48	+
	49	+select {
	50	+ background-color: transparent;
	51	+}
	52	+
	53	+select:focus {
	54	+ border: 0;
	55	+ outline: 0;
	56	+}
	57	+
	58	+textarea {
	59	+ resize: none;
	60	+}
25	61
26	62
27		-.w130{width: 130px;}
28		-.w1500{width: 1500px; margin: 0 auto;}
29		-.wfull{width: -webkit-fill-available;}
	63	+.w130 {
	64	+ width: 130px;
	65	+}
	66	+
	67	+.w1500 {
	68	+ width: 1500px;
	69	+ margin: 0 auto;
	70	+}
	71	+
	72	+.wfull {
	73	+ width: -webkit-fill-available;
	74	+}
30	75
31	76
32	77	@media screen and (max-width: 1500px) {
33		- .w1500{width: auto; }
	78	+ .w1500 {
	79	+ width: auto;
34	80	}
35		-.flex{display: flex;}
36		-.align-center{align-items: center;}
37		-.flex-end{
38		- display: flex;
39		- justify-content: end;
40		-}
41		-.flex-center{
42		- display: flex;
43		- justify-content: center;
44		-}
45		-.flex-sp-bw{
46		- display: flex;
47		- justify-content: space-between;
48	81	}
49	82
50		-.mt-5{margin-top: 5px;}
51		-.mt-20{margin-top: 20px;}
52		-.mt-40{margin-top: 40px;}
53		-
54		-.mb-5{margin-bottom: 5px;}
55		-.mb-10{margin-bottom: 10px;}
56		-.mb-15{margin-bottom: 15px;}
57		-.mb-20{margin-bottom: 20px;}
58		-.mb-25{margin-bottom: 25px;}
59		-.mb-30{margin-bottom: 30px;}
60		-.mb-40{margin-bottom: 40px;}
61		-.mb-50{margin-bottom: 50px;}
62		-.mb-60{margin-bottom: 60px;}
63		-.mb-110{margin-bottom: 110px;}
64		-
65		-
66		-.btn-group button{
67		- width: 130px;
68		- padding: 15px 0px;
69		- border-radius: 10px;
70		- font-size: 20px;
71		-
	83	+.flex {
	84	+ display: flex;
72	85	}
73		-.btn-group-small .button{
74		- padding: 10px 25px;
75		- border-radius: 5px;
	86	+
	87	+.align-center {
	88	+ align-items: center;
	89	+}
	90	+
	91	+.flex-end {
	92	+ display: flex;
	93	+ justify-content: end;
	94	+}
	95	+
	96	+.flex-center {
	97	+ display: flex;
	98	+ justify-content: center;
	99	+}
	100	+
	101	+.flex-sp-bw {
	102	+ display: flex;
	103	+ justify-content: space-between;
	104	+}
	105	+
	106	+.mt-5 {
	107	+ margin-top: 5px;
	108	+}
	109	+
	110	+.mt-20 {
	111	+ margin-top: 20px;
	112	+}
	113	+
	114	+.mt-40 {
	115	+ margin-top: 40px;
	116	+}
	117	+
	118	+.mb-5 {
	119	+ margin-bottom: 5px;
	120	+}
	121	+
	122	+.mb-10 {
	123	+ margin-bottom: 10px;
	124	+}
	125	+
	126	+.mb-15 {
	127	+ margin-bottom: 15px;
	128	+}
	129	+
	130	+.mb-20 {
	131	+ margin-bottom: 20px;
	132	+}
	133	+
	134	+.mb-25 {
	135	+ margin-bottom: 25px;
	136	+}
	137	+
	138	+.mb-30 {
	139	+ margin-bottom: 30px;
	140	+}
	141	+
	142	+.mb-40 {
	143	+ margin-bottom: 40px;
	144	+}
	145	+
	146	+.mb-50 {
	147	+ margin-bottom: 50px;
	148	+}
	149	+
	150	+.mb-60 {
	151	+ margin-bottom: 60px;
	152	+}
	153	+
	154	+.mb-110 {
	155	+ margin-bottom: 110px;
	156	+}
	157	+
	158	+
	159	+.btn-group button {
	160	+ width: 130px;
	161	+ padding: 15px 0px;
	162	+ border-radius: 10px;
	163	+ font-size: 20px;
	164	+
	165	+}
	166	+
	167	+.btn-group-small .button {
	168	+ padding: 10px 25px;
	169	+ border-radius: 5px;
	170	+ font-size: 16px;
	171	+ font-family: "Pretendard-M";
	172	+ cursor: pointer;
	173	+
	174	+ p {
76	175	font-size: 16px;
77	176	font-family: "Pretendard-M";
78		- cursor: pointer;
79		- p{
80		- font-size: 16px;
81		- font-family: "Pretendard-M";
82		- }
	177	+ }
83	178	}
84	179
85		-.button, button{
86		- &.red-line{
87		- border: 1px solid #ce3e48;
88		- color: #ce3e48;
	180	+.button,
	181	+button {
	182	+ &.red-line {
	183	+ border: 1px solid #ce3e48;
	184	+ color: #ce3e48;
	185	+ }
	186	+
	187	+ &.blue-line {
	188	+ border: 1px solid #275cbd;
	189	+ color: #275cbd;
	190	+ }
	191	+
	192	+ &.blue-line-bg {
	193	+ border: 1px solid #007ac3;
	194	+ background-color: #eff5f9;
	195	+ color: #0271b3;
	196	+
	197	+ p {
	198	+ color: #0271b3;
89	199	}
90		- &.blue-line{
91		- border: 1px solid #275cbd;
92		- color: #275cbd;
	200	+ }
	201	+
	202	+ &.green-line {
	203	+ border: 1px solid #32b31d;
	204	+ color: #2d9b1b;
	205	+ }
	206	+
	207	+ &.gray-line {
	208	+ border: 1px solid #636364;
	209	+ color: #000;
	210	+ }
	211	+
	212	+ &.gray-bg {
	213	+ background-color: #636364;
	214	+ color: #fff;
	215	+ }
	216	+
	217	+ &.gray-line-bg {
	218	+ border: 1px solid #636364;
	219	+ background-color: #f9f9f9;
	220	+ color: #000;
	221	+ }
	222	+
	223	+ &.pink-line-bg {
	224	+ border: 1px solid #a5067b;
	225	+ background-color: #f7ebf4;
	226	+ color: #a5067b;
	227	+
	228	+ p {
	229	+ color: #a5067b;
93	230	}
94		- &.blue-line-bg{
95		- border: 1px solid #007ac3;
96		- background-color: #eff5f9;
97		- color: #0271b3;
98		- p{
99		- color: #0271b3;
100		- }
	231	+ }
	232	+
	233	+ &.gradient {
	234	+ position: relative;
	235	+ background: linear-gradient(132deg, #3e355c, #763954);
	236	+ color: #fff;
	237	+ padding-right: 20px;
	238	+
	239	+ &::after {
	240	+ content: '';
	241	+ background-image: url(../../images/icon/down.png);
	242	+ width: 15px;
	243	+ height: 15px;
	244	+ display: block;
	245	+ position: absolute;
	246	+ right: 17px;
	247	+ top: 20px;
101	248	}
102		- &.green-line{
103		- border: 1px solid #32b31d;
104		- color: #2d9b1b;
105		- }
106		- &.gray-line{
107		- border: 1px solid #636364;
108		- color: #000;
109		- }
110		- &.gray-bg{
111		- background-color: #636364;
112		- color: #fff;
113		- }
114		- &.gray-line-bg{
115		- border: 1px solid #636364;
116		- background-color: #f9f9f9;
117		- color: #000;
118		- }
119		- &.pink-line-bg{
120		- border: 1px solid #a5067b;
121		- background-color: #f7ebf4;
122		- color: #a5067b;
123		- p{
124		- color: #a5067b;
125		- }
126		- }
127		- &.gradient{
128		- position: relative;
129		- background: linear-gradient(132deg, #3e355c, #763954);
130		- color: #fff;
131		- padding-right: 20px;
132		- &::after{
133		- content: '';
134		- background-image: url(../../images/icon/down.png);
135		- width: 15px;
136		- height: 15px;
137		- display: block;
138		- position: absolute;
139		- right: 17px;
140		- top: 20px;
141		- }
142		- }
	249	+ }
143	250	}
144	251
145		- /* 닫기 버튼 스타일 */
	252	+/* 닫기 버튼 스타일 */
146	253
147		- button.closebtn {
148		- font-size: 20px;
149		- width: 40px;
150		- height: 40px;
151		- background-color: #000;
152		- color: white;
153		- border: none;
154		- border-radius: 50px;
155		- }
	254	+button.closebtn {
	255	+ font-size: 20px;
	256	+ width: 40px;
	257	+ height: 40px;
	258	+ background-color: #000;
	259	+ color: white;
	260	+ border: none;
	261	+ border-radius: 50px;
	262	+}
	263	+
	264	+
	265	+/* 텍스트 정렬 */
	266	+.txt-left {
	267	+ text-align: left;
	268	+}
	269	+
	270	+.txt-center {
	271	+ text-align: center;
	272	+}
	273	+
	274	+.txt-right {
	275	+ text-align: right;
	276	+} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div class="mb-30">
	2	+ <div class="result-list-wrap mb-30">
3	3	<div class="flex-sp-bw mb-20">
4	4	<div class="resultext">
5	5	<img :src="resulticon" alt="">
...	...	@@ -8,7 +8,7 @@
8	8	<button type="button" class="gopage" @click="fnMoveTo">모두보기</button>
9	9	</div>
10	10	<div v-if="list.length > 0">
11		- <CardStyleComponent :name="name" :list="list" />
	11	+ <CardStyleComponent :typeText="typeText" :name="name" :list="list" />
12	12	</div>
13	13	<div v-else class="no-results">
14	14	<img :src="nosearch" alt="">
...	...	@@ -55,6 +55,18 @@
55	55	},
56	56
57	57	computed: {
	58	+ typeText() {
	59	+ switch (this.name) {
	60	+ case 'P':
	61	+ return '사진';
	62	+ case 'V':
	63	+ return '영상';
	64	+ case 'M':
	65	+ return '미디어 영상';
	66	+ case 'N':
	67	+ return '스크랩 자료';
	68	+ }
	69	+ },
58	70	helpText() {
59	71	switch (this.name) {
60	72	case 'P':

...	...	@@ -3,6 +3,9 @@
3	3	<li v-for="(item, idx) in list" :key="idx" class="mb-30" @click="fnMoveTo(item)">
4	4	<div class="result-box">
5	5	<div class="main-img">
	6	+ <div v-if="!$isEmpty(typeText)" class="float-div">
	7	+ <p class="float-txt">{{ typeText }}</p>
	8	+ </div>
6	9	<img v-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">
7	10	<img v-else-if="!$isEmpty(item.thumbnail)" :src="item.thumbnail.filePath" :alt="item.sj + ' 썸네일'">
8	11	<img v-else src="client/resources/images/img6.png" alt="Not found image">
...	...	@@ -18,7 +21,7 @@
18	21	</div>
19	22	<div class="date">
20	23	<ul>
21		- <li>생산연도 <b>{{ item.prdctnYear ? item.prdctnYear : '-' }}</b></li>
	24	+ <li>생산연도 <b>{{ item.prdctnYear ? $formatPrdctnDate(item.prdctnYear) : '-' }}</b></li>
22	25	<li>\|</li>
23	26	<li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
24	27	</ul>
...	...	@@ -35,6 +38,10 @@
35	38	name: "CardStyleComponent",
36	39
37	40	props: {
	41	+ typeText: {
	42	+ type: String,
	43	+ default: null
	44	+ },
38	45	name: {
39	46	type: String,
40	47	default: 'P'

...	...	@@ -1,142 +0,0 @@
	1	-<template>
	2	- <div class="modal-overlay">
	3	- <div class="modal-content" @click.stop>
	4	- <div class="flex-sp-bw mb-20">
	5	- <h2>카테고리 조회</h2>
	6	- <button class="closebtn" @click="$emit('toggleModal')">✕</button>
	7	- </div>
	8	- <div class="modal-search flex-center mb-20">
	9	- <input type="text" placeholder="카테고리명을 입력하세요." v-model="searchReqDTO.searchText" @keyup.enter="fnChnageReqDTO">
	10	- <button type="button" class="search-btn" @click="fnChnageReqDTO">
	11	- <img :src="searchicon" alt="">
	12	- <p>검색</p>
	13	- </button>
	14	- </div>
	15	- <table class="mb-10">
	16	- <thead>
	17	- <tr>
	18	- <th>카테고리 항목</th>
	19	- <th>선택</th>
	20	- </tr>
	21	- </thead>
	22	- <tbody>
	23	- <template v-if="list.length > 0">
	24	- <tr v-for="(item, idx) of list" :key="idx" :class="{ 'selected': item.isSelected }">
	25	- <td>{{ item.ctgryNm }}</td>
	26	- <td><input type="checkbox" :value="item" v-model="selectedList" /></td>
	27	- </tr>
	28	- </template>
	29	- <tr v-else>
	30	- <td colspan="2">조건에 맞는 카테고리가 존재하지 않습니다.</td>
	31	- </tr>
	32	- </tbody>
	33	- </table>
	34	- <div class="flex-end mb-30"><button class="register-b" @click="fnAddCtgries">등록</button></div>
	35	- <DefaultPagination :search="searchReqDTO" @onChange="fnChangeCurrentPage" />
	36	- </div>
	37	- </div>
	38	-</template>
	39	-<script>
	40	-// COMPONENT
	41	-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
	42	-// API
	43	-import { findAllCategoryProc } from '@/resources/api/category';
	44	-
	45	-export default {
	46	- name: 'CategorySelectModal',
	47	-
	48	- components: {
	49	- DefaultPagination
	50	- },
	51	-
	52	- props: {
	53	- selectedCtgries: {
	54	- type: Array,
	55	- default: () => [],
	56	- }
	57	- },
	58	-
	59	- data() {
	60	- return {
	61	- // ICON
	62	- searchicon: 'client/resources/images/icon/search.png',
	63	-
	64	- // 검색 객체
	65	- searchReqDTO: {
	66	- searchType: 'nm',
	67	- searchText: null,
	68	- useAt: 'Y',
	69	- selectedCtgryIds: null,
	70	- // 페이지네이션
	71	- currentPage: 1, // 현재 페이지
	72	- recordSize: 10, // 한 페이지에 표시할 데이터 개수
	73	- },
	74	-
	75	- list: [], // 카테고리 목록
	76	- selectedList: [] // 선택한 카테고리 목록
	77	- };
	78	- },
	79	-
	80	- created() {
	81	- this.fnSearch(); // 목록 조회
	82	- },
	83	-
	84	- methods: {
	85	- // 검색 조건이 변경된 경우
	86	- fnChnageReqDTO() {
	87	- this.searchReqDTO.currentPage = 1;
	88	- this.$nextTick(() => {
	89	- this.fnSearch();
	90	- });
	91	- },
	92	-
	93	- // 목록 조회
	94	- async fnSearch() {
	95	- try {
	96	- if (this.searchReqDTO.hasOwnProperty('ctgryIds')) {
	97	- delete this.searchReqDTO.ctgryIds;
	98	- }
	99	- if (this.selectedCtgries.length > 0) {
	100	- this.searchReqDTO.selectedCtgryIds = this.selectedCtgries.map(item => item.ctgryId).join(',');
	101	- }
	102	-
	103	- const response = await findAllCategoryProc(this.searchReqDTO);
	104	- let ctgries = response.data.data.ctgry;
	105	- for (let item of ctgries) {
	106	- item.isSelected = false;
	107	- for (let ctgry of this.selectedCtgries) {
	108	- if (item.ctgryId === ctgry.ctgryId) {
	109	- item.isSelected = true;
	110	- break;
	111	- }
	112	- }
	113	- }
	114	-
	115	- this.list = ctgries;
	116	- this.searchReqDTO = response.data.data.search;
	117	- } catch (error) {
	118	- alert('조회중 오류가 발생했습니다.');
	119	-
	120	- if (error.response) {
	121	- alert(error.response.data.message);
	122	- }
	123	- console.error(error.message);
	124	- }
	125	- },
	126	-
	127	- // 카테고리 추가
	128	- fnAddCtgries() {
	129	- this.$emit('addCtgries', this.selectedList);
	130	- },
	131	-
	132	- // 페이지 이동
	133	- fnChangeCurrentPage(currentPage) {
	134	- this.searchReqDTO.currentPage = Number(currentPage);
	135	-
	136	- this.$nextTick(() => {
	137	- this.fnSearch();
	138	- });
	139	- },
	140	- }
	141	-};
	142	-</script>(파일 끝에 줄바꿈 문자 없음)

...	...	@@ -23,7 +23,6 @@
23	23	<style scoped>
24	24	.video-player {
25	25	width: 100%;
26		- max-width: 800px;
27	26	margin: 0 auto;
28	27	}
29	28

...	...	@@ -10,13 +10,13 @@
10	10	import MyInfo from "./user/MyInfo.vue";
11	11	import MemberManagement from "./member/MemberManagement.vue";
12	12	// 기록물 - 사진
13		-import PicHistorySearch from "./bbsDcry/photo/PicHistorySearch.vue";
14		-import PicHistoryInsert from "./bbsDcry/photo/PicHistoryInsert.vue";
15		-import PicHistoryDetail from "./bbsDcry/photo/PicHistoryDetail.vue";
	13	+import PicHistorySearch from "./bbsDcryPhoto/PicHistorySearch.vue";
	14	+import PicHistoryInsert from "./bbsDcryPhoto/PicHistoryInsert.vue";
	15	+import PicHistoryDetail from "./bbsDcryPhoto/PicHistoryDetail.vue";
16	16	// 기록물 - 영상
17		-import VideoHistoryInsert from "./bbsDcry/video/VideoHistoryInsert.vue";
18		-import VideoHistoryDetail from "./bbsDcry/video/VideoHistoryDetail.vue";
19		-import VideoHistorySearch from "./bbsDcry/video/VideoHistorySearch.vue";
	17	+import VideoHistoryInsert from "./bbsDcryVideo/VideoHistoryInsert.vue";
	18	+import VideoHistoryDetail from "./bbsDcryVideo/VideoHistoryDetail.vue";
	19	+import VideoHistorySearch from "./bbsDcryVideo/VideoHistorySearch.vue";
20	20	// 미디어 영상
21	21	import MediaVideoInsert from "./bbsMediaVido/MediaVideoInsert.vue";
22	22	import MediaVideoDetail from "./bbsMediaVido/MediaVideoDetail.vue";

...	...	@@ -23,32 +23,24 @@
23	23	</div>
24	24	</dd>
25	25	</dl>
26		- <div>
27		- <div class="gallery">
28		- <div class="main-swiper">
29		- <swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2" @slideChange="handleMainSlideChange">
30		- <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
31		- <img :src="item.filePath" :alt="item.fileNm" />
32		- </swiper-slide>
33		- </swiper>
34		- </div>
35		- <div class="thumbnail">
36		- <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
37		- <swiper-slide v-for="(item, idx) of findResult.files" :key="idx" :class="{ 'active-thumb': activeIndex === idx }">
38		- <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
39		- <img :src="item.filePath" :alt="item.fileNm" />
40		- </swiper-slide>
41		- </swiper>
42		- </div>
	26	+ <div class="img-view">
	27	+ <div class="current-img-wrap">
	28	+ <img :src="currentImg.filePath" :alt="currentImg.fileNm" />
43	29	</div>
44		- <div class="btn-group">
45		- <button class="select-down" @click="fnDownload('selected')">선택 다운로드</button>
46		- <button class="all-down" @click="fnDownload('all')">전체 다운로드</button>
47		- <div v-if="loading" class="loading-overlay">
48		- <div class="loading-spinner"></div>
	30	+ <div class="thumb-view">
	31	+ <div class="download-btn txt-right mb-20">
	32	+ <button class="btn all-down" @click="fnDownload('all')">전체 다운로드</button>
	33	+ </div>
	34	+ <div class="thumbnails">
49	35	<div>
50		- <p>다운로드 중입니다</p>
51		- <p>잠시만 기다려주세요</p>
	36	+ <div v-for="(item, idx) of findResult.files" :key="idx" class="thumbnail-wrap">
	37	+ <figure class="thumbnail" @click="onchangeImg(item)">
	38	+ <img :src="item.filePath" :alt="item.fileNm" />
	39	+ </figure>
	40	+ <div class="float-div">
	41	+ <button type="button" class="btn-sm red" @click="fnDownload('selected', item)">다운로드</button>
	42	+ </div>
	43	+ </div>
52	44	</div>
53	45	</div>
54	46	</div>
...	...	@@ -90,6 +82,13 @@
90	82	<button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
91	83	</div>
92	84	</div>
	85	+ <div v-if="loading" class="loading-overlay">
	86	+ <div class="loading-spinner"></div>
	87	+ <div>
	88	+ <p>다운로드 중입니다</p>
	89	+ <p>잠시만 기다려주세요</p>
	90	+ </div>
	91	+ </div>
93	92	</template>
94	93	<script>
95	94	import { ref } from 'vue';
...	...	@@ -104,7 +103,7 @@
104	103	// import required modules
105	104	import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
106	105	// COMPONENT
107		-import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
	106	+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
108	107	// API
109	108	import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
110	109	import { fileDownloadProc, multiFileDownloadProc } from '@/resources/api/file';
...	...	@@ -150,6 +149,11 @@
150	149
151	150	activeIndex: 0,
152	151
	152	+ currentImg: {
	153	+ fileNm: "기본이미지",
	154	+ filePath: "client/resources/images/no_img.png",
	155	+ },
	156	+
153	157	isRegister: false,
154	158	};
155	159	},
...	...	@@ -167,6 +171,10 @@
167	171	},
168	172
169	173	methods: {
	174	+ onchangeImg(img) {
	175	+ this.currentImg = img;
	176	+ },
	177	+
170	178	handleMainSlideChange(swiper) {
171	179	this.activeIndex = swiper.realIndex;
172	180	},
...	...	@@ -181,6 +189,9 @@
181	189	alert('올바른 접근이 아닙니다.');
182	190	this.fnMoveTo('list'); // 목록으로 이동
183	191	}
	192	+
	193	+ this.currentImg = this.findResult.files[0];
	194	+
184	195	this.isRegister = this.$registerChk(this.findResult.register);
185	196	} catch (error) {
186	197	alert('조회중 오류가 발생했습니다.');
...	...	@@ -194,26 +205,16 @@
194	205	},
195	206
196	207	// 파일 다운로드
197		- async fnDownload(type) {
198		- // Set loading to true when download starts
	208	+ async fnDownload(type, file) {
199	209	this.loading = true;
200		-
201		- // 유효성 검사
202		- if (type === 'selected') {
203		- if (this.selectedFiles.length === 0) {
204		- alert("파일을 1개 이상 선택하거나 전체 다운로드를 클릭해주세요.");
205		- this.loading = false; // Hide loading if validation fails
206		- return;
207		- }
208		- }
209	210
210	211	let url = null;
211	212	let link = null;
212	213
213	214	try {
214		- let fileList;
	215	+ let fileList = [];
215	216	if (type === 'selected') {
216		- fileList = this.selectedFiles;
	217	+ fileList.push(file);
217	218	} else if (type === 'all') {
218	219	fileList = this.findResult.files;
219	220	}

...	...	@@ -22,7 +22,7 @@
22	22	<div class="hr"></div>
23	23	<dd>
24	24	<label for="prdctnYear">생산연도</label>
25		- <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
	25	+ <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
26	26	</dd>
27	27	<div class="hr"></div>
28	28	<dd>
...	...	@@ -37,13 +37,9 @@
37	37	</div>
38	38	</dd>
39	39	<div class="hr"></div>
40		- <dd>
41		- <label for="category" class="flex align-center">
42		- <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
43		- </label>
44		- <ul class="category">
45		- <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
46		- </ul>
	40	+ <dd class="category-dd">
	41	+ <label for="category" class="flex align-center">카테고리</label>
	42	+ <category-list-component v-model="selectedCtgries" />
47	43	</dd>
48	44	<div class="hr"></div>
49	45	<dd>
...	...	@@ -112,7 +108,6 @@
112	108	</button>
113	109	</div>
114	110	</div>
115		- <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
116	111	<div v-if="loading" class="loading-overlay">
117	112	<div class="loading-spinner"></div>
118	113	<div>
...	...	@@ -124,8 +119,9 @@
124	119	<script>
125	120	import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
126	121	// COMPONENT
127		-import EditorComponent from '../../../component/editor/EditorComponent.vue';
128		-import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';
	122	+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
	123	+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
	124	+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
129	125	// API
130	126	import { findDcryProc, saveDcry, updateDcry } from '@/resources/api/dcry';
131	127
...	...	@@ -135,8 +131,11 @@
135	131	LeftOutlined,
136	132	RightOutlined,
137	133	DoubleRightOutlined,
	134	+ PrdctnSelectComponent,
	135	+ // COMPONENT
	136	+ PrdctnSelectComponent,
138	137	EditorComponent,
139		- CategorySelectModal,
	138	+ CategoryListComponent,
140	139	},
141	140
142	141	data() {
...	...	@@ -150,7 +149,6 @@
150	149
151	150	pageId: null,
152	151
153		- isModalOpen: false,
154	152	isDragging: false,
155	153
156	154	fileNames: [],
...	...	@@ -167,6 +165,13 @@
167	165	fileId: null,
168	166	files: [],
169	167	ctgryIds: [],
	168	+ },
	169	+
	170	+ // 날짜 객체 (자식 컴포넌트와 동기화)
	171	+ dateForm: {
	172	+ year: new Date().getFullYear(),
	173	+ month: '',
	174	+ day: ''
170	175	},
171	176
172	177	multipartFiles: [],
...	...	@@ -190,7 +195,6 @@
190	195	async fnFindDcry() {
191	196	try {
192	197	const response = await findDcryProc(this.pageId);
193		-
194	198	if (response.data.data.dcry.ty !== 'P') {
195	199	alert('올바른 접근이 아닙니다.');
196	200	this.fnMoveTo('list'); // 목록으로 이동
...	...	@@ -226,23 +230,6 @@
226	230	if (thumbFile) {
227	231	this.selectedThumb = thumbFile.fileNm;
228	232	}
229		- },
230		-
231		- // 카테고리 모달 열기/닫기
232		- fnToggleModal() {
233		- this.isModalOpen = !this.isModalOpen;
234		- },
235		-
236		- // 카테고리 등록
237		- fnAddCtgries(selectedCtgries) {
238		- this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
239		-
240		- this.fnToggleModal(); // 카테고리 모달 닫기
241		- },
242		-
243		- // 카테고리 삭제
244		- fnDelCtgry(id) {
245		- this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
246	233	},
247	234
248	235	// 드래그 앤 드롭 이벤트 핸들러
...	...	@@ -371,16 +358,14 @@
371	358	alert("제목을 입력해 주세요.");
372	359	return;
373	360	}
	361	+
374	362	if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
375	363	if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
376	364	alert("생산연도는 숫자만 입력 가능합니다.");
377	365	return;
378	366	}
379		- if (this.requestDTO.prdctnYear.length !== 4) {
380		- alert("생산연도는 4자리로 입력해주세요.");
381		- return;
382		- }
383	367	}
	368	+
384	369	if (this.$isEmpty(this.selectedThumb)) {
385	370	alert("썸네일로 사용할 이미지를 선택해주세요.");
386	371	return;
...	...	@@ -396,6 +381,7 @@
396	381	}
397	382
398	383	this.loading = true; // 로딩 시작
	384	+
399	385	try {
400	386	const formData = new FormData();
401	387
...	...	@@ -491,11 +477,6 @@
491	477	this.$router.push(routes['list']);
492	478	}
493	479	},
494		-
495		- // 생산연도 입력 제한
496		- onlyNumberInput() {
497		- this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
498		- }
499	480	}
500	481	};
501	482	</script>

...	...	@@ -40,7 +40,7 @@
40	40	</div>
41	41	<div class="tab-content">
42	42	<div v-if="searchResult.length > 0">
43		- <CardStyleComponent v-if="selectedTabId === 'CARD'" :name="'P'" :list="searchResult" />
	43	+ <gallery-style-component v-if="selectedTabId === 'CARD'" :name="'P'" :list="searchResult" />
44	44	<ListStyleComponent v-if="selectedTabId === 'LIST'" :name="'P'" :list="searchResult" />
45	45	</div>
46	46	<div v-else class="no-results">
...	...	@@ -65,9 +65,9 @@
65	65	<script>
66	66	// COMPONENT
67	67	import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
68		-import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
	68	+import GalleryStyleComponent from '@/views/component/listLayout/GalleryStyleComponent.vue';
69	69	import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
70		-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
	70	+import DefaultPagination from '@/views/component/DefaultPagination.vue';
71	71	// API
72	72	import { findDcrysProc } from "@/resources/api/dcry";
73	73
...	...	@@ -75,7 +75,7 @@
75	75	components: {
76	76	SearchFormComponent,
77	77	DefaultPagination,
78		- CardStyleComponent,
	78	+ GalleryStyleComponent,
79	79	ListStyleComponent,
80	80	},
81	81

...	...	@@ -71,8 +71,8 @@
71	71	</template>
72	72	<script>
73	73	// COMPONENT
74		-import VideoComponent from '../../../component/player/VideoComponent.vue';
75		-import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
	74	+import VideoComponent from '@/views/component/player/VideoComponent.vue';
	75	+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
76	76	// API
77	77	import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
78	78	import { fileDownloadProc } from '@/resources/api/file';

...	...	@@ -21,7 +21,7 @@
21	21	<div class="hr"></div>
22	22	<dd>
23	23	<label for="prdctnYear">생산연도</label>
24		- <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
	24	+ <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
25	25	</dd>
26	26	<div class="hr"></div>
27	27	<dd>
...	...	@@ -36,13 +36,9 @@
36	36	</div>
37	37	</dd>
38	38	<div class="hr"></div>
39		- <dd>
40		- <label for="category" class="flex align-center">
41		- <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
42		- </label>
43		- <ul class="category">
44		- <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
45		- </ul>
	39	+ <dd class="category-dd">
	40	+ <label for="category" class="flex align-center">카테고리</label>
	41	+ <category-list-component v-model="selectedCtgries" />
46	42	</dd>
47	43	<div class="hr"></div>
48	44	<dd>
...	...	@@ -53,7 +49,7 @@
53	49	<div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 건당 최대 10GB를 초과할 수 없습니다.</span></div>
54	50	</li>
55	51	<li class="file-insert">
56		- <input type="file" id="fileInput" ref="fileInput" class="file-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/webm,video/x-matroska" @change="handleFileSelect">
	52	+ <input type="file" id="fileInput" ref="fileInput" class="file-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/webm,video/x-matroska,application/mxf" @change="handleFileSelect">
57	53	<label for="fileInput" class="file-label mb-20" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'drag-over': isDragging }">
58	54	<div class="flex-center align-center">
59	55	<img :src="fileicon" alt="">
...	...	@@ -100,13 +96,13 @@
100	96	<p>잠시만 기다려주세요</p>
101	97	</div>
102	98	</div>
103		- <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
104	99	</template>
105	100	<script>
106	101	import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
107	102	// COMPONENT
108		-import EditorComponent from '../../../component/editor/EditorComponent.vue';
109		-import CategorySelectModal from '../../../component/modal/CategorySelectModal.vue';
	103	+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
	104	+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
	105	+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
110	106	// API
111	107	import { findDcryProc, saveDcry, updateDcry } from '@/resources/api/dcry';
112	108
...	...	@@ -116,8 +112,10 @@
116	112	LeftOutlined,
117	113	RightOutlined,
118	114	DoubleRightOutlined,
	115	+ // COMPONENT
	116	+ PrdctnSelectComponent,
119	117	EditorComponent,
120		- CategorySelectModal,
	118	+ CategoryListComponent,
121	119	},
122	120
123	121	data() {
...	...	@@ -131,7 +129,6 @@
131	129
132	130	pageId: null,
133	131
134		- isModalOpen: false,
135	132	isDragging: false,
136	133
137	134	fileNames: [],
...	...	@@ -148,6 +145,13 @@
148	145	fileId: null,
149	146	files: [],
150	147	ctgryIds: [],
	148	+ },
	149	+
	150	+ // 날짜 객체 (자식 컴포넌트와 동기화)
	151	+ dateForm: {
	152	+ year: new Date().getFullYear(),
	153	+ month: '',
	154	+ day: ''
151	155	},
152	156
153	157	multipartFiles: [],
...	...	@@ -201,23 +205,6 @@
201	205	this.selectedCtgries = dcry.ctgrys.length > 0 ? dcry.ctgrys : [];
202	206	},
203	207
204		- // 카테고리 모달 열기/닫기
205		- fnToggleModal() {
206		- this.isModalOpen = !this.isModalOpen;
207		- },
208		-
209		- // 카테고리 등록
210		- fnAddCtgries(selectedCtgries) {
211		- this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
212		-
213		- this.fnToggleModal(); // 카테고리 모달 닫기
214		- },
215		-
216		- // 카테고리 삭제
217		- fnDelCtgry(id) {
218		- this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
219		- },
220		-
221	208	// 드래그 앤 드롭 이벤트 핸들러
222	209	handleDragOver(event) {
223	210	this.isDragging = true;
...	...	@@ -242,7 +229,7 @@
242	229
243	230	// 파일 업로드 처리 함수
244	231	processFiles(files) {
245		- const allowedTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm']; // 영상 파일만 허용
	232	+ const allowedTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm', 'mxf']; // 'mxf' 추가
246	233	const maxSize = 10 * 1024 * 1024 * 1024; // 10GB
247	234
248	235	// 유효성 검사
...	...	@@ -257,7 +244,7 @@
257	244
258	245	// 파일 타입 검증
259	246	if (!allowedTypes.includes(fileType)) {
260		- alert(`${file.name} 파일은 허용되지 않는 형식입니다. 영상 파일(mp4, mov, avi, wmv, mkv, webm)만 업로드 가능합니다.`);
	247	+ alert(`${file.name} 파일은 허용되지 않는 형식입니다. 영상 파일(mp4, mov, avi, wmv, mkv, webm, mxf)만 업로드 가능합니다.`);
261	248	this.resetFileInput(); // input 파일 목록 비움
262	249	return;
263	250	}
...	...	@@ -299,18 +286,16 @@
299	286	// 공백제거
300	287	this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);
301	288	this.requestDTO.adres = this.$processTitle(this.requestDTO.adres);
	289	+
302	290	// 유효성 검사
303	291	if (this.$isEmpty(this.requestDTO.sj)) {
304	292	alert("제목을 입력해 주세요.");
305	293	return;
306	294	}
	295	+
307	296	if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
308	297	if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
309	298	alert("생산연도는 숫자만 입력 가능합니다.");
310		- return;
311		- }
312		- if (this.requestDTO.prdctnYear.length !== 4) {
313		- alert("생산연도는 4자리로 입력해주세요.");
314	299	return;
315	300	}
316	301	}
...	...	@@ -325,6 +310,7 @@
325	310	}
326	311
327	312	this.loading = true; // 로딩 시작
	313	+
328	314	try {
329	315	const formData = new FormData();
330	316
...	...	@@ -415,11 +401,6 @@
415	401	this.$router.push(routes['list']);
416	402	}
417	403	},
418		-
419		- // 생산연도 입력 제한
420		- onlyNumberInput() {
421		- this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
422		- }
423	404	}
424	405	};
425	406	</script>

...	...	@@ -67,7 +67,7 @@
67	67	import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
68	68	import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
69	69	import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
70		-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
	70	+import DefaultPagination from '@/views/component/DefaultPagination.vue';
71	71	// API
72	72	import { findDcrysProc } from "@/resources/api/dcry";
73	73

...	...	@@ -65,8 +65,8 @@
65	65	</template>
66	66	<script>
67	67	// COMPONENT
68		-import YoutubeComponent from '../../component/player/YoutubeComponent.vue';
69		-import ViewerComponent from '../../component/editor/ViewerComponent.vue';
	68	+import YoutubeComponent from '@/views/component/player/YoutubeComponent.vue';
	69	+import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
70	70	// API
71	71	import { findMediaVidoProc, deleteMediaVidoProc } from '@/resources/api/mediaVido';
72	72	import { fileDownloadProc } from '@/resources/api/file';

...	...	@@ -21,13 +21,13 @@
21	21	<div class="hr"></div>
22	22	<dd>
23	23	<label for="prdctnYear">생산연도</label>
24		- <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="requestDTO.prdctnYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput">
	24	+ <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
25	25	</dd>
26	26	<div class="hr"></div>
27	27	<dd>
28	28	<label for="link">주소</label>
29	29	<input type="text" id="link" class="invalid-url" placeholder="유튜브 URL 주소를 입력하세요" v-model="requestDTO.link">
30		- <div class="invalid-feedback border">
	30	+ <div class="invalid-feedback border" v-if="!isValidYoutubeURL && requestDTO.link">
31	31	<img :src="erroricon" alt="">
32	32	<span>유튜브 URL만 입력 가능합니다.</span>
33	33	</div>
...	...	@@ -40,13 +40,9 @@
40	40	</div>
41	41	</dd>
42	42	<div class="hr"></div>
43		- <dd>
44		- <label for="category" class="flex align-center">
45		- <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
46		- </label>
47		- <ul class="category">
48		- <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><b>✕</b></button></li>
49		- </ul>
	43	+ <dd class="category-dd">
	44	+ <label for="category" class="flex align-center">카테고리</label>
	45	+ <category-list-component v-model="selectedCtgries" />
50	46	</dd>
51	47	</dl>
52	48	</form>
...	...	@@ -58,13 +54,13 @@
58	54	</button>
59	55	</div>
60	56	</div>
61		- <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
62	57	</template>
63	58	<script>
64	59	import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
65	60	// COMPONENT
66		-import EditorComponent from '../../component/editor/EditorComponent.vue';
67		-import CategorySelectModal from '../../component/modal/CategorySelectModal.vue';
	61	+import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
	62	+import EditorComponent from '@/views/component/editor/EditorComponent.vue';
	63	+import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
68	64	// API
69	65	import { findMediaVidoProc, saveMediaVidoProc, updateMediaVidoDcry } from '@/resources/api/mediaVido';
70	66
...	...	@@ -74,8 +70,10 @@
74	70	LeftOutlined,
75	71	RightOutlined,
76	72	DoubleRightOutlined,
	73	+ // COMPONENT
	74	+ PrdctnSelectComponent,
77	75	EditorComponent,
78		- CategorySelectModal,
	76	+ CategoryListComponent,
79	77	},
80	78
81	79	data() {
...	...	@@ -87,8 +85,6 @@
87	85	searchicon: 'client/resources/images/icon/search.png',
88	86
89	87	pageId: null,
90		-
91		- isModalOpen: false,
92	88	isDragging: false,
93	89
94	90	// 등록/수정 요청 객체
...	...	@@ -102,9 +98,25 @@
102	98	ctgryIds: [], // 카테고리 정보
103	99	},
104	100
	101	+ // 날짜 객체 (자식 컴포넌트와 동기화)
	102	+ dateForm: {
	103	+ year: new Date().getFullYear(),
	104	+ month: '',
	105	+ day: ''
	106	+ },
	107	+
105	108	isValidYoutubeURL: true,
106	109	selectedCtgries: [], // 카테고리 목록
107	110	};
	111	+ },
	112	+
	113	+ computed: {
	114	+ // URL 유효성 검사
	115	+ isValidYoutubeURL() {
	116	+ if (!this.requestDTO.link) return true;
	117	+ const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=\|youtu\.be\/\|youtube\.com\/shorts\/\|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})(\S*)?$/;
	118	+ return youtubeRegex.test(this.requestDTO.link);
	119	+ }
108	120	},
109	121
110	122	created() {
...	...	@@ -140,48 +152,27 @@
140	152	this.selectedCtgries = mediaVido.ctgrys.length > 0 ? mediaVido.ctgrys : [];
141	153	},
142	154
143		- // 카테고리 모달 열기/닫기
144		- fnToggleModal() {
145		- this.isModalOpen = !this.isModalOpen;
146		- },
147		-
148		- // 카테고리 등록
149		- fnAddCtgries(selectedCtgries) {
150		- this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];
151		-
152		- this.fnToggleModal(); // 카테고리 모달 닫기
153		- },
154		-
155		- // 카테고리 삭제
156		- fnDelCtgry(id) {
157		- this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
158		- },
159		-
160	155	// 등록
161	156	async submitForm() {
162	157	// 공백제거
163	158	this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);
	159	+
164	160	// 유효성 검사
165	161	if (this.$isEmpty(this.requestDTO.sj)) {
166	162	alert("제목을 입력해 주세요.");
167	163	return;
168	164	}
	165	+
169	166	if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
170	167	if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
171	168	alert("생산연도는 숫자만 입력 가능합니다.");
172	169	return;
173	170	}
174		- if (this.requestDTO.prdctnYear.length !== 4) {
175		- alert("생산연도는 4자리로 입력해주세요.");
176		- return;
177		- }
178	171	}
179		- if (!this.$isEmpty(this.requestDTO.link)) {
180		- const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=\|youtu\.be\/\|youtube\.com\/shorts\/\|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})(\S*)?$/;
181		- if (!youtubeRegex.test(this.requestDTO.link)) {
182		- alert("주소는 유튜브 URL만 입력 가능합니다.");
183		- return;
184		- }
	172	+
	173	+ if (!this.$isEmpty(this.requestDTO.link) && !this.isValidYoutubeURL) {
	174	+ alert("주소는 유튜브 URL만 입력 가능합니다.");
	175	+ return;
185	176	}
186	177
187	178	try {
...	...	@@ -193,7 +184,10 @@
193	184	this.requestDTO.ctgryIds = this.selectedCtgries.map(ctgry => ctgry.ctgryId);
194	185
195	186	// API 통신
196		- const response = this.$isEmpty(this.pageId) ? await saveMediaVidoProc(this.requestDTO) : await updateMediaVidoDcry(this.requestDTO);
	187	+ const response = this.$isEmpty(this.pageId)
	188	+ ? await saveMediaVidoProc(this.requestDTO)
	189	+ : await updateMediaVidoDcry(this.requestDTO);
	190	+
197	191	let id = response.data.data.mediaVidoId;
198	192	alert(this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.");
199	193
...	...	@@ -225,11 +219,6 @@
225	219	alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
226	220	this.$router.push(routes['list']);
227	221	}
228		- },
229		-
230		- // 생산연도 입력 제한
231		- onlyNumberInput() {
232		- this.requestDTO.prdctnYear = this.requestDTO.prdctnYear.replace(/[^0-9]/g, '');
233	222	},
234	223	}
235	224	};

...	...	@@ -66,7 +66,7 @@
66	66	import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
67	67	import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
68	68	import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
69		-import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
	69	+import DefaultPagination from '@/views/component/DefaultPagination.vue';
70	70	// API
71	71	import { findAllMediaVidosProc } from "@/resources/api/mediaVido";
72	72

...	...	@@ -10,35 +10,24 @@
10	10	<div class="swiper-button-prev"></div>
11	11	<div class="pagination_container">
12	12	<div class="swiper-pagination"></div>
13		- <div class="flex align-center" >
	13	+ <div class="flex align-center">
14	14	<div class="swiper-pagination2"></div>
15		- <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
16		- </div>
	15	+ <button class="swiper-play-pause-btn" @click="toggleAutoplay">
	16	+ <component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" />
	17	+ </button>
	18	+ </div>
17	19	</div>
18	20	</div>
19		- <!-- <swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
20		- delay: 2500,
21		- disableOnInteraction: false,
22		- }" :pagination="{
23		- type: ['fraction', 'progressbar'], progressbarOpposite: true,
24		- }" :navigation="true" :modules="modules" class="mySwiper" :allowTouchMove="false">
25		- <swiper-slide v-for="(item, index) in slides" :key="index">
26		- <img :src="item.img" :alt="item.alt" />
27		- </swiper-slide>
28		- </swiper> -->
29	21	<div class="search-wrap">
30	22	<div class="search-area">
31	23	<div class="custom-select" @click="toggleDropdown">
32		- <div class="selected-option">{{ getSelectedText }}</div>
33		- <ul v-if="isDropdownOpen" class="select-options">
34		- <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)">
35		- {{ option.text }}
36		- </li>
37		- </ul>
38		-</div>
	24	+ <div class="selected-option">{{ getSelectedText }}</div>
	25	+ <ul v-if="isDropdownOpen" class="select-options">
	26	+ <li v-for="option in options" :key="option.value" @click.stop="selectOption(option)"> {{ option.text }} </li>
	27	+ </ul>
	28	+ </div>
39	29	<div class="line"></div>
40		- <div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText"
41		- @keyup.enter="fnMoveTo('TotalSearch')"></div>
	30	+ <div style="width: 60%;"><input type="text" placeholder="검색어를 입력하세요" v-model="searchText" @keyup.enter="fnMoveTo('TotalSearch')"></div>
42	31	<button type="button" class="search-btn" @click="fnMoveTo('TotalSearch')"><img :src="search" alt=""></button>
43	32	</div>
44	33	<div class="total-search">
...	...	@@ -52,7 +41,6 @@
52	41	<div><span>기록물 현황</span></div>
53	42	</div>
54	43	<ul>
55		-
56	44	<template v-for="(item, idx) of icons" :key="idx">
57	45	<li @click="fnMoveTo(item.routeName)">
58	46	<div class="labeling"><img :src="item.url" :alt="item.name + '아이콘'"><span>{{ item.name }}</span></div>
...	...	@@ -61,46 +49,36 @@
61	49	<li class="line" v-if="idx < icons.length - 1"></li>
62	50	</template>
63	51	</ul>
64		-
65	52	</div>
66	53	</div>
67		- <div class="new-update w1500 mb-50">
68		- <div class="tabs">
69		- <ul class="">
70		- <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === tab.id }"
71		- @click="selectTab(tab.id)">
72		- <img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
73		- <p><b>{{ tab.title }}</b> 기록물</p>
74		- </li>
75		- </ul>
	54	+ <div class="new-update w1500">
	55	+ <div v-for="(tab, index) in tabs" :key="index" class="tabs mb-50">
	56	+ <div class="title mb-30">
	57	+ <h4>{{ tab.title }}</h4>
	58	+ <button type="button" class="gopage" @click="fnMoveTo(tab.contents.search)">더보기</button>
	59	+ </div>
76	60	<div class="tab-content">
77		- <template v-for="(tabContent, idx1) of tabContents" :key="idx1">
78		- <div v-show="tabContent.id === selectedTab" class="content-wrap">
79		- <div style="text-align: right;">
80		- <button type="button" class="gopage" @click="fnMoveTo(tabContent.search)">더보기</button>
81		- </div>
82		- <div class="new-pic">
83		- <div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
84		- <div class="box" @click="fnMoveTo(tabContent.view, item.dcryId)">
85		- <div class="img-area"><img :src="item.thumbnail.filePath" :alt="item.sj" class="tab-image" /></div>
86		- <div class="info">
87		- <p>{{ item.sj }}</p>
88		- <span>{{ $dotFormatDate(item.rgsde) }}</span>
89		- </div>
90		- </div>
	61	+ <div class="new-pic">
	62	+ <div v-for="(item, idx2) in tab.contents.list" :key="idx2" class="box-wrap">
	63	+ <div class="box" @click="fnMoveTo(tab.contents.view, item.dcryId)">
	64	+ <div class="img-area">
	65	+ <img :src="item.thumbnail.filePath" :alt="item.sj" class="tab-image" />
91	66	</div>
92		- <!-- 게시물이 없는 경우 -->
93		- <div v-for="i in Math.max(0, 3 - tabContent.list.length)" :key="`empty-${i}`" class="box-wrap">
94		- <div class="box">
95		- <div class="img-area"><img :src="noimg" class="tab-image" /></div>
96		- <div class="info">
97		- <p>등록된 게시물이 없습니다.</p>
98		- </div>
99		- </div>
	67	+ <div class="info">
	68	+ <p>{{ item.sj }}</p>
	69	+ <span>{{ $dotFormatDate(item.rgsde) }}</span>
100	70	</div>
101	71	</div>
102	72	</div>
103		- </template>
	73	+ <div v-for="i in Math.max(0, 3 - tab.contents.list.length)" :key="`empty-${i}`" class="box-wrap">
	74	+ <div class="box">
	75	+ <div class="img-area"><img :src="noimg" class="tab-image" /></div>
	76	+ <div class="info">
	77	+ <p>등록된 게시물이 없습니다.</p>
	78	+ </div>
	79	+ </div>
	80	+ </div>
	81	+ </div>
104	82	</div>
105	83	</div>
106	84	</div>
...	...	@@ -157,11 +135,6 @@
157	135	import 'swiper/css';
158	136	import Swiper from 'swiper/bundle';
159	137
160		-// Import Swiper Vue components
161		-// import { Swiper, SwiperSlide } from 'swiper/vue';
162		-// import 'swiper/css';
163		-// import 'swiper/css/pagination';
164		-// import 'swiper/css/navigation';
165	138	import { Autoplay, Pagination, Navigation } from 'swiper/modules';
166	139	import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
167	140
...	...	@@ -179,13 +152,13 @@
179	152	setup() {
180	153	const swiperContainer = ref(null);
181	154	const slides = [
182		- { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
183		- { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
184		- { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
185		- // Add more slides as needed
186		- ];
187		- const isAutoplay = ref(true); // Tracks the autoplay state
188		- let swiperInstance = null;
	155	+ { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
	156	+ { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
	157	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	158	+ // Add more slides as needed
	159	+ ];
	160	+ const isAutoplay = ref(true); // Tracks the autoplay state
	161	+ let swiperInstance = null;
189	162
190	163	onMounted(() => {
191	164	// Main Swiper with Fraction Pagination
...	...	@@ -233,6 +206,7 @@
233	206	isAutoplay,
234	207	};
235	208	},
	209	+
236	210	data() {
237	211	return {
238	212	noimg: "client/resources/images/no_img.png",
...	...	@@ -244,29 +218,26 @@
244	218	tabs: [
245	219	{
246	220	id: "newPhoto",
247		- title: "신규 사진",
248		- activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
249		- inactiveImage: "client/resources/images/mCont_ico1_off.png",
	221	+ title: "신규 사진 기록물",
	222	+ contents: { list: [], search: 'PicHistorySearch', view: 'PicHistoryDetail' },
250	223	},
251	224	{
252	225	id: "newVideo",
253		- title: "신규 영상",
254		- activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
255		- inactiveImage: "client/resources/images/mCont_ico2_off.png",
	226	+ title: "신규 영상 기록물",
	227	+ contents: { list: [], search: 'VideoHistorySearch', view: 'VideoHistoryDetail' },
256	228	},
257	229	],
258		- tabContents: [], // 신규 사진, 영상 기록물
259	230	mediaContents: [], // 신규 미디어 영상
260	231	bodoContents: [], // 신규 스크랩 자료
261	232	searchRecord: 'all', // 통합검색 Selectbox 내용
262	233	isDropdownOpen: false,
263		- options: [
264		- { value: 'all', text: '전체' },
265		- { value: 'pic', text: '사진' },
266		- { value: 'video', text: '영상' },
267		- { value: 'media', text: '미디어 영상' },
268		- { value: 'bodo', text: '스크랩 자료' },
269		- ],
	234	+ options: [
	235	+ { value: 'all', text: '전체' },
	236	+ { value: 'pic', text: '사진' },
	237	+ { value: 'video', text: '영상' },
	238	+ { value: 'media', text: '미디어 영상' },
	239	+ { value: 'bodo', text: '스크랩 자료' },
	240	+ ],
270	241	searchText: null, // 통합검색 Input 내용
271	242	icons: [
272	243	{
...	...	@@ -307,25 +278,25 @@
307	278	navigation: true, // Enable navigation buttons (prev/next)
308	279	};
309	280	},
	281	+
	282	+ computed: {
	283	+ getSelectedText() {
	284	+ const selected = this.options.find(opt => opt.value === this.searchRecord);
	285	+ return selected ? selected.text : '';
	286	+ }
	287	+ },
	288	+
310	289	created() {
311	290	this.fnFindAllSttuses();
312	291	},
313		- computed: {
314		- getSelectedText() {
315		- const selected = this.options.find(opt => opt.value === this.searchRecord);
316		- return selected ? selected.text : '';
317		- }
318		-},
	292	+
319	293	methods: {
320	294	toggleDropdown() {
321		- this.isDropdownOpen = !this.isDropdownOpen;
322		- },
323		- selectOption(option) {
324		- this.searchRecord = option.value;
325		- this.isDropdownOpen = false;
326		- },
327		- selectTab(index) {
328		- this.selectedTab = index; // Update the selected tab index
	295	+ this.isDropdownOpen = !this.isDropdownOpen;
	296	+ },
	297	+ selectOption(option) {
	298	+ this.searchRecord = option.value;
	299	+ this.isDropdownOpen = false;
329	300	},
330	301
331	302	// 메인화면 정보 조회
...	...	@@ -340,10 +311,10 @@
340	311	});
341	312
342	313	let photoDcrys = response.data.data.photoDcrys;
343		- this.tabContents.push({ id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' });
	314	+ this.tabs[0].contents = { id: 'newPhoto', list: photoDcrys, search: 'PicHistorySearch', view: 'PicHistoryDetail' };
344	315
345	316	let vidoDcrys = response.data.data.vidoDcrys;
346		- this.tabContents.push({ id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' });
	317	+ this.tabs[1].contents = { id: 'newVideo', list: vidoDcrys, search: 'VideoHistorySearch', view: 'VideoHistoryDetail' };
347	318
348	319	let mediaVidos = response.data.data.mediaVidos;
349	320	this.mediaContents = this.onChangeList(mediaVidos);

...	...	@@ -29,8 +29,8 @@
29	29	</template>
30	30	<script>
31	31	// COMPONENT
32		-import SearchFormComponent from '../../component/SearchFormComponent.vue';
33		-import CardViewList from "../../component/listLayout/CardViewList.vue";
	32	+import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
	33	+import CardViewList from "../../component/CardViewList.vue";
34	34	// API
35	35	import { findAllDatas } from "../../../resources/api/main"; // 통합 검색
36	36

Delete comment