rup-project/app/lib/screens/login_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black, size: 20),
          onPressed: () => Navigator.pop(context),
        ),
        title: const Text(
          '로그인',
          style: TextStyle(
            fontSize: 15,
            fontFamily: 'SCDream',
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(20, 0, 20, 240),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Image.asset('assets/img/foot.png', width: 30),
                SizedBox(width: 10),
                Text(
                  '로그인',
                  style: TextStyle(
                    fontSize: 24,
                    fontFamily: 'SCDream',
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
            SizedBox(height: 10),
            Text(
              'RUP에 어서오세요!\n지금 로그인하고 다양한 서비스를 이용해보세요.',
              style: TextStyle(
                fontSize: 14,
                fontFamily: 'SCDream',
                fontWeight: FontWeight.w500,
                color: Colors.black,
              ),
              textAlign: TextAlign.start,
            ),
            Spacer(),
            Align(
              alignment: Alignment.centerRight,
              child: Image.asset('assets/img/cat.png', height: 150),
            ),
            SizedBox(height: 10),
          ],
        ),
      ),
      bottomSheet: Container(
        color: Colors.white,
        padding: const EdgeInsets.fromLTRB(20, 20, 20, 40),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Naver Login Button
            _SocialLoginButton(
              text: '네이버 로그인',
              textColor: Colors.white,
              fontFamily: 'SCDream',
              fontWeight: FontWeight.bold,
              fontSize: 15,
              backgroundColor: const Color(0xFF00D03F),
              onPressed: () {},
              iconPath: 'assets/icons/navericon.svg',
            ),
            const SizedBox(height: 15),
            // Kakao Login Button
            _SocialLoginButton(
              text: '카카오 로그인',
              textColor: const Color(0xFF212121),
              fontFamily: 'SCDream',
              fontWeight: FontWeight.bold,
              fontSize: 15,
              backgroundColor: const Color(0xFFFAE100),
              onPressed: () {},
              iconPath: 'assets/icons/kakaoicon.svg',
            ),
            const SizedBox(height: 15),
            // Google Login Button
            _SocialLoginButton(
              text: '구글 로그인',
              textColor: const Color(0xFF17191A),
              fontFamily: 'SCDream',
              fontWeight: FontWeight.bold,
              fontSize: 15,
              backgroundColor: Colors.white,
              onPressed: () {},
              iconPath: 'assets/icons/googleicon.svg',
              isBordered: true,
            ),
          ],
        ),
      ),
    );
  }
}

class _SocialLoginButton extends StatelessWidget {
  final String text;
  final Color textColor;
  final Color backgroundColor;
  final VoidCallback onPressed;
  final String iconPath;
  final bool isBordered;
  final String fontFamily;
  final double fontSize;
  final FontWeight fontWeight;

  const _SocialLoginButton({
    required this.text,
    required this.textColor,
    required this.backgroundColor,
    required this.onPressed,
    required this.iconPath,
    this.isBordered = false,
    this.fontFamily = 'SCDream',
    this.fontWeight = FontWeight.w500,
    this.fontSize = 16,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor,
          foregroundColor: textColor,
          elevation: 0,
          shape: StadiumBorder(
            side: isBordered
                ? BorderSide(color: Colors.grey[300]!)
                : BorderSide.none,
          ),
          padding: const EdgeInsets.symmetric(horizontal: 20),
        ),
        child: Row(
          children: [
            SvgPicture.asset(
              iconPath,
              width: 24,
              height: 24,
              fit: BoxFit.contain,
            ),
            Expanded(
              child: Text(
                text,
                style: TextStyle(
                  fontFamily: fontFamily,
                  fontWeight: fontWeight,
                  fontSize: fontSize,
                ),
                textAlign: TextAlign.center,
              ),
            ),
            const SizedBox(width: 24),
          ],
        ),
      ),
    );
  }
}