npm - careermate - Versions diffs - 0.1.0 → 0.1.1 - Mend

careermate 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/README.md +10 -7
package/apps/mcp/src/index.ts +3 -1
package/apps/web/DESIGN_GUIDE.md +2 -2
package/apps/web/public/icon-180.png +0 -0
package/apps/web/public/index.html +4 -1
package/apps/web/public/lib.js +1 -1
package/apps/web/public/pages/applications.js +17 -1
package/apps/web/public/pages/settings.js +6 -4
package/apps/web/public/styles.css +49 -36
package/apps/web/src/info.ts +9 -22
package/apps/web/src/routes.ts +17 -13
package/apps/web/src/server.ts +33 -25
package/apps/web/src/settings.ts +35 -17
package/bin/careermate.mjs +8 -5
package/dist/{mcpb-stage/dist/web.mjs → doctor.mjs} +1122 -1450
package/dist/install-page/favicon.svg +1 -0
package/dist/install-page/icon-180.png +0 -0
package/dist/install-page/icon-512.png +0 -0
package/dist/install-page/index.html +309 -167
package/dist/install-page/llms-install.txt +202 -0
package/dist/install-page/og.png +0 -0
package/dist/install-page/shots/applications-dark.png +0 -0
package/dist/install-page/shots/applications-light.png +0 -0
package/dist/install-page/shots/documents-dark.png +0 -0
package/dist/install-page/shots/documents-light.png +0 -0
package/dist/install-page/shots/home-dark.png +0 -0
package/dist/install-page/shots/home-light.png +0 -0
package/dist/install-page/shots/interview-dark.png +0 -0
package/dist/install-page/shots/interview-light.png +0 -0
package/dist/install-page/shots/jobs-dark.png +0 -0
package/dist/install-page/shots/jobs-light.png +0 -0
package/dist/install-page/shots/settings-dark.png +0 -0
package/dist/install-page/shots/settings-light.png +0 -0
package/dist/install-page/start.html +346 -0
package/dist/install-page/style.css +94 -3
package/dist/mcp.mjs +326 -68
package/dist/migrate.mjs +4715 -0
package/dist/public/icon-180.png +0 -0
package/dist/public/index.html +4 -1
package/dist/public/lib.js +1 -1
package/dist/public/pages/applications.js +17 -1
package/dist/public/pages/settings.js +6 -4
package/dist/public/styles.css +49 -36
package/dist/web.mjs +323 -129
package/docs/DEMO.md +3 -3
package/docs/MCP_TOOLS.md +21 -2
package/docs/ROADMAP.md +3 -3
package/docs/RUNTIME_DISTRIBUTION_RESEARCH.md +135 -0
package/docs/START_WORKFLOW.md +6 -0
package/docs/SUPPORTED_AI_APPS.md +85 -33
package/docs/WORKFLOWS.md +1 -1
package/package.json +3 -2
package/packages/core/src/services.ts +42 -1
package/packages/db/src/connection.ts +30 -0
package/packages/db/src/index.ts +1 -0
package/packages/db/src/repositories.ts +109 -63
package/packages/db/src/schema.ts +118 -0
package/packages/exporters/src/html.ts +9 -12
package/packages/mcp-tools/src/tools.ts +81 -0
package/packages/shared/src/enums.ts +39 -0
package/scripts/build-dist.mjs +27 -8
package/scripts/build-mcpb.mjs +60 -4
package/scripts/gen-og.mjs +86 -0
package/scripts/init.ts +32 -3
package/scripts/seed.ts +5 -5
package/scripts/shots-seed.ts +192 -0
package/scripts/shots.ts +89 -0
package/tsconfig.json +3 -1
package/dist/careermate.mcpb +0 -0
package/dist/mcp-smoke.err +0 -3
package/dist/mcpb-stage/README.md +0 -219
package/dist/mcpb-stage/dist/install-page/index.html +0 -434
package/dist/mcpb-stage/dist/install-page/style.css +0 -407
package/dist/mcpb-stage/dist/install-page/vercel.json +0 -20
package/dist/mcpb-stage/dist/mcp.mjs +0 -23704
package/dist/mcpb-stage/dist/public/app.js +0 -118
package/dist/mcpb-stage/dist/public/index.html +0 -41
package/dist/mcpb-stage/dist/public/lib.js +0 -282
package/dist/mcpb-stage/dist/public/pages/applications.js +0 -98
package/dist/mcpb-stage/dist/public/pages/documents.js +0 -446
package/dist/mcpb-stage/dist/public/pages/home.js +0 -263
package/dist/mcpb-stage/dist/public/pages/interview.js +0 -230
package/dist/mcpb-stage/dist/public/pages/jobs.js +0 -494
package/dist/mcpb-stage/dist/public/pages/profile.js +0 -576
package/dist/mcpb-stage/dist/public/pages/settings.js +0 -233
package/dist/mcpb-stage/dist/public/styles.css +0 -420
package/dist/mcpb-stage/manifest.json +0 -40
package/docs/INSTALL.md +0 -148
package/docs/INSTALL_AND_USAGE.md +0 -99
package/install-page/index.html +0 -474
package/install-page/style.css +0 -391
package/install-page/vercel.json +0 -20
/package/dist/{mcpb-stage/dist/public → install-page}/fonts/PretendardVariable.woff2 +0 -0

