랜딩 페이지 영상 변경

index.css

@@ -4113,27 +4113,6 @@
   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;
@@ -4697,26 +4676,6 @@
   }
 }
 
-.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;
@@ -9306,15 +9265,6 @@
   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));
@@ -12514,31 +12464,6 @@
   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;

src/components/BusinessNameInputModal.tsx

@@ -1,7 +1,5 @@
 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;
@@ -11,9 +9,7 @@ interface BusinessNameInputModalProps {
 const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
   const { t } = useTranslation();
   const [businessName, setBusinessName] = useState('');
-  const [selectedCity, setSelectedCity] = useState('');
+  const [address, setAddress] = useState('');
-  const [detailAddress, setDetailAddress] = useState('');
-  const [isCityModalOpen, setIsCityModalOpen] = useState(false);
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -29,19 +25,11 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
     };
   }, [onClose]);
 
-  const handleCitySelect = (city: string) => {
+  const isValid = businessName.trim().length > 0 && address.trim().length > 0;
-    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;
-    const fullAddress = `${selectedCity} ${detailAddress.trim()}`;
+    onSubmit(businessName.trim(), address.trim());
-    onSubmit(businessName.trim(), fullAddress);
     onClose();
   };
 
@@ -49,86 +37,58 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
     if (e.key === 'Enter' && isValid) handleSubmit();
   };
 
