feat: 문서 구조 변경 및 tech-visual 스킬 추가

2026-09-04 18:20:00 +09:00
parent 43901f0abf
commit 2efb7ee1f2
683 changed files with 61180 additions and 10479 deletions
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790 250" role="img"
+     aria-labelledby="t2 d2">
+  <title id="t2">AP3 CSRF token 두 갈래</title>
+  <desc id="d2">BFF의 CSRF endpoint 하나가 두 결과를 만든다. XSRF-TOKEN cookie에는 raw token이 들어가고 JSON 응답 본문에는 XOR로 가린 token과 headerName이 들어간다. SPA는 JSON에서 headerName만 읽고 실제 header 값은 cookie의 raw token을 쓴다. POST에 도달한 cookie와 header를 Spring CSRF filter가 대조한다.</desc>
+
+  <style>
+    .lbl  { font: 13px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #17181b; }
+    .sub  { font: 11px system-ui, -apple-system, sans-serif; fill: #5b6068; }
+    .zone { font: 600 11px system-ui, -apple-system, sans-serif; letter-spacing: .06em; }
+    .box  { fill: #fff; stroke: #b9bdc4; stroke-width: 1; }
+    .arw  { stroke: #6b7079; stroke-width: 1.4; fill: none; marker-end: url(#h2); }
+  </style>
+
+  <defs>
+    <marker id="h2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#6b7079"/>
+    </marker>
+  </defs>
+
+  <rect x="16" y="92" width="136" height="60" rx="5" class="box"/>
+  <text x="30" y="116" class="lbl">/bff/csrf</text>
+  <text x="30" y="134" class="sub">GET</text>
+
+  <rect x="212" y="30" width="200" height="56" rx="5" class="box"/>
+  <text x="226" y="54" class="lbl">XSRF-TOKEN</text>
+  <text x="226" y="72" class="sub">cookie · raw token</text>
+
+  <rect x="212" y="158" width="200" height="56" rx="5" class="box"/>
+  <text x="226" y="182" class="lbl">JSON body</text>
+  <text x="226" y="200" class="sub">masked token · headerName</text>
+
+  <rect x="466" y="92" width="152" height="60" rx="5" class="box"/>
+  <text x="480" y="116" class="lbl">X-XSRF-TOKEN</text>
+  <text x="480" y="134" class="sub">= raw token</text>
+
+  <rect x="666" y="92" width="112" height="60" rx="5" class="box"/>
+  <text x="678" y="116" class="zone" fill="#5b6068">CSRF FILTER</text>
+  <text x="678" y="134" class="lbl">대조</text>
+
+  <path class="arw" d="M154 112 H182 V58 H208"/>
+  <path class="arw" d="M154 132 H182 V186 H208"/>
+
+  <path class="arw" d="M414 58 H440 V112 H462"/>
+  <path class="arw" d="M414 186 H440 V132 H462"/>
+  <text x="418" y="150" class="sub">headerName</text>
+
+  <path class="arw" d="M620 122 H662"/>
+</svg>