Improve admin distribution editing flow

admin/public/app.js

@@ -25,6 +25,7 @@ const editDistributionButton = document.getElementById('editDistributionButton')
 const createDistributionButton = document.getElementById('createDistributionButton')
 const distributionEditorModal = document.getElementById('distributionEditorModal')
 const distributionEditorHint = document.getElementById('distributionEditorHint')
+const distributionEditorStatus = document.getElementById('distributionEditorStatus')
 const distributionEditorTextarea = document.getElementById('distributionEditorTextarea')
 const closeDistributionEditorButton = document.getElementById('closeDistributionEditorButton')
 const loadDistributionTemplateButton = document.getElementById('loadDistributionTemplateButton')
@@ -102,6 +103,18 @@ function clearStatus(){
     delete statusBanner.dataset.tone
 }
 
+function showDistributionEditorStatus(message, tone = 'info'){
+    distributionEditorStatus.hidden = false
+    distributionEditorStatus.dataset.tone = tone
+    distributionEditorStatus.textContent = message
+}
+
+function clearDistributionEditorStatus(){
+    distributionEditorStatus.hidden = true
+    distributionEditorStatus.textContent = ''
+    delete distributionEditorStatus.dataset.tone
+}
+
 function selectProfile(profileId){
     state.selectedProfileId = profileId
     renderSidebar()
@@ -187,7 +200,7 @@ function updateDistributionEditorHint(profile, pathOverride){
     }
 
     if(isRemoteUrl(currentPath)){
-        distributionEditorHint.textContent = `현재 값은 원격 URL입니다: ${currentPath} | 원격 URL은 여기서 직접 수정할 수 없습니다. 샘플을 불러온 뒤 새 파일로 저장하세요.`
+        distributionEditorHint.textContent = `현재 값은 원격 URL입니다: ${currentPath} | 내용을 불러와 수정할 수 있고, 저장하면 이 프로젝트 안의 로컬 distribution 파일로 복사됩니다.`
         return
     }
 
@@ -378,11 +391,13 @@ async function uploadIntoField(targetField, accept){
 function openDistributionEditorModal(){
     distributionEditorModal.hidden = false
     document.body.style.overflow = 'hidden'
+    clearDistributionEditorStatus()
 }
 
 function closeDistributionEditorModal(){
     distributionEditorModal.hidden = true
     document.body.style.overflow = ''
+    clearDistributionEditorStatus()
 }
 
 async function loadDistributionTemplate(){
@@ -395,6 +410,16 @@ async function loadDistributionTemplate(){
     distributionEditorTextarea.value = result.content
 }
 
+async function loadDistributionContent(requestedPath){
+    const response = await fetch(`/api/distribution/content?path=${encodeURIComponent(requestedPath)}`)
+    const result = await response.json()
+    if(!response.ok || result.ok !== true){
+        throw new Error(result.message || 'distribution 파일을 불러오지 못했습니다.')
+    }
+
+    distributionEditorTextarea.value = result.content
+}
+
 async function openDistributionEditor(mode){
     const profile = getSelectedProfile()
     if(!profile){
@@ -405,6 +430,7 @@ async function openDistributionEditor(mode){
     openDistributionEditorModal()
     distributionEditorTextarea.value = ''
     updateDistributionEditorHint(profile)
+    showDistributionEditorStatus('distribution 내용을 준비하는 중...', 'info')
 
     try {
         const currentPath = String(profile.distributionUrl ?? '').trim()
@@ -413,29 +439,27 @@ async function openDistributionEditor(mode){
             await loadDistributionTemplate()
             updateDistributionEditorHint(profile, '')
             showStatus('distribution 템플릿을 불러왔습니다.', 'success')
+            showDistributionEditorStatus('샘플을 불러왔습니다. 바로 수정한 뒤 저장하면 됩니다.', 'success')
             return
         }
 
         if(isRemoteUrl(currentPath)){
-            await loadDistributionTemplate()
+            await loadDistributionContent(currentPath)
             updateDistributionEditorHint(profile, currentPath)
-            showStatus('원격 URL은 직접 수정할 수 없어 샘플을 대신 불러왔습니다.', 'info')
+            showStatus('원격 distribution 내용을 불러왔습니다.', 'success')
+            showDistributionEditorStatus('원격 distribution 내용을 불러왔습니다. 저장하면 로컬 파일로 복사됩니다.', 'success')
             return
         }
 
         showStatus('distribution 파일을 불러오는 중...', 'info')
-        const response = await fetch(`/api/distribution/content?path=${encodeURIComponent(currentPath)}`)
-        const result = await response.json()
-        if(!response.ok || result.ok !== true){
-            throw new Error(result.message || 'distribution 파일을 불러오지 못했습니다.')
-        }
-
-        distributionEditorTextarea.value = result.content
+        await loadDistributionContent(currentPath)
         updateDistributionEditorHint(profile, currentPath)
         showStatus('distribution 파일을 불러왔습니다.', 'success')
+        showDistributionEditorStatus('현재 연결된 distribution 파일을 불러왔습니다.', 'success')
     } catch (error) {
         console.error(error)
         showStatus(error instanceof Error ? error.message : 'distribution 파일을 불러오지 못했습니다.', 'error')
+        showDistributionEditorStatus(error instanceof Error ? error.message : 'distribution 파일을 불러오지 못했습니다.', 'error')
     }
 }
 
@@ -449,6 +473,7 @@ async function saveDistributionFile(){
     try {
         saveDistributionFileButton.disabled = true
         showStatus('distribution 파일 저장 중...', 'info')
+        showDistributionEditorStatus('distribution 파일 저장 중...', 'info')
 
         const response = await fetch('/api/distribution/save', {
             method: 'POST',
@@ -475,6 +500,7 @@ async function saveDistributionFile(){
     } catch (error) {
         console.error(error)
         showStatus(error instanceof Error ? error.message : 'distribution 파일 저장에 실패했습니다.', 'error')
+        showDistributionEditorStatus(error instanceof Error ? error.message : 'distribution 파일 저장에 실패했습니다.', 'error')
     } finally {
         saveDistributionFileButton.disabled = false
     }
@@ -498,9 +524,11 @@ function bindDistributionEditor(){
             await loadDistributionTemplate()
             updateDistributionEditorHint(getSelectedProfile(), '')
             showStatus('distribution 템플릿을 다시 불러왔습니다.', 'success')
+            showDistributionEditorStatus('샘플을 다시 불러왔습니다.', 'success')
         } catch (error) {
             console.error(error)
             showStatus(error instanceof Error ? error.message : 'distribution 템플릿을 불러오지 못했습니다.', 'error')
+            showDistributionEditorStatus(error instanceof Error ? error.message : 'distribution 템플릿을 불러오지 못했습니다.', 'error')
         }
     })
 

admin/public/index.html

@@ -199,6 +199,7 @@
                 </div>
                 <button type="button" id="closeDistributionEditorButton" class="secondaryAction">닫기</button>
             </div>
+            <div id="distributionEditorStatus" class="statusBanner" hidden></div>
             <textarea id="distributionEditorTextarea" class="distributionTextarea" spellcheck="false"></textarea>
             <div class="modalActions">
                 <button type="button" id="loadDistributionTemplateButton" class="secondaryAction">샘플 불러오기</button>

admin/public/styles.css

@@ -375,6 +375,11 @@ textarea {
     border-radius: 24px;
     background: #111412;
     box-shadow: var(--shadow);
+    pointer-events: auto;
+}
+
+#distributionEditorStatus {
+    margin-top: -4px;
 }
 
 .modalHeader {