dpot-backend/Admin/Pages/Member/Grade/Edit.cshtml

@page "{id:int}"
@model Admin.Pages.Member.Grade.EditModel
@{
    ViewData["Title"] = "회원등급 수정";
}

<div class="container">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off" enctype="multipart/form-data">
        <input type="hidden" asp-for="Input.ID" />

        <div class="row mb-2">
            <label class="col-sm-2 col-form-label"><span class="text-danger">*</span> PK</label>
            <div class="col-sm-10">
                <input type="text" readonly class="form-control-plaintext" value="@Model.Input.ID" />
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.ImageFile" class="col-sm-2 col-form-label">이미지</label>
            <div class="col-sm-10">
                @if (Model.Input.Image is not null && Model.Input.Image != string.Empty)
                {
                    <img src="@Url.Content(Model.Input.Image)" class="img-fluid img-thumbnail" alt="@Model.Input.KorName" />
                    <div class="form-check pt-2">
                        <input type="checkbox" name="isImageRemove" id="isImageRemove" class="form-check-input" value="true" />
                        <label for="isImageRemove" class="form-check-label">삭제</label>
                    </div>

                    <input type="hidden" asp-for="Input.Image" class="form-control" />
                }
                else
                {
                    <div id="memberGradePrev" hidden>
                        <img class="img-fluid img-thumbnail" alt="이미지 미리보기" /><br/>
                        <button type="button" class="btn btn-sm btn-danger mt-2 mb-2 btn-remove-preview">삭제</button>
                    </div>
                    <input type="file" asp-for="Input.ImageFile" class="form-control" accept="image/*" />
                    <span asp-validation-for="Input.ImageFile" class="text-danger"></span>
                }
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.KorName" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 한글 명</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.KorName" class="form-control" required />
                <span asp-validation-for="Input.KorName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.EngName" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 영문 명</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.EngName" class="form-control" required />
                <span asp-validation-for="Input.EngName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Description" class="col-sm-2 col-form-label">내용</label>
            <div class="col-sm-10">
                <textarea asp-for="Input.Description" class="form-control" placeholder="최대 1000자" rows="2" maxlength="1000"></textarea>
                <span asp-validation-for="Input.Description" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Order" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 순서</label>
            <div class="col-sm-10">
                <input type="number" asp-for="Input.Order" class="form-control d-inline w-auto" min="-9999" max="9999" required />
                <span asp-validation-for="Input.Order" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.TotalDonationCount" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 누적 후원 횟수</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="number" asp-for="Input.TotalDonationCount" class="form-control w-auto flex-grow-0" min="0" max="1000000000" required />
                    <span asp-validation-for="Input.TotalDonationCount" class="text-danger"></span>
                    <div class="input-group-text">회</div>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.TotalDonationAmount" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 누적 후원 금액</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="number" asp-for="Input.TotalDonationAmount" class="form-control w-auto flex-grow-0" min="0" max="1000000000" required />
                    <span asp-validation-for="Input.TotalDonationAmount" class="text-danger"></span>
                    <div class="input-group-text">원</div>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.TextColor" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 표시 색상</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.TextColor" class="form-control w-auto flex-grow-0" minlength="4" maxlength="7" required />
                <div class="form-text text-muted">
                    색상 코드는 #RRGGBB 형식으로 입력하세요. (예: #FF5733)
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsActive" class="col-sm-2 col-form-label">사용 여부</label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsActive" class="form-check-input" />
                    <label class="form-check-label" asp-for="Input.IsActive">
                        사용합니다.
                    </label>
                    <span asp-validation-for="Input.IsActive" class="text-danger"></span>
                </div>
            </div>
        </div>
        @if (Model.Input.UpdatedAt is not null)
        {
            <div class="row mb-2">
                <label class="col-sm-2 col-form-label">수정일시</label>
                <div class="col-sm-10">
                    <input asp-for="Input.UpdatedAt" class="form-control-plaintext" type="text" readonly />
                </div>
            </div>
        }
        @if (Model.Input.CreatedAt != null)
        {
            <div class="row mb-2">
                <label class="col-sm-2 col-form-label">등록일시</label>
                <div class="col-sm-10">
                    <input asp-for="Input.CreatedAt" class="form-control-plaintext" type="text" readonly />
                </div>
            </div>
        }
        <hr />
        <div class="d-grid gap-2 text-center d-md-block">
            <button type="submit" class="btn btn-sm btn-success">저장</button>
            <a asp-page="Index" class="btn btn-sm btn-secondary">취소</a>
        </div>
        <br />
    </form>
</div>

@section Scripts {
    <script>
        setupImagePreview("Input_ImageFile", "memberGradePrev");

        // 이미지 삭제
        let oldImageSrc = "";
        document.getElementById("isImageRemove")?.addEventListener("change", function (e) {
            let image = document.querySelector("img.img-thumbnail");
            if (image) {
                if (e.target.checked) {
                    oldImageSrc = image.src;
                    image.src = "";
                    image.style.display = "none";
                } else {
                    image.src = oldImageSrc;
                    image.style.display = "";
                }
            }
        });
    </script>
}