refactor: 문서 개선 중

This commit is contained in:
donghyeon-ka
2026-09-21 14:30:55 +09:00
parent c93cdea150
commit 805a18f486
1497 changed files with 525837 additions and 59152 deletions
@@ -10,13 +10,13 @@ kc-lab-2 를 잃으면 keycloak-1 은 살아 있지만 PostgreSQL 이 같이 죽
## Elements and evidence
- **외부 요청** (actor): 사용자. Evidence: L221L228.
- **진입 경로 (kc-lab-1)** (gateway): traefik 과 API 서버. 잃으면 000 이다. Evidence: L221L231.
- **keycloak-0 (kc-lab-2)** (service): 4b 에서는 계속 돌고 있었다. Evidence: L221L231.
- **PostgreSQL (kc-lab-2)** (datastore): 4a 에서 함께 죽는다. 잃으면 503 이다. Evidence: L221L233.
- **외부 요청** (actor): 사용자. Evidence: L533L538.
- **진입 경로 (kc-lab-1)** (gateway): traefik 과 API 서버. 잃으면 000 이다. Evidence: L533L540.
- **keycloak-0 (kc-lab-2)** (service): 4b 에서는 계속 돌고 있었다. Evidence: L533L540.
- **PostgreSQL (kc-lab-2)** (datastore): 4a 에서 함께 죽는다. 잃으면 503 이다. Evidence: L533L543.
## Relationships
- **외부 요청 → 진입 경로 (kc-lab-1):** 요청. Evidence: L221L228.
- **진입 경로 (kc-lab-1) → keycloak-0 (kc-lab-2):** 라우팅. Evidence: L221L228.
- **keycloak-0 (kc-lab-2) → PostgreSQL (kc-lab-2):** 세션 조회. Evidence: L221L233.
- **외부 요청 → 진입 경로 (kc-lab-1):** 요청. Evidence: L533L538.
- **진입 경로 (kc-lab-1) → keycloak-0 (kc-lab-2):** 라우팅. Evidence: L533L538.
- **keycloak-0 (kc-lab-2) → PostgreSQL (kc-lab-2):** 세션 조회. Evidence: L533L543.
@@ -1,35 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2026-07-23T00:00:00.000Z" agent="techviz-harness" version="24.7.17" type="device">
<diagram id="a4-two-node-losses" name="노드를 잃는 두 가지">
<mxGraphModel dx="680" dy="716" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<mxGraphModel dx="680" dy="1222" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1222" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="n_client" value="외부 요청" tooltip="사용자. | Evidence: L221-L228" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;dashed=1;fillColor=#f5f7fa;strokeColor=#2563eb;strokeWidth=2;" vertex="1" parent="1">
<mxGeometry x="92.5" y="60.0" width="150.0" height="84.0" as="geometry"/>
<mxCell id="n_client" value="외부 요청" tooltip="사용자. | Evidence: L533-L538" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;dashed=1;fillColor=#f5f7fa;strokeColor=#2563eb;strokeWidth=2;" vertex="1" parent="1">
<mxGeometry x="35.0" y="145.0" width="150.0" height="84.0" as="geometry"/>
</mxCell>
<mxCell id="n_entry" value="진입 경로 (kc-lab-1)&lt;br/&gt;kubectl 불통" tooltip="traefik 과 API 서버. 잃으면 000 이다. | Evidence: L221-L231" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;rhombus;perimeter=rhombusPerimeter;fillColor=#fff7e8;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxGeometry x="92.5" y="240.0" width="150.0" height="71.0" as="geometry"/>
<mxCell id="n_entry" value="진입 경로 (kc-lab-1)&lt;br/&gt;kubectl 불통" tooltip="traefik 과 API 서버. 잃으면 000 이다. | Evidence: L533-L540" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;rhombus;perimeter=rhombusPerimeter;fillColor=#fff7e8;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxGeometry x="41.5" y="455.0" width="150.0" height="71.0" as="geometry"/>
</mxCell>
<mxCell id="n_workload" value="keycloak-0 (kc-lab-2)&lt;br/&gt;도달 불가" tooltip="4b 에서는 계속 돌고 있었다. | Evidence: L221-L231" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="77.0" y="407.0" width="181.0" height="71.0" as="geometry"/>
<mxCell id="n_workload" value="keycloak-0 (kc-lab-2)&lt;br/&gt;도달 불가" tooltip="4b 에서는 계속 돌고 있었다. | Evidence: L533-L540" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="41.5" y="765.0" width="181.0" height="71.0" as="geometry"/>
</mxCell>
<mxCell id="n_store" value="PostgreSQL (kc-lab-2)&lt;br/&gt;local-path PVC · 재배치 불가" tooltip="4a 에서 함께 죽는다. 잃으면 503 이다. | Evidence: L221-L233" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;shape=cylinder3;boundedLbl=1;backgroundOutline=1;fillColor=#eef6fb;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxGeometry x="70.0" y="574.0" width="195.0" height="97.0" as="geometry"/>
<mxCell id="n_store" value="PostgreSQL (kc-lab-2)&lt;br/&gt;local-path PVC · 재배치 불가" tooltip="4a 에서 함께 죽는다. 잃으면 503 이다. | Evidence: L533-L543" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;shape=cylinder3;boundedLbl=1;backgroundOutline=1;fillColor=#eef6fb;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxGeometry x="41.5" y="1106.0" width="195.0" height="71.0" as="geometry"/>
</mxCell>
<mxCell id="e_c-e" value="요청" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_client" target="n_entry">
<mxGeometry relative="1" as="geometry">
<mxPoint x="191.5" y="192.0" as="offset"/>
<mxPoint x="113.2" y="314.0" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="e_e-w" value="라우팅" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_entry" target="n_workload">
<mxGeometry relative="1" as="geometry">
<mxPoint x="191.5" y="359.0" as="offset"/>
<mxPoint x="124.2" y="617.5" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="e_w-s" value="세션 조회" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_workload" target="n_store">
<mxGeometry relative="1" as="geometry">
<mxPoint x="191.5" y="526.0" as="offset"/>
<mxPoint x="135.5" y="943.0" as="offset"/>
</mxGeometry>
</mxCell>
</root>
@@ -6,10 +6,10 @@
{
"id": "edge-c-e",
"type": "arrow",
"x": 167.5,
"y": 144.0,
"width": 0.0,
"height": 96.0,
"x": 110.0,
"y": 229.0,
"width": 6.5,
"height": 226.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
@@ -37,15 +37,15 @@
],
[
0.0,
48.0
113.0
],
[
0.0,
48.0
6.5,
113.0
],
[
0.0,
96.0
6.5,
226.0
]
],
"lastCommittedPoint": null,
@@ -66,8 +66,8 @@
{
"id": "edge-label-c-e",
"type": "text",
"x": 146.5,
"y": 180.0,
"x": 68.25,
"y": 302.0,
"width": 90,
"height": 24,
"angle": 0,
@@ -105,10 +105,10 @@
{
"id": "edge-e-w",
"type": "arrow",
"x": 167.5,
"y": 311.0,
"width": 0.0,
"height": 96.0,
"x": 116.5,
"y": 526.0,
"width": 15.5,
"height": 239.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
@@ -136,15 +136,15 @@
],
[
0.0,
48.0
119.5
],
[
0.0,
48.0
15.5,
119.5
],
[
0.0,
96.0
15.5,
239.0
]
],
"lastCommittedPoint": null,
@@ -165,8 +165,8 @@
{
"id": "edge-label-e-w",
"type": "text",
"x": 146.5,
"y": 347.0,
"x": 79.25,
"y": 605.5,
"width": 90,
"height": 24,
"angle": 0,
@@ -204,10 +204,10 @@
{
"id": "edge-w-s",
"type": "arrow",
"x": 167.5,
"y": 478.0,
"width": 0.0,
"height": 96.0,
"x": 132.0,
"y": 836.0,
"width": 7.0,
"height": 270.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
@@ -235,15 +235,15 @@
],
[
0.0,
48.0
135.0
],
[
0.0,
48.0
7.0,
135.0
],
[
0.0,
96.0
7.0,
270.0
]
],
"lastCommittedPoint": null,
@@ -264,8 +264,8 @@
{
"id": "edge-label-w-s",
"type": "text",
"x": 146.5,
"y": 514.0,
"x": 90.5,
"y": 931.0,
"width": 90,
"height": 24,
"angle": 0,
@@ -303,8 +303,8 @@
{
"id": "node-client",
"type": "rectangle",
"x": 92.5,
"y": 60.0,
"x": 35.0,
"y": 145.0,
"width": 150.0,
"height": 84.0,
"angle": 0,
@@ -333,8 +333,8 @@
{
"id": "node-label-client",
"type": "text",
"x": 102.5,
"y": 70.0,
"x": 45.0,
"y": 155.0,
"width": 130.0,
"height": 64.0,
"angle": 0,
@@ -372,8 +372,8 @@
{
"id": "node-entry",
"type": "rectangle",
"x": 92.5,
"y": 240.0,
"x": 41.5,
"y": 455.0,
"width": 150.0,
"height": 71.0,
"angle": 0,
@@ -402,8 +402,8 @@
{
"id": "node-label-entry",
"type": "text",
"x": 102.5,
"y": 250.0,
"x": 51.5,
"y": 465.0,
"width": 130.0,
"height": 51.0,
"angle": 0,
@@ -441,8 +441,8 @@
{
"id": "node-workload",
"type": "rectangle",
"x": 77.0,
"y": 407.0,
"x": 41.5,
"y": 765.0,
"width": 181.0,
"height": 71.0,
"angle": 0,
@@ -471,8 +471,8 @@
{
"id": "node-label-workload",
"type": "text",
"x": 87.0,
"y": 417.0,
"x": 51.5,
"y": 775.0,
"width": 161.0,
"height": 51.0,
"angle": 0,
@@ -510,10 +510,10 @@
{
"id": "node-store",
"type": "rectangle",
"x": 70.0,
"y": 574.0,
"x": 41.5,
"y": 1106.0,
"width": 195.0,
"height": 97.0,
"height": 71.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#e7f5ff",
@@ -540,10 +540,10 @@
{
"id": "node-label-store",
"type": "text",
"x": 80.0,
"y": 584.0,
"x": 51.5,
"y": 1116.0,
"width": 175.0,
"height": 77.0,
"height": 51.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
@@ -2,14 +2,14 @@
"harness_version": "0.2.0",
"spec_id": "a4-two-node-losses",
"spec_version": "1.1",
"spec_sha256": "3c9bc2fcbc853f176e8a38fc838062a36779083d1affe8e46a560484e230233b",
"spec_sha256": "247acbd7b3438959cb84e1d84475eb7e45d39c92835d4d6dae400ff8f9137186",
"source_context": {
"document": "docs/keycloak-session-store/final/document.md",
"document_sha256": "1d44cba1905544d92f1d26ae36a8deb64a3db3914d6b488fd30d6ae7f8cfbabe",
"document_sha256": "28aef96a2bbb94fbb10ade26a71238fee62a5a4d9fa6e7749ae98cfd0a65e560",
"anchor": {
"kind": "heading",
"value": "A-4 · 노드 상실 — 둘 다 전면 장애지만 이유가 다르다",
"line": 223
"line": 533
}
},
"outputs": [
@@ -21,7 +21,7 @@
"a4-two-node-losses.excalidraw",
"a4-two-node-losses.alt.md"
],
"lint_issue_count": 0,
"lint_issue_count": 1,
"assumption_count": 0,
"assumptions_allowed": false,
"composition_profile": "component-flow",
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="680" height="716" viewBox="0 0 680 716" role="img" aria-labelledby="diagram-title diagram-description">
<svg xmlns="http://www.w3.org/2000/svg" width="680" height="1222" viewBox="0 0 680 1222" role="img" aria-labelledby="diagram-title diagram-description">
<title id="diagram-title">노드를 잃는 두 가지</title>
<desc id="diagram-description">kc-lab-2 를 잃으면 keycloak-1 은 살아 있지만 PostgreSQL 이 같이 죽어 외부 응답이 503 이 된다. kc-lab-1 을 잃으면 keycloak-0 은 계속 돌고 있는데 traefik 과 API 서버가 사라져 연결 자체가 안 된다. 워크로드가 멀쩡한데 도달할 수 없어 장애다. 진입점이 단일 노드에 있으면 워크로드 이중화는 의미가 없다.</desc>
<metadata>{&quot;techviz&quot;:{&quot;spec_version&quot;:&quot;1.1&quot;,&quot;id&quot;:&quot;a4-two-node-losses&quot;,&quot;profile&quot;:&quot;component-flow&quot;},&quot;source_context&quot;:{&quot;document&quot;:&quot;docs/keycloak-session-store/final/document.md&quot;,&quot;document_sha256&quot;:&quot;1d44cba1905544d92f1d26ae36a8deb64a3db3914d6b488fd30d6ae7f8cfbabe&quot;,&quot;anchor&quot;:{&quot;kind&quot;:&quot;heading&quot;,&quot;value&quot;:&quot;A-4 · 노드 상실 — 둘 다 전면 장애지만 이유가 다르다&quot;,&quot;line&quot;:223}},&quot;evidence_policy&quot;:&quot;Each factual element cites source lines or is marked assumption.&quot;,&quot;diagram_only&quot;:true}</metadata>
<metadata>{&quot;techviz&quot;:{&quot;spec_version&quot;:&quot;1.1&quot;,&quot;id&quot;:&quot;a4-two-node-losses&quot;,&quot;profile&quot;:&quot;component-flow&quot;},&quot;source_context&quot;:{&quot;document&quot;:&quot;docs/keycloak-session-store/final/document.md&quot;,&quot;document_sha256&quot;:&quot;28aef96a2bbb94fbb10ade26a71238fee62a5a4d9fa6e7749ae98cfd0a65e560&quot;,&quot;anchor&quot;:{&quot;kind&quot;:&quot;heading&quot;,&quot;value&quot;:&quot;A-4 · 노드 상실 — 둘 다 전면 장애지만 이유가 다르다&quot;,&quot;line&quot;:533}},&quot;evidence_policy&quot;:&quot;Each factual element cites source lines or is marked assumption.&quot;,&quot;diagram_only&quot;:true}</metadata>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
@@ -49,36 +49,36 @@
.timeline-detail { font-size: 11px; fill: #4b5563; text-anchor: middle; }
</style>
</defs>
<rect class="canvas" width="680" height="716" />
<polyline class="edge kind-request style-solid emphasis-normal" points="167.5,144.0 167.5,192.0 167.5,192.0 167.5,240.0" data-evidence="221-228" />
<rect class="edge-label-bg" x="169.5" y="178.0" width="44.0" height="22" rx="3" />
<text class="edge-label" x="191.5" y="193.0">요청</text>
<polyline class="edge kind-request style-solid emphasis-normal" points="167.5,311.0 167.5,359.0 167.5,359.0 167.5,407.0" data-evidence="221-228" />
<rect class="edge-label-bg" x="169.5" y="345.0" width="44.0" height="22" rx="3" />
<text class="edge-label" x="191.5" y="360.0">라우팅</text>
<polyline class="edge kind-read style-solid emphasis-normal" points="167.5,478.0 167.5,526.0 167.5,526.0 167.5,574.0" data-evidence="221-233" />
<rect class="edge-label-bg" x="165.8" y="512.0" width="51.5" height="22" rx="3" />
<text class="edge-label" x="191.5" y="527.0">세션 조회</text>
<rect class="canvas" width="680" height="1222" />
<polyline class="edge kind-request style-solid emphasis-normal" points="110.0,229.0 110.0,342.0 116.5,342.0 116.5,455.0" data-evidence="533-538" />
<rect class="edge-label-bg" x="91.2" y="300.0" width="44.0" height="22" rx="3" />
<text class="edge-label" x="113.2" y="315.0">요청</text>
<polyline class="edge kind-request style-solid emphasis-normal" points="116.5,526.0 116.5,645.5 132.0,645.5 132.0,765.0" data-evidence="533-538" />
<rect class="edge-label-bg" x="102.2" y="603.5" width="44.0" height="22" rx="3" />
<text class="edge-label" x="124.2" y="618.5">라우팅</text>
<polyline class="edge kind-read style-solid emphasis-normal" points="132.0,836.0 132.0,971.0 139.0,971.0 139.0,1106.0" data-evidence="533-543" />
<rect class="edge-label-bg" x="109.8" y="929.0" width="51.5" height="22" rx="3" />
<text class="edge-label" x="135.5" y="944.0">세션 조회</text>
<g id="node-client">
<g class="actor-symbol emphasis-primary" data-evidence="221-228"><circle cx="167.5" cy="80.0" r="11.0" /><line x1="167.5" y1="96.0" x2="167.5" y2="105.0" /><line x1="149.5" y1="106.0" x2="185.5" y2="106.0" /><line x1="167.5" y1="105.0" x2="152.5" y2="122.0" /><line x1="167.5" y1="105.0" x2="182.5" y2="122.0" /></g>
<text class="node-label" x="167.5" y="137.0">외부 요청</text>
<g class="actor-symbol emphasis-primary" data-evidence="533-538"><circle cx="110.0" cy="165.0" r="11.0" /><line x1="110.0" y1="181.0" x2="110.0" y2="200.0" /><line x1="92.0" y1="191.0" x2="128.0" y2="191.0" /><line x1="110.0" y1="200.0" x2="95.0" y2="217.0" /><line x1="110.0" y1="200.0" x2="125.0" y2="217.0" /></g>
<text class="node-label" x="110.0" y="222.0">외부 요청</text>
</g>
<g id="node-entry">
<polygon class="node-shape kind-gateway emphasis-warning role-control" data-evidence="221-231" points="167.5,240.0 242.5,275.5 167.5,311.0 92.5,275.5" />
<text class="node-label" x="167.5" y="267.0">진입 경로 (kc-lab-1)</text>
<line class="node-detail-divider" x1="106.5" y1="288.0" x2="228.5" y2="288.0" />
<text class="node-detail" x="108.5" y="305.0">kubectl 불통</text>
<polygon class="node-shape kind-gateway emphasis-warning role-control" data-evidence="533-540" points="116.5,455.0 191.5,490.5 116.5,526.0 41.5,490.5" />
<text class="node-label" x="116.5" y="482.0">진입 경로 (kc-lab-1)</text>
<line class="node-detail-divider" x1="55.5" y1="503.0" x2="177.5" y2="503.0" />
<text class="node-detail" x="57.5" y="520.0">kubectl 불통</text>
</g>
<g id="node-workload">
<rect class="node-shape kind-service emphasis-normal role-control" data-evidence="221-231" x="77.0" y="407.0" width="181.0" height="71.0" rx="7" />
<text class="node-label" x="167.5" y="434.0">keycloak-0 (kc-lab-2)</text>
<line class="node-detail-divider" x1="91.0" y1="455.0" x2="244.0" y2="455.0" />
<text class="node-detail" x="93.0" y="472.0">도달 불가</text>
<rect class="node-shape kind-service emphasis-normal role-control" data-evidence="533-540" x="41.5" y="765.0" width="181.0" height="71.0" rx="7" />
<text class="node-label" x="132.0" y="792.0">keycloak-0 (kc-lab-2)</text>
<line class="node-detail-divider" x1="55.5" y1="813.0" x2="208.5" y2="813.0" />
<text class="node-detail" x="57.5" y="830.0">도달 불가</text>
</g>
<g id="node-store">
<rect class="node-shape kind-datastore emphasis-warning role-target" data-evidence="221-233" x="70.0" y="587.0" width="195.0" height="71.0" /><ellipse class="node-shape kind-datastore emphasis-warning role-target" cx="167.5" cy="587.0" rx="97.5" ry="13.0" /><path class="storage-bottom" d="M 70.0 658.0 A 97.5 13.0 0 0 0 265.0 658.0" />
<text class="node-label" x="167.5" y="614.0">PostgreSQL (kc-lab-2)</text>
<line class="node-detail-divider" x1="84.0" y1="635.0" x2="251.0" y2="635.0" />
<text class="node-detail" x="86.0" y="652.0">local-path PVC · 재배치 불가</text>
<rect class="node-shape kind-datastore emphasis-warning role-target" data-evidence="533-543" x="41.5" y="1117.8" width="195.0" height="47.3" /><ellipse class="node-shape kind-datastore emphasis-warning role-target" cx="139.0" cy="1117.8" rx="97.5" ry="11.8" /><path class="storage-bottom" d="M 41.5 1165.2 A 97.5 11.8 0 0 0 236.5 1165.2" />
<text class="node-label" x="139.0" y="1133.0">PostgreSQL (kc-lab-2)</text>
<line class="node-detail-divider" x1="55.5" y1="1154.0" x2="222.5" y2="1154.0" />
<text class="node-detail" x="57.5" y="1171.0">local-path PVC · 재배치 불가</text>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB