Reflex

Flex(flex.team) HR SaaS를 프록시하는 비공식 Chrome 확장 프로그램입니다. 팝업 하나로 출퇴근 현황, 이번 달 근무 시간, 캘린더, 연차 정보를 빠르게 확인할 수 있습니다.

⚠️ 이 확장 프로그램은 FlexTeam Inc.와 무관한 비공식 프로젝트입니다.

주요 기능

• 로그인 없는 로그인 — 별도 로그인 절차 없이 flex.team에 로그인된 브라우저 쿠키(AID/V2_WS_AID)를 읽어 세션을 구성합니다.
• 대시보드 — 오늘의 근무 상태, 이번 달 근무 시간, 연차 갯수를 한눈에 확인합니다.
• 캘린더 — 월별 근무/휴게/연차 내역을 달력 형태로 조회하고, 날짜를 클릭하면 상세 내역을 볼 수 있습니다.
• 설정 — 라이트/다크/시스템 테마 전환, 로그아웃, 버전 정보를 제공합니다.
• 둘러보기 모드 — 로그인 없이 목업 데이터로 UI를 미리 체험할 수 있습니다.

기술 스택

분류	스택
확장 프로그램	WXT (Manifest V3)
UI	React 19, TypeScript, Tailwind CSS v4, shadcn/Base UI
상태/데이터	Zustand, TanStack Query, Axios
API 스키마	Zod, orval(OpenAPI 코드 생성), MSW(모킹)
테스트	Vitest, Testing Library, Storybook
린트/포맷	Biome

시작하기

요구 사항

• Node.js
• pnpm

설치 및 실행

pnpm i
pnpm api
pnpm dev

pnpm dev 실행 후 안내되는 .output 디렉터리를 크롬 확장 프로그램 관리 페이지(chrome://extensions)에서 "압축해제된 확장 프로그램을 로드합니다"로 불러오면 됩니다.

그 외 스크립트

스크립트	설명
pnpm dev / pnpm dev:edge / pnpm dev:firefox	브라우저별 개발 서버 실행
pnpm build / pnpm build:firefox	프로덕션 빌드
pnpm zip / pnpm zip:firefox	스토어 제출용 zip 생성
pnpm storybook	Storybook 실행 (localhost:6006)
pnpm test / pnpm test:watch / pnpm test:coverage	Vitest 테스트 실행
pnpm compile	tsc --noEmit 타입 체크
pnpm check	Biome 린트/포맷
pnpm api	OpenAPI 문서 생성 + orval 코드 생성

폴더 구조

entrypoints/에는 WXT 진입점(boilerplate)만 있고, 실제 작성 코드는 전부 src/ 아래에 있습니다.

src/
  components/
    atom/
    molecule/
    organism/
    template/
  api/
  config/
  hooks/
  shadcn/
  utils/
  constants/
  types/

각 컴포넌트는 ComponentName.tsx / ComponentName.spec.tsx / ComponentName.stories.tsx / index.ts로 구성된 Component Set 단위로 관리됩니다.

인증 흐름

1. AID 쿠키가 존재하면 로그인 상태로 간주합니다.
2. AID가 없으면 V2_WS_AID(Refresh Token)로 Access Token 재발급을 시도합니다.
3. 재발급도 실패하면 FlexHR 로그인 페이지로 안내합니다.

토큰은 별도 변환 없이 Cookie 헤더로 그대로 전달됩니다.

개발 컨벤션

Claude Code와의 협업 컨벤션, API/컴포넌트/테스트 작성 규칙은 CLAUDE.md에 정리되어 있습니다.