Merge pull request #82 from pirogramming/fix/data-linking

[Fix] 음료추가 직접입력 수정

Author: hyunnminn

config/settings.py

@@ -218,3 +218,20 @@ def _env_list(key, default):
 # collectstatic 수집 위치. 운영에서 nginx가 이 디렉토리를 정적 파일로 서빙한다.
 STATIC_ROOT = BASE_DIR / 'staticfiles'
 
+# 운영(DEBUG=False)에서는 파일명에 콘텐츠 해시를 붙여(예: base.a1b2c3.css) 배포마다
+# URL이 바뀌게 한다. nginx의 30일 캐시(expires 30d)와 맞물려도 재배포 시 즉시 반영되어
+# 강력 새로고침 없이 최신 정적 파일을 받게 된다. 로컬 개발은 collectstatic을 매번
+# 돌리지 않으므로 manifest 오류를 피하기 위해 기본 스토리지를 유지한다.
+STORAGES = {
+    "default": {
+        "BACKEND": "django.core.files.storage.FileSystemStorage",
+    },
+    "staticfiles": {
+        "BACKEND": (
+            "django.contrib.staticfiles.storage.ManifestStaticFilesStorage"
+            if not DEBUG
+            else "django.contrib.staticfiles.storage.StaticFilesStorage"
+        ),
+    },
+}
+

static/css/favorites.css

@@ -1,5 +1,10 @@
-.drink_brand, .drink_name, .drink_size, .drink_caffeine,
-.option_item span, .next_btn, .edit_btn {
+.drink_brand,
+.drink_name,
+.drink_size,
+.drink_caffeine,
+.option_item span,
+.next_btn,
+.edit_btn {
     font-family: var(--cd-font-body);
 }
 
@@ -30,7 +35,9 @@
     opacity: 0.35;
 }
 