package/dist/install-page/index.html CHANGED Viewed

@@ -1,10 +1,46 @@
 <!DOCTYPE html>
-<html lang="ko" data-theme="">
+<html lang="ko" data-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- Resolve the saved theme before first paint (default: dark) to avoid a flash. -->
+  <script>
+    (function () {
+      try {
+        var t = window.localStorage.getItem('cf-theme');
+        document.documentElement.setAttribute('data-theme', t === 'light' || t === 'dark' ? t : 'dark');
+      } catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
+    })();
+  </script>
   <title>CareerMate — 내 AI를 커리어 비서로</title>
   <meta name="description" content="Claude Desktop·Claude Code·Codex 같은 로컬 AI 앱에 연결하세요. CareerMate가 이력서·자기소개서·지원 현황을 이 컴퓨터에만 저장하고 MCP로 당신의 AI에 연결합니다." />
+  <link rel="canonical" href="https://careermate.life/" />
+  <meta name="theme-color" content="#faf8f4" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#14130f" media="(prefers-color-scheme: dark)" />
+  <!-- icons -->
+  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="icon-180.png" />
+  <!-- Open Graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="CareerMate" />
+  <meta property="og:locale" content="ko_KR" />
+  <meta property="og:url" content="https://careermate.life/" />
+  <meta property="og:title" content="CareerMate — 내 AI를 커리어 비서로" />
+  <meta property="og:description" content="이력서·자기소개서·지원 현황을 이 컴퓨터 안에서 관리하세요. 분석·글쓰기는 평소 쓰던 AI가, 데이터 보관은 CareerMate가 맡습니다." />
+  <meta property="og:image" content="https://careermate.life/og.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:alt" content="CareerMate — 로컬 전용 MCP 커리어 워크스페이스" />
+  <!-- Twitter / X -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="CareerMate — 내 AI를 커리어 비서로" />
+  <meta name="twitter:description" content="이력서·자기소개서·지원 현황을 이 컴퓨터 안에서. 데이터는 외부로 나가지 않습니다." />
+  <meta name="twitter:image" content="https://careermate.life/og.png" />
+  <link rel="preload" href="fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin />
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
@@ -17,7 +53,9 @@
     <div class="nav__links">
       <a href="#how">동작 방식</a>
       <a href="#features">기능</a>
+      <a href="#preview">화면</a>
       <a href="#install">설치</a>
+      <a href="start.html">처음이세요?</a>
       <a href="#privacy">개인정보</a>
     </div>
     <div class="nav__actions">
@@ -35,7 +73,7 @@
     <header class="hero">
       <span class="pill-badge">
         <span class="pill-badge__dot" aria-hidden="true"></span>
-        로컬 전용 · 오픈소스 · Claude Desktop 원클릭
+        로컬 전용 · 무료
       </span>
       <h1 class="hero__title">
         내가 쓰던 <span class="accent">AI</span>를<br />
@@ -51,11 +89,11 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
           설치 방법 보기
         </a>
-        <a class="btn btn--ghost" href="#install-other">기타 MCP 클라이언트</a>
+        <a class="btn btn--ghost" href="start.html">처음이세요? — 내게 맞는 길 찾기</a>
       </div>
       <p class="hero__note">
-        CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>라, 내 컴퓨터의 프로그램을 실행할 수 있는 AI에서 동작합니다 — <strong>Claude Desktop · Claude Code · Codex</strong>.
+        CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude&nbsp;Desktop · Claude&nbsp;Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다.<br />
         설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
       </p>
     </header>
@@ -109,232 +147,285 @@
       </div>
     </section>
