Claude Code 연동 페이지 추가 (web, webview)

[sumi-0011]

💻 작업 내용

Claude Code 연동 페이지 신규 추가 (/auth/claude-code)

web 앱 (apps/web)

• /auth/claude-code 라우트에 Claude Code 연동 안내 페이지 추가
• 로그인된 사용자의 GitHub username을 기반으로 /gitanimals-buddy:login <username> 명령어를 자동 생성하여 표시
• 미인증 상태일 경우 로그인 페이지로 자동 리다이렉트 후 콜백 처리
• PandaCSS 디자인 토큰 및 텍스트 스타일 적용, 기존 경매 섹션과 동일한 블루 그라데이션 배경 사용
• 헤더 아이콘을 이모지(🐾)에서 Lucide paw-print SVG 아이콘으로 교체
• TextField 컴포넌트에 containerClassName prop 추가하여 외부에서 래퍼 스타일링 가능하도록 개선
• 반응형 레이아웃 적용 (_mobile 조건)

webview 앱 (apps/webview)

• /auth/claude-code 라우트 추가
• 라우터 구조 개선: AUTH 경로에 index 라우트를 명시적으로 분리하여 중첩 라우팅 정리

변경 목적

GitAnimals Buddy Claude Code 플러그인과 연동하기 위한 로그인 연동 페이지 제공. 사용자가 웹에서 로그인 후 자신의 username으로 생성된 Claude Code 명령어를 바로 복사해 사용할 수 있도록 UX 개선.

📸 스크린샷

UI 변경사항 있음 — /auth/claude-code 신규 페이지 (블루 그라데이션 배경, 반투명 카드, 명령어 입력창 표시)

Summary by CodeRabbit

릴리스 노트

• New Features

  • Claude Code 인증 페이지가 추가되었습니다.

• Improvements

  • TextField 컴포넌트의 스타일링 옵션이 향상되었습니다.

• Chores

  • 파일 무시 설정이 업데이트되었습니다.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

새로운 Claude Code 인증 페이지를 추가하고, 라우터 설정을 업데이트하며, TextField 컴포넌트에 선택적 props를 추가했습니다. .gitignore 파일도 수정되었습니다.

Changes

Cohort / File(s)	Summary
Authentication Page apps/web/src/app/[locale]/auth/claude-code/page.tsx	새로운 클라이언트 사이드 페이지 컴포넌트 추가. useClientSession() 훅으로 인증 상태를 확인하고, 로딩 중에는 로딩 메시지 표시, 미인증 사용자는 로그인으로 리다이렉트, 인증된 사용자에게는 사용자명 기반 커맨드를 표시하는 스타일링된 카드 UI 렌더링.
Route Configuration apps/webview/src/router/index.tsx	인증 경로의 라우터 설정 업데이트. 최상위 element 속성 제거 후 index: true 자식 라우트 추가.
Component Enhancement packages/ui/panda/src/components/Textfield/TextField.tsx	선택적 containerClassName prop 추가로 외부 래퍼 div의 클래스명 커스터마이징 가능.
Ignore Rules .gitignore	.superpowers 및 docs/superpowers 디렉토리 무시 규칙 추가.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

diff: S

Suggested reviewers

• hyesungoh

Poem

🐰 새로운 인증 페이지가 나타나고,
라우트도 재정렬되네요.
TextField는 옷을 고르듯 스타일을,
.gitignore는 정중히 무시하며,
코드의 정원은 점점 자라나간다! 🌱✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경 사항을 명확하게 요약하고 있습니다. 'Claude Code 연동 페이지 추가 (web, webview)'는 이 PR의 핵심인 Claude Code 통합 페이지 추가를 정확하게 설명합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/claude-code

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}