[Feat] Header 컴포넌트 수정 및 리팩토링

[KyeongJooni]

✨ 주요 변경사항

• Header 로그인 상태 및 UserMenu 드롭다운 추가
• Profile, Card 컴포넌트 리팩토링
• RadioButton disabled 스타일 수정
• 컴포넌트 스토리/테스트 추가
• Storybook GitHub Pages 배포 설정

---

📝 작업 상세 내용

• Header: isLoggedIn prop으로 상태 분기, UserMenu 드롭다운
• Profile: 태그로 변경, Props 네이밍 개선
• Card: Props 네이밍 간소화, slots 구조 변경
• RadioButton: disabled 시 회색 dot 표시

---

✅ 체크리스트

• PR 본문에 Close #번호 추가
• 불필요한 주석, 디버깅 코드 제거
• 기능 테스트 및 정상 동작 확인
• 커밋컨벤션 / 코드컨벤션 준수

---

📸 스크린샷 (선택)

헤더 컴포넌트

라디오 버튼

---

🔍 기타 참고사항

• Storybook 배포 URL: https://leets-official.github.io/loopit/ (main 머지 후 활성화)
• 헤더 컴포넌트 내 추가되는 루핏톡 텍스트 => 디자인 확정 받고 작업 예정

---

🔗 관련 이슈

• Close [Feat] #24 - Header 컴포넌트 수정 및 리팩토링 #24

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
❌ Build: 실패

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
loopit	Ready	Preview, Comment	Jan 15, 2026 4:17pm

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 측정 불가

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
⚠️ ESLint: 문제 발견
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

ESLint 상세

• Errors: 1
• Warnings: 0

src/pages/playground.tsx

• Error (Line 291): Parsing error: '}' expected. unknown

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

[jwj0620gcu]

수고하셨습니다! 리팩토링 깔끔하게 해주셔서 감사합니다!

[YeBeenChoi]

전체적으로 구조가 많이 정리돼서 코드를 읽기가 훨씬 편해진 것 같아요 👍 Card 컴포넌트에서 props 네이밍 변경하신 것과 Header 컴포넌트에서 variants를 제거하고 cn으로 정리하신 점이 인상적이었습니다! UserMenu로 로직을 분리한 것도 역할이 명확해져서 좋은 것 같아요! 고생 많으셨습니다 👍👍