Compare commits
2 Commits
7f1e2b83a9
...
8d7d0a74a6
| Author | SHA1 | Date |
|---|---|---|
|
|
8d7d0a74a6 | |
|
|
b18dd7aa4d |
131
index.css
131
index.css
|
|
@ -931,6 +931,56 @@
|
||||||
font-weight: 700;
|
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 Button */
|
||||||
.mobile-menu-btn {
|
.mobile-menu-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -4063,6 +4113,27 @@
|
||||||
cursor: not-allowed;
|
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 {
|
.url-input-error {
|
||||||
color: #F56565;
|
color: #F56565;
|
||||||
font-family: 'Pretendard', sans-serif;
|
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 {
|
.hero-button:hover {
|
||||||
background-color: #9a5ef0;
|
background-color: #9a5ef0;
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
@ -9215,6 +9306,15 @@
|
||||||
font-weight: 600;
|
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 {
|
.ado2-contents-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
|
@ -12301,6 +12401,12 @@
|
||||||
border-color: rgba(166, 255, 234, 0.4);
|
border-color: rgba(166, 255, 234, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.tutorial-toggle-fab {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tutorial-toggle-badge {
|
.tutorial-toggle-badge {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -12408,6 +12514,31 @@
|
||||||
border-color: #9BCACC;
|
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 {
|
.manual-modal-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>제 6 조 (외부 API 연동 및 데이터 활용)</h2>
|
<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>
|
<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>
|
<h2>제 7 조 (AI 생성 콘텐츠의 권리)</h2>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import CitySelectModal, { REGIONS } from './CitySelectModal';
|
||||||
|
|
||||||
interface BusinessNameInputModalProps {
|
interface BusinessNameInputModalProps {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
|
@ -9,7 +11,9 @@ interface BusinessNameInputModalProps {
|
||||||
const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
|
const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [businessName, setBusinessName] = useState('');
|
const [businessName, setBusinessName] = useState('');
|
||||||
const [address, setAddress] = useState('');
|
const [selectedCity, setSelectedCity] = useState('');
|
||||||
|
const [detailAddress, setDetailAddress] = useState('');
|
||||||
|
const [isCityModalOpen, setIsCityModalOpen] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
@ -25,11 +29,19 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
|
||||||
};
|
};
|
||||||
}, [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 = () => {
|
const handleSubmit = () => {
|
||||||
if (!isValid) return;
|
if (!isValid) return;
|
||||||
onSubmit(businessName.trim(), address.trim());
|
const fullAddress = `${selectedCity} ${detailAddress.trim()}`;
|
||||||
|
onSubmit(businessName.trim(), fullAddress);
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -37,58 +49,86 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
|
||||||
if (e.key === 'Enter' && isValid) handleSubmit();
|
if (e.key === 'Enter' && isValid) handleSubmit();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
// CitySelectModal의 selected prop용 — 도시명만 추출
|
||||||
<div className="manual-modal-backdrop" onClick={onClose}>
|
const cityOnly = selectedCity.split(' ').pop() ?? '';
|
||||||
<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-body">
|
return createPortal(
|
||||||
<div className="manual-modal-field">
|
<>
|
||||||
<label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
|
<div className="manual-modal-backdrop" onClick={onClose}>
|
||||||
<input
|
<div className="manual-modal" onClick={e => e.stopPropagation()}>
|
||||||
type="text"
|
<div className="manual-modal-header">
|
||||||
className="manual-modal-input"
|
<span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>
|
||||||
placeholder={t('landing.hero.manualPlaceholderName')}
|
<button className="manual-modal-close" onClick={onClose}>✕</button>
|
||||||
value={businessName}
|
|
||||||
onChange={e => setBusinessName(e.target.value)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
maxLength={50}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="manual-modal-field">
|
<div className="manual-modal-body">
|
||||||
<label className="manual-modal-label">{t('landing.hero.manualLabelAddress')}</label>
|
<div className="manual-modal-field">
|
||||||
<input
|
<label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
|
||||||
type="text"
|
<input
|
||||||
className="manual-modal-input"
|
type="text"
|
||||||
placeholder={t('landing.hero.manualPlaceholderAddress')}
|
className="manual-modal-input"
|
||||||
value={address}
|
placeholder={t('landing.hero.manualPlaceholderName')}
|
||||||
onChange={e => setAddress(e.target.value)}
|
value={businessName}
|
||||||
onKeyDown={handleKeyDown}
|
onChange={e => setBusinessName(e.target.value)}
|
||||||
maxLength={100}
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
maxLength={50}
|
||||||
</div>
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="manual-modal-actions">
|
<div className="manual-modal-field">
|
||||||
<button type="button" className="manual-modal-cancel" onClick={onClose}>
|
<label className="manual-modal-label">{t('landing.hero.manualLabelRegion')}</label>
|
||||||
{t('common.cancel')}
|
<button
|
||||||
</button>
|
type="button"
|
||||||
<button
|
className={`manual-modal-city-btn ${selectedCity ? 'selected' : ''}`}
|
||||||
type="button"
|
onClick={() => setIsCityModalOpen(true)}
|
||||||
className="manual-modal-submit"
|
>
|
||||||
onClick={handleSubmit}
|
<span>{selectedCity || t('landing.hero.manualPlaceholderRegion')}</span>
|
||||||
disabled={!isValid}
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
>
|
<path d="M6 9l6 6 6-6" />
|
||||||
{t('landing.hero.analyzeButton')}
|
</svg>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
{isCityModalOpen && (
|
||||||
|
<CitySelectModal
|
||||||
|
selected={cityOnly}
|
||||||
|
onSelect={(city) => { handleCitySelect(city); setIsCityModalOpen(false); }}
|
||||||
|
onClose={() => setIsCityModalOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>,
|
||||||
|
document.body
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
const REGIONS: { label: string; cities: string[] }[] = [
|
export const REGIONS: { label: string; cities: string[] }[] = [
|
||||||
{
|
{
|
||||||
label: '특별시 / 광역시',
|
label: '특별시 / 광역시',
|
||||||
cities: ['서울시', '부산시', '대구시', '인천시', '광주시', '대전시', '울산시', '세종시'],
|
cities: ['서울시', '부산시', '대구시', '인천시', '광주시', '대전시', '울산시', '세종시'],
|
||||||
|
|
@ -88,10 +88,11 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
|
||||||
return () => { document.body.style.overflow = ''; };
|
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();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -112,25 +113,38 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
|
||||||
|
|
||||||
{activeRegion === null ? (
|
{activeRegion === null ? (
|
||||||
<div className="city-modal-grid">
|
<div className="city-modal-grid">
|
||||||
{REGIONS.map(r => (
|
{REGIONS.map(r => {
|
||||||
<button
|
const isRegionSelected = selected === r.label;
|
||||||
key={r.label}
|
const hasCitySelected = r.cities.includes(selected);
|
||||||
className={`city-modal-region-item ${r.cities.includes(selected) ? 'has-selected' : ''}`}
|
return (
|
||||||
onClick={() => setActiveRegion(r.label)}
|
<button
|
||||||
>
|
key={r.label}
|
||||||
<span>{r.label}</span>
|
className={`city-modal-region-item ${isRegionSelected || hasCitySelected ? 'has-selected' : ''}`}
|
||||||
{r.cities.includes(selected) && <span className="city-modal-region-badge">{selected}</span>}
|
onClick={() => setActiveRegion(r.label)}
|
||||||
<span className="city-modal-arrow">›</span>
|
>
|
||||||
</button>
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<div className="city-modal-item-wrap">
|
<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 => (
|
{cities.map(city => (
|
||||||
<button
|
<button
|
||||||
key={city}
|
key={city}
|
||||||
className={`city-modal-item ${selected === city ? 'active' : ''}`}
|
className={`city-modal-item ${selected === city ? 'active' : ''}`}
|
||||||
onClick={() => handleCityClick(city)}
|
onClick={() => handleSelect(city)}
|
||||||
>
|
>
|
||||||
{city}
|
{city}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -38,9 +38,12 @@ interface SidebarProps {
|
||||||
userInfo?: UserMeResponse | null;
|
userInfo?: UserMeResponse | null;
|
||||||
onLogout?: () => void;
|
onLogout?: () => void;
|
||||||
credits?: number | null;
|
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 { t } = useTranslation();
|
||||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||||
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
||||||
|
|
@ -159,6 +162,24 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="sidebar-footer">
|
<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">
|
<div className="sidebar-language-switch">
|
||||||
<LanguageSwitch isCollapsed={isCollapsed} />
|
<LanguageSwitch isCollapsed={isCollapsed} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -143,7 +143,11 @@ const TutorialOverlay: React.FC<TutorialOverlayProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const tryBind = (): boolean => {
|
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;
|
if (!el) return false;
|
||||||
bindToTarget(el);
|
bindToTarget(el);
|
||||||
return true;
|
return true;
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,15 @@ export const tutorialSteps: TutorialStepDef[] = [
|
||||||
noSpotlight: true,
|
noSpotlight: true,
|
||||||
variant: 'bubble',
|
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',
|
targetSelector: '.hero-button',
|
||||||
titleKey: 'tutorial.landing.button.title',
|
titleKey: 'tutorial.landing.button.title',
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
"intro": { "title": "Welcome to ADO2 Tutorial", "desc": "We'll guide you through ADO2 step by step." },
|
"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." },
|
"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." },
|
"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." }
|
"button": { "title": "Start Brand Analysis", "desc": "Click the button to let AI start analyzing your brand." }
|
||||||
},
|
},
|
||||||
"asset": {
|
"asset": {
|
||||||
|
|
@ -174,8 +175,12 @@
|
||||||
"manualModalTitle": "Enter Business Info",
|
"manualModalTitle": "Enter Business Info",
|
||||||
"manualLabelName": "Business Name",
|
"manualLabelName": "Business Name",
|
||||||
"manualLabelAddress": "Address",
|
"manualLabelAddress": "Address",
|
||||||
|
"manualLabelRegion": "Region",
|
||||||
|
"manualLabelDetail": "Detail Address",
|
||||||
"manualPlaceholderName": "Enter the business name",
|
"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": {
|
"welcome": {
|
||||||
"title": "Welcome to ADO2.AI",
|
"title": "Welcome to ADO2.AI",
|
||||||
|
|
@ -211,8 +216,12 @@
|
||||||
"manualModalTitle": "Enter Business Info",
|
"manualModalTitle": "Enter Business Info",
|
||||||
"manualLabelName": "Business Name",
|
"manualLabelName": "Business Name",
|
||||||
"manualLabelAddress": "Address",
|
"manualLabelAddress": "Address",
|
||||||
|
"manualLabelRegion": "Region",
|
||||||
|
"manualLabelDetail": "Detail Address",
|
||||||
"manualPlaceholderName": "Enter the business name",
|
"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": {
|
"assetManagement": {
|
||||||
"title": "Brand Assets",
|
"title": "Brand Assets",
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
"intro": { "title": "ADO2 튜토리얼 시작", "desc": "ADO2 사용 방법을 단계별로 안내해 드릴게요." },
|
"intro": { "title": "ADO2 튜토리얼 시작", "desc": "ADO2 사용 방법을 단계별로 안내해 드릴게요." },
|
||||||
"dropdown": { "title": "검색 방식 선택", "desc": "드롭다운에서 URL 또는 업체명 중 원하는 방식을 선택하세요." },
|
"dropdown": { "title": "검색 방식 선택", "desc": "드롭다운에서 URL 또는 업체명 중 원하는 방식을 선택하세요." },
|
||||||
"field": { "title": "입력하기", "desc": "URL 방식이라면 네이버 지도 공유 URL,\n업체명 방식이라면 업체명을 입력하고 목록에서 선택하세요." },
|
"field": { "title": "입력하기", "desc": "URL 방식이라면 네이버 지도 공유 URL,\n업체명 방식이라면 업체명을 입력하고 목록에서 선택하세요." },
|
||||||
|
"manual": { "title": "직접 입력", "desc": "업체명과 주소를 직접 입력해서 분석을 시작할 수도 있어요." },
|
||||||
"button": { "title": "브랜드 분석 시작", "desc": "버튼을 누르면 AI가 브랜드를 분석하기 시작해요." }
|
"button": { "title": "브랜드 분석 시작", "desc": "버튼을 누르면 AI가 브랜드를 분석하기 시작해요." }
|
||||||
},
|
},
|
||||||
"asset": {
|
"asset": {
|
||||||
|
|
@ -174,8 +175,12 @@
|
||||||
"manualModalTitle": "업체 정보 입력",
|
"manualModalTitle": "업체 정보 입력",
|
||||||
"manualLabelName": "업체명",
|
"manualLabelName": "업체명",
|
||||||
"manualLabelAddress": "주소",
|
"manualLabelAddress": "주소",
|
||||||
|
"manualLabelRegion": "지역",
|
||||||
|
"manualLabelDetail": "상세 주소",
|
||||||
"manualPlaceholderName": "업체명을 입력하세요.",
|
"manualPlaceholderName": "업체명을 입력하세요.",
|
||||||
"manualPlaceholderAddress": "주소를 입력하세요."
|
"manualPlaceholderAddress": "주소를 입력하세요.",
|
||||||
|
"manualPlaceholderRegion": "지역을 선택하세요.",
|
||||||
|
"manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)"
|
||||||
},
|
},
|
||||||
"welcome": {
|
"welcome": {
|
||||||
"title": "ADO2.AI에 오신 것을 환영합니다.",
|
"title": "ADO2.AI에 오신 것을 환영합니다.",
|
||||||
|
|
@ -211,8 +216,12 @@
|
||||||
"manualModalTitle": "업체 정보 입력",
|
"manualModalTitle": "업체 정보 입력",
|
||||||
"manualLabelName": "업체명",
|
"manualLabelName": "업체명",
|
||||||
"manualLabelAddress": "주소",
|
"manualLabelAddress": "주소",
|
||||||
|
"manualLabelRegion": "지역",
|
||||||
|
"manualLabelDetail": "상세 주소",
|
||||||
"manualPlaceholderName": "업체명을 입력하세요.",
|
"manualPlaceholderName": "업체명을 입력하세요.",
|
||||||
"manualPlaceholderAddress": "주소를 입력하세요."
|
"manualPlaceholderAddress": "주소를 입력하세요.",
|
||||||
|
"manualPlaceholderRegion": "지역을 선택하세요.",
|
||||||
|
"manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)"
|
||||||
},
|
},
|
||||||
"assetManagement": {
|
"assetManagement": {
|
||||||
"title": "브랜드 에셋",
|
"title": "브랜드 에셋",
|
||||||
|
|
|
||||||
|
|
@ -632,7 +632,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
||||||
return (
|
return (
|
||||||
<div className="analysis-page-wrapper">
|
<div className="analysis-page-wrapper">
|
||||||
{showSidebar && (
|
{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">
|
<main className="analysis-page-main">
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
|
|
@ -645,7 +645,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
||||||
return (
|
return (
|
||||||
<div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
|
<div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
|
||||||
{showSidebar && (
|
{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}
|
{tutorialUI}
|
||||||
<div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
|
<div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
|
||||||
|
|
|
||||||
|
|
@ -325,6 +325,10 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
||||||
<button type="button" onClick={handleAnalyzeClick} className="url-input-button">
|
<button type="button" onClick={handleAnalyzeClick} className="url-input-button">
|
||||||
{t('landing.hero.analyzeButton')}
|
{t('landing.hero.analyzeButton')}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<button type="button" className="url-input-manual-button" onClick={() => setIsManualModalOpen(true)}>
|
||||||
|
{t('urlInput.searchTypeManual')}
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -521,6 +521,11 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
||||||
<button onClick={handleStart} className="hero-button">
|
<button onClick={handleStart} className="hero-button">
|
||||||
{t('landing.hero.analyzeButton')}
|
{t('landing.hero.analyzeButton')}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* 직접 입력 버튼 */}
|
||||||
|
<button type="button" className="hero-manual-button" onClick={() => setIsManualModalOpen(true)}>
|
||||||
|
{t('landing.hero.searchTypeManual')}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -554,7 +559,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{tutorial.isActive && (
|
{tutorial.isActive && !isManualModalOpen && (
|
||||||
<TutorialOverlay
|
<TutorialOverlay
|
||||||
hints={tutorial.hints}
|
hints={tutorial.hints}
|
||||||
currentIndex={tutorial.currentHintIndex}
|
currentIndex={tutorial.currentHintIndex}
|
||||||
|
|
@ -568,7 +573,11 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
||||||
{isManualModalOpen && (
|
{isManualModalOpen && (
|
||||||
<BusinessNameInputModal
|
<BusinessNameInputModal
|
||||||
onClose={() => setIsManualModalOpen(false)}
|
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>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue