801 lines
19 KiB
HTML
801 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>프론트엔드 AI 공통 지침 - Work Flow</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f6f5f1;
|
||
--panel: #ffffff;
|
||
--line: #d7d7d7;
|
||
--text: #222;
|
||
--muted: #777;
|
||
--navy: #25384a;
|
||
|
||
--blue: #1f7fbe;
|
||
--blue-bg: #e8f5fb;
|
||
--yellow: #e6a400;
|
||
--yellow-bg: #fff9dc;
|
||
--green: #17a968;
|
||
--green-bg: #e6f7ee;
|
||
--red: #d94132;
|
||
--red-bg: #fde9e9;
|
||
--orange: #e86f16;
|
||
--purple: #8d42b2;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
color: var(--text);
|
||
background: var(--bg);
|
||
font-family:
|
||
-apple-system,
|
||
BlinkMacSystemFont,
|
||
"Segoe UI",
|
||
"Noto Sans KR",
|
||
"Apple SD Gothic Neo",
|
||
sans-serif;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.page {
|
||
min-width: 1480px;
|
||
padding: 8px 10px 18px;
|
||
}
|
||
|
||
.layout {
|
||
display: grid;
|
||
grid-template-columns: 255px 1fr;
|
||
gap: 22px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar {
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.sidebar-head {
|
||
padding: 14px 20px;
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
background: var(--navy);
|
||
}
|
||
|
||
.side-body {
|
||
padding: 14px 14px 18px;
|
||
}
|
||
|
||
.side-group {
|
||
margin-bottom: 14px;
|
||
padding: 10px;
|
||
border-radius: 7px;
|
||
border: 2px solid;
|
||
}
|
||
|
||
.side-group.yellow {
|
||
border-color: #f2ad23;
|
||
background: #fffdf4;
|
||
}
|
||
|
||
.side-group.blue {
|
||
border-color: #1f7fbe;
|
||
background: #f0f8ff;
|
||
}
|
||
|
||
.side-title,
|
||
.side-file {
|
||
display: block;
|
||
margin-bottom: 7px;
|
||
padding: 4px 8px;
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: "SFMono-Regular", Consolas, monospace;
|
||
}
|
||
|
||
.yellow .side-title,
|
||
.yellow .side-file {
|
||
color: #7b5a00;
|
||
border: 1px solid #f2ad23;
|
||
background: #fff3bf;
|
||
}
|
||
|
||
.blue .side-title,
|
||
.blue .side-file {
|
||
color: #0f4d77;
|
||
border: 1px solid #1f7fbe;
|
||
background: #d6ecf8;
|
||
}
|
||
|
||
.side-caption {
|
||
margin: 8px 0 0;
|
||
color: #8a8a8a;
|
||
text-align: center;
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.side-desc {
|
||
margin: 6px 0 0;
|
||
color: #666;
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
/* Main */
|
||
.main {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.title-wrap {
|
||
padding: 10px 0 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 900;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 10px 0 0;
|
||
color: #767676;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.workflow-panel {
|
||
position: relative;
|
||
min-height: 780px;
|
||
padding: 236px 42px 36px;
|
||
background: var(--panel);
|
||
border: 1px solid #cfcfcf;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.flow-row {
|
||
display: grid;
|
||
grid-template-columns: 280px 60px 280px 60px 280px 60px 280px 60px 280px 60px 280px;
|
||
align-items: center;
|
||
}
|
||
|
||
.arrow {
|
||
color: #444;
|
||
font-size: 48px;
|
||
line-height: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.node {
|
||
height: 135px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 4px solid;
|
||
border-radius: 16px;
|
||
text-align: center;
|
||
background: #fff;
|
||
}
|
||
|
||
.node .title {
|
||
margin-bottom: 8px;
|
||
font-size: 24px;
|
||
font-weight: 900;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.node .desc {
|
||
color: #555;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.node.blue {
|
||
color: #0f4d77;
|
||
border-color: var(--blue);
|
||
background: var(--blue-bg);
|
||
}
|
||
|
||
.node.yellow {
|
||
color: #8a6500;
|
||
border-color: var(--yellow);
|
||
background: var(--yellow-bg);
|
||
}
|
||
|
||
.node.green {
|
||
color: #09643d;
|
||
border-color: var(--green);
|
||
background: var(--green-bg);
|
||
}
|
||
|
||
.node.red {
|
||
color: #9f2820;
|
||
border-color: var(--red);
|
||
background: var(--red-bg);
|
||
}
|
||
|
||
.node-num {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 23px;
|
||
height: 23px;
|
||
margin-right: 6px;
|
||
border: 2px solid currentColor;
|
||
border-radius: 50%;
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* absolute guide lines */
|
||
.rules-bar {
|
||
position: absolute;
|
||
left: 518px;
|
||
right: 43px;
|
||
top: 392px;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #9a6500;
|
||
font-size: 17px;
|
||
font-weight: 900;
|
||
background: #fffef7;
|
||
border: 2px dashed #f0a000;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.v-line {
|
||
position: absolute;
|
||
width: 0;
|
||
border-left: 2px dashed #b7b7b7;
|
||
}
|
||
|
||
.v-line.yellow {
|
||
border-color: #d49a00;
|
||
}
|
||
|
||
.v-line.green {
|
||
border-color: #15975f;
|
||
}
|
||
|
||
.v-line.red {
|
||
border-color: #c0392b;
|
||
}
|
||
|
||
.v1 {
|
||
left: 645px;
|
||
top: 360px;
|
||
height: 33px;
|
||
}
|
||
|
||
.v2 {
|
||
left: 989px;
|
||
top: 355px;
|
||
height: 77px;
|
||
}
|
||
|
||
.v3 {
|
||
left: 1344px;
|
||
top: 356px;
|
||
height: 36px;
|
||
}
|
||
|
||
.v4 {
|
||
left: 1696px;
|
||
top: 356px;
|
||
height: 36px;
|
||
}
|
||
|
||
.v5 {
|
||
left: 2041px;
|
||
top: 356px;
|
||
height: 36px;
|
||
}
|
||
|
||
.doc-row {
|
||
position: absolute;
|
||
left: 520px;
|
||
right: 42px;
|
||
top: 448px;
|
||
display: grid;
|
||
grid-template-columns: 280px 60px 280px 60px 280px 60px 280px 60px 280px;
|
||
align-items: start;
|
||
}
|
||
|
||
.doc-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.doc-chip {
|
||
min-height: 36px;
|
||
padding: 6px 12px;
|
||
text-align: center;
|
||
border: 2px solid;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-family: "SFMono-Regular", Consolas, monospace;
|
||
background: #fff;
|
||
}
|
||
|
||
.doc-chip.yellow {
|
||
color: #8a6500;
|
||
border-color: var(--yellow);
|
||
background: var(--yellow-bg);
|
||
font-family: inherit;
|
||
font-weight: 800;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.doc-chip.green {
|
||
color: #09643d;
|
||
border-color: var(--green);
|
||
background: var(--green-bg);
|
||
}
|
||
|
||
.doc-chip.red {
|
||
color: #9f2820;
|
||
border-color: var(--red);
|
||
background: var(--red-bg);
|
||
}
|
||
|
||
.doc-chip.blue {
|
||
color: #0f4d77;
|
||
border-color: var(--blue);
|
||
background: var(--blue-bg);
|
||
}
|
||
|
||
/* feedback loop */
|
||
.loop-label {
|
||
position: absolute;
|
||
z-index: 3;
|
||
padding: 7px 22px;
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
border: 2px solid;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
}
|
||
|
||
.label-purple {
|
||
top: 30px;
|
||
left: 1180px;
|
||
color: var(--purple);
|
||
border-color: var(--purple);
|
||
background: #fff5ff;
|
||
}
|
||
|
||
.label-orange {
|
||
top: 109px;
|
||
left: 990px;
|
||
color: var(--orange);
|
||
border-color: var(--orange);
|
||
background: #fff8f2;
|
||
}
|
||
|
||
.label-red {
|
||
top: 86px;
|
||
left: 1383px;
|
||
color: var(--red);
|
||
border-color: var(--red);
|
||
background: #fff5f5;
|
||
}
|
||
|
||
.loop-line {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.loop-purple {
|
||
top: 54px;
|
||
left: 944px;
|
||
width: 705px;
|
||
height: 150px;
|
||
border: 4px dashed var(--purple);
|
||
border-bottom: 0;
|
||
border-radius: 18px 18px 0 0;
|
||
}
|
||
|
||
.loop-purple:before,
|
||
.loop-purple:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -18px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 13px solid transparent;
|
||
border-right: 13px solid transparent;
|
||
border-top: 30px solid var(--purple);
|
||
}
|
||
|
||
.loop-purple:before {
|
||
left: -16px;
|
||
}
|
||
|
||
.loop-purple:after {
|
||
right: -16px;
|
||
}
|
||
|
||
.loop-orange {
|
||
top: 137px;
|
||
left: 944px;
|
||
width: 350px;
|
||
height: 72px;
|
||
border-top: 4px dashed var(--orange);
|
||
border-left: 4px dashed var(--orange);
|
||
border-right: 4px dashed var(--orange);
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.loop-orange:before,
|
||
.loop-orange:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -18px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 13px solid transparent;
|
||
border-right: 13px solid transparent;
|
||
border-top: 30px solid var(--orange);
|
||
}
|
||
|
||
.loop-orange:before {
|
||
left: -16px;
|
||
}
|
||
|
||
.loop-orange:after {
|
||
right: -16px;
|
||
}
|
||
|
||
.loop-red {
|
||
top: 137px;
|
||
left: 1292px;
|
||
width: 355px;
|
||
height: 72px;
|
||
border-top: 4px dashed #ff4b3d;
|
||
border-left: 4px dashed #ff4b3d;
|
||
border-right: 4px dashed #ff4b3d;
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.loop-red:before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -18px;
|
||
left: -16px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 13px solid transparent;
|
||
border-right: 13px solid transparent;
|
||
border-top: 30px solid #ff4b3d;
|
||
}
|
||
|
||
.feedback-box {
|
||
position: absolute;
|
||
left: 42px;
|
||
right: 42px;
|
||
bottom: 28px;
|
||
padding: 16px 36px 28px;
|
||
border: 2px solid #d1d1d1;
|
||
border-radius: 14px;
|
||
background: #fff;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.feedback-box h2 {
|
||
margin: 0 0 22px;
|
||
text-align: center;
|
||
font-size: 23px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.legend-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 36px;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.line-sample {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: 85px;
|
||
border-top: 4px dashed;
|
||
}
|
||
|
||
.line-sample:after {
|
||
content: "";
|
||
position: absolute;
|
||
right: -1px;
|
||
top: -10px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 18px solid currentColor;
|
||
border-top: 9px solid transparent;
|
||
border-bottom: 9px solid transparent;
|
||
}
|
||
|
||
.line-sample.red {
|
||
color: #ff4b3d;
|
||
border-color: #ff4b3d;
|
||
}
|
||
|
||
.line-sample.orange {
|
||
color: var(--orange);
|
||
border-color: var(--orange);
|
||
}
|
||
|
||
.line-sample.purple {
|
||
color: var(--purple);
|
||
border-color: var(--purple);
|
||
}
|
||
|
||
.bottom-legend {
|
||
margin-top: 14px;
|
||
padding: 12px 18px;
|
||
background: #fff;
|
||
border: 1px solid #d4d4d4;
|
||
border-radius: 7px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.bottom-legend strong {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.mini-box {
|
||
display: inline-block;
|
||
width: 25px;
|
||
height: 12px;
|
||
margin: 0 5px 0 12px;
|
||
border: 2px solid;
|
||
border-radius: 2px;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
.mini-box.yellow {
|
||
border-color: var(--yellow);
|
||
background: var(--yellow-bg);
|
||
}
|
||
|
||
.mini-box.green {
|
||
border-color: var(--green);
|
||
background: var(--green-bg);
|
||
}
|
||
|
||
.mini-box.red {
|
||
border-color: var(--red);
|
||
background: var(--red-bg);
|
||
}
|
||
|
||
.mini-box.blue {
|
||
border-color: var(--blue);
|
||
background: var(--blue-bg);
|
||
}
|
||
|
||
.mini-arrow {
|
||
display: inline-block;
|
||
margin: 0 10px 0 20px;
|
||
font-size: 22px;
|
||
line-height: 0;
|
||
vertical-align: -3px;
|
||
}
|
||
|
||
.mini-arrow.red {
|
||
color: #ff4b3d;
|
||
}
|
||
|
||
.note {
|
||
margin-top: 14px;
|
||
padding: 11px 18px;
|
||
color: #777;
|
||
text-align: center;
|
||
background: #f1f1ee;
|
||
border: 1px solid #d6d6d2;
|
||
border-radius: 7px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
@media (max-width: 1600px) {
|
||
.page {
|
||
transform-origin: top left;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page">
|
||
<div class="layout">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-head">📁 gameservice-fe-agent 구조</div>
|
||
|
||
<div class="side-body">
|
||
<div class="side-group yellow">
|
||
<span class="side-file">CLAUDE.md</span>
|
||
<p class="side-caption">세션 시작 시 1회 자동 로드<br />rules/* 전체를 @import</p>
|
||
</div>
|
||
|
||
<div class="side-group yellow">
|
||
<span class="side-title">rules/ (매 대화 턴 자동)</span>
|
||
<span class="side-file">coding-conventions.md</span>
|
||
<span class="side-file">framework-rules.md</span>
|
||
<span class="side-file">commit-pr.md</span>
|
||
<span class="side-file">claude-workflow.md</span>
|
||
<p class="side-caption">포맷팅·네이밍·Vue·커밋·작업방식</p>
|
||
</div>
|
||
|
||
<div class="side-group blue">
|
||
<span class="side-title">skills/ (명령으로 호출)</span>
|
||
<span class="side-file">conventional-commit</span>
|
||
<span class="side-file">markup-edm</span>
|
||
<span class="side-file">plan-analyzer</span>
|
||
<span class="side-file">plan-translation-generator</span>
|
||
<span class="side-file">project-init</span>
|
||
<span class="side-file">verify-component-review</span>
|
||
<span class="side-file">work-log</span>
|
||
<p class="side-caption">link-skills.sh 로 .claude/skills/ 링크</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<header class="title-wrap">
|
||
<h1>프론트엔드 AI 공통 지침 - Work Flow</h1>
|
||
<p class="subtitle">gameservice-fe-agent rules/ 구조와 각 작업 단계별 참조 파일의 흐름 (피드백 루프 포함)</p>
|
||
</header>
|
||
|
||
<section class="workflow-panel">
|
||
<div class="loop-line loop-purple"></div>
|
||
<div class="loop-line loop-orange"></div>
|
||
<div class="loop-line loop-red"></div>
|
||
|
||
<div class="loop-label label-purple">설계 변경 필요</div>
|
||
<div class="loop-label label-orange">계획 재수립 필요</div>
|
||
<div class="loop-label label-red">버그 발견 · 수정</div>
|
||
|
||
<div class="flow-row">
|
||
<article class="node blue">
|
||
<div class="title">요청자 / 개발자</div>
|
||
<div class="desc">업무 요청</div>
|
||
</article>
|
||
|
||
<div class="arrow">▶</div>
|
||
|
||
<article class="node yellow">
|
||
<div class="title"><span class="node-num">1</span>자동 로드</div>
|
||
<div class="desc">CLAUDE.md + rules/* × 4</div>
|
||
</article>
|
||
|
||
<div class="arrow">▶</div>
|
||
|
||
<article class="node green">
|
||
<div class="title"><span class="node-num">2</span>탐색</div>
|
||
<div class="desc">파일 파악 · 패턴 확인</div>
|
||
</article>
|
||
|
||
<div class="arrow">▶</div>
|
||
|
||
<article class="node green">
|
||
<div class="title"><span class="node-num">3</span>계획</div>
|
||
<div class="desc">할 일 목록 · 승인</div>
|
||
</article>
|
||
|
||
<div class="arrow">▶</div>
|
||
|
||
<article class="node green">
|
||
<div class="title"><span class="node-num">4</span>구현</div>
|
||
<div class="desc">코드 작성 · 지침 준수</div>
|
||
</article>
|
||
|
||
<div class="arrow">▶</div>
|
||
|
||
<article class="node red">
|
||
<div class="title"><span class="node-num">5</span>검증</div>
|
||
<div class="desc">린트 · 빌드 · 커밋/PR</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="v-line yellow v1"></div>
|
||
<div class="v-line green v2"></div>
|
||
<div class="v-line green v3"></div>
|
||
<div class="v-line green v4"></div>
|
||
<div class="v-line red v5"></div>
|
||
|
||
<div class="rules-bar">rules/* × 4 — 매 대화 턴 자동 참조 (① ~ ⑤ 전 단계 공통)</div>
|
||
|
||
<div class="doc-row">
|
||
<div class="doc-col">
|
||
<div class="doc-chip yellow">CLAUDE.md (세션 시작 1회)</div>
|
||
</div>
|
||
<div></div>
|
||
|
||
<div class="doc-col">
|
||
<div class="doc-chip green">coding-conventions.md</div>
|
||
<div class="doc-chip green">framework-rules.md</div>
|
||
</div>
|
||
<div></div>
|
||
|
||
<div class="doc-col">
|
||
<div class="doc-chip green">claude-workflow.md</div>
|
||
<div class="doc-chip green">framework-rules.md</div>
|
||
</div>
|
||
<div></div>
|
||
|
||
<div class="doc-col">
|
||
<div class="doc-chip green">coding-conventions.md</div>
|
||
<div class="doc-chip green">framework-rules.md</div>
|
||
</div>
|
||
<div></div>
|
||
|
||
<div class="doc-col">
|
||
<div class="doc-chip red">coding-conventions.md</div>
|
||
<div class="doc-chip red">commit-pr.md</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feedback-box">
|
||
<h2>피드백 루프 (역방향 흐름)</h2>
|
||
|
||
<div class="legend-grid">
|
||
<div class="legend-item">
|
||
<span class="line-sample red"></span>
|
||
<span>④ 구현 → ⑤ 검증 → ④ 구현 : 버그 발견 시 수정 후 재검증</span>
|
||
</div>
|
||
|
||
<div class="legend-item">
|
||
<span class="line-sample orange"></span>
|
||
<span>③ 계획 → ④ 구현 중 재설계 : 계획 재수립 후 다시 구현</span>
|
||
</div>
|
||
|
||
<div class="legend-item">
|
||
<span class="line-sample purple"></span>
|
||
<span>⑤ 검증 → ② 탐색 : 검증 결과로 구조 변경이 필요한 경우</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bottom-legend">
|
||
<strong>범례</strong>
|
||
<span class="mini-box yellow"></span> 세션 시작 1회 자동 로드 (CLAUDE.md)
|
||
<span class="mini-box yellow"></span> 매 대화 턴 자동 참조 (rules/ × 4)
|
||
<span class="mini-box green"></span> 탐색·계획·구현 단계 참조
|
||
<span class="mini-box red"></span> 검증·커밋/PR 단계 참조
|
||
<span class="mini-box blue"></span> skills/ (명령으로 호출)
|
||
<span class="mini-arrow">▶</span> 정방향 진행
|
||
<span class="mini-arrow red">--▶</span> 피드백 루프 (역방향)
|
||
</div>
|
||
|
||
<div class="note">
|
||
피드백 루프는 구현·검증 중 발견된 이슈에 따라 이전 단계로 돌아가 재작업 후 다시 진행합니다.
|
||
모호한 요구사항은 추측하지 않고 사용자에게 확인 후 계획 단계부터 다시 시작합니다.
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|