castad
/
o2o-castad-frontend
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

feature-BizInput
김성경 2026-06-02 16:02:24 +09:00
parent b18dd7aa4d
commit 8d7d0a74a6
9 changed files with 244 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
index.css
View File

@ -4113,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;
@ -4676,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;
@ -9265,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));
@ -12464,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;

136
src/components/BusinessNameInputModal.tsx
View File

@ -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,58 +49,86 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
if (e.key === 'Enter' && isValid) handleSubmit();
};
return (
<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>
// CitySelectModal의 selected prop용 — 도시명만 추출
const cityOnly = selectedCity.split(' ').pop() ?? '';
<div className="manual-modal-body">
<div className="manual-modal-field">
<label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
<input
type="text"
className="manual-modal-input"
placeholder={t('landing.hero.manualPlaceholderName')}
value={businessName}
onChange={e => setBusinessName(e.target.value)}
onKeyDown={handleKeyDown}
maxLength={50}
autoFocus
/>
return createPortal(
<>
<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>
<div className="manual-modal-field">
<label className="manual-modal-label">{t('landing.hero.manualLabelAddress')}</label>
<input
type="text"
className="manual-modal-input"
placeholder={t('landing.hero.manualPlaceholderAddress')}
value={address}
onChange={e => setAddress(e.target.value)}
onKeyDown={handleKeyDown}
maxLength={100}
/>
</div>
<div className="manual-modal-body">
<div className="manual-modal-field">
<label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
<input
type="text"
className="manual-modal-input"
placeholder={t('landing.hero.manualPlaceholderName')}
value={businessName}
onChange={e => setBusinessName(e.target.value)}
onKeyDown={handleKeyDown}
maxLength={50}
autoFocus
/>
</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 className="manual-modal-field">
<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.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
);
};

46
src/components/CitySelectModal.tsx
View File

@ -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) => {
onSelect(city === selected ? '' : city);
const handleSelect = (value: string) => {
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 => (
<button
key={r.label}
className={`city-modal-region-item ${r.cities.includes(selected) ? 'has-selected' : ''}`}
onClick={() => setActiveRegion(r.label)}
>
<span>{r.label}</span>
{r.cities.includes(selected) && <span className="city-modal-region-badge">{selected}</span>}
<span className="city-modal-arrow">›</span>
</button>
))}
{REGIONS.map(r => {
const isRegionSelected = selected === r.label;
const hasCitySelected = r.cities.includes(selected);
return (
<button
key={r.label}
className={`city-modal-region-item ${isRegionSelected || hasCitySelected ? 'has-selected' : ''}`}
onClick={() => setActiveRegion(r.label)}
>
<span>{r.label}</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>

6
src/components/Tutorial/TutorialOverlay.tsx
View File

@ -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;

9
src/components/Tutorial/tutorialSteps.ts
View File

@ -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',

13
src/locales/en.json
View File

@ -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",

13
src/locales/ko.json
View File

@ -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": "브랜드 에셋",

4
src/pages/Dashboard/UrlInputContent.tsx
View File

@ -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>

13
src/pages/Landing/HeroSection.tsx
View File

@ -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>