fix(home): Custom Build 섹션 grid orphan + 모달 service 컨텍스트화
- 카드 grid: grid-cols-2 md:grid-cols-5 → grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 (모바일 orphan 방지) - ContactModal service를 state로 lift (modalService) — Custom Build CTA에서 "외주 개발 문의" 자동 선택. 모달 close 시 "일반 문의"로 리셋. - 카드 화살표 span에 aria-hidden 추가 (a11y) - 카드 Link 의 redundant inline style 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
14
app/page.tsx
14
app/page.tsx
@@ -44,13 +44,17 @@ const AFTER = [
|
|||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
const [modalService, setModalService] = useState('일반 문의');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative overflow-x-hidden bg-black text-white">
|
<div className="relative overflow-x-hidden bg-black text-white">
|
||||||
<ContactModal
|
<ContactModal
|
||||||
isOpen={modalOpen}
|
isOpen={modalOpen}
|
||||||
onClose={() => setModalOpen(false)}
|
onClose={() => {
|
||||||
service="일반 문의"
|
setModalOpen(false);
|
||||||
|
setModalService('일반 문의');
|
||||||
|
}}
|
||||||
|
service={modalService}
|
||||||
checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']}
|
checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -295,7 +299,7 @@ export default function Home() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-12">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-12">
|
||||||
{[
|
{[
|
||||||
{ href: '/freelance', label: '외주 개발', desc: '맞춤 솔루션 외주', key: 'freelance' },
|
{ href: '/freelance', label: '외주 개발', desc: '맞춤 솔루션 외주', key: 'freelance' },
|
||||||
{ href: '/services/website', label: '웹사이트', desc: '기업·브랜드 사이트', key: 'website' },
|
{ href: '/services/website', label: '웹사이트', desc: '기업·브랜드 사이트', key: 'website' },
|
||||||
@@ -307,11 +311,10 @@ export default function Home() {
|
|||||||
key={card.key}
|
key={card.key}
|
||||||
href={card.href}
|
href={card.href}
|
||||||
className="group rounded-2xl border border-white/15 bg-white/[0.02] p-5 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col"
|
className="group rounded-2xl border border-white/15 bg-white/[0.02] p-5 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col"
|
||||||
style={{ textDecoration: 'none' }}
|
|
||||||
>
|
>
|
||||||
<p className="font-bold text-white text-sm mb-1.5">{card.label}</p>
|
<p className="font-bold text-white text-sm mb-1.5">{card.label}</p>
|
||||||
<p className="text-xs text-white/60 leading-relaxed flex-1">{card.desc}</p>
|
<p className="text-xs text-white/60 leading-relaxed flex-1">{card.desc}</p>
|
||||||
<span className="mt-3 text-white/40 text-xs">→</span>
|
<span aria-hidden="true" className="mt-3 text-white/40 text-xs">→</span>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -320,6 +323,7 @@ export default function Home() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
trackCTAClick('home_v6_custom_build_cta');
|
trackCTAClick('home_v6_custom_build_cta');
|
||||||
|
setModalService('외주 개발 문의');
|
||||||
setModalOpen(true);
|
setModalOpen(true);
|
||||||
}}
|
}}
|
||||||
className="kx-btn-primary inline-flex items-center px-7 py-3 rounded-full text-sm"
|
className="kx-btn-primary inline-flex items-center px-7 py-3 rounded-full text-sm"
|
||||||
|
|||||||
Reference in New Issue
Block a user