JobDri

채용공고 분석 및 자소서 기반 모의지원 서비스 (Front-End)

Overview

JobDri는 구직자가 실전처럼 대비할 수 있도록 돕는 모의지원 플랫폼입니다. 단순한 정보 제공을 넘어 채용공고의 완성도, 적합도, 그리고 예상 성과를 정교하게 분석하여 성공적인 커리어 여정을 지원합니다.

Front-End Core Values

화려한 기술 스택보다 중요한 것들에 집중합니다.

• 사용자 중심 (User-Centric): 화면 너머의 사용자를 먼저 생각하며, 직관적이고 몰입감 있는 UI/UX를 구현합니다.
• 소통과 조율 (Communication): 기획, 디자인, 백엔드 등 다양한 파트와의 유연한 의견 조율을 통해 프로덕트의 완성도를 높입니다.
• 성장 (Growth): 동료의 피드백을 적극적으로 수용하고 프로덕트에 온전히 몰입하는 개발 문화를 지향합니다.

Tech Stack & Architecture

Environment & Core

• Framework: Next.js 16 (App Router), React 19
• Language: TypeScript
• Package Manager: pnpm (workspace)

Styling & State Management

• Styling: Tailwind CSS v4
• State Management: Zustand (Client), TanStack Query (Server)

Features & Infrastructure

• Payment: PortOne, Toss Payments SDK
• Code Quality: ESLint, Prettier, Husky + lint-staged

Key Features

• 인증 및 인가: OAuth2 기반의 간편하고 안전한 소셜 로그인
• 모의지원: 지원서 작성 및 채용공고 심층 분석 (완성도, 적합도, 성과 분석)
• 크레딧: Toss Payments 기반의 매끄러운 결제 및 크레딧 관리 경험
• 실시간 알림: 사용자의 몰입을 깨지 않는 실시간 Notification 스트리밍

Folder Structure

유지보수와 확장성을 고려하여 App Router 기반의 구조를 채택했습니다.

jobdri/
├── public/            # 폰트, 파비콘 등 정적 에셋
└── src/
    ├── app/           # App Router 라우팅 엔트리
    ├── assets/        # 아이콘, 이미지, 애니메이션 자원
    ├── components/    # 재사용 가능한 UI 컴포넌트
    ├── config/        # 환경변수 및 전역 설정 값
    ├── constants/     # 공통 상수
    ├── hooks/         # 비즈니스 로직 및 커스텀 훅
    ├── lib/           # 외부 API, 인증, 상태 저장소 세팅
    ├── styles/        # Tailwind 및 전역 스타일 시트
    └── utils/         # 순수 유틸리티 함수