feat: Tag 컴포넌트 생성 및 색상 추가

[Min9ithub]

🛠️ PR 유형

어떤 변경 사항이 있나요?

• FEAT: 새로운 기능 추가
• FIX: 버그 수정
• DESIGN: CSS 등 사용자 UI 디자인 변경
• REFACTOR: 코드 리팩토링
• COMMENT: 주석 추가 및 수정
• DOCS: 문서 수정
• BUILD: 빌드 부분 혹은 패키지 매니저 수정
• DELETE: 파일 혹은 폴더 삭제
• CHORE: 그 외 자잘한 수정

📝 요약(Summary)

• Tag 컴포넌트 생성했습니다.
• Tag 컴포넌트의 색상에서 black과 blue는 헷갈릴 것 같아서 배경색으로 이름을 정했습니다.
• tailwind.config.ts에 색상 추가했습니다.

📸스크린샷 (선택)

💬 공유사항 to 리뷰어

• 리뷰어가 중점적으로 봐줬으면 좋겠는 부분이 있으면 적어주세요.
• 논의해야할 부분이 있다면 적어주세요.
• ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

🔗 Reference

• 해당 작업을 수행하며 참고한 Link를 모두 작성

✅ PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• 커밋 메시지 컨벤션에 맞게 작성했습니다.
• 변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).

[github-actions]

🤖 Gemini AI 코드 리뷰

Git Diff 리뷰

♿ 접근성 (a11y) 문제

• div 요소는 의미론적으로 일반적인 컨테이너입니다. "태그"의 역할에 따라 span, button, a 등 더 적절한 HTML 요소가 있을 수 있습니다. 예를 들어, 클릭 가능한 태그라면 button이 적합합니다. 태그의 용도를 고려하여 적절한 시맨틱 요소를 사용하는 것이 좋습니다.
• leftIcon과 rightIcon이 시각적인 장식용이라면 aria-hidden="true" 속성을 추가하여 스크린 리더가 불필요하게 읽지 않도록 해야 합니다. 만약 아이콘이 중요한 정보를 전달한다면, 해당 정보가 스크린 리더 사용자에게도 제공되어야 합니다 (예: aria-label 또는 시각적으로 숨겨진 텍스트).

⚡ 렌더링 성능

• useMemo를 사용하여 tagStyles 문자열을 메모이제이션하고 있습니다. className prop이 부모 컴포넌트에서 매 렌더링마다 새로운 문자열로 전달될 경우, useMemo는 매번 재계산됩니다. Tailwind CSS는 클래스 문자열 변경에 효율적이므로, 단순한 문자열 조합에 useMemo를 사용하는 것이 실제 성능 이점보다는 코드 복잡성을 증가시킬 수 있습니다. 대부분의 경우 useMemo 없이 직접 문자열을 조합해도 성능에 큰 영향은 없을 것입니다.

🎨 CSS / 스타일 개선

• TAG_SIZE_STYLES에서 h-[2rem], gap-[0.2rem], text-[1rem], px-[0.8rem] 등 임의의 Tailwind 값을 사용하고 있습니다. 이러한 값들이 디자인 시스템의 특정 스케일(예: spacing, fontSize)에 해당한다면, tailwind.config.ts에 커스텀 유틸리티로 정의하여 일관성을 유지하고 재사용성을 높이는 것이 좋습니다.

---

Gemini 2.5 Flash | Diff 크기: 4622 bytes

[b1uey0]

확인했습니다.