[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import { Roboto } from "next/font/google" import "./globals.css" const roboto = Roboto({ weight: ["400", "500", "700"], subsets: ["latin"], display: "swap", variable: "--font-roboto", }) export const metadata = { title: "求人サイト", description: "1日から働ける求人サイト", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: #e53e3e; } @layer base { body { @apply antialiased; } } @layer components { .btn-primary { @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors; } .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition-colors; } .input-field { @apply w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent; } .form-label { @apply block text-sm font-medium text-gray-700 mb-1; } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import RegistrationForm from "@/components/registration-form" import PrefectureSelection from "@/components/prefecture-selection" import CitySelection from "@/components/city-selection" import JobConfirmation from "@/components/job-confirmation" import CompletionScreen from "@/components/completion-screen" export default function Home() { const router = useRouter() const [step, setStep] = useState(1) const [userData, setUserData] = useState({ name: "", email: "", phone: "", age: "", experience: "", }) const [location, setLocation] = useState({ prefecture: "", city: "", }) const [jobDetails, setJobDetails] = useState(null) const handleUserDataSubmit = (data) => { setUserData(data) setStep(2) console.log("API Request - Register User:", data) } const handlePrefectureSelect = (prefecture) => { setLocation((prev) => ({ ...prev, prefecture })) setStep(3) console.log("API Request - Selected Prefecture:", prefecture) } const handleCitySelect = (city) => { setLocation((prev) => ({ ...prev, city })) // Mock API call to get job listings const mockJobDetails = { title: "コンビニスタッフ", hourlyRate: "¥1,200", workingHours: "8:00 - 17:00", location: `${location.prefecture}${city}`, startDate: "即日", } setJobDetails(mockJobDetails) setStep(4) console.log("API Request - Selected City:", city) console.log("API Request - Fetch Jobs:", { prefecture: location.prefecture, city }) } const handleConfirm = () => { // Mock API call to submit application console.log("API Request - Submit Application:", { user: userData, location: location, job: jobDetails, }) setStep(5) } return (

ジョブファインダー

1日から働ける求人サイト

{step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && ( )} {step === 5 && }

) } [V0_FILE]typescriptreact:file="components/registration-form.tsx" "use client" import { useState } from "react" export default function RegistrationForm({ onSubmit }) { const [formData, setFormData] = useState({ name: "", email: "", phone: "", age: "", experience: "なし", }) const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e) => { e.preventDefault() onSubmit(formData) } return (

会員情報入力

) } [V0_FILE]typescriptreact:file="components/prefecture-selection.tsx" "use client" export default function PrefectureSelection({ onSelect }) { // 日本の都道府県リスト const prefectures = [ "北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県", ] return (

都道府県を選択

勤務希望の都道府県を選択してください

{prefectures.map((prefecture) => ( ))}

) } [V0_FILE]typescriptreact:file="components/city-selection.tsx" "use client" export default function CitySelection({ prefecture, onSelect }) { // 都道府県ごとの市区町村（サンプル） const citiesByPrefecture = { 東京都: ["新宿区", "渋谷区", "品川区", "目黒区", "港区", "千代田区", "中央区", "文京区", "台東区", "墨田区"], 大阪府: ["大阪市", "堺市", "豊中市", "吹田市", "高槻市", "茨木市", "八尾市", "寝屋川市", "東大阪市", "枚方市"], 北海道: ["札幌市", "函館市", "旭川市", "釧路市", "帯広市", "北見市", "夕張市", "岩見沢市", "網走市", "留萌市"], // 他の都道府県のデータ（実際の実装ではすべての都道府県のデータが必要） } // 選択された都道府県の市区町村を取得（データがない場合はサンプルデータを表示） const cities = citiesByPrefecture[prefecture] || [ "中央区", "北区", "南区", "東区", "西区", "○○市", "△△市", "□□市", "××市", "◇◇市", ] return (

市区町村を選択

{prefecture}の市区町村を選択してください

{cities.map((city) => ( ))}

) } [V0_FILE]typescriptreact:file="components/job-confirmation.tsx" "use client" export default function JobConfirmation({ jobDetails, userData, location, onConfirm }) { if (!jobDetails) return null return (

応募内容の確認

求人情報

{jobDetails.title}

時給

{jobDetails.hourlyRate}

勤務時間

{jobDetails.workingHours}

勤務地

{jobDetails.location}

勤務開始

{jobDetails.startDate}

応募者情報

お名前: {userData.name}

メールアドレス: {userData.email}

電話番号: {userData.phone}

年齢: {userData.age}歳

経験: {userData.experience}

勤務希望地

{location.prefecture} {location.city}

) } [V0_FILE]typescriptreact:file="components/completion-screen.tsx" "use client" import { CheckCircle } from "lucide-react" import Link from "next/link" export default function CompletionScreen() { return (

応募が完了しました

ご応募ありがとうございます。担当者からのご連絡をお待ちください。

API リクエスト情報（デモ用）

          {`POST /api/applications
{
  "userData": {
    "name": "山田太郎",
    "email": "yamada@example.com",
    "phone": "090-1234-5678",
    "age": "28",
    "experience": "1-3年"
  },
  "location": {
    "prefecture": "東京都",
    "city": "新宿区"
  },
  "jobId": "job-123456"
}`}

トップに戻る

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-roboto)", "sans-serif"], }, colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: "var(--primary)", secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config