Merge pull request 'refactor(content): Gitea 사용법/Git 워크플로우 가이드 스킬 기반 재구성' (#20) from feature/guide-skill-based-restructure into develop

docs/RELEASE-NOTES.md

@@ -4,6 +4,9 @@
 
 ## [Unreleased]
 
+### 변경
+- Gitea 사용법/Git 워크플로우 가이드를 스킬 기반 워크플로우 중심으로 재구성
+
 ## [2026-03-01]
 ### 추가
 - 프로젝트 초기 구성 (React 19 + TypeScript + Vite + Tailwind CSS v4)

src/content/GitWorkflow.tsx

@@ -115,65 +115,101 @@ footer (선택)`}
         </table>
       </div>
 
+      <Alert type="info">
+        <code className="bg-bg-tertiary px-1 rounded">/push</code> 스킬은 변경 내용을 분석하여 이 형식에 맞는 커밋 메시지를 자동 생성합니다.
+        직접 커밋할 때는 위 규칙을 따르세요. 로컬 <code className="bg-bg-tertiary px-1 rounded">commit-msg</code> hook이 형식을 검증합니다.
+      </Alert>
+
       {/* 작업 흐름 */}
       <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">일반 작업 흐름</h2>
+
+      <h3 className="text-lg font-semibold text-text-primary mt-6 mb-3">스킬 기반 워크플로우 (권장)</h3>
+      <p className="text-text-secondary mb-4">
+        Claude Code의 스킬을 사용하면 브랜치 생성부터 MR 머지까지 자동화할 수 있습니다.
+      </p>
       <StepGuide
         steps={[
           {
             title: '이슈 확인 및 브랜치 생성',
             content: (
-              <CodeBlock
-                language="bash"
-                code={`git checkout develop
-git pull origin develop
-git checkout -b feature/ISSUE-42-user-login`}
-              />
+              <>
+                <CodeBlock language="text" code="/fix-issue 42" />
+                <p className="text-sm text-text-muted mt-2">
+                  이슈 내용을 분석하고 <code className="bg-bg-tertiary px-1 rounded">feature/ISSUE-42-설명</code> 브랜치를 자동 생성합니다.
+                </p>
+              </>
             ),
           },
           {
-            title: '개발 및 커밋',
-            content: (
-              <CodeBlock
-                language="bash"
-                code={`# 작업 후 커밋
-git add src/auth/LoginForm.tsx
-git commit -m "feat(auth): 로그인 폼 UI 구현 (#42)"`}
-              />
-            ),
-          },
-          {
-            title: '푸시 및 MR 생성',
+            title: '개발 및 중간 푸시',
             content: (
               <>
-                <p className="mb-2 text-text-secondary">수동 방식:</p>
-                <CodeBlock
-                  language="bash"
-                  code={`git push -u origin feature/ISSUE-42-user-login
-# Gitea에서 MR 생성 (develop ← feature/ISSUE-42-user-login)`}
-                />
-                <div className="mt-3 p-3 bg-accent-soft border border-accent/20 rounded-lg">
-                  <p className="text-sm font-semibold text-accent mb-1">Claude Code 사용 시 (권장)</p>
-                  <CodeBlock
-                    language="text"
-                    code={`/push    → 커밋 + 푸시 (커밋 메시지 자동 제안)
-/mr      → 커밋 + 푸시 + MR 생성 + 릴리즈 노트 자동 갱신`}
-                  />
-                  <p className="text-xs text-text-muted mt-1">
-                    자세한 내용은 <strong>Claude Code 활용</strong> 가이드를 참고하세요.
-                  </p>
-                </div>
+                <CodeBlock language="text" code="/push" />
+                <p className="text-sm text-text-muted mt-2">
+                  변경 내용을 분석하여 Conventional Commits 형식의 커밋 메시지를 자동 생성하고 푸시합니다.
+                </p>
+              </>
+            ),
+          },
+          {
+            title: 'MR 생성',
+            content: (
+              <>
+                <CodeBlock language="text" code="/mr" />
+                <p className="text-sm text-text-muted mt-2">
+                  커밋 + 푸시 + MR 생성 + 릴리즈 노트 갱신을 한 번에 수행합니다.
+                  봇 자동 승인/머지 옵션도 선택할 수 있습니다.
+                </p>
               </>
             ),
           },
           {
             title: '리뷰 후 머지',
             content: (
-              <p>최소 1명의 리뷰어 승인 → <strong>Squash Merge</strong> → 소스 브랜치 삭제</p>
+              <p>
+                리뷰어 지정 → 최소 1명 승인 → <strong>Squash Merge</strong> → 소스 브랜치 자동 삭제.{' '}
+                <code className="bg-bg-tertiary px-1 rounded">/mr</code> 실행 시 봇 승인+머지를 선택하면 이 과정도 자동화됩니다.
+              </p>
             ),
           },
         ]}
       />
 
