Skip to content

feat: Badge 및 Card 컴포넌트 구현 및 디자인 적용#14

Open
0rrriiinnn0 wants to merge 1 commit intodevfrom
feature/12-card-badge-component
Open

feat: Badge 및 Card 컴포넌트 구현 및 디자인 적용#14
0rrriiinnn0 wants to merge 1 commit intodevfrom
feature/12-card-badge-component

Conversation

@0rrriiinnn0
Copy link
Collaborator

@0rrriiinnn0 0rrriiinnn0 commented Feb 25, 2026

📌 관련 이슈

#12

✨ 변경 내용

<HomePage 반영>

  • (src/pages/HomePage)
    배지 컴포넌트들을 배치하여 피그마 디자인 시안 구현했음 (이 페이지에 새로 만든 컴포넌트들을 배치하여 구조 설계하기)

<신규 컴포넌트 생성>

  • Badge 컴포넌트: src/components/common/Badge.jsx (배지 공통 컴포넌트)

  • Card 컴포넌트: src/components/common/Card.jsx (카드 컴포넌트 기본 구조)

<Badge 컴포넌트 구현하기>

  • Tailwind CSS 스타일링: 피그마 디자인 기반으로 테일윈드 클래스를 사용하여 배지 UI 구현

  • 디자인 토큰 적용: 'tokens.css'에 정의된 변수를 활용하여 공통 배지 색상 및 폰트 스타일 지정 (src/styles/tokens.css)

📸 스크린샷(선택)

스크린샷 2026-02-25 오후 7 30 37

📚 참고사항

  • 현재 배지 컴포넌트의 단독 UI 구현이 완료된 상태입니다

<추후 작업 예정>

  • Card 컴포넌트 구현하기
  • 레이아웃: 배지 리스트 가운데 정렬 처리
  • 기능: 'map' 함수를 사용하여 데이터 배열 기반의 배지 동적 렌더링 (고유 key 값 부여 예정)
  • 카드 연동: 추후 Card 컴포넌트 제작 시, 현재 구현된 배지 리스트를 카드 내부로 옮기기

- 피그마 디자인 기반 Badge 스타일링 완료
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 카드 및 배지 컴포넌트 구현

1 participant