사진 모집 서버 종료

.gitattributes

@@ -0,0 +1 @@
+*.sh text eol=lf

README.md

@@ -32,8 +32,9 @@ The server cron runs this once per minute.
 - DB: `data/db.json`
 - Deploy log: `data/deploy.log`
 - Uploads: `/volume2/AKA Drive/사진 받기`
+- Admin allowlist: `ADMIN_ALLOWED_IPS` comma-separated IPs, default `112.159.64.27,162.12.184.41,192.168.219.100,192.168.219.1`
 - Upload page template: `src/public/upload.html`
 - Upload page style: `src/public/upload.css`
-- Upload page image: `src/public/hero.svg`
+- Upload page illustration: `src/public/wedding-illustration.png`
 
 Each request creates its own folder under the upload directory.

cd-watch.sh

@@ -1,16 +1,22 @@
 #!/bin/sh
 set -eu
 
-APP_DIR="$(cd "$(dirname "$0")" && pwd)"
+SCRIPT_PATH="$0"
+case "$SCRIPT_PATH" in
+  /*) ;;
+  *) SCRIPT_PATH="$(command -v "$0")" ;;
+esac
+APP_DIR="$(cd "$(dirname "$SCRIPT_PATH")" && pwd)"
 STATE_FILE="$APP_DIR/data/deployed-rev"
 LOG_FILE="$APP_DIR/data/deploy.log"
 
 mkdir -p "$APP_DIR/data"
 cd "$APP_DIR"
 
-remote_rev="$(git -c credential.helper="store --file=/var/services/homes/whitekomani/.git-credentials" ls-remote origin refs/heads/main | awk '{print $1}')"
+remote_output="$(git -c credential.helper="store --file=/var/services/homes/whitekomani/.git-credentials" ls-remote origin refs/heads/main 2>&1 || true)"
+remote_rev="$(printf '%s\n' "$remote_output" | awk '/refs\/heads\/main$/ {print $1}')"
 if [ -z "$remote_rev" ]; then
-  echo "$(date '+%Y-%m-%d %H:%M:%S') no remote revision found" >> "$LOG_FILE"
+  echo "$(date '+%Y-%m-%d %H:%M:%S') no remote revision found: $remote_output" >> "$LOG_FILE"
   exit 1
 fi
 

deploy.sh

@@ -1,7 +1,12 @@
 #!/bin/sh
 set -eu
 
-APP_DIR="$(cd "$(dirname "$0")" && pwd)"
+SCRIPT_PATH="$0"
+case "$SCRIPT_PATH" in
+  /*) ;;
+  *) SCRIPT_PATH="$(command -v "$0")" ;;
+esac
+APP_DIR="$(cd "$(dirname "$SCRIPT_PATH")" && pwd)"
 LOG_FILE="$APP_DIR/data/deploy.log"
 LOCK_DIR="$APP_DIR/data/deploy.lock"
 
@@ -19,7 +24,6 @@ echo "$(date '+%Y-%m-%d %H:%M:%S') deploy start" >> "$LOG_FILE"
 git -c credential.helper="store --file=/var/services/homes/whitekomani/.git-credentials" fetch origin main >> "$LOG_FILE" 2>&1
 git reset --hard origin/main >> "$LOG_FILE" 2>&1
 
-/usr/local/bin/docker build -t photoreq:latest . >> "$LOG_FILE" 2>&1
-./run.sh >> "$LOG_FILE" 2>&1
+/usr/local/bin/docker rm -f photoreq >> "$LOG_FILE" 2>&1 || true
 
-echo "$(date '+%Y-%m-%d %H:%M:%S') deploy done $(git rev-parse --short HEAD)" >> "$LOG_FILE"
+echo "$(date '+%Y-%m-%d %H:%M:%S') deploy stopped photoreq $(git rev-parse --short HEAD)" >> "$LOG_FILE"

run.sh

@@ -2,16 +2,6 @@
 set -eu
 
 APP_DIR="$(cd "$(dirname "$0")" && pwd)"
-UPLOAD_DIR="/volume2/AKA Drive/사진 받기"
 
 /usr/local/bin/docker rm -f photoreq >/dev/null 2>&1 || true
-/usr/local/bin/docker run -d \
-  --name photoreq \
-  --restart unless-stopped \
-  -p 18082:8080 \
-  --env-file "$APP_DIR/.env" \
-  -e PUBLIC_BASE_URL="https://photoreq.mokaya.org" \
-  -e MAX_FIELDS_SIZE_MB="2" \
-  -v "$APP_DIR/data:/data" \
-  -v "$UPLOAD_DIR:/uploads" \
-  photoreq:latest
+echo "photoreq is closed; container removed from $APP_DIR"

src/public/hero.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-label="">
-  <rect width="1600" height="900" fill="#20313b"/>
-  <rect x="980" y="90" width="420" height="300" rx="18" fill="#e6eef5" opacity=".92"/>
-  <rect x="1060" y="160" width="260" height="28" rx="14" fill="#7393a7"/>
-  <rect x="1060" y="220" width="190" height="22" rx="11" fill="#94aebd"/>
-  <circle cx="1240" cy="455" r="115" fill="#f2c94c" opacity=".85"/>
-  <path d="M0 610c160-54 270-78 430-18 142 53 248 42 370-24 146-80 268-72 428 15 132 72 238 78 372 24v293H0z" fill="#0f766e"/>
-  <path d="M0 690c146-44 272-48 420 6 126 46 246 42 390-12 168-62 318-48 460 24 124 63 220 70 330 30v162H0z" fill="#115e59"/>
-</svg>

src/public/upload.css

@@ -1,147 +1,509 @@
 :root {
   color-scheme: light;
-  --ink: #16202a;
-  --muted: #667085;
-  --line: #d4dce7;
-  --bg: #f5f7fb;
-  --panel: #ffffff;
-  --accent: #0f766e;
-  --accent-dark: #115e59;
+  --ink: #4b4b4b;
+  --deep: #174f49;
+  --deep-dark: #103f3a;
+  --paper: #ffffff;
+  --line: rgba(35, 35, 35, 0.14);
 }
 
 * {
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
-  background: var(--bg);
+  background: #ffffff;
   color: var(--ink);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: "Times New Roman", "Batang", "Apple SD Gothic Neo", serif;
 }
 
 .upload-page {
-  width: min(920px, calc(100% - 28px));
-  margin: 24px auto;
+  width: 100%;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0;
+  background: #ffffff;
 }
 
-.hero {
-  min-height: 300px;
+.wedding-card {
+  width: min(100%, 430px);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0 0 38px;
+  background: #ffffff;
+  text-align: center;
+}
+
+.poster {
   position: relative;
+  width: 100%;
+  margin: 0 auto;
+  aspect-ratio: 538 / 795;
   overflow: hidden;
-  border-radius: 8px;
-  background: #20313b;
+  padding: 0;
 }
 
-.hero__media {
+.poster::before {
+  content: none;
+}
+
+.poster__art {
   position: absolute;
   inset: 0;
-  background:
-    linear-gradient(90deg, rgba(12, 20, 28, 0.78), rgba(12, 20, 28, 0.18)),
-    url("/assets/hero.svg");
-  background-size: cover;
-  background-position: center;
-}
-
-.hero__content {
-  position: relative;
-  width: min(620px, calc(100% - 36px));
-  padding: 48px 28px;
-  color: white;
-}
-
-.eyebrow {
-  margin: 0 0 8px;
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
+  display: block;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center top;
 }
 
 h1 {
   margin: 0;
-  font-size: 34px;
-  line-height: 1.18;
+  color: #565656;
+  font-size: clamp(32px, 7.5vw, 43px);
+  line-height: 1.1;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  word-break: keep-all;
 }
 
-.summary {
-  margin: 14px 0 0;
-  max-width: 520px;
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 16px;
+.poster__date,
+.poster__subtitle {
+  margin: 0;
+  color: #555555;
+  letter-spacing: 0.24em;
+  white-space: nowrap;
+}
+
+.poster__date {
+  margin-top: clamp(12px, 2.8vw, 20px);
+  font-size: clamp(15px, 3.3vw, 19px);
+  font-weight: 700;
+}
+
+.poster__subtitle {
+  margin-top: clamp(14px, 3vw, 22px);
+  font-size: clamp(14px, 3.3vw, 19px);
+  font-weight: 700;
 }
 
 .upload-panel {
-  margin-top: 16px;
-  padding: 20px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel);
+  width: min(100%, 430px);
+  position: relative;
+  z-index: 8;
+  margin: clamp(-58px, -6vw, -34px) auto 0;
 }
 
-.dropzone {
-  display: block;
-  padding: 24px;
-  border: 2px dashed var(--line);
-  border-radius: 8px;
-  background: #fbfcfe;
-  cursor: pointer;
+.upload-panel::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: -18px;
+  bottom: -28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #ffffff 34%, #ffffff 100%);
+  pointer-events: none;
 }
 
-.dropzone__title,
-.dropzone__meta {
-  display: block;
-}
-
-.dropzone__title {
-  font-size: 18px;
-  font-weight: 750;
-}
-
-.dropzone__meta {
-  margin-top: 6px;
-  color: var(--muted);
-  font-size: 14px;
-}
-
-input[type="file"] {
-  margin-top: 16px;
-  width: 100%;
-}
-
-button {
-  margin-top: 16px;
-  width: 100%;
+.upload-panel__today {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(10px, 2.4vw, 16px);
+  margin: 0 auto clamp(14px, 2.8vw, 20px);
+  padding: 6px clamp(8px, 2vw, 16px) 5px;
+  width: fit-content;
+  max-width: 100%;
   border: 0;
-  border-radius: 6px;
-  padding: 13px 16px;
-  background: var(--accent);
-  color: white;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  color: #4f4f4f;
+  font-size: clamp(24px, 4.8vw, 35px);
+  line-height: 1.15;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.upload-panel__today::before,
+.upload-panel__today::after {
+  content: "";
+  flex: 0 0 clamp(28px, 6vw, 42px);
+  height: clamp(16px, 3.4vw, 24px);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 36'%3E%3Cg fill='none' stroke='%2389a69e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 28c13-12 27-20 47-23'/%3E%3Cpath d='M25 22c-9-1-15-7-17-15 10 1 17 6 20 14' fill='%2389a69e' fill-opacity='.5'/%3E%3Cpath d='M42 13c-7-1-12-5-14-12 8 0 14 4 17 11' fill='%2389a69e' fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  opacity: 0.78;
+}
+
+.upload-panel__today::after {
+  transform: scaleX(-1);
+}
+
+.upload-panel__notice {
+  margin: -6px auto 16px;
+  color: #5f6f6b;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.55;
+  word-break: keep-all;
+}
+
+.select-button,
+.upload-button,
+.upload-again {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  min-height: clamp(60px, 12vw, 80px);
+  border: 0;
+  border-radius: 7px;
+  padding: 15px 24px;
+  background:
+    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.13), transparent 58%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.05)),
+    linear-gradient(180deg, #1c5d57 0%, #155149 100%);
+  box-shadow: none;
+  color: #ffffff;
   font: inherit;
-  font-weight: 750;
+  font-size: clamp(27px, 5.2vw, 37px);
+  line-height: 1.1;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.select-button {
+  margin-bottom: 14px;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1.5px rgba(137, 166, 158, 0.55);
+  color: #565656;
+  font-size: clamp(24px, 4.6vw, 32px);
+}
+
+.upload-button {
+  margin-bottom: 14px;
+}
+
+.guest-fields {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 14px;
+  text-align: left;
+}
+
+.guest-fields label {
+  display: grid;
+  gap: 6px;
+  color: #45615c;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.guest-fields input {
+  width: 100%;
+  min-height: 46px;
+  border: 1px solid rgba(137, 166, 158, 0.38);
+  border-radius: 7px;
+  padding: 0 14px;
+  background: #ffffff;
+  color: #3f3f3f;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.guest-fields input::placeholder {
+  color: #9aa4a1;
+}
+
+.guest-fields input:focus {
+  outline: 2px solid rgba(137, 170, 163, 0.6);
+  outline-offset: 2px;
+}
+
+.guest-fields__anonymous {
+  color: #a64635;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.file-picker input[type="file"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
   cursor: pointer;
 }
 
-button:hover {
-  background: var(--accent-dark);
+.file-summary {
+  position: relative;
+  margin: 0 0 14px;
+  padding: 16px 18px;
+  border: 1px solid rgba(137, 166, 158, 0.35);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: none;
+  text-align: left;
 }
 
-@media (max-width: 640px) {
-  .upload-page {
-    width: calc(100% - 18px);
-    margin: 9px auto;
+.upload-panel:not([data-has-files="true"]) .file-summary {
+  padding: 16px 0 6px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  text-align: center;
 }
 
-  .hero {
-    min-height: 260px;
+.file-summary__title {
+  margin: 0 0 10px;
+  color: #45615c;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
 }
 
-  .hero__content {
+.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;
+  gap: 7px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 301px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+}
+
+.file-list li {
+  flex: 0 0 80px;
+  width: 80px;
+  height: 80px;
+  padding: 0;
+}
+
+.file-list__preview {
+  display: grid;
+  place-items: center;
+  width: 80px;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 6px;
+  background: #f7f8f6;
+  color: #8aa69f;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.file-list__preview img,
+.file-list__preview video {
   width: 100%;
-    padding: 36px 20px;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
-  h1 {
-    font-size: 28px;
+.file-list__top {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--deep);
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.file-list__top::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 10px solid #ffffff;
+  transform: translate(-50%, -62%);
+}
+
+.upload-status {
+  min-height: 22px;
+  margin: 12px 0 0;
+  color: #64736f;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.upload-status[data-type="error"] {
+  color: #a64635;
+}
+
+.upload-button:hover {
+  background:
+    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 58%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.07)),
+    linear-gradient(180deg, #216d65 0%, var(--deep-dark) 100%);
+}
+
+.select-button:hover {
+  background:
+    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.26), transparent 58%),
+    linear-gradient(180deg, #ffffff 0%, #e9e9e3 100%);
+}
+
+.upload-button:disabled {
+  opacity: 0.48;
+  cursor: default;
+}
+
+.upload-panel[data-uploading="true"] .upload-button span {
+  visibility: hidden;
+}
+
+.upload-panel[data-uploading="true"] .upload-button::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+.upload-button:focus-visible,
+.upload-again:focus-visible,
+.file-picker:focus-within {
+  outline: 3px solid #89aaa3;
+  outline-offset: 3px;
+}
+
+.thank-you {
+  width: min(100%, 430px);
+  margin: clamp(18px, 4vw, 28px) auto 0;
+  padding: 26px 24px 28px;
+  border: 1px solid rgba(137, 166, 158, 0.32);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 14px 30px rgba(55, 55, 55, 0.08);
+}
+
+.thank-you__eyebrow {
+  margin: 0 0 10px;
+  color: #8aa69f;
+  font-family: "Times New Roman", "Batang", serif;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.22em;
+}
+
+.thank-you h2 {
+  margin: 0;
+  color: #4f4f4f;
+  font-size: clamp(31px, 6vw, 42px);
+  line-height: 1.15;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+}
+
+.thank-you p:last-of-type {
+  margin: 14px 0 22px;
+  color: #626262;
+  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  word-break: keep-all;
+}
+
+.thank-you--error {
+  border-color: rgba(166, 70, 53, 0.28);
+}
+
+.thank-you--error .thank-you__eyebrow,
+.thank-you--error h2 {
+  color: #8c4d43;
+}
+
+.upload-again {
+  min-height: 58px;
+  margin: 0 auto;
+  font-size: clamp(22px, 4.4vw, 29px);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 760px) {
+  .upload-page {
+    background: #ffffff;
+  }
+
+  .wedding-card {
+    padding: 0 0 30px;
+    background: #ffffff;
+  }
+
+  .poster {
+    width: 100%;
+    padding: 0;
+    aspect-ratio: 538 / 795;
+  }
+
+  .poster::before {
+    content: none;
+  }
+
+  .upload-panel {
+    width: min(calc(100% - 48px), 340px);
+    margin-top: -54px;
+  }
+
+  .thank-you {
+    width: min(calc(100% - 48px), 340px);
+  }
+
+  .upload-panel__today {
+    font-size: clamp(23px, 6.5vw, 29px);
+  }
+
+  .upload-panel__notice {
+    font-size: 15px;
   }
 }

src/public/upload.html

@@ -8,25 +8,187 @@
 </head>
 <body>
   <main class="upload-page">
-    <section class="hero">
-      <div class="hero__media" aria-hidden="true"></div>
-      <div class="hero__content">
-        <p class="eyebrow">Photo Request</p>
-        <h1>{{title}}</h1>
-        <p class="summary">이 링크 전체에서 총 {{maxMb}} MB까지 업로드할 수 있어.</p>
+    <section class="wedding-card" aria-label="{{title}}">
+      <div class="poster">
+        <img class="poster__art" src="/assets/wedding-illustration.png?v=single-illustration-1" alt="">
       </div>
-    </section>
 
-    <section class="upload-panel">
-      <form method="post" action="/r/{{slug}}" enctype="multipart/form-data">
-        <label class="dropzone">
-          <span class="dropzone__title">사진이나 영상을 선택해줘</span>
-          <span class="dropzone__meta">허용 형식: {{allowedExts}}</span>
+      <form class="upload-panel" method="post" action="/r/{{slug}}" enctype="multipart/form-data">
+        <p class="upload-panel__today">오늘의 순간</p>
+        <p class="upload-panel__notice">※ 연락처는 상품 전달 목적 외에는 사용되지 않으며, 전달 후 삭제됩니다.</p>
+
+        <div class="guest-fields" aria-label="업로드하시는 분 정보">
+          <label>
+            <span>연락처</span>
+            <input type="tel" name="guestPhone" autocomplete="tel" inputmode="tel" value="010-">
+            <span class="guest-fields__anonymous" hidden>※ 익명 제출 시 추첨 대상에서 제외됩니다.</span>
+          </label>
+        </div>
+
+        <button class="upload-button" type="submit" aria-label="업로드" hidden>
+          <span>업로드하기</span>
+        </button>
+
+        <label class="select-button file-picker">
+          <span>사진 선택하기</span>
           <input type="file" name="files" accept="{{accept}}" multiple required>
         </label>
-        <button type="submit">업로드</button>
+
+        <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>
+
+        <p class="upload-status" aria-live="polite"></p>
       </form>
+
+      <section class="thank-you" hidden>
+        <p class="thank-you__eyebrow">THANK YOU</p>
+        <h2>감사합니다</h2>
+        <p>소중한 오늘을 함께 남겨주셔서 감사드립니다.</p>
+        <a class="upload-again" href="/r/{{slug}}">사진 더 올리기</a>
+      </section>
     </section>
   </main>
+  <script>
+    document.querySelectorAll(".upload-panel").forEach((form) => {
+      const input = form.querySelector('input[type="file"][name="files"]');
+      const guestPhone = form.querySelector('input[name="guestPhone"]');
+      const anonymousNotice = form.querySelector(".guest-fields__anonymous");
+      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");
+      const thanks = document.querySelector(".thank-you");
+      let previewUrls = [];
+      submit.disabled = true;
+      submit.hidden = true;
+
+      const formatBytes = (bytes) => {
+        if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+        if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+        return `${bytes} B`;
+      };
+
+      const setStatus = (message, type = "") => {
+        status.textContent = message;
+        status.dataset.type = type;
+      };
+
+      const clearPreviews = () => {
+        previewUrls.forEach((url) => URL.revokeObjectURL(url));
+        previewUrls = [];
+      };
+
+      const updateScrollTopButton = () => {
+        if (!scrollTopButton) return;
+        scrollTopButton.hidden = list.scrollHeight <= list.clientHeight || list.scrollTop < 8;
+      };
+
+      const hasValidPhone = () => /^010\d{8}$/.test((guestPhone?.value || "").replace(/\D/g, ""));
+
+      const updateAnonymousNotice = () => {
+        if (!anonymousNotice) return;
+        const hasFiles = Boolean(input?.files && input.files.length > 0);
+        anonymousNotice.hidden = !hasFiles || hasValidPhone();
+      };
+
+      input?.addEventListener("change", () => {
+        const files = Array.from(input.files || []);
+        clearPreviews();
+        list.replaceChildren();
+
+        if (files.length === 0) {
+          form.dataset.hasFiles = "false";
+          summary.hidden = false;
+          if (empty) empty.hidden = false;
+          submit.disabled = true;
+          submit.hidden = true;
+          updateScrollTopButton();
+          updateAnonymousNotice();
+          setStatus("");
+          return;
+        }
+
+        files.forEach((file) => {
+          const item = document.createElement("li");
+          const preview = document.createElement("div");
+          const previewUrl = URL.createObjectURL(file);
+
+          previewUrls.push(previewUrl);
+          preview.className = "file-list__preview";
+          if (file.type.startsWith("video/")) {
+            const video = document.createElement("video");
+            video.src = previewUrl;
+            video.muted = true;
+            video.playsInline = true;
+            video.preload = "metadata";
+            preview.append(video);
+          } else if (file.type.startsWith("image/")) {
+            const image = document.createElement("img");
+            image.src = previewUrl;
+            image.alt = "";
+            preview.append(image);
+          } else {
+            preview.textContent = "FILE";
+          }
+          item.append(preview);
+          list.append(item);
+        });
+
+        summary.hidden = false;
+        form.dataset.hasFiles = "true";
+        if (empty) empty.hidden = true;
+        submit.disabled = false;
+        submit.hidden = false;
+        list.scrollTop = 0;
+        requestAnimationFrame(updateScrollTopButton);
+        updateAnonymousNotice();
+        setStatus(`${files.length}개 파일을 선택했어요.`);
+      });
+
+      guestPhone?.addEventListener("input", updateAnonymousNotice);
+
+      list.addEventListener("scroll", updateScrollTopButton);
+      scrollTopButton?.addEventListener("click", () => {
+        list.scrollTo({ top: 0, behavior: "smooth" });
+      });
+
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        if (!form.reportValidity()) return;
+        if (!input.files || input.files.length === 0) {
+          setStatus("먼저 사진을 선택해 주세요.", "error");
+          return;
+        }
+        submit.disabled = true;
+        form.dataset.uploading = "true";
+        setStatus("업로드 중이에요. 화면을 닫지 말아 주세요.");
+
+        try {
+          const response = await fetch(form.action, {
+            method: "POST",
+            body: new FormData(form),
+            headers: { "Accept": "application/json" }
+          });
+          const result = await response.json().catch(() => ({}));
+          if (!response.ok || !result.ok) throw new Error(result.message || "업로드 중 오류가 났어요.");
+
+          form.hidden = true;
+          thanks.hidden = false;
+          thanks.querySelector("p:last-of-type").innerHTML =
+            `${result.count || input.files.length}개의 파일 잘 받았습니다.<br>소중한 오늘을 함께 남겨주셔서 감사드립니다.`;
+        } catch (error) {
+          submit.disabled = false;
+          form.dataset.uploading = "false";
+          setStatus(error.message || "업로드 중 오류가 났어요. 다시 시도해 주세요.", "error");
+        }
+      });
+    });
+  </script>
 </body>
 </html>

src/server.js

@@ -15,17 +15,38 @@ const publicDir = path.resolve("src", "public");
 const adminPassword = process.env.ADMIN_PASSWORD;
 const sessionSecret = process.env.SESSION_SECRET;
 const publicBaseUrl = (process.env.PUBLIC_BASE_URL || "").replace(/\/$/, "");
+const adminAllowedIps = parseIpList(
+  process.env.ADMIN_ALLOWED_IPS ||
+    "112.159.64.27,162.12.184.41,192.168.219.100,192.168.219.1"
+);
 
 if (!adminPassword || !sessionSecret) {
   throw new Error("ADMIN_PASSWORD and SESSION_SECRET are required.");
 }
 
 app.set("trust proxy", true);
-app.use(express.urlencoded({ extended: false, limit: `${Number(process.env.MAX_FIELDS_SIZE_MB || 2)}mb` }));
+app.use(
+  express.urlencoded({
+    extended: false,
+    limit: `${Number(process.env.MAX_FIELDS_SIZE_MB || 2)}mb`,
+  })
+);
 app.use(cookieParser(sessionSecret));
 app.use("/assets", express.static(publicDir, { fallthrough: true }));
 
-const imageExts = ["jpg", "jpeg", "png", "gif", "webp", "heic", "heif", "tif", "tiff", "bmp", "avif"];
+const imageExts = [
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
+  "heic",
+  "heif",
+  "tif",
+  "tiff",
+  "bmp",
+  "avif",
+];
 const videoExts = ["mp4", "mov", "m4v", "avi", "mkv", "webm"];
 const defaultExts = [...imageExts, ...videoExts];
 
@@ -51,16 +72,36 @@ function sanitizeName(value, fallback = "request") {
 function sanitizeFileName(value) {
   const parsed = path.parse(sanitizeName(value, "upload"));
   const base = sanitizeName(parsed.name, "upload").replace(/^\.+$/, "upload");
-  const ext = parsed.ext.replace(/[^\w.]/g, "").slice(0, 16).toLowerCase();
+  const ext = parsed.ext
+    .replace(/[^\w.]/g, "")
+    .slice(0, 16)
+    .toLowerCase();
   return `${base}${ext}`;
 }
 
+function cleanGuestField(value) {
+  return String(value || "")
+    .normalize("NFKC")
+    .replace(/[\r\n\t]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 80);
+}
+
+function submissionFolderName(guestPhone) {
+  const phone = cleanGuestField(guestPhone).replace(/[^\d]/g, "");
+  return /^010\d{8}$/.test(phone) ? phone : "익명";
+}
+
 function normalizeExts(value) {
   return String(value || "")
     .split(/[\s,;]+/)
     .map((item) => item.trim().replace(/^\./, "").toLowerCase())
     .filter(Boolean)
-    .filter((item, index, list) => /^[a-z0-9]+$/.test(item) && list.indexOf(item) === index);
+    .filter(
+      (item, index, list) =>
+        /^[a-z0-9]+$/.test(item) && list.indexOf(item) === index
+    );
 }
 
 async function ensureDb() {
@@ -87,7 +128,10 @@ function sign(value) {
 }
 
 function makeSession() {
-  const payload = JSON.stringify({ admin: true, exp: Date.now() + 1000 * 60 * 60 * 12 });
+  const payload = JSON.stringify({
+    admin: true,
+    exp: Date.now() + 1000 * 60 * 60 * 12,
+  });
   const encoded = Buffer.from(payload).toString("base64url");
   return `${encoded}.${sign(encoded)}`;
 }
@@ -97,7 +141,9 @@ function isAuthed(req) {
   const [encoded, mac] = token.split(".");
   if (!encoded || !mac || sign(encoded) !== mac) return false;
   try {
-    const payload = JSON.parse(Buffer.from(encoded, "base64url").toString("utf8"));
+    const payload = JSON.parse(
+      Buffer.from(encoded, "base64url").toString("utf8")
+    );
     return payload.admin === true && payload.exp > Date.now();
   } catch {
     return false;
@@ -120,7 +166,7 @@ function page(title, body) {
     :root { color-scheme: light; --ink:#17202a; --muted:#667085; --line:#d6dde7; --bg:#f6f8fb; --panel:#fff; --accent:#0f766e; --danger:#b42318; }
     * { box-sizing: border-box; }
     body { margin:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); }
-    main { width:min(960px, calc(100% - 32px)); margin:32px auto; }
+    main { width:min(1100px, calc(100% - 32px)); margin:32px auto; }
     .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; }
     h1 { font-size:24px; margin:0 0 18px; }
     h2 { font-size:18px; margin:26px 0 12px; }
@@ -128,6 +174,7 @@ function page(title, body) {
     input, textarea, select { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font:inherit; background:#fff; }
     input[type=file] { padding:9px; }
     button, .button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:6px; padding:10px 14px; background:var(--accent); color:#fff; font-weight:650; cursor:pointer; text-decoration:none; }
+    .button.secondary { background:#475467; }
     button.danger { background:var(--danger); }
     .row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
     .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
@@ -138,6 +185,13 @@ function page(title, body) {
     .notice { border:1px solid #bae6fd; background:#ecfeff; padding:12px; border-radius:6px; margin:12px 0; }
     .error { border-color:#fecaca; background:#fff1f2; }
     .upload-box { border:2px dashed var(--line); border-radius:8px; background:#fff; padding:18px; }
+    .stack { display:flex; flex-direction:column; gap:8px; }
+    .submission { border:1px solid var(--line); border-radius:8px; padding:14px; margin-top:12px; background:#fff; }
+    .submission h3 { margin:0 0 8px; font-size:16px; }
+    .submission dl { display:grid; grid-template-columns:90px 1fr; gap:6px 12px; margin:0; }
+    .submission dt { color:var(--muted); }
+    .submission dd { margin:0; }
+    .file-list-admin { margin:10px 0 0; padding-left:18px; color:var(--muted); }
     @media (max-width:720px) { main { width:calc(100% - 20px); margin:16px auto; } .row { grid-template-columns:1fr; } .table { font-size:14px; } }
   </style>
 </head>
@@ -146,7 +200,112 @@ function page(title, body) {
 }
 
 function renderTemplate(template, values) {
-  return template.replaceAll(/\{\{(\w+)\}\}/g, (match, key) => values[key] ?? match);
+  return template.replaceAll(
+    /\{\{(\w+)\}\}/g,
+    (match, key) => values[key] ?? match
+  );
+}
+
+function wantsJson(req) {
+  return String(req.get("accept") || "").includes("application/json");
+}
+
+function parseIpList(value) {
+  return String(value || "")
+    .split(/[\s,;]+/)
+    .map(normalizeIp)
+    .filter(Boolean);
+}
+
+function normalizeIp(value) {
+  let ip = String(value || "").trim();
+  if (!ip) return "";
+  if (ip.startsWith("[") && ip.endsWith("]")) ip = ip.slice(1, -1);
+  if (ip.startsWith("::ffff:")) ip = ip.slice("::ffff:".length);
+  return ip;
+}
+
+function clientIp(req) {
+  const cloudflareIp = normalizeIp(req.get("cf-connecting-ip") || "");
+  if (cloudflareIp) return cloudflareIp;
+
+  const forwarded = String(req.get("x-forwarded-for") || "")
+    .split(",")
+    .map(normalizeIp)
+    .filter(Boolean);
+  const closestPublicIp =
+    forwarded.toReversed().find((ip) => !isPrivateIp(ip)) || "";
+  return normalizeIp(
+    closestPublicIp ||
+      forwarded[0] ||
+      req.get("x-real-ip") ||
+      req.ip ||
+      req.socket.remoteAddress ||
+      ""
+  );
+}
+
+function isPrivateIp(ip) {
+  if (ip === "localhost" || ip === "::1") return true;
+  if (ip.startsWith("fe80:") || ip.startsWith("fc") || ip.startsWith("fd"))
+    return true;
+  const parts = ip.split(".").map((part) => Number(part));
+  if (parts.length !== 4 || parts.some((part) => !Number.isInteger(part)))
+    return false;
+  const [a, b] = parts;
+  return (
+    a === 10 ||
+    a === 127 ||
+    (a === 172 && b >= 16 && b <= 31) ||
+    (a === 192 && b === 168) ||
+    (a === 169 && b === 254)
+  );
+}
+
+function requireAdminIp(req, res, next) {
+  const ip = clientIp(req);
+  if (adminAllowedIps.includes(ip)) {
+    next();
+    return;
+  }
+  console.warn(
+    `blocked admin path from ${ip || "unknown"}: ${req.method} ${
+      req.originalUrl
+    }`
+  );
+  res.status(404).send(page("잘못된 접근", ""));
+}
+
+function uploadResultPage(request, { heading, message, isError = false }) {
+  const slug = escapeHtml(request.slug);
+  return `<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(heading)}</title>
+  <link rel="stylesheet" href="/assets/upload.css">
+</head>
+<body>
+  <main class="upload-page">
+    <section class="wedding-card" aria-label="${escapeHtml(request.title)}">
+      <div class="poster">
+        <img class="poster__art" src="/assets/wedding-illustration.png?v=single-illustration-1" alt="">
+      </div>
+      <section class="thank-you${isError ? " thank-you--error" : ""}">
+        <p class="thank-you__eyebrow">${
+          isError ? "PLEASE TRY AGAIN" : "THANK YOU"
+        }</p>
+        <h2>${escapeHtml(heading)}</h2>
+        <p>${escapeHtml(message)}</p>
+        <a class="upload-again" href="/r/${slug}">${
+    isError ? "다시 올리기" : "사진 더 올리기"
+  }</a>
+      </section>
+    </section>
+  </main>
+</body>
+</html>`;
 }
 
 async function uploadPage(request) {
@@ -159,28 +318,33 @@ async function uploadPage(request) {
     accept: escapeHtml(accept),
     allowedExts: escapeHtml(request.allowedExts.join(", ")),
     maxMb: escapeHtml(Math.round(request.maxBytes / 1024 / 1024)),
-    cssPath: "/assets/upload.css"
+    cssPath: "/assets/upload.css",
   };
   if (template) return renderTemplate(template, values);
-  return page(request.title, `
+  return page(
+    request.title,
+    `
     <section class="panel">
       <h1>${values.title}</h1>
-      <p class="muted">이 링크 전체에서 총 ${values.maxMb} MB까지 업로드할 수 있어.</p>
       <form method="post" action="/r/${values.slug}" enctype="multipart/form-data">
+        <label>연락처</label>
+        <input type="tel" name="guestPhone" autocomplete="tel">
         <div class="upload-box">
           <label>사진/영상 선택</label>
           <input type="file" name="files" accept="${values.accept}" multiple required>
-          <p class="muted">허용 형식: ${values.allowedExts}</p>
         </div>
         <div class="actions"><button type="submit">업로드</button></div>
       </form>
     </section>
-  `);
+  `
+  );
 }
 
 async function directorySize(dir) {
   let total = 0;
-  const entries = await fsp.readdir(dir, { withFileTypes: true }).catch((error) => {
+  const entries = await fsp
+    .readdir(dir, { withFileTypes: true })
+    .catch((error) => {
       if (error.code === "ENOENT") return [];
       throw error;
     });
@@ -208,10 +372,89 @@ async function moveUploadedFiles(files, targetDir) {
   }
 }
 
-app.get("/", (req, res) => res.redirect("/admin"));
+async function appendUploadMetadata(
+  targetDir,
+  { guestPhone, folderName, files }
+) {
+  const entry = {
+    uploadedAt: new Date().toISOString(),
+    guestPhone,
+    folderName,
+    files: files.map((file) => ({
+      storedName: file.filename,
+      originalName: Buffer.from(file.originalname, "latin1").toString("utf8"),
+      size: file.size,
+    })),
+  };
+  await fsp.appendFile(
+    path.join(targetDir, "upload-metadata.jsonl"),
+    `${JSON.stringify(entry)}\n`,
+    "utf8"
+  );
+}
+
+async function readUploadMetadata(folderName) {
+  const requestDir = path.join(uploadsDir, folderName);
+  const paths = [path.join(requestDir, "upload-metadata.jsonl")];
+  const entries = await fsp
+    .readdir(requestDir, { withFileTypes: true })
+    .catch((error) => {
+      if (error.code === "ENOENT") return [];
+      throw error;
+    });
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      paths.push(path.join(requestDir, entry.name, "upload-metadata.jsonl"));
+    }
+  }
+
+  const submissions = [];
+  for (const metadataPath of paths) {
+    const content = await fsp.readFile(metadataPath, "utf8").catch((error) => {
+      if (error.code === "ENOENT") return "";
+      throw error;
+    });
+    for (const line of content.split(/\r?\n/).filter(Boolean)) {
+      try {
+        submissions.push(JSON.parse(line));
+      } catch {
+        // Ignore malformed legacy lines so one bad record does not hide the list.
+      }
+    }
+  }
+  return submissions.sort((a, b) =>
+    String(a.uploadedAt || "").localeCompare(String(b.uploadedAt || ""))
+  );
+}
+
+function formatDateTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return new Intl.DateTimeFormat("ko-KR", {
+    timeZone: "Asia/Seoul",
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+app.get("/", (req, res) => {
+  res
+    .status(404)
+    .send(
+      page(
+        "페이지 없음",
+        `error`
+      )
+    );
+});
+
+app.use("/admin", requireAdminIp);
 
 app.get("/admin/login", (req, res) => {
-  res.send(page("관리자 로그인", `
+  res.send(
+    page(
+      "관리자 로그인",
+      `
     <section class="panel">
       <h1>사진 요청 관리자</h1>
       <form method="post" action="/admin/login">
@@ -220,18 +463,34 @@ app.get("/admin/login", (req, res) => {
         <div class="actions"><button type="submit">로그인</button></div>
       </form>
     </section>
-  `));
+  `
+    )
+  );
 });
 
 app.post("/admin/login", (req, res) => {
   const supplied = Buffer.from(req.body.password || "");
   const expected = Buffer.from(adminPassword);
-  const ok = supplied.length === expected.length && crypto.timingSafeEqual(supplied, expected);
+  const ok =
+    supplied.length === expected.length &&
+    crypto.timingSafeEqual(supplied, expected);
   if (!ok) {
-    res.status(401).send(page("로그인 실패", `<section class="panel"><h1>로그인 실패</h1><p class="muted">비밀번호가 맞지 않아.</p><a class="button" href="/admin/login">다시 시도</a></section>`));
+    res
+      .status(401)
+      .send(
+        page(
+          "로그인 실패",
+          `<section class="panel"><h1>로그인 실패</h1><p class="muted">비밀번호가 맞지 않아.</p><a class="button" href="/admin/login">다시 시도</a></section>`
+        )
+      );
     return;
   }
-  res.cookie("session", makeSession(), { httpOnly: true, sameSite: "lax", secure: req.secure, maxAge: 1000 * 60 * 60 * 12 });
+  res.cookie("session", makeSession(), {
+    httpOnly: true,
+    sameSite: "lax",
+    secure: req.secure,
+    maxAge: 1000 * 60 * 60 * 12,
+  });
   res.redirect("/admin");
 });
 
@@ -248,19 +507,34 @@ app.get("/admin", requireAdmin, async (req, res) => {
     .map((item) => {
       const url = `${publicBaseUrl}/r/${item.slug}`;
       return `<tr>
-        <td><strong>${escapeHtml(item.title)}</strong><br><span class="muted">${escapeHtml(item.folderName)}</span></td>
+        <td><strong>${escapeHtml(
+          item.title
+        )}</strong><br><span class="muted">${escapeHtml(
+        item.folderName
+      )}</span></td>
         <td><a href="${escapeHtml(url)}">${escapeHtml(url)}</a></td>
         <td>${Math.round(item.maxBytes / 1024 / 1024)} MB</td>
         <td>${escapeHtml(item.allowedExts.join(", "))}</td>
         <td>
-          <form method="post" action="/admin/requests/${escapeHtml(item.slug)}/delete" onsubmit="return confirm('링크를 삭제할까? 업로드된 파일은 유지돼.');">
+          <div class="stack">
+            <a class="button secondary" href="/admin/requests/${escapeHtml(
+              item.slug
+            )}/submissions">제출 내역</a>
+          <form method="post" action="/admin/requests/${escapeHtml(
+            item.slug
+          )}/delete" onsubmit="return confirm('링크를 삭제할까? 업로드된 파일은 유지돼.');">
             <button class="danger" type="submit">삭제</button>
           </form>
+          </div>
         </td>
       </tr>`;
-    }).join("");
+    })
+    .join("");
 
-  res.send(page("사진 요청 관리자", `
+  res.send(
+    page(
+      "사진 요청 관리자",
+      `
     <section class="panel">
       <form method="post" action="/admin/logout" style="float:right"><button type="submit">로그아웃</button></form>
       <h1>사진 요청 관리자</h1>
@@ -276,16 +550,90 @@ app.get("/admin", requireAdmin, async (req, res) => {
           </div>
         </div>
         <label>허용 확장자</label>
-        <input name="allowedExts" value="${escapeHtml(defaultExts.join(", "))}" required>
+        <input name="allowedExts" value="${escapeHtml(
+          defaultExts.join(", ")
+        )}" required>
         <div class="actions"><button type="submit">링크 만들기</button></div>
       </form>
       <h2>활성 링크</h2>
       <table class="table">
         <thead><tr><th>요청</th><th>링크</th><th>총 용량 제한</th><th>확장자</th><th></th></tr></thead>
-        <tbody>${rows || `<tr><td colspan="5" class="muted">아직 만든 링크가 없어.</td></tr>`}</tbody>
+        <tbody>${
+          rows ||
+          `<tr><td colspan="5" class="muted">아직 만든 링크가 없어.</td></tr>`
+        }</tbody>
       </table>
     </section>
-  `));
+  `
+    )
+  );
+});
+
+app.get("/admin/requests/:slug/submissions", requireAdmin, async (req, res) => {
+  const db = await readDb();
+  const item = db.requests.find((request) => request.slug === req.params.slug);
+  if (!item) {
+    res
+      .status(404)
+      .send(
+        page(
+          "제출 내역 없음",
+          `<section class="panel"><h1>제출 내역 없음</h1><p class="muted">해당 링크를 찾을 수 없어.</p><a class="button" href="/admin">돌아가기</a></section>`
+        )
+      );
+    return;
+  }
+
+  const submissions = await readUploadMetadata(item.folderName);
+  const rows = submissions
+    .map((submission, index) => {
+      const files = Array.isArray(submission.files) ? submission.files : [];
+      const fileItems = files
+        .map((file) => {
+          const name = file.originalName || file.storedName || "파일";
+          const size = Number(file.size || 0);
+          const sizeText = size > 0 ? ` (${Math.round(size / 1024)} KB)` : "";
+          return `<li>${escapeHtml(name)}${escapeHtml(sizeText)}</li>`;
+        })
+        .join("");
+      return `<article class="submission">
+        <h3>제출 ${index + 1}</h3>
+        <dl>
+          <dt>연락처</dt><dd>${escapeHtml(submission.guestPhone || "-")}</dd>
+          <dt>저장 폴더</dt><dd>${escapeHtml(submission.folderName || "-")}</dd>
+          <dt>제출 시간</dt><dd>${escapeHtml(
+            formatDateTime(submission.uploadedAt)
+          )}</dd>
+          <dt>파일 수</dt><dd>${files.length}개</dd>
+        </dl>
+        <ul class="file-list-admin">${
+          fileItems || `<li class="muted">파일 기록이 없어.</li>`
+        }</ul>
+      </article>`;
+    })
+    .join("");
+
+  res.send(
+    page(
+      `${item.title} 제출 내역`,
+      `
+    <section class="panel">
+      <div class="actions" style="float:right">
+        <a class="button secondary" href="/admin">관리자 홈</a>
+      </div>
+      <h1>${escapeHtml(item.title)} 제출 내역</h1>
+      <p class="muted">저장 위치: ${escapeHtml(
+        path.join(uploadsDir, item.folderName)
+      )}</p>
+      <p class="muted">제출 정보 파일: 각 연락처/익명 폴더의 upload-metadata.jsonl</p>
+      ${
+        rows ||
+        `<div class="notice">아직 이 링크로 제출된 내역이 없어. 예전 업로드는 메타데이터가 없으면 여기에는 표시되지 않을 수 있어.</div>`
+      }
+    </section>
+  `
+    )
+  );
 });
 
 app.post("/admin/requests", requireAdmin, async (req, res) => {
@@ -294,11 +642,20 @@ app.post("/admin/requests", requireAdmin, async (req, res) => {
   const allowedExts = normalizeExts(req.body.allowedExts);
   const maxMb = Math.max(1, Math.min(20480, Number(req.body.maxMb || 500)));
   if (allowedExts.length === 0) {
-    res.status(400).send(page("입력 오류", `<section class="panel"><h1>입력 오류</h1><p class="muted">허용 확장자를 하나 이상 넣어야 해.</p><a class="button" href="/admin">돌아가기</a></section>`));
+    res
+      .status(400)
+      .send(
+        page(
+          "입력 오류",
+          `<section class="panel"><h1>입력 오류</h1><p class="muted">허용 확장자를 하나 이상 넣어야 해.</p><a class="button" href="/admin">돌아가기</a></section>`
+        )
+      );
     return;
   }
   const slug = crypto.randomBytes(16).toString("base64url");
-  const folderName = `${new Date().toISOString().slice(0, 10)}_${title}_${slug.slice(0, 6)}`;
+  const folderName = `${new Date()
+    .toISOString()
+    .slice(0, 10)}_${title}_${slug.slice(0, 6)}`;
   await fsp.mkdir(path.join(uploadsDir, folderName), { recursive: true });
   db.requests.push({
     slug,
@@ -306,7 +663,7 @@ app.post("/admin/requests", requireAdmin, async (req, res) => {
     folderName,
     maxBytes: maxMb * 1024 * 1024,
     allowedExts,
-    createdAt: new Date().toISOString()
+    createdAt: new Date().toISOString(),
   });
   await writeDb(db);
   res.redirect("/admin");
@@ -314,7 +671,9 @@ app.post("/admin/requests", requireAdmin, async (req, res) => {
 
 app.post("/admin/requests/:slug/delete", requireAdmin, async (req, res) => {
   const db = await readDb();
-  const item = db.requests.find((request) => request.slug === req.params.slug && !request.deletedAt);
+  const item = db.requests.find(
+    (request) => request.slug === req.params.slug && !request.deletedAt
+  );
   if (item) item.deletedAt = new Date().toISOString();
   await writeDb(db);
   res.redirect("/admin");
@@ -322,7 +681,9 @@ app.post("/admin/requests/:slug/delete", requireAdmin, async (req, res) => {
 
 async function findRequest(slug) {
   const db = await readDb();
-  return db.requests.find((request) => request.slug === slug && !request.deletedAt);
+  return db.requests.find(
+    (request) => request.slug === slug && !request.deletedAt
+  );
 }
 
 function uploadMiddleware(request) {
@@ -337,25 +698,40 @@ function uploadMiddleware(request) {
       }
     },
     filename: (req, file, cb) => {
-      const safe = sanitizeFileName(Buffer.from(file.originalname, "latin1").toString("utf8"));
-      cb(null, `${Date.now()}_${crypto.randomBytes(4).toString("hex")}_${safe}`);
-    }
+      const safe = sanitizeFileName(
+        Buffer.from(file.originalname, "latin1").toString("utf8")
+      );
+      cb(
+        null,
+        `${Date.now()}_${crypto.randomBytes(4).toString("hex")}_${safe}`
+      );
+    },
   });
 
   return multer({
     storage,
     limits: { files: 100 },
     fileFilter: (req, file, cb) => {
-      const ext = path.extname(file.originalname).replace(".", "").toLowerCase();
+      const ext = path
+        .extname(file.originalname)
+        .replace(".", "")
+        .toLowerCase();
       cb(null, request.allowedExts.includes(ext));
-    }
+    },
   }).array("files", 100);
 }
 
 app.get("/r/:slug", async (req, res) => {
   const request = await findRequest(req.params.slug);
   if (!request) {
-    res.status(404).send(page("링크 없음", `<section class="panel"><h1>링크가 없거나 삭제됐어</h1></section>`));
+    res
+      .status(404)
+      .send(
+        page(
+          "링크 없음",
+          `<section class="panel"><h1>링크가 없거나 삭제됐어</h1></section>`
+        )
+      );
     return;
   }
   res.send(await uploadPage(request));
@@ -364,7 +740,14 @@ app.get("/r/:slug", async (req, res) => {
 app.post("/r/:slug", async (req, res) => {
   const request = await findRequest(req.params.slug);
   if (!request) {
-    res.status(404).send(page("링크 없음", `<section class="panel"><h1>링크가 없거나 삭제됐어</h1></section>`));
+    res
+      .status(404)
+      .send(
+        page(
+          "링크 없음",
+          `<section class="panel"><h1>링크가 없거나 삭제됐어</h1></section>`
+        )
+      );
     return;
   }
   const upload = uploadMiddleware(request);
@@ -372,25 +755,87 @@ app.post("/r/:slug", async (req, res) => {
     if (error) {
       await removeFiles(req.files);
       const message = "업로드 중 오류가 났어. 파일 형식과 용량을 확인해줘.";
-      res.status(400).send(page("업로드 실패", `<section class="panel"><h1>업로드 실패</h1><div class="notice error">${escapeHtml(message)}</div><a class="button" href="/r/${escapeHtml(request.slug)}">다시 올리기</a></section>`));
+      if (wantsJson(req)) {
+        res.status(400).json({ ok: false, message });
+        return;
+      }
+      res
+        .status(400)
+        .send(
+          uploadResultPage(request, {
+            heading: "업로드 실패",
+            message,
+            isError: true,
+          })
+        );
       return;
     }
     try {
       const files = req.files || [];
-      const targetDir = path.join(uploadsDir, request.folderName);
-      const existingBytes = await directorySize(targetDir);
+      const guestPhone = cleanGuestField(req.body.guestPhone);
+      const requestDir = path.join(uploadsDir, request.folderName);
+      const folderName = submissionFolderName(guestPhone);
+      const targetDir = path.join(requestDir, folderName);
+      const existingBytes = await directorySize(requestDir);
       const incomingBytes = files.reduce((total, file) => total + file.size, 0);
       if (existingBytes + incomingBytes > request.maxBytes) {
         await removeFiles(files);
-        const remainMb = Math.max(0, Math.floor((request.maxBytes - existingBytes) / 1024 / 1024));
-        res.status(400).send(page("업로드 실패", `<section class="panel"><h1>업로드 실패</h1><div class="notice error">이 링크의 총 업로드 용량 제한을 넘었어. 남은 용량은 약 ${escapeHtml(remainMb)} MB야.</div><a class="button" href="/r/${escapeHtml(request.slug)}">다시 올리기</a></section>`));
+        const remainMb = Math.max(
+          0,
+          Math.floor((request.maxBytes - existingBytes) / 1024 / 1024)
+        );
+        if (wantsJson(req)) {
+          res
+            .status(400)
+            .json({
+              ok: false,
+              message: `업로드 가능한 용량을 넘었어요. 남은 용량은 약 ${remainMb} MB예요.`,
+            });
+          return;
+        }
+        res
+          .status(400)
+          .send(
+            uploadResultPage(request, {
+              heading: "업로드 실패",
+              message: `업로드 가능한 용량을 넘었어요. 남은 용량은 약 ${remainMb} MB예요.`,
+              isError: true,
+            })
+          );
         return;
       }
       await moveUploadedFiles(files, targetDir);
-      res.send(page("업로드 완료", `<section class="panel"><h1>업로드 완료</h1><div class="notice">${escapeHtml(files.length)}개 파일을 받았어.</div><a class="button" href="/r/${escapeHtml(request.slug)}">더 올리기</a></section>`));
+      await appendUploadMetadata(targetDir, { guestPhone, folderName, files });
+      if (wantsJson(req)) {
+        res.json({ ok: true, count: files.length });
+        return;
+      }
+      res.send(
+        uploadResultPage(request, {
+          heading: "감사합니다",
+          message: `${files.length}개의 파일 잘 받았습니다. 소중한 오늘을 함께 남겨주셔서 감사드립니다.`,
+        })
+      );
     } catch {
       await removeFiles(req.files);
-      res.status(500).send(page("업로드 실패", `<section class="panel"><h1>업로드 실패</h1><div class="notice error">파일을 저장하는 중 오류가 났어.</div><a class="button" href="/r/${escapeHtml(request.slug)}">다시 올리기</a></section>`));
+      if (wantsJson(req)) {
+        res
+          .status(500)
+          .json({
+            ok: false,
+            message: "파일을 저장하는 중 오류가 났어요. 다시 시도해 주세요.",
+          });
+        return;
+      }
+      res
+        .status(500)
+        .send(
+          uploadResultPage(request, {
+            heading: "업로드 실패",
+            message: "파일을 저장하는 중 오류가 났어요. 다시 시도해 주세요.",
+            isError: true,
+          })
+        );
     }
   });
 });