"이 질문이 정말 내 경험을 보고 나온 걸까?"
많은 면접 준비 서비스는 단순한 질문 생성에서 멈춥니다.
VlaInter는 실제 준비 흐름이 끊기지 않도록 질문 생성, 답변 평가, 문서 분석, 학습 복기까지 한 흐름으로 연결합니다.
- 기술 스택 기반 실전 면접
- 이력서/자기소개서/포트폴리오 기반 개인화 질문
- 학생 과목/자료 기반 요약, 시험, 오답노트
- AI 모범 답안 생성과 피드백
- 세션 저장 및 복기 기능
- 직무와 기술 스택 기반 질문 생성
- 답변 제출 후 AI 모범 답안과 피드백 제공
- 저장 질문과 질문 세트 관리
- 세션 결과와 이력 조회
- 이력서, 자기소개서, 포트폴리오 업로드
- 문서 기반 질문 생성과 면접 세션 시작
- 경험 중심 맞춤 질문 연습
- 답변 평가와 이력 관리
- 과목 생성과 학적 정보 기반 학습 진입
- 강의 자료 업로드와 유튜브 자료 요약
- 시험 세션 생성과 제출
- 오답노트, 요약 문서, 복습 흐름 제공
- 관리자 콘솔
- 질문/카테고리/사이트 설정 운영
- 포인트 충전과 패치노트 확인
- 사용자 문의 및 리포트 접수 흐름
VlaInter 프론트엔드는 React + Vite 기반 SPA로, 취업 준비생용 AI 면접 연습 흐름과 대학생용 학습 보조 흐름을 하나의 앱 안에서 함께 제공합니다.
위 이미지는 로컬 Vite 개발 서버 기준 공개 화면을 캡처한 예시입니다.
- 취준생 모드 랜딩, 서비스 소개, 회원가입/로그인, 카카오 로그인
- 문서 기반 모의면접 시작, 기술 질문 연습, 세션 결과/히스토리 조회
- 저장 질문, 질문 세트, 문서 업로드, 포인트 충전 UI
- 대학생 모드 랜딩, 과목 관리, 자료 업로드, 시험 세션, 오답노트
- 마이페이지에서 프로필, 서비스 모드, 학적 정보, Gemini API Key, 포인트 이력 관리
- 관리자 콘솔에서 회원, 질문/카테고리, 운영 설정, 패치노트, KPI 확인
| 구분 | 사용 기술 |
|---|---|
| Framework | React 19, Vite 7 |
| Routing | React Router DOM 6 |
| UI / Motion | CSS, Tailwind 유틸리티 스타일, Framer Motion |
| Utilities | html2canvas, jsPDF, react-icons |
| Auth Integration | Cookie-based session, Kakao OAuth |
| Build / Lint | Vite, ESLint |
| 구역 | 주요 경로 | 설명 |
|---|---|---|
| 공개 화면 | /, /campus, /about, /terms, /privacy |
랜딩과 소개, 약관/정책 |
| 인증 화면 | /login, /join, /password/forgot, /auth/kakao/callback |
로그인, 회원가입, 비밀번호 찾기 |
| 공통 진입점 | /content, /content/service-mode, /content/mypage |
로그인 후 서비스 모드 분기와 공통 설정 |
| 취준생 모드 | /content/interview, /content/tech-practice, /content/files, /content/question-sets 등 |
면접/질문/문서/결제 흐름 |
| 대학생 모드 | /content/student, /content/student/courses/:courseId, /content/student/sessions/:sessionId |
과목/자료/시험/오답노트 |
| 관리자 | /content/admin |
운영자 전용 콘솔 |
- 공개 랜딩 또는 로그인 화면에서 인증
/content진입 시 프로필의serviceMode를 확인- 취준생이면
/content/interview, 대학생이면/content/student, 미선택이면/content/service-mode로 이동 - 취준생 주요 화면은 일부 기능에서 Gemini API Key 등록이 필요
git pull 또는 클론 직후 아래 순서대로 진행하면 됩니다.
모노레포 루트에서 시작했다면 먼저 cd vlainter_FE/vlainter로 이동한 뒤 아래 명령을 실행하세요.
cp .env.example .env필수 항목:
VITE_API_BASE_URLVITE_KAKAO_CLIENT_IDVITE_KAKAO_AUTH_URIVITE_KAKAO_REDIRECT_URI
선택 항목:
VITE_PORTONE_PG
npm installnpm run dev기본 개발 주소는 http://localhost:5173입니다.
npm run build
npm run preview| 변수 | 설명 |
|---|---|
VITE_API_BASE_URL |
백엔드 API 기본 주소. 기본값은 http://localhost:8080 |
VITE_KAKAO_CLIENT_ID |
카카오 OAuth 클라이언트 ID |
VITE_KAKAO_AUTH_URI |
카카오 인증 페이지 주소 |
VITE_KAKAO_REDIRECT_URI |
카카오 로그인 완료 후 복귀할 프론트 주소 |
VITE_PORTONE_PG |
포인트 결제에 사용할 PG 코드. 미설정 시 html5_inicis |
- 모든 API 요청은 기본적으로
VITE_API_BASE_URL을 기준으로 호출합니다. - 인증 방식은 Bearer token 헤더가 아니라
credentials: include기반 쿠키 세션입니다. 401이 발생하면/api/auth/refresh를 통해 세션 갱신을 한 번 더 시도합니다.- 보호 화면 진입 시
BrowserSessionGuard가 프로필 조회로 브라우저 세션 유효성을 확인합니다. - 취준생 주요 화면은
GeminiApiKeyGuard가 한 번 더 확인하므로, 로그인 후에도 Gemini API Key 미등록 상태면 제한될 수 있습니다.
src
├── assets # 로고, 아이콘, 이미지
├── components # 공통 UI, Guard, Sidebar, Modal
├── hooks # 재사용 훅
├── lib # API 클라이언트, 세션/도메인 유틸
├── pages
│ ├── auth # 로그인, 회원가입, 비밀번호 찾기
│ ├── content # 취준생/학생/관리자 보호 화면
│ └── *.jsx # 공개 페이지, 정책 페이지
├── App.jsx # 전체 라우팅 정의
└── main.jsx # 앱 엔트리포인트
npm run lint
npm run build추가 수동 검증 권장 항목:
/랜딩 로드/login폼 렌더링/campus랜딩 로드- 로그인 후
/content서비스 모드 분기 확인 - Gemini API Key 미등록 상태에서 취준생 보호 화면 진입 제약 확인
- 프론트 전용 테스트 러너는 아직 구성되어 있지 않습니다.
- 따라서 자동 검증 기준은 현재
lint + build중심입니다. - 보호 화면을 깊게 검증하려면 백엔드가 함께 실행 중이어야 합니다.
- 관리자 화면 캡처나 공유 시 회원 정보, 접속 이력, 결제 데이터는 반드시 마스킹해야 합니다.
- 라우팅의 중심은 src/App.jsx입니다.
/content진입 분기 로직은 src/pages/content/ContentEntryPage.jsx에서 확인할 수 있습니다.- API 클라이언트와 refresh 로직은 src/lib/apiClient.js에서 확인할 수 있습니다.