Merge pull request #77 from pirogramming/fix/custom-beverage

fix: 음료입력창 직접입력필드 추가

Author: hyunnminn

static/css/favorites.css

@@ -198,6 +198,53 @@
     align-items: start; 
 }
 
+.custom_form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    max-width: 320px;
+    margin: 0 auto;
+    /* 모달 배경(카드 svg)이 고정 비율이라, 폼이 카드 영역보다 커지면
+       카드 밖으로 삐져나간다. 카드 안에서 자체 스크롤되도록 높이를 제한한다. */
+    max-height: 200px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+.custom_form::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom_form::-webkit-scrollbar-thumb {
+    background-color: var(--cd-brown-light);
+    border-radius: 10px;
+}
+
+.custom_form label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-size: 14px;
+    color: var(--cd-brown-ink);
+    text-align: left;
+}
+
+.custom_form input {
+    padding: 8px 14px;
+    border: 1px solid var(--cd-brown-light);
+    border-radius: 20px;
+    font-size: 14px;
+    font-family: var(--cd-font-body);
+    color: var(--cd-brown-ink);
+    background: #fff;
+}
+
+.custom_form input:focus {
+    outline: none;
+    border-color: var(--cd-brown-dark);
+}
+
 .option_search {
     display: block;
     width: 100%;
@@ -392,6 +439,10 @@
         grid-template-columns: repeat(2, 1fr);
     }
 
