Refine empty file selection state

src/public/upload.css

@@ -11,6 +11,10 @@
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -214,6 +218,14 @@ h1 {
   text-align: left;
 }
 
+.upload-panel:not([data-has-files="true"]) .file-summary {
+  padding: 16px 0 6px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  text-align: center;
+}
+
 .file-summary__title {
   margin: 0 0 10px;
   color: #45615c;
@@ -222,6 +234,21 @@ h1 {
   font-weight: 700;
 }
 
+.upload-panel:not([data-has-files="true"]) .file-summary__title {
+  display: none;
+}
+
+.file-summary__empty {
+  margin: 0;
+  padding: 8px 0 4px;
+  color: #242424;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 1.35;
+  text-align: center;
+}
+
 .file-list {
   display: flex;
   flex-wrap: wrap;

src/public/upload.html

@@ -31,8 +31,9 @@
           <input type="file" name="files" accept="{{accept}}" multiple required>
         </label>
 
-        <div class="file-summary" hidden>
+        <div class="file-summary">
           <p class="file-summary__title">선택한 파일</p>
+          <p class="file-summary__empty">사진을 선택해주세요.</p>
           <ul class="file-list"></ul>
           <button class="file-list__top" type="button" aria-label="선택한 파일 목록 맨 위로 이동" hidden></button>
         </div>
@@ -53,6 +54,7 @@
       const input = form.querySelector('input[type="file"][name="files"]');
       const submit = form.querySelector('button[type="submit"][aria-label="업로드"]');
       const summary = form.querySelector(".file-summary");
+      const empty = form.querySelector(".file-summary__empty");
       const list = form.querySelector(".file-list");
       const scrollTopButton = form.querySelector(".file-list__top");
       const status = form.querySelector(".upload-status");
@@ -88,7 +90,9 @@
         list.replaceChildren();
 
         if (files.length === 0) {
-          summary.hidden = true;
+          form.dataset.hasFiles = "false";
+          summary.hidden = false;
+          if (empty) empty.hidden = false;
           submit.disabled = true;
           submit.hidden = true;
           updateScrollTopButton();
@@ -123,6 +127,8 @@
         });
 
         summary.hidden = false;
+        form.dataset.hasFiles = "true";
+        if (empty) empty.hidden = true;
         submit.disabled = false;
         submit.hidden = false;
         list.scrollTop = 0;