228 lines
11 KiB
TypeScript
228 lines
11 KiB
TypeScript
|
import { Alert } from '../components/common/Alert';
|
||
|
|
import { CodeBlock } from '../components/common/CodeBlock';
|
||
|
|
import { StepGuide } from '../components/common/StepGuide';
|
||
|
|
|
||
|
|
export default function StartingProject() {
|
||
|
|
return (
|
||
|
|
<div className="max-w-4xl mx-auto py-12 px-6">
|
||
|
|
<h1 className="text-3xl font-bold text-text-primary mb-2">프로젝트 시작하기</h1>
|
||
|
|
<p className="text-text-secondary mb-8">
|
||
|
|
팀 템플릿을 사용해 새 프로젝트를 빠르게 시작하는 방법을 안내합니다.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* 템플릿 비교 */}
|
||
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">프로젝트 템플릿</h2>
|
||
|
|
<p className="text-text-secondary mb-4">
|
||
|
|
Gitea <code className="bg-bg-tertiary px-1 rounded">gc</code> 조직에서 프로젝트 유형에 맞는 템플릿을 선택합니다.
|
||
|
|
</p>
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full bg-surface border border-border-default rounded-lg overflow-hidden text-sm">
|
||
|
|
<thead>
|
||
|
|
<tr className="bg-bg-tertiary">
|
||
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">템플릿</th>
|
||
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">기술 스택</th>
|
||
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">포함 내용</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-border-subtle">
|
||
|
|
<tr>
|
||
|
|
<td className="px-4 py-3 font-medium text-text-primary">template-java-maven</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">Java + Spring Boot + Maven</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.mvn/settings.xml</code>,{' '}
|
||
|
|
Claude 규칙/스킬, Git hooks
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td className="px-4 py-3 font-medium text-text-primary">template-java-gradle</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">Java + Spring Boot + Gradle</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">gradle.properties.example</code>,{' '}
|
||
|
|
Claude 규칙/스킬, Git hooks
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td className="px-4 py-3 font-medium text-text-primary">template-react-ts</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">React + TypeScript + Vite</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.node-version</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.npmrc</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.prettierrc</code>,{' '}
|
||
|
|
Claude 규칙/스킬, Git hooks
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td className="px-4 py-3 font-medium text-text-primary">template-common</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">공통 워크플로우</td>
|
||
|
|
<td className="px-4 py-3 text-text-secondary">
|
||
|
|
팀 규칙, Claude 스킬, Git hooks, 버전 관리 (프로젝트 템플릿이 아닌 규칙 원본)
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Alert type="info">
|
||
|
|
모든 프로젝트 템플릿에는 <code className="bg-bg-tertiary px-1 rounded">.claude/</code> 디렉토리(규칙, 스킬, 설정),{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.githooks/</code>(commit-msg, post-checkout),{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">.editorconfig</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">CLAUDE.md</code>가 공통으로 포함되어 있습니다.
|
||
|
|
</Alert>
|
||
|
|
|
||
|
|
{/* 새 프로젝트 생성 */}
|
||
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">새 프로젝트 생성</h2>
|
||
|
|
<StepGuide
|
||
|
|
steps={[
|
||
|
|
{
|
||
|
|
title: 'Gitea에서 리포지토리 생성',
|
||
|
|
content: (
|
||
|
|
<p>
|
||
|
|
Gitea → <strong>gc</strong> 조직 → <strong>새 저장소</strong>를 클릭합니다.
|
||
|
|
<strong> "템플릿에서 생성"</strong>에서 프로젝트 유형에 맞는 템플릿(<code className="bg-bg-tertiary px-1 rounded">template-java-maven</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">template-java-gradle</code>,{' '}
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded">template-react-ts</code>)을 선택하고 프로젝트 이름을 입력합니다.
|
||
|
|
</p>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '로컬에 클론',
|
||
|
|
content: (
|
||
|
|
<CodeBlock
|
||
|
|
language="bash"
|
||
|
|
code={`git clone git@gitea.gc-si.dev:gc/새-프로젝트명.git
|
||
|
|
cd 새-프로젝트명`}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Claude Code로 초기화',
|
||
|
|
content: (
|
||
|
|
<>
|
||
|
|
<p className="mb-2">Claude Code 세션에서 프로젝트 초기화 스킬을 실행합니다.</p>
|
||
|
|
<CodeBlock
|
||
|
|
language="bash"
|
||
|
|
code={`claude
|
||
|
|
# 세션 내에서 실행:
|
||
|
|
/init-project`}
|
||
|
|
/>
|
||
|
|
<p className="mt-2 text-text-muted text-xs">
|
||
|
|
이 명령은 팀 워크플로우 규칙, Git hooks, Claude 설정 파일을 자동으로 구성합니다.
|
||
|
|
</p>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'develop 브랜치 생성',
|
||
|
|
content: (
|
||
|
|
<CodeBlock
|
||
|
|
language="bash"
|
||
|
|
code={`git checkout -b develop
|
||
|
|
git push -u origin develop`}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '첫 feature 브랜치 시작',
|
||
|
|
content: (
|
||
|
|
<CodeBlock
|
||
|
|
language="bash"
|
||
|
|
code={`git checkout -b feature/ISSUE-1-project-setup
|
||
|
|
# 코딩 시작!`}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* 템플릿 공통 파일 구조 */}
|
||
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">템플릿 공통 파일 구조</h2>
|
||
|
|
<p className="text-text-secondary mb-4">
|
||
|
|
모든 프로젝트 템플릿에 포함되는 공통 파일입니다.
|
||
|
|
</p>
|
||
|
|
<div className="bg-surface border border-border-default rounded-xl p-5">
|
||
|
|
<div className="font-mono text-sm space-y-1.5 text-text-secondary">
|
||
|
|
<div><span className="text-accent">.claude/</span></div>
|
||
|
|
<div className="pl-4"><span className="text-accent">rules/</span> — 팀 규칙 (code-style, git-workflow, naming, testing, team-policy)</div>
|
||
|
|
<div className="pl-4"><span className="text-accent">skills/</span> — Claude 스킬 (create-mr, fix-issue, init-project, sync-team-workflow)</div>
|
||
|
|
<div className="pl-4"><span className="text-accent">settings.json</span> — Claude 권한 설정</div>
|
||
|
|
<div className="mt-2"><span className="text-accent">.githooks/</span></div>
|
||
|
|
<div className="pl-4"><span className="text-accent">commit-msg</span> — Conventional Commits 검증 훅</div>
|
||
|
|
<div className="pl-4"><span className="text-accent">post-checkout</span> — 체크아웃 후 자동 실행</div>
|
||
|
|
<div className="mt-2"><span className="text-accent">.editorconfig</span> — 에디터 공통 설정</div>
|
||
|
|
<div><span className="text-accent">.gitignore</span> — Git 제외 패턴</div>
|
||
|
|
<div><span className="text-accent">CLAUDE.md</span> — 프로젝트 설명서</div>
|
||
|
|
<div><span className="text-accent">workflow-version.json</span> — 워크플로우 버전 추적</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 템플릿별 추가 파일 */}
|
||
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">템플릿별 추가 파일</h2>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
|
<div className="bg-surface border border-border-default rounded-xl p-4">
|
||
|
|
<h4 className="font-semibold text-text-primary text-sm mb-2">template-java-maven</h4>
|
||
|
|
<div className="font-mono text-xs space-y-1 text-text-secondary">
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code> — JDK 버전</div>
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.mvn/settings.xml</code> — Maven 설정</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-surface border border-border-default rounded-xl p-4">
|
||
|
|
<h4 className="font-semibold text-text-primary text-sm mb-2">template-java-gradle</h4>
|
||
|
|
<div className="font-mono text-xs space-y-1 text-text-secondary">
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code> — JDK 버전</div>
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">gradle.properties.example</code> — Gradle 설정 예시</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-surface border border-border-default rounded-xl p-4">
|
||
|
|
<h4 className="font-semibold text-text-primary text-sm mb-2">template-react-ts</h4>
|
||
|
|
<div className="font-mono text-xs space-y-1 text-text-secondary">
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.node-version</code> — Node.js 버전</div>
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.npmrc</code> — npm 레지스트리</div>
|
||
|
|
<div><code className="bg-bg-tertiary px-1 rounded">.prettierrc</code> — 코드 포매터</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Alert type="info" title="워크플로우 업데이트">
|
||
|
|
팀 워크플로우가 업데이트되면 세션 시작 시 알림이 표시됩니다.
|
||
|
|
<code className="bg-bg-tertiary px-1 rounded ml-1">/sync-team-workflow</code>를 실행하여 최신 규칙을 동기화하세요.
|
||
|
|
</Alert>
|
||
|
|
|
||
|
|
{/* 프로젝트 구조 권장안 */}
|
||
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">권장 프로젝트 구조</h2>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<h4 className="font-semibold text-text-primary mb-2">Spring Boot (Maven/Gradle)</h4>
|
||
|
|
<CodeBlock
|
||
|
|
language="text"
|
||
|
|
code={`src/main/java/com/gcsc/프로젝트/
|
||
|
|
├── controller/
|
||
|
|
├── service/
|
||
|
|
├── repository/
|
||
|
|
├── dto/
|
||
|
|
├── entity/
|
||
|
|
├── config/
|
||
|
|
└── common/`}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 className="font-semibold text-text-primary mb-2">React + TypeScript</h4>
|
||
|
|
<CodeBlock
|
||
|
|
language="text"
|
||
|
|
code={`src/
|
||
|
|
├── components/
|
||
|
|
│ ├── common/
|
||
|
|
│ └── layout/
|
||
|
|
├── pages/
|
||
|
|
├── hooks/
|
||
|
|
├── services/
|
||
|
|
├── types/
|
||
|
|
└── utils/`}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|