feat: add business card component

[chpheid314]

Summary by CodeRabbit

릴리스 노트

• 새 기능

  • 학생 정보(이름, 학번, 이메일, 발급일자)를 표시하는 비즈니스 카드 추가
  • 색상별 맞춤형 디자인이 적용된 카드 레이아웃 구현
  • 프로필 이미지를 포함한 시각적 표현 강화

• 스타일

  • 기본 글꼴을 새로운 서체로 업데이트

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

개요

App 컴포넌트의 렌더링 UI를 heading 요소에서 새로운 BusinessCard 컴포넌트로 변경했습니다. 학생 신분증 스타일의 카드를 표시하는 새로운 컴포넌트를 추가하고, 전체 프로젝트에 Pretendard 폰트를 적용했습니다.

변경사항

응집도 / 파일(들)	변경 요약
App 컴포넌트 업데이트 src/App.tsx	BusinessCard 컴포넌트 임포트 추가 및 name, studentId, email, centerColor, issueDate props를 전달하여 렌더링. 기존 h1 요소 제거
새로운 BusinessCard 컴포넌트 src/components/BusinessCard.tsx	학생 신분증 카드를 표시하는 신규 React 함수형 컴포넌트. centerColor에 따른 동적 스타일(그래디언트, 텍스트 색상, 프로필 SVG)을 적용하고 학번, 이메일, 발급일 정보 표시
전역 폰트 설정 src/index.css	Pretendard 웹폰트 @font-face 규칙 추가 및 body에 적용. PretendardVariable.woff2에서 font-weight 100–900 범위 지원

코드 리뷰 난이도

🎯 2 (단순) | ⏱️ ~10분

• 주의 영역:
  • BusinessCard 컴포넌트의 centerColor 매핑 로직 검증 (그래디언트, 텍스트 색상, SVG 이미지 소스)
  • Pretendard 폰트 파일 경로 및 로드 가능성 확인
  • BusinessCardProps 인터페이스의 props 타입 정의 정확성

시

🐰 카드 한 장, 색깔 곱게
학번과 메일 담아내고
새 폰트도 곱게 입혀
신분증이 예뻐졌네
오늘도 좋은 하루! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용을 명확하게 요약합니다. BusinessCard 컴포넌트 추가가 이 PR의 핵심 변경사항입니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/BusinessCard.tsx (2)

7-13: centerColor를 문자열 유니언 타입으로 제한하면 타입 안정성이 좋아집니다.

지금은 centerColor: string이라 오타가 나도 컴파일 타임에 잡히지 않고, 실제로는 6개 색상만 허용하는 것과 타입이 맞지 않습니다. 아래처럼 유니언 타입을 도입해 두면 사용하는 쪽에서 잘못된 값을 넘길 때 IDE/컴파일 단계에서 바로 잡을 수 있습니다.

+type CenterColor = "purple" | "orange" | "green" | "pink" | "blue" | "yellow";
+
-interface BusinessCardProps {
+interface BusinessCardProps {
   name: string;
   studentId: string;
   email: string;
-  centerColor: string;
+  centerColor: CenterColor;
   issueDate: string;
 }

---

81-88: img의 alt를 사용자 이름을 활용해 더 구체적으로 적어보는 것을 추천합니다.

현재는 alt="profile"이라 스크린 리더 사용자 입장에서는 정보량이 부족할 수 있습니다. name을 활용해 예를 들어 “지니의 프로필 이미지”처럼 읽히게 하면 접근성이 조금 더 좋아집니다.

-            <img
-              src={imageSrc}
-              alt="profile"
-              className="w-full h-full object-cover"
-            />
+            <img
+              src={imageSrc}
+              alt={name ? `${name}의 프로필 이미지` : "프로필 이미지"}
+              className="w-full h-full object-cover"
+            />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 05f3b8c and cf8f282.

⛔ Files ignored due to path filters (5)

• src/assets/fonts/PretendardVariable.woff2 is excluded by !**/*.woff2
• src/assets/icons/default_profile_1.svg is excluded by !**/*.svg
• src/assets/icons/default_profile_2.svg is excluded by !**/*.svg
• src/assets/icons/default_profile_3.svg is excluded by !**/*.svg
• src/assets/icons/default_profile_4.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• src/App.tsx (1 hunks)
• src/components/BusinessCard.tsx (1 hunks)
• src/index.css (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: Yejin-02
Repo: gsainfoteam/bbun-finder-fe PR: 4
File: lib/presentation/widgets/bbun_delete.dart:99-101
Timestamp: 2025-02-15T01:22:15.923Z
Learning: PR #4 (feat: basic UI for profile edit page) focuses on implementing the basic UI components. The implementation of specific functionalities, such as account deletion logic, is planned for future PRs.

🧬 Code graph analysis (1)

src/App.tsx (1)

src/components/BusinessCard.tsx (1)

• BusinessCard (15-149)

🔇 Additional comments (2)

src/index.css (1)

1-13: Pretendard 폰트 설정이 전체 앱 기본값으로 잘 잡혀 있습니다.

Tailwind @import "tailwindcss" 다음에 Pretendard variable 폰트를 한 번만 선언하고, font-display: swap까지 지정한 구조가 깔끔합니다. body의 기본 폰트를 "Pretendard", sans-serif로 통일한 것도 일관성 측면에서 좋아 보입니다. ./assets/fonts/PretendardVariable.woff2 경로에 실제 폰트 파일만 존재하는지 빌드 한 번 돌려 확인해 보시면 좋겠습니다.

src/App.tsx (1)

1-17: 샘플 BusinessCard 렌더링 구조가 단순하고 명확합니다.

전체 화면을 가운데 정렬하는 컨테이너 안에 <BusinessCard> 하나만 두어서 컴포넌트 UI를 빠르게 확인하기 좋습니다. 지금처럼 데모용으로 하드코딩해 두고, 추후 실제 데이터 연동 시에만 props를 상태/쿼리 값으로 교체하면 될 것 같네요.