+    <!-- ======================================================= preview -->
+    <section id="preview" class="section">
+      <div class="section__head">
+        <span class="eyebrow">대시보드</span>
+        <h2>내 데이터를 <span class="accent">눈으로</span> 확인</h2>
+        <p>모든 기록은 이 컴퓨터의 대시보드(<code>127.0.0.1:4319</code>)에 모입니다. 아래는 실제 화면입니다.</p>
+      </div>
+      <div class="carousel" id="dash-carousel" role="group" aria-roledescription="캐러셀" aria-label="대시보드 화면 미리보기" tabindex="0">
+        <div class="carousel__viewport">
+          <div class="carousel__track" id="carousel-track">
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/home-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 홈 대시보드 — 지원 파이프라인과 할 일, 최근 활동" />
+                  <img class="shot__img shot__img--dark" src="shots/home-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 홈 대시보드 (다크) — 지원 파이프라인과 할 일, 최근 활동" />
+                </div>
+              </div>
+              <figcaption><strong>홈</strong> — 파이프라인·할 일·활동을 한 화면에</figcaption>
+            </figure>
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319/#/applications</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/applications-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 지원 현황 — 상태별로 정리된 지원 목록" />
+                  <img class="shot__img shot__img--dark" src="shots/applications-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 지원 현황 (다크) — 상태별로 정리된 지원 목록" />
+                </div>
+              </div>
+              <figcaption><strong>지원 현황</strong> — 8단계 상태별로 한눈에</figcaption>
+            </figure>
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319/#/jobs</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/jobs-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 채용공고 — 적합도 점수와 진행 상태" />
+                  <img class="shot__img shot__img--dark" src="shots/jobs-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 채용공고 (다크) — 적합도 점수와 진행 상태" />
+                </div>
+              </div>
+              <figcaption><strong>채용공고</strong> — 적합도 점수와 진행 상태</figcaption>
+            </figure>
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319/#/documents</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/documents-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 문서 — 자기소개서와 이력서를 버전과 함께 보관" />
+                  <img class="shot__img shot__img--dark" src="shots/documents-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 문서 (다크) — 자기소개서와 이력서를 버전과 함께 보관" />
+                </div>
+              </div>
+              <figcaption><strong>문서</strong> — 자기소개서·이력서를 버전과 함께</figcaption>
+            </figure>
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319/#/interview</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/interview-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 면접 준비 — 예상 질문과 STAR, 1분 자기소개" />
+                  <img class="shot__img shot__img--dark" src="shots/interview-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 면접 준비 (다크) — 예상 질문과 STAR, 1분 자기소개" />
+                </div>
+              </div>
+              <figcaption><strong>면접 준비</strong> — 예상 질문·STAR·1분 자기소개</figcaption>
+            </figure>
+            <figure class="slide">
+              <div class="browser">
+                <div class="browser__bar">
+                  <span class="browser__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                  <span class="browser__url">127.0.0.1:4319/#/settings</span>
+                </div>
+                <div class="browser__body">
+                  <img class="shot__img shot__img--light" src="shots/settings-light.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 설정 — 데이터 저장 위치와 연결 상태, 테마" />
+                  <img class="shot__img shot__img--dark" src="shots/settings-dark.png" width="1360" height="940" loading="lazy" decoding="async" alt="CareerMate 설정 (다크) — 데이터 저장 위치와 연결 상태, 테마" />
+                </div>
+              </div>
+              <figcaption><strong>설정</strong> — 데이터 위치·내보내기·테마</figcaption>
+            </figure>
+          </div>
+        </div>
+        <button class="carousel__arrow carousel__arrow--prev" id="carousel-prev" type="button" aria-label="이전 화면">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+        </button>
+        <button class="carousel__arrow carousel__arrow--next" id="carousel-next" type="button" aria-label="다음 화면">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+        </button>
+      </div>
+      <div class="carousel__dots" id="carousel-dots" role="tablist" aria-label="화면 선택"></div>
+    </section>
     <!-- ======================================================= install -->
     <section id="install" class="section">
       <div class="section__head">
         <span class="eyebrow">설치</span>
-        <h2>세 가지 AI 앱에 연결</h2>
-        <p>지원하는 로컬 AI 앱은 <strong>Claude Desktop · Claude Code · Codex</strong> 셋입니다. 어느 쪽이든 같은 코어(로컬 DB + 도구 24개)를 씁니다.</p>
+        <h2>내 <span class="accent">AI 앱</span>에 연결하기</h2>
+        <p>빈 폴더 잡고 <strong>한 문장이면 끝.</strong><br />
+        터미널이 익숙하면 한 줄 설치, 싫으면 파일 하나로 — <strong>무료도 있습니다.</strong></p>
       </div>
+      <a class="note" href="start.html" style="display:block;text-decoration:none;border-left-color:var(--accent);background:var(--accent-soft)">
+        <strong style="color:var(--text)">완전 처음이세요?</strong> 터미널·구독이 뭔지 몰라도 괜찮아요 — 쓰는 AI와 컴퓨터만 고르면 <strong>맞는 길 하나</strong>를 알려드려요. <strong style="color:var(--accent)">길 찾기 →</strong>
+      </a>
       <div class="note">
-        <strong>어떤 AI에서 되나요?</strong> CareerMate는 데이터를 내 컴퓨터에만 두는 <strong>로컬 MCP 도구</strong>입니다.
-        그래서 <strong>내 컴퓨터에서 실행되며 로컬 프로그램을 띄울 수 있는 AI</strong>에서 동작합니다 — Claude Desktop · Claude Code · Codex(그 외 Cursor·Cline·Windsurf 등도 가능).
-        ChatGPT·Gemini·Claude의 <strong>웹/모바일 앱</strong>은 클라우드에서 돌아 내 컴퓨터의 로컬 서버에 직접 연결할 수 없습니다(원격 URL 기반 MCP만 지원).
+        <strong>어떤 AI에서 되나요?</strong> 내 컴퓨터에서 프로그램을 띄울 수 있는 AI에서만 됩니다.<br />
+        <strong style="color:var(--accent)">✓</strong> Claude Desktop · Claude Code · Codex · Cursor 등 &nbsp;/&nbsp; <strong style="color:var(--warn-text)">✗</strong> ChatGPT·Gemini·Claude의 <strong>웹·모바일</strong>(클라우드라 내 컴퓨터 서버에 못 닿음).
       </div>
