채용 플랫폼 프론트엔드

LinkedIn 스타일의 채용 플랫폼 프론트엔드입니다. 최고의 인재와 기회를 연결하는 현대적인 채용 플랫폼을 제공합니다.

🚀 주요 기능

1. LinkedIn 스타일 프로필

• 이력서 관리: PDF 이력서 업로드, 다운로드, 미리보기
• 포트폴리오: 프로젝트 갤러리 형태로 시각적 포트폴리오 관리
• 추천서: 동료/상사로부터 받은 추천서 관리
• 경력/학력: 타임라인 형태의 경력 및 학력 정보
• 기술 스택: 카테고리별 스킬 관리 및 숙련도 표시

2. 채용공고 시스템

• 스마트 검색: 직무, 회사, 기술스택으로 검색
• 고급 필터: 경력, 고용형태, 지역, 연봉, 기술스택별 필터링
• AI 추천: 사용자 프로필에 맞는 맞춤형 채용공고 추천
• 북마크: 관심 채용공고 저장 및 관리
• 정렬 옵션: 관련성, 등록일, 연봉, 지원자 수별 정렬

3. 인재 검색

• 다양한 검색 옵션: 스킬, 경력, 지역별 검색
• 프로필 미리보기: 인재 프로필을 미리 확인
• 연결 기능: 인재와 직접 연결

🛠 기술 스택

• Frontend: React 18, TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• State Management: Zustand
• Data Fetching: TanStack Query
• Routing: React Router DOM
• Build Tool: Vite

📁 프로젝트 구조

src/
├── components/          # 재사용 가능한 컴포넌트
│   ├── common/         # 공통 컴포넌트 (Navbar 등)
│   ├── JobBoard/       # 채용공고 관련 컴포넌트
│   └── MainPage/       # 메인 페이지 컴포넌트
├── pages/              # 페이지 컴포넌트
├── types/              # TypeScript 타입 정의
├── App.tsx             # 메인 앱 컴포넌트
└── main.tsx            # 앱 진입점

🚀 시작하기

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

3. 빌드

npm run build

4. 미리보기

npm run preview

📱 반응형 디자인

• 모바일: 320px 이상
• 태블릿: 768px 이상
• 데스크톱: 1024px 이상

🎨 디자인 시스템

색상

• Primary: Blue (600)
• Secondary: Gray (50-900)
• Success: Green (500-600)
• Warning: Orange (500-600)
• Error: Red (500-600)

타이포그래피

• Font Family: Inter
• Headings: 2xl-6xl
• Body: base-lg
• Small: sm-xs

🔧 주요 컴포넌트

JobCard

채용공고를 카드 형태로 표시하는 컴포넌트

• 그리드/리스트 뷰 지원
• 북마크 기능
• 마감일 알림
• 지원하기 버튼

JobFilters

채용공고 필터링을 위한 사이드바 컴포넌트

• 경력, 고용형태, 지역, 연봉, 기술스택 필터
• 실시간 필터 적용
• 필터 초기화 기능

PlatformHero

메인 페이지의 히어로 섹션

• 매력적인 첫 화면
• CTA 버튼
• 플랫폼 통계

📄 라이선스

MIT License