-  // CitySelectModal의 selected prop용 — 도시명만 추출
+  return (
-  const cityOnly = selectedCity.split(' ').pop() ?? '';
+    <div className="manual-modal-backdrop" onClick={onClose}>
+      <div className="manual-modal" onClick={e => e.stopPropagation()}>
+        <div className="manual-modal-header">
+          <span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>
+          <button className="manual-modal-close" onClick={onClose}>✕</button>
+        </div>
 
-  return createPortal(
+        <div className="manual-modal-body">
-    <>
+          <div className="manual-modal-field">
-      <div className="manual-modal-backdrop" onClick={onClose}>
+            <label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
-        <div className="manual-modal" onClick={e => e.stopPropagation()}>
+            <input
-          <div className="manual-modal-header">
+              type="text"
-            <span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>
+              className="manual-modal-input"
-            <button className="manual-modal-close" onClick={onClose}>✕</button>
+              placeholder={t('landing.hero.manualPlaceholderName')}
+              value={businessName}
+              onChange={e => setBusinessName(e.target.value)}
+              onKeyDown={handleKeyDown}
+              maxLength={50}
+              autoFocus
+            />
           </div>
 
-          <div className="manual-modal-body">
+          <div className="manual-modal-field">
-            <div className="manual-modal-field">
+            <label className="manual-modal-label">{t('landing.hero.manualLabelAddress')}</label>
-              <label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
+            <input
-              <input
+              type="text"
-                type="text"
+              className="manual-modal-input"
-                className="manual-modal-input"
+              placeholder={t('landing.hero.manualPlaceholderAddress')}
-                placeholder={t('landing.hero.manualPlaceholderName')}
+              value={address}
-                value={businessName}
+              onChange={e => setAddress(e.target.value)}
-                onChange={e => setBusinessName(e.target.value)}
+              onKeyDown={handleKeyDown}
-                onKeyDown={handleKeyDown}
+              maxLength={100}
-                maxLength={50}
+            />
-                autoFocus
+          </div>
-              />
-            </div>
 
-            <div className="manual-modal-field">
+          <div className="manual-modal-actions">
-              <label className="manual-modal-label">{t('landing.hero.manualLabelRegion')}</label>
+            <button type="button" className="manual-modal-cancel" onClick={onClose}>
-              <button
+              {t('common.cancel')}
-                type="button"
+            </button>
-                className={`manual-modal-city-btn ${selectedCity ? 'selected' : ''}`}
+            <button
-                onClick={() => setIsCityModalOpen(true)}
+              type="button"
-              >
+              className="manual-modal-submit"
-                <span>{selectedCity || t('landing.hero.manualPlaceholderRegion')}</span>
+              onClick={handleSubmit}
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              disabled={!isValid}
-                  <path d="M6 9l6 6 6-6" />
+            >
-                </svg>
+              {t('landing.hero.analyzeButton')}
-              </button>
+            </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.manualPlaceholderDetail')}
-                value={detailAddress}
-                onChange={e => setDetailAddress(e.target.value)}
-                onKeyDown={handleKeyDown}
-                maxLength={100}
-              />
-            </div>
-
-            <div className="manual-modal-actions">
-              <button type="button" className="manual-modal-cancel" onClick={onClose}>
-                {t('common.cancel')}
-              </button>
-              <button
-                type="button"
-                className="manual-modal-submit"
-                onClick={handleSubmit}
-                disabled={!isValid}
-              >
-                {t('landing.hero.analyzeButton')}
-              </button>
-            </div>
           </div>
         </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';
 
-export const REGIONS: { label: string; cities: string[] }[] = [
+const REGIONS: { label: string; cities: string[] }[] = [
   {
     label: '특별시 / 광역시',
     cities: ['서울시', '부산시', '대구시', '인천시', '광주시', '대전시', '울산시', '세종시'],
@@ -88,11 +88,10 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
     return () => { document.body.style.overflow = ''; };
   }, []);
 
-  const activeEntry = REGIONS.find(r => r.label === activeRegion);
+  const cities = REGIONS.find(r => r.label === activeRegion)?.cities ?? [];
-  const cities = activeEntry?.cities ?? [];
 
-  const handleSelect = (value: string) => {
+  const handleCityClick = (city: string) => {
-    onSelect(value === selected ? '' : value);
+    onSelect(city === selected ? '' : city);
     onClose();
   };
 
@@ -113,38 +112,25 @@ 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;
+              <button
-              const hasCitySelected = r.cities.includes(selected);
+                key={r.label}
-              return (
+                className={`city-modal-region-item ${r.cities.includes(selected) ? 'has-selected' : ''}`}
-                <button
+                onClick={() => setActiveRegion(r.label)}
-                  key={r.label}
+              >
-                  className={`city-modal-region-item ${isRegionSelected || hasCitySelected ? 'has-selected' : ''}`}
+                <span>{r.label}</span>
-                  onClick={() => setActiveRegion(r.label)}
+                {r.cities.includes(selected) && <span className="city-modal-region-badge">{selected}</span>}
-                >
+                <span className="city-modal-arrow">›</span>
-                  <span>{r.label}</span>
+              </button>
-                  {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={() => handleSelect(city)}
+                onClick={() => handleCityClick(city)}
               >
                 {city}
               </button>

src/components/Tutorial/TutorialOverlay.tsx

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

src/pages/Dashboard/UrlInputContent.tsx

@@ -325,10 +325,6 @@ 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/DisplaySection.tsx

@@ -11,9 +11,9 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
   const { t } = useTranslation();
   // YouTube Shorts 영상 ID들
   const videos = [
-    { id: 1, videoId: 'trnN0SQBTiI' },
+    { id: 1, videoId: 'M3iuPZ59X1I' },
-    { id: 2, videoId: '96HO497HsQI' },
+    { id: 2, videoId: 'JxWQxELDHSs' },
-    { id: 3, videoId: 'XziImxVICIk' },
+    { id: 3, videoId: 'c2ZdwhaB7S4' },
   ];
 
   return (

src/pages/Landing/HeroSection.tsx

@@ -521,11 +521,6 @@ 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>
 
@@ -559,7 +554,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
         </button>
       )}
 
-      {tutorial.isActive && !isManualModalOpen && (
+      {tutorial.isActive && (
         <TutorialOverlay
           hints={tutorial.hints}
           currentIndex={tutorial.currentHintIndex}
@@ -573,11 +568,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
       {isManualModalOpen && (
         <BusinessNameInputModal
           onClose={() => setIsManualModalOpen(false)}
-          onSubmit={(businessName, address) => {
+          onSubmit={(businessName, address) => { setIsManualModalOpen(false); onManualInput?.(businessName, address); }}
-            if (tutorial.isActive) tutorial.nextHint();
-            setIsManualModalOpen(false);
-            onManualInput?.(businessName, address);
-          }}
         />
       )}
     </div>