bitforum-backend/Admin/Pages/Config/Basic/Images.cshtml

@page
@model Admin.Pages.Config.Basic.ImagesModel
@{
    ViewData["Title"] = "이미지 설정";
}

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

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" class="mt-2" method="post" autocomplete="off" accept-charset="UTF-8" enctype="multipart/form-data">

        <!-- Favicon -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.FaviconFile" class="col-sm-2 col-form-label">Favicon</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.FaviconPath))
                {
                    <input asp-for="Input.Images.FaviconFile" class="form-control" accept=".ico,image/x-icon" />
                    <span asp-validation-for="Input.Images.FaviconFile" class="text-danger"></span>
                    <div class="form-text text-muted">브라우저 탭/즐겨찾기에 표시됩니다. 권장: .ico, 32x32 또는 48x48</div>
                }
                else
                {
                    <img src="@Model.Input.Images.FaviconPath" alt="favicon" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_favicon" id="deleteFavicon" />
                        <label class="form-check-label" for="deleteFavicon">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Logo Square -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.LogoSquareFile" class="col-sm-2 col-form-label">Logo-square</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.LogoSquarePath))
                {
                    <input asp-for="Input.Images.LogoSquareFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" />
                    <span asp-validation-for="Input.Images.LogoSquareFile" class="text-danger"></span>
                    <div class="form-text text-muted">정사각형 로고(프로필/아이콘 영역)에 사용됩니다. 권장: 512x512 PNG 투명 배경</div>
                }
                else
                {
                    <img src="@Model.Input.Images.LogoSquarePath" alt="logo-square" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_logo_square" id="deleteLogoSquare" />
                        <label class="form-check-label" for="deleteLogoSquare">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Logo Horizontal -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.LogoHorizontalFile" class="col-sm-2 col-form-label">Logo-horizontal</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.LogoHorizontalPath))
                {
                    <input asp-for="Input.Images.LogoHorizontalFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" />
                    <span asp-validation-for="Input.Images.LogoHorizontalFile" class="text-danger"></span>
                    <div class="form-text text-muted">헤더/상단 영역에 사용되는 가로형 로고입니다. 권장: 가로 200~400px 이상</div>
                }
                else
                {
                    <img src="@Model.Input.Images.LogoHorizontalPath" alt="logo-horizontal" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_logo_horizontal" id="deleteLogoHorizontal" />
                        <label class="form-check-label" for="deleteLogoHorizontal">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- OG Default -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.OgDefaultFile" class="col-sm-2 col-form-label">og-default</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.OgDefaultPath))
                {
                    <input asp-for="Input.Images.OgDefaultFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.OgDefaultFile" class="text-danger"></span>
                    <div class="form-text text-muted">SNS 공유(Open Graph) 기본 이미지입니다. 권장: 1200x630</div>
                }
                else
                {
                    <img src="@Model.Input.Images.OgDefaultPath" alt="og-default" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_og_default" id="deleteOgDefault" />
                        <label class="form-check-label" for="deleteOgDefault">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Twitter Image -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.TwitterImageFile" class="col-sm-2 col-form-label">Twitter-image</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.TwitterImagePath))
                {
                    <input asp-for="Input.Images.TwitterImageFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.TwitterImageFile" class="text-danger"></span>
                    <div class="form-text text-muted">트위터 카드 공유 이미지입니다. 권장: 1200x600 또는 1200x628</div>
                }
                else
                {
                    <img src="@Model.Input.Images.TwitterImagePath" alt="twitter-image" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_twitter_image" id="deleteTwitterImage" />
                        <label class="form-check-label" for="deleteTwitterImage">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Apple Touch Icon -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppleTouchIconFile" class="col-sm-2 col-form-label">Apple-touch-icon</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppleTouchIconPath))
                {
                    <input asp-for="Input.Images.AppleTouchIconFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppleTouchIconFile" class="text-danger"></span>
                    <div class="form-text text-muted">iOS 홈 화면에 추가 시 아이콘으로 사용됩니다. 권장: 180x180 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppleTouchIconPath" alt="apple-touch-icon" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_apple_touch_icon" id="deleteAppleTouchIcon" />
                        <label class="form-check-label" for="deleteAppleTouchIcon">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- App Icon 192 -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppIcon192File" class="col-sm-2 col-form-label">App-icon-192</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppIcon192Path))
                {
                    <input asp-for="Input.Images.AppIcon192File" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppIcon192File" class="text-danger"></span>
                    <div class="form-text text-muted">PWA/앱 아이콘(192)으로 사용됩니다. 권장: 192x192 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppIcon192Path" alt="app-icon-192" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_app_icon_192" id="deleteAppIcon192" />
                        <label class="form-check-label" for="deleteAppIcon192">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- App Icon 512 -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppIcon512File" class="col-sm-2 col-form-label">App-icon-512</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppIcon512Path))
                {
                    <input asp-for="Input.Images.AppIcon512File" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppIcon512File" class="text-danger"></span>
                    <div class="form-text text-muted">PWA/앱 아이콘(512)으로 사용됩니다. 권장: 512x512 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppIcon512Path" alt="app-icon-512" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_app_icon_512" id="deleteAppIcon512" />
                        <label class="form-check-label" for="deleteAppIcon512">삭제</label>
                    </div>
                }
            </div>
        </div>

        <hr/>

        <div class="row">
            <div class="col text-center p-3">
                <button type="submit" class="btn btn-success">저장하기</button>
            </div>
        </div>

        <br />
    </form>
</div>

@section Scripts {
    @* <partial name="_ValidationScriptsPartial" /> *@
}