From 53e01fad4a8015228dfbab3b54c3c40510bf3778 Mon Sep 17 00:00:00 2001 From: gahusb Date: Sun, 22 Mar 2026 17:07:56 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=87=BC=ED=95=91=EB=AA=B0=20=EC=83=98?= =?UTF-8?q?=ED=94=8C=20=EC=B6=94=EA=B0=80,=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=84=9C=EB=B9=84=EC=8A=A4=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9E=AC=EB=94=94=EC=9E=90=EC=9D=B8,=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20UI=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모든 샘플 페이지 우측 하단 맨 위로 스크롤 버튼 추가 (인테리어, 독서) - 독서 기록 노트 상단 '홈페이지 제작 서비스로 돌아가기' 배너 추가 - 개인 쇼핑몰 샘플 (MELLOW STUDIO) 신규 생성 - 베이지/크림 라이트 톤, Cormorant Garamond + Pretendard - 히어로 스플릿 레이아웃, 상품 그리드(카테고리 필터), 브랜드 스토리, 리뷰, CTA, 푸터 - 장바구니 뱃지, 상품 찜하기, 퀵 장바구니 인터랙션 - 홈페이지 서비스 소개 페이지 재디자인 - CookieRun → Pretendard 교체로 한글 폰트 렌더링 개선 - word-break: keep-all 적용으로 이상한 개행 제거 - IntersectionObserver 스크롤 reveal 애니메이션 추가 - Trust badge 섹션, Marquee 추가 - 쇼핑몰 샘플 카드 추가 Co-Authored-By: Claude Sonnet 4.6 --- app/services/website/page.tsx | 685 ++++++++++------ .../website/samples/interior/page.tsx | 482 ++++------- app/services/website/samples/reading/page.tsx | 58 +- .../website/samples/shopping/page.tsx | 759 ++++++++++++++++++ 4 files changed, 1429 insertions(+), 555 deletions(-) create mode 100644 app/services/website/samples/shopping/page.tsx diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx index 6dea74c..68e879c 100644 --- a/app/services/website/page.tsx +++ b/app/services/website/page.tsx @@ -1,7 +1,7 @@ 'use client'; import Link from 'next/link'; -import { useState } from 'react'; +import { useState, useEffect, useRef } from 'react'; const samples = [ { @@ -74,6 +74,16 @@ const samples = [ tags: ['라이프', '독서', '기록'], icon: '◻', }, + { + type: 'shopping', + title: '개인 쇼핑몰', + subtitle: 'MELLOW STUDIO', + desc: '감각적인 브랜드 스토리텔링과 미니멀 레이아웃으로 완성한 패션·라이프스타일 쇼핑몰', + gradient: 'linear-gradient(135deg, #2A2018 0%, #4A3C2C 50%, #7A6A52 100%)', + accent: '#C4A882', + tags: ['쇼핑몰', '패션', '라이프'], + icon: '◇', + }, ]; const processSteps = [ @@ -127,193 +137,349 @@ const faqs = [ }, ]; +function useReveal() { + const ref = useRef(null); + useEffect(() => { + const el = ref.current; + if (!el) return; + const scroller = (document.querySelector('.main-content') as HTMLElement | null) ?? document.documentElement; + const obs = new IntersectionObserver( + ([entry]) => { if (entry.isIntersecting) { el.classList.add('ws-visible'); obs.disconnect(); } }, + { threshold: 0.1, root: scroller === document.documentElement ? null : scroller } + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + return ref; +} + export default function WebsiteServicePage() { const [openFaq, setOpenFaq] = useState(null); + const [showTop, setShowTop] = useState(false); + + useEffect(() => { + const scroller = (document.querySelector('.main-content') as HTMLElement | null) ?? document.documentElement; + const onScroll = () => setShowTop(scroller.scrollTop > 400); + scroller.addEventListener('scroll', onScroll, { passive: true }); + return () => scroller.removeEventListener('scroll', onScroll); + }, []); + + const samplesRef = useReveal(); + const processRef = useReveal(); + const pricingRef = useReveal(); + const faqRef = useReveal(); + const ctaRef = useReveal(); return ( -
- +
+