Merge version_23_1781527170477 into main

Merge version_23_1781527170477 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1c1c1c;
+  --primary-cta: #511f1f;
+  --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #8f3838;
+  --background-accent: #c9725c;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/main.tsx

@@ -4,12 +4,14 @@ import { BrowserRouter } from 'react-router-dom'
 import './index.css'
 import App from './App.tsx'
 import { initVisualEdit } from '@/utils/visual-edit'
+import Tag from "@/components/tag/Tag";
 
 initVisualEdit()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
+      <Tag />
       <App />
     </BrowserRouter>
   </StrictMode>,

src/pages/HomePage.tsx

@@ -1,163 +1,28 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
-import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
-import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
-import { Award, CheckCircle, Shield } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ProductsSection from './HomePage/sections/Products';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlayMarquee
-      tag="인천 구월동의 신선한 참복 요리 전문점"
-      title="복마중 (福磨中)"
-      description="깊은 바다의 품격, 정성으로 빚어낸 참복 요리의 진수를 경험해보세요."
-      primaryButton={{
-        text: "메뉴 보기",        href: "#products"}}
-      secondaryButton={{
-        text: "예약하기",        href: "#contact"}}
-      items={[
-        {
-          text: "생생정보통 출연",          icon: CheckCircle,
-        },
-        {
-          text: "최고급 활복 사용",          icon: Award,
-        },
-        {
-          text: "개별 룸 완비",          icon: Shield,
-        },
-      ]}
-      imageSrc="https://storage.googleapis.com/webild/users/user_3F8MF5MZ5xbEtL0ujm80wUQyVf0/uploaded-1781524391799-ygn90a2z.png"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="구월동의 명소, 복마중은 정직한 식재료와 장인의 손길로 고객님께 최상의 미식 경험을 제공합니다."
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesRevealCardsBento
-      tag="메뉴 안내"
-      title="단품 메뉴 및 음료"
-      description="다채로운 복어 요리와 신선한 횟감을 만나보세요."
-      items={[
-        {
-          title: "복지리",          description: "맑고 개운한 복지리 ₩13,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/salmon-tuna-tartar_74190-5884.jpg"},
-        {
-          title: "자연산 참복지리",          description: "진하고 깊은 자연산 참복 ₩25,000",          href: "#",          imageSrc: "https://storage.googleapis.com/webild/users/user_3F8MF5MZ5xbEtL0ujm80wUQyVf0/uploaded-1781524473167-49t6u6h1.png"},
-        {
-          title: "활복지리",          description: "살아있는 신선한 참복 ₩40,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/fish-salad-salmon-cucumber-apple-mashed-avocado-side-view_141793-3725.jpg"},
-        {
-          title: "복어초밥 12ps",          description: "정성 가득 복어초밥 ₩30,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/raw-fresh-salmon-tuna-other-sashimi-fish-meat_74190-909.jpg"},
-        {
-          title: "참치초밥 10ps",          description: "부드러운 참치초밥 ₩15,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/seafood-mussels-salad-with-galetta-white-plate_114579-2359.jpg"},
-        {
-          title: "새우초밥 10ps",          description: "탱글한 새우초밥 ₩12,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/sushi_74190-593.jpg"},
-        {
-          title: "참치회덮밥",          description: "든든한 참치회덮밥 ₩8,000",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-shrimp-salad-with-bell-peppers-arugula-plate-wood_141793-11674.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingCenteredCards
-      tag="코스 요리 안내"
-      title="마중 코스 요리 (2인 이상 주문)"
-      description="복마중의 품격이 담긴 코스 메뉴입니다."
-      plans={[
-        {
-          tag: "정식",          price: "₩20,000",          description: "마중 복정식",          features: [
-            "복껍질무침",            "참복회",            "복튀김",            "참복지리"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-        {
-          tag: "코스",          price: "₩50,000",          description: "마중 스페셜 코스",          features: [
-            "참복사시미",            "참치회",            "랍스타",            "복불고기"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-        {
-          tag: "활복",          price: "₩99,000",          description: "참복 활복 코스",          features: [
-            "참복사시미",            "혼마구로 배꼽살",            "살아있는 활복지리"],
-          primaryButton: {
-            text: "선택",            href: "#contact"},
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeOverlayCards
-      tag="고객 후기"
-      title="소중한 고객님의 리뷰"
-      description="고객님들의 솔직한 후기를 만나보세요."
-      testimonials={[
-        {
-          name: "김영수",          role: "단골 고객",          company: "구월동 주민",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-having-dessert-cafe_637285-9084.jpg"},
-        {
-          name: "박지혜",          role: "가족 모임",          company: "인천 거주",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-lady-shirt-jeans-sitting-bar-counter-cafe-with-fork-hand-cake-near-dreamily-looking-aside_574295-293.jpg"},
-        {
-          name: "최철민",          role: "회식",          company: "회사원",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-sitting-table-drinking-milk-shake-cocktail-black-leather-jacket-wearing-pink-sunglasses_285396-10322.jpg"},
-        {
-          name: "이정아",          role: "데이트",          company: "블로거",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-restaurant_23-2148006700.jpg"},
-        {
-          name: "강준호",          role: "단골",          company: "인천 직장인",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269175.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="도움말"
-      title="자주 묻는 질문"
-      description="궁금하신 점을 확인해보세요."
-      items={[
-        {
-          question: "예약은 어떻게 하나요?",          answer: "전화나 방문 예약을 통해 개별 룸을 예약하실 수 있습니다."},
-        {
-          question: "주차장이 있나요?",          answer: "인근 주차 시설 이용 가능합니다."},
-        {
-          question: "코스 메뉴 최소 주문은요?",          answer: "모든 코스 메뉴는 2인 이상부터 주문 가능합니다."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="예약 문의"
-      text="인천 남동구 구월동, 정성을 다하는 복마중에서 특별한 시간을 예약하세요."
-      primaryButton={{
-        text: "전화 예약 문의",        href: "tel:0100000000"}}
-      secondaryButton={{
-        text: "위치 확인",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+interface AboutTextProps {
+  title: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+}
+
+const AboutInline = () => {
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-2 items-center">
+        <TextAnimation
+          text={"복어의 효능"}
+          variant="slide-up"
+          gradientText={false}
+          tag="h2"
+          className="text-xl md:text-2xl leading-relaxed font-medium text-center text-balance"
+        />
+
+        {(undefined || undefined) && (
+          <div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3">
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary" />}
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+          </div>
+        )}
+        <ul className="mt-12 space-y-6 text-left max-w-2xl mx-auto">
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">1</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">건강 회복 & 질병 예방</h4>
+              <p className="text-muted-foreground mt-1">수술 전후 회복, 당뇨·신장질환에 효과적이며 갱년기 완화, 혈전 노화 방지, 각종 암·종양·궤양 예방에 좋습니다.</p>
+            </div>
+          </li>
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">2</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">다이어트 식품</h4>
+              <p className="text-muted-foreground mt-1">저칼로리·고단백·저지방에 각종 무기질과 비타민이 풍부해 다이어트 식품으로 좋습니다.</p>
+            </div>
+          </li>
+          <li className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold">3</div>
+            <div>
+              <h4 className="text-lg font-semibold text-foreground">숙취 해소</h4>
+              <p className="text-muted-foreground mt-1">콜레스테롤을 낮추고 음주 후 숙취 해독 효과가 탁월한 것으로 증명되어 있습니다.</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export default function AboutSection() {
+  return (
+    <div data-webild-section="about" id="about">
+      <AboutInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,22 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+        tag="예약 문의"
+        text="032-427-8088"
+        primaryButton={{"text":"전화 예약 문의","href":"tel:032-427-8088"}}
+        secondaryButton={{
+            text: "위치 확인",        href: "#"}}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="도움말"
+          title="자주 묻는 질문"
+          description="궁금하신 점을 확인해보세요."
+          items={[
+            {
+              question: "예약은 어떻게 하나요?",          answer: "전화나 방문 예약을 통해 개별 룸을 예약하실 수 있습니다."},
+            {
+              question: "주차장이 있나요?",          answer: "인근 주차 시설 이용 가능합니다."},
+            {
+              question: "코스 메뉴 최소 주문은요?",          answer: "모든 코스 메뉴는 2인 이상부터 주문 가능합니다."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
+import { Award, CheckCircle, Shield } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlayMarquee
+        tag="인천 구월동의 신선한 참복 요리 전문점"
+        title="복마중 "
+        description="맛 "
+        primaryButton={{
+            text: "메뉴 보기",        href: "#products"}}
+        secondaryButton={{
+            text: "예약하기",        href: "#contact"}}
+        items={[{"icon":"Award","text":"최고급 활복 사용"},{"icon":"Shield","text":"개별 룸 완비"}]}
+        imageSrc="https://storage.googleapis.com/webild/users/user_3F8MF5MZ5xbEtL0ujm80wUQyVf0/uploaded-1781524391799-ygn90a2z.png"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    title: "마중 코스 (minimum 2 people) — ₩50,000",
+    description: "참복사시미, 복어죽, 참치회, 문어숙회, 초밥, 복껍질무침, 복튀김, 새우튀김, 참복불고기, 장어구이, 참복지리 or 참복매운탕, 마끼",
+    href: "#"
+  },
+  {
+    title: "스페셜 코스 (minimum 2 people) — ₩60,000",
+    description: "참복사시미, 복어죽, 참치회, 문어숙회, 초밥, 랍스타, 복껍질무침, 복튀김, 새우튀김, 참복불고기, 장어구이, 참복지리 or 참복매운탕, 마끼",
+    href: "#"
+  },
+  {
+    title: "참복 스페셜 (live pufferfish, minimum 2 people) — ₩99,000",
+    description: "참복사시미, 복어죽, 참치회(혼마구로 배꼽살), 문어숙회, 초밥, 복껍질무침, 랍스타, 참복불고기, 장어구이, 참복지리 or 참복매운탕(살아있는 참복), 마끼",
+    href: "#"
+  },
+  {
+    title: "자연산 참복지리",
+    description: "진하고 깊은 자연산 참복 ₩25,000",
+    href: "#"
+  },
+  {
+    title: "참치초밥 10ps",
+    description: "부드러운 참치초밥 ₩15,000",
+    href: "#"
+  },
+  {
+    title: "새우초밥 10ps",
+    description: "탱글한 새우초밥 ₩12,000",
+    href: "#"
+  },
+  {
+    title: "참치회덮밥",
+    description: "든든한 참치회덮밥 ₩8,000",
+    href: "#"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+}
+
+const ProductsInline = () => {
+  const gridClasses = [
+    "md:col-span-2",
+    "md:col-span-4",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-2",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0,
+    0.1,
+    0,
+    0.1,
+    0.2,
+  ];
+
+  return (
+    <section aria-label="Features reveal cards bento section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"메뉴 안내"}</p>
+          </div>
+
+          <TextAnimation
+            text={"식사메뉴 "}
+            variant="slide-up"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"다채로운 복어 요리와 신선한 횟감을 즐겨보세요!"}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item, index) => (
+            <ScrollReveal key={item.title} variant="slide-up" delay={index * 0.1} className="col-span-1">
+              <div className="card rounded p-6 md:p-8 flex flex-col gap-4 h-full border border-border shadow-sm">
+                <h3 className="text-2xl font-semibold text-foreground">
+                  {item.title}
+                </h3>
+                <div className="w-full h-px bg-border my-1" />
+                <p className="text-base leading-relaxed text-muted-foreground break-keep">
+                  {item.description}
+                </p>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function ProductsSection() {
+  return (
+    <div data-webild-section="products" id="products">
+      <ProductsInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialMarqueeOverlayCards
+          tag="고객 후기"
+          title="소중한 고객님의 리뷰"
+          description="고객님들의 솔직한 후기를 만나보세요."
+          testimonials={[
+            {
+              name: "김영수",          role: "단골 고객",          company: "구월동 주민",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-having-dessert-cafe_637285-9084.jpg"},
+            {
+              name: "박지혜",          role: "가족 모임",          company: "인천 거주",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-lady-shirt-jeans-sitting-bar-counter-cafe-with-fork-hand-cake-near-dreamily-looking-aside_574295-293.jpg"},
+            {
+              name: "최철민",          role: "회식",          company: "회사원",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-sitting-table-drinking-milk-shake-cocktail-black-leather-jacket-wearing-pink-sunglasses_285396-10322.jpg"},
+            {
+              name: "이정아",          role: "데이트",          company: "블로거",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-restaurant_23-2148006700.jpg"},
+            {
+              name: "강준호",          role: "단골",          company: "인천 직장인",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269175.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}