Form, Validation

🏗️ 1. 리스트 기반 데이터 모델 구성

기존에는 배열(WeatherForecast[]) 형태로 예보 데이터를 저장했지만, 입력 추가가 용이하도록 List 형태로 변경합니다.

public Task<List<WeatherForecast>> GetForecastAsync(DateTime startDate)
{
    return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
    {
        Date = startDate.AddDays(index),
        TemperatureC = Random.Shared.Next(-20, 55),
        Summary = Summaries[Random.Shared.Next(Summaries.Length)]
    }).ToList());
}

📌 ToList()를 사용하면 .Add()로 동적으로 데이터를 추가할 수 있습니다.

private List<WeatherForecast> _forecasts;

protected override async Task OnInitializedAsync()
{
    _forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}

---

🧮 2. 폼 팝업 UI 구성

사용자가 데이터를 입력할 수 있는 버튼을 만들고, 클릭 시 모달 팝업을 띄우는 방식으로 구현합니다.

<button class="btn btn-primary" @onclick="AddNewForecast">
    Add New Forecast
</button>

bool _showPopup = false;
WeatherForecast _addForecast;

void AddNewForecast()
{
    _showPopup = true;
    _addForecast = new WeatherForecast();
}

✔️ _showPopup으로 팝업 표시 여부를 제어하고, WeatherForecast 인스턴스를 초기화합니다.

---

🔐 3. Save & Close 기능 구현

void SaveForecast()
{
    _showPopup = false;
    _addForecast.Date = DateTime.Now; // 저장 시 날짜 자동 할당
    _forecasts.Add(_addForecast);
}

void ClosePopup()
{
    _showPopup = false;
}

✔️ 저장 시 날짜는 현재 시점으로 자동 설정되며, 리스트에 추가됩니다.

---

🧾 4. Modal UI에 폼 연결

_showPopup == true일 때만 보여지는 Modal 영역을 구성합니다. <EditForm>을 사용하여 Validation을 통합합니다.

@if (_showPopup)
{
    <div class="modal" style="display:block" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add New Forecast</h3>
                    <button type="button" class="close" @onclick="ClosePopup">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <EditForm Model="_addForecast" OnValidSubmit="SaveForecast">
                        <DataAnnotationsValidator />
                        <ValidationSummary />

                        <label for="TemperatureC">Temperature (C)</label>
                        <InputNumber class="form-control" placeholder="TemperatureC"
                                     @bind-Value="_addForecast.TemperatureC" />

                        <label for="Summary">Summary</label>
                        <InputText class="form-control" placeholder="Summary"
                                   @bind-Value="_addForecast.Summary" />

                        <br />
                        <button class="btn btn-primary" type="submit">Save</button>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
}

✔️ EditForm 내부에 폼 요소들을 배치하며, OnValidSubmit을 통해 검증에 성공한 경우에만 저장됩니다.
✔️ DataAnnotationsValidator는 모델의 유효성 검사를 활성화하며, ValidationSummary는 에러 메시지를 표시합니다.

---

🛡️ 5. 유효성 검사 (Validation) 정의

WeatherForecast 모델에 유효성 검사 속성을 추가합니다.

[Required(ErrorMessage = "Need TemperatureC!")]
[Range(typeof(int), "-100", "100")]
public int TemperatureC { get; set; }

[Required(ErrorMessage = "Need Summary!")]
[StringLength(10, MinimumLength = 2,
    ErrorMessage = "Summary must be between 2 and 10 characters.")]
public string? Summary { get; set; }

📌 주요 애너테이션 요약

애너테이션	설명
[Required]	필수 입력 항목이며, 입력되지 않으면 오류 발생
[Range]	허용 가능한 정수 범위를 제한 (-100~100)
[StringLength]	문자열 길이를 제한 (예: 최소 2, 최대 10자)

---