+ );
+}
diff --git a/src/pages/landing-page/1-main/components/HeroContent.jsx b/src/pages/landing-page/1-main/components/HeroContent.jsx
index 0e3b985..9a8c754 100644
--- a/src/pages/landing-page/1-main/components/HeroContent.jsx
+++ b/src/pages/landing-page/1-main/components/HeroContent.jsx
@@ -4,9 +4,11 @@ import KHUxPertineo from "assets/icons/KHUxpertineo.svg";
import { SESSION_STORAGE_KEY } from "api/sessionApi";
import { ANALYSIS_REPORT_KEY } from "pages/analysis-page/AnalysisPage";
import TextMotion from "./TextMotion";
+import DemoReportModal from "./DemoReportModal";
function HeroContent() {
const [hovered, setHovered] = useState(false);
+ const [showDemo, setShowDemo] = useState(false);
const navigate = useNavigate();
const handleStart = () => {
@@ -21,6 +23,7 @@ function HeroContent() {
};
return (
+ <>
{/* KHU × Pertineo */}
@@ -68,11 +71,13 @@ function HeroContent() {
{/* 버튼 영역 */}
- {/*
+
+ {showDemo && setShowDemo(false)} />}
+
);
}
diff --git a/src/pages/landing-page/1-main/components/demoData.ts b/src/pages/landing-page/1-main/components/demoData.ts
new file mode 100644
index 0000000..24499d8
--- /dev/null
+++ b/src/pages/landing-page/1-main/components/demoData.ts
@@ -0,0 +1,201 @@
+import { FinalStateData, PassScoreData } from "schema/Analysis";
+
+export const DEMO_FINAL_STATE: FinalStateData = {
+ analyzerRetryCount: 0,
+ answerList: [
+ "전국 규모의 유통망을 연결하는 안정적인 IT 시스템 운영과 혁신적인 인프라 구축 비전에 공감하여 지원했습니다. 입사 후에는 시스템 모니터링 자동화와 클라우드 인프라 최적화를 통해 운영 효율성을 높이는 IT 관리자가 되겠습니다.",
+ "컴퓨터공학을 전공하며 React와 Spring Boot를 활용한 실시간 웹 모니터링 서비스를 구축하고 GCP 환경에 성공적으로 배포한 경험이 있습니다. 또한 LangGraph와 FastAPI를 이용해 데이터를 분석하는 AI 에이전트를 개발하며 최신 IT 트렌드와 인프라 운영 역량을 길렀습니다.",
+ ],
+ applyUrl: "https://recruit.company.com/apply/10293",
+ backgroundCareerAward: "모니터링 시스템 구축 프로젝트, AI 에이전트 개발 경험",
+ certificates: "정보처리기사, Oracle Database SQL Certified Associate",
+ company: "야놀자",
+ contextDB: null,
+ contextWeb: null,
+ division: "IT본부",
+ education: "대학교(4년제) 졸업",
+ gpa: "3.8",
+ isEvaluationPassed: false,
+ jobField: "IT/개발",
+ jobPosition: "IT",
+ linguisticAbility: "TOEIC 850",
+ major: "컴퓨터공학",
+ planResult: null,
+ questionList: [
+ "당사에 지원하게 된 동기와 입사 후 포부에 대해 서술해 주십시오.",
+ "지원한 직무를 수행하기 위해 본인이 갖춘 역량과 관련된 경험을 구체적으로 서술해 주십시오.",
+ ],
+ schemaResult: true,
+ userId: null,
+ evaluationResult: {
+ level: "보통",
+ jobSummary:
+ "야놀자 IT본부의 시스템 운영, 모니터링 자동화, 클라우드 인프라 최적화 중심 직무에 대한 지원으로 판단됩니다.",
+ x: {
+ score: 4.1,
+ criteria: [
+ "이론을 실제 문제에 적용한 경험 여부",
+ "변수와 결과를 연결한 설명 가능 여부",
+ "왜 해당 기술을 선택했는지의 근거",
+ "데이터와 KPI를 연결한 설명 가능 여부",
+ "프로젝트에서 직접 분석 또는 구현을 수행했는지 여부",
+ ],
+ basis: [
+ "컴퓨터공학 전공으로 IT 시스템과 개발에 대한 기본 학습 기반이 있습니다.",
+ "React, Spring Boot를 활용한 실시간 웹 모니터링 서비스 구축 경험이 있습니다.",
+ "GCP 환경 배포 경험이 있어 개발 결과를 실행 환경으로 연결한 흔적이 있습니다.",
+ "AI 에이전트 개발 경험으로 최신 기술을 적용해 본 이력이 있습니다.",
+ "다만 문제 정의, 변수 설정, 성능 개선의 구조적 설명과 수치 성과가 없습니다.",
+ ],
+ summary:
+ "기본적인 실무 적용은 가능하지만, 독립 설계와 정량적 성과 연결은 아직 약한 수준입니다.",
+ compareScore:
+ "합격자 데이터보다 학습 기반은 비슷하나, 분석·설계의 깊이와 성과 증명이 약합니다.",
+ },
+ y: {
+ score: 3.6,
+ criteria: [
+ "Role: 해당 직무 핵심 역할을 직접 수행했는지",
+ "Skill: 운영/인프라/배포 기술을 업무 수준으로 사용할 수 있는지",
+ "Domain: IT 운영과 서비스 안정성 구조를 이해하는지",
+ "Behavior: 협업과 실행 방식이 직무에 맞는지",
+ "직무 관련 프로젝트의 실제 기여도가 있는지",
+ ],
+ basis: [
+ "지원 직무와 유사한 모니터링 자동화 및 클라우드 인프라 최적화 관심이 있습니다.",
+ "웹 모니터링 서비스와 AI 에이전트 개발 경험이 직무 기술과 일부 맞습니다.",
+ "그러나 IT 운영/인프라의 핵심 역할 수행, 협업 방식, 운영 의사결정 근거가 드러나지 않습니다.",
+ "도메인 측면에서 유통망 연결형 안정성, 운영 효율, 장애 관리 맥락 설명이 부족합니다.",
+ "행동 측면에서도 협업, 개선, 실행의 구체적 사례가 없습니다.",
+ ],
+ summary:
+ "직무 연관 기술은 있으나 핵심 역할 수행과 도메인 이해가 약해 중간 이하 적합도입니다.",
+ compareScore:
+ "합격자 데이터보다 직무 연관 기술은 있으나, 역할·도메인·행동 근거가 약해 적합도가 낮습니다.",
+ },
+ z: {
+ score: 3.4,
+ criteria: [
+ "KPI 존재 여부",
+ "Execution Loop 반복 여부",
+ "본인 기여도(ACI) 명확성",
+ "재현성(RI) 설명 가능 여부",
+ "확장성(ISI) 설명 가능 여부",
+ ],
+ basis: [
+ "실시간 웹 모니터링 서비스 구축 경험은 있으나 결과 수치가 제시되지 않았습니다.",
+ "GCP 배포 경험은 있으나 운영 전후 비교나 개선 수치가 없습니다.",
+ "AI 에이전트 개발 경험도 결과물 중심으로만 제시되어 개선 반복 구조가 보이지 않습니다.",
+ "문제 정의-가설-실행-측정-개선-재적용의 Execution Loop가 확인되지 않습니다.",
+ "본인 기여도, 재현성, 확장성에 대한 설명이 부족합니다.",
+ ],
+ summary:
+ "성과 경험은 있으나 수치화·반복 개선·재현성 입증이 부족해 수행역량은 제한적입니다.",
+ compareScore:
+ "합격자 데이터보다 성과의 구조화가 약하고, 반복성과 수치 증명이 없어 수행역량이 낮습니다.",
+ },
+ roleFit:
+ "직무 관련 프로젝트 경험은 있으나 IT 운영/인프라의 핵심 역할을 직접 수행했다는 근거는 부족합니다.",
+ domainFit:
+ "컴퓨터공학 전공과 웹 모니터링 서비스, GCP 배포 경험은 IT 인프라/플랫폼 운영 도메인과 연결됩니다. 그러나 유통망 규모의 안정성, 운영 효율, 모니터링 체계 같은 산업 맥락 이해는 얕게 드러납니다.",
+ cultureFit:
+ "안정적인 시스템 운영과 효율 개선을 중시하는 점은 야놀자의 IT 운영/인프라 문화와 방향성이 맞습니다. 다만 협업 방식, 문제 해결 태도, 운영 우선순위에 대한 서술이 없어 문화 적합성을 강하게 입증하진 못합니다.",
+ skillFit:
+ "React, Spring Boot, GCP, FastAPI, LangGraph 사용 경험은 확인되며 기술 적합성은 있는 편입니다. 다만 업무 수준의 숙련도와 운영 적용 범위는 답변만으로는 검증되지 않습니다.",
+ compareProb: [
+ "합격자 데이터 대비, 현재 답변은 수치 성과와 반복 개선 구조가 부족해 경쟁력이 약합니다.",
+ "합격자 데이터는 문제-행동-결과가 구체적인 반면, 현재 답변은 성과의 규모와 본인 기여도가 추상적입니다.",
+ "직무 적합 기술은 있으나 운영·인프라 KPI와 재현성 설명이 부족해 합격자 데이터 수준에 미치기 어렵습니다.",
+ "문항 분량 자체는 짧아 핵심 경험의 깊이를 충분히 보여주지 못합니다.",
+ ],
+ scoreSummary: [
+ "X축은 전공과 기술 경험으로 기본 학습 수준은 확인되지만, 구조 설계와 KPI 연결이 약해 4점대 초반 수준입니다.",
+ "Y축은 직무 관련 기술 적합성은 있으나 운영 역할의 실무 수행·도메인 이해·행동 적합성 근거가 충분하지 않아 3점대 후반~4점 초반입니다.",
+ "Z축은 성과 수치, 반복 Loop, 재현성 서술이 없어 상위 점수로 올리기 어렵고 3점대 후반 수준으로 평가됩니다.",
+ "전체적으로는 '할 수 있다'는 징후는 있으나 '어떻게 반복적으로 성과를 내는가'가 부족합니다.",
+ ],
+ overall:
+ "합격자 데이터 대비 정량성과 반복 개선 증거가 약해, 현재 경쟁력은 보통 수준입니다.",
+ strength: [
+ "컴퓨터공학 전공으로 IT 직무 기반이 있습니다.",
+ "React, Spring Boot, GCP 등 실무 친화적 기술 스택 경험이 있습니다.",
+ "모니터링 자동화와 클라우드 최적화라는 직무 연관성이 높은 관심 방향이 있습니다.",
+ "AI 에이전트 개발 경험으로 최신 기술 적응력이 보입니다.",
+ ],
+ weakness: [
+ "정량 KPI가 전혀 제시되지 않았습니다.",
+ "본인 역할이 전체 책임인지 부분 참여인지 불명확합니다.",
+ "반복 개선 Loop와 재현성 설명이 부족합니다.",
+ "유통망 운영, 서비스 안정성, 인프라 운영 도메인 이해가 얕게 드러납니다.",
+ "답변 분량이 짧아 경험의 깊이를 충분히 보여주지 못합니다.",
+ ],
+ advice: [
+ "지원 직무가 IT 인프라/운영/플랫폼 관리라면, 모니터링 자동화와 클라우드 최적화 경험을 수치로 정리해 주십시오.",
+ "프로젝트별로 문제 정의-가설-실행-측정-개선-재적용 흐름을 명확히 써서 반복 개선 구조를 보여주십시오.",
+ "React, Spring Boot, GCP, FastAPI, LangGraph 중 실제 업무에 직접 기여한 핵심 기술을 2~3개로 좁혀 구체화하십시오.",
+ "본인 역할이 전체 설계인지, 일부 구현인지, 보조인지 구분하여 과장 없이 기술하십시오.",
+ "성과를 응답시간, 장애율, 처리량, 자동화율 등 KPI로 연결해 재현 가능하게 서술하십시오.",
+ ],
+ improveOverall: [
+ "각 답변을 최소 500자 이상으로 확장하십시오.",
+ "성과를 숫자로 제시하십시오. 예: 장애 건수 감소, 알림 정확도 향상, 배포 시간 단축, 조회 성능 개선.",
+ "경험을 하나의 사례로 묶어 문제-해결-결과를 선명하게 작성하십시오.",
+ "지원 직무와 직접 연결되는 용어를 사용하되, 최신 기술 나열보다 적용 맥락을 강조하십시오.",
+ ],
+ improveStrategy: [
+ {
+ strategyName: "모니터링 자동화 KPI 재구성",
+ actionItems: [
+ "실시간 웹 모니터링 서비스에서 감지 대상, 알림 기준, 처리 시간을 수치화하십시오.",
+ "자동화 전후의 장애 탐지 시간, 수동 확인 시간, 오탐률을 비교하십시오.",
+ "본인이 설계한 규칙과 대시보드 구조를 분리해 적으십시오.",
+ ],
+ },
+ {
+ strategyName: "클라우드 운영 사례 정교화",
+ actionItems: [
+ "GCP 배포 과정에서 사용한 서비스와 구성 이유를 명시하십시오.",
+ "배포 후 개선된 지표를 적으십시오. 예: 응답속도, 가용성, 운영 시간 절감.",
+ "재현 방법을 단계별로 정리해 재현성을 보여주십시오.",
+ ],
+ },
+ {
+ strategyName: "AI 에이전트 경험의 직무 연결",
+ actionItems: [
+ "LangGraph/FastAPI 경험을 단순 개발이 아닌 데이터 분석·운영 보조 관점으로 재서술하십시오.",
+ "에이전트가 해결한 문제, 입력 데이터, 결과 품질을 정리하십시오.",
+ "운영 자동화나 의사결정 지원에 어떻게 확장 가능한지 설명하십시오.",
+ ],
+ },
+ ],
+ improveExpectation: [
+ "정량 KPI가 들어가면 수행역량 신뢰도가 크게 올라갑니다.",
+ "반복 개선 구조가 보이면 상위 점수 구간 접근이 가능해집니다.",
+ "본인 역할과 기술 사용 범위가 명확해지면 직무 적합도가 상승합니다.",
+ "운영 도메인 이해와 서비스 안정성 관점이 강화되면 회사-직무 정합성이 좋아집니다.",
+ ],
+ },
+ revisedResult: {
+ best_reply: [
+ "야놀자가 여행 산업의 디지털 전환을 선도하며, 대규모 트래픽과 다양한 서비스가 안정적으로 연결되는 IT 환경을 만드는 점에 큰 매력을 느껴 지원했습니다. 특히 예약, 검색, 가격, 운영 데이터가 유기적으로 맞물리는 구조에서는 단순한 개발을 넘어 장애를 예방하고 운영 효율을 높이는 시스템 설계 역량이 중요하다고 생각합니다. 저는 이러한 환경에서 모니터링 자동화와 인프라 최적화를 통해 서비스 신뢰도를 높이는 일을 가장 의미 있게 할 수 있다고 판단했습니다. 대학과 프로젝트 경험을 통해 서비스가 커질수록 관찰 가능성(Observability)과 배포 안정성이 사용자 경험을 좌우한다는 점을 반복해서 체감했습니다. 입사 후에는 로그, 메트릭, 알림 체계를 더 정교하게 설계해 장애 탐지 시간을 줄이고, 수동 대응 비중을 낮추는 데 기여하고 싶습니다. 또한 클라우드 자원 사용량과 배포 파이프라인을 함께 분석해 운영 비용과 장애 가능성을 동시에 낮추는 개선을 추진하겠습니다. 단기적으로는 서비스별 모니터링 기준을 표준화하고, 알림의 오탐률을 줄이는 데 집중하겠습니다. 중기적으로는 반복 작업을 자동화해 운영 인력의 대응 시간을 절감하고, 배포 후 회복 시간을 단축하는 체계를 만들고 싶습니다. 장기적으로는 데이터 기반 운영 문화를 정착시켜, 문제를 발견하는 수준을 넘어 예측하고 선제 대응하는 IT 관리자가 되겠습니다. 야놀자에서라면 기술을 통해 서비스 품질과 조직 효율을 동시에 끌어올리는 실질적인 성과를 만들 수 있다고 확신합니다.",
+ "컴퓨터공학을 전공하며 실시간 웹 모니터링 서비스와 AI 기반 데이터 분석 도구를 직접 설계·구현하면서, 서비스 운영에 필요한 개발 역량과 문제 해결력을 함께 길렀습니다. 첫 번째로, React와 Spring Boot를 활용해 실시간 웹 모니터링 서비스를 구축했습니다. 이 프로젝트에서 저는 서버 상태, 응답 지연, 에러 발생 여부를 한 화면에서 확인할 수 있도록 대시보드를 구성했고, WebSocket 기반 실시간 갱신 구조를 적용했습니다. 또한 알림 기준을 임계값 중심으로 설계해 운영자가 이상 징후를 즉시 인지할 수 있게 만들었습니다. 개발 과정에서 단순 화면 구현에 그치지 않고, 데이터 수집 주기와 알림 지연을 함께 조정해 탐지 체계를 안정화했습니다. 그 결과 수동 확인 위주의 운영 방식보다 이상 징후 확인 시간을 크게 줄일 수 있었고, 반복 점검에 들던 시간을 절감했습니다. 두 번째로, 해당 서비스를 GCP 환경에 배포하며 클라우드 운영 경험을 쌓았습니다. 배포 과정에서는 Compute Engine, Cloud Run, Cloud Storage 등 서비스 특성에 맞는 인프라 구성을 검토했고, 환경 변수 분리와 로그 확인 체계를 통해 운영 가능성을 높였습니다. 배포 후에는 트래픽 분산과 응답 안정성을 고려해 설정을 보완했고, 서비스 접근성과 유지보수성을 함께 개선했습니다. 세 번째로, LangGraph와 FastAPI를 활용해 데이터를 분석하는 AI 에이전트를 개발했습니다. 이 에이전트는 입력된 데이터를 요약하고 우선순위를 분류해 운영 의사결정을 보조하도록 설계했으며, 프롬프트 구조와 상태 흐름을 반복 개선해 응답 일관성을 높였습니다. 이 경험을 통해 저는 백엔드 개발, 클라우드 배포, 자동화, 데이터 분석을 하나의 흐름으로 연결해 생각하는 역량을 갖추게 되었습니다. 특히 시스템이 실제 운영 환경에서 어떻게 관측되고 개선되는지까지 고려하는 습관을 기르게 되었습니다. 야놀자의 IT 직무에서도 저는 기술 구현뿐 아니라 운영 효율과 안정성을 함께 높이는 실무형 인재로 기여할 수 있습니다.",
+ ],
+ reply_reason: [
+ "첫 번째 답변은 원래의 일반적인 지원 동기를 야놀자의 서비스 구조와 IT 운영 과제로 구체화해 재작성했습니다. '전국 규모의 유통망'처럼 다소 추상적인 표현을 여행 플랫폼의 대규모 트래픽, 예약·검색·가격 데이터 연동, 장애 예방과 운영 효율이라는 실제 IT 관점으로 전환해 직무 적합성을 강화했습니다. 또한 모니터링 자동화, 알림 오탐률 감소, 회복 시간 단축 등 정량적 개선 목표를 포함해 성과 중심의 답변으로 바꿨습니다. 입사 후 포부도 단순한 의지 표현이 아니라 단기·중기·장기 목표로 나누어 실행 계획이 보이도록 구성했습니다.",
+ "두 번째 답변은 기술 스택 나열형 문장을 문제 해결형 서술로 바꾸는 데 중점을 두었습니다. React, Spring Boot, GCP, LangGraph, FastAPI 경험을 각각 어떤 문제를 해결하기 위해 사용했는지 연결해, 단순 경험 소개가 아니라 직무 수행 역량 증명으로 재구성했습니다. 또한 실시간 갱신, 임계값 알림, 배포 안정화, 운영 가능성 같은 표현을 통해 모니터링·클라우드 운영 직무와 직접 연결되는 언어를 사용했습니다.",
+ ],
+ expectation: [
+ "이 답변은 지원 동기를 야놀자의 사업 구조와 IT 운영의 핵심 과제에 연결해 설득력을 높입니다. 단순한 기업 선호가 아니라, 대규모 서비스 운영에서 필요한 모니터링 자동화와 클라우드 최적화라는 직무 적합성을 전면에 보여줍니다. 또한 입사 후 목표를 단기, 중기, 장기로 나누어 제시함으로써 성장 계획이 구체적이고 현실적으로 느껴집니다.",
+ "이 답변은 프로젝트 경험을 단순 나열하지 않고, 문제-해결-결과 구조로 재정리해 직무 연관성을 강화합니다. React, Spring Boot, GCP, LangGraph, FastAPI 같은 기술을 언급하되, 기술 자체보다 실시간 모니터링, 배포 안정성, 데이터 분석 보조라는 적용 맥락을 중심으로 설명해 이해도를 높입니다.",
+ ],
+ },
+};
+
+export const DEMO_PASS_SCORE: PassScoreData = {
+ company: "야놀자",
+ position: "IT",
+ x: 4.3,
+ y: 4.0,
+ z: 3.9,
+ overall: 4.1,
+};