-      <!-- track 1 · Claude Desktop -->
-      <div class="track">
-        <div class="track__head">
-          <span class="track__tag">1 · Claude Desktop</span>
-          <h3>원클릭 <code>.mcpb</code> 설치</h3>
-          <p>터미널도, Node 설치도 필요 없습니다. 파일 하나를 더블클릭하면 끝납니다.</p>
-        </div>
-        <ol class="steps">
+      <!-- track 1 · 앱에서 직접 설치 (비개발자 메인) -->
+      <details class="acc" open>
+        <summary><span class="track__tag">추천 · 앱에서 한 문장</span> 내 AI 앱에서 빈 폴더 잡고 한 문장</summary>
+        <div class="acc__body">
+          <p class="track-desc"><strong>Claude 데스크톱의 “Code” 탭</strong>처럼 폴더를 잡고 작동하는 AI 앱이면 <strong>별도 터미널 없이</strong> 앱 안에서 끝납니다(Codex는 <strong>CLI</strong> 권장 — 데스크톱 앱은 등록이 사라지는 버그가 있어요). 작업 폴더 하나를 정하고 아래 문장만 주면, 에이전트가 공개 안내(<code>careermate.life/llms-install.txt</code>)를 읽고 <strong>그 폴더 안에</strong> 설치·연결합니다 — 데이터까지 그 폴더에 모여(<code>.cm/data</code>) 백업·이동이 폴더 하나로 끝.</p>
+          <ol class="steps">
           <li class="step">
             <div class="step__no">1</div>
             <div class="step__body">
