Authentication Components 구성 요소

<div class="min-h-screen bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 flex items-center justify-center p-4 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 font-mono text-white text-sm">
  <div class="w-full max-w-4xl bg-blue-900/70 backdrop-blur-sm rounded-lg shadow-2xl overflow-hidden md:flex dark:bg-gray-900/70 p-6 md:p-8 border border-blue-700 dark:border-gray-700 animate-fade-in">
    
    <!-- Image Section (Left on Desktop, Top on Mobile) -->
    <div class="hidden md:flex md:w-1/2 bg-blue-950 border-r border-blue-700 dark:bg-gray-950 dark:border-gray-700 flex flex-col justify-between p-6 animate-slide-in-left">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-blue-300 dark:text-gray-300">Industrial Command Center</h2>
        <p class="text-blue-200 dark:text-gray-400 leading-relaxed">
          Access your manufacturing control systems. Securely manage production lines, monitor sensor data, and optimize operational efficiency.
        </p>
        <ul class="mt-6 space-y-2 text-blue-200 dark:text-gray-400">
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Real-time Data Analytics</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Secure Machine Interfacing</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Global Supply Chain Management</li>
        </ul>
      </div>
      <div class="mt-8">
        <img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial machinery" class="rounded-md shadow-lg border border-blue-700 dark:border-gray-700 opacity-80 hover:opacity-100 transition-opacity duration-300">
      </div>
    </div>

    <!-- Forms Section (Right on Desktop, Bottom on Mobile) -->
    <div class="w-full md:w-1/2 p-6 md:px-10 py-8 flex flex-col justify-center animate-slide-in-right">
      <div x-data="{ currentTab: 'login' }" class="w-full">
        <div class="flex mb-6 border-b border-blue-700 dark:border-gray-700">
          <button @click="currentTab = 'login'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'login', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'login'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Login
          </button>
          <button @click="currentTab = 'signup'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'signup', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'signup'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Sign Up
          </button>
          <button @click="currentTab = 'reset'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'reset', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'reset'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Reset
          </button>
        </div>

        <!-- Login Form -->
        <form x-show="currentTab === 'login'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">System Access</h2>
          <div>
            <label for="login-username" class="block text-blue-200 dark:text-gray-400 mb-2">Username</label>
            <input type="text" id="login-username" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="login-password" class="block text-blue-200 dark:text-gray-400 mb-2">Password</label>
            <input type="password" id="login-password" placeholder="********" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-500 bg-blue-800 border-blue-600 rounded focus:ring-blue-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
              <label for="remember-me" class="ml-2 block text-blue-200 dark:text-gray-400 cursor-pointer">Remember me</label>
            </div>
            <a href="#" @click.prevent="currentTab = 'reset'" class="text-blue-300 hover:text-blue-200 dark:text-gray-400 dark:hover:text-gray-300 transition-colors duration-200">Forgot password?</a>
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Login To Terminal &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Sign Up Form -->
        <form x-show="currentTab === 'signup'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">New User Registration</h2>
          <div>
            <label for="signup-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="signup-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-username" class="block text-blue-200 dark:text-gray-400 mb-2">Desired Username</label>
            <input type="text" id="signup-username" placeholder="new.user" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-password" class="block text-blue-200 dark:text-gray-400 mb-2">Create Password</label>
            <input type="password" id="signup-password" placeholder="Min 8 characters" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-confirm-password" class="block text-blue-200 dark:text-gray-400 mb-2">Confirm Password</label>
            <input type="password" id="signup-confirm-password" placeholder="Repeat password" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Register Account &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Password Reset Form -->
        <form x-show="currentTab === 'reset'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">Password Recovery</h2>
          <div>
            <label for="reset-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="reset-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <p class="text-blue-200 dark:text-gray-400 text-xs">Enter your registered email address and we'll send you instructions to reset your password. Check your spam folder.</p>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Send Reset Link &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
          <button @click.prevent="currentTab = 'login'" class="w-full border border-blue-600 hover:border-blue-500 text-blue-300 hover:text-blue-200 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600">
            &#x2190; Back to Login
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Alpine JS for Tab Switching -->
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('authTabs', () => ({
        currentTab: 'login',
      }));
    });
  </script>

  <!-- Tailwind Typography and Custom Animations (Optional, if not already in config) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slide-in-left {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slide-in-right {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
    .animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
    .animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
  </style>
</div>