커리어핏 (CareerFit) - 로컬 단독형(SPA) 아키텍처 전환 완료 보고서

본 문서는 커리어핏 서비스를 기존 온라인 서버리스 백엔드 배포형 구조에서 완전히 로컬 브라우저 단독 실행형(Pure SPA, Single Page Application) 구조로 전향하고, 사용자가 직접 Gemini API Key를 등록하여 브라우저 내에서 직접 AI 기능을 사용할 수 있도록 변경한 내역을 정리한 리포트입니다.

1. 주요 변경 파일 및 변경 내역

1) package.json (개발/빌드 스크립트 환원)

기존 Node.js/Express 서버 컴파일 및 번들링 단계를 모두 제거했습니다.
순수 Vite 기반의 개발 및 빌드 스크립트로 단순화하였습니다.
- npm run dev: Vite 로컬 개발 서버 작동 (http://localhost:5173)
- npm run build: 브라우저용 정적 에셋(HTML/JS/CSS) 빌드 실행
- npm run preview: 빌드된 정적 리소스 로컬 미리보기 작동

2) src/utils/gemini.ts (로컬 Gemini API 연동 모듈 신규 생성)

브라우저 환경에서 사용자의 API Key를 이용해 Google Gemini API (gemini-2.5-flash)를 직접 호출하는 REST fetch 구조를 구현하였습니다.
보안성: 사용자가 입력한 API Key는 서버로 전송되지 않으며, 사용자의 브라우저 로컬 저장소인 localStorage(careerfit_gemini_api_key)에만 안전하게 보관됩니다.
안정성 (Fallback): API Key가 없거나, 만료되었거나, 네트워크 요류 등으로 AI 연동에 실패할 경우, 고정된 샘플 데이터 또는 간단한 규칙(정규식 기반 키워드 파싱) 기반으로 대체 연동되어 정상 작동이 보장되도록 로직을 다중화하였습니다.

3) src/components/Navbar.tsx (API Key 설정 UI 추가)

GNB(상단 네비게이션) 영역 우측의 “JD 스크랩” 버튼 좌측에 [Gemini Key 등록] (열쇠 아이콘) 버튼을 새로 배치하였습니다.
버튼을 누르면 API Key를 입력/수정/삭제할 수 있는 미니 드롭다운이 열립니다. 등록된 Key는 localStorage와 React state를 통해 즉시 동기화됩니다.

4) src/components/JobScraperModal.tsx (공고 스크랩 연동)

기존의 백엔드 /api/scrape-jd API fetch 부분을 신규 로컬 유틸 함수인 localScrapeJD 호출로 완전 대체하였습니다.
API Key가 미지정된 채 분석을 시도하면 가이드를 노출하여 사용자 경험을 보강했습니다.

5) src/App.tsx (이력서 매칭 연동)

기존의 백엔드 /api/analyze-match API fetch 부분을 신규 로컬 유틸 함수인 localAnalyzeMatch 호출로 완전 대체하였습니다.

2. 로컬 실행 방법

브라우저 단독형으로 변경되었으므로, 이제 로컬 머신에서 가볍게 구동이 가능합니다.

종속성 설치 (최초 1회):
```
npm install
```
로컬 개발 서버 실행:
```
npm run dev
```
브라우저 실행 및 접속:
- 주소창에 http://localhost:5173 입력하여 접속합니다.
Gemini API Key 등록:
- 헤더 우측의 [Gemini Key 등록] 버튼을 클릭하여 본인의 API Key를 저장한 후 스크랩 및 이력서 매칭을 테스트합니다.
- (참고: Key가 없어도 예시 카드(J&J MedTech 등)나 Fallback 파싱이 기본적으로 원활히 작동합니다.)