+      <h3 className="text-lg font-semibold text-text-primary mt-8 mb-3">수동 워크플로우</h3>
+      <p className="text-text-secondary mb-4">
+        Claude Code 미사용 환경에서의 git 명령어 기반 작업 흐름입니다.
+      </p>
+      <div className="bg-surface border border-border-default rounded-xl p-6 space-y-4">
+        <div className="flex items-start gap-3">
+          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">1</span>
+          <div>
+            <p className="font-medium text-text-primary">브랜치 생성</p>
+            <CodeBlock language="bash" code={`git checkout develop && git pull origin develop\ngit checkout -b feature/ISSUE-42-user-login`} />
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">2</span>
+          <div>
+            <p className="font-medium text-text-primary">커밋</p>
+            <CodeBlock language="bash" code={`git add src/auth/LoginForm.tsx\ngit commit -m "feat(auth): 로그인 폼 UI 구현 (#42)"`} />
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">3</span>
+          <div>
+            <p className="font-medium text-text-primary">푸시 및 MR 생성</p>
+            <CodeBlock language="bash" code={`git push -u origin feature/ISSUE-42-user-login\n# Gitea 웹 UI → 새 Pull Request → develop ← feature 브랜치`} />
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">4</span>
+          <div>
+            <p className="font-medium text-text-primary">리뷰 및 머지</p>
+            <p className="text-sm text-text-secondary">리뷰어 지정 → 최소 1명 승인 → Squash Merge → 소스 브랜치 삭제</p>
+          </div>
+        </div>
+      </div>
+
       {/* 3계층 보호 정책 */}
       <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">3계층 보호 정책</h2>
       <div className="space-y-3">

src/content/GiteaUsage.tsx

@@ -7,7 +7,7 @@ export default function GiteaUsage() {
     <div className="max-w-4xl mx-auto py-12 px-6">
       <h1 className="text-3xl font-bold text-text-primary mb-2">Gitea 사용법</h1>
       <p className="text-text-secondary mb-8">
-        팀 Git 저장소인 Gitea의 로그인, 리포지토리 관리, 이슈/MR 사용법을 안내합니다.
+        팀 Git 저장소인 Gitea의 로그인, 리포지토리 관리, 이슈 관리, MR 리뷰 방법을 안내합니다.
       </p>
 
       {/* 로그인 */}
@@ -72,10 +72,17 @@ git clone https://gitea.gc-si.dev/gc/프로젝트명.git`}
             ),
           },
           {
-            title: '브랜치와 연결',
+            title: '이슈 기반 브랜치 생성',
             content: (
               <>
-                <p className="mb-2">이슈 번호를 포함한 브랜치를 생성합니다.</p>
+                <div className="p-3 bg-accent-soft border border-accent/20 rounded-lg mb-3">
+                  <p className="text-sm font-semibold text-accent mb-1">Claude Code 사용 시 (권장)</p>
+                  <CodeBlock language="text" code="/fix-issue 42" />
+                  <p className="text-xs text-text-muted mt-1">
+                    이슈 내용을 분석하고 적절한 브랜치를 자동 생성합니다.
+                  </p>
+                </div>
+                <p className="text-sm text-text-muted mb-2">수동 생성:</p>
                 <CodeBlock language="bash" code="git checkout -b feature/ISSUE-42-user-login develop" />
               </>
             ),
@@ -86,38 +93,60 @@ git clone https://gitea.gc-si.dev/gc/프로젝트명.git`}
               <>
                 <p className="mb-2">커밋 메시지에 이슈 번호를 포함하면 자동으로 연결됩니다.</p>
                 <CodeBlock language="bash" code='git commit -m "feat(auth): 로그인 폼 구현 (#42)"' />
+                <p className="text-xs text-text-muted mt-2">
+                  <code className="bg-bg-tertiary px-1 rounded">/push</code>, <code className="bg-bg-tertiary px-1 rounded">/mr</code> 스킬 사용 시에도 브랜치명에서 이슈 번호를 자동 추출하여 포함합니다.
+                </p>
               </>
             ),
           },
         ]}
       />
 
