Deploy to Hugging Face

.dockerignore

@@ -0,0 +1,14 @@
+node_modules
+.next
+out
+.git
+.gitignore
+.dockerignore
+Dockerfile
+README.md
+venv
+__pycache__
+tmp
+*.pptx
+*.pdf
+*.log

.gitattributes

@@ -0,0 +1,3 @@
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.pptx filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example
+.next
+node_modules
+out

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:20-slim AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM python:3.10-slim
+RUN apt-get update && apt-get install -y \
+	fontconfig \
+	curl \
+	&& rm -rf /var/lib/apt/lists/*
+
+# Install custom fonts
+COPY core/data/*.ttf /usr/share/fonts/truetype/
+RUN fc-cache -f -v
+
+# Create a non-root user required by Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY --chown=user . .
+COPY --from=builder --chown=user /app/out ./out
+
+EXPOSE 7860
+CMD ["uvicorn", "core.api:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,123 @@
+---
+title: IT Wage Self Diagnosis
+emoji: 📊
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+fullWidth: true
+---
+
+# IT Wage Self Diagnosis Platform
+
+IT 직무 임금 자가진단 플랫폼입니다.  
+이 저장소는 Next.js 프런트엔드와 FastAPI 백엔드를 하나의 Docker 컨테이너로 실행하도록 구성되어 있어 Hugging Face Docker Space에 배포하기 적합합니다.
+
+## Stack
+
+- Frontend: Next.js
+- Backend: FastAPI + Uvicorn
+- Container: Docker
+
+## External API Usage
+
+이 앱은 Gemini API를 사용하지 않습니다.
+
+- 사용자 요청은 내부 FastAPI 엔드포인트(`/api/*`)로 처리됩니다.
+- Hugging Face 배포를 위해 Gemini API 키를 설정할 필요가 없습니다.
+
+## Local Run
+
+### 1. Frontend dependencies
+
+```bash
+npm install
+```
+
+### 2. Python dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+### 3. Frontend build
+
+```bash
+npm run build
+```
+
+### 4. API server run
+
+```bash
+uvicorn core.api:app --host 0.0.0.0 --port 7860
+```
+
+브라우저에서 `http://localhost:7860` 으로 접속합니다.
+
+## Docker Run
+
+```bash
+docker build -t it-wage-self-diagnosis .
+docker run -p 7860:7860 it-wage-self-diagnosis
+```
+
+브라우저에서 `http://localhost:7860` 으로 접속합니다.
+
+## Deploy To Hugging Face Docker Space
+
+### 1. Create a new Space
+
+Hugging Face에서 새 Space를 만들 때 다음처럼 선택합니다.
+
+- SDK: `Docker`
+- Visibility: 원하는 공개 범위 선택
+- Hardware: 처음에는 `CPU Basic` 권장
+
+### 2. Connect this folder to the Space repo
+
+현재 폴더에서 아래 명령을 실행합니다.
+
+```bash
+git init
+git branch -M main
+git add .
+git commit -m "Initial commit for Hugging Face Space"
+git remote add origin https://huggingface.co/spaces/<YOUR_USERNAME>/<YOUR_SPACE_NAME>
+git push -u origin main
+```
+
+`<YOUR_USERNAME>` 과 `<YOUR_SPACE_NAME>` 은 실제 Hugging Face 계정과 Space 이름으로 바꿔야 합니다.
+
+### 3. Check build logs
+
+푸시 후 Hugging Face Space의 `Build logs` 와 `Container logs` 를 확인합니다.
+
+정상 동작 조건:
+
+- 컨테이너가 `7860` 포트에서 실행될 것
+- FastAPI가 `/api/*` 경로를 처리할 것
+- Next 정적 빌드 결과가 `out/` 폴더에 생성될 것
+
+## Environment Variables
+
+현재 기준으로 이 앱 실행에 필수 환경변수는 없습니다.
+
+추후 환경변수나 API 키가 생기면 Hugging Face Space의 아래 위치에서 관리하면 됩니다.
+
+- `Settings > Variables`
+- `Settings > Secrets`
+
+민감한 값은 코드에 직접 넣지 말고 `Secrets` 에 저장하는 것을 권장합니다.
+
+## Project Notes
+
+- Hugging Face Docker Space는 `README.md` 상단 YAML의 `sdk: docker` 설정을 사용합니다.
+- 외부에 노출되는 포트는 `app_port: 7860` 이어야 하며, 컨테이너 내부 서버 포트와 일치해야 합니다.
+- Docker Space 환경에서는 컨테이너가 `user id 1000` 기준으로 동작하므로 현재 Dockerfile처럼 non-root user 구성이 권장됩니다.
+
+## Troubleshooting
+
+- 화면이 안 뜨면: `npm run build` 결과로 `out/` 폴더가 생성됐는지 확인
+- API 호출이 실패하면: `core.api:app` 이 정상 실행되는지 확인
+- 빌드 실패 시: Hugging Face의 `Build logs` 에서 누락 패키지나 권한 오류 확인
+- 인증 오류 시: Hugging Face Access Token으로 Git 인증 확인

core/api.py

@@ -0,0 +1,166 @@
+import uvicorn
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import List, Optional, Dict, Any
+import os
+import uuid
+from matplotlib import font_manager
+from . import core, ppt
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# --- Pydantic 모델 ---
+
+class OptionsRequest(BaseModel):
+    job: Optional[str] = None
+    bm: Optional[str] = None
+    sales: Optional[str] = None
+
+class SearchParamsModel(BaseModel):
+    job: str
+    bm: str
+    sales: str
+    emp: str
+    userBase: str
+    userValue: int
+
+class DiagnosisRequest(BaseModel):
+    params: SearchParamsModel
+    answers: List[int]
+
+# Get BASE_DIR for the project root (one level up from this 'core' folder)
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+# --- 폰트 설치 확인 (디버깅용) ---
+font_path = os.path.join(BASE_DIR, "core", "data", "Paperlogy-4Regular.ttf")
+if os.path.exists(font_path):
+    font_name = font_manager.FontProperties(fname=font_path).get_name()
+    print(f"Loaded font: {font_name}")
+else:
+    print(f"Warning: Font file not found at {font_path}")
+
+# --- 엔드포인트 ---
+
+@app.post("/api/options")
+def get_options_endpoint(req: OptionsRequest):
+    return core.get_step_options(core.conds_df, job=req.job, bm=req.bm, sales=req.sales)
+
+@app.post("/api/survey")
+def get_survey_items_endpoint(req: SearchParamsModel):
+    levels = core.get_levels_by_wage(core.avg_df, req.job, req.bm, req.sales, req.emp, req.userBase, req.userValue)
+    if not levels: levels = ["L3", "L4"]
+    bars_indicator, _ = core.make_bars_table(core.bars_df, req.job, levels)
+    return bars_indicator.to_dict(orient='records')
+
+@app.post("/api/diagnosis")
+def post_diagnosis_endpoint(req: DiagnosisRequest):
+    p = req.params
+    levels = core.get_levels_by_wage(core.avg_df, p.job, p.bm, p.sales, p.emp, p.userBase, p.userValue)
+    if not levels: levels = ["L3", "L4"]
+    _, ppt_tables = core.make_bars_table(core.bars_df, p.job, levels)
+    levels_def = core.get_levels_definition(p.job, levels, core.job_def)
+    final_lv, level_out = core.judge_level(req.answers, core.factors, levels, levels_def)
+    head_msg, text1, text2, pct, c3, table3 = core.judge_wage(core.raw_df, p.job, p.bm, p.sales, p.emp, final_lv, p.userBase, p.userValue)
+    
+    table1, chart1 = core.format_table(ppt_tables[0], core.factors, req.answers, cut=2)
+    table2, chart2 = core.format_table(ppt_tables[1], core.factors, req.answers, cut=4)
+
+    level_out.columns = ['left', 'right']
+
+    level_info = {
+        "left": level_out['left'].to_dict(),
+        "right": level_out['right'].to_dict(),
+    }
+
+    for chart in [chart1, chart2]:
+        chart.columns = ['subject', 'target', 'user']
+        subjects = [
+            '기술 전문성', '도메인 이해', '데이터 리터러시', '고객중심 사고',
+            '문제해결능력', '애자일 실행', '협업', '책임감', '영향범위', '리더십'
+        ]
+        chart['subject'] = subjects
+
+    wage_records = table3.to_dict(orient='records')
+    for rec in wage_records:
+        rec['description'] = text1
+
+    level_chart = {
+        "left": chart1.to_dict(orient='records'),
+        "right": chart2.to_dict(orient='records')
+    }
+
+    info_pool = [p.job, final_lv, p.userBase, p.bm, p.sales, p.emp]
+    
+    result_data = {
+        "headMessage": head_msg.split('\n'),
+        "levelInfo": level_info,
+        "levelChart": level_chart,
+        "percentile": pct,
+        "wageOutput": wage_records,
+        "info": [x for x in info_pool if x != '전체']
+    }
+        
+    return result_data
+
+
+@app.post("/api/report")
+def download_report(req: DiagnosisRequest):
+    p = req.params
+    levels = core.get_levels_by_wage(core.avg_df, p.job, p.bm, p.sales, p.emp, p.userBase, p.userValue)
+    if not levels: levels = ["L3", "L4"]
+    _, ppt_tables = core.make_bars_table(core.bars_df, p.job, levels)
+    levels_def = core.get_levels_definition(p.job, levels, core.job_def)
+    final_lv, lv_out = core.judge_level(req.answers, core.factors, levels, levels_def)
+    head_msg, blk1, blk2, pct, c3, t3 = core.judge_wage(core.raw_df, p.job, p.bm, p.sales, p.emp, final_lv, p.userBase, p.userValue)
+    
+    table1, chart1 = core.format_table(ppt_tables[0], core.factors, req.answers, cut=2)
+    table2, chart2 = core.format_table(ppt_tables[1], core.factors, req.answers, cut=4)
+
+    ppt_dataset = {
+        0 : {"head_message": head_msg, "texts": [blk1, blk2, f"{pct:.1f}%"], "tables": [lv_out.iloc[:2], lv_out.iloc[2:], t3]},
+        1 : {"title": lv_out.columns[0], "table": [table1]},
+        2 : {"title": lv_out.columns[1], "table": [table2]}
+    }
+    
+    out_path = os.path.join(core.BASE_DIR, "tmp", f"report_{uuid.uuid4().hex[:8]}.pptx")
+    os.makedirs(os.path.dirname(out_path), exist_ok=True)
+    ppt.update_ppt_with_data(ppt_dataset, out_path)
+    
+    return FileResponse(out_path, filename="진단리포트.pptx", media_type="application/vnd.openxmlformats-officedocument.presentationml.presentation")
+
+
+# --- 정적 파일 서빙 ---
+# api.py가 core/ 폴더 안에 있으므로 BASE_DIR는 상위 디렉토리(루트)입니다.
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+OUT_DIR = os.path.join(BASE_DIR, "out")
+
+if os.path.exists(OUT_DIR):
+    app.mount("/_next", StaticFiles(directory=os.path.join(OUT_DIR, "_next")), name="next_static")
+    @app.api_route("/{full_path:path}", methods=["GET", "HEAD"])
+    async def serve_spa(full_path: str):
+        if full_path.startswith("api"): raise HTTPException(status_code=404)
+        
+        file_path = os.path.join(OUT_DIR, full_path)
+        if os.path.isfile(file_path): return FileResponse(file_path)
+        
+        html_file = os.path.join(OUT_DIR, f"{full_path}.html")
+        if os.path.isfile(html_file): return FileResponse(html_file)
+        
+        index_file = os.path.join(file_path, "index.html")
+        if os.path.isdir(file_path) and os.path.isfile(index_file): return FileResponse(index_file)
+            
+        return FileResponse(os.path.join(OUT_DIR, "index.html"))
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

core/core.py

@@ -0,0 +1,439 @@
+import pandas as pd
+import numpy as np
+import math
+import re
+import pickle
+import os
+
+# --- 데이터 경로 설정 ---
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+DATA_DIR = os.path.join(BASE_DIR, "core", "data")
+
+# --- 전역 데이터 로드 ---
+try:
+    with open(os.path.join(DATA_DIR, 'sw_competency.pkl'), 'rb') as f:
+        sw_competency = pickle.load(f)
+    job_def = sw_competency['직무레벨']
+    factor_def = sw_competency['평가요소']
+    factors = factor_def.columns.to_list()[2:]
+    bars_df = sw_competency['평가지표']
+
+    with open(os.path.join(DATA_DIR, 'sw_wage.pkl'), 'rb') as f:
+        sw_wage = pickle.load(f)
+    raw_df = sw_wage['raw']
+    avg_df = sw_wage['avg']
+    conds_df = sw_wage['conds']
+except Exception as e:
+    print(f"Warning: Could not load data files: {e}")
+
+# --- 핵심 비즈니스 로직 ---
+
+def get_options(df, selected, target_col):
+    # 1. 불필요한 copy() 제거
+    filtered = df
+    for col, val in selected.items():
+        if val is not None and val != "":
+            filtered = filtered[filtered[col] == val]
+
+    options = filtered[target_col].dropna().drop_duplicates().tolist()
+    
+    # 2. 콘크리트 옵션들만 추출
+    concrete_options = [x for x in options if x != '전체']
+    
+    if '전체' in options:
+        if len(concrete_options) > 1:
+            options = ['전체'] + concrete_options
+        else:
+            # 1개만 남았을 때도 구체적인 옵션을 보여주고 싶다면 return concrete_options
+            options = ['전체']
+    else:
+        options = concrete_options
+
+    # 4. 정렬 방식 개선
+    if target_col == '직원규모':
+        sort_map = {'전체': 0, '300~999인': 1, '100~299인': 2, '50~99인': 3, '49인 이하': 4}
+        options.sort(key=lambda x: sort_map.get(x, 999))
+
+    return options
+
+
+def get_step_options(df, job=None, bm=None, sales=None):
+    result = {'job_options': df['ITSQF 직무(변환)'].dropna().drop_duplicates().tolist()}
+    if job:
+        result['bm_options'] = get_options(df, {'ITSQF 직무(변환)': job}, 'BM')
+    if job and bm:
+        result['sales_options'] = get_options(df, {'ITSQF 직무(변환)': job, 'BM': bm}, '매출규모')
+    if job and bm and sales:
+        result['emp_options'] = get_options(df, {'ITSQF 직무(변환)': job, 'BM': bm, '매출규모': sales}, '직원규모')
+    result['base_options'] = ['지급총액', '고정급']
+
+    return result
+
+def get_wage_result(df, job, bm, sales='전체', emp='전체'):
+    mask = (
+        (df['ITSQF 직무(변환)'] == job) &
+        (df['BM'] == bm) &
+        (df['매출규모'] == sales) &
+        (df['직원규모'] == emp)
+    )
+    return df[mask].copy()
+
+def apply_option_to_wage(avg_df, job, bm, sales, emp, w_base=0.5):
+
+    selected_df = get_wage_result(avg_df, job=job, bm=bm, sales=sales, emp=emp)
+    base_df = get_wage_result(avg_df, job=job, bm=bm)
+
+    final_df = pd.concat([base_df, selected_df], ignore_index=True)
+
+    w_opt = 1 - w_base
+    dfs = []
+
+    for base_type in ['고정급', '지급총액']:
+        df = final_df.pivot_table(
+            index='ITSQF 수준',
+            values=base_type,
+            aggfunc='mean'
+        ).reset_index()
+
+        base_val = base_df.pivot_table(
+            index='ITSQF 수준',
+            values=base_type,
+            aggfunc='mean'
+        ).reset_index().rename(columns={base_type: '전체값'})
+
+        opt_val = selected_df.pivot_table(
+            index='ITSQF 수준',
+            values=base_type,
+            aggfunc='mean'
+        ).reset_index().rename(columns={base_type: '옵션값'})
+
+        df = df[['ITSQF 수준']].drop_duplicates()
+        df = df.merge(base_val, on='ITSQF 수준', how='left')
+        df = df.merge(opt_val, on='ITSQF 수준', how='left')
+
+        df['평균연봉'] = df['전체값'] * w_base + df['옵션값'] * w_opt
+        df['기준'] = base_type
+
+        dfs.append(df)
+
+    job_wage_df = pd.concat(dfs, ignore_index=True)
+
+    num_cols = ['전체값', '옵션값', '평균연봉']
+    existing_num_cols = [c for c in num_cols if c in job_wage_df.columns]
+    job_wage_df[existing_num_cols] = (
+        job_wage_df[existing_num_cols].astype(float).round(-3) / 10000
+    )
+
+    return job_wage_df
+
+def get_levels_by_wage(avg_df, job, bm, sales, emp, base_type, target_wage, w_base = 0.5, top_n=2):
+
+    job_wage_df = apply_option_to_wage(avg_df, job, bm, sales, emp, w_base)
+    df = job_wage_df[job_wage_df["기준"] == base_type].copy()
+    if df.empty:
+        return []
+
+    df["편차"] = (df["평균연봉"] - target_wage).abs()
+
+    # 편차 기준 오름차순 정렬 후 상위 2개
+    cands = df.sort_values("편차").head(top_n)["ITSQF 수준"].tolist()
+    def level_num(level: str) -> int:
+        m = re.search(r'(\d+)', str(level))
+        return int(m.group(1)) if m else -1
+
+    # 정렬(낮은 레벨 -> 높은 레벨)
+    return sorted(cands, key=level_num)
+
+
+def make_bars_table(bars_df, job, levels):
+    target_df = bars_df[(bars_df['직무']==job) & (bars_df['레벨'].isin(levels))]
+    target_table = target_df.pivot_table(index='평가요소', columns='레벨', values='지표정의', aggfunc='sum').reset_index()
+
+    # 평가요소 순서대로 정렬
+    target_table['평가요소'] = pd.Categorical(
+            target_table['평가요소'],
+            categories=factors,
+            ordered=True
+        )
+
+    target_table = target_table.sort_values('평가요소').reset_index(drop=True)
+
+    ppt_tables = []
+    for level in levels:
+        table = target_table[['평가요소', level]].copy()
+        cols = ["평가요소", f"{level} 수준"]
+        table.columns = cols
+        ppt_tables.append(table)
+
+    target_table = target_table.rename(columns={levels[0]:'2수준', levels[1]:'4수준'})
+    bars_indicator = target_table.copy()
+    bars_indicator = bars_indicator.reset_index(names='id')
+    bars_indicator['id'] = bars_indicator['id'] + 1
+    bars_indicator['평가요소'] = bars_indicator['id'].astype(str).str.zfill(2) + '. ' + bars_indicator['평가요소'].astype(str)
+
+    for col in ['2수준', '4수준']:
+        bars_indicator[col] = bars_indicator[col].apply(lambda x: x.split('\n'))
+
+    bars_indicator.columns = ['id', 'title', 'level2', 'level4']
+
+    return bars_indicator, ppt_tables
+
+def get_levels_definition(job, levels, job_def):
+
+    job_pool = job_def[job_def['직무'] == job]
+
+    texts = []
+    for level in levels:
+        level_text = job_pool[job_pool['수준'] == level]['수준 정의'].values[0]
+        texts.append(level_text)
+
+    return texts
+
+
+def format_text_wrap(text: str, max_len: int = 45, delimiter: str = " ") -> str:
+    if not text: return ""
+    lines = []
+    for paragraph in text.split("\n"):
+        paragraph = paragraph.strip()
+        while len(paragraph) > max_len:
+            # max_len 안에서 가장 마지막 공백 위치 찾기
+            split_pos = paragraph.rfind(delimiter, 0, max_len)
+
+            # delimiter가 없으면 그냥 max_len에서 자름 (예외 케이스)
+            if split_pos == -1:
+                split_pos = max_len
+            else:
+                split_pos += len(delimiter)  # delimiter 포함해서 자르기
+
+            lines.append(paragraph[:split_pos].strip())
+            paragraph = paragraph[split_pos:].strip()
+
+        if paragraph:
+            lines.append(paragraph)
+
+    return "\n".join(lines)
+
+
+def judge_level(user_scores, factors, levels, levels_def, low_cut=2, high_cut=4):
+    """
+    단일 레벨 판정(Yes/No 성격):
+    - 총점이 36점이상이면 high_level
+    - 그 외, low_level로 보되 '보완 필요' 상태(낙인 표현 지양)
+
+    개선항목:
+    - low_set: low_cut 미만 항목
+    - middle_set: low_cut 이상 high_cut 미만 항목
+    - high_set:또는 high_cut이상 항목
+    """
+    s = pd.Series(user_scores, dtype="float")
+    low_level, high_level = levels[0], levels[1]
+    level_def_map = {low_level: levels_def[0], high_level: levels_def[1]}
+
+    low_set = s[s < low_cut].sort_values().index.tolist()
+    middle_set = s[(s >= low_cut) & (s < high_cut)].sort_values().index.tolist()
+    high_set = s[s >= high_cut].sort_values(ascending=False).index.tolist()
+
+    def trim_items(index_set, max_item=3):
+        if len(index_set) == 0:
+            text = "-"
+        elif len(index_set) > max_item:
+            text = ", ".join([factors[i] for i in index_set[:max_item]]) + " 등"
+        else:
+            text = ", ".join([factors[i] for i in index_set])
+
+        return format_text_wrap(text, max_len=33, delimiter=",")
+
+    final_level = high_level if sum(user_scores) >= 36 else low_level
+
+    if final_level == high_level:
+        output = {
+          '하위 레벨' : [
+              f"하위 레벨: {low_level}", level_def_map.get(low_level, "-"),
+              "아래 역량은 현재 레벨 안착을 위해 보완해보면 좋겠습니다.",
+              trim_items(middle_set),
+            ],
+          '현재 레벨' : [
+              f"현재 레벨: {high_level}", level_def_map.get(high_level, "-"),
+              "다음 역량은 현재 안정적으로 발휘되고 있는 강점입니다.",
+              trim_items(high_set)
+            ]
+        }
+    else:
+        output = {
+          '현재 레벨' :[
+              f"현재 레벨: {low_level}", level_def_map.get(low_level, "-"),
+              "아래 역량은 현재 레벨 기준에 비추어 보완해보면 좋겠습니다.",
+              trim_items(low_set)
+            ],
+          '상위 레벨' :[
+              f"상위 레벨: {high_level}", level_def_map.get(high_level, "-"),
+              "다음 역량을 강화하면 Level-Up 성장을 기대할 수 있습니다.",
+              trim_items(middle_set)
+            ],
+        }
+
+    return final_level, pd.DataFrame(output, index=["title", "definition", "guide", "items"])
+
+
+
+def describe_percentile(p):
+
+    p = max(0, min(100, float(p)))
+    p = round(p, 1)
+    top = round(100 - p, 1)
+
+    if top > 60:
+        pos = f"하위 {int(math.ceil(p / 10.0) * 10)}% 이내"
+        pos_text = f"하위 {p:.1f}% 수준"
+    else:
+        pos = f"상위 {int(math.ceil(top / 10.0) * 10)}% 이내" if top > 5 else f"상위 {int(top)}% 이내"
+        pos_text = f"상위 {top:.1f}% 수준"
+
+    if p >= 70: desc = "높은"
+    elif p >= 60: desc = "평균 이상"
+    elif p >= 40: desc = "평균"
+    elif p >= 20: desc = "다소 낮은"
+    else: desc = "낮은"
+
+    return pos, desc, pos_text
+
+
+def judge_wage(
+    raw_df: pd.DataFrame,
+    job: str,
+    bm: str,
+    sales: str,
+    emp: str,
+    final_level: str,
+    base_type: str,
+    target_wage: int,
+    k_std: float = 20.0,
+    k_shrink: float = 20.0,
+    z_clip: float = 2.5,
+    n_switch: int = 20,
+    alpha_denominator: int = 30,    # n>=n_switch일 때 raw percentile 비중 증가 속도 (추천 30)
+):
+
+    # 입력 파싱: 만원 -> 원
+    x = float(target_wage) * 10000.0
+
+    # 1) job_pool (직무 + 레벨 필터)
+    job_pool_df = raw_df[(raw_df['ITSQF 직무(변환)'] == job)&(raw_df['ITSQF 수준'] == final_level)]
+    job_pool_vals = pd.to_numeric(job_pool_df[base_type], errors="coerce").dropna().to_numpy(dtype=float)
+
+    std_pool = float(np.std(job_pool_vals, ddof=1))
+    mean_job = float(np.mean(job_pool_vals))
+
+    # 2) cohort (직무 + 레벨 + 옵션 필터)
+    def get_cohort_df(df, bm, sales, emp):
+        mask = (df['BM'] == bm)
+        if sales != '전체':
+            mask = mask & (df['매출규모'] == sales)
+        if emp != '전체':
+            mask = mask & (df['직원규모'] == emp)
+
+        return df[mask].copy()
+
+    cohort_df = get_cohort_df(job_pool_df, bm, sales, emp)
+    cohort_vals = pd.to_numeric(cohort_df[base_type], errors="coerce").dropna().to_numpy(dtype=float)
+    n = int(cohort_vals.size)
+
+    mean_cohort = float(np.mean(cohort_vals)) if n >= 1 else mean_job
+    std_cohort = float(np.std(cohort_vals, ddof=1)) if n >= 2 else 0.0
+
+    # 3) std 풀링 (분산 기준 혼합)
+    w_std = (n / (n + k_std)) if n > 0 else 0.0
+    var_eff = w_std * (std_cohort ** 2) + (1.0 - w_std) * (std_pool ** 2)
+    std_eff = math.sqrt(max(var_eff, 1e-9))  # 0 방어
+
+    # 4) z-score 보정
+    z_raw = (x - mean_cohort) / std_eff
+    w_n = (n / (n + k_shrink)) if n > 0 else 0.0  # 표본 수 수축
+    z_adj = float(np.clip(w_n * z_raw, -z_clip, z_clip))  # 클리핑
+
+    def normal_cdf(z: float) -> float:
+        return 0.5 * (1.0 + math.erf(z / math.sqrt(2.0)))
+
+    def percentile_of_score(arr: np.ndarray, x: float) -> float:
+        """퍼센타일: arr 중 x 이하 비율 * 100"""
+        if arr.size == 0:
+            return float("nan")
+        return float((arr <= x).mean() * 100.0)
+
+    # 5) 퍼센타일 (z 기반 + 필요시 raw와 블렌딩)
+    p_z = normal_cdf(z_adj) * 100.0
+    p_raw = percentile_of_score(cohort_vals, x) if n >= 3 else float("nan")
+
+    # n이 커질수록 raw에 더 무게, 완만한 전이를 위해 alpha_denominator 추천 30
+    if n >= n_switch and not math.isnan(p_raw):
+        alpha = min(1.0, n / float(alpha_denominator))
+        p_final = alpha * p_raw + (1.0 - alpha) * p_z
+    else:
+        p_final = p_z
+
+    p = round(float(p_final), 1)
+    pos, desc, pos_text = describe_percentile(p)
+
+    head_message = f"""진단 결과, 현재 귀하의 직무 역량 수준은 {final_level}에 가장 가까운 것으로 보입니다.
+동일 직무 레벨 및 조건 대비 보상 경쟁력은 {pos}로 {desc} 수준입니다."""
+
+    # 평균 대비 차이 (cohort 평균 기준; cohort가 비면 job 평균)
+    diff = x - mean_cohort
+    sign = "+" if diff >= 0 else "-"
+    gap = f"{sign}{abs(diff)/10000:,.0f}"
+
+    if diff == 0:
+        comp_text = "시장 평균과 동일한 수준으로 나타났습니다."
+    else:
+        direction = "더 높게" if diff > 0 else "더 낮게"
+        comp_text = f"시장 평균 대비 {gap}만원 {direction} 나타났습니다."
+
+    block1 = f"""현재 보상 경쟁력은 시장 {pos_text}으로,
+    {comp_text}"""
+
+    block2 = f"""직무: {job}
+레벨: {final_level}
+보상수준: ({base_type}) {target_wage:,.0f}만원
+준거집단:
+- (BM) {bm}
+- (매출규모) {sales}
+- (직원규모) {emp}
+"""
+    table3 = pd.DataFrame({
+        "user": f"{target_wage:,.0f}",
+        "marketAverage": f"{mean_cohort/10000:,.0f}",
+        "gap": gap
+        }, index=["값"])
+
+    def make_guage_chart(p):
+        value = round(p / 100 * 180, 1)
+        guage = [180, value, 180 - value]
+        return pd.DataFrame(
+            {"값": guage},
+            index=["항목1", "항목2", "항목3"]
+        )
+
+    chart3 = make_guage_chart(p)
+
+    return head_message, block1, block2, p, chart3, table3
+
+
+def format_table(table, factors, user_scores, cut=2):
+    label = table.columns[1]
+    s = pd.DataFrame({
+        "평가요소": factors,
+        label: [3]*10,
+        "User": user_scores
+    })
+
+    s['User'] = s['User'].apply(lambda x: 2 if x < cut else (3 if x == cut else 4))
+    s['부족'] = s['User'].apply(lambda x : "●" if x == 2 else "")
+    s['충족'] = s['User'].apply(lambda x : "●" if x == 3 else "")
+    s['초과'] = s['User'].apply(lambda x : "●" if x == 4 else "")
+
+    table = table.merge(s[['평가요소', '부족', '충족', '초과']], on='평가요소', how='left')
+    chart = s[['평가요소', label, "User"]]
+
+    return [table, chart]
+
+    

core/data/Paperlogy-3Light.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a5a4c9acdbaa99b7ca72dd3f428ba962953201d39abc7181104953919d9cf60
+size 680656

core/data/Paperlogy-4Regular.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fde17e6e5acabcfabdad79f37fedc01405a0d6298c965b3f99378dd89a25b1ba
+size 679480

core/data/output_template.pptx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4260ba8c199a48fbaa96da1915c52ab72d2564d6bac58008c6173e93ee0124d
+size 310268

core/data/sw_competency.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:458ef43d05c9b43f4c61f87bec497183c3a11e2931d664110eb6dec8e62d062a
+size 147208

core/data/sw_wage.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6078cb6538353dceb2af451b5e54f5d3d518237ee33b27020cb2cf6d7839004
+size 217706

core/ppt.py

@@ -0,0 +1,241 @@
+import os
+import pandas as pd
+from pptx import Presentation
+from pptx.util import Pt
+from pptx.enum.text import PP_ALIGN
+from pptx.dml.color import RGBColor
+from pptx.chart.data import CategoryChartData
+from pptx.oxml.xmlchemy import OxmlElement
+from pptx.oxml.ns import qn
+
+
+def set_cell_letter_spacing(cell, spacing=-100):
+    """
+    테이블 셀 내부 텍스트 자간 조절 (비공식 XML hack)
+
+    spacing:
+        0     = 기본
+        -50   = 약간 좁게
+        -100  = 좁게 (추천)
+        -200  = 매우 좁게 (주의)
+    """
+
+    tf = cell.text_frame
+
+    for p in tf.paragraphs:
+        for run in p.runs:
+            try:
+                rPr = run._r.get_or_add_rPr()
+                rPr.set("spc", str(spacing))
+            except Exception as e:
+                print("⚠️ letter spacing 적용 실패:", e)
+
+def set_text_style(target, align='center', font_size=9, line_spacing=1.0,
+                   space_before=0, space_after=0, color=(0,0,0), font_name=None):
+    # 정렬 방식 설정
+    if align == 'center':
+        alignment = PP_ALIGN.CENTER
+    else:
+        alignment = PP_ALIGN.LEFT  # 기본값은 왼쪽 정렬
+
+    # target이 셀인지 텍스트 프레임인지 확인
+    if hasattr(target, 'text_frame'):  # target이 셀인 경우
+        text_frame = target.text_frame
+    else:  # target이 텍스트 프레임인 경우
+        text_frame = target
+
+    for paragraph in text_frame.paragraphs:
+        paragraph.alignment = alignment  # 설정한 정렬 적용
+
+        # 줄 간격 (글자 줄간격)
+        paragraph.line_spacing = line_spacing
+
+        # 문단 간격
+        paragraph.space_before = Pt(space_before)
+        paragraph.space_after = Pt(space_after)
+
+        for run in paragraph.runs:
+            run.font.size = Pt(font_size)  # 폰트 크기 설정
+            run.font.color.rgb = RGBColor(color[0], color[1], color[2])  # 폰트 색상을 설정
+
+            if font_name:
+                run.font.name = font_name
+                
+                # 파워포인트 내 한글(동아시아 문자) 폰트 적용을 위한 XML 조작
+                try:
+                    ea = run.font._element.find(qn('a:ea'))
+                    if ea is None:
+                        ea = OxmlElement('a:ea')
+                        run.font._element.append(ea)
+                    ea.set('typeface', font_name)
+                except Exception:
+                    pass
+
+def update_category_chart(chart, chart_info):
+    category_data = CategoryChartData()
+    category_data.categories = chart_info["categories"]
+
+    for series_name, series_values in chart_info["values"].items():
+        category_data.add_series(series_name, series_values)
+
+    chart.replace_data(category_data)
+
+def df_to_chart_info_radar(df):
+    # chart1, chart2 용
+    # 첫 컬럼 = 카테고리, 나머지 컬럼 = 시리즈
+    categories = df.iloc[:, 0].astype(str).tolist()
+    values = {}
+
+    for col in df.columns[1:]:
+        values[str(col)] = pd.to_numeric(df[col], errors="coerce").fillna(0).tolist()
+
+    return {
+        "categories": categories,
+        "values": values
+    }
+
+def df_to_chart_info_gauge(df):
+    """
+    chart3용
+    컬럼 → categories
+    값 → 하나의 series
+    """
+    categories = list(df.index)
+
+    values = {"Value": df.iloc[:, 0].astype(float).tolist()}
+
+    return {
+        "categories": categories,
+        "values": values
+    }
+
+def update_ppt_with_data(slides_data, output_path):
+    # Get BASE_DIR to handle relative paths
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    prs_path = os.path.join(BASE_DIR, "core", "data", "output_template.pptx")
+    prs = Presentation(prs_path)
+
+    for slide_idx, slide_content in slides_data.items():
+        slide = prs.slides[slide_idx]
+
+        for shape in slide.shapes:
+            name = shape.name
+
+            # 1. 텍스트 처리
+            if shape.has_text_frame:
+
+                # title, head_message
+                if name in slide_content:
+                    shape.text = str(slide_content[name])
+                    if shape.name == "title":
+                        set_text_style(shape, align="left", font_size=18)
+                    else:
+                        set_text_style(shape, align="left", font_size=10.5, line_spacing=1, space_before=5, space_after=0)
+
+                # text1, text2, text3 (첫번째 슬라이드)
+                elif slide_idx == 0 and name.startswith("text"):
+                    texts = slide_content.get("texts", [])
+                    try:
+                        i = int(name.replace("text", "")) - 1
+                        if i < len(texts):
+                            shape.text = str(texts[i])
+                            if shape.name == "text3":
+                                set_text_style(shape, align="center", font_size=18, font_name="페이퍼로지 4 Regular", color=(75,149,168))
+                            elif shape.name == "text1":
+                                set_text_style(shape, align="center", font_size=9, line_spacing=1.5)
+                            else:
+                                set_text_style(shape, align="left", font_size=9, line_spacing=1.5)
+                    except:
+                        pass
+
+            # 2. 차트 처리
+            if slide_idx == 0 and shape.has_chart and name.startswith("chart"):
+                charts = slide_content.get("charts", [])
+
+                try:
+                    i = int(name.replace("chart", "")) - 1
+                    if i < len(charts):
+                        df = charts[i]
+                        if name in ["chart1", "chart2"]:
+                            chart_info = df_to_chart_info_radar(df)
+                        elif name == "chart3":
+                            chart_info = df_to_chart_info_gauge(df)
+                        else:
+                            continue
+                        update_category_chart(shape.chart, chart_info)
+
+                except Exception as e:
+                    print(f"[CHART ERROR] {name}: {e}")
+
+            # 3. 테이블 처리
+            if shape.has_table:
+                table = shape.table
+
+                # 슬라이드 0 → tables (넘버링)
+                if slide_idx == 0 and name.startswith("table"):
+                    tables = slide_content.get("tables", [])
+                    try:
+                        i = int(name.replace("table", "")) - 1
+                        if i < len(tables):
+                            df = tables[i]
+                        else:
+                            continue
+
+                        if name == "table3":
+                            start_row = 1   # 헤더 제외 (아랫줄만)
+                        else:
+                            start_row = 0
+                    except:
+                        continue
+
+                # 슬라이드 1,2 → table (단일)
+                elif slide_idx != 0:
+                    tables = slide_content.get("table", [])
+                    if len(tables) == 0:
+                        continue
+                    df = tables[0]
+                    start_row = 1
+                else:
+                    continue
+
+                # 데이터 삽입
+                rows = len(table.rows)
+                cols = len(table.columns)
+                for r in range(start_row, min(rows, df.shape[0] + start_row)):
+                    for c in range(min(cols, df.shape[1])):
+                        cell = table.cell(r, c)
+                        cell.text = str(df.iloc[r - start_row, c])
+                        if shape.name == "table1":
+                            if r == 0:
+                                set_text_style(cell, "center", 14, font_name="페이퍼로지 4 Regular")
+                            else:
+                                set_text_style(cell, "center", 9, line_spacing=1.3, space_before=0, space_after=0)
+                        elif shape.name == "table2":
+                            if r == 0:
+                                set_text_style(cell, "center", 9, line_spacing=1.3)
+                            else:
+                                set_text_style(cell, "center", 9, line_spacing=1.3, color=(89,89,89))
+                        elif shape.name == "table3":
+                            if r == 1:
+                                set_text_style(cell, "center", 11, font_name="페이퍼로지 4 Regular")
+                            else:
+                                continue
+                        else:
+                            if r == 0:
+                                set_text_style(cell, "center", 9, line_spacing=1.2, space_before=0, space_after=0)
+                            else:
+                                if c >= cols - 3:   # 🔥 마지막 3개 열
+                                    set_text_style(cell, "center", 9, line_spacing=1.2, space_before=0, space_after=0)
+                                else:
+                                    set_text_style(cell, "left", 9, line_spacing=1.2, space_before=0, space_after=0)
+
+    # 파일명 검수
+    if output_path == None:
+        output_path = "result.pptx"
+    base, ext = os.path.splitext(output_path)
+    if ext.lower() != ".pptx":
+        output_path = base + ".pptx"
+
+    prs.save(output_path)
+    print(f"{output_path} 업데이트 완료!")
+    return output_path

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "IT 임금 자가진단 플랫폼",
+  "description": "IT 산업 직무 역량 진단 및 보상 경쟁력 분석 서비스",
+  "requestFramePermissions": []
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  trailingSlash: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.29.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.3",
+    "express": "^4.21.2",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.546.0",
+    "motion": "^12.23.24",
+    "next": "^16.2.1",
+    "postcss": "^8.5.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+pandas
+numpy
+python-pptx
+pydantic
+matplotlib

src/app/LayoutContent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Header, SurveyHeader, LoadingOverlay, ErrorMessage } from '../components/layout/Common';
+import { useDiagnosis } from './contexts/DiagnosisContext';
+
+export default function LayoutContent({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const { currentIndex, surveyItems, loading, error, setError } = useDiagnosis();
+
+  const isSurvey = pathname === '/survey';
+  const isResult = pathname === '/result';
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50 font-sans text-slate-900 selection:bg-cyan-100 selection:text-cyan-900">
+      {loading && <LoadingOverlay />}
+      
+      {isSurvey ? (
+        <SurveyHeader current={currentIndex + 1} total={surveyItems.length || 10} />
+      ) : isResult ? null : (
+        <Header />
+      )}
+
+      <main className="relative flex-grow bg-slate-50 px-3 sm:px-4 py-6 sm:py-8">
+        {error ? (
+          <div className="max-w-xl mx-auto mt-20">
+            <ErrorMessage 
+              message={error} 
+              onRetry={() => {
+                setError(null);
+                window.location.reload();
+              }} 
+            />
+          </div>
+        ) : (
+          children
+        )}
+      </main>
+
+      <footer className="min-h-20 border-t border-slate-100 bg-white flex items-center justify-center shrink-0 px-4 py-4">
+        <p className="text-center text-xs sm:text-sm font-medium text-slate-500">
+          © 2026 시앤피컨설팅 주식회사. All rights reserved.
+        </p>
+      </footer>
+    </div>
+  );
+}

src/app/contexts/DiagnosisContext.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { SurveyItem, SearchParams, ResultData } from '../../types/diagnosis';
+import { diagnosisService } from '../../services/diagnosisService';
+import { useRouter } from 'next/navigation';
+
+interface DiagnosisContextType {
+  step: 'intro' | 'search' | 'survey' | 'result';
+  setStep: (step: 'intro' | 'search' | 'survey' | 'result') => void;
+  surveyItems: SurveyItem[];
+  searchParams: SearchParams;
+  setSearchParams: (params: SearchParams) => void;
+  answers: number[];
+  setAnswers: (answers: number[]) => void;
+  result: ResultData | null;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  error: string | null;
+  setError: (error: string | null) => void;
+  submitDiagnosis: () => Promise<void>;
+  reset: () => void;
+  clearSearchParams: () => void;
+  currentIndex: number;
+  setCurrentIndex: (index: number) => void;
+}
+
+const DiagnosisContext = createContext<DiagnosisContextType | undefined>(undefined);
+
+export function DiagnosisProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const [step, setStep] = useState<'intro' | 'search' | 'survey' | 'result'>('intro');
+  const [surveyItems, setSurveyItems] = useState<SurveyItem[]>([]);
+  const [searchParams, setSearchParams] = useState<SearchParams>({
+    job: '',
+    bm: '',
+    sales: '',
+    emp: '',
+    userBase: '지급총액',
+    userValue: 0
+  });
+  const [answers, setAnswers] = useState<number[]>([]);
+  const [result, setResult] = useState<ResultData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (step === 'survey') {
+      loadSurvey();
+    }
+  }, [step]);
+
+  const loadSurvey = async () => {
+    try {
+      setLoading(true);
+      const items = await diagnosisService.getSurveyItems(searchParams);
+      setSurveyItems(items);
+      setAnswers(new Array(items.length).fill(2));
+    } catch (err) {
+      setError('진단 항목을 불러오는데 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearSearchParams = () => {
+    setSearchParams({
+      job: '',
+      bm: '',
+      sales: '',
+      emp: '',
+      userBase: '지급총액',
+      userValue: 0
+    });
+  };
+
+  const submitDiagnosis = async () => {
+    try {
+      setLoading(true);
+      const data = await diagnosisService.getDiagnosisResult(searchParams, answers);
+      setResult(data);
+      setStep('result');
+      router.push('/result');
+    } catch (err) {
+      console.error("Diagnosis Submission Error:", err);
+      setError('진단 결과를 분석하는데 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const reset = () => {
+    setStep('intro');
+    setResult(null);
+    setAnswers([]);
+    clearSearchParams();
+    setCurrentIndex(0);
+    router.push('/');
+  };
+
+  return (
+    <DiagnosisContext.Provider
+      value={{
+        step, setStep,
+        surveyItems,
+        searchParams, setSearchParams,
+        answers, setAnswers,
+        result,
+        loading,
+        setLoading,
+        error,
+        setError,
+        submitDiagnosis,
+        reset,
+        clearSearchParams,
+        currentIndex, setCurrentIndex
+      }}
+    >
+      {children}
+    </DiagnosisContext.Provider>
+  );
+}
+
+export function useDiagnosis() {
+  const context = useContext(DiagnosisContext);
+  if (context === undefined) {
+    throw new Error('useDiagnosis must be used within a DiagnosisProvider');
+  }
+  return context;
+}

src/app/globals.css

@@ -0,0 +1,108 @@
+@import "tailwindcss";
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
+    font-weight: 100;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
+    font-weight: 200;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
+    font-weight: 800;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
+    font-weight: 900;
+    font-display: swap;
+}
+
+@theme {
+  --font-sans: "Pretendard", ui-sans-serif, system-ui, sans-serif;
+  
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f8fafc;
+}
+::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #cbd5e1;
+}

src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { DiagnosisProvider } from "./contexts/DiagnosisContext";
+import LayoutContent from "./LayoutContent";
+
+export const metadata: Metadata = {
+  title: "IT 커리어밸류체크",
+  description: "2025년 IT산업 임금체계 개선 길라잡이를 기반으로 개발한 보상경쟁력 자가진단 서비스",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body className="antialiased">
+        <DiagnosisProvider>
+          <LayoutContent>
+            {children}
+          </LayoutContent>
+        </DiagnosisProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { IntroView } from "../components/features/Intro";
+import { useRouter } from "next/navigation";
+import { useDiagnosis } from "./contexts/DiagnosisContext";
+
+export default function HomePage() {
+  const router = useRouter();
+  const { setStep } = useDiagnosis();
+
+  const handleStart = () => {
+    setStep('search');
+    router.push('/search');
+  };
+
+  return <IntroView onStart={handleStart} />;
+}

src/app/result/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useDiagnosis } from "../contexts/DiagnosisContext";
+import { ResultView } from "../../components/features/Result";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { diagnosisService } from "../../services/diagnosisService";
+
+export default function ResultPage() {
+  const router = useRouter();
+  const { result, reset, searchParams, answers, setLoading, setError } = useDiagnosis();
+
+  useEffect(() => {
+    if (!result) {
+      router.replace('/');
+    }
+  }, [result, router]);
+
+  const handleDownload = async () => {
+    try {
+      setLoading(true);
+      await diagnosisService.downloadReport(searchParams, answers);
+    } catch (err) {
+      setError('리포트 다운로드에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!result) return null;
+
+  return <ResultView data={result} onReset={reset} onDownload={handleDownload} />;
+}

src/app/search/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useRouter } from "next/navigation";
+import { useDiagnosis } from "../contexts/DiagnosisContext";
+import { SearchView } from "../../components/features/Search";
+
+export default function SearchPage() {
+  const router = useRouter();
+  const { searchParams, setSearchParams, setStep, clearSearchParams } = useDiagnosis();
+
+  const handleNext = () => {
+    setStep('survey');
+    router.push('/survey');
+  };
+
+  return (
+    <SearchView
+      params={searchParams}
+      setParams={setSearchParams}
+      onNext={handleNext}
+      onReset={clearSearchParams}
+    />
+  );
+}

src/app/survey/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useRouter } from "next/navigation";
+import { useDiagnosis } from "../contexts/DiagnosisContext";
+import { SurveyView } from "../../components/features/Survey";
+
+export default function SurveyPage() {
+  const router = useRouter();
+  const { 
+    surveyItems, 
+    answers, 
+    setAnswers, 
+    submitDiagnosis, 
+    currentIndex, 
+    setCurrentIndex 
+  } = useDiagnosis();
+
+  const handleSubmit = async () => {
+    await submitDiagnosis();
+    router.push('/result');
+  };
+
+  return (
+    <SurveyView
+      items={surveyItems}
+      answers={answers}
+      setAnswers={setAnswers}
+      onSubmit={handleSubmit}
+      currentIndex={currentIndex}
+      setCurrentIndex={setCurrentIndex}
+    />
+  );
+}

src/components/common/States.tsx

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { motion } from 'motion/react';
+import { Loader2, AlertCircle, Inbox } from 'lucide-react';
+
+export function LoadingSpinner() {
+  return (
+    <div className="flex flex-col items-center justify-center p-12 space-y-4">
+      <Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
+      <p className="text-sm text-gray-500 font-medium">데이터를 불러오는 중...</p>
+    </div>
+  );
+}
+
+export function ErrorState({ message }: { message: string }) {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex flex-col items-center justify-center p-12 bg-red-50 rounded-2xl border border-red-100"
+    >
+      <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
+      <h3 className="text-lg font-semibold text-red-800">오류가 발생했습니다</h3>
+      <p className="text-sm text-red-600 mt-1">{message}</p>
+      <button 
+        onClick={() => window.location.reload()}
+        className="mt-6 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
+      >
+        다시 시도하기
+      </button>
+    </motion.div>
+  );
+}
+
+export function EmptyState({ title, description }: { title: string, description: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center p-16 text-center border-2 border-dashed border-gray-200 rounded-2xl">
+      <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
+        <Inbox className="w-8 h-8 text-gray-400" />
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+      <p className="text-sm text-gray-500 mt-2 max-w-xs">{description}</p>
+    </div>
+  );
+}

src/components/features/Intro.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { motion } from 'framer-motion';
+import { ChevronRight, Target, BarChart3, ShieldCheck } from 'lucide-react';
+
+export function IntroView({ onStart }: { onStart: () => void }) {
+  return (
+    <div className="max-w-4xl mx-auto py-8 sm:py-12 px-4 sm:px-6">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-center mb-12 sm:mb-16"
+      >
+        <span className="inline-block px-4 py-1.5 bg-cyan-50 text-cyan-600 rounded-full border border-cyan-100 text-sm sm:text-base font-medium mb-6">
+          IT산업 종사자 보상경쟁력 자가진단 서비스
+        </span>
+        <h2 className="text-3xl sm:text-4xl md:text-[52px] font-bold text-slate-900 leading-tight mb-6 sm:mb-8">
+          나의 직무 역량과<br />
+          <span className="text-cyan-500 underline decoration-cyan-200 underline-offset-8">임금 수준</span>을 진단하세요
+        </h2>
+        <p className="text-sm sm:text-lg leading-6 sm:leading-normal text-slate-600 max-w-2xl mx-auto mb-10 sm:mb-12 break-keep">
+          10가지 핵심 역량 지표를 통해 당신의 전문성을 분석하고,<br />
+          동일 직무/레벨 대비 시장 가치를 확인합니다.
+        </p>
+        <button
+          onClick={onStart}
+          className="group relative w-full sm:w-auto px-8 sm:px-10 py-4 text-base sm:text-lg md:px-8 md:py-3 md:text-base bg-slate-900 text-white rounded-2xl font-bold shadow-2xl shadow-slate-200 hover:bg-cyan-600 transition-all active:scale-95"
+        >
+          진단 시작하기
+          <ChevronRight className="inline-block ml-2 group-hover:translate-x-1 transition-transform" />
+        </button>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-8">
+        {[
+          { icon: Target, title: "정밀 역량 진단", desc: "10개 지표 기반 수직 계층형 분석" },
+          { icon: BarChart3, title: "시장 데이터 비교", desc: "업종/매출 규모별 보상 경쟁력 확인" },
+          { icon: ShieldCheck, title: "신뢰할 수 있는 지표", desc: "IT 산업 표준 직무 체계 적용" }
+        ].map((item, i) => (
+          <div key={i} className="p-6 sm:p-8 bg-white border border-slate-100 rounded-3xl shadow-sm">
+            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center mb-6">
+              <item.icon className="w-6 h-6 text-slate-400" />
+            </div>
+            <h3 className="text-lg font-bold text-slate-900 mb-2">{item.title}</h3>
+            <p className="text-sm text-slate-600 leading-relaxed">{item.desc}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/features/Result.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ResultData } from '../../types/diagnosis';
+import { Download, RotateCcw, CheckCircle2, Info, Users } from 'lucide-react';
+import { MarketPositionGaugeChart } from './ResultCharts';
+import { SummaryBadge, LevelAnalysisColumn } from './ResultComponents';
+
+export function ResultView({
+  data,
+  onReset,
+  onDownload
+}: {
+  data: ResultData;
+  onReset: () => void;
+  onDownload?: () => void;
+}) {
+  return (
+    <div className="w-screen sm:w-auto relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] sm:static sm:left-auto sm:right-auto sm:mx-auto sm:my-0 sm:max-w-[1400px] pt-2 pb-12 px-0 sm:px-6 space-y-4 font-sans text-slate-900">
+      {/* Summary Card Section */}
+      <div
+        className="bg-white border border-slate-200 rounded-[1.5rem] pt-4 sm:pt-6 pb-4 sm:pb-6 px-4 sm:px-12 mb-6 sm:mb-9 shadow-xl shadow-slate-100/50 flex flex-col md:flex-row items-start md:items-center gap-4 sm:gap-8 md:gap-16"
+      >
+        <div className="shrink-0 border-l-4 border-cyan-500 pl-4 sm:pl-6">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-slate-900 tracking-tight leading-tight">
+            진단 결과 요약
+          </h1>
+        </div>
+
+        <div className="flex-grow min-w-0 space-y-2">
+          {data.headMessage.map((s, i) => (
+            <div key={i} className="flex items-start space-x-3">
+              <div className="w-6 h-6 bg-cyan-50 rounded-full flex items-center justify-center shrink-0 mt-0.5">
+                <CheckCircle2 className="w-4 h-4 text-cyan-500" />
+              </div>
+              <p className="text-sm sm:text-base md:text-md font-medium text-slate-700 leading-relaxed break-keep">
+                {s}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Content Card */}
+      <div className="bg-white border border-slate-200 rounded-[1.5rem] shadow-xl shadow-slate-100/50 overflow-hidden">
+        <div className="grid grid-cols-1 lg:grid-cols-3 divide-y lg:divide-y-0 lg:divide-x divide-slate-100">
+
+          {/* Column 1: Left Analysis (Current) */}
+          <LevelAnalysisColumn
+            levelInfo={data.levelInfo.left}
+            radarChartData={data.levelChart.left}
+            isCurrent
+          />
+
+          {/* Column 2: Right Analysis (Next) */}
+          <LevelAnalysisColumn
+            levelInfo={data.levelInfo.right}
+            radarChartData={data.levelChart.right}
+          />
+
+          {/* Column 3: Compensation */}
+          <div className="p-4 sm:p-8 space-y-4 sm:space-y-5 bg-white text-center min-w-0">
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold text-slate-900">보상 경쟁력</h3>
+              <p className="text-sm text-slate-600 font-medium leading-relaxed whitespace-pre-line break-keep">
+                {data.wageOutput[0].description}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex flex-col items-center justify-center">
+                <MarketPositionGaugeChart percentile={data.percentile} />
+              </div>
+
+              <div className="grid grid-cols-3 gap-2 sm:gap-3 pb-2">
+                <SummaryBadge label="User" value={data.wageOutput[0].user} />
+                <SummaryBadge label="시장 평균" value={data.wageOutput[0].marketAverage} />
+                <SummaryBadge label="Gap" value={data.wageOutput[0].gap} />
+              </div>
+            </div>
+
+
+            <div className="border-t border-dashed border-slate-200 pt-8 space-y-3">
+              <div className="flex items-center space-x-2">
+                <Users className="w-5 h-5 text-cyan-500" />
+                <h4 className="text-sm font-bold text-slate-900">직무 레벨 및 분석 조건</h4>
+              </div>
+
+              {/* 분석 조건 상세 배지 */}
+              <div className="flex flex-wrap justify-center pt-2 gap-2 sm:gap-3 mt-3">
+                {data.info.map((text, i) => (
+                  <span
+                    key={i}
+                    className="bg-slate-50 text-xs sm:text-sm text-slate-600 font-medium leading-relaxed whitespace-pre-line px-3 py-1 rounded-full border border-slate-200 break-keep"
+                  >
+                    {text}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Disclaimer */}
+      <div className="flex items-start space-x-3 p-4 sm:p-6">
+        <Info className="w-5 h-5 text-slate-500 mt-0.5 shrink-0" />
+        <div className="text-sm text-slate-600 leading-relaxed font-medium space-y-1">
+          <p>본 진단 결과는 입력하신 정보를 바탕으로 한 통계적 추정치이므로 참고용으로만 활용해 주십시오.</p>
+        </div>
+      </div>
+
+      {/* Bottom Action Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 sm:gap-4">
+        <button
+          onClick={onReset}
+          className="flex items-center justify-center space-x-2 px-6 sm:px-8 py-4 md:px-6 md:py-3 border border-slate-200 rounded-2xl hover:bg-slate-50 font-bold text-slate-600 transition-colors"
+        >
+          <RotateCcw className="w-5 h-5" />
+          <span>처음으로</span>
+        </button>
+        <button
+          onClick={onDownload}
+          className="w-full sm:max-w-[320px] flex items-center justify-center space-x-3 py-4 text-base sm:text-lg md:py-3 md:text-base bg-slate-900 text-white rounded-2xl font-bold shadow-2xl shadow-slate-200 hover:bg-cyan-600 transition-all active:scale-95"
+        >
+          <Download className="w-5 h-5" />
+          <span>진단 리포트 다운로드</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/features/ResultCharts.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, PieChart, Pie, Legend } from 'recharts';
+
+interface RadarData {
+  subject: string;
+  target: number;
+  user: number;
+}
+
+export function DiagnosisRadarChart({ data }: { data: RadarData[] }) {
+  const renderCustomAxisTick = ({ x, y, payload, cx, cy, ...rest }: any) => {
+    const { value } = payload;
+    const words = value.split(' ');
+
+    // Calculate alignment based on position relative to center
+    const textAnchor = x > cx ? 'start' : x < cx ? 'end' : 'middle';
+    const dy = y > cy ? 14 : y < cy ? -4 : 4;
+
+    return (
+      <text
+        x={x}
+        y={y}
+        textAnchor={textAnchor}
+        fill="#64748b"
+        fontSize={10}
+        fontWeight={600}
+        className="recharts-polar-angle-axis-tick-value"
+      >
+        {words.map((word: string, index: number) => (
+          <tspan x={x} dy={index === 0 ? dy : 11} key={index}>
+            {word}
+          </tspan>
+        ))}
+      </text>
+    );
+  };
+
+  const renderLegend = (props: any) => {
+    const { payload } = props;
+    return (
+      <div className="flex flex-wrap justify-center gap-3 sm:gap-6 mt-5 sm:mt-6 px-2">
+        {payload.map((entry: any, index: number) => {
+          const fillOpacity = entry.dataKey === 'target' ? 0.1 : 0.4;
+          // Target: #fbbf24 -> rgba(251, 191, 36)
+          // User: #06b6d4 -> rgba(6, 182, 212)
+          const bgColor = entry.dataKey === 'target'
+            ? `rgba(251, 191, 36, ${fillOpacity})`
+            : `rgba(6, 182, 212, ${fillOpacity})`;
+
+          return (
+            <div key={`item-${index}`} className="flex items-center gap-2">
+              <div
+                className="w-3 h-3 rounded-full"
+                style={{
+                  backgroundColor: bgColor,
+                  border: `1.5px solid ${entry.color}`
+                }}
+              />
+              <span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider">{entry.value}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-[260px] sm:h-[320px] w-full bg-white rounded-xl pb-4 sm:pb-5">
+      <ResponsiveContainer width="100%" height="100%">
+        <RadarChart cx="50%" cy="45%" outerRadius="75%" data={data}>
+          <PolarGrid stroke="#e2e8f0" />
+          <PolarAngleAxis
+            dataKey="subject"
+            tick={renderCustomAxisTick}
+          />
+          <PolarRadiusAxis domain={[1, 5]} tick={false} axisLine={false} />
+          <Radar name="Target" dataKey="target" stroke="#fbbf24" fill="#fbbf24" fillOpacity={0.1} />
+          <Radar name="User" dataKey="user" stroke="#06b6d4" fill="#06b6d4" fillOpacity={0.4} />
+          <Legend content={renderLegend} verticalAlign="bottom" />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function MarketPositionGaugeChart({ percentile }: { percentile: number }) {
+  const data = [
+    { name: 'Value', value: percentile, fill: '#134e6f' },
+    { name: 'Remaining', value: 100 - percentile, fill: '#f1f5f9' },
+  ];
+
+  return (
+    <div className="h-[132px] sm:h-[148px] w-full relative flex items-center justify-center overflow-visible">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            dataKey="value"
+            startAngle={180}
+            endAngle={0}
+            data={data}
+            cx="50%"
+            cy="84%"
+            innerRadius={75}
+            outerRadius={95}
+            stroke="none"
+            paddingAngle={0}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="absolute top-[46%] left-1/2 -translate-x-1/2 text-center">
+        <p className="text-[12px] font-bold text-slate-500">시장 내 위치</p>
+        <p className="text-xl sm:text-2xl font-bold text-slate-800 tracking-tight">{percentile.toFixed(1)}%</p>
+      </div>
+    </div>
+  );
+}

src/components/features/ResultComponents.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DiagnosisRadarChart } from './ResultCharts';
+
+interface LevelDisplayProps {
+  title: string;
+  definition: string;
+  isCurrent?: boolean;
+}
+
+/**
+ * Used in ResultView to show Level definition
+ */
+export function LevelDisplay({ title, definition }: LevelDisplayProps) {
+  return (
+    <div className="space-y-2 text-center">
+      <h3 className="text-xl font-bold text-slate-900">
+        {title}
+      </h3>
+      <p className="text-sm text-slate-600 leading-relaxed font-medium">
+        {definition}
+      </p>
+    </div>
+  );
+}
+
+interface SummaryBadgeProps {
+  label: string;
+  value: string | number;
+  className?: string;
+}
+
+/**
+ * Used in ResultView to show compensation summary items (User, Market Average, Gap).
+ */
+export function SummaryBadge({ label, value, className = "" }: SummaryBadgeProps) {
+  return (
+    <div className={`bg-[#f4f9fb] rounded-lg sm:rounded-xl pt-1 pb-1.5 sm:py-2 px-1.5 sm:px-2 text-center space-y-0 sm:space-y-1 min-w-0 ${className}`}>
+      <span className="text-[12px] sm:text-[12px] font-medium text-slate-500">{label}</span>
+      <p className="text-[13px] sm:text-lg font-bold text-slate-900 break-all">{value}</p>
+    </div>
+  );
+}
+
+interface LevelAnalysisColumnProps {
+  levelInfo: {
+    title: string;
+    definition: string;
+    guide: string;
+    items: string;
+  };
+  radarChartData: { subject: string; target: number; user: number }[];
+  isCurrent?: boolean;
+}
+
+/**
+ * Used in ResultView to display each level's analysis column.
+ */
+export function LevelAnalysisColumn({ levelInfo, radarChartData, isCurrent }: LevelAnalysisColumnProps) {
+  return (
+    <div className="p-5 sm:p-8 space-y-6 min-w-0">
+      <LevelDisplay
+        title={levelInfo.title}
+        definition={levelInfo.definition}
+        isCurrent={isCurrent}
+      />
+
+      <DiagnosisRadarChart data={radarChartData} />
+
+      <div className="space-y-3 text-center">
+        <h4 className="text-sm font-bold text-slate-900">{levelInfo.guide}</h4>
+        <div className="p-4 bg-slate-50 rounded-xl text-sm text-slate-600 font-medium whitespace-pre-wrap min-h-[80px] flex items-center justify-center text-center break-keep">
+          {levelInfo.items}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/features/Search.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect } from 'react';
+import { SearchParams } from '../../types/diagnosis';
+import { motion } from 'framer-motion';
+import { SearchSelect, SearchRadioGroup, SearchInput } from './SearchComponents';
+import { diagnosisService } from '../../services/diagnosisService';
+
+export function SearchView({
+  params,
+  setParams,
+  onNext,
+  onReset
+}: {
+  params: SearchParams;
+  setParams: (p: SearchParams) => void;
+  onNext: () => void;
+  onReset?: () => void;
+}) {
+  const [options, setOptions] = useState<{
+    jobs: string[];
+    bms: string[];
+    sales: string[];
+    emps: string[];
+    userBases: string[];
+  }>({
+    jobs: [],
+    bms: [],
+    sales: [],
+    emps: [],
+    userBases: ['지급총액', '고정급']
+  });
+
+  useEffect(() => {
+    async function fetchOpts() {
+      try {
+        const data = await diagnosisService.getOptions({
+          job: params.job,
+          bm: params.bm,
+          sales: params.sales
+        });
+
+        setOptions(prev => ({
+          jobs: data.job_options?.length ? data.job_options : prev.jobs,
+          bms: data.bm_options?.length ? data.bm_options : prev.bms,
+          sales: data.sales_options?.length ? data.sales_options : prev.sales,
+          emps: data.emp_options?.length ? data.emp_options : prev.emps,
+          userBases: ['지급총액', '고정급'],
+        }));
+
+        let newParams = { ...params };
+        let modified = false;
+
+        if (data.job_options?.length && newParams.job && !data.job_options.includes(newParams.job)) {
+          newParams.job = '';
+          modified = true;
+        }
+        if (data.bm_options?.length && !data.bm_options.includes(newParams.bm)) {
+          newParams.bm = data.bm_options[0];
+          modified = true;
+        }
+        if (data.sales_options?.length && !data.sales_options.includes(newParams.sales)) {
+          newParams.sales = data.sales_options[0];
+          modified = true;
+        }
+        if (data.emp_options?.length && !data.emp_options.includes(newParams.emp)) {
+          newParams.emp = data.emp_options[0];
+          modified = true;
+        }
+
+        if (modified && newParams.job) {
+          setParams(newParams);
+        }
+      } catch (e) {
+        console.error("Failed to load dynamic options", e);
+      }
+    }
+
+    fetchOpts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.job, params.bm, params.sales, setParams]);
+
+  return (
+    <div className="w-screen sm:w-auto relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] sm:static sm:left-auto sm:right-auto sm:mx-auto sm:my-0 sm:max-w-3xl py-6 sm:py-12 px-0 sm:px-6">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-10">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold text-slate-900 tracking-tight">상세 분석 조건 설정</h2>
+          <p className="text-slate-500 font-medium">정확한 시장 임금 비교를 위해 현재 상태를 입력해주세요.</p>
+        </div>
+
+        <div className="bg-white p-4 sm:p-8 md:p-12 border border-slate-100 rounded-[2rem] sm:rounded-[2.5rem] shadow-2xl shadow-slate-100 space-y-7 sm:space-y-10">
+          <SearchRadioGroup
+            label="직무 선택"
+            name="job"
+            value={params.job}
+            options={options.jobs}
+            onChange={val => setParams({ 
+              ...params, 
+              job: val,
+              bm: '', 
+              sales: '', 
+              emp: '' 
+            })}
+          />
+
+          <div className="space-y-10">
+            {/* 1row : 비즈니스 모델 */}
+            <SearchSelect
+              label="비즈니스 모델"
+              value={params.bm}
+              options={options.bms}
+              onChange={val => setParams({ ...params, bm: val })}
+            />
+
+            {/* 2row : 매출규모 + 직원규모 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              <SearchSelect
+                label="매출 규모"
+                value={params.sales}
+                options={options.sales}
+                onChange={val => setParams({ ...params, sales: val })}
+              />
+              <SearchSelect
+                label="직원 규모"
+                value={params.emp}
+                options={options.emps}
+                onChange={val => setParams({ ...params, emp: val })}
+              />
+            </div>
+
+            {/* 3row : 보상단위 + 보상액 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-end">
+              <SearchSelect
+                label="보상 단위"
+                value={params.userBase}
+                options={options.userBases}
+                onChange={val => setParams({ ...params, userBase: val })}
+              />
+              <SearchInput
+                label="현재 보상액 (세���)"
+                value={params.userValue}
+                unit="만원"
+                onChange={val => setParams({ ...params, userValue: val })}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3 sm:gap-4 mt-8">
+            <button
+              onClick={() => {
+                if (onReset) onReset();
+                setOptions(prev => ({
+                  ...prev,
+                  bms: [],
+                  sales: [],
+                  emps: [],
+                }));
+              }}
+              className="md:col-span-1 h-14 text-base bg-white text-slate-400 border border-slate-100 rounded-[1.5rem] font-bold hover:bg-slate-50 hover:text-slate-600 transition-all active:scale-[0.98]"
+            >
+              초기화
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!params.job}
+              className={`md:col-span-3 h-14 text-base rounded-[1.5rem] font-bold shadow-2xl transition-all active:scale-[0.98] ${!params.job
+                ? 'bg-slate-200 text-slate-400 cursor-not-allowed'
+                : 'bg-slate-900 text-white shadow-slate-200 hover:bg-cyan-600 hover:shadow-cyan-200'
+                }`}
+            >
+              진단 시작하기
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

src/components/features/SearchComponents.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+interface SearchSelectProps {
+  label: string;
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SearchSelect({ label, value, options, onChange, className = "" }: SearchSelectProps) {
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <label className="text-sm font-bold text-slate-400 uppercase tracking-[0.1em] block">
+        {label}
+      </label>
+      <div className="relative">
+        <select
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          className="w-full h-14 px-5 bg-slate-50 border border-slate-100 rounded-2xl text-slate-700 text-base font-bold appearance-none focus:bg-white focus:border-cyan-500 focus:ring-4 focus:ring-cyan-50/50 transition-all outline-none"
+        >
+          <option value="" disabled hidden>선택해주세요</option>
+          {options.map(opt => <option key={opt} value={opt} className="text-base">{opt}</option>)}
+        </select>
+        <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface SearchRadioGroupProps {
+  label: string;
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+  name: string;
+}
+
+export function SearchRadioGroup({ label, value, options, onChange, name }: SearchRadioGroupProps) {
+  return (
+    <div className="space-y-5">
+      <label className="text-sm font-bold text-slate-400 uppercase tracking-[0.1em] block">
+        {label}
+      </label>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-5">
+        {options.map(opt => (
+          <label
+            key={opt}
+            className={`
+              flex items-center justify-center min-h-14 px-4 py-3 rounded-2xl text-sm sm:text-base text-center break-keep font-bold border transition-all cursor-pointer
+              ${value === opt
+                ? 'border-cyan-500 bg-cyan-50 text-cyan-700 ring-4 ring-cyan-50'
+                : 'border-slate-100 bg-slate-50 text-slate-400 hover:border-slate-200'}
+            `}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={opt}
+              checked={value === opt}
+              onChange={() => onChange(opt)}
+              className="sr-only"
+            />
+            {opt}
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface SearchInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  unit: string;
+}
+
+export function SearchInput({ label, value, onChange, unit }: SearchInputProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-bold text-slate-400 uppercase tracking-[0.1em]">
+          {label}
+        </label>
+      </div>
+      <div className="relative">
+        <input
+          type="number"
+          value={value === 0 ? '' : value}
+          onChange={e => onChange(Number(e.target.value))}
+          className="w-full h-14 pl-5 pr-16 bg-slate-50 border border-slate-100 rounded-2xl text-base font-bold text-slate-800 focus:bg-white focus:border-cyan-500 focus:ring-4 focus:ring-cyan-50/50 transition-all outline-none"
+          placeholder="0"
+        />
+        <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none font-bold text-slate-400">{unit}</div>
+      </div>
+    </div>
+  );
+}

src/components/features/Survey.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SurveyItem } from '../../types/diagnosis';
+import { ChevronLeft, ChevronRight, CheckCircle } from 'lucide-react';
+import { LevelIndicator } from './SurveyComponents';
+
+export function SurveyView({
+  items,
+  answers,
+  setAnswers,
+  onSubmit,
+  currentIndex,
+  setCurrentIndex
+}: {
+  items: SurveyItem[];
+  answers: number[];
+  setAnswers: (a: number[]) => void;
+  onSubmit: () => void;
+  currentIndex: number;
+  setCurrentIndex: (i: number) => void;
+}) {
+  const updateAnswer = (index: number, value: number) => {
+    const newAnswers = [...answers];
+    newAnswers[index] = value;
+    setAnswers(newAnswers);
+  };
+
+  const nextQuestion = () => {
+    if (currentIndex < items.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+    }
+  };
+
+  const prevQuestion = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+
+  const currentItem = items[currentIndex];
+
+  if (!currentItem) {
+    return null;
+  }
+
+  return (
+    <div className="w-screen sm:w-auto relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] sm:static sm:left-auto sm:right-auto sm:mx-auto sm:my-0 sm:max-w-4xl py-6 sm:py-12 px-0 sm:px-6 min-h-[80vh] flex flex-col">
+      <div className="flex-grow flex flex-col justify-center">
+        <div className="bg-white border border-slate-100 rounded-[2rem] sm:rounded-[2.5rem] shadow-xl shadow-slate-100/50 overflow-hidden">
+          <div className="p-4 sm:p-8 md:p-12 space-y-5 sm:space-y-6">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 sm:gap-6 border-l-4 border-cyan-500 pl-4 sm:pl-6">
+              <h3 className="text-xl sm:text-2xl font-bold text-slate-900 leading-tight break-keep">{currentItem.title}</h3>
+            </div>
+
+            <div className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <LevelIndicator
+                  level={2}
+                  content={currentItem.level2}
+                  isActive={answers[currentIndex] <= 2}
+                  type="base"
+                />
+                <LevelIndicator
+                  level={4}
+                  content={currentItem.level4}
+                  isActive={answers[currentIndex] >= 4}
+                  type="expert"
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center space-y-8 pt-2">
+              <div className="grid grid-cols-5 gap-2 sm:gap-4 md:gap-8 w-full max-w-3xl">
+                {[
+                  { val: 1, label: '2수준보다 부족함' },
+                  { val: 2, label: '2수준' },
+                  { val: 3, label: '중간 수준' },
+                  { val: 4, label: '4수준' },
+                  { val: 5, label: '4수준보다 뛰어남' }
+                ].map((item) => (
+                  <div key={item.val} className="flex flex-col items-center space-y-2 sm:space-y-5 min-w-0">
+                    <button
+                      onClick={() => updateAnswer(currentIndex, item.val)}
+                      className={`w-10 h-10 sm:w-14 sm:h-14 md:w-12 md:h-12 rounded-lg sm:rounded-xl flex items-center justify-center text-base sm:text-xl md:text-2xl font-bold transition-all ${answers[currentIndex] === item.val ? 'bg-cyan-500 text-white shadow-xl shadow-cyan-100 scale-105' : 'bg-white text-slate-400 hover:bg-slate-50 border-2 border-slate-200 hover:border-slate-200'}`}
+                    >
+                      {item.val}
+                    </button>
+                    <span className={`text-[10px] sm:text-xs md:text-xs font-medium text-center leading-[1.25] break-words max-w-full min-h-[2.5em] ${answers[currentIndex] === item.val ? 'text-cyan-600' : 'text-slate-400'}`}>
+                      {item.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 sm:gap-4 pt-8 sm:pt-10 border-t border-slate-100">
+              <button
+                onClick={prevQuestion}
+                disabled={currentIndex === 0}
+                className={`flex items-center justify-center w-full sm:w-14 h-12 sm:h-14 md:w-12 md:h-12 rounded-2xl border ${currentIndex === 0 ? 'bg-slate-50 border-slate-100 text-slate-300 cursor-not-allowed' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+              >
+                <ChevronLeft size={24} />
+              </button>
+
+              {currentIndex === items.length - 1 ? (
+                <button
+                  onClick={onSubmit}
+                  disabled={!answers[currentIndex]}
+                  className={`w-full sm:max-w-[320px] py-4 text-base sm:text-lg md:py-3 md:text-base rounded-2xl font-bold shadow-2xl flex items-center justify-center gap-3 transition-all ${!answers[currentIndex] ? 'bg-slate-200 text-slate-500 cursor-not-allowed' : 'bg-slate-900 text-white shadow-slate-200 hover:bg-cyan-600'}`}
+                >
+                  <CheckCircle size={20} />
+                  진단 완료 및 결과 분석
+                </button>
+              ) : (
+                <button
+                  onClick={nextQuestion}
+                  disabled={!answers[currentIndex]}
+                  className={`w-full sm:max-w-[320px] py-4 text-base sm:text-lg md:py-3 md:text-base rounded-2xl font-bold shadow-2xl flex items-center justify-center gap-3 transition-all ${!answers[currentIndex] ? 'bg-slate-100 text-slate-400 cursor-not-allowed' : 'bg-cyan-500 text-white shadow-cyan-100 hover:bg-cyan-600'}`}
+                >
+                  다음 항목으로
+                  <ChevronRight size={20} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/features/SurveyComponents.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+interface LevelIndicatorProps {
+  level: number;
+  content: string[];
+  isActive: boolean;
+  type: 'base' | 'expert';
+}
+
+/**
+ * Used in SurveyView to show Level 2 and Level 4 descriptions.
+ */
+export function LevelIndicator({ level, content, isActive }: LevelIndicatorProps) {
+  const activeClasses = 'bg-cyan-50 border-cyan-300 ring-4 ring-cyan-50';
+  const inactiveClasses = 'bg-slate-50 border-slate-200';
+
+  const dotActiveClasses = 'bg-cyan-600';
+  const dotInactiveClasses = 'bg-slate-400';
+
+  const labelClasses = 'text-cyan-700';
+
+  return (
+    <div className={`px-5 sm:px-8 py-5 rounded-3xl border transition-all duration-300 ${isActive ? activeClasses : inactiveClasses}`}>
+      <div className="flex items-center justify-center space-x-2 mb-4">
+        <span className={`text-[16px] font-bold uppercase tracking-widest ${labelClasses}`}>
+          {level}수준
+        </span>
+      </div>
+      <div className={`space-y-3 transition-colors duration-300 ${isActive ? 'text-cyan-900 font-medium' : 'text-slate-800 font-normal'}`}>
+        {content.map((item, index) => (
+          <div key={index} className="flex items-start space-x-2">
+            <span className={`mt-1.5 w-1 h-1 rounded-full shrink-0 transition-colors duration-300 ${isActive ? dotActiveClasses : dotInactiveClasses}`} />
+            <p className="text-sm md:text-base leading-relaxed break-keep">
+              {item}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/layout/Common.tsx

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Loader2, AlertCircle } from 'lucide-react';
+
+export function LoadingOverlay({ message = "분석 중입니다..." }: { message?: string }) {
+  return (
+    <div className="fixed inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center">
+      <Loader2 className="w-12 h-12 text-cyan-500 animate-spin mb-4" />
+      <p className="text-lg font-bold text-slate-700">{message}</p>
+    </div>
+  );
+}
+
+export function ErrorMessage({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div className="p-6 bg-red-50 border border-red-200 rounded-2xl flex flex-col items-center text-center">
+      <AlertCircle className="w-10 h-10 text-red-500 mb-2" />
+      <p className="text-red-700 font-medium mb-4">{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+        >
+          다시 시도
+        </button>
+      )}
+    </div>
+  );
+}
+
+import Link from 'next/link';
+
+export function Header() {
+  return (
+    <header className="min-h-16 border-b border-slate-100 bg-white sticky top-0 z-40 px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
+      <Link href="/" className="flex min-w-0 items-center space-x-2 hover:opacity-80 transition-opacity">
+        <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
+          <div className="w-4 h-4 bg-white rounded-sm rotate-45" />
+        </div>
+        <h1 className="text-xl font-bold text-slate-900 tracking-tight">IT 커리어밸류체크</h1>
+      </Link>
+      <div className="hidden md:flex shrink-0 items-center space-x-6 text-sm font-medium text-slate-500">
+        <span className="text-cyan-600">2025 IT산업 임금체계 개선 길라잡이 연계</span>
+      </div>
+    </header>
+  );
+}
+
+import { motion } from 'framer-motion';
+
+export function SurveyHeader({ current, total }: { current: number; total: number }) {
+  const progress = (current / total) * 100;
+  return (
+    <header className="h-16 border-b border-slate-100 bg-white sticky top-0 z-40 flex flex-col justify-end">
+      <div className="px-4 sm:px-6 flex items-center justify-between h-full gap-3">
+        <div className="flex items-center space-x-2">
+          <span className="text-xs font-bold text-cyan-600 tracking-widest">Step {current} of {total}</span>
+        </div>
+        <div className="text-right">
+          <span className="text-sm font-bold text-slate-900">{Math.round(progress)}%</span>
+        </div>
+      </div>
+      <div className="w-full h-1 bg-slate-100 overflow-hidden">
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          className="h-full bg-cyan-500"
+        />
+      </div>
+    </header>
+  );
+}

src/lib/utils.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/services/diagnosisService.ts

@@ -0,0 +1,58 @@
+import { SearchParams, SurveyItem, ResultData } from '../types/diagnosis';
+
+const API_BASE = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8000/api' : '/api';
+
+export const diagnosisService = {
+  getOptions: async (params: { job?: string; bm?: string; sales?: string }) => {
+    const res = await fetch(`${API_BASE}/options`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    if (!res.ok) throw new Error('Failed to fetch options');
+    return res.json();
+  },
+
+  getSurveyItems: async (params: SearchParams): Promise<SurveyItem[]> => {
+    const res = await fetch(`${API_BASE}/survey`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    if (!res.ok) throw new Error('Failed to fetch survey items');
+    return res.json();
+  },
+
+  getDiagnosisResult: async (
+    params: SearchParams,
+    answers: number[]
+  ): Promise<ResultData> => {
+    const res = await fetch(`${API_BASE}/diagnosis`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ params, answers }),
+    });
+    if (!res.ok) throw new Error('Failed to fetch diagnosis result');
+    return res.json();
+  },
+
+  downloadReport: async (params: SearchParams, answers: number[]) => {
+    const res = await fetch(`${API_BASE}/report`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ params, answers }),
+    });
+    if (!res.ok) throw new Error('Failed to download report');
+    
+    // Convert response to blob
+    const blob = await res.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = '진단리포트.pptx';
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  }
+};

src/services/mockDiagnosisService.ts

@@ -0,0 +1,105 @@
+import { SearchParams, SurveyItem, ResultData } from '../types/diagnosis';
+
+export const mockDiagnosisService = {
+  getOptions: async (params: { job?: string; bm?: string; sales?: string }) => {
+    // Cascadable Mock Options
+    const allJobs = ['소프트웨어 개발', '데이터 엔지니어링', '보안/인프라'];
+    const jobBms: Record<string, string[]> = {
+      '소프트웨어 개발': ['SaaS', '커머스', '게임'],
+      '데이터 엔지니어링': ['플랫폼', 'AI 서비스'],
+      '보안/인프라': ['전체', '클라우드']
+    };
+    
+    if (!params.job) return { job_options: allJobs };
+    
+    return {
+      job_options: allJobs,
+      bm_options: jobBms[params.job] || ['전체'],
+      sales_options: ['100억 미만', '100억~500억', '500억 이상'],
+      emp_options: ['전체', '300~999인', '100~299인', '50~99인', '49인 이하']
+    };
+  },
+
+  getSurveyItems: async (params: SearchParams): Promise<SurveyItem[]> => {
+    return [
+      { id: 1, title: '01. 기술 전문성 및 학습 민첩성', level2: ['기초적인 문법 이해', '가이드에 따른 개발 가능'], level4: ['아키텍처 설계 가능', '신기술 도입 주도'] },
+      { id: 2, title: '02. 도메인 및 제품 이해', level2: ['비즈니스 용어 익숙함', '담당 기능 이해'], level4: ['비즈니스 임팩트 분석', '제품 로드맵 기여'] },
+      { id: 3, title: '03. 데이터 리터러시', level2: ['데이터 확인 가능', '기본 쿼리 작성'], level4: ['데이터 기반 의사결정', '지표 설계 및 검증'] },
+      { id: 4, title: '04. 고객중심 사고', level2: ['고객 요구사항 실행', 'VOC 응대'], level4: ['고객 가치 정의', '사용자 경험 주도적 개선'] },
+      { id: 5, title: '05. 문제해결의 자율성·복잡성', level2: ['단순 버그 수정', '명확한 문제 해결'], level4: ['복합 장기 과제 주도', '기술적 난제 해결'] },
+      { id: 6, title: '06. 애자일 실행 및 관리', level2: ['스크럼 참여', '태스크 관리'], level4: ['프로세스 최적화', '팀 생산성 극대화'] },
+      { id: 7, title: '07. 커뮤니케이션 및 협업', level2: ['원활한 의사소통', '팀 내 협력'], level4: ['타 부서 이해관계 조정', '협업 문화 전파'] },
+      { id: 8, title: '08. End-to-End 책임감', level2: ['코드 작성 및 테스트', '배포 지원'], level4: ['운영 장애 대응 주도', '품질 전체 관리'] },
+      { id: 9, title: '09. 영향범위', level2: ['본인 업무 집중', '동료 업무 지원'], level4: ['전사 기술 표준 수립', '타 팀 영향력 행사'] },
+      { id: 10, title: '10. 리더십 및 문화 기여', level2: ['조직 문화 순응', '자기계발 집중'], level4: ['멘토링 및 코칭', '핵심 인재 확보 기여'] }
+    ];
+  },
+
+  getDiagnosisResult: async (params: SearchParams, answers: number[]): Promise<ResultData> => {
+    const job = params.job || '데이터 엔지니어링';
+    const totalScore = answers.reduce((a, b) => a + b, 0);
+    const level = totalScore >= 30 ? 'L4' : 'L2';
+
+    return {
+      headMessage: [
+        `진단 결과, 현재 귀하의 직무 역량 수준은 ${level}에 가장 가까운 것으로 보입니다.`,
+        `동일 직무 레벨 및 조건 대비 보상 경쟁력은 상위 15.4%로 높은 수준입니다.`
+      ],
+      levelInfo: {
+        left: {
+          title: `하위 레벨: ${level === 'L4' ? 'L3' : 'L1'}`,
+          definition: "주어진 과업에 대해 안정적인 결과물을 산출하며 효율적인 코드 작성이 가능함",
+          guide: "아래 역량은 현재 레벨 안착을 위해 보완해보면 좋겠습니다.",
+          items: "도메인 이해, 애자일 실행 및 관리"
+        },
+        right: {
+          title: `현재 레벨: ${level}`,
+          definition: "복잡한 기술적 과제를 주도적으로 해결하며 아키텍처 관점의 의사결정에 참여함",
+          guide: "다음 역량은 현재 안정적으로 발휘되고 있는 강점입니다.",
+          items: "기술 전문성, 문제해결, 책임감"
+        }
+      },
+      levelChart: {
+        left: [
+          { subject: "기술 전문성", target: 3, user: 2.5 },
+          { subject: "도메인 이해", target: 3, user: 2.0 },
+          { subject: "데이터 리터러시", target: 3, user: 3.5 },
+          { subject: "고객중심 사고", target: 3, user: 3.0 },
+          { subject: "문제해결", target: 3, user: 2.0 },
+          { subject: "애자일", target: 3, user: 2.5 },
+          { subject: "협업", target: 3, user: 3.0 },
+          { subject: "책임감", target: 3, user: 3.5 },
+          { subject: "영향범위", target: 3, user: 2.0 },
+          { subject: "리더십", target: 3, user: 2.5 }
+        ],
+        right: [
+          { subject: "기술 전문성", target: 4, user: 3.5 },
+          { subject: "도메인 이해", target: 4, user: 3.0 },
+          { subject: "데이터 리터러시", target: 4, user: 4.5 },
+          { subject: "고객중심 사고", target: 4, user: 4.0 },
+          { subject: "문제해결", target: 4, user: 3.0 },
+          { subject: "애자일", target: 4, user: 3.5 },
+          { subject: "협업", target: 4, user: 4.0 },
+          { subject: "책임감", target: 4, user: 4.5 },
+          { subject: "영향범위", target: 4, user: 3.0 },
+          { subject: "리더십", target: 4, user: 3.5 }
+        ]
+      },
+      percentile: 84.6,
+      wageOutput: [
+        {
+          user: `${params.userValue.toLocaleString()}`,
+          marketAverage: "5,840",
+          gap: "+1,660",
+          description: `시장 상위 15.4% 수준으로, 평균 대비 1,660만원 더 높게 나타났습니다.`
+        }
+      ],
+      info: [job, level, params.bm, params.sales, params.emp]
+    };
+  },
+
+  downloadReport: async (params: SearchParams, answers: number[]) => {
+    console.log("Mock Downloading Report for", params);
+    alert("Mock: 리포트 다운로드가 시작되었습니다 (PDF 변환 중...)");
+  }
+};

src/types/diagnosis.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface SurveyItem {
+  id: number;
+  title: string;
+  level2: string[];
+  level4: string[];
+}
+
+export interface SearchParams {
+  job: string;
+  bm: string;
+  sales: string;
+  emp: string;
+  userBase: string;
+  userValue: number;
+}
+
+export interface LevelInfo {
+  title: string;
+  definition: string;
+  guide: string;
+  items: string;
+}
+
+export interface RadarData {
+  subject: string;
+  target: number;
+  user: number;
+}
+
+export interface WageOutput {
+  user: string;
+  marketAverage: string;
+  gap: string;
+  description: string;
+}
+
+export interface ResultData {
+  headMessage: string[];
+  levelInfo: {
+    left: LevelInfo;
+    right: LevelInfo;
+  };
+  levelChart: {
+    left: RadarData[];
+    right: RadarData[];
+  };
+  percentile: number;
+  wageOutput: WageOutput[];
+  info: string[];
+}
+

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}