feat: move ContactForm to root layout and improve employment UI

mmaxence · mmaxence · commit bc753d39c042 · 2025-10-23T17:30:05.000+09:00
- Create ContactFormContext for global form state management
- Move ContactForm to root layout (highest HTML structure below body)
- Update ContactForm to use context instead of props
- Update ContactBanner to use context for opening form
- Create smaller pill UI for employment status selection
- Replace large connected pills with compact rounded pills
- Use gap-2 spacing and smaller padding (px-3 py-1.5)
- Improve form positioning by placing at root level
- Ensure form appears on top of all other content
- Maintain all existing functionality with better architecture
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Nunito, Noto_Sans_KR } from "next/font/google";
 import "./globals.css";
 import { LanguageProvider } from "@/contexts/LanguageContext";
+import { ContactFormProvider } from "@/contexts/ContactFormContext";
+import ContactForm from "@/components/ui/ContactForm";
 
 const nunito = Nunito({ 
   subsets: ["latin"], 
@@ -41,7 +43,10 @@ export default function RootLayout({
     <html lang="en" className={`${nunito.variable} ${notoKR.variable}`}>
       <body className="min-h-screen bg-background antialiased">
         <LanguageProvider>
-          {children}
+          <ContactFormProvider>
+            {children}
+            <ContactForm />
+          </ContactFormProvider>
         </LanguageProvider>
       </body>
     </html>
diff --git a/src/components/layout/ContactBanner.tsx b/src/components/layout/ContactBanner.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Coffee } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
-import ContactForm from '../ui/ContactForm';
+import { useContactForm } from '@/contexts/ContactFormContext';
 
 const ContactBanner = () => {
-  const [isFormOpen, setIsFormOpen] = useState(false);
+  const { openForm } = useContactForm();
   const { t } = useLanguage();
 
   return (
@@ -30,7 +29,7 @@ const ContactBanner = () => {
 
           {/* CTA Button */}
           <motion.button
-            onClick={() => setIsFormOpen(true)}
+            onClick={openForm}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             className="ml-4 flex items-center space-x-2 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-all duration-200 text-sm font-medium shadow-sm"
@@ -40,12 +39,6 @@ const ContactBanner = () => {
           </motion.button>
         </div>
       </div>
-      
-      {/* Contact Form Modal */}
-      <ContactForm 
-        isOpen={isFormOpen} 
-        onClose={() => setIsFormOpen(false)} 
-      />
     </motion.div>
   );
 };
diff --git a/src/components/ui/ContactForm.tsx b/src/components/ui/ContactForm.tsx
@@ -4,13 +4,10 @@ import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Send, User, Mail, Briefcase, Linkedin, Building, Check, AlertCircle } from 'lucide-react';
 import emailjs from '@emailjs/browser';
+import { useContactForm } from '@/contexts/ContactFormContext';
 
-interface ContactFormProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const ContactForm = ({ isOpen, onClose }: ContactFormProps) => {
+const ContactForm = () => {
+  const { isFormOpen, closeForm } = useContactForm();
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -76,7 +73,7 @@ const ContactForm = ({ isOpen, onClose }: ContactFormProps) => {
           setIsSubmitted(true);
           setTimeout(() => {
             setIsSubmitted(false);
-            onClose();
+            closeForm();
             resetForm();
           }, 2000);
         } else {
@@ -108,7 +105,7 @@ ${formData.discussion}
         setIsSubmitted(true);
         setTimeout(() => {
           setIsSubmitted(false);
-          onClose();
+          closeForm();
           resetForm();
         }, 2000);
       }
@@ -133,7 +130,7 @@ ${formData.discussion}
     setError('');
   };
 
-  if (!isOpen) return null;
+  if (!isFormOpen) return null;
 
   return (
     <AnimatePresence>
@@ -151,7 +148,7 @@ ${formData.discussion}
           bottom: 0,
           zIndex: 9998
         }}
-        onClick={onClose}
+        onClick={closeForm}
       />
       
       {/* Form Container */}
@@ -173,7 +170,7 @@ ${formData.discussion}
         {/* Header */}
         <div className="absolute top-8 right-8 z-10">
           <button
-            onClick={onClose}
+            onClick={closeForm}
             className="p-2 rounded-lg hover:bg-white/10 transition-colors"
           >
             <X className="w-6 h-6 text-white" />
@@ -244,13 +241,13 @@ ${formData.discussion}
             <div className="space-y-4">
               <h2 className="text-lg font-semibold text-white">Employment Status</h2>
               
-              {/* Employment Status - Connected Pills */}
+              {/* Employment Status - Small Pills */}
               <div>
                 <label className="block text-sm font-medium text-white mb-3">
                   Are you currently employed? *
                 </label>
-                <div className="flex">
-                  <label className="flex-1 cursor-pointer">
+                <div className="flex gap-2">
+                  <label className="cursor-pointer">
                     <input
                       type="radio"
                       name="employmentStatus"
@@ -259,7 +256,7 @@ ${formData.discussion}
                       onChange={handleRadioChange}
                       className="sr-only"
                     />
-                    <div className={`px-4 py-3 text-center border border-white/20 transition-all ${
+                    <div className={`px-3 py-1.5 text-sm rounded-full border border-white/20 transition-all ${
                       formData.employmentStatus === 'yes' 
                         ? 'bg-white text-black border-white' 
                         : 'bg-white/10 text-white hover:bg-white/20'
@@ -268,7 +265,7 @@ ${formData.discussion}
                     </div>
                   </label>
                   
-                  <label className="flex-1 cursor-pointer">
+                  <label className="cursor-pointer">
                     <input
                       type="radio"
                       name="employmentStatus"
@@ -277,7 +274,7 @@ ${formData.discussion}
                       onChange={handleRadioChange}
                       className="sr-only"
                     />
-                    <div className={`px-4 py-3 text-center border-t border-b border-white/20 transition-all ${
+                    <div className={`px-3 py-1.5 text-sm rounded-full border border-white/20 transition-all ${
                       formData.employmentStatus === 'no' 
                         ? 'bg-white text-black border-white' 
                         : 'bg-white/10 text-white hover:bg-white/20'
@@ -286,7 +283,7 @@ ${formData.discussion}
                     </div>
                   </label>
                   
-                  <label className="flex-1 cursor-pointer">
+                  <label className="cursor-pointer">
                     <input
                       type="radio"
                       name="employmentStatus"
@@ -295,7 +292,7 @@ ${formData.discussion}
                       onChange={handleRadioChange}
                       className="sr-only"
                     />
-                    <div className={`px-4 py-3 text-center border border-white/20 transition-all ${
+                    <div className={`px-3 py-1.5 text-sm rounded-full border border-white/20 transition-all ${
                       formData.employmentStatus === 'student' 
                         ? 'bg-white text-black border-white' 
                         : 'bg-white/10 text-white hover:bg-white/20'
@@ -393,7 +390,7 @@ ${formData.discussion}
             <div className="flex justify-end space-x-4 pt-8">
               <button
                 type="button"
-                onClick={onClose}
+                onClick={closeForm}
                 className="px-8 py-3 text-white/70 hover:text-white transition-colors font-medium"
               >
                 Cancel
diff --git a/src/contexts/ContactFormContext.tsx b/src/contexts/ContactFormContext.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ContactFormContextType {
+  isFormOpen: boolean;
+  openForm: () => void;
+  closeForm: () => void;
+}
+
+const ContactFormContext = createContext<ContactFormContextType | undefined>(undefined);
+
+export const ContactFormProvider = ({ children }: { children: ReactNode }) => {
+  const [isFormOpen, setIsFormOpen] = useState(false);
+
+  const openForm = () => setIsFormOpen(true);
+  const closeForm = () => setIsFormOpen(false);
+
+  return (
+    <ContactFormContext.Provider value={{ isFormOpen, openForm, closeForm }}>
+      {children}
+    </ContactFormContext.Provider>
+  );
+};
+
+export const useContactForm = () => {
+  const context = useContext(ContactFormContext);
+  if (context === undefined) {
+    throw new Error('useContactForm must be used within a ContactFormProvider');
+  }
+  return context;
+};
