func : 기존 첨부파일 받기코드 완성

- API 필요로 추후 테스트
issue : 수정폼의 수정기능 500에러 확인
 - 금일 가격조사 첨부파일 관련 에러났던것처럼 백엔드쪽 의심

src/pages/app/contractUpdate.vue

@@ -17,7 +17,6 @@ const priceSearchCheckBoxStatus = ref(false)
 const isLoading = ref(false)
 
 onBeforeMount(async ()=>{
-  console.log(history.state.key)
   const result = await getContractDetail(history.state.key)
   getDetailList(result)
 })
@@ -42,8 +41,6 @@ const params = reactive({
   contAtts: [], //첨부파일 데이터
 })
 
-
-
 const completedPriceDataParams = reactive({
   prcsNo:'',
   cateCd:'',
@@ -82,7 +79,6 @@ params.contAtts = [
   { prcsNo : '', bizNo : '' ,fileOrd : 0 ,logiFnm : '' ,physFnm : '',size : 0 ,data : '' ,path : '' },
 ]
 
-
 const data = reactive({
   contractData: [],
   completedPriceSearchData: [],
@@ -118,6 +114,7 @@ function getDetailList(arg){
   completedPriceDataParams.signDt = arg.signDt
   params.contStatCd = arg.contStatCd
   params.contNo = arg.contNo
+  params.contAtts = arg.contAtts
 }
 
 function formatMonthDate(dateStr) {
@@ -200,7 +197,7 @@ function handlePriceRowClick(row) {
   console.log(completedPriceDataParams.estimates)
 }
 
-const showFileInputs = ref(false)
+const showFileInputs = ref(true)
 const fileInputs = ref([
   { file: null, description: '시행 품의문' },
   { file: null, description: '소액수의계약서' },
@@ -256,6 +253,13 @@ const saveContOne = async () => {
 
 const pbAtts = ref<iPbAtt[]>(params.contAtts)
 
+watch(
+    () => params.contAtts,
+    (newContAtts) => {
+      pbAtts.value = newContAtts.map(() => null)
+    },
+    { immediate: true, deep: true }
+)
 const onFileChange = (e, idx) => {
   const file = e.target.files[0]
   if (!file) return
@@ -276,6 +280,20 @@ const onFileChange = (e, idx) => {
   reader.readAsDataURL(file)
 }
 
+function removeFile(idx) {
+  pbAtts.value[idx] = null // 신규 파일 제거
+  params.contAtts[idx] = null // 기존 파일도 제거(화면상 표시 안 됨)
+}
+
+// [추가] 다운로드 버튼: 기존 파일 다운로드
+function downloadFile(file) {
+  // file.path가 실제 다운로드 가능한 URL이면 바로 열기
+  console.log(file)
+  file.path = `https://svcm.hmsn.ink/api/cont/${file.contNo}/${file.fileOrd}`
+  window.open(file.path, '_blank')
+  return
+}
+
 function resetForm() {
   completedPriceDataParams.prcsNo = ''
   completedPriceDataParams.bizNo = ''
@@ -350,6 +368,7 @@ const onChangeSign = async() => {
   }
 }
 
+
 </script>
 
 <template>
@@ -624,13 +643,12 @@ const onChangeSign = async() => {
           <tr>
             <td></td>
             <td colspan="7">
-              <div v-if="showFileInputs" class="file-upload-list" style="margin-top:10px;">
+              <div class="file-upload-list" style="margin-top:10px;">
                 <div
                     v-for="(input, idx) in fileInputs"
                     :key="idx"
                     style="display: flex; align-items: center; margin-bottom: 8px;"
                 >
-                  <!-- 파일선택 -->
                   <label class="file-label" style="margin-right: 10px;">
                     <input
                         type="file"
@@ -640,15 +658,66 @@ const onChangeSign = async() => {
                     <span class="file-cta">파일선택</span>
                   </label>
                   <span style="flex:1; margin-right: 10px;">
-                      {{ pbAtts[idx] == null ? '' : pbAtts[idx].logiFnm }}
-                    </span>
-                  <span v-if="input.description != '인지세 납부확인서'" style="flex:2; color: #666;">{{ input.description }}</span>
-                  <span v-if="input.description == '인지세 납부확인서'" style="flex:2; color: #666;">{{ input.description }}
-                      <span  style="color:red" >{{"(계약금액이 1,000만원 이상일 경우 인지세 납부확인서 첨부가 필수입니다.)"}}</span>
+                    {{ pbAtts[idx]?.logiFnm || params.contAtts?.[idx]?.logiFnm || '' }}
                   </span>
+                  <!-- 설명/인지세 안내는 등록폼과 동일하게 -->
+                  <span v-if="input.description != '인지세 납부확인서'" style="flex:2; color: #666;">
+                    {{ input.description }}
+                  </span>
+                  <span v-if="input.description == '인지세 납부확인서'" style="flex:2; color: #666;">
+                    {{ input.description }}
+                    <span style="color:red">(계약금액이 1,000만원 이상일 경우 인지세 납부확인서 첨부가 필수입니다.)</span>
+                  </span>
+                  <div>
+                  <template v-if="pbAtts[idx] || params.contAtts?.[idx]">
+                    <VButton
+                        v-if="params.contAtts?.[idx]"
+                        color="primary"
+                        size="big"
+                        style="margin-right:8px; width: 10%"
+                        @click="downloadFile(params.contAtts[idx])"
+                    >
+                      다운로드
+                    </VButton>
+                    <VButton
+                        color="danger"
+                        size="big"
+                        style="width: 10%"
+                        @click="removeFile(idx)"
+                    >
+                      삭제
+                    </VButton>
+                  </template>
+                  </div>
                 </div>
               </div>
             </td>
+<!--            <td colspan="7">-->
+<!--              <div v-if="showFileInputs" class="file-upload-list" style="margin-top:10px;">-->
+<!--                <div-->
+<!--                    v-for="(input, idx) in fileInputs"-->
+<!--                    :key="idx"-->
+<!--                    style="display: flex; align-items: center; margin-bottom: 8px;"-->
+<!--                >-->
+<!--                  &lt;!&ndash; 파일선택 &ndash;&gt;-->
+<!--                  <label class="file-label" style="margin-right: 10px;">-->
+<!--                    <input-->
+<!--                        type="file"-->
+<!--                        class="file-input"-->
+<!--                        @change="(e) => onFileChange(e, idx)"-->
+<!--                    />-->
+<!--                    <span class="file-cta">파일선택</span>-->
+<!--                  </label>-->
+<!--                  <span style="flex:1; margin-right: 10px;">-->
+<!--                      {{ pbAtts[idx] == null ? '' : pbAtts[idx].logiFnm }}-->
+<!--                    </span>-->
+<!--                  <span v-if="input.description != '인지세 납부확인서'" style="flex:2; color: #666;">{{ input.description }}</span>-->
+<!--                  <span v-if="input.description == '인지세 납부확인서'" style="flex:2; color: #666;">{{ input.description }}-->
+<!--                      <span  style="color:red" >{{"(계약금액이 1,000만원 이상일 경우 인지세 납부확인서 첨부가 필수입니다.)"}}</span>-->
+<!--                  </span>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </td>-->
           </tr>
           </tbody>
         </table>