-      {/* MR */}
-      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">MR (Merge Request)</h2>
-      <p className="text-text-secondary mb-4">
-        코드 리뷰와 머지를 위해 MR을 생성합니다.
-      </p>
+      {/* MR 확인 및 리뷰 */}
+      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">MR 확인 및 리뷰</h2>
+      <div className="p-3 bg-accent-soft border border-accent/20 rounded-lg mb-4">
+        <p className="text-sm text-text-secondary">
+          MR 생성은 <code className="bg-bg-tertiary px-1 rounded">/mr</code> 스킬로 자동화됩니다.
+          이 섹션에서는 Gitea 웹 UI에서 <strong>MR을 리뷰하고 머지하는 방법</strong>을 안내합니다.
+          스킬 사용법은 <strong>Claude Code 활용</strong> 가이드를 참고하세요.
+        </p>
+      </div>
       <StepGuide
         steps={[
           {
-            title: '브랜치 푸시',
-            content: (
-              <CodeBlock language="bash" code="git push -u origin feature/ISSUE-42-user-login" />
-            ),
-          },
-          {
-            title: 'MR 생성',
+            title: 'MR 목록 확인',
             content: (
               <p>
-                Gitea에서 <strong>"새 Pull Request"</strong>를 클릭하고, <code className="bg-bg-tertiary px-1 rounded">develop</code> ← <code className="bg-bg-tertiary px-1 rounded">feature/ISSUE-42-user-login</code>으로 설정합니다. 제목은 커밋 규칙과 동일하게 작성하세요.
+                리포지토리 → <strong>Pull Requests</strong> 탭에서 열린 MR 목록을 확인합니다.
+                제목과 라벨로 변경 범위를 파악하세요.
               </p>
             ),
           },
           {
-            title: '리뷰 및 머지',
+            title: '변경 내용 리뷰',
             content: (
               <p>
-                리뷰어를 지정하고, 최소 1명의 승인 후 <strong>Squash Merge</strong>로 머지합니다. 머지 후 소스 브랜치는 삭제합니다.
+                <strong>파일 변경</strong> 탭에서 diff를 확인합니다. 특정 줄에 코멘트를 남기려면 줄 번호를 클릭하세요.
+                전체적인 피드백은 <strong>대화</strong> 탭에 작성합니다.
+              </p>
+            ),
+          },
+          {
+            title: '승인 또는 수정 요청',
+            content: (
+              <p>
+                리뷰 완료 후 <strong>"승인"</strong> 또는 <strong>"수정 요청"</strong>을 선택합니다.{' '}
+                <code className="bg-bg-tertiary px-1 rounded">main</code> 브랜치 대상 MR은 최소 1명의 승인이 필수입니다.
+              </p>
+            ),
+          },
+          {
+            title: 'Squash Merge',
+            content: (
+              <p>
+                승인 완료 후 <strong>Squash and Merge</strong>를 선택하여 머지합니다.
+                머지 후 소스 브랜치는 자동 삭제됩니다.{' '}
+                <code className="bg-bg-tertiary px-1 rounded">/mr</code> 실행 시 봇 자동 승인+머지 옵션을 선택하면 이 과정도 자동화할 수 있습니다.
               </p>
             ),
           },