UI 상업용 재설계 ③⑦⑧ 편성 자리 · 연무장 카드 · 내정 쌓인 보상(#1104) — 설계서 §3③ · §3⑦ · §3⑧

- 편성: 자리 = 등급 빛 원(Glow_Circle01 α 0.5) + 등급 색 원 틀 초상 + 병종 원 + 꼬리 이름 칩 · 빈 자리 = 진청 원 + Icon_Face 실루엣 · 필드 #0E7FF2 · 전열/후열 평행사변형 칩 · 헤더 부제 삭제 - 연무장 4카드: CardFrame04 카드색(탑 청 · 던전 자 · 투기장 적 · 토벌 주) + 빛 + 테두리 + 어두운 글자 판 + Title_Ribbon01 리본 제목 - 내정 순찰 쌓인 보상: ItemFrame 5층(청) + 아이콘 84 + 수량 38 - 테마 행: 스킨 7(card4 3 · 리본 4) · 아이콘 1(face) · 색 9 테스트 117/117 · console error 0 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-09 12:24:04 +09:00 · 2026-11-09 12:24:04 +09:00 · b5495f49ac
parent 5e79b9b0ea
commit b5495f49ac
5 changed files with 146 additions and 16 deletions
--- a/Assets/Data/UI/ui_theme.csv
+++ b/Assets/Data/UI/ui_theme.csv
@ -353,4 +353,21 @@ color,tre_none_deco,,,,,,#0A52B0,보물 칸 미보유 장식
 color,tre_none_light,,,,,,#1A64C080,보물 칸 미보유 윗면
 color,tre_none_glow,,,,,,#00000000,보물 칸 미보유 빛(없음)
 color,tre_none_icon,,,,,,#FFFFFF40,보물 칸 미보유 실루엣(흰 25 %)
+icon,face,IconMisc/Icon_Face.png,,,,,,빈 자리 얼굴 실루엣
+color,formation_field,,,,,,#0E7FF2,편성 필드 바탕(팩 Equipment)
+color,seat_empty,,,,,,#0B69D6,편성 빈 자리 원
+color,seat_empty_face,,,,,,#2695E6,편성 빈 자리 얼굴
+skin,card4_bg,Frame/CardFrame04_Bg.png,,1,,,,연무장 카드 바탕(틴트)
+skin,card4_glow,Frame/CardFrame04_Glow.png,,1,,,,연무장 카드 빛
+skin,card4_border,Frame/CardFrame04_Border.png,,1,,,,연무장 카드 테두리
+skin,ribbon_blue,Label/Title_Ribbon01_Blue.png,,1.7,,,,리본 제목 파랑
+skin,ribbon_purple,Label/Title_Ribbon01_Purple.png,,1.7,,,,리본 제목 보라
+skin,ribbon_red,Label/Title_Ribbon01_Red.png,,1.7,,,,리본 제목 빨강
+skin,ribbon_orange,Label/Title_Ribbon01_Orange.png,,1.7,,,,리본 제목 주황
+color,arena_0,,,,,,#3C88F6,연무장 카드 천하제일 탑(설계서 §3⑧)
+color,arena_1,,,,,,#9752FF,연무장 카드 일일 던전
+color,arena_2,,,,,,#F1424B,연무장 카드 투기장
+color,arena_3,,,,,,#FF9712,연무장 카드 적장 토벌
+color,arena_glow,,,,,,#FFFFFF59,연무장 카드 빛(흰 35 %)
+color,arena_inner,,,,,,#14182E8C,연무장 카드 글자 판(어둡게 55 %)
 font,title,Assets/UI/GUIPro/ResourcesData/Fonts/Sen-ExtraBold.ttf,,,,,,제목·숫자(라틴 Sen · 한글 = 폴백 Malgun Gothic · PD 결정 전)
--- a/Assets/Resources/UI/UITheme.asset
+++ b/Assets/Resources/UI/UITheme.asset
@ -433,6 +433,24 @@ MonoBehaviour:
    color: {r: 0, g: 0, b: 0, a: 0}
  - id: tre_none_icon
    color: {r: 1, g: 1, b: 1, a: 0.2509804}
+  - id: formation_field
+    color: {r: 0.05490196, g: 0.49803922, b: 0.9490196, a: 1}
+  - id: seat_empty
+    color: {r: 0.043137256, g: 0.4117647, b: 0.8392157, a: 1}
+  - id: seat_empty_face
+    color: {r: 0.14901961, g: 0.58431375, b: 0.9019608, a: 1}
+  - id: arena_0
+    color: {r: 0.23529412, g: 0.53333336, b: 0.9647059, a: 1}
+  - id: arena_1
+    color: {r: 0.5921569, g: 0.32156864, b: 1, a: 1}
+  - id: arena_2
+    color: {r: 0.94509804, g: 0.25882354, b: 0.29411766, a: 1}
+  - id: arena_3
+    color: {r: 1, g: 0.5921569, b: 0.07058824, a: 1}
+  - id: arena_glow
+    color: {r: 1, g: 1, b: 1, a: 0.34901962}
+  - id: arena_inner
+    color: {r: 0.078431375, g: 0.09411765, b: 0.18039216, a: 0.54901963}
  skins:
  - id: card
    pack: {fileID: 21300000, guid: 3070a6f23e6ca4273897acf1b7e8c5ce, type: 3}
@ -938,6 +956,55 @@ MonoBehaviour:
    ppu: 1
    inset: {x: 0, y: 0, z: 0, w: 0}
    overlayAlpha: 1
+  - id: card4_bg
+    pack: {fileID: 21300000, guid: 02d16dbf98f24414b9a2de2e2eb827c4, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card4_glow
+    pack: {fileID: 21300000, guid: c43b3cadd09cc4cfb831f398553411b9, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: card4_border
+    pack: {fileID: 21300000, guid: e2c03cb5e0e9b42f398207ee0e3bf743, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: ribbon_blue
+    pack: {fileID: 21300000, guid: 4705dc388c8e646b08b96ac581e8e1ae, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1.7
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: ribbon_purple
+    pack: {fileID: 21300000, guid: 205b81059899941c9a9596378eea8d34, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1.7
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: ribbon_red
+    pack: {fileID: 21300000, guid: 2495840c8944f4f05b1d8aa2a409ad7c, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1.7
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
+  - id: ribbon_orange
+    pack: {fileID: 21300000, guid: cb5f2999723b840f1899e5e01cbba819, type: 3}
+    samguk: {fileID: 0}
+    overlay: {fileID: 0}
+    ppu: 1.7
+    inset: {x: 0, y: 0, z: 0, w: 0}
+    overlayAlpha: 1
  icons:
  - id: cur_gold
    pack: {fileID: 21300000, guid: 6d5687fb0dd3a428d9cd26a6f36c6d78, type: 3}
@ -1227,6 +1294,10 @@ MonoBehaviour:
    pack: {fileID: 21300000, guid: f71c132174347405a9d3d63db9df3c0f, type: 3}
    samguk: {fileID: 0}
    tint: {r: 1, g: 1, b: 1, a: 1}
+  - id: face
+    pack: {fileID: 21300000, guid: 64a42696c813049fd9c00923ae5842df, type: 3}
+    samguk: {fileID: 0}
+    tint: {r: 1, g: 1, b: 1, a: 1}
  - id: tile_bridge
    pack: {fileID: 0}
    samguk: {fileID: 21300000, guid: 8e5bf7eb1e300474785ff2781eeb5093, type: 3}
--- a/Assets/Scripts/OutGame/Arena/ArenaScreen.cs
+++ b/Assets/Scripts/OutGame/Arena/ArenaScreen.cs
@ -12,6 +12,7 @@ namespace TKS.OutGame
    public class ArenaScreen : OutGameScreen
    {
        public static readonly string[] ModeNames = { "천하제일 탑", "일일 던전 3", "투기장", "적장 토벌" };
+        static readonly string[] Ribbons = { "ribbon_blue", "ribbon_purple", "ribbon_red", "ribbon_orange" }; // 카드 리본(설계서 §3⑧ · 테마 스킨 id)

        int page;
        RectTransform root;
@ -88,10 +89,26 @@ namespace TKS.OutGame
                float x = 24f + (i % 2) * (w + 16f);
                float y = -18f - (i / 2) * (h + 20f);
                var card = UiKit.Btn("Card" + i, root, "", 30, UiKit.Paper, UiKit.Ink, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(x, y), new Vector2(w, h), () => SetPage(k + 1));
+                if (UISkin.Has("card4_bg") && UISkin.Has(Ribbons[i]))
+                {
+                    // 카드(설계서 §3⑧) = 팩 CardFrame04 카드색 + 빛 + 테두리 · 글자 판 · 리본 제목
+                    var ci = card.GetComponent<Image>();
+                    UISkin.Apply(ci, "card4_bg");
+                    ci.color = UiKit.Col("arena_" + i, UiKit.Paper);
+                    UiKit.Layer(card.transform, "Glow", "card4_glow", UiKit.Col("arena_glow", UiKit.White), 0f, 0f, 0f, h * 0.5f);
+                    UiKit.Layer(card.transform, "Inner", "panel12", UiKit.Col("arena_inner", UiKit.Paper), 14f, 112f, 14f, 100f);
+                    UiKit.Layer(card.transform, "Border", "card4_border", UiKit.Col("card_border", UiKit.Line));
+                    var rib = UiKit.Skin(UiKit.Rect("Ribbon", card.transform, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, 4f), new Vector2(w - 40f, 96f)), Ribbons[i], UiKit.White);
+                    var rt = UiKit.Title(UiKit.FillLabel(rib.transform, ModeNames[i] + (i == 3 ? " <size=24>(이벤트)</size>" : ""), 42, UiKit.White, TextAnchor.MiddleCenter, true, 40f), true);
+                    rt.rectTransform.offsetMin = new Vector2(rt.rectTransform.offsetMin.x, 16f);
+                }
+                else
+                {
                    UiKit.Border(card.GetComponent<Image>(), UiKit.Line, 3f);
                    var head = UiKit.TopBand("Head", card.transform, 0f, 110f);
                    UiKit.Paint(head, UiKit.Red);
                    UiKit.FillLabel(head, ModeNames[i] + (i == 3 ? "\n<size=26>(이벤트)</size>" : ""), 44, UiKit.White);
+                }
                string[] tags = { "규칙", "보상", "입장" };
                for (int t = 0; t < 3; t++)
                {
--- a/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs
+++ b/Assets/Scripts/OutGame/Domestic/DomesticScreen.cs
@ -239,8 +239,19 @@ namespace TKS.OutGame
            var got = Panel(p, "Stored", 728f, 220f);
            UiKit.Label(got, "쌓인 보상", 38, UiKit.Ink, TextAnchor.MiddleLeft, new Vector2(0f, 1f), new Vector2(0f, 1f), new Vector2(24f, -8f), new Vector2(600f, 56f));
            string[] sv = { "골드\n" + y.gold.ToString("N0"), "병사 경험\n" + y.exp.ToString("N0"), "승급 장비\n" + y.gear, "청동 상자\n" + y.chests };
+            string[] sn = { y.gold.ToString("N0"), y.exp.ToString("N0"), y.gear.ToString(), y.chests.ToString() };
            for (int i = 0; i < 4; i++)
            {
+                if (UISkin.Has("item_bg") && UISkin.Icon(rIcon[i]) != null)
+                {
+                    // 쌓인 보상 칸(설계서 §3⑦) = 팩 ItemFrame 5층 + 아이콘 + 수량
+                    var cell = UiKit.Rect("Chip" + i, got, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * 250f, 16f), new Vector2(232f, 130f));
+                    UiKit.ItemSlot(cell, "gear_blue_", true);
+                    UiKit.DropShadow(UiKit.Icon(cell, rIcon[i], new Vector2(0f, 0.5f), new Vector2(0f, 0.5f), new Vector2(14f, 4f), 84f), 4f);
+                    var v = UiKit.Title(UiKit.Label(cell, sn[i], 38, UiKit.White, TextAnchor.MiddleRight, new Vector2(1f, 0.5f), new Vector2(1f, 0.5f), new Vector2(-16f, 0f), new Vector2(130f, 60f)), true);
+                    v.horizontalOverflow = HorizontalWrapMode.Overflow;
+                    continue;
+                }
                var chip = UiKit.Box("Chip" + i, got, new Vector2(0f, 0f), new Vector2(0f, 0f), new Vector2(24f + i * 250f, 16f), new Vector2(232f, 130f), UiKit.Dark);
                UiKit.Border(chip, rc[i], 3f);
                UiKit.FillLabel(chip.transform, sv[i], 30, UiKit.Ink);
--- a/Assets/Scripts/OutGame/UI/FormationScreen.cs
+++ b/Assets/Scripts/OutGame/UI/FormationScreen.cs
@ -45,7 +45,7 @@ namespace TKS.OutGame
        {
            int n = Root.Battle.Config.playerSpawnPoints.Length;
            int front = Mathf.Clamp(S.Db.Economy.FormationFront, 0, n);
-            Header("편성", "출정 좌측 · 출전 " + n + "칸", true);
+            Header("편성", "", true); // 부제 삭제(설계서 §2-5)
            var body = Body();

            for (int i = 0; i < S.Save.presets.Count; i++)
@ -57,7 +57,7 @@ namespace TKS.OutGame
            UiKit.FillLabel(chip.transform, "편성 제약 없음", 30, UiKit.White);

            var board = UiKit.TopBand("Board", body, 122f, 600f, 24f, 24f);
-            var bimg = UiKit.Paint(board, UiKit.Paper);
+            var bimg = UiKit.Paint(board, UiKit.Col("formation_field", UiKit.Paper)); // 필드 = 팩 Equipment 파랑(설계서 §3③)
            UiKit.Border(bimg, UiKit.Line, 3f);
            Pill(board, "전열", UiKit.Red, -116f);
            Pill(board, "후열", UiKit.Dark, -380f);
@ -94,8 +94,11 @@ namespace TKS.OutGame

        static void Pill(RectTransform board, string label, Color c, float y)
        {
-            var p = UiKit.Box("Row_" + label, board, new Vector2(0f, 1f), new Vector2(0f, 0.5f), new Vector2(20f, y), new Vector2(140f, 62f), c);
-            UiKit.FillLabel(p.transform, label, 32, UiKit.White);
+            // 전열·후열 라벨 = 평행사변형 칩(설계서 §3③ · 전열 = 붉은 · 후열 = 어두운)
+            var p = UISkin.Has("para_orange")
+                ? UiKit.Skin(UiKit.Rect("Row_" + label, board, new Vector2(0f, 1f), new Vector2(0f, 0.5f), new Vector2(20f, y), new Vector2(140f, 62f)), "para_orange", c)
+                : UiKit.Box("Row_" + label, board, new Vector2(0f, 1f), new Vector2(0f, 0.5f), new Vector2(20f, y), new Vector2(140f, 62f), c);
+            UiKit.Title(UiKit.FillLabel(p.transform, label, 32, UiKit.White), true);
        }

        public override void OnShow()
@ -280,7 +283,6 @@ namespace TKS.OutGame
                t.color = on ? UiKit.White : UiKit.Ink;
                t.text = "프리셋 " + (i + 1) + (i == S.Save.presetIdx ? " <size=22>출전</size>" : "") + (on && dirty ? "*" : "");
            }
-            int front = S.Db.Economy.FormationFront;
            for (int i = 0; i < slots.Count; i++)
            {
                var s = slots[i];
@ -288,18 +290,30 @@ namespace TKS.OutGame
                var id = i < work.Count ? work[i] : "";
                var h = S.Def(id);
                if (i == selected) UiKit.Dot("Select", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, 12f), 236f, UiKit.Star);
-                Color ring = i < front ? UiKit.Red : UiKit.Dark;
-                UiKit.Dot("Ring", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, 0f), 212f, ring);
                if (h != null)
                {
-                    UiKit.Portrait("Face", s, h, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), new Vector2(192f, 192f), true, 2.1f, new Color(0.94f, 0.91f, 0.85f));
-                    var tag = UiKit.Box("Name", s, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 4f), new Vector2(170f, 50f), UiKit.Dark);
-                    UiKit.FillLabel(tag.transform, h.nameKo, 28, UiKit.White);
+                    // 자리(설계서 §3③) = 등급 빛 원 + 등급 색 원 틀 초상 + 병종 원 + 이름 꼬리 칩
+                    var hs = S.Save.Hero(id);
+                    string g = h.isSoldier || hs == null || string.IsNullOrEmpty(hs.grade) ? "white" : hs.grade;
+                    var gc = UiKit.Col("grade_" + g + "_glow", UiKit.White);
+                    gc.a *= 0.55f;
+                    var glow = UiKit.Skin(UiKit.Rect("Glow", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 0.5f), new Vector2(0f, -106f), new Vector2(290f, 290f)), "glow_circle", gc);
+                    glow.enabled = UISkin.Has("glow_circle");
+                    UiKit.Portrait("Face", s, h, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), new Vector2(192f, 192f), true, 2.1f, UiKit.Col("grade_" + g + "_bg", UiKit.Paper));
+                    var ring = UiKit.Skin(UiKit.Rect("Type", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 0.5f), new Vector2(-78f, -30f), new Vector2(54f, 54f)), "dot", UiKit.White);
+                    ring.preserveAspect = true;
+                    UiKit.Icon(ring.transform, UiKit.TypeIconId(h.type), new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), Vector2.zero, 38f);
+                    var tag = UiKit.Skin(UiKit.Rect("Name", s, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 4f), new Vector2(170f, 50f)), "tail", UiKit.Col("chip_dark", UiKit.Dark));
+                    UiKit.Title(UiKit.FillLabel(tag.transform, h.nameKo, 28, UiKit.White), true);
                }
                else
                {
-                    UiKit.Dot("Empty", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), 192f, UiKit.Slot);
-                    UiKit.Label(s, "+\n<size=26>빈 칸</size>", 60, UiKit.InkSoft, TextAnchor.MiddleCenter, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -40f), new Vector2(200f, 140f));
+                    // 빈 자리 = 진청 원 + 얼굴 실루엣
+                    var e = UiKit.Skin(UiKit.Rect("Empty", s, new Vector2(0.5f, 1f), new Vector2(0.5f, 1f), new Vector2(0f, -10f), new Vector2(192f, 192f)), "circle_frame", UiKit.Col("seat_empty", UiKit.Slot));
+                    e.preserveAspect = true;
+                    var face = UiKit.Icon(e.transform, "face", new Vector2(0.5f, 0.5f), new Vector2(0.5f, 0.5f), new Vector2(0f, 6f), 116f);
+                    if (face != null) face.color = UiKit.Col("seat_empty_face", UiKit.InkSoft);
+                    UiKit.Label(s, "빈 칸", 26, UiKit.InkSoft, TextAnchor.MiddleCenter, new Vector2(0.5f, 0f), new Vector2(0.5f, 0f), new Vector2(0f, 8f), new Vector2(200f, 44f));
                }
            }