【Locofy MCP + Cursor】Figma からReact コンポーネントに変換

npx create-next-app@latest my-locofy-project
cd my-locofy-project

LocofyからFooterコンポーネントをpullしてきてください。
そして既存の App Router 構成にあわせ最適化し、ページで表示できるようにしてください。

import { FunctionComponent, useMemo, type CSSProperties } from 'react';
import Border from "./Border";
import AssetsfooterTextLink from "./AssetsfooterTextLink";
import Image from "next/image";

export type FooterType = {
  className?: string;
  gajiLabo?: string;
  
  /** Variant props */
  device?: "desktop" | "mobile";
  
  /** Style props */
  footerWidth?: CSSProperties['width'];
  footerPosition?: CSSProperties['position'];
  footerTop?: CSSProperties['top'];
  footerLeft?: CSSProperties['left'];
}

const Footer: FunctionComponent<FooterType> = ({ 
  className="", 
  device="desktop", 
  footerWidth, 
  gajiLabo="/gaji-labo.png", 
  footerPosition, 
  footerTop, 
  footerLeft 
}) => {
  const footerStyle: CSSProperties = useMemo(() => {
    return {
      width: footerWidth,
      position: footerPosition,
      top: footerTop,
      left: footerLeft
    };
  }, [footerWidth, footerPosition, footerTop, footerLeft]);
              
  return (
    <section className={`w-full max-w-[1440px] bg-semantic-text-black overflow-hidden flex flex-col items-start justify-start py-spacing-x-large px-spacing-xxx-large box-border gap-spacing-large text-left text-font-size-m text-semantic-text-white font-body-regular-bold data-[device='mobile']:py-10 data-[device='mobile']:px-5 data-[device='mobile']:z-[10] [&_.layout20]:data-[device='mobile']:flex-col [&_.layout20]:data-[device='mobile']:items-start [&_.layout20]:data-[device='mobile']:justify-start [&_.layout20]:data-[device='mobile']:gap-spacing-large [&_.sns]:data-[device='mobile']:gap-5 [&_.footermenu]:data-[device='mobile']:gap-5 ${className}`} data-device={device} style={footerStyle}>
      <div className="layout20 self-stretch flex flex-row items-center justify-between gap-0">
        <Image 
          className="h-10 w-[214px] relative object-cover" 
          src={gajiLabo} 
          alt="Gaji Labo Logo" 
          width={214}
          height={40}
        />
        <div className="sns flex flex-row items-start justify-start gap-spacing-large">
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialfacebook.png" alt="Facebook" />
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialtwitter.png" alt="Twitter" />
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialinstagram.png" alt="Instagram" />
        </div>
      </div>
      <Border device="desktop" />
      <div className="footermenu overflow-hidden flex flex-col items-start justify-center gap-spacing-small">
        <AssetsfooterTextLink state="default" linkLabel="アクセス" />
        <AssetsfooterTextLink state="default" linkLabel="プライバシーポリシー" />
        <AssetsfooterTextLink state="default" linkLabel="サイトマップ" />
      </div>
      <div className="relative text-font-size-s leading-[18px] text-right">© Gaji-Labo Inc. 2016</div>
    </section>
  );
};

以下の要件を達成してください
- Footer コンポーネントに props は不要なので削除し、固定値とする
- 画像パスが undefined になっており表示されないので public を見て正しいパスはなにかを確認し修正する
- Border, AssetsfooterTextLink はコンポーネントにする必要がないので削除し Footer.tsx 内に記述する
- PC/SPのレスポンシブスタイル切り替えを 768px 前後で行う

import { FunctionComponent } from 'react';
import Image from "next/image";

const Footer: FunctionComponent = () => {
  return (
    <section className="w-full max-w-[1440px] mx-auto bg-semantic-text-black overflow-hidden flex flex-col items-start justify-start py-spacing-x-large px-spacing-xxx-large box-border gap-spacing-large text-left text-font-size-m text-semantic-text-white font-body-regular-bold md:py-spacing-x-large md:px-spacing-xxx-large max-md:py-10 max-md:px-5 max-md:z-[10]">
      <div className="self-stretch flex flex-row items-center justify-between gap-0 max-md:flex-col max-md:items-start max-md:justify-start max-md:gap-spacing-large">
        <Image 
          className="h-10 w-[214px] relative object-cover" 
          src="/gajilabo-1@2x.png" 
          alt="Gaji Labo Logo" 
          width={214}
          height={40}
        />
        <div className="flex flex-row items-start justify-start gap-spacing-large max-md:gap-5">
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialfacebook@2x.png" alt="Facebook" />
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialtwitter@2x.png" alt="Twitter" />
          <Image className="h-8 w-8 relative object-cover" width={32} height={32} src="/socialinstagram@2x.png" alt="Instagram" />
        </div>
      </div>
      
      {/* ボーダー（以前は個別コンポーネント） */}
      <div className="self-stretch relative h-px">
        <div className="absolute h-full w-full top-[0%] right-[0%] bottom-[0%] left-[0%] bg-base-color-black-030" />
      </div>
      
      {/* フッターメニュー */}
      <div className="overflow-hidden flex flex-col items-start justify-center gap-spacing-small max-md:gap-5">
        <div className="flex flex-row items-center justify-start text-left text-font-size-m text-semantic-text-white font-body-regular-bold">
          <div className="relative leading-[21px]">アクセス</div>
        </div>
        <div className="flex flex-row items-center justify-start text-left text-font-size-m text-semantic-text-white font-body-regular-bold">
          <div className="relative leading-[21px]">プライバシーポリシー</div>
        </div>
        <div className="flex flex-row items-center justify-start text-left text-font-size-m text-semantic-text-white font-body-regular-bold">
          <div className="relative leading-[21px]">サイトマップ</div>
        </div>
      </div>
      <div className="relative text-font-size-s leading-[18px] text-right">© Gaji-Labo Inc. 2016</div>
    </section>
  );
};