Dowan/1week teamcard

[KoreanFever]

1주차 스터디 PR - TeamMemberCard 구현

과제 개요

React의 기본 개념인 JSX, 컴포넌트 구조, props를 활용하여 팀원 정보를 보여주는 카드 컴포넌트를 구현했습니다.

구현 내용

1. 기본 과제 ✅

• TeamMemberCard 컴포넌트 생성
  • 이름, 부서, 입사일을 props로 전달받아 표시
  • 컴포넌트 구조화를 통한 재사용성 확보
  • JSX 문법을 활용한 UI 구현

2. 선택 과제 ✅

1. 입사 N년차 표시

   • calculateYears 함수 구현
   • 현재 연도와 입사일을 비교하여 연차 계산
   • 연차 정보를 카드에 표시

2. 부서별 카드 배경색

   • getDepartmentColor 함수 구현
   • 개발팀: 파란색
   • 디자인팀: 분홍색
   • 마케팅팀: 초록색
   • 기본값: 회색

3. 모달로 상세 정보 출력

   • useReducer를 활용한 모달 상태 관리
   • 카드 클릭 시 모달 표시
   • 모달 내부에 상세 정보 표시

기술 스택

• React
• Tailwind CSS
• Vite

주요 학습 내용

1. 컴포넌트 구조화

   • 재사용 가능한 컴포넌트 설계
   • props를 통한 데이터 전달

2. 상태 관리

   • useState를 활용한 검색 기능
   • useReducer를 활용한 모달 상태 관리

3. 조건부 렌더링

   • 연차에 따른 뱃지 표시
   • 부서별 배경색 적용

UI/UX 특징

1. 반응형 디자인

   • Tailwind CSS를 활용한 반응형 레이아웃
   • 다양한 화면 크기에 대응

2. 인터랙티브 요소

   • 카드 hover 효과
   • modal 애니메이션

🔍 코드 구조

src/
├── components/
│   ├── TeamMemberCard.jsx
│   └── Modal.jsx
├── App.jsx
└── main.jsx

---