-.drink_info1, .drink_info2, .drink_info3 {
+.drink_info1,
+.drink_info2,
+.drink_info3 {
     display: flex;
     align-items: center;
     gap: 16px;
@@ -162,6 +169,10 @@
     height: 150px;
 }
 
+.option_list_menu {
+    height: 120px;
+}
+
 .option_item {
     display: flex;
     flex-direction: column;
@@ -195,7 +206,7 @@
 
 .overlay_step--list .option_list {
     grid-template-columns: repeat(3, 1fr);
-    align-items: start; 
+    align-items: start;
 }
 
 .custom_form {
@@ -258,11 +269,17 @@
     color: var(--cd-brown-ink);
     background: #fff;
 }
-.option_search:focus { outline: none; border-color: var(--cd-brown-dark); }
+
+.option_search:focus {
+    outline: none;
+    border-color: var(--cd-brown-dark);
+}
 
 /* .option_item은 display:flex라 브라우저 기본 [hidden]{display:none}보다
    우선 적용돼(feed.js의 같은 이슈 참고) hidden 속성만으로는 안 감춰진다. */
-.option_item[hidden] { display: none; }
+.option_item[hidden] {
+    display: none;
+}
 
 .overlay_step--list .option_item {
     padding: 12px 10px;
@@ -325,7 +342,9 @@
         height: 110px;
     }
 
-    .drink_info1, .drink_info2, .drink_info3 {
+    .drink_info1,
+    .drink_info2,
+    .drink_info3 {
         padding: 8px 18px;
         gap: 12px;
     }
@@ -398,7 +417,9 @@
         height: 90px;
     }
 
-    .drink_info1, .drink_info2, .drink_info3 {
+    .drink_info1,
+    .drink_info2,
+    .drink_info3 {
         padding: 8px 14px;
         gap: 10px;
     }

static/js/favorites.js

@@ -4,6 +4,11 @@
  * POST .../from-preset/(추가) 또는 PATCH .../<id>/(교체)로 저장한다.
  * 브랜드 단계에서 "직접입력"을 고르면 메뉴/사이즈 프리셋 단계 대신 자유 입력
  * 폼으로 가고, POST/PATCH .../drinks/(직접입력 전용 엔드포인트)로 저장한다.
+ * 메뉴(음료명) 단계에서 "직접입력"을 고르면(브랜드는 카탈로그 유지) 이름과
+ * 카페인량만 직접 입력받고, 사이즈는 그 브랜드의 기존 사이즈 목록을 그대로
+ * 보여준다 — DrinkSerializer가 브랜드가 custom이 아니면 사이즈를 카탈로그
+ * 라벨로만 허용하기 때문에(자유 입력 사이즈는 서버에서 거부된다) 이 단계의
+ * 사이즈는 항상 카탈로그에서 골라야 한다.
  */
 (function () {
   const listEl = document.getElementById('favorite-drinks-list');
@@ -15,6 +20,7 @@
     type: overlay.querySelector('[data-step="1"]'),
     brand: overlay.querySelector('[data-step="2"]'),
     menu: overlay.querySelector('[data-step="3"]'),
+    menuCustom: overlay.querySelector('[data-step="menu-custom"]'),
     size: overlay.querySelector('[data-step="4"]'),
     custom: overlay.querySelector('[data-step="custom"]'),
     icon: overlay.querySelector('[data-step="5"]'),
@@ -26,10 +32,16 @@
   const customCaffeineInput = document.getElementById('custom-caffeine-input');
   const customNextBtn = document.getElementById('wizard-custom-next-btn');
 
+  const customMenuNameInput = document.getElementById('custom-menu-name-input');
+  const customMenuCaffeineInput = document.getElementById('custom-menu-caffeine-input');
+  const menuCustomNextBtn = document.getElementById('wizard-menu-custom-next-btn');
+
+  const MENU_CUSTOM_VALUE = '__custom__'; // 실제 메뉴명과 겹치지 않도록 예약된 값
+
   let wizard = {
     mode: 'add', editingId: null,
     type: null, brand: null, name: null, size: null, iconKey: null,
-    customBrandName: '', caffeineMg: null,
+    nameIsCustom: false, customBrandName: '', caffeineMg: null,
     presetsForType: [],
   };
 
@@ -133,7 +145,7 @@
     wizard = {
       mode, editingId: editingId ?? null,
       type: null, brand: null, name: null, size: null, iconKey: null,
-      customBrandName: '', caffeineMg: null,
+      nameIsCustom: false, customBrandName: '', caffeineMg: null,
       presetsForType: [],
     };
     steps.type.querySelectorAll('.option_item').forEach((el) => el.classList.remove('is-selected'));
@@ -145,6 +157,8 @@
     customNameInput.value = '';
     customSizeInput.value = '';
     customCaffeineInput.value = '';
+    customMenuNameInput.value = '';
+    customMenuCaffeineInput.value = '';
     showStep('type');
     overlay.style.display = 'flex';
   }
@@ -160,7 +174,7 @@
     const seen = new Map();
     wizard.presetsForType.forEach((p) => { if (!seen.has(p.brand)) seen.set(p.brand, p.brand_name); });
     const options = [...seen.entries()].map(([value, label]) => ({ value, label }));
-    options.push({ value: 'custom', label: '직접입력' });
+    options.unshift({ value: 'custom', label: '직접입력' });
     renderOptionList(steps.brand, options, (value) => {
       wizard.brand = value;
     });
@@ -170,8 +184,11 @@
     const names = [...new Set(
       wizard.presetsForType.filter((p) => p.brand === wizard.brand).map((p) => p.name)
     )];
-    renderOptionList(steps.menu, names.map((n) => ({ value: n, label: n })), (value) => {
-      wizard.name = value;
+    const options = names.map((n) => ({ value: n, label: n }));
+    options.unshift({ value: MENU_CUSTOM_VALUE, label: '직접입력' });
+    renderOptionList(steps.menu, options, (value) => {
+      wizard.nameIsCustom = value === MENU_CUSTOM_VALUE;
+      wizard.name = wizard.nameIsCustom ? null : value;
     });
     // 새로 그린 목록이라 전부 보이는 상태 — 검색창만 비워서 이전 검색어가 안 남게 한다.
     if (menuSearchInput) menuSearchInput.value = '';
@@ -182,6 +199,7 @@
   menuSearchInput?.addEventListener('input', () => {
     const q = menuSearchInput.value.trim().toLowerCase();
     steps.menu.querySelectorAll('.option_item').forEach((item) => {
+      if (item.dataset.value === MENU_CUSTOM_VALUE) return; // "직접입력"은 검색과 무관하게 항상 노출
       item.hidden = q.length > 0 && !item.textContent.trim().toLowerCase().includes(q);
     });
   });
@@ -195,6 +213,20 @@
     );
   }
 
+  // 메뉴가 직접입력이면 특정 이름에 매칭되는 프리셋이 없으므로, 사이즈는 그
+  // 브랜드가 취급하는 사이즈 라벨 전체(이름 무관)에서 고른다. 카페인량은
+  // 프리셋에 없으니 라벨에 mg를 붙이지 않는다 — 사용자가 직접 입력한 값을 쓴다.
+  function loadSizeOptionsForBrand() {
+    const sizes = [...new Set(
+      wizard.presetsForType.filter((p) => p.brand === wizard.brand).map((p) => p.size)
+    )].filter(Boolean);
+    renderOptionList(
+      steps.size,
+      sizes.map((s) => ({ value: s, label: s })),
+      (value) => { wizard.size = value; }
+    );
+  }
+
   function loadIconOptions() {
     const options = window.CD_DRINK_ICON_OPTIONS[wizard.type] || window.CD_DRINK_ICON_OPTIONS.other;
     renderIconOptionList(steps.icon, options, (key) => {
@@ -204,11 +236,15 @@
 
   async function saveDrink() {
     let res;
-    if (wizard.brand === 'custom') {
+    if (wizard.brand === 'custom' || wizard.nameIsCustom) {
+      // 브랜드 전체 직접입력이거나, 브랜드는 카탈로그인데 메뉴명만 직접입력인 경우.
+      // 두 경우 다 카페인량을 서버 프리셋에서 조회할 수 없으므로 사용자가 입력한
+      // 값을 그대로 쓴다. custom_brand_name은 brand=custom일 때만 의미가 있다
+      // (DrinkSerializer.validate가 그 외엔 어차피 빈 값으로 정리하지만 명시한다).
       const payload = {
         type: wizard.type,
-        brand: 'custom',
-        custom_brand_name: wizard.customBrandName,
+        brand: wizard.brand,
+        custom_brand_name: wizard.brand === 'custom' ? wizard.customBrandName : '',
         name: wizard.name,
         size: wizard.size,
         caffeine_mg: wizard.caffeineMg,
@@ -293,11 +329,29 @@
   });
 
   steps.menu.querySelector('.next_btn').addEventListener('click', () => {
-    if (!wizard.name) { alert('메뉴를 선택해주세요.'); return; }
+    if (!wizard.name && !wizard.nameIsCustom) { alert('메뉴를 선택해주세요.'); return; }
+    if (wizard.nameIsCustom) {
+      showStep('menuCustom');
+      return;
+    }
     loadSizeOptions();
     showStep('size');
   });
 
+  menuCustomNextBtn.addEventListener('click', () => {
+    const name = customMenuNameInput.value.trim();
+    const caffeine = Number(customMenuCaffeineInput.value);
+    if (!name) { alert('음료 이름을 입력해주세요.'); return; }
+    if (!customMenuCaffeineInput.value || !(caffeine > 0 && caffeine <= 1000)) {
+      alert('카페인 함량을 1~1000mg 사이로 입력해주세요.');
+      return;
+    }
+    wizard.name = name;
+    wizard.caffeineMg = caffeine;
+    loadSizeOptionsForBrand();
+    showStep('size');
+  });
+
   steps.size.querySelector('.next_btn').addEventListener('click', () => {
     if (!wizard.size) { alert('사이즈를 선택해주세요.'); return; }
     loadIconOptions();

templates/diary/favorites.html

@@ -53,10 +53,27 @@ <h3>어떤 브랜드의 음료인가요?</h3>
         <div class="overlay_step overlay_step--list" data-step="3" style="display:none;">
             <h3>어떤 메뉴인가요?</h3>
             <input type="text" class="option_search" data-option-search placeholder="메뉴 검색" autocomplete="off">
-            <div class="option_list"></div>
+            <div class="option_list option_list_menu"></div>
             <button type="button" class="next_btn" data-next="size">다음</button>
         </div>
 
+        <!-- 3단계에서 "직접입력"을 고르면 여기로 온다. 브랜드는 카탈로그 그대로라
+             사이즈는 다음 단계(4단계)에서 그 브랜드의 기존 사이즈 목록을 그대로 보여준다. -->
+        <div class="overlay_step overlay_step--custom" data-step="menu-custom" style="display:none;">
+            <h3>음료 정보를 입력해주세요</h3>
+            <div class="custom_form">
+                <label>
+                    <span>음료 이름</span>
+                    <input type="text" id="custom-menu-name-input" placeholder="예: 아메리카노" maxlength="100" autocomplete="off">
+                </label>
+                <label>
+                    <span>카페인 함량 (mg)</span>
+                    <input type="number" id="custom-menu-caffeine-input" placeholder="예: 150" min="1" max="1000" inputmode="numeric">
+                </label>
+            </div>
+            <button type="button" class="next_btn" id="wizard-menu-custom-next-btn">다음</button>
+        </div>
+
         <!-- 4단계: 사이즈 선택 -->
         <div class="overlay_step overlay_step--list" data-step="4" style="display:none;">
             <h3>어떤 사이즈로 마시나요?</h3>