고객센터 완료, 검색 작업예정

assets/scss/default.scss

@@ -261,7 +261,7 @@
             width: calc((100% - 80px) / 5);
             border-radius: 20px;
             border: 1px solid #cccccc;
-            padding: 1rem 1rem 2rem 1rem;
+            padding: 1rem 1rem 1rem 1rem;
             .item--img {
               width: 100%;
               height: 10rem;
@@ -333,6 +333,175 @@
             }
           }
         }
+        .cs--list--wrap{
+          border: 1px solid #eee;
+          border-radius: 15px;
+          overflow: hidden;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+          .cs--header{
+            background-color: #f0f4ff;
+            padding: 20px 25px;
+            height: 4rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid #eee;
+            
+            h3{
+              font-size: 1.2rem;
+              font-weight: 600;
+              color: #555;
+            }
+            
+            .custom-btn{
+              height: 2.5rem;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              border-radius: 10px;
+              width: 10%;
+              color:#fff;
+              font-weight: 500;
+              transition: all 0.3s ease;
+              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+              
+              &:hover {
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+              }
+            }
+          }
+          
+          .cs--list{
+            .list{
+              padding: 20px 25px;
+              cursor: pointer;
+              border-bottom: 1px solid #f0f0f0;
+              transition: all 0.3s ease;
+              display: grid;
+              grid-template-columns: 80px 120px 1fr 2fr 100px 120px;
+              gap: 15px;
+              align-items: center;
+              
+              &:hover {
+                background-color: #f8f9ff;
+                border-left: 4px solid #667eea;
+                padding-left: 21px;
+              }
+              
+              &:last-child {
+                border-bottom: none;
+              }
+              
+              > span, > div {
+                font-size: 0.9rem;
+                
+                &:nth-child(1) { // SEQ
+                  font-weight: 600;
+                  color: #667eea;
+                  text-align: center;
+                  background: #f0f4ff;
+                  padding: 5px 10px;
+                  border-radius: 12px;
+                  font-size: 0.8rem;
+                }
+                
+                &:nth-child(2) { // CATEGORY
+                  background: linear-gradient(135deg, #667eea, #764ba2);
+                  color: white;
+                  padding: 6px 12px;
+                  border-radius: 15px;
+                  font-size: 0.8rem;
+                  font-weight: 500;
+                  text-align: center;
+                  white-space: nowrap;
+                }
+                
+                &:nth-child(3) { // NICK_NAME + NAME + COM
+                  color: #666;
+                  font-size: 0.9rem;
+                  
+                  strong {
+                    color: #333;
+                    font-weight: 600;
+                  }
+                }
+                
+                &:nth-child(4) { // TITLE
+                  color: #333;
+                  font-weight: 500;
+                  line-height: 1.4;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+                
+                &:nth-child(5) { // STATUS
+                  text-align: center;
+                  
+                  &.status-waiting {
+                    color: #ffffff;
+                    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
+                    padding: 4px 8px;
+                    border-radius: 10px;
+                    font-size: 0.8rem;
+                    font-weight: 600;
+                    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
+                  }
+                  
+                  &.status-processing {
+                    color: #ffffff;
+                    background: linear-gradient(135deg, #4ecdc4 0%, #44a39f 100%);
+                    padding: 4px 8px;
+                    border-radius: 10px;
+                    font-size: 0.8rem;
+                    font-weight: 600;
+                    box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
+                  }
+                  
+                  &.status-completed {
+                    color: #ffffff;
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    padding: 4px 8px;
+                    border-radius: 10px;
+                    font-size: 0.8rem;
+                    font-weight: 600;
+                    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
+                  }
+                }
+                
+                &:nth-child(6) { // REGDATE
+                  color: #999;
+                  font-size: 0.8rem;
+                  text-align: right;
+                }
+              }
+            }
+            
+            // 데이터가 없을 때
+            .no-data {
+              padding: 60px 20px;
+              text-align: center;
+              color: #999;
+              
+              &:before {
+                content: "📋";
+                display: block;
+                font-size: 3rem;
+                margin-bottom: 15px;
+              }
+              
+              h4 {
+                font-size: 1.1rem;
+                color: #666;
+                margin-bottom: 8px;
+              }
+              
+              p {
+                font-size: 0.9rem;
+                color: #999;
+              }
+            }
+          }
+        }
         .item--pagination{
           display: flex;
           justify-content: center;
@@ -740,4 +909,670 @@
   height:15px;
   display: inline-flex;
   background: url(../img/ic_radio_off.svg) no-repeat center; 
+}
+
+/**********************************************
+| 문의 등록 팝업 모달
+**********************************************/
+.inquiry-modal {
+  border-radius: 20px !important;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
+
+  .modal-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 1rem 25px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    h3 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin: 0;
+    }
+    
+    .close-btn {
+      background: rgba(255, 255, 255, 0.2) !important;
+      color: white !important;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      
+      &:hover {
+        background: rgba(255, 255, 255, 0.3) !important;
+      }
+      
+      .v-icon {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: 30px;
+    background: #fafafa;
+    
+    .form-group {
+      &:last-child{
+        margin-bottom: 0;
+      }
+      margin-bottom: 20px;
+      
+      label {
+        display: block;
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 8px;
+        
+        .required {
+          color: #ff6b6b;
+          margin-left: 3px;
+        }
+      }
+      
+      .custom-select,
+      .custom-file-input {
+        border-radius: 8px !important;
+        
+        .v-field {
+          border-radius: 8px !important;
+          background: white;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+          border: 1px solid #e1e5e9 !important;
+          min-height: 3.63rem !important;
+          
+          &.v-field--focused {
+            border-color: #667eea !important;
+            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+          }
+          
+          .v-field__outline {
+            border-radius: 8px !important;
+            
+            &__start {
+              border-radius: 8px 0 0 8px !important;
+            }
+            
+            &__end {
+              border-radius: 0 8px 8px 0 !important;
+            }
+          }
+          
+          &__field {
+            border-radius: 8px !important;
+          }
+          
+          &__overlay {
+            border-radius: 8px !important;
+          }
+        }
+        
+        .v-field__input {
+          padding: 12px 16px;
+          font-size: 0.9rem;
+          min-height: 3.63rem !important;
+          
+          &::placeholder {
+            color: #9ca3af;
+          }
+        }
+        
+        .v-field__field {
+          border-radius: 8px !important;
+          min-height: 3.63rem !important;
+          
+          .v-field__input {
+            min-height: 3.63rem !important;
+            align-items: center;
+            display: flex;
+          }
+        }
+        
+        .v-input__control {
+          min-height: 3.63rem !important;
+        }
+        
+        // Select dropdown
+        .v-select__selection {
+          border-radius: 8px !important;
+        }
+        
+        // Input 요소들
+        input, textarea {
+          border-radius: 8px !important;
+        }
+      }
+      
+      .custom-title-input {
+        border-radius: 8px !important;
+        
+        .v-field {
+          border-radius: 8px !important;
+          background: white;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+          border: 1px solid #e1e5e9 !important;
+          min-height: 2.25rem !important;
+          
+          &.v-field--focused {
+            border-color: #667eea !important;
+            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+          }
+          
+          .v-field__outline {
+            border-radius: 8px !important;
+            
+            &__start {
+              border-radius: 8px 0 0 8px !important;
+            }
+            
+            &__end {
+              border-radius: 0 8px 8px 0 !important;
+            }
+          }
+          
+          &__field {
+            border-radius: 8px !important;
+          }
+          
+          &__overlay {
+            border-radius: 8px !important;
+          }
+        }
+        
+        .v-field__input {
+          padding: 12px 16px;
+          font-size: 0.9rem;
+          min-height: 3.63rem !important;
+          
+          &::placeholder {
+            color: #9ca3af;
+          }
+        }
+        
+        .v-field__field {
+          border-radius: 8px !important;
+          min-height: 3.63rem !important;
+          
+          .v-field__input {
+            min-height: 3.63rem !important;
+            align-items: center;
+            display: flex;
+          }
+        }
+        
+        .v-input__control {
+          min-height: 3.63rem !important;
+        }
+        
+        input {
+          border-radius: 8px !important;
+        }
+      }
+      
+      .custom-textarea {
+        border-radius: 8px !important;
+        
+        .v-field {
+          border-radius: 8px !important;
+          background: white;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+          border: 1px solid #e1e5e9 !important;
+          
+          &.v-field--focused {
+            border-color: #667eea !important;
+            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+          }
+          
+          .v-field__outline {
+            border-radius: 8px !important;
+            
+            &__start {
+              border-radius: 8px 0 0 8px !important;
+            }
+            
+            &__end {
+              border-radius: 0 8px 8px 0 !important;
+            }
+          }
+          
+          &__field {
+            border-radius: 8px !important;
+          }
+          
+          &__overlay {
+            border-radius: 8px !important;
+          }
+        }
+        
+        .v-field__input {
+          padding: 16px;
+          font-size: 0.9rem;
+          
+          &::placeholder {
+            color: #9ca3af;
+          }
+        }
+        
+        .v-field__field {
+          border-radius: 8px !important;
+        }
+        
+        input, textarea {
+          border-radius: 8px !important;
+        }
+      }
+      
+      .custom-textarea {
+        .v-field__field {
+          .v-field__input {
+            padding: 16px;
+            line-height: 1.5;
+            resize: none !important;
+          }
+        }
+        
+        textarea {
+          resize: none !important;
+        }
+      }
+      
+      .custom-file-input {
+        .v-file-input__text {
+          display: flex;
+          align-items: center;
+          min-height: 2.25rem;
+        }
+      }
+      
+      .file-info {
+        font-size: 0.8rem;
+        color: #6b7280;
+        margin-top: 8px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .modal-footer {
+    padding: 20px 30px;
+    background: white;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    
+    .cancel-btn {
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      border: 1px solid #d1d5db;
+      border-radius: 10px;
+      padding: 0 24px;
+      height: 42px;
+      font-weight: 500;
+      
+      &:hover {
+        background: #e5e7eb !important;
+      }
+    }
+    
+    .submit-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+      color: white !important;
+      border-radius: 10px;
+      padding: 0 24px;
+      height: 42px;
+      font-weight: 600;
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+      
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+      }
+      
+      &:disabled {
+        opacity: 0.7;
+        transform: none !important;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
+      }
+    }
+  }
+}
+
+// 모달 배경 오버레이 스타일
+.v-overlay__content {
+  .inquiry-modal {
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+}
+
+/**********************************************
+| CS 디테일 페이지
+**********************************************/
+.cs--detail--wrap {
+  border: 1px solid #eee;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  background: white;
+  
+  .cs--detail--header {
+    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+    padding: 25px 30px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .status-badge {
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      
+      &.status-waiting {
+        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
+        color: #ffffff;
+        border: 1px solid #ff6b6b;
+        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+        font-weight: 600;
+      }
+      
+      &.status-completed {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        border: 1px solid #667eea;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+        font-weight: 600;
+      }
+    }
+    
+    .inquiry-meta {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      
+      .category-badge {
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: white;
+        padding: 6px 12px;
+        border-radius: 15px;
+        font-size: 0.8rem;
+        font-weight: 500;
+      }
+      
+      .date {
+        color: #666;
+        font-size: 0.9rem;
+      }
+    }
+  }
+  
+  .cs--detail--content {
+    padding: 30px;
+    
+    .inquiry-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #333;
+      margin-bottom: 25px;
+      line-height: 1.4;
+      border-bottom: 2px solid #f0f4ff;
+      padding-bottom: 15px;
+    }
+    
+    .inquiry-info {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 30px;
+      padding: 20px;
+      background: #fafbfc;
+      border-radius: 12px;
+      border-left: 4px solid #667eea;
+      
+      .info-item {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        
+        .label {
+          font-size: 0.85rem;
+          color: #666;
+          font-weight: 500;
+        }
+        
+        .value {
+          font-size: 1rem;
+          color: #333;
+          font-weight: 600;
+        }
+      }
+    }
+    
+    .inquiry-content {
+      margin-bottom: 30px;
+      
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        &:before {
+          content: "📝";
+          font-size: 1.2rem;
+        }
+      }
+      
+      .content-text {
+        background: white;
+        border: 1px solid #e1e5e9;
+        border-radius: 12px;
+        padding: 25px;
+        line-height: 1.6;
+        color: #333;
+        font-size: 1rem;
+        min-height: 120px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      }
+    }
+    
+    .attachment-section {
+      margin-bottom: 30px;
+      
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        &:before {
+          content: "📎";
+          font-size: 1.2rem;
+        }
+      }
+      
+      .attachment-item {
+        background: white;
+        border: 1px solid #e1e5e9;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        
+        .mdi-paperclip {
+          font-size: 1.5rem;
+          color: #667eea;
+        }
+        
+        .file-name {
+          flex: 1;
+          font-size: 1rem;
+          color: #333;
+          font-weight: 500;
+        }
+        
+        .download-btn {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+          color: white !important;
+          border-radius: 8px;
+          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+          
+          &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+          }
+          
+          .mdi-download {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    
+    .answer-section {
+      border-top: 2px solid #f0f4ff;
+      padding-top: 30px;
+      
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        &:before {
+          content: "💬";
+          font-size: 1.2rem;
+        }
+      }
+      
+      .answer-content {
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+        border: 1px solid #e1e5e9;
+        border-radius: 12px;
+        padding: 25px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        
+        .answer-meta {
+          display: flex;
+          align-items: center;
+          gap: 15px;
+          margin-bottom: 15px;
+          padding-bottom: 15px;
+          border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+          
+          .admin-badge {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.8rem;
+            font-weight: 600;
+          }
+          
+          .answer-date {
+            color: #666;
+            font-size: 0.9rem;
+          }
+        }
+        
+        .answer-text {
+          line-height: 1.6;
+          color: #333;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}
+
+// 하단 버튼 스타일 개선
+.view-btm-btn {
+  margin-top: 40px;
+  padding: 25px 0;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .btn-l, .btn-r {
+    display: flex;
+    gap: 12px;
+  }
+  
+  .custom-btn {
+    &.btn-list {
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      border: 1px solid #d1d5db;
+      border-radius: 10px;
+      padding: 0 24px;
+      height: 42px;
+      font-weight: 500;
+      
+      &:hover {
+        background: #e5e7eb !important;
+      }
+      
+      .mdi-format-list-bulleted {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+// 팝업 내 모든 Vuetify 필드 요소들의 border-radius 강제 적용
+.inquiry-modal {
+  .v-field,
+  .v-field__field,
+  .v-field__overlay,
+  .v-field__outline,
+  .v-field__outline__start,
+  .v-field__outline__end,
+  .v-input__control,
+  .v-input__slot,
+  input,
+  textarea,
+  .v-select__slot {
+    border-radius: 8px !important;
+  }
+  
+  .v-field__outline__start {
+    border-radius: 8px 0 0 8px !important;
+  }
+  
+  .v-field__outline__end {
+    border-radius: 0 8px 8px 0 !important;
+  }
+  
+  // 포커스 상태에서도 border-radius 유지
+  .v-field--focused {
+    .v-field__outline,
+    .v-field__outline__start,
+    .v-field__outline__end {
+      border-radius: 8px !important;
+    }
+    
+    .v-field__outline__start {
+      border-radius: 8px 0 0 8px !important;
+    }
+    
+    .v-field__outline__end {
+      border-radius: 0 8px 8px 0 !important;
+    }
+  }
 }

assets/scss/mode-w-m.scss

@@ -24,6 +24,7 @@
     padding: 20px;
     z-index: 22;
     .pro--wrap{
+      z-index: 30;
       border: 1px solid #cccccc;
       border-radius: 30px;
       padding: 30px;
@@ -6697,4 +6698,157 @@ z
 .sun-editor{
   width: 100%;
   text-align: left;
+}
+
+// CS 답변 관련 스타일
+.answer-write-section {
+  margin-top: 32px;
+  padding: 24px;
+  border: 2px solid #e8f4fd;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #fafbff 0%, #f0f7ff 100%);
+  box-shadow: 0 2px 8px rgba(0, 148, 255, 0.08);
+
+  h4 {
+    margin-bottom: 20px;
+    color: #1a365d;
+    font-weight: 700;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    &::before {
+      content: "💬";
+      font-size: 1.2rem;
+    }
+  }
+
+  .answer-write-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    
+    .v-textarea {
+      .v-field {
+        background: white !important;
+        border: 1px solid #e1e5e9 !important;
+        border-radius: 12px !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+        
+        &.v-field--focused {
+          border-color: #667eea !important;
+          box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
+        }
+      }
+      
+      textarea {
+        resize: none !important;
+        padding: 25px !important;
+        line-height: 1.6 !important;
+        color: #333 !important;
+        font-size: 1rem !important;
+        font-family: inherit !important;
+        min-height: 120px !important;
+        
+        &::placeholder {
+          color: #999;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+
+  .answer-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .submit-answer-btn {
+    min-width: 130px;
+    height: 44px;
+    border-radius: 22px;
+    box-shadow: 0 4px 12px rgba(0, 148, 255, 0.3);
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(0, 148, 255, 0.4);
+    }
+  }
+}
+
+// 송장번호 등록 버튼 스타일 개선
+.item-content{
+  padding-bottom: 20px;
+}
+.delivery-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  color: white !important;
+  border-radius: 25px !important;
+  padding: 8px 20px !important;
+  font-size: 0.85rem !important;
+  font-weight: 600 !important;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
+  transition: all 0.3s ease !important;
+  border: none !important;
+  position: relative !important;
+  overflow: hidden !important;
+  width: 100%!important;
+  
+  &:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
+    
+    &::before {
+      transform: translateX(100%) !important;
+    }
+  }
+  
+  &::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: -100% !important;
+    width: 100% !important;
+    height: 100% !important;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
+    transition: transform 0.5s ease !important;
+  }
+  
+  &:disabled {
+    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
+    color: rgba(255, 255, 255, 0.7) !important;
+    transform: none !important;
+    box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2) !important;
+    cursor: not-allowed !important;
+    
+    &:hover {
+      transform: none !important;
+      box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2) !important;
+    }
+    
+    &::before {
+      display: none !important;
+    }
+  }
+  
+  .ico {
+    width: 16px !important;
+    height: 16px !important;
+    background-image: url(../img/ico_delivery.svg) !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: contain !important;
+    margin-right: 6px !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+  }
+  
+  .v-btn__content {
+    display: flex !important;
+    align-items: center !important;
+    color: #fff!important;
+    gap: 6px !important;
+  }
 }

assets/scss/style.scss

@@ -901,7 +901,6 @@
         padding: 0 1.25rem;
         border: 0.06rem solid #e0e0e0;
         background: #fff;
-        border-radius: 0;
         color: #000;
         font-size: 0.88rem;
         font-weight: 400;

backend/app/Config/Routes.php

@@ -50,18 +50,16 @@
   $routes->get('item/download/(:segment)', 'Item::file/$1');
 
 // 제품 주문 라우트
+  $routes->post('deli/search', 'Deli::deliSearch');
   $routes->post('deli/itemlist', 'Deli::itemlist');
   $routes->post('deli/list', 'Deli::delilist');
   $routes->post('deli/reg', 'Deli::deliRegister');
 
-// 당첨자 라우트
-  $routes->post('winner/list', 'Winner::winnerlist');
-  $routes->get('winner/detail/(:num)', 'Winner::winnerDetail/$1');
-  $routes->post('winner/partclist', 'Winner::getParticipationByItem');
-  $routes->post('winner/matcheduser', 'Winner::matchedUser');
-  
-  $routes->group('', ['filter' => 'auth'], function ($routes) {
-  });
+// 고객센터 라우트
+  $routes->post('cs/list', 'Cs::csList');
+  $routes->post('cs/detail/(:num)', 'Cs::csDetail/$1');
+  $routes->post('cs/reg', 'Cs::csRegister');
+  $routes->post('cs/answer', 'Cs::csAnswer');
 
 // API 라우트 그룹
   $routes->group('api', ['namespace' => 'App\Controllers'], function($routes) {

backend/app/Controllers/Cs.php

@@ -0,0 +1,213 @@
+<?php
+
+namespace App\Controllers;
+
+use CodeIgniter\RESTful\ResourceController;
+
+class Cs extends ResourceController
+{
+    //문의 리스트
+    public function csList()
+    {
+        $db = \Config\Database::connect();
+
+        // POST JSON 파라미터 받기
+        $request = $this->request->getJSON(true);
+        $userSeq = isset($request['USER_SEQ']) ? $request['USER_SEQ'] : null;
+
+        $builder = $db->table('CS_BOARD C')
+            ->select('C.*, U.NICK_NAME, U.NAME, V.COMPANY_NAME, V.NAME')
+            ->join('USER_LIST U', 'C.USER_SEQ = U.SEQ', 'left')
+            ->join('VENDOR_LIST V', 'C.USER_SEQ = V.SEQ', 'left');
+
+        //userSeq가 0이 아니면 본인이 쓴 글만 조회
+        if( $userSeq !== 0 ){
+            $builder->where('C.USER_SEQ', $userSeq);
+        }
+
+        $builder->orderBy('C.SEQ', 'DESC');
+
+        $lists = $builder->get()->getResultArray();
+        return $this->respond($lists, 200);
+    }
+
+    //문의 등록
+    public function csRegister()
+    {
+        $db = \Config\Database::connect();
+        $request = \Config\Services::request();
+        $regdate = date('Y-m-d H:i:s');
+
+        // 기본 유효성 검사
+        if (
+            !$request->getPost('USER_SEQ') ||
+            !$request->getPost('CATEGORY') ||
+            !$request->getPost('TITLE') ||
+            !$request->getPost('CONTENT')
+        ) {
+            return $this->respond([
+                'status' => 'fail',
+                'message' => '필수 값이 누락됐습니다.'
+            ], 400);
+        }
+
+        $db->transBegin(); // 트랜잭션 시작
+
+        try {
+            // 첨부파일 처리
+            $fileName = null;
+            $fileNameOrigin = null;
+            $files = $request->getFiles();
+
+            if (isset($files['files']) && !empty($files['files'])) {
+                $file = $files['files'][0]; // 첫 번째 파일만 처리
+                if ($file && $file->isValid() && !$file->hasMoved()) {
+                    $fileNameOrigin = $file->getClientName(); // 원본 파일명
+                    $fileName = $file->getRandomName(); // 랜덤파일명 생성
+                    $file->move(WRITEPATH . 'uploads/cs/', $fileName); // 저장
+                }
+            }
+
+            // CS_BOARD에 문의 정보 등록
+            $csData = [
+                'USER_SEQ' => $request->getPost('USER_SEQ'),
+                'CATEGORY' => $request->getPost('CATEGORY'),
+                'TITLE' => $request->getPost('TITLE'),
+                'CONTENT' => $request->getPost('CONTENT'),
+                'STATUS' => '0', // 0: 대기중, 1: 답변완료
+                'REGDATE' => $regdate
+            ];
+
+            // 파일이 있으면 파일 정보도 추가
+            if ($fileName) {
+                $csData['FILE_NAME'] = $fileName;
+                $csData['FILE_NAME_ORIGIN'] = $fileNameOrigin;
+            }
+
+            $insertResult = $db->table('CS_BOARD')->insert($csData);
+            if (!$insertResult) {
+                $error = $db->error();
+                return $this->respond([
+                    'status' => 'fail',
+                    'message' => 'Insert 실패: ' . $error['message']
+                ], 500);
+            }
+            $csSeq = $db->insertID(); // 생성된 문의 SEQ값
+
+            $db->transCommit();
+            return $this->respond([
+                'status' => 'success',
+                'success' => true,
+                'cs_seq' => $csSeq
+            ], 201);
+        } catch (\Exception $e) {
+            $db->transRollback();
+            return $this->respond([
+                'status' => 'fail',
+                'message' => 'DB 오류: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    //문의 상세
+    public function csDetail($seq)
+    {
+        // DB 객체 얻기
+        $db = \Config\Database::connect();
+
+        $builder = $db->table('CS_BOARD C')
+            ->select('C.*, U.NICK_NAME, U.NAME, V.COMPANY_NAME, V.NAME')
+            ->join('USER_LIST U', 'C.USER_SEQ = U.SEQ', 'left')
+            ->join('VENDOR_LIST V', 'C.USER_SEQ = V.SEQ', 'left');
+        $item = $builder->where('C.seq', $seq)->get()->getRowArray();
+
+        if($item){
+            return $this->respond($item, 200);
+        } else {
+            return $this->respond([
+                'status' => 'fail',
+                'message' => '유효하지 않은 seq입니다.'
+            ], 404);
+        }
+    }
+
+    //답변 등록
+    public function csAnswer()
+    {
+        $db = \Config\Database::connect();
+        $request = $this->request->getJSON(true);
+        $answerDate = date('Y-m-d H:i:s');
+
+        // 기본 유효성 검사
+        if (
+            !isset($request['CS_SEQ']) ||
+            !isset($request['ANSWER']) ||
+            !isset($request['ADMIN_SEQ'])
+        ) {
+            return $this->respond([
+                'status' => 'fail',
+                'message' => '필수 값이 누락됐습니다.'
+            ], 400);
+        }
+
+        $db->transBegin(); // 트랜잭션 시작
+
+        try {
+            // CS_BOARD 업데이트
+            $updateData = [
+                'ADMIN_ANSWER' => $request['ANSWER'],
+                'ANSWER_REGDATE' => $answerDate,
+                'ADMIN_SEQ' => $request['ADMIN_SEQ'],
+                'STATUS' => '1' // 답변완료 상태로 변경
+            ];
+
+            $updateResult = $db->table('CS_BOARD')
+                ->where('SEQ', $request['CS_SEQ'])
+                ->update($updateData);
+
+            if (!$updateResult) {
+                throw new \Exception('답변 등록에 실패했습니다.');
+            }
+
+            $db->transCommit();
+            return $this->respond([
+                'status' => 'success',
+                'message' => '답변이 등록되었습니다.'
+            ], 200);
+        } catch (\Exception $e) {
+            $db->transRollback();
+            return $this->respond([
+                'status' => 'fail',
+                'message' => 'DB 오류: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    //상세 다운로드
+    public function file($fileName)
+    {
+        helper('filesystem');
+        $db = \Config\Database::connect();
+
+        $path = WRITEPATH . 'uploads/cs/' . $fileName;
+
+        if (!file_exists($path)) {
+            return $this->failNotFound('파일을 찾을 수 없습니다.');
+        }
+
+        // DB에서 원본 파일명 조회
+        $fileInfo = $db->table('CS_BOARD')
+            ->select('FILE_NAME_ORIGIN')
+            ->where('FILE_NAME', $fileName)
+            ->get()
+            ->getRowArray();
+
+        $originalFileName = $fileInfo && $fileInfo['FILE_NAME_ORIGIN']
+            ? $fileInfo['FILE_NAME_ORIGIN']
+            : $fileName;
+
+        return $this->response
+            ->download($path, null)
+            ->setFileName($originalFileName);
+    }
+}

components/common/header.vue

@@ -3,7 +3,7 @@
     <div class="pro--wrap">
       <div class="pro--img"></div>
       <div class="pro--id" @click="proOn ? (proOn = false) : (proOn = true)">
-        {{ useStoreAuth.getSnsTempData?.user?.NICK_NAME || "사용자" }}
+        {{ userName }}
         <i class="ico" :class="[proOn ? 'on' : '']">></i>
         <div class="id--box" v-show="proOn">
           <button type="button" class="btn-profile" @click="myPage(userId)">
@@ -90,6 +90,8 @@
     const currentUser = snsUser || authUser;
     let memberType = currentUser?.memberType || currentUser?.MEMBER_TYPE;
 
+    userName.value = currentUser?.NICK_NAME || currentUser?.companyName;
+
     // memberType이 없으면 URL로 판단
     if (!memberType) {
       const currentPath = route.path;
@@ -353,10 +355,10 @@
   onMounted(() => {
     console.log(useStoreAuth.getSnsTempData.user);
     userId.value = localStorage.getItem("tempAccess");
-    userName.value = JSON.parse(localStorage.getItem("authStore"))?.auth.name;
-    userCompanyName.value = JSON.parse(
-      localStorage.getItem("authStore")
-    )?.auth.companyName;
+    // userName.value = JSON.parse(localStorage.getItem("authStore"))?.auth.name;
+    // userCompanyName.value = JSON.parse(
+    //   localStorage.getItem("authStore")
+    // )?.auth.companyName;
     fnSetMenu();
   });
 </script>

pages/view/common/cs/detail.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div class="inner--headers">
+      <h2>{{ pageId }}</h2>
+      <div class="bread--crumbs--wrap">
+        <span>홈</span>
+        <span>고객센터</span>
+        <span>{{ pageId }}</span>
+      </div>
+    </div>
+
+    <div class="data--list--wrap">
+      <div class="item--list--wrap">
+        <!-- 문의 상세 카드 -->
+        <div class="cs--detail--wrap">
+          <div class="cs--detail--header">
+            <div class="status-badge" :class="getStatusClass(csDetail.STATUS)">
+              {{ csDetail.STATUS == '0' ? '답변대기' : '답변완료' }}
+            </div>
+            <div class="inquiry-meta">
+              <span class="category-badge">{{ getCategoryName(csDetail.CATEGORY) }}</span>
+              <span class="date">{{ formatDate(csDetail.REGDATE) }}</span>
+            </div>
+          </div>
+
+          <div class="cs--detail--content">
+            <h3 class="inquiry-title">{{ csDetail.TITLE }}</h3>
+            
+            <div class="inquiry-info">
+              <div class="info-item">
+                <span class="label">작성자</span>
+                <span class="value">{{ csDetail.NICK_NAME || csDetail.COMPANY_NAME || '알 수 없음' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">등록일</span>
+                <span class="value">{{ formatDetailDate(csDetail.REGDATE) }}</span>
+              </div>
+            </div>
+
+            <div class="inquiry-content">
+              <h4>문의 내용</h4>
+              <div class="content-text" v-html="formatContent(csDetail.CONTENT)"></div>
+            </div>
+
+            <!-- 첨부파일 -->
+            <div v-if="csDetail.FILE_NAME" class="attachment-section">
+              <h4>첨부파일</h4>
+              <div class="attachment-item">
+                <i class="mdi mdi-paperclip"></i>
+                <span class="file-name">{{ csDetail.FILE_NAME_ORIGIN }}</span>
+                <v-btn class="download-btn" size="small" @click="downloadFile">
+                  <i class="mdi mdi-download"></i>
+                  다운로드
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- 답변 섹션 -->
+            <div v-if="csDetail.STATUS == '1'" class="answer-section">
+              <h4>답변</h4>
+              <div class="answer-content">
+                <div class="answer-meta">
+                  <span class="admin-badge">관리자</span>
+                  <span class="answer-date">{{ formatDetailDate(csDetail.ANSWER_REGDATE) }}</span>
+                </div>
+                <div class="answer-text" v-html="formatContent(csDetail.ADMIN_ANSWER)"></div>
+              </div>
+            </div>
+
+            <!-- 답변 작성 섹션 (관리자만) -->
+            <div class="answer-write-section" v-if="useAtStore.auth.seq === '2' && csDetail.STATUS == '0'">
+              <h4>답변 작성</h4>
+              <div class="answer-write-form">
+                <v-textarea
+                  v-model="answerContent"
+                  placeholder="답변 내용을 입력하세요."
+                  rows="4"
+                  variant="outlined"
+                  hide-details
+                ></v-textarea>
+                <div class="answer-actions">
+                  <v-btn 
+                    class="submit-answer-btn" 
+                    color="primary" 
+                    @click="submitAnswer"
+                    :loading="isSubmitting"
+                  >
+                    답변 등록
+                  </v-btn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 하단 버튼 -->
+      <div class="view-btm-btn">
+        <div class="btn-l">
+          <v-btn class="custom-btn btn-list" @click="listLocated">
+            <i class="mdi mdi-format-list-bulleted"></i>목록
+          </v-btn>
+        </div>
+        <div class="btn-r">
+          <!-- 필요시 수정/삭제 버튼 추가 -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useAxios from "@/composables/useAxios";
+import dayjs from 'dayjs';
+
+/************************************************************************
+|    레이아웃
+************************************************************************/
+definePageMeta({
+  layout: "default",
+});
+
+/************************************************************************
+|    스토어
+************************************************************************/
+const useDtStore = useDetailStore();
+const useAtStore = useAuthStore();
+
+/************************************************************************
+|    전역
+************************************************************************/
+const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
+const router = useRouter();
+const pageId = ref("문의 상세");
+
+// CS 상세 정보
+const csDetail = ref({
+  SEQ: '',
+  USER_SEQ: '',
+  CATEGORY: '',
+  TITLE: '',
+  CONTENT: '',
+  STATUS: '',
+  REGDATE: '',
+  FILE_NAME: '',
+  FILE_NAME_ORIGIN: '',
+  ANSWER: '',
+  ANSWER_DATE: '',
+  NICK_NAME: '',
+  COMPANY_NAME: ''
+});
+
+// 답변 작성 관련
+const answerContent = ref('');
+const isSubmitting = ref(false);
+const isAdmin = computed(() => {
+  // 관리자 권한 체크 (실제 권한 체크 로직에 맞게 수정 필요)
+  return useAtStore.auth.seq === '2';
+});
+
+/************************************************************************
+|    함수(METHODS)
+************************************************************************/
+
+const listLocated = () => {
+  router.push({
+    path: "/view/common/cs",
+  });
+};
+
+const getCategoryName = (category) => {
+  switch(category) {
+    case 'D': return '기능문의';
+    case 'E': return '기타문의';
+  }
+};
+
+const getStatusClass = (status) => {
+  switch(status) {
+    case '0': return 'status-waiting';
+    case '1': return 'status-completed';
+    default: return '';
+  }
+};
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}.${month}.${day}`;
+};
+
+const formatDetailDate = (dateStr) => {
+  if (!dateStr) return '';
+  return dayjs(dateStr).format('YYYY년 MM월 DD일 HH:mm');
+};
+
+const formatContent = (content) => {
+  if (!content) return '';
+  return content.replace(/\n/g, '<br>');
+};
+
+const downloadFile = () => {
+  if (csDetail.value.FILE_NAME) {
+    window.open(`https://shopdeli.mycafe24.com/cs/download/${csDetail.value.FILE_NAME}`, '_blank');
+  }
+};
+
+const fnDetail = () => {
+  let req = {
+    seq: useDtStore.boardInfo.seq,
+  };
+  
+  useAxios()
+  .get(`/cs/detail/${req.seq}`)
+  .then((res) => {
+      csDetail.value = res.data;
+    })
+    .catch((error) => {
+      console.error('CS 상세 조회 실패:', error);
+      $toast.error('문의 상세 정보를 불러올 수 없습니다.');
+    });
+};
+
+const submitAnswer = async () => {
+  if (!answerContent.value.trim()) {
+    $toast.error('답변 내용을 입력해주세요.');
+    return;
+  }
+
+  isSubmitting.value = true;
+  
+  try {
+    const response = await useAxios().post('/cs/answer', {
+      CS_SEQ: csDetail.value.SEQ,
+      ANSWER: answerContent.value,
+      ADMIN_SEQ: useAtStore.auth.seq,
+    });
+
+    if (response.data.status === 'success') {
+      $toast.success('답변이 등록되었습니다.');
+      answerContent.value = '';
+      // 상세 정보 다시 불러오기
+      fnDetail();
+    }
+  } catch (error) {
+    console.error('답변 등록 실패:', error);
+    $toast.error('답변 등록에 실패했습니다.');
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+/************************************************************************
+|    라이프사이클
+************************************************************************/
+onMounted(() => {
+  fnDetail();
+});
+</script>

pages/view/common/cs/financial.vue

@@ -1,980 +0,0 @@
-<template>
-  <div>
-    <div class="inner--headers">
-      <h2>{{ pageId }}</h2>
-      <div class="bread--crumbs--wrap">
-        <span>홈</span>
-        <span>{{ pageId }}</span>
-        <span v-if="pageIdSub">{{ pageIdSub }}</span>
-      </div>
-    </div>
-    <div class="data--list--wrap">
-      <div class="table--wrap">
-        <div class="table--t">
-          <h3>요약 연결 재무상태표</h3>
-          <span>단위 : 백만원</span>
-        </div>
-        <table>
-          <colgroup>
-            <col width="30%" />
-            <col width="20%" />
-            <col width="20%" />
-            <col width="20%" />
-          </colgroup>
-          <thead>
-            <tr>
-              <th>구분</th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year1"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year2"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year3"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>유동자산</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_1')"
-                  class="custom-input mini"
-                  v-model="form.value1_1"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_1')"
-                  class="custom-input mini"
-                  v-model="form.value2_1"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_1')"
-                  class="custom-input mini"
-                  v-model="form.value3_1"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>비유동자산</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_2')"
-                  class="custom-input mini"
-                  v-model="form.value1_2"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_2')"
-                  class="custom-input mini"
-                  v-model="form.value2_2"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_2')"
-                  class="custom-input mini"
-                  v-model="form.value3_2"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td class="bg">자산총계</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_3')"
-                  class="custom-input mini"
-                  v-model="form.value1_3"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_3')"
-                  class="custom-input mini"
-                  v-model="form.value2_3"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_3')"
-                  class="custom-input mini"
-                  v-model="form.value3_3"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>유동부채</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_4')"
-                  class="custom-input mini"
-                  v-model="form.value1_4"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_4')"
-                  class="custom-input mini"
-                  v-model="form.value2_4"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_4')"
-                  class="custom-input mini"
-                  v-model="form.value3_4"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>비유동부채</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_5')"
-                  class="custom-input mini"
-                  v-model="form.value1_5"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_5')"
-                  class="custom-input mini"
-                  v-model="form.value2_5"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_5')"
-                  class="custom-input mini"
-                  v-model="form.value3_5"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td class="bg">부채총계</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_6')"
-                  class="custom-input mini"
-                  v-model="form.value1_6"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_6')"
-                  class="custom-input mini"
-                  v-model="form.value2_6"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_6')"
-                  class="custom-input mini"
-                  v-model="form.value3_6"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>자본금</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_7')"
-                  class="custom-input mini"
-                  v-model="form.value1_7"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_7')"
-                  class="custom-input mini"
-                  v-model="form.value2_7"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_7')"
-                  class="custom-input mini"
-                  v-model="form.value3_7"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>주식발행 초과금</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_8')"
-                  class="custom-input mini"
-                  v-model="form.value1_8"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_8')"
-                  class="custom-input mini"
-                  v-model="form.value2_8"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_8')"
-                  class="custom-input mini"
-                  v-model="form.value3_8"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>기타자본 구성요소</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_9')"
-                  class="custom-input mini"
-                  v-model="form.value1_9"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_9')"
-                  class="custom-input mini"
-                  v-model="form.value2_9"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_9')"
-                  class="custom-input mini"
-                  v-model="form.value3_9"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>이익잉여금</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_10')"
-                  class="custom-input mini"
-                  v-model="form.value1_10"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_10')"
-                  class="custom-input mini"
-                  v-model="form.value2_10"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_10')"
-                  class="custom-input mini"
-                  v-model="form.value3_10"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td class="bg">자본총계</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_11')"
-                  class="custom-input mini"
-                  v-model="form.value1_11"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_11')"
-                  class="custom-input mini"
-                  v-model="form.value2_11"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_11')"
-                  class="custom-input mini"
-                  v-model="form.value3_11"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="table--wrap">
-        <di class="table--t">
-          <h3>요약 연결 손익계산서</h3>
-          <span>단위 : 백만원</span>
-        </di>
-        <table>
-          <colgroup>
-            <col width="30%" />
-            <col width="20%" />
-            <col width="20%" />
-            <col width="20%" />
-          </colgroup>
-          <thead>
-            <tr>
-              <th>구분</th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year1_1"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year2_1"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-              <th>
-                <v-text-field
-                  maxlength="4"
-                  class="custom-input mini"
-                  v-model="form.year3_1"
-                  placeholder="연도를 입력하세요"
-                ></v-text-field>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="bg">매출액</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_12')"
-                  class="custom-input mini"
-                  v-model="form.value1_12"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_12')"
-                  class="custom-input mini"
-                  v-model="form.value2_12"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_12')"
-                  class="custom-input mini"
-                  v-model="form.value3_12"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>매출원가</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_13')"
-                  class="custom-input mini"
-                  v-model="form.value1_13"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_13')"
-                  class="custom-input mini"
-                  v-model="form.value2_13"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_13')"
-                  class="custom-input mini"
-                  v-model="form.value3_13"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>매출총이익</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_14')"
-                  class="custom-input mini"
-                  v-model="form.value1_14"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_14')"
-                  class="custom-input mini"
-                  v-model="form.value2_14"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_14')"
-                  class="custom-input mini"
-                  v-model="form.value3_14"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>판매비와 관리비</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_15')"
-                  class="custom-input mini"
-                  v-model="form.value1_15"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_15')"
-                  class="custom-input mini"
-                  v-model="form.value2_15"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_15')"
-                  class="custom-input mini"
-                  v-model="form.value3_15"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td class="bg">영업이익</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_16')"
-                  class="custom-input mini"
-                  v-model="form.value1_16"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_16')"
-                  class="custom-input mini"
-                  v-model="form.value2_16"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_16')"
-                  class="custom-input mini"
-                  v-model="form.value3_16"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td>법인세 차감전순이익</td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_17')"
-                  class="custom-input mini"
-                  v-model="form.value1_17"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_17')"
-                  class="custom-input mini"
-                  v-model="form.value2_17"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td>
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_17')"
-                  class="custom-input mini"
-                  v-model="form.value3_17"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <td class="bg">당기순이익</td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value1_18')"
-                  class="custom-input mini"
-                  v-model="form.value1_18"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value2_18')"
-                  class="custom-input mini"
-                  v-model="form.value2_18"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-              <td class="bg">
-                <v-text-field
-                  maxlength="12"
-                  @input="(e) => formatNumber(e, 'value3_18')"
-                  class="custom-input mini"
-                  v-model="form.value3_18"
-                  placeholder="금액을 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="view-btm-btn">
-        <div class="btn-l"></div>
-        <div class="btn-r">
-          <v-btn class="custom-btn btn-blue2" @click="fnUpdEvt"
-            ><i class="ico"></i>저장</v-btn
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-/************************************************************************
-|    레이아웃
-************************************************************************/
-definePageMeta({
-  layout: "default",
-});
-
-/************************************************************************
-|   PROPS
- ************************************************************************/
-const props = defineProps({
-  propsData: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-/************************************************************************
-|    스토어
- ************************************************************************/
-const useDtStore = useDetailStore();
-/************************************************************************
-|    전역
- ************************************************************************/
-const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
-const router = useRouter();
-const pageId = ref("재무제표");
-const pageIdSub = ref();
-/* eslint-disable */
-const form = ref({
-  year1: "",
-  year2: "",
-  year3: "",
-  year1_1: "",
-  year2_1: "",
-  year3_1: "",
-  value1_1: "",
-  value1_2: "",
-  value1_3: "",
-  value1_4: "",
-  value1_5: "",
-  value1_6: "",
-  value1_7: "",
-  value1_8: "",
-  value1_9: "",
-  value1_10: "",
-  value1_11: "",
-  value1_12: "",
-  value1_13: "",
-  value1_14: "",
-  value1_15: "",
-  value1_16: "",
-  value1_17: "",
-  value1_18: "",
-  value2_1: "",
-  value2_2: "",
-  value2_3: "",
-  value2_4: "",
-  value2_5: "",
-  value2_6: "",
-  value2_7: "",
-  value2_8: "",
-  value2_9: "",
-  value2_10: "",
-  value2_11: "",
-  value2_12: "",
-  value2_13: "",
-  value2_14: "",
-  value2_15: "",
-  value2_16: "",
-  value2_17: "",
-  value2_18: "",
-  value3_1: "",
-  value3_2: "",
-  value3_3: "",
-  value3_4: "",
-  value3_5: "",
-  value3_6: "",
-  value3_7: "",
-  value3_8: "",
-  value3_9: "",
-  value3_10: "",
-  value3_11: "",
-  value3_12: "",
-  value3_13: "",
-  value3_14: "",
-  value3_15: "",
-  value3_16: "",
-  value3_17: "",
-  value3_18: "",
-});
-/* eslint-disable */
-/* prettier-ignore */
-
-/************************************************************************
-|    함수(METHODS)
-************************************************************************/
-const formatNumber = (event, key) => {
-  // 숫자만 남기기
-  const input = event.target.value.replace(/[^0-9]/g, '');
-  // 3자리마다 쉼표 추가
-  const formattedInput = new Intl.NumberFormat().format(input);
-  // 실시간으로 업데이트
-  form.value[key] = String(formattedInput);
-};
-
-const fnUpdate = () => {
-  let wterGet = localStorage.getItem("tempAccess");
-  let _req = {
-    wter: wterGet,
-
-    // 요약 연결 재무상태표
-    dd_1: form.value.year1,
-    dd_2: form.value.year2,
-    dd_3: form.value.year3,
-
-    dd_amt_1_1: form.value.value1_1,
-    dd_amt_1_2: form.value.value1_2,
-    dd_amt_1_3: form.value.value1_3,
-    dd_amt_1_4: form.value.value1_4,
-    dd_amt_1_5: form.value.value1_5,
-    dd_amt_1_6: form.value.value1_6,
-    dd_amt_1_7: form.value.value1_7,
-    dd_amt_1_8: form.value.value1_8,
-    dd_amt_1_9: form.value.value1_9,
-    dd_amt_1_10: form.value.value1_10,
-    dd_amt_1_11: form.value.value1_11,
-
-    dd_amt_2_1: form.value.value2_1,
-    dd_amt_2_2: form.value.value2_2,
-    dd_amt_2_3: form.value.value2_3,
-    dd_amt_2_4: form.value.value2_4,
-    dd_amt_2_5: form.value.value2_5,
-    dd_amt_2_6: form.value.value2_6,
-    dd_amt_2_7: form.value.value2_7,
-    dd_amt_2_8: form.value.value2_8,
-    dd_amt_2_9: form.value.value2_9,
-    dd_amt_2_10: form.value.value2_10,
-    dd_amt_2_11: form.value.value2_11,
-
-    dd_amt_3_1: form.value.value3_1,
-    dd_amt_3_2: form.value.value3_2,
-    dd_amt_3_3: form.value.value3_3,
-    dd_amt_3_4: form.value.value3_4,
-    dd_amt_3_5: form.value.value3_5,
-    dd_amt_3_6: form.value.value3_6,
-    dd_amt_3_7: form.value.value3_7,
-    dd_amt_3_8: form.value.value3_8,
-    dd_amt_3_9: form.value.value3_9,
-    dd_amt_3_10: form.value.value3_10,
-    dd_amt_3_11: form.value.value3_11,
-
-    // 요약 연결 손익계산서
-    dd_1_1: form.value.year1_1,
-    dd_2_1: form.value.year2_1,
-    dd_3_1: form.value.year3_1,
-
-    dd_amt_1_12: form.value.value1_12,
-    dd_amt_1_13: form.value.value1_13,
-    dd_amt_1_14: form.value.value1_14,
-    dd_amt_1_15: form.value.value1_15,
-    dd_amt_1_16: form.value.value1_16,
-    dd_amt_1_17: form.value.value1_17,
-    dd_amt_1_18: form.value.value1_18,
-
-    dd_amt_2_12: form.value.value2_12,
-    dd_amt_2_13: form.value.value2_13,
-    dd_amt_2_14: form.value.value2_14,
-    dd_amt_2_15: form.value.value2_15,
-    dd_amt_2_16: form.value.value2_16,
-    dd_amt_2_17: form.value.value2_17,
-    dd_amt_2_18: form.value.value2_18,
-
-    dd_amt_3_12: form.value.value3_12,
-    dd_amt_3_13: form.value.value3_13,
-    dd_amt_3_14: form.value.value3_14,
-    dd_amt_3_15: form.value.value3_15,
-    dd_amt_3_16: form.value.value3_16,
-    dd_amt_3_17: form.value.value3_17,
-    dd_amt_3_18: form.value.value3_18,
-  };
-
-  _req = Object.fromEntries(
-    Object.entries(_req).map(([key, value]) => [
-      key,
-      typeof value === "string"
-        ? value.replace(/,/g, "") // 문자열인 경우에만 replace
-        : value == null
-        ? "" // null 또는 undefined 값은 빈 문자열로 처리
-        : String(value), // 그 외 값은 문자열로 변환
-    ])
-  );
-
-  useAxios()
-    .post("/balance/ins", _req)
-    .then((res) => {
-      window.location.reload();
-      //console.error(res)
-    })
-    .catch((error) => {});
-};
-const fnDetail = () => {
-  let _req = {};
-
-  useAxios()
-    .post("/balance/detail", _req)
-    .then((res) => {
-      const formattedData = Object.fromEntries(
-        Object.entries(res.data).map(([key, value]) => {
-          let formattedValue = null;
-          // 연도는 쉼표 제거, 금액은 쉼표 추가
-          if(key !== 'dd_1' && key !== 'dd_2' && key !== 'dd_3' && key !== 'dd_1_1' && key !== 'dd_2_1' && key !== 'dd_3_1'){
-            formattedValue = !isNaN(value)
-            ? new Intl.NumberFormat().format(Number(value))
-            : value;
-          } else {
-            formattedValue = value;
-          }
-          return [key, formattedValue];
-        })
-      );
-      res.data = formattedData;
-      form.value.year1 = res.data.dd_1;
-      form.value.value1_1 = res.data.dd_amt_1_1;
-      form.value.value1_2 = res.data.dd_amt_1_2;
-      form.value.value1_3 = res.data.dd_amt_1_3;
-      form.value.value1_4 = res.data.dd_amt_1_4;
-      form.value.value1_5 = res.data.dd_amt_1_5;
-      form.value.value1_6 = res.data.dd_amt_1_6;
-      form.value.value1_7 = res.data.dd_amt_1_7;
-      form.value.value1_8 = res.data.dd_amt_1_8;
-      form.value.value1_9 = res.data.dd_amt_1_9;
-      form.value.value1_10 = res.data.dd_amt_1_10;
-      form.value.value1_11 = res.data.dd_amt_1_11;
-
-      form.value.year2 = res.data.dd_2;
-      form.value.value2_1 = res.data.dd_amt_2_1;
-      form.value.value2_2 = res.data.dd_amt_2_2;
-      form.value.value2_3 = res.data.dd_amt_2_3;
-      form.value.value2_4 = res.data.dd_amt_2_4;
-      form.value.value2_5 = res.data.dd_amt_2_5;
-      form.value.value2_6 = res.data.dd_amt_2_6;
-      form.value.value2_7 = res.data.dd_amt_2_7;
-      form.value.value2_8 = res.data.dd_amt_2_8;
-      form.value.value2_9 = res.data.dd_amt_2_9;
-      form.value.value2_10 = res.data.dd_amt_2_10;
-      form.value.value2_11 = res.data.dd_amt_2_11;
-
-      form.value.year3 = res.data.dd_3;
-      form.value.value3_1 = res.data.dd_amt_3_1;
-      form.value.value3_2 = res.data.dd_amt_3_2;
-      form.value.value3_3 = res.data.dd_amt_3_3;
-      form.value.value3_4 = res.data.dd_amt_3_4;
-      form.value.value3_5 = res.data.dd_amt_3_5;
-      form.value.value3_6 = res.data.dd_amt_3_6;
-      form.value.value3_7 = res.data.dd_amt_3_7;
-      form.value.value3_8 = res.data.dd_amt_3_8;
-      form.value.value3_9 = res.data.dd_amt_3_9;
-      form.value.value3_10 = res.data.dd_amt_3_10;
-      form.value.value3_11 = res.data.dd_amt_3_11;
-
-      // 요약 연결 손익계산서
-      form.value.year1_1 = res.data.dd_1_1;
-      form.value.value1_12 = res.data.dd_amt_1_12;
-      form.value.value1_13 = res.data.dd_amt_1_13;
-      form.value.value1_14 = res.data.dd_amt_1_14;
-      form.value.value1_15 = res.data.dd_amt_1_15;
-      form.value.value1_16 = res.data.dd_amt_1_16;
-      form.value.value1_17 = res.data.dd_amt_1_17;
-      form.value.value1_18 = res.data.dd_amt_1_18;
-
-      form.value.year2_1 = res.data.dd_2_1;
-      form.value.value2_12 = res.data.dd_amt_2_12;
-      form.value.value2_13 = res.data.dd_amt_2_13;
-      form.value.value2_14 = res.data.dd_amt_2_14;
-      form.value.value2_15 = res.data.dd_amt_2_15;
-      form.value.value2_16 = res.data.dd_amt_2_16;
-      form.value.value2_17 = res.data.dd_amt_2_17;
-      form.value.value2_18 = res.data.dd_amt_2_18;
-
-      form.value.year3_1 = res.data.dd_3_1;
-      form.value.value3_12 = res.data.dd_amt_3_12;
-      form.value.value3_13 = res.data.dd_amt_3_13;
-      form.value.value3_14 = res.data.dd_amt_3_14;
-      form.value.value3_15 = res.data.dd_amt_3_15;
-      form.value.value3_16 = res.data.dd_amt_3_16;
-      form.value.value3_17 = res.data.dd_amt_3_17;
-      form.value.value3_18 = res.data.dd_amt_3_18;
-    })
-    .catch((error) => {});
-};
-
-const fnUpdEvt = () => {
-  let param = {
-    id: pageId,
-    title: "재무제표 저장",
-    content: "저장하시겠습니까?",
-    yes: {
-      text: "저장",
-      isProc: true,
-      event: "FN_UPDATE",
-      param: "",
-    },
-    no: {
-      text: "취소",
-      isProc: false,
-    },
-  };
-  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
-};
-
-$eventBus.off("FN_UPDATE");
-$eventBus.on("FN_UPDATE", () => {
-  fnUpdate();
-});
-
-/************************************************************************
-|    WATCH
-************************************************************************/
-
-watch(() => {});
-
-onMounted(() => {
-  fnDetail();
-});
-</script>

pages/view/common/cs/index.vue

@@ -5,334 +5,475 @@
       <div class="bread--crumbs--wrap">
         <span>홈</span>
         <span>{{ pageId }}</span>
-        <span v-if="pageIdSub">{{ pageIdSub }}</span>
       </div>
     </div>
-    <div class="data--list--wrap">
-      <div class="table--wrap">
-        <di class="table--t">
-          <h3>기 발행 주식 수</h3>
-        </di>
-        <table>
-          <colgroup>
-            <col width="20%" />
-            <col width="80%" />
-          </colgroup>
-          <tbody>
-            <tr>
-              <th class="bg le">주식 수<span class="bul">*</span></th>
-              <td>
-                <v-text-field
-                  maxlength="13"
-                  @input="(e) => formatNumber(e, 'formValue1')"
-                  v-model="form.formValue1"
-                  style="width: 300px"
-                  class="custom-input mini left"
-                  placeholder="주식 수를 입력하세요"
-                ></v-text-field>
-              </td>
-            </tr>
-            <tr>
-              <th class="bg le">
-                발행 주식 수 기준 일자(현재)<span class="bul">*</span>
-              </th>
-              <td>
-                <div class="calendar-wrap ml--0">
-                  <div class="calendar">
-                    <VueDatePicker
-                      :format="datePickerFormat"
-                      v-model="form.formValue2"
-                      auto-apply="true"
-                      week-start="0"
-                    ></VueDatePicker>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+
+    <div class="search--modules type2">
+      <div class="search--inner">
+        <div class="form--cont--filter">
+          <v-select
+            v-model="filter"
+            :items="filderArr"
+            variant="outlined"
+            class="custom-select"
+          >
+          </v-select>
+        </div>
+        <div class="form--cont--text">
+          <v-text-field
+            v-model="searchModel"
+            class="custom-input mini"
+            style="width: 100%"
+            placeholder="검색어를 입력하세요"
+          ></v-text-field>
+        </div>
       </div>
-      <div class="table--wrap">
-        <di class="table--t">
-          <h3>주주구성</h3>
-        </di>
-        <table>
-          <colgroup>
-            <col width="20%" />
-            <col width="80%" />
-          </colgroup>
-          <tbody>
-            <tr>
-              <th class="bg le">최대주주 및 특수 관계인<span class="bul">*</span></th>
-              <td>
-                <div class="input--wrap">
-                  <v-text-field
-                    maxlength="10"
-                    style="width: 300px"
-                    v-model="form.formValue3"
-                    @input="(e) => formatNumber(e, 'formValue3')"
-                    class="custom-input mini left"
-                    placeholder="비율을 입력하세요"
-                  ></v-text-field>
-                  <span>%</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th class="bg le">기관<span class="bul">*</span></th>
-              <td>
-                <div class="input--wrap">
-                  <v-text-field
-                    maxlength="10"
-                    style="width: 300px"
-                    v-model="form.formValue4"
-                    @input="(e) => formatNumber(e, 'formValue4')"
-                    class="custom-input mini left"
-                    placeholder="비율을 입력하세요"
-                  ></v-text-field>
-                  <span>%</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th class="bg le">외국인<span class="bul">*</span></th>
-              <td>
-                <div class="input--wrap">
-                  <v-text-field
-                    maxlength="10"
-                    style="width: 300px"
-                    @input="(e) => formatNumber(e, 'formValue5')"
-                    v-model="form.formValue5"
-                    class="custom-input mini left"
-                    placeholder="비율을 입력하세요"
-                  ></v-text-field>
-                  <span>%</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th class="bg le">자사주<span class="bul">*</span></th>
-              <td>
-                <div class="input--wrap">
-                  <v-text-field
-                    maxlength="10"
-                    style="width: 300px"
-                    v-model="form.formValue6"
-                    @input="(e) => formatNumber(e, 'formValue6')"
-                    class="custom-input mini left"
-                    placeholder="비율을 입력하세요"
-                  ></v-text-field>
-                  <span>%</span>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th class="bg le">기타<span class="bul">*</span></th>
-              <td>
-                <div class="input--wrap">
-                  <v-text-field
-                    maxlength="10"
-                    v-model="form.formValue7"
-                    @input="(e) => formatNumber(e, 'formValue7')"
-                    style="width: 300px"
-                    class="custom-input mini left"
-                    placeholder="비율을 입력하세요"
-                  ></v-text-field>
-                  <span>%</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="search--inner">
+        <div class="calendar-wrap ml--0">
+          <div class="calendar">
+            <VueDatePicker
+              :format="datePickerFormat"
+              v-model="searchStartDate"
+              placeholder="날짜를 선택하세요"
+              :auto-apply="true"
+              week-start="0"
+            ></VueDatePicker>
+          </div>
+          <span class="text">~</span>
+          <div class="calendar">
+            <VueDatePicker
+              v-model="searchEndDate"
+              :format="datePickerFormat"
+              placeholder="날짜를 선택하세요"
+              :auto-apply="true"
+              week-start="0"
+            ></VueDatePicker>
+          </div>
+          <div class="month--selector">
+            <v-btn
+              v-for="option in dateOptions"
+              :key="option.value"
+              :class="{ actv: selectedRange === option.value }"
+              @click="setDateRange(option.value)"
+              elevation="0"
+            >
+              {{ option.label }}
+            </v-btn>
+          </div>
+        </div>
       </div>
-      <div class="view-btm-btn">
-        <div class="btn-l"></div>
-        <div class="btn-r">
-          <v-btn class="custom-btn btn-blue2" @click="fnUpdEvt"
-            ><i class="ico"></i>저장</v-btn
-          >
+      <v-btn
+        class="custom-btn btn-blue mini sch--btn"
+        @click="fnSearch(searchModel, filter)"
+        >검색</v-btn
+      >
+    </div>
+
+    <div class="data--list--wrap">
+      <div class="item--list--wrap">
+        <div class="cs--list--wrap">
+          <div class="cs--header">
+            <h3>문의 등록</h3>
+            <v-btn class="custom-btn" @click="addLocated()">문의 등록</v-btn>
+          </div>
+          <div class="cs--header">
+            <h3>나의 문의 내역</h3>
+          </div>
+          <div class="cs--list" v-if="csList.length > 0">
+            <div v-for="(items, index) in paginatedItems" :key="index">
+              <div class="list" @click="toItemDetail(items.SEQ)">
+                <span>{{ items.SEQ }}</span>
+                <span>{{ items.CATEGORY == 'D' ? '기능문의' : '기타문의' }}</span>
+                <span><strong>{{ items.NICK_NAME ? items.NICK_NAME : items.COMPANY_NAME }}</strong></span>
+                <span>{{ items.TITLE }}</span>
+                <span :class="getStatusClass(items.STATUS)">{{ items.STATUS == '0' ? "답변대기" : "답변완료" }}</span>
+                <span>{{ formatDate(items.REGDATE) }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="cs--list" v-else>
+            <div class="no-data">
+              <h4>등록된 문의가 없습니다</h4>
+              <p>새로운 문의를 등록해보세요</p>
+            </div>
+          </div>
+        </div>
+        <div class="item--pagination" v-if="csList.length > 0">
+          <v-pagination
+            v-model="currentPage"
+            :length="Math.ceil(csList.length / itemsPerPage)"
+          ></v-pagination>
         </div>
       </div>
     </div>
+
+    <!-- 문의 등록 팝업 -->
+    <v-dialog v-model="showInquiryModal" max-width="600px" persistent>
+      <v-card class="inquiry-modal">
+        <v-card-title class="modal-header">
+          <h3>문의 등록</h3>
+          <v-btn icon @click="closeModal" class="close-btn">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-card-text class="modal-body">
+          <form @submit.prevent="submitInquiry">
+            <div class="form-group">
+              <label>문의 유형 <span class="required">*</span></label>
+              <v-select
+                v-model="inquiryForm.category"
+                :items="categoryOptions"
+                variant="outlined"
+                placeholder="문의 유형을 선택하세요"
+                class="custom-select"
+                :rules="[v => !!v || '문의 유형을 선택해주세요']"
+              ></v-select>
+            </div>
+
+            <div class="form-group">
+              <label>제목 <span class="required">*</span></label>
+              <v-text-field
+                v-model="inquiryForm.title"
+                variant="outlined"
+                placeholder="문의 제목을 입력하세요"
+                class="custom-input"
+                :rules="[v => !!v || '제목을 입력해주세요']"
+              ></v-text-field>
+            </div>
+
+            <div class="form-group">
+              <label>내용 <span class="required">*</span></label>
+              <v-textarea
+                v-model="inquiryForm.content"
+                variant="outlined"
+                placeholder="문의 내용을 상세히 입력해주세요"
+                rows="6"
+                class="custom-textarea"
+                :rules="[v => !!v || '내용을 입력해주세요']"
+              ></v-textarea>
+            </div>
+
+            <div class="form-group">
+              <label>첨부파일</label>
+              <v-file-input
+                v-model="inquiryForm.attachments"
+                variant="outlined"
+                placeholder="파일을 선택하세요"
+                hide-details=""
+                prepend-icon=""
+                append-inner-icon="mdi-paperclip"
+                class="custom-file-input mb--30"
+                accept="image/*,.pdf,.doc,.docx,.hwp"
+                multiple
+                show-size
+              ></v-file-input>
+              <p class="file-info">* 이미지, PDF, 문서 파일만 업로드 가능 (최대 10MB)</p>
+            </div>
+          </form>
+        </v-card-text>
+
+        <v-card-actions class="modal-footer">
+          <v-btn @click="closeModal" class="cancel-btn">취소</v-btn>
+          <v-btn @click="submitInquiry" class="submit-btn" :loading="isSubmitting">등록하기</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
 import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
-/************************************************************************
+import dayjs from 'dayjs';
+  /************************************************************************
 |    레이아웃
 ************************************************************************/
-definePageMeta({
-  layout: "default",
-});
-
-/************************************************************************
+  definePageMeta({
+    layout: "default",
+  });
+  /************************************************************************
 |   PROPS
  ************************************************************************/
-const props = defineProps({
-  propsData: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-/************************************************************************
+  const props = defineProps({
+    propsData: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  /************************************************************************
 |    스토어
  ************************************************************************/
-const useDtStore = useDetailStore();
-/************************************************************************
+  const useDtStore = useDetailStore();
+  const useAtStore = useAuthStore();
+  /************************************************************************
 |    전역
  ************************************************************************/
-const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
-const router = useRouter();
-const pageId = ref("기업경영구조");
-const pageIdSub = ref();
-const datePickerFormat = "yyyy-MM-dd";
-const form = ref({
-  formValue1: "",
-  formValue2: "",
-  formValue3: "",
-  formValue4: "",
-  formValue5: "",
-  formValue6: "",
-  formValue7: "",
-});
-
-/* eslint-disable */
-/* prettier-ignore */
-
-/************************************************************************
+  const memberType = useAtStore.auth.memberType;
+  const searchModel = ref("");
+  const selectedRange = ref('all');
+  const searchStartDate = ref("");
+  const searchEndDate = ref("");
+  const dateOptions = [
+    { label: '오늘', value: 'today' },
+    { label: '7일', value: '7d' },
+    { label: '1개월', value: '1m' },
+    { label: '3개월', value: '3m' },
+    { label: '전체', value: 'all' },
+  ]
+  const datePickerFormat = "yyyy-MM-dd";
+  const filter = ref("");
+  const filderArr = ref([
+    { title: "전체", value: "" },
+    { title: "제목", value: "title" },
+    { title: "내용", value: "content" },
+    { title: "작성자", value: "writer" },
+  ]);
+  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
+  const router = useRouter();
+  const pageId = computed(() => {
+    return '고객센터';
+  });
+  const csList = ref([]);
+  const itemsPerPage = 7;
+  const currentPage = ref(1);
+
+  // 문의 등록 팝업 관련
+  const showInquiryModal = ref(false);
+  const isSubmitting = ref(false);
+  const inquiryForm = ref({
+    category: '',
+    title: '',
+    content: '',
+    attachments: []
+  });
+  const categoryOptions = ref([
+    { title: '기능문의', value: 'D' },
+    { title: '기타문의', value: 'E' }
+  ]);
+
+  /* eslint-disable */
+  /* prettier-ignore */
+
+  /************************************************************************
 |    함수(METHODS)
 ************************************************************************/
-const formatNumber = (event, key) => {
-  let formattedInput = "";
-  // 숫자만 남기기
-  const input = event.target.value.replace(/[^0-9.]/g, '');
-  // 3자리마다 쉼표 추가
-  formattedInput = input;
-  if(key == 'formValue1'){
-    formattedInput = new Intl.NumberFormat().format(input);
+
+  const isRecentUpdate = (dateStr) => {
+    const today = new Date();
+    const updateDate = new Date(dateStr);
+    const diffDays = (today - updateDate) / (1000 * 60 * 60 * 24);
+    // 업데이트 날짜가 오늘 날짜 기준 최근 7일인지 확인
+    return diffDays <= 7;
   }
-  // 실시간으로 업데이트
-  form.value[key] = String(formattedInput);
-};
-
-const formatDate = (date) => {
-  const d = new Date(date);
-  const year = d.getFullYear();
-  const month = ("0" + (d.getMonth() + 1)).slice(-2);
-  const day = ("0" + d.getDate()).slice(-2);
-  return `${year}-${month}-${day}`;
-};
-
-const fnUpdate = () => {
-  let wterGet = localStorage.getItem("tempAccess");
-  let _req = {
-    wter: wterGet,
-    shar_count: form.value.formValue1,
-    iss_shar_stan_date: form.value.formValue2,
-    major_shar: form.value.formValue3,
-    corp_inve: form.value.formValue4,
-    fogn_inve: form.value.formValue5,
-    repu_shar: form.value.formValue6,
-    etc_shar: form.value.formValue7,
+
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    return csList.value.slice(start, start + itemsPerPage);
+  });
+
+  const setDateRange = (range) => {
+    const today = dayjs();
+
+    switch(range) {
+      case 'today' :
+        searchStartDate.value = today.format('YYYY-MM-DD');
+        searchEndDate.value = today.format('YYYY-MM-DD');
+        selectedRange.value = 'today';
+        break;
+      case '7d':
+        searchStartDate.value = today.subtract(7, 'day').format('YYYY-MM-DD');
+        searchEndDate.value = today.format('YYYY-MM-DD');
+        selectedRange.value = '7d';
+        break;
+      case '1m':
+        searchStartDate.value = today.subtract(1, 'month').format('YYYY-MM-DD');
+        searchEndDate.value = today.format('YYYY-MM-DD');
+        selectedRange.value = '1m';
+        break;
+      case '3m':
+        searchStartDate.value = today.subtract(3, 'month').format('YYYY-MM-DD');
+        searchEndDate.value = today.format('YYYY-MM-DD');
+        selectedRange.value = '3m';
+        break;
+      case 'all':
+        searchStartDate.value = "";
+        searchEndDate.value = today.format('YYYY-MM-DD');
+        selectedRange.value = 'all';
+        break
+    }
+  }
+
+  const addLocated = () => {
+    showInquiryModal.value = true;
   };
 
-  _req = Object.fromEntries(
-    Object.entries(_req).map(([key, value]) => [
-      key,
-      typeof value === "string"
-        ? value.replace(/,/g, "") // 문자열인 경우에만 replace
-        : value == null
-        ? "" // null 또는 undefined 값은 빈 문자열로 처리
-        : String(value), // 그 외 값은 문자열로 변환
-    ])
-  );
-
-  console.error(_req);
-
-  useAxios()
-    .post("/bm/ins", _req)
-    .then((res) => {
-      window.location.reload();
-    })
-    .catch((error) => {});
-};
-
-const fnDetail = () => {
-  let _req = {};
-
-  useAxios()
-    .post("/bm/detail", _req)
-    .then((res) => {
-      console.error(res.data);
-      // const formattedData = Object.fromEntries(
-      //   Object.entries(res.data).map(([key, value]) => {
-      //     let formattedValue = null;
-      //     // 연도는 쉼표 제거, 금액은 쉼표 추가
-      //     if(key !== shar_count){
-      //       formattedValue = !isNaN(value)
-      //       ? new Intl.NumberFormat().format(Number(value))
-      //       : value;
-      //     } else {
-      //       formattedValue = value;
-      //     }
-      //     return [key, formattedValue];
-      //   })
-      // );
-      // res.data = formattedData;
-      // console.error(formattedData)
-
-      form.value.formValue1 = new Intl.NumberFormat().format(res.data.shar_count);
-
-      form.value.formValue2 = res.data.iss_shar_stan_date;
-      form.value.formValue3 = res.data.major_shar; //최대주주
-      form.value.formValue4 = res.data.corp_inve; //기관
-      form.value.formValue5 = res.data.fogn_inve; //외국인
-      form.value.formValue6 = res.data.repu_shar; //자사주
-      form.value.formValue7 = res.data.etc_shar; //기타
-    })
-    .catch((error) => {});
-};
-
-const fnUpdEvt = () => {
-  let param = {
-    id: pageId,
-    title: "기업경영구조 저장",
-    content: "저장하시겠습니까?",
-    yes: {
-      text: "저장",
-      isProc: true,
-      event: "FN_UPDATE",
-      param: "",
-    },
-    no: {
-      text: "취소",
-      isProc: false,
-    },
+  const toItemDetail = (__EVENT) => {
+    router.push({
+      path: "/view/common/cs/detail",
+    });
+    useDtStore.boardInfo.seq = __EVENT;
   };
-  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
-};
 
-$eventBus.off("FN_UPDATE");
-$eventBus.on("FN_UPDATE", () => {
-  fnUpdate();
-});
+  const csListGet = async () => {
+    let _req = {
+      USER_SEQ : useAtStore.auth.seq,
+      keyword: '',
+      filter: '',
+      startDate: '',
+      endDate: ''
+    };
+    if(useAtStore.auth.seq == 2){
+      _req.USER_SEQ = 0;
+    }
+
+    await useAxios()
+      .post("/cs/list", _req)
+      .then((res) => {
+        csList.value = res.data;
+      });
+  };
+
+  const fnSearch = (__KEYWORD, __FILTER) => {
+    let _req = {
+      USER_SEQ: useAtStore.auth.seq,
+      filter: __FILTER,
+      keyword: __KEYWORD,
+      startDate: searchStartDate.value ? dayjs(searchStartDate.value).format('YYYY-MM-DD') : '',
+      endDate: searchEndDate.value ? dayjs(searchEndDate.value).format('YYYY-MM-DD') : ''
+    };
+
+    // 관리자인 경우 모든 문의 조회
+    if(useAtStore.auth.seq == 2){
+      _req.USER_SEQ = 0;
+    }
+
+    useAxios()
+      .post("/cs/list", _req)
+      .then((res) => {
+        csList.value = res.data;
+        currentPage.value = 1; // 검색 후 첫 페이지로 이동
+      })
+      .catch((error) => {
+        console.error('검색 실패:', error);
+        $toast.error('검색에 실패했습니다.');
+      });
+  };
+
+
+  const goToDeliveryDetail = (item) => {
+    // 제품 정보를 스토어에 저장
+    useDtStore.boardInfo.seq = item.SEQ;
+    useDtStore.boardInfo.pageType = "D";
+    
+    // 배송 관리 페이지로 이동
+    router.push({
+      path: "/view/common/deli/detail",
+      query: {
+        itemId: item.SEQ,
+        itemName: item.NAME,
+        price1: item.PRICE1,
+        price2: item.PRICE2 || item.PRICE1,
+        thumbFile: item.THUMB_FILE || ''
+      }
+    });
+  };
+
+  const getStatusClass = (status) => {
+    switch(status) {
+      case '0':
+        return 'status-waiting';
+      case '1':
+        return 'status-completed';
+    }
+  };
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}.${month}.${day}`;
+  };
+
+  // 팝업 관련 함수들
+  const closeModal = () => {
+    showInquiryModal.value = false;
+    resetForm();
+  };
+
+  const resetForm = () => {
+    inquiryForm.value = {
+      category: '',
+      title: '',
+      content: '',
+      attachments: []
+    };
+  };
 
-/************************************************************************
+  const submitInquiry = async () => {
+    // 폼 유효성 검사
+    if (!inquiryForm.value.category) {
+      $toast.error('문의 유형을 선택해주세요.');
+      return;
+    }
+    if (!inquiryForm.value.title) {
+      $toast.error('제목을 입력해주세요.');
+      return;
+    }
+    if (!inquiryForm.value.content) {
+      $toast.error('내용을 입력해주세요.');
+      return;
+    }
+
+    isSubmitting.value = true;
+    
+    try {
+      const formData = new FormData();
+      formData.append('USER_SEQ', useAtStore.auth.seq);
+      formData.append('CATEGORY', inquiryForm.value.category);
+      formData.append('TITLE', inquiryForm.value.title);
+      formData.append('CONTENT', inquiryForm.value.content);
+      
+      // 첨부파일 처리
+      if (inquiryForm.value.attachments && inquiryForm.value.attachments.length > 0) {
+        inquiryForm.value.attachments.forEach((file, index) => {
+          formData.append(`files[${index}]`, file);
+        });
+      }
+
+      await useAxios()
+        .post("/cs/reg", formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then((res) => {
+          if (res.data.success) {
+            $toast.success('문의가 성공적으로 등록되었습니다.');
+            closeModal();
+            csListGet(); // 목록 새로고침
+          } else {
+            $toast.error('문의 등록에 실패했습니다.');
+          }
+        });
+    } catch (error) {
+      $toast.error('문의 등록 중 오류가 발생했습니다.');
+      console.error('Error submitting inquiry:', error);
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  /************************************************************************
 |    WATCH
 ************************************************************************/
-watch(
-  () => form.value.formValue2,
-  (newVal) => {
-    if (newVal) {
-      form.value.formValue2 = formatDate(newVal);
-    }
-  }
-);
+  onMounted(() => {
+    csListGet();
 
-onMounted(() => {
-  fnDetail();
-});
-</script>
+    // 날짜 초기화
+    const today = dayjs();
+    searchEndDate.value = today.format('YYYY-MM-DD');
+  });
+</script>

pages/view/common/deli/detail.vue

@@ -1055,14 +1055,15 @@ import pagination from "../components/common/pagination.vue";
         form.value.formValue9 = res.data.SHOW_YN;
         form.value.formValue10 = res.data.ADD_INFO;
         form.value.order_link = res.data.ORDER_LINK;
-        form.value.order_start_date = res.data.ORDER_START_DATE.slice(0, 10);
-        form.value.order_end_date = res.data.ORDER_END_DATE.slice(0, 10);
+        form.value.order_start_date = res.data.ORDER_START_DATE ? res.data.ORDER_START_DATE.slice(0, 10) : '';
+        form.value.order_end_date = res.data.ORDER_END_DATE ? res.data.ORDER_END_DATE.slice(0, 10) : '';
         //썸네일 파일이 있으면 넣어줌
         if (form.value.formValue5) {
           imgTemp.value = `https://shopdeli.mycafe24.com/writable/uploads/item/thumb/${form.value.formValue5}`;
         }
       })
       .catch((error) => {
+        console.error('제품 상세 정보 로드 오류:', error);
         $toast.error("제품 정보를 불러오는 중 오류가 발생했습니다.");
       })
       .finally(() => {});

pages/view/common/item/index.vue

@@ -378,37 +378,4 @@ import dayjs from 'dayjs';
     const today = dayjs();
     searchEndDate.value = today.format('YYYY-MM-DD');
   });
-</script>
-
-<style scoped>
-.item {
-  position: relative;
-}
-
-.item-content {
-  cursor: pointer;
-  padding-bottom: 50px;
-}
-
-.item-actions {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100% - 20px);
-}
-
-.delivery-btn {
-  width: 100%;
-  margin-top: 8px;
-}
-
-.delivery-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.delivery-btn .ico {
-  margin-right: 4px;
-}
-</style>
+</script>