feat: 스타일 자동 선택(랜덤) 옵션 추가

CLAUDE.md

@@ -76,6 +76,7 @@ Never do any of the following:
 - **No inline styles** — use Tailwind classes only
 - **No cross-layer imports in FSD** — e.g., `features` must not import from `pages`
 - **No committing to `main` or `develop`** — always use a feature branch + PR
+- **No PRs to `main`** — every PR targets `develop`; `main` is updated only by a maintainer's release PR
 - **No skipping CI gates** — do not use `--no-verify` or bypass lint/typecheck
 
 ## Commit Convention (Conventional Commits)
@@ -110,12 +111,16 @@ CI must pass before merging. Run `npm run typecheck && npm run lint && npm run f
 Direct pushes to `main` and `develop` are blocked by a git `pre-push` hook.
 Always work on a feature branch and open a PR. Use `/pr` to create the PR.
 
+**All PRs MUST target `develop` — never open a PR against `main`.**
+`main` only receives changes via a `develop` → `main` release PR opened by a maintainer.
+Claude must never create a PR to `main` or merge anything into `main`.
+
 Hook lives in `.githooks/pre-push` and registers automatically on `npm install`
 via the `prepare` script (`git config core.hooksPath .githooks`).
 
 ## GitHub
 
-- Repo: `DarkMode-Lab/AIKON-Client`
+- Repo: `DarkMode-Lap/AIKON-Client`
 - Default branch: `main`
 - PR template: `.github/pull_request_template.md`
 - Use `gh` CLI for PR operations (`/pr` command handles this)

src/pages/create/index.tsx

@@ -101,6 +101,15 @@ export default function CreatePage() {
     })
   }
 
+  // 스타일 자동 선택: 직접 고르지 않고 랜덤 스타일로 다음 단계 진행
+  function handleStyleAuto() {
+    const style = STYLE_OPTIONS[Math.floor(Math.random() * STYLE_OPTIONS.length)].id
+    setForm((f) => ({ ...f, style }))
+    setDir(1)
+    setStep((s) => s + 1)
+    toast.success('스타일을 랜덤으로 골랐어요! ✨')
+  }
+
   return (
     <div className="relative min-h-dvh bg-white flex flex-col items-center px-4 py-6 overflow-hidden">
       <div className="pointer-events-none absolute inset-0 overflow-hidden">
@@ -166,6 +175,7 @@ export default function CreatePage() {
               <StepStyle
                 selected={form.style}
                 onSelect={(style: AvatarStyle) => setForm((f) => ({ ...f, style }))}
+                onAuto={handleStyleAuto}
               />
             )}
             {step === 3 && (
@@ -271,9 +281,11 @@ function StepNickname({
 function StepStyle({
   selected,
   onSelect,
+  onAuto,
 }: {
   selected: AvatarStyle | null
   onSelect: (s: AvatarStyle) => void
+  onAuto: () => void
 }) {
   return (
     <div className="glass-card p-6 space-y-4">
@@ -282,6 +294,23 @@ function StepStyle({
         <p className="text-sm text-gray-500">어떤 느낌의 캐릭터로 만들까요? 🎨</p>
       </div>
 
+      <button
+        onClick={onAuto}
+        className="btn-magic w-full py-4 text-white flex items-center justify-center gap-2 text-sm font-bold"
+      >
+        <Sparkles className="w-4 h-4" />
+        자동으로 만들기 ✨
+      </button>
+      <p className="text-center text-xs text-gray-400 -mt-1">
+        고르기 어렵다면 AI가 알아서 멋지게 만들어드려요
+      </p>
+
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-gray-200" />
+        <span className="text-xs text-gray-400 font-semibold">또는 직접 고르기</span>
+        <div className="h-px flex-1 bg-gray-200" />
+      </div>
+
       <div className="grid grid-cols-2 gap-3">
         {STYLE_OPTIONS.map((style) => (
           <motion.button