+    .custom_form {
+        max-width: 100%;
+    }
+
     .option_item img {
         width: 50px;
         height: 50px;

static/js/favorites.js

@@ -2,6 +2,8 @@
  * favorites.js — 즐겨찾는 음료(최대 3개) 목록을 GET /users/me/drinks/로 채우고,
  * "추가"/"수정" 오버레이(종류→브랜드→메뉴→사이즈→아이콘)로 선택한 프리셋을
  * POST .../from-preset/(추가) 또는 PATCH .../<id>/(교체)로 저장한다.
+ * 브랜드 단계에서 "직접입력"을 고르면 메뉴/사이즈 프리셋 단계 대신 자유 입력
+ * 폼으로 가고, POST/PATCH .../drinks/(직접입력 전용 엔드포인트)로 저장한다.
  */
 (function () {
   const listEl = document.getElementById('favorite-drinks-list');
@@ -14,12 +16,20 @@
     brand: overlay.querySelector('[data-step="2"]'),
     menu: overlay.querySelector('[data-step="3"]'),
     size: overlay.querySelector('[data-step="4"]'),
+    custom: overlay.querySelector('[data-step="custom"]'),
     icon: overlay.querySelector('[data-step="5"]'),
   };
 
+  const customBrandInput = document.getElementById('custom-brand-input');
+  const customNameInput = document.getElementById('custom-name-input');
+  const customSizeInput = document.getElementById('custom-size-input');
+  const customCaffeineInput = document.getElementById('custom-caffeine-input');
+  const customNextBtn = document.getElementById('wizard-custom-next-btn');
+
   let wizard = {
     mode: 'add', editingId: null,
     type: null, brand: null, name: null, size: null, iconKey: null,
+    customBrandName: '', caffeineMg: null,
     presetsForType: [],
   };
 
@@ -123,13 +133,18 @@
     wizard = {
       mode, editingId: editingId ?? null,
       type: null, brand: null, name: null, size: null, iconKey: null,
+      customBrandName: '', caffeineMg: null,
       presetsForType: [],
     };
     steps.type.querySelectorAll('.option_item').forEach((el) => el.classList.remove('is-selected'));
     clearOptionList(steps.brand);
     clearOptionList(steps.menu);
     clearOptionList(steps.size);
     clearOptionList(steps.icon);
+    customBrandInput.value = '';
+    customNameInput.value = '';
+    customSizeInput.value = '';
+    customCaffeineInput.value = '';
     showStep('type');
     overlay.style.display = 'flex';
   }
@@ -144,7 +159,9 @@
 
     const seen = new Map();
     wizard.presetsForType.forEach((p) => { if (!seen.has(p.brand)) seen.set(p.brand, p.brand_name); });
-    renderOptionList(steps.brand, [...seen.entries()].map(([value, label]) => ({ value, label })), (value) => {
+    const options = [...seen.entries()].map(([value, label]) => ({ value, label }));
+    options.push({ value: 'custom', label: '직접입력' });
+    renderOptionList(steps.brand, options, (value) => {
       wizard.brand = value;
     });
   }
@@ -187,7 +204,21 @@
 
   async function saveDrink() {
     let res;
-    if (wizard.mode === 'add') {
+    if (wizard.brand === 'custom') {
+      const payload = {
+        type: wizard.type,
+        brand: 'custom',
+        custom_brand_name: wizard.customBrandName,
+        name: wizard.name,
+        size: wizard.size,
+        caffeine_mg: wizard.caffeineMg,
+        icon_key: wizard.iconKey,
+        is_favorite: true,
+      };
+      res = wizard.mode === 'add'
+        ? await apiFetch('/users/me/drinks/', { method: 'POST', body: JSON.stringify(payload) })
+        : await apiFetch(`/users/me/drinks/${wizard.editingId}/`, { method: 'PATCH', body: JSON.stringify(payload) });
+    } else if (wizard.mode === 'add') {
       res = await apiFetch('/users/me/drinks/from-preset/', {
         method: 'POST',
         body: JSON.stringify({
@@ -237,10 +268,30 @@
 
   steps.brand.querySelector('.next_btn').addEventListener('click', () => {
     if (!wizard.brand) { alert('브랜드를 선택해주세요.'); return; }
+    if (wizard.brand === 'custom') {
+      showStep('custom');
+      return;
+    }
     loadMenuOptions();
     showStep('menu');
   });
 
+  customNextBtn.addEventListener('click', () => {
+    const name = customNameInput.value.trim();
+    const caffeine = Number(customCaffeineInput.value);
+    if (!name) { alert('음료 이름을 입력해주세요.'); return; }
+    if (!customCaffeineInput.value || !(caffeine > 0 && caffeine <= 1000)) {
+      alert('카페인 함량을 1~1000mg 사이로 입력해주세요.');
+      return;
+    }
+    wizard.customBrandName = customBrandInput.value.trim();
+    wizard.name = name;
+    wizard.size = customSizeInput.value.trim();
+    wizard.caffeineMg = caffeine;
+    loadIconOptions();
+    showStep('icon');
+  });
+
   steps.menu.querySelector('.next_btn').addEventListener('click', () => {
     if (!wizard.name) { alert('메뉴를 선택해주세요.'); return; }
     loadSizeOptions();

templates/diary/favorites.html

@@ -64,6 +64,30 @@ <h3>어떤 사이즈로 마시나요?</h3>
             <button type="button" class="next_btn" data-next="icon">다음</button>
         </div>
 
+        <!-- 2단계에서 "직접입력"을 고르면 메뉴/사이즈 프리셋 단계를 건너뛰고 여기로 온다 -->
+        <div class="overlay_step overlay_step--custom" data-step="custom" style="display:none;">
+            <h3>음료 정보를 입력해주세요</h3>
+            <div class="custom_form">
+                <label>
+                    <span>브랜드명 (선택)</span>
+                    <input type="text" id="custom-brand-input" placeholder="예: GS25" maxlength="100" autocomplete="off">
+                </label>
+                <label>
+                    <span>음료 이름</span>
+                    <input type="text" id="custom-name-input" placeholder="예: 아메리카노" maxlength="100" autocomplete="off">
+                </label>
+                <label>
+                    <span>사이즈 (선택)</span>
+                    <input type="text" id="custom-size-input" placeholder="예: M" maxlength="50" autocomplete="off">
+                </label>
+                <label>
+                    <span>카페인 함량 (mg)</span>
+                    <input type="number" id="custom-caffeine-input" placeholder="예: 150" min="1" max="1000" inputmode="numeric">
+                </label>
+            </div>
+            <button type="button" class="next_btn" id="wizard-custom-next-btn">다음</button>
+        </div>
+
         <!-- 5단계: 아이콘 선택 -->
         <div class="overlay_step overlay_step--icons" data-step="5" style="display:none;">
             <h3>아이콘을 선택하세요</h3>