직접입력 구조 변경 및 튜토리얼 추가

index.css

@@ -931,6 +931,56 @@
   font-weight: 700;
 }
 
+/* 모바일 전용 사이드바 튜토리얼 토글 */
+.sidebar-tutorial-btn {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .sidebar-tutorial-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    border-radius: var(--radius-lg);
+    color: var(--color-text-gray-400);
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    transition: color var(--transition-normal), background-color var(--transition-normal);
+  }
+
+  .sidebar-tutorial-btn:hover {
+    color: var(--color-text-white);
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .sidebar-tutorial-btn.active {
+    color: var(--color-mint);
+  }
+
+  .sidebar-tutorial-label {
+    text-align: left;
+  }
+
+  .sidebar-tutorial-badge {
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  .sidebar-tutorial-badge.on {
+    color: var(--color-mint);
+  }
+
+  .sidebar-tutorial-badge.off {
+    color: var(--color-text-gray-400);
+  }
+}
+
 /* Mobile Menu Button */
 .mobile-menu-btn {
   position: fixed;
@@ -4063,6 +4113,27 @@
   cursor: not-allowed;
 }
 
+.url-input-manual-button {
+  margin: auto;
+  max-width: 400px;
+  width: 100%;
+  padding: 11px 16px;
+  border-radius: 12px;
+  border: 1px solid rgba(155, 202, 204, 0.35);
+  background: transparent;
+  color: rgba(155, 202, 204, 0.8);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.url-input-manual-button:hover {
+  border-color: #9BCACC;
+  color: #9BCACC;
+  background: rgba(155, 202, 204, 0.06);
+}
+
 .url-input-error {
   color: #F56565;
   font-family: 'Pretendard', sans-serif;
@@ -4626,6 +4697,26 @@
   }
 }
 
+.hero-manual-button {
+  width: 100%;
+  padding: 11px 16px;
+  height: 48px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.hero-manual-button:hover {
+  border-color: rgba(255, 255, 255, 0.6);
+  color: #fff;
+  background: rgba(255, 255, 255, 0.06);
+}
+
 .hero-button:hover {
   background-color: #9a5ef0;
   animation: none;
@@ -9215,6 +9306,15 @@
   font-weight: 600;
 }
 
+.city-modal-item-all {
+  border-style: dashed;
+  border-color: rgba(255,255,255,0.3);
+}
+
+.city-modal-item-all.active {
+  border-style: solid;
+}
+
 .ado2-contents-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -12301,6 +12401,12 @@
   border-color: rgba(166, 255, 234, 0.4);
 }
 
+@media (max-width: 767px) {
+  .tutorial-toggle-fab {
+    display: none;
+  }
+}
+
 .tutorial-toggle-badge {
   font-size: 10px;
   font-weight: 700;
@@ -12408,6 +12514,31 @@
   border-color: #9BCACC;
 }
 
+.manual-modal-city-btn {
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(155, 202, 204, 0.25);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+
+.manual-modal-city-btn.selected {
+  color: #fff;
+}
+
+.manual-modal-city-btn:hover {
+  border-color: #9BCACC;
+}
+
 .manual-modal-actions {
   display: flex;
   gap: 8px;

public/terms.html

@@ -41,7 +41,7 @@
     </ul>
 
     <h2>제 6 조 (외부 API 연동 및 데이터 활용)</h2>
-    <p>서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 특히 YouTube 서비스 연동을 위해 YouTube Data API(<code>youtube.readonly</code>, <code>youtube.upload</code>) 및 YouTube Analytics API(<code>yt-analytics.readonly</code>)를 사용하며, 이를 통해 수집·처리되는 데이터는 <a href="/privacy.html">개인정보처리방침</a>에 따라 관리됩니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.</p>
+    <p>서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 특히 YouTube 서비스 연동을 위해 YouTube Data API 및 YouTube Analytics API를 사용하며, 이를 통해 수집·처리되는 데이터는 <a href="/privacy.html">개인정보처리방침</a>에 따라 관리됩니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.</p>
     <p>YouTube API 서비스 이용과 관련하여 <a href="https://www.youtube.com/t/terms" target="_blank">YouTube 이용약관</a> 및 <a href="https://policies.google.com/privacy" target="_blank">Google 개인정보처리방침</a>이 함께 적용됩니다.</p>
 
     <h2>제 7 조 (AI 생성 콘텐츠의 권리)</h2>

src/components/BusinessNameInputModal.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import CitySelectModal, { REGIONS } from './CitySelectModal';
 
 interface BusinessNameInputModalProps {
   onClose: () => void;
@@ -9,7 +11,9 @@ interface BusinessNameInputModalProps {
 const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
   const { t } = useTranslation();
   const [businessName, setBusinessName] = useState('');
-  const [address, setAddress] = useState('');
+  const [selectedCity, setSelectedCity] = useState('');
+  const [detailAddress, setDetailAddress] = useState('');
+  const [isCityModalOpen, setIsCityModalOpen] = useState(false);
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -25,11 +29,19 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
     };
   }, [onClose]);
 
-  const isValid = businessName.trim().length > 0 && address.trim().length > 0;
+  const handleCitySelect = (city: string) => {
+    const region = REGIONS.find(r => r.cities.includes(city));
+    // 특별시/광역시는 도 이름 없이 도시명만 사용
+    const prefix = region && region.label !== '특별시 / 광역시' ? `${region.label} ` : '';
+    setSelectedCity(`${prefix}${city}`);
+  };
+
+  const isValid = businessName.trim().length > 0 && selectedCity.length > 0 && detailAddress.trim().length > 0;
 
   const handleSubmit = () => {
     if (!isValid) return;
-    onSubmit(businessName.trim(), address.trim());
+    const fullAddress = `${selectedCity} ${detailAddress.trim()}`;
+    onSubmit(businessName.trim(), fullAddress);
     onClose();
   };
 
@@ -37,7 +49,11 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
     if (e.key === 'Enter' && isValid) handleSubmit();
   };
 
-  return (
+  // CitySelectModal의 selected prop용 — 도시명만 추출
+  const cityOnly = selectedCity.split(' ').pop() ?? '';
+
+  return createPortal(
+    <>
       <div className="manual-modal-backdrop" onClick={onClose}>
         <div className="manual-modal" onClick={e => e.stopPropagation()}>
           <div className="manual-modal-header">
@@ -61,13 +77,27 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
             </div>
 
             <div className="manual-modal-field">
-            <label className="manual-modal-label">{t('landing.hero.manualLabelAddress')}</label>
+              <label className="manual-modal-label">{t('landing.hero.manualLabelRegion')}</label>
+              <button
+                type="button"
+                className={`manual-modal-city-btn ${selectedCity ? 'selected' : ''}`}
+                onClick={() => setIsCityModalOpen(true)}
+              >
+                <span>{selectedCity || t('landing.hero.manualPlaceholderRegion')}</span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="manual-modal-field">
+              <label className="manual-modal-label">{t('landing.hero.manualLabelDetail')}</label>
               <input
                 type="text"
                 className="manual-modal-input"
-              placeholder={t('landing.hero.manualPlaceholderAddress')}
+                placeholder={t('landing.hero.manualPlaceholderDetail')}
-              value={address}
+                value={detailAddress}
-              onChange={e => setAddress(e.target.value)}
+                onChange={e => setDetailAddress(e.target.value)}
                 onKeyDown={handleKeyDown}
                 maxLength={100}
               />
@@ -89,6 +119,16 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
           </div>
         </div>
       </div>
+
+      {isCityModalOpen && (
+        <CitySelectModal
+          selected={cityOnly}
+          onSelect={(city) => { handleCitySelect(city); setIsCityModalOpen(false); }}
+          onClose={() => setIsCityModalOpen(false)}
+        />
+      )}
+    </>,
+    document.body
   );
 };
 

src/components/CitySelectModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const REGIONS: { label: string; cities: string[] }[] = [
+export const REGIONS: { label: string; cities: string[] }[] = [
   {
     label: '특별시 / 광역시',
     cities: ['서울시', '부산시', '대구시', '인천시', '광주시', '대전시', '울산시', '세종시'],
@@ -88,10 +88,11 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
     return () => { document.body.style.overflow = ''; };
   }, []);
 
-  const cities = REGIONS.find(r => r.label === activeRegion)?.cities ?? [];
+  const activeEntry = REGIONS.find(r => r.label === activeRegion);
+  const cities = activeEntry?.cities ?? [];
 
-  const handleCityClick = (city: string) => {
+  const handleSelect = (value: string) => {
-    onSelect(city === selected ? '' : city);
+    onSelect(value === selected ? '' : value);
     onClose();
   };
 
@@ -112,25 +113,38 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
 
         {activeRegion === null ? (
           <div className="city-modal-grid">
-            {REGIONS.map(r => (
+            {REGIONS.map(r => {
+              const isRegionSelected = selected === r.label;
+              const hasCitySelected = r.cities.includes(selected);
+              return (
                 <button
                   key={r.label}
-                className={`city-modal-region-item ${r.cities.includes(selected) ? 'has-selected' : ''}`}
+                  className={`city-modal-region-item ${isRegionSelected || hasCitySelected ? 'has-selected' : ''}`}
                   onClick={() => setActiveRegion(r.label)}
                 >
                   <span>{r.label}</span>
-                {r.cities.includes(selected) && <span className="city-modal-region-badge">{selected}</span>}
+                  {isRegionSelected && <span className="city-modal-region-badge">전체</span>}
+                  {hasCitySelected && <span className="city-modal-region-badge">{selected}</span>}
                   <span className="city-modal-arrow">›</span>
                 </button>
-            ))}
+              );
+            })}
           </div>
         ) : (
           <div className="city-modal-item-wrap">
+            {activeRegion !== '특별시 / 광역시' && (
+              <button
+                className={`city-modal-item city-modal-item-all ${selected === activeRegion ? 'active' : ''}`}
+                onClick={() => handleSelect(activeRegion!)}
+              >
+                전체
+              </button>
+            )}
             {cities.map(city => (
               <button
                 key={city}
                 className={`city-modal-item ${selected === city ? 'active' : ''}`}
-                onClick={() => handleCityClick(city)}
+                onClick={() => handleSelect(city)}
               >
                 {city}
               </button>

src/components/Sidebar.tsx

@@ -38,9 +38,12 @@ interface SidebarProps {
   userInfo?: UserMeResponse | null;
   onLogout?: () => void;
   credits?: number | null;
+  tutorialAvailable?: boolean;
+  tutorialEnabled?: boolean;
+  onToggleTutorial?: () => void;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits }) => {
+const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits, tutorialAvailable, tutorialEnabled, onToggleTutorial }) => {
   const { t } = useTranslation();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -159,6 +162,24 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
         </div>
 
         <div className="sidebar-footer">
+          {/* 모바일 전용 튜토리얼 토글 */}
+          {tutorialAvailable && (
+            <button
+              className={`sidebar-tutorial-btn ${tutorialEnabled ? 'active' : ''}`}
+              onClick={() => onToggleTutorial?.()}
+              title={tutorialEnabled ? t('sidebar.tutorialOff') : t('sidebar.tutorialOn')}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 8v4l3 3"/>
+              </svg>
+              <span className="sidebar-tutorial-label">{t('sidebar.tutorial')}</span>
+              <span className={`sidebar-tutorial-badge ${tutorialEnabled ? 'on' : 'off'}`}>
+                {tutorialEnabled ? 'ON' : 'OFF'}
+              </span>
+            </button>
+          )}
+
           <div className="sidebar-language-switch">
             <LanguageSwitch isCollapsed={isCollapsed} />
           </div>

src/components/Tutorial/TutorialOverlay.tsx

@@ -143,7 +143,11 @@ const TutorialOverlay: React.FC<TutorialOverlayProps> = ({
     };
 
     const tryBind = (): boolean => {
-      const el = document.querySelector(hint.targetSelector) as HTMLElement | null;
+      const els = Array.from(document.querySelectorAll(hint.targetSelector));
+      const el = (els.find(e => {
+        const r = (e as HTMLElement).getBoundingClientRect();
+        return r.width > 0 && r.height > 0;
+      }) ?? els[0]) as HTMLElement | null;
       if (!el) return false;
       bindToTarget(el);
       return true;

src/components/Tutorial/tutorialSteps.ts

@@ -64,6 +64,15 @@ export const tutorialSteps: TutorialStepDef[] = [
         noSpotlight: true,
         variant: 'bubble',
       },
+      {
+        targetSelector: '.hero-manual-button',
+        titleKey: 'tutorial.landing.manual.title',
+        descriptionKey: 'tutorial.landing.manual.desc',
+        position: 'bottom',
+        clickToAdvance: false,
+        noSpotlight: true,
+        variant: 'bubble',
+      },
       {
         targetSelector: '.hero-button',
         titleKey: 'tutorial.landing.button.title',

src/locales/en.json

@@ -30,6 +30,7 @@
       "intro": { "title": "Welcome to ADO2 Tutorial", "desc": "We'll guide you through ADO2 step by step." },
       "dropdown": { "title": "Choose Search Type", "desc": "Select URL or business name from the dropdown." },
       "field": { "title": "Enter Search Term", "desc": "For URL, paste a Naver Maps share URL.\nFor business name, type the name and select from the list." },
+      "manual": { "title": "Direct Input", "desc": "You can also enter the business name and address manually to start analysis." },
       "button": { "title": "Start Brand Analysis", "desc": "Click the button to let AI start analyzing your brand." }
     },
     "asset": {
@@ -174,8 +175,12 @@
       "manualModalTitle": "Enter Business Info",
       "manualLabelName": "Business Name",
       "manualLabelAddress": "Address",
+      "manualLabelRegion": "Region",
+      "manualLabelDetail": "Detail Address",
       "manualPlaceholderName": "Enter the business name",
-      "manualPlaceholderAddress": "Enter the address"
+      "manualPlaceholderAddress": "Enter the address",
+      "manualPlaceholderRegion": "Select a region",
+      "manualPlaceholderDetail": "Enter detail address (e.g. Gangnam-gu Teheran-ro 123)"
     },
     "welcome": {
       "title": "Welcome to ADO2.AI",
@@ -211,8 +216,12 @@
     "manualModalTitle": "Enter Business Info",
     "manualLabelName": "Business Name",
     "manualLabelAddress": "Address",
+    "manualLabelRegion": "Region",
+    "manualLabelDetail": "Detail Address",
     "manualPlaceholderName": "Enter the business name",
-    "manualPlaceholderAddress": "Enter the address"
+    "manualPlaceholderAddress": "Enter the address",
+    "manualPlaceholderRegion": "Select a region",
+    "manualPlaceholderDetail": "Enter detail address (e.g. Gangnam-gu Teheran-ro 123)"
   },
   "assetManagement": {
     "title": "Brand Assets",

src/locales/ko.json

@@ -30,6 +30,7 @@
       "intro": { "title": "ADO2 튜토리얼 시작", "desc": "ADO2 사용 방법을 단계별로 안내해 드릴게요." },
       "dropdown": { "title": "검색 방식 선택", "desc": "드롭다운에서 URL 또는 업체명 중 원하는 방식을 선택하세요." },
       "field": { "title": "입력하기", "desc": "URL 방식이라면 네이버 지도 공유 URL,\n업체명 방식이라면 업체명을 입력하고 목록에서 선택하세요." },
+      "manual": { "title": "직접 입력", "desc": "업체명과 주소를 직접 입력해서 분석을 시작할 수도 있어요." },
       "button": { "title": "브랜드 분석 시작", "desc": "버튼을 누르면 AI가 브랜드를 분석하기 시작해요." }
     },
     "asset": {
@@ -174,8 +175,12 @@
       "manualModalTitle": "업체 정보 입력",
       "manualLabelName": "업체명",
       "manualLabelAddress": "주소",
+      "manualLabelRegion": "지역",
+      "manualLabelDetail": "상세 주소",
       "manualPlaceholderName": "업체명을 입력하세요.",
-      "manualPlaceholderAddress": "주소를 입력하세요."
+      "manualPlaceholderAddress": "주소를 입력하세요.",
+      "manualPlaceholderRegion": "지역을 선택하세요.",
+      "manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)"
     },
     "welcome": {
       "title": "ADO2.AI에 오신 것을 환영합니다.",
@@ -211,8 +216,12 @@
     "manualModalTitle": "업체 정보 입력",
     "manualLabelName": "업체명",
     "manualLabelAddress": "주소",
+    "manualLabelRegion": "지역",
+    "manualLabelDetail": "상세 주소",
     "manualPlaceholderName": "업체명을 입력하세요.",
-    "manualPlaceholderAddress": "주소를 입력하세요."
+    "manualPlaceholderAddress": "주소를 입력하세요.",
+    "manualPlaceholderRegion": "지역을 선택하세요.",
+    "manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)"
   },
   "assetManagement": {
     "title": "브랜드 에셋",

src/pages/Dashboard/GenerationFlow.tsx

@@ -632,7 +632,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     return (
       <div className="analysis-page-wrapper">
         {showSidebar && (
-          <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
+          <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
         )}
         <main className="analysis-page-main">
           {renderContent()}
@@ -645,7 +645,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   return (
     <div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
       {showSidebar && (
-        <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
+        <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
       )}
       {tutorialUI}
       <div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>

src/pages/Dashboard/UrlInputContent.tsx

@@ -325,6 +325,10 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
           <button type="button" onClick={handleAnalyzeClick} className="url-input-button">
             {t('landing.hero.analyzeButton')}
           </button>
+
+          <button type="button" className="url-input-manual-button" onClick={() => setIsManualModalOpen(true)}>
+            {t('urlInput.searchTypeManual')}
+          </button>
         </form>
       </div>
 

src/pages/Landing/HeroSection.tsx

@@ -521,6 +521,11 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
           <button onClick={handleStart} className="hero-button">
             {t('landing.hero.analyzeButton')}
           </button>
+
+          {/* 직접 입력 버튼 */}
+          <button type="button" className="hero-manual-button" onClick={() => setIsManualModalOpen(true)}>
+            {t('landing.hero.searchTypeManual')}
+          </button>
         </div>
       </div>
 
@@ -554,7 +559,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
         </button>
       )}
 
-      {tutorial.isActive && (
+      {tutorial.isActive && !isManualModalOpen && (
         <TutorialOverlay
           hints={tutorial.hints}
           currentIndex={tutorial.currentHintIndex}
@@ -568,7 +573,11 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
       {isManualModalOpen && (
         <BusinessNameInputModal
           onClose={() => setIsManualModalOpen(false)}
-          onSubmit={(businessName, address) => { setIsManualModalOpen(false); onManualInput?.(businessName, address); }}
+          onSubmit={(businessName, address) => {
+            if (tutorial.isActive) tutorial.nextHint();
+            setIsManualModalOpen(false);
+            onManualInput?.(businessName, address);
+          }}
         />
       )}
     </div>