[웹개발 100일] Day 26~29 - 회원가입 UI 및 기능 구현

 

 

 

 

오랜만이에요 여러분!!!

26~28일차는 어쩔 수 없는 개인사정으로 쉬게 되었지만, 날짜를 빼지 않고 그대로 이어가려고 합니다.

계획이 많이 밀리지도 않았고 마감날짜를 맞추고 싶거든요.

오늘은 25일차에 이어,

"DB에 있는 글 리스트를 가져오기 < 로그인 기능 < 회원가입 기능"

이 흐름을 완성하기 위해 회원가입 기능을 개발해 보았습니다.

 

---

🚀 요약

작업 시간: 2시간반
✅ 회원가입 기능 구현

 

 

---

🚀 회원가입 기능 구현

첫 화면.

UI 좀 개선하고 유효성 검사를 추가했어요.

 

이미 있는 이메일이면 경고 뜨도록 중복 검사도 해야 하는데 구현하기 너무 귀찮아서 일단 미뤄둠 ..

언젠간 하겠지!

 

인풋 조건 다 만족하면 버튼 색이 바뀌고 활성화 됩니다.

 

<button
    className={
      (isEmailValid && isPwdValid && isPwdConfirmed
        ? "bg-blue-600 border-blue-600 "
        : "bg-gray-300 border-gray-300 ") +
      "text-white py-2 px-4 border-2 rounded-md w-[20rem] mb-2"
    }
    onClick={handleSignUpClick}
    disabled={!isEmailValid && !isPwdValid && !isPwdConfirmed}
>
	Sign Up
</button>

버튼 로직은 이렇게 구현했십니다.

 

const handleSignUpClick = () => {
    axios
      .post(
        "http://localhost:5232/api/users/register",
        {
          Email: email,
          Password: password,
        }
      )
      .then((response) => {
        console.log(response.data);
      })
      .catch((err) => {
        setError(err.message);
      });
};

가입을 위한 API 요청 날려줌

 

using System.ComponentModel.DataAnnotations;

public class RegisterDto
{
    [Required]
    [StringLength(100)]
    public string Email { get; set; } = string.Empty;

    public string? Username { get; set; }

    [Required]
    [MinLength(8, ErrorMessage = "Password must be at least 6 characters long.")]
    public string Password { get; set; } = string.Empty;
}

DTO로 받아서

 

public async Task<UserDto?> RegisterUserAsync(RegisterDto registerDto)
{
    if (!IsValidEmail(registerDto.Email) ||
        await _context.Users.AnyAsync(u => u.Email == registerDto.Email))
    {
        return null;
    }

    var newUser = new User
    {
        Email = registerDto.Email,
        Username = registerDto.Email.Split('@')[0],
        PasswordHash = BCrypt.Net.BCrypt.HashPassword(registerDto.Password),
        CreatedAt = DateTime.UtcNow
    };

    _context.Users.Add(newUser);
    await _context.SaveChangesAsync();

    return new UserDto
    {
        Id = newUser.Id,
        Email = newUser.Email,
        Username = newUser.Username
    };
}

컨트롤러 타고 서비스 로직 도착.

 

 

그래도 오늘은 주요 기능을 하나 추가할 수 있어서 뿌듯하네여.

오늘 작업 끝!