-              <h3>설치 파일 받기</h3>
-              <p><code>careermate.mcpb</code> 파일이 필요합니다. <strong>(Release <code>v0.1.0</code>에 있으나 저장소가 비공개라 공개 다운로드 링크는 아직 없습니다.)</strong></p>
-              <!-- TODO: 저장소를 public으로 전환하면 https://github.com/osntak/CareerMate/releases/latest 의 .mcpb로 이 버튼을 활성화. 현재는 private repo라 공개 다운로드 불가. -->
-              <button class="btn btn--primary" type="button" disabled aria-disabled="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
-                careermate.mcpb 다운로드 (비공개 저장소)
-              </button>
-              <p class="step__tip">접근 권한이 있으면 Release <code>v0.1.0</code>에서 받고, 없으면 터미널에서 <code>npx -y careermate init</code>로 설치하거나 소스에서 <code>npm run build:mcpb</code>로 빌드하세요.</p>
+              <h3>앱 열고 빈 폴더 선택</h3>
+              <p><strong>Claude 데스크톱</strong> → <strong>Code</strong> 탭에서 빈 폴더를 작업 폴더로 선택(<strong>Pro 이상</strong> 구독, <strong>Windows는 Git 먼저</strong>). <strong>Codex</strong>는 빈 폴더에서 <code>codex</code>(CLI, <strong>ChatGPT Plus 이상</strong>)로 실행하세요 — <strong>데스크톱 앱은 현재 등록이 사라지는 버그</strong>(openai/codex#24718)가 있어 권하지 않습니다.</p>
             </div>
           </li>
           <li class="step">
             <div class="step__no">2</div>
             <div class="step__body">
-              <h3>더블클릭으로 설치</h3>
-              <p>내려받은 <code>careermate.mcpb</code>를 더블클릭하면 Claude Desktop이 설치 창을 엽니다. <strong>설치</strong>를 누르세요.
-                (또는 Claude Desktop → <strong>Settings → Extensions</strong>에 파일을 끌어다 놓아도 됩니다.)</p>
+              <h3>이 문장 붙여넣기</h3>
+              <div class="code">
+                <button class="copy-btn" type="button" data-copy-target="code-prompt-agent">복사</button>
+                <pre id="code-prompt-agent">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre>
+              </div>
+              <p class="step__tip">준비물은 <strong>Node.js 22.5 이상</strong> 하나뿐. 없으면 에이전트가 <strong>먼저 확인하고</strong> 설치를 도와줍니다. 데이터는 작업 폴더의 <code>.cm/data</code>에만 저장됩니다. (Codex CLI는 설치 단계에서 네트워크 허용을 한 번 물을 수 있어요 — 허용하면 됩니다.)</p>
             </div>
           </li>
           <li class="step">
             <div class="step__no">3</div>
             <div class="step__body">
-              <h3>재시작하고 확인</h3>
-              <p>Claude Desktop을 완전히 종료했다 다시 켜세요. 그다음 Claude에게
-                <strong>“<code>get_onboarding_status</code> 호출해서 연결됐는지 확인해줘”</strong>라고 말해 결과가 돌아오면 정상입니다.</p>
+              <h3>재시작 후 확인</h3>
+              <p>AI 앱을 완전히 종료했다 다시 켜고(처음 한 번 승인을 물으면 허용), <strong>“<code>get_onboarding_status</code> 호출해서 확인해줘”</strong>로 점검하세요. Codex는 <code>/mcp</code>로도 확인됩니다.</p>
             </div>
           </li>
-        </ol>
-        <p class="step__tip">Claude Desktop이 Node를 내장하므로 따로 설치할 게 없습니다. 드물게 내장 Node가 22.5 미만이라 설치가 막히면 아래 <a href="#install-other">터미널 방식</a>을 쓰세요.</p>
-      </div>
-      <!-- track 2 · Claude Code -->
-      <div class="track">
-        <div class="track__head">
-          <span class="track__tag">2 · Claude Code</span>
-          <h3>CareerMate 폴더에서 한 문장으로</h3>
-          <p>루트 <code>CLAUDE.md</code>가 설치 안내 역할을 합니다. 폴더를 열고 아래 문장만 말하세요.</p>
+          </ol>
         </div>
-        <ol class="steps">
+      </details>
+      <!-- track 2 · npx 한 줄 -->
+      <details class="acc">
+        <summary><span class="track__tag">터미널 · 한 줄 설치</span> npx 한 줄로 자동 연결</summary>
+        <div class="acc__body">
+          <p class="track-desc">준비물은 <strong>Node.js 22.5 이상</strong> 하나. 감지된 AI 앱(Claude Desktop·Codex·Cursor)의 MCP 설정에 CareerMate를 자동 등록합니다.</p>
+          <ol class="steps">
           <li class="step">
             <div class="step__no">1</div>
             <div class="step__body">
-              <h3>CareerMate 폴더에서 Claude Code 열기</h3>
-              <p>CareerMate 폴더에서 <code>claude</code>를 실행한 뒤, 아래 문장을 그대로 입력합니다. Claude가 <code>INSTALL.md</code>를 따라 등록까지 진행합니다.</p>
+              <h3>한 줄 실행</h3>
+              <p>터미널(Windows는 PowerShell)에 붙여넣고 실행하세요. 클론도 빌드도 필요 없습니다. <code>node --version</code>이 22.5 미만이면 <a href="https://nodejs.org/" rel="noopener" target="_blank">nodejs.org</a>에서 LTS를 먼저 설치하세요.</p>
               <div class="code">
-                <button class="copy-btn" type="button" data-copy-target="code-prompt-cc">복사</button>
-                <pre id="code-prompt-cc">CareerMate를 설치하고 설정해줘. INSTALL.md를 따라 진행해줘.</pre>
+                <button class="copy-btn" type="button" data-copy-target="code-npx">복사</button>
+                <pre id="code-npx">npx -y careermate init</pre>
               </div>
+              <p class="step__tip">특정 클라이언트만 등록하려면 <code>npx -y careermate init --client cursor</code>, 설정 JSON·명령만 보고 직접 붙여넣으려면 <code>npx -y careermate init --print</code>. (클라이언트: <code>claude</code> · <code>claude-code</code> · <code>codex</code> · <code>cursor</code>)</p>
             </div>
           </li>
           <li class="step">
             <div class="step__no">2</div>
             <div class="step__body">
-              <h3>한 번만 승인하고 확인</h3>
-              <p>Claude Code가 프로젝트 MCP 서버 등록을 <strong>한 번 승인</strong> 요청하면 허용하세요. 그다음 <strong>“<code>get_onboarding_status</code> 호출해서 연결됐는지 확인해줘”</strong>로 점검합니다.</p>
-            </div>
-          </li>
-        </ol>
-      </div>
-      <!-- track 3 · Codex -->
-      <div class="track">
-        <div class="track__head">
-          <span class="track__tag">3 · Codex</span>
-          <h3>CareerMate 폴더에서 한 문장으로</h3>
-          <p>루트 <code>AGENTS.md</code>가 설치 안내 역할을 합니다. 폴더를 열고 같은 문장을 말하세요.</p>
-        </div>
-        <ol class="steps">
-          <li class="step">
-            <div class="step__no">1</div>
-            <div class="step__body">
-              <h3>CareerMate 폴더에서 Codex 열기</h3>
-              <p>CareerMate 폴더에서 <code>codex</code>를 실행한 뒤, 아래 문장을 그대로 입력합니다. Codex가 <code>INSTALL.md</code>를 따라 등록까지 진행합니다.</p>
-              <div class="code">
-                <button class="copy-btn" type="button" data-copy-target="code-prompt-codex">복사</button>
-                <pre id="code-prompt-codex">CareerMate를 설치하고 설정해줘. INSTALL.md를 따라 진행해줘.</pre>
-              </div>
+              <h3>AI 앱 재시작 후 확인</h3>
+              <p>연결한 AI 앱을 <strong>완전히 종료했다 다시 켜고</strong>, <strong>“<code>get_onboarding_status</code> 호출해서 연결됐는지 확인해줘”</strong>라고 말해 결과가 돌아오면 정상입니다.</p>
             </div>
           </li>
           <li class="step">
-            <div class="step__no">2</div>
+            <div class="step__no">3</div>
             <div class="step__body">
-              <h3><code>/mcp</code>로 확인</h3>
-              <p>Codex 안에서 <code>/mcp</code> 명령으로 <code>careermate</code>가 등록됐는지 확인하고, <strong>“<code>get_onboarding_status</code> 호출해서 연결됐는지 확인해줘”</strong>로 점검합니다.</p>
+              <h3>대시보드 열기 (선택)</h3>
+              <p>내 데이터를 눈으로 보려면 <code>npx -y careermate start</code> 실행 → <code>http://127.0.0.1:4319</code>. 종료는 <kbd>Ctrl</kbd>+<kbd>C</kbd>.</p>
             </div>
           </li>
-        </ol>
-      </div>
-      <!-- track · 기타 MCP 클라이언트 (터미널) -->
-      <div class="track" id="install-other">
-        <div class="track__head">
-          <span class="track__tag">기타 MCP 클라이언트 · 터미널</span>
-          <h3>Cursor 등 — 직접 등록</h3>
-          <p>Cursor · Cline · Windsurf 등 다른 로컬 stdio MCP 클라이언트는 터미널에서 직접 설치·등록합니다.</p>
-        </div>
-        <div class="note">
-          <strong>준비물은 Node.js 22.5 이상</strong> 하나뿐입니다. 내장 SQLite를 쓰므로 별도 컴파일러·빌드 도구가 필요 없습니다.
-          터미널(Windows는 PowerShell)에서 <code>node --version</code>으로 확인하고, 낮으면
-          <a href="https://nodejs.org/" rel="noopener" target="_blank">nodejs.org</a>에서 LTS를 설치하세요.
+          </ol>
         </div>
+      </details>
-        <ol class="steps">
+      <!-- track 3 · .mcpb (데모트) -->
+      <details class="acc">
+        <summary><span class="track__tag">Claude Desktop · <code>.mcpb</code></span> 설치 파일로 추가 (터미널 없이)</summary>
+        <div class="acc__body">
+          <p class="track-desc">터미널·Node 없이 파일 하나로 끝나지만, <strong>Claude Desktop 내장 Node 버전에 따라 불안정할 수 있어요.</strong> 잘 안 되면 위 <strong>에이전트가 직접 설치</strong> 또는 <strong>터미널 한 줄</strong>을 쓰세요.</p>
+          <ol class="steps">
           <li class="step">
             <div class="step__no">1</div>
             <div class="step__body">
-              <h3>코드 받기</h3>
-              <p>CareerMate 저장소를 내려받습니다. (Git이 없으면 <em>Code → Download ZIP</em>으로 받아 압축을 풀어도 됩니다.)</p>
-              <!-- 저장소(osntak/CareerMate)는 현재 비공개라 clone에 접근 권한이 필요합니다. 권한이 없으면 위 npx 방식을 쓰세요. -->
-              <div class="code">
-                <button class="copy-btn" type="button" data-copy-target="code-clone">복사</button>
-                <pre id="code-clone">git clone https://github.com/osntak/CareerMate.git
-cd CareerMate</pre>
-              </div>
+              <h3>설치 파일 받기</h3>
+              <p>아래 버튼으로 <code>careermate.mcpb</code>를 내려받으세요. (약 2&nbsp;MB)</p>
+              <a class="btn btn--ghost" href="careermate.mcpb" download="careermate.mcpb">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+                careermate.mcpb 다운로드
+              </a>
             </div>
           </li>
           <li class="step">
             <div class="step__no">2</div>
             <div class="step__body">
-              <h3>설치</h3>
-              <p>의존성을 한 번만 설치합니다. (빌드 단계 없음) — 또는 클론 없이 <strong><code>npx -y careermate init</code></strong> 한 줄로도 등록됩니다(<code>careermate</code> npm 게시 완료).</p>
-              <div class="code">
-                <span class="code__label">프로젝트 폴더에서</span>
-                <button class="copy-btn" type="button" data-copy-target="code-install">복사</button>
-                <pre id="code-install">npm install</pre>
-              </div>
+              <h3>Claude Desktop 설정에서 추가</h3>
+              <p>Claude Desktop → <strong>Settings(설정) → Extensions(확장)</strong>에서 <strong>Advanced settings(고급 설정)</strong>를 누르면 나오는 <strong>Install extension…</strong>으로 내려받은 <code>careermate.mcpb</code>를 선택하세요.</p>
+              <p class="step__tip">더블클릭·드래그는 Windows에서 파일 연결이 안 잡혀 <strong>반응이 없을 수 있으니</strong>, 위 설정 메뉴 경로를 쓰세요. (확장을 처음 설치하면 <strong>Advanced settings</strong>를 먼저 눌러야 버튼이 보입니다.)</p>
             </div>
           </li>
           <li class="step">
             <div class="step__no">3</div>
             <div class="step__body">
-              <h3>AI 클라이언트에 자동 연결</h3>
-              <p>감지된 클라이언트의 MCP 설정에 CareerMate를 자동 등록하고, Claude Code 프로젝트 설정(<code>.mcp.json</code>)은 항상 함께 작성합니다. 끝나면 해당 AI 클라이언트를 <strong>완전히 종료했다 다시 켜세요.</strong></p>
-              <div class="code">
-                <span class="code__label">자동 등록</span>
-                <button class="copy-btn" type="button" data-copy-target="code-init">복사</button>
-                <pre id="code-init">npm run init</pre>
-              </div>
-              <p class="step__tip">직접 붙여넣고 싶다면 <code>npm run init -- --print</code>로 설정 JSON·명령만 출력해 클라이언트에 추가하세요. 특정 클라이언트만 등록하려면 <code>npm run init -- --client cursor</code>처럼 지정합니다. 클라이언트별 설정 파일 위치는 아래 탭을 참고하세요.</p>
-              <div class="tabs" role="tablist" aria-label="설정 파일 위치">
-                <button class="tab is-active" id="tab-claude" role="tab" aria-controls="panel-claude" aria-selected="true">Claude Desktop</button>
-                <button class="tab" id="tab-cursor" role="tab" aria-controls="panel-cursor" aria-selected="false" tabindex="-1">Cursor / 기타</button>
-              </div>
-              <div class="panel" id="panel-claude" role="tabpanel" aria-labelledby="tab-claude" data-active="true">
-                <p class="path-note">Windows: <code>%APPDATA%\Claude\claude_desktop_config.json</code> · macOS: <code>~/Library/Application Support/Claude/claude_desktop_config.json</code><br />(Settings → Developer → Edit Config 로도 열 수 있습니다. <code>npm run init</code>이 이 파일을 자동으로 수정합니다.)</p>
-              </div>
-              <div class="panel" id="panel-cursor" role="tabpanel" aria-labelledby="tab-cursor" data-active="false" hidden>
-                <p class="path-note">프로젝트별: <code>.cursor/mcp.json</code> · 전역: <code>~/.cursor/mcp.json</code> — Cursor·Cline·Windsurf 등 대부분 같은 형식입니다. 추가 후 클라이언트를 다시 시작하세요.</p>
-              </div>
+              <h3>재시작하고 확인</h3>
+              <p>Claude Desktop을 완전히 종료했다 다시 켜고, <strong>“<code>get_onboarding_status</code> 호출해서 확인해줘”</strong>로 점검하세요.</p>
             </div>
           </li>
-          <li class="step">
-            <div class="step__no">4</div>
-            <div class="step__body">
-              <h3>대시보드 실행 (선택)</h3>
-              <p>내 데이터를 눈으로 확인하려면 대시보드를 켭니다. 기본 주소는 <code>http://127.0.0.1:4319</code>, 포트가 사용 중이면 다음 빈 포트로 넘어갑니다. 종료는 <kbd>Ctrl</kbd>+<kbd>C</kbd>.</p>
-              <div class="code">
-                <span class="code__label">대시보드 시작</span>
-                <button class="copy-btn" type="button" data-copy-target="code-start">복사</button>
-                <pre id="code-start">npm start</pre>
-              </div>
+          </ol>
+        </div>
+      </details>
+      <!-- 수동 등록 · 설정 파일 위치 · 소스에서 실행 -->
+      <details class="acc" id="install-other">
+        <summary>수동 등록 · 설정 파일 위치 <span class="acc__hint">Cursor·Cline·Windsurf</span></summary>
+        <div class="acc__body">
+          <p class="step__tip"><code>npx -y careermate init --print</code>로 설정 JSON·명령만 출력해 클라이언트에 직접 추가할 수 있습니다. 클라이언트별 설정 파일 위치는 아래 탭을 참고하세요.</p>
+          <div class="tabs" role="tablist" aria-label="설정 파일 위치">
+            <button class="tab is-active" id="tab-claude" role="tab" aria-controls="panel-claude" aria-selected="true">Claude Desktop</button>
+            <button class="tab" id="tab-cursor" role="tab" aria-controls="panel-cursor" aria-selected="false" tabindex="-1">Cursor / 기타</button>
+          </div>
+          <div class="panel" id="panel-claude" role="tabpanel" aria-labelledby="tab-claude" data-active="true">
+            <p class="path-note">Windows: <code>%APPDATA%\Claude\claude_desktop_config.json</code> · macOS: <code>~/Library/Application Support/Claude/claude_desktop_config.json</code><br />(Settings → Developer → Edit Config 로도 열 수 있습니다. <code>npx -y careermate init</code>이 이 파일을 자동으로 수정합니다.)</p>
+          </div>
+          <div class="panel" id="panel-cursor" role="tabpanel" aria-labelledby="tab-cursor" data-active="false" hidden>
+            <p class="path-note">프로젝트별: <code>.cursor/mcp.json</code> · 전역: <code>~/.cursor/mcp.json</code> — Cursor·Cline·Windsurf 등 대부분 같은 형식입니다. 추가 후 클라이언트를 다시 시작하세요.</p>
+          </div>
+        </div>
+      </details>
+      <!-- 트러블슈팅 -->
+      <details class="acc">
+        <summary>문제가 생겼을 때 <span class="acc__hint">포트 충돌 · MCP 연결 실패 · 데이터 위치 · 초기화</span></summary>
+        <div class="acc__body">
+          <div class="trouble">
+            <div class="trouble__item">
+              <h4>포트가 이미 사용 중</h4>
+              <p>4319가 막히면 자동으로 다음 빈 포트로 옮겨갑니다. 터미널에 출력된 실제 주소를 사용하거나, <code>CAREERMATE_PORT</code> 환경변수로 고정하세요.</p>
             </div>
-          </li>
-          <li class="step">
-            <div class="step__no">5</div>
-            <div class="step__body">
-              <h3>연결 확인</h3>
-              <p>AI에게 <strong>“<code>get_onboarding_status</code>를 호출해서 연결됐는지 확인해줘”</strong>라고 말해 보세요. 결과가 돌아오면 정상입니다.</p>
+            <div class="trouble__item">
+              <h4>AI에 MCP가 연결되지 않음</h4>
+              <p>① <code>npx -y careermate init</code>이 정상 종료됐는지 ② <code>node --version</code>이 22.5 이상인지 ③ 클라이언트를 <strong>완전히 종료 후 재시작</strong>했는지 확인하세요. 폴더를 옮기거나 이름을 바꿨다면 등록된 경로가 깨질 수 있으니 init을 다시 실행하세요.</p>
             </div>
-          </li>
-        </ol>
-        <details class="acc">
-          <summary>문제가 생겼을 때 <span class="acc__hint">포트 충돌 · MCP 연결 실패 · 데이터 위치 · 초기화</span></summary>
-          <div class="acc__body">
-            <div class="trouble">
-              <div class="trouble__item">
-                <h4>포트가 이미 사용 중</h4>
-                <p>4319가 막히면 자동으로 다음 빈 포트로 옮겨갑니다. 터미널에 출력된 실제 주소를 사용하거나, <code>CAREERMATE_PORT</code> 환경변수로 고정하세요.</p>
-              </div>
-              <div class="trouble__item">
-                <h4>AI에 MCP가 연결되지 않음</h4>
-                <p>① <code>npm run init</code>이 정상 종료됐는지 ② <code>node --version</code>이 22.5 이상인지 ③ 클라이언트를 <strong>완전히 종료 후 재시작</strong>했는지 ④ <code>npm install</code>이 끝났는지 확인하세요. 폴더를 옮기거나 이름을 바꿨다면 등록된 경로가 깨지므로 <code>npm run init</code>을 다시 실행하세요.</p>
-              </div>
-              <div class="trouble__item">
-                <h4>상태 점검</h4>
-                <p>프로젝트 폴더에서 진단을 실행하면 Node 버전·데이터 폴더·DB 상태를 점검합니다.</p>
-                <div class="code">
-                  <button class="copy-btn" type="button" data-copy-target="code-doctor">복사</button>
-                  <pre id="code-doctor">npm run doctor</pre>
-                </div>
-              </div>
-              <div class="trouble__item">
-                <h4>데이터 위치 / 초기화</h4>
-                <p>기본 위치는 <code>~/.careermate/careermate.sqlite</code>(Windows: <code>%USERPROFILE%\.careermate</code>). <code>CAREERMATE_DATA_DIR</code>로 변경 가능. <code>npm run migrate</code>는 DB를 준비/업그레이드(반복 실행 안전)하고, 완전 초기화는 <code>careermate.sqlite</code> 삭제 후 재실행(백업 권장)입니다.</p>
+            <div class="trouble__item">
+              <h4>상태 점검</h4>
+              <p>진단을 실행하면 Node 버전·데이터 폴더·DB 상태를 점검합니다.</p>
+              <div class="code">
+                <button class="copy-btn" type="button" data-copy-target="code-doctor">복사</button>
+                <pre id="code-doctor">npx -y careermate doctor</pre>
               </div>
             </div>
+            <div class="trouble__item">
+              <h4>데이터 위치 / 초기화</h4>
+              <p>기본 위치는 <code>~/.careermate/careermate.sqlite</code>(Windows: <code>%USERPROFILE%\.careermate</code>). <code>CAREERMATE_DATA_DIR</code>로 변경 가능. 완전 초기화는 <code>careermate.sqlite</code> 삭제 후 재실행(백업 권장)입니다.</p>
+            </div>
           </div>
-        </details>
-      </div>
+        </div>
+      </details>
     </section>
     <!-- ======================================================= privacy -->
@@ -468,6 +559,57 @@ cd CareerMate</pre>
           try { window.localStorage.setItem('cf-theme', next); } catch (e) {}
         });
       }
+      // --- dashboard carousel (prev/next + dots + keyboard + swipe) -----
+      var carousel = document.getElementById('dash-carousel');
+      var track = document.getElementById('carousel-track');
+      if (carousel && track) {
+        var slides = Array.prototype.slice.call(track.children);
+        var prevBtn = document.getElementById('carousel-prev');
+        var nextBtn = document.getElementById('carousel-next');
+        var dotsWrap = document.getElementById('carousel-dots');
+        var idx = 0;
+        var captionOf = function (s) {
+          var f = s.querySelector('figcaption');
+          return f ? f.textContent.trim() : '';
+        };
+        var dots = slides.map(function (s, n) {
+          var b = document.createElement('button');
+          b.type = 'button'; b.className = 'carousel__dot';
+          b.setAttribute('role', 'tab');
+          b.setAttribute('aria-label', captionOf(s) || (n + 1) + '번째 화면');
+          b.addEventListener('click', function () { go(n); });
+          dotsWrap.appendChild(b);
+          return b;
+        });
+        function go(n) {
+          idx = Math.max(0, Math.min(slides.length - 1, n));
+          track.style.transform = 'translateX(' + (-idx * 100) + '%)';
+          dots.forEach(function (d, n2) {
+            var on = n2 === idx;
+            d.classList.toggle('is-active', on);
+            d.setAttribute('aria-selected', on ? 'true' : 'false');
+          });
+          slides.forEach(function (s, n2) { s.setAttribute('aria-hidden', n2 === idx ? 'false' : 'true'); });
+          if (prevBtn) prevBtn.disabled = idx === 0;
+          if (nextBtn) nextBtn.disabled = idx === slides.length - 1;
+        }
+        if (prevBtn) prevBtn.addEventListener('click', function () { go(idx - 1); });
+        if (nextBtn) nextBtn.addEventListener('click', function () { go(idx + 1); });
+        carousel.addEventListener('keydown', function (e) {
+          if (e.key === 'ArrowLeft') { e.preventDefault(); go(idx - 1); }
+          else if (e.key === 'ArrowRight') { e.preventDefault(); go(idx + 1); }
+        });
+        var x0 = null;
+        track.addEventListener('touchstart', function (e) { x0 = e.touches[0].clientX; }, { passive: true });
+        track.addEventListener('touchend', function (e) {
+          if (x0 === null) return;
+          var dx = e.changedTouches[0].clientX - x0;
+          if (Math.abs(dx) > 40) go(idx + (dx < 0 ? 1 : -1));
+          x0 = null;
+        });
+        go(0);
+      }
     })();
   </script>
 </body>