careermate 0.0.4 → 0.0.5
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.
- package/AGENTS.md +3 -0
- package/INSTALL.md +2 -1
- package/README.md +8 -6
- package/dist/doctor.mjs +345 -65
- package/dist/mcp.mjs +344 -64
- package/dist/public/lib.js +1 -0
- package/dist/public/pages/settings.js +160 -14
- package/dist/public/styles.css +10 -2
- package/dist/site/index.html +88 -188
- package/dist/site/landing.js +109 -0
- package/dist/site/start.html +97 -94
- package/dist/site/style.css +169 -63
- package/dist/web.mjs +369 -32
- package/docs/FAQ.md +3 -2
- package/docs/MCP_TOOLS.md +10 -3
- package/docs/WORKFLOWS.md +5 -5
- package/package.json +2 -2
- package/packages/core/src/services.ts +5 -5
- package/packages/db/src/repositories.ts +0 -0
- package/packages/mcp-tools/src/bridge.ts +194 -13
- package/packages/mcp-tools/src/tools.ts +145 -17
- package/packages/mcp-tools/src/update.ts +1 -1
- package/packages/prompts/src/system.ts +10 -2
- package/packages/workflows/src/definitions.ts +2 -2
package/dist/site/index.html
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
} catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
|
|
13
13
|
})();
|
|
14
14
|
</script>
|
|
15
|
-
<title>CareerMate —
|
|
16
|
-
<meta name="description" content="
|
|
15
|
+
<title>CareerMate — 말로 시키는 커리어 정리</title>
|
|
16
|
+
<meta name="description" content="Codex·Claude 같은 AI에게 이력서 등록, 공고 분석, 자기소개서 작성, 지원 현황 관리를 말로 시키세요. CareerMate는 결과를 이 컴퓨터 안에 정리합니다." />
|
|
17
17
|
<link rel="canonical" href="https://careermate.life/" />
|
|
18
18
|
<meta name="google-site-verification" content="MfU5uwl1RNXKklsJhXz2hPCRytjLpCjCXSa2ls5JQH0" />
|
|
19
19
|
<meta name="theme-color" content="#faf8f4" media="(prefers-color-scheme: light)" />
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<meta property="og:site_name" content="CareerMate" />
|
|
29
29
|
<meta property="og:locale" content="ko_KR" />
|
|
30
30
|
<meta property="og:url" content="https://careermate.life/" />
|
|
31
|
-
<meta property="og:title" content="CareerMate —
|
|
31
|
+
<meta property="og:title" content="CareerMate — 말로 시키는 커리어 정리" />
|
|
32
32
|
<meta property="og:description" content="이력서·자기소개서·지원 현황을 이 컴퓨터 안에서 관리하세요. 분석·글쓰기는 평소 쓰던 AI가, 데이터 보관은 CareerMate가 맡습니다." />
|
|
33
33
|
<meta property="og:image" content="https://careermate.life/og.png" />
|
|
34
34
|
<meta property="og:image:width" content="1200" />
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
<!-- Twitter / X -->
|
|
39
39
|
<meta name="twitter:card" content="summary_large_image" />
|
|
40
|
-
<meta name="twitter:title" content="CareerMate —
|
|
40
|
+
<meta name="twitter:title" content="CareerMate — 말로 시키는 커리어 정리" />
|
|
41
41
|
<meta name="twitter:description" content="이력서·자기소개서·지원 현황을 이 컴퓨터 안에서. 데이터는 외부로 나가지 않습니다." />
|
|
42
42
|
<meta name="twitter:image" content="https://careermate.life/og.png" />
|
|
43
43
|
|
|
@@ -55,11 +55,10 @@
|
|
|
55
55
|
<span class="nav__name">CareerMate</span>
|
|
56
56
|
</a>
|
|
57
57
|
<div class="nav__links">
|
|
58
|
-
<a href="#how"
|
|
59
|
-
<a href="#features"
|
|
58
|
+
<a href="#how">사용 예시</a>
|
|
59
|
+
<a href="#features">할 수 있는 일</a>
|
|
60
60
|
<a href="#preview">화면</a>
|
|
61
61
|
<a href="#install">설치</a>
|
|
62
|
-
<a href="start.html">처음이세요?</a>
|
|
63
62
|
<a href="#privacy">개인정보</a>
|
|
64
63
|
</div>
|
|
65
64
|
<div class="nav__actions">
|
|
@@ -68,7 +67,6 @@
|
|
|
68
67
|
<svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
69
68
|
<svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
|
70
69
|
</button>
|
|
71
|
-
<a class="btn btn--ghost" href="#install">설치하기</a>
|
|
72
70
|
</div>
|
|
73
71
|
</nav>
|
|
74
72
|
|
|
@@ -79,84 +77,87 @@
|
|
|
79
77
|
<div class="hero__main">
|
|
80
78
|
<span class="pill-badge">
|
|
81
79
|
<span class="pill-badge__dot" aria-hidden="true"></span>
|
|
82
|
-
로컬 전용 ·
|
|
80
|
+
로컬 전용 · 가입 없음
|
|
83
81
|
</span>
|
|
84
82
|
<h1 class="hero__title">
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
AI에게 말하면<br />
|
|
84
|
+
커리어가 정리됩니다
|
|
87
85
|
</h1>
|
|
88
86
|
<p class="hero__lede">
|
|
89
|
-
|
|
87
|
+
이력서, 공고, 자기소개서, 지원 현황까지. 말하면 내 컴퓨터에 저장됩니다.
|
|
90
88
|
</p>
|
|
91
89
|
|
|
92
90
|
<ul class="trust-strip" aria-label="안심 포인트">
|
|
93
91
|
<li>내 컴퓨터에만 저장</li>
|
|
94
92
|
<li>외부 업로드 없음</li>
|
|
95
93
|
<li>별도 가입 없음</li>
|
|
96
|
-
<li>API 키 불필요</li>
|
|
97
|
-
<li>언제든 삭제</li>
|
|
98
94
|
</ul>
|
|
99
95
|
|
|
100
96
|
<div class="hero__cta">
|
|
101
|
-
<a class="btn btn--primary" href="start.html"
|
|
102
|
-
<a class="btn btn--ghost" href="#
|
|
103
|
-
|
|
104
|
-
바로 설치 방법 보기
|
|
97
|
+
<a class="btn btn--primary" href="start.html">처음 시작하기</a>
|
|
98
|
+
<a class="btn btn--ghost" href="#preview">
|
|
99
|
+
데모 보기
|
|
105
100
|
</a>
|
|
106
101
|
</div>
|
|
107
102
|
|
|
108
|
-
<p class="hero__note">
|
|
109
|
-
CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude Desktop · Claude Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다. 설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
|
|
110
|
-
</p>
|
|
111
103
|
</div>
|
|
112
104
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<span class="
|
|
119
|
-
내 AI 앱
|
|
105
|
+
<aside class="hero__demo command-demo" data-command-demo aria-label="CareerMate 사용 예시">
|
|
106
|
+
<div class="command-card">
|
|
107
|
+
<div class="command-card__head">
|
|
108
|
+
<span class="command-card__dots" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
109
|
+
<span class="command-card__title">내 AI 앱</span>
|
|
110
|
+
<span class="command-card__status" data-demo-status>문서 등록</span>
|
|
120
111
|
</div>
|
|
121
|
-
<div class="
|
|
122
|
-
<
|
|
123
|
-
<
|
|
112
|
+
<div class="command-card__file">
|
|
113
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z"/><path d="M14 2v5h5"/><path d="M9 13h6"/><path d="M9 17h4"/></svg>
|
|
114
|
+
<span data-demo-file>자기소개서.pdf</span>
|
|
115
|
+
<strong data-demo-file-state>업로드됨</strong>
|
|
124
116
|
</div>
|
|
125
|
-
<div class="
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
117
|
+
<div class="command-card__body">
|
|
118
|
+
<div class="command-card__bubble command-card__bubble--user">
|
|
119
|
+
<span>나</span>
|
|
120
|
+
<p data-demo-command>이 자기소개서 읽고 CareerMate에 등록해줘.</p>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="command-card__bubble command-card__bubble--ai">
|
|
123
|
+
<span>AI</span>
|
|
124
|
+
<p data-demo-result>문서를 읽고 자기소개서 버전으로 저장했어요. 핵심 경험 4개도 함께 정리했습니다.</p>
|
|
125
|
+
</div>
|
|
133
126
|
</div>
|
|
127
|
+
<ol class="command-card__steps" aria-label="예시 선택">
|
|
128
|
+
<li><button class="is-active" type="button" data-demo-step="0" aria-current="true">문서</button></li>
|
|
129
|
+
<li><button type="button" data-demo-step="1">대시보드</button></li>
|
|
130
|
+
<li><button type="button" data-demo-step="2">공고</button></li>
|
|
131
|
+
<li><button type="button" data-demo-step="3">자소서</button></li>
|
|
132
|
+
<li><button type="button" data-demo-step="4">면접</button></li>
|
|
133
|
+
</ol>
|
|
134
|
+
<div class="command-card__progress" aria-hidden="true"><span></span></div>
|
|
134
135
|
</div>
|
|
135
|
-
<p class="hero__demo-note"
|
|
136
|
+
<p class="hero__demo-note">명령어를 외우지 않아도 됩니다. 그냥 이렇게 말하면 돼요.</p>
|
|
136
137
|
</aside>
|
|
137
138
|
</header>
|
|
138
139
|
|
|
139
140
|
<!-- ========================================================== how -->
|
|
140
141
|
<section id="how" class="section">
|
|
141
142
|
<div class="section__head">
|
|
142
|
-
<h2
|
|
143
|
-
<p
|
|
143
|
+
<h2>AI에게 시키고, CareerMate에서 확인하세요</h2>
|
|
144
|
+
<p>어려운 설정 이름을 기억할 필요 없이, 평소 대화하듯 커리어 작업을 이어가면 됩니다.</p>
|
|
144
145
|
</div>
|
|
145
146
|
<div class="cards-3">
|
|
146
147
|
<article class="feature">
|
|
147
148
|
<span class="feature__no">01</span>
|
|
148
|
-
<h3
|
|
149
|
-
<p
|
|
149
|
+
<h3>파일을 주고 말하기</h3>
|
|
150
|
+
<p>이력서나 자기소개서를 올리고 “읽고 등록해줘”라고 말하세요.</p>
|
|
150
151
|
</article>
|
|
151
152
|
<article class="feature">
|
|
152
153
|
<span class="feature__no">02</span>
|
|
153
|
-
<h3
|
|
154
|
-
<p
|
|
154
|
+
<h3>공고를 붙이고 분석</h3>
|
|
155
|
+
<p>채용공고 링크나 텍스트를 주면 내 경력과 맞춰 강점·보완점을 정리합니다.</p>
|
|
155
156
|
</article>
|
|
156
157
|
<article class="feature">
|
|
157
158
|
<span class="feature__no">03</span>
|
|
158
|
-
<h3
|
|
159
|
-
<p
|
|
159
|
+
<h3>대시보드에서 확인</h3>
|
|
160
|
+
<p>자소서 버전, 지원 상태, 면접 준비 자료가 한 곳에 모입니다.</p>
|
|
160
161
|
</article>
|
|
161
162
|
</div>
|
|
162
163
|
</section>
|
|
@@ -164,16 +165,16 @@
|
|
|
164
165
|
<!-- ====================================================== features -->
|
|
165
166
|
<section id="features" class="section">
|
|
166
167
|
<div class="section__head">
|
|
167
|
-
<h2
|
|
168
|
-
<p
|
|
168
|
+
<h2>말로 시킬 수 있는 일</h2>
|
|
169
|
+
<p>처음 정리한 경력은 다음 공고와 다음 자기소개서에도 계속 이어집니다.</p>
|
|
169
170
|
</div>
|
|
170
171
|
<div class="checks">
|
|
171
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong
|
|
172
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>채용공고
|
|
173
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong
|
|
174
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong
|
|
175
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>지원
|
|
176
|
-
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>면접 준비</strong><span
|
|
172
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>이력서·자기소개서 등록</strong><span>파일을 읽고 경력·프로젝트·스킬로 정리.</span></div></div>
|
|
173
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>채용공고 저장</strong><span>링크나 텍스트에서 회사·직무·요건 추출.</span></div></div>
|
|
174
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>내 경력과 공고 비교</strong><span>강점, 빈칸, 강조할 키워드를 한 번에.</span></div></div>
|
|
175
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>공고별 자기소개서</strong><span>초안과 수정본을 버전으로 쌓아 비교.</span></div></div>
|
|
176
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>지원 현황 관리</strong><span>작성 중, 지원 완료, 서류 합격, 면접까지.</span></div></div>
|
|
177
|
+
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><div><strong>면접 준비</strong><span>예상 질문, STAR 답변, 1분 자기소개 초안.</span></div></div>
|
|
177
178
|
</div>
|
|
178
179
|
</section>
|
|
179
180
|
|
|
@@ -181,10 +182,9 @@
|
|
|
181
182
|
<section id="preview" class="section">
|
|
182
183
|
<div class="section__head section__head--center">
|
|
183
184
|
<h2>내 데이터를 눈으로 확인</h2>
|
|
184
|
-
<p
|
|
185
|
+
<p>지원 현황과 문서를 한 화면에서 확인하세요.</p>
|
|
185
186
|
<div class="section__cta">
|
|
186
187
|
<a class="btn btn--primary" href="demo/">데모 둘러보기 →</a>
|
|
187
|
-
<span class="section__cta-note">샘플 데이터로 클릭해 보는 미리보기 · 설치·로그인 불필요</span>
|
|
188
188
|
</div>
|
|
189
189
|
</div>
|
|
190
190
|
|
|
@@ -290,139 +290,42 @@
|
|
|
290
290
|
<!-- ======================================================= install -->
|
|
291
291
|
<section id="install" class="section">
|
|
292
292
|
<div class="section__head section__head--center">
|
|
293
|
-
<h2
|
|
294
|
-
<p
|
|
295
|
-
아래는 명령 위주 빠른 설치예요 — <strong>처음이면 ↓ ‘길 찾기’</strong>에서 단계별로 안내받으세요.</p>
|
|
293
|
+
<h2>설치는 세 단계면 충분합니다</h2>
|
|
294
|
+
<p>앱을 열고, 아래 문장을 붙여넣고, 연결됐는지만 확인하세요.</p>
|
|
296
295
|
</div>
|
|
297
296
|
|
|
298
|
-
<
|
|
299
|
-
<
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
297
|
+
<div class="quick-start" aria-label="빠른 설치 순서">
|
|
298
|
+
<article class="quick-start__step">
|
|
299
|
+
<span>1</span>
|
|
300
|
+
<h3>AI 앱 선택</h3>
|
|
301
|
+
<p>Claude나 Codex처럼 폴더를 열 수 있는 AI를 고릅니다.</p>
|
|
302
|
+
<a href="start.html">내게 맞는 길 보기</a>
|
|
303
|
+
</article>
|
|
304
|
+
<article class="quick-start__step">
|
|
305
|
+
<span>2</span>
|
|
306
|
+
<h3>프롬프트 붙여넣기</h3>
|
|
307
|
+
<p>아래 문장을 AI 대화창에 그대로 넣으면 설치 안내를 읽고 연결을 진행합니다.</p>
|
|
308
|
+
</article>
|
|
309
|
+
<article class="quick-start__step">
|
|
310
|
+
<span>3</span>
|
|
311
|
+
<h3>연결 확인</h3>
|
|
312
|
+
<p>앱을 다시 열고 “커리어메이트 연결됐는지 확인해줘”라고 말합니다.</p>
|
|
313
|
+
</article>
|
|
305
314
|
</div>
|
|
306
315
|
|
|
307
|
-
|
|
308
|
-
<
|
|
309
|
-
<
|
|
310
|
-
<
|
|
311
|
-
|
|
312
|
-
<ol class="steps">
|
|
313
|
-
<li class="step">
|
|
314
|
-
<div class="step__no">1</div>
|
|
315
|
-
<div class="step__body">
|
|
316
|
-
<h3>앱 열고 빈 폴더 선택</h3>
|
|
317
|
-
<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> 권장하지 않습니다.</p>
|
|
318
|
-
</div>
|
|
319
|
-
</li>
|
|
320
|
-
<li class="step">
|
|
321
|
-
<div class="step__no">2</div>
|
|
322
|
-
<div class="step__body">
|
|
323
|
-
<h3>이 문장 붙여넣기</h3>
|
|
324
|
-
<p class="paste-note">💬 위에서 연 <strong>AI 앱의 대화창에</strong> 붙여넣으세요 — 터미널 명령이 아니에요. 이 문장은 공개 안내 페이지만 읽어 설치하며, <strong>당신의 이력서·개인정보는 외부로 올라가지 않아요.</strong></p>
|
|
325
|
-
<div class="code">
|
|
326
|
-
<button class="copy-btn" type="button" data-copy-target="code-prompt-agent">복사</button>
|
|
327
|
-
<pre id="code-prompt-agent">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre>
|
|
328
|
-
</div>
|
|
329
|
-
<p class="step__tip">준비물은 <strong>Node.js 22.5 이상</strong> 하나뿐. 없으면 에이전트가 <strong>먼저 확인하고</strong> 설치를 도와줍니다. 데이터는 작업 폴더의 <code>.cm/data</code>에만 저장됩니다. (Codex CLI는 설치 단계에서 네트워크 허용을 한 번 물을 수 있어요 — 허용하면 됩니다.)</p>
|
|
330
|
-
</div>
|
|
331
|
-
</li>
|
|
332
|
-
<li class="step">
|
|
333
|
-
<div class="step__no">3</div>
|
|
334
|
-
<div class="step__body">
|
|
335
|
-
<h3>재시작 후 확인</h3>
|
|
336
|
-
<p>AI 앱을 완전히 종료했다 다시 켜고(처음 한 번 승인을 물으면 허용), <strong>“커리어메이트 연결됐는지 확인해줘”</strong>라고 말해 보세요. Codex는 <code>/mcp</code>로도 확인됩니다.</p>
|
|
337
|
-
</div>
|
|
338
|
-
</li>
|
|
339
|
-
</ol>
|
|
340
|
-
</div>
|
|
341
|
-
</details>
|
|
342
|
-
|
|
343
|
-
<!-- track 2 · npx 한 줄 -->
|
|
344
|
-
<details class="acc">
|
|
345
|
-
<summary><span class="track__tag">터미널 · 한 줄 설치</span> npx 한 줄로 자동 연결</summary>
|
|
346
|
-
<div class="acc__body">
|
|
347
|
-
<p class="track-desc">준비물은 <strong>Node.js 22.5 이상</strong> 하나. 감지된 AI 앱(Claude Desktop·Codex·Cursor)의 MCP 설정에 CareerMate를 자동 등록합니다.</p>
|
|
348
|
-
<ol class="steps">
|
|
349
|
-
<li class="step">
|
|
350
|
-
<div class="step__no">1</div>
|
|
351
|
-
<div class="step__body">
|
|
352
|
-
<h3>한 줄 실행</h3>
|
|
353
|
-
<p>터미널(Windows는 PowerShell)에 붙여넣고 실행하세요. 클론도 빌드도 필요 없습니다. <code>node --version</code>이 22.5 미만이면 <a href="https://nodejs.org/" rel="noopener" target="_blank">nodejs.org</a>에서 LTS를 먼저 설치하세요.</p>
|
|
354
|
-
<div class="code">
|
|
355
|
-
<button class="copy-btn" type="button" data-copy-target="code-npx">복사</button>
|
|
356
|
-
<pre id="code-npx">npx -y careermate init</pre>
|
|
357
|
-
</div>
|
|
358
|
-
<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>) <strong>참고:</strong> Cursor는 MCP가 <strong>Pro 기능</strong>으로 표기돼 무료(Hobby)에선 제한될 수 있어요.</p>
|
|
359
|
-
</div>
|
|
360
|
-
</li>
|
|
361
|
-
<li class="step">
|
|
362
|
-
<div class="step__no">2</div>
|
|
363
|
-
<div class="step__body">
|
|
364
|
-
<h3>AI 앱 재시작 후 확인</h3>
|
|
365
|
-
<p>연결한 AI 앱을 <strong>완전히 종료했다 다시 켜고</strong>, <strong>“커리어메이트 연결됐는지 확인해줘”</strong>라고 말해 결과가 돌아오면 정상입니다.</p>
|
|
366
|
-
</div>
|
|
367
|
-
</li>
|
|
368
|
-
<li class="step">
|
|
369
|
-
<div class="step__no">3</div>
|
|
370
|
-
<div class="step__body">
|
|
371
|
-
<h3>대시보드 열기 (선택)</h3>
|
|
372
|
-
<p>내 데이터를 눈으로 보려면 <code>npx -y careermate start</code> 실행 → <code>http://127.0.0.1:4319</code>. 종료는 <kbd>Ctrl</kbd>+<kbd>C</kbd>.</p>
|
|
373
|
-
</div>
|
|
374
|
-
</li>
|
|
375
|
-
</ol>
|
|
376
|
-
</div>
|
|
377
|
-
</details>
|
|
316
|
+
<p class="install-footnote install-footnote--label">AI에게 보낼 문장</p>
|
|
317
|
+
<div class="code code--install">
|
|
318
|
+
<button class="copy-btn" type="button" data-copy-target="code-prompt-quick">복사</button>
|
|
319
|
+
<pre id="code-prompt-quick">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 설치가 끝나면 앱 재시작 방법과 대시보드 주소(http://127.0.0.1:4319), 이력서를 등록하는 방법도 알려줘.</pre>
|
|
320
|
+
</div>
|
|
378
321
|
|
|
379
|
-
|
|
380
|
-
<
|
|
381
|
-
<
|
|
382
|
-
<
|
|
383
|
-
|
|
322
|
+
<p class="install-footnote install-footnote--label">터미널 명령어</p>
|
|
323
|
+
<div class="code code--install">
|
|
324
|
+
<button class="copy-btn" type="button" data-copy-target="code-npx-quick">복사</button>
|
|
325
|
+
<pre id="code-npx-quick">npx -y careermate init</pre>
|
|
326
|
+
</div>
|
|
384
327
|
|
|
385
|
-
|
|
386
|
-
<button class="tab is-active" id="tab-claude" role="tab" aria-controls="panel-claude" aria-selected="true">Claude Desktop</button>
|
|
387
|
-
<button class="tab" id="tab-cursor" role="tab" aria-controls="panel-cursor" aria-selected="false" tabindex="-1">Cursor / 기타</button>
|
|
388
|
-
</div>
|
|
389
|
-
<div class="panel" id="panel-claude" role="tabpanel" aria-labelledby="tab-claude" data-active="true">
|
|
390
|
-
<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>
|
|
391
|
-
</div>
|
|
392
|
-
<div class="panel" id="panel-cursor" role="tabpanel" aria-labelledby="tab-cursor" data-active="false" hidden>
|
|
393
|
-
<p class="path-note">프로젝트별: <code>.cursor/mcp.json</code> · 전역: <code>~/.cursor/mcp.json</code> — Cursor·Cline·Windsurf 등 대부분 같은 형식입니다. 추가 후 클라이언트를 다시 시작하세요.</p>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
</details>
|
|
397
|
-
|
|
398
|
-
<!-- 트러블슈팅 -->
|
|
399
|
-
<details class="acc">
|
|
400
|
-
<summary>문제가 생겼을 때 <span class="acc__hint">포트 충돌 · MCP 연결 실패 · 데이터 위치 · 초기화</span></summary>
|
|
401
|
-
<div class="acc__body">
|
|
402
|
-
<div class="trouble">
|
|
403
|
-
<div class="trouble__item">
|
|
404
|
-
<h4>포트가 이미 사용 중</h4>
|
|
405
|
-
<p>4319가 막히면 자동으로 다음 빈 포트로 옮겨갑니다. 터미널에 출력된 실제 주소를 사용하거나, <code>CAREERMATE_PORT</code> 환경변수로 고정하세요.</p>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="trouble__item">
|
|
408
|
-
<h4>AI에 MCP가 연결되지 않음</h4>
|
|
409
|
-
<p>① <code>npx -y careermate init</code>이 정상 종료됐는지 ② <code>node --version</code>이 22.5 이상인지 ③ 클라이언트를 <strong>완전히 종료 후 재시작</strong>했는지 확인하세요. 폴더를 옮기거나 이름을 바꿨다면 등록된 경로가 깨질 수 있으니 init을 다시 실행하세요.</p>
|
|
410
|
-
</div>
|
|
411
|
-
<div class="trouble__item">
|
|
412
|
-
<h4>상태 점검</h4>
|
|
413
|
-
<p>진단을 실행하면 Node 버전·데이터 폴더·DB 상태를 점검합니다.</p>
|
|
414
|
-
<div class="code">
|
|
415
|
-
<button class="copy-btn" type="button" data-copy-target="code-doctor">복사</button>
|
|
416
|
-
<pre id="code-doctor">npx -y careermate doctor</pre>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
<div class="trouble__item">
|
|
420
|
-
<h4>데이터 위치 / 초기화</h4>
|
|
421
|
-
<p>기본 위치는 <code>~/.careermate/careermate.sqlite</code>(Windows: <code>%USERPROFILE%\.careermate</code>). <code>CAREERMATE_DATA_DIR</code>로 변경 가능. 완전 초기화는 <code>careermate.sqlite</code> 삭제 후 재실행(백업 권장)입니다.</p>
|
|
422
|
-
</div>
|
|
423
|
-
</div>
|
|
424
|
-
</div>
|
|
425
|
-
</details>
|
|
328
|
+
<p class="install-footnote">웹·모바일 AI 앱은 내 컴퓨터의 로컬 도구를 직접 열 수 없어 연결 대상이 아닙니다.</p>
|
|
426
329
|
</section>
|
|
427
330
|
|
|
428
331
|
<!-- ======================================================= privacy -->
|
|
@@ -439,9 +342,6 @@
|
|
|
439
342
|
<li><strong>내보내기</strong> 자기소개서 등을 <code>~/.careermate/exports</code>로</li>
|
|
440
343
|
<li><strong>삭제·관리</strong> 대시보드 <strong>설정(Settings)</strong>에서 직접</li>
|
|
441
344
|
</ul>
|
|
442
|
-
<p class="privacy-card__note">
|
|
443
|
-
위 내용은 <strong>설치하는 앱</strong> 이야기예요. 지금 보고 계신 <strong>이 소개 웹사이트</strong>는 방문 통계를 보려고 쿠키 없는 익명 분석(Vercel Analytics)만 사용하며, 여기엔 어떤 커리어 데이터도 포함되지 않습니다.
|
|
444
|
-
</p>
|
|
445
345
|
</div>
|
|
446
346
|
</div>
|
|
447
347
|
</section>
|
package/dist/site/landing.js
CHANGED
|
@@ -51,4 +51,113 @@
|
|
|
51
51
|
try { window.localStorage.setItem('careermate-theme', next); window.localStorage.removeItem('cf-theme'); } catch (e) {}
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
// --- hero command demo ------------------------------------------
|
|
56
|
+
var demo = document.querySelector('[data-command-demo]');
|
|
57
|
+
if (demo) {
|
|
58
|
+
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
59
|
+
var scenes = [
|
|
60
|
+
{
|
|
61
|
+
status: '문서 등록',
|
|
62
|
+
file: '자기소개서.pdf',
|
|
63
|
+
fileState: '업로드됨',
|
|
64
|
+
command: '이 자기소개서 읽고 CareerMate에 등록해줘.',
|
|
65
|
+
result: '문서를 읽고 자기소개서 버전으로 저장했어요. 핵심 경험 4개도 함께 정리했습니다.'
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
status: '대시보드',
|
|
69
|
+
file: '127.0.0.1:4319',
|
|
70
|
+
fileState: '열림',
|
|
71
|
+
command: '대시보드 열어줘. 지금 지원 현황 보고 싶어.',
|
|
72
|
+
result: '대시보드를 열었어요. 작성 중 2건, 지원 완료 3건, 면접 준비 1건이 있습니다.'
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
status: '공고 분석',
|
|
76
|
+
file: 'recruit.example.com/product-designer',
|
|
77
|
+
fileState: '링크',
|
|
78
|
+
command: '이 공고 분석해서 내 경력에 맞춰줘.',
|
|
79
|
+
result: '요구 역량과 내 경험을 비교했어요. 강조하면 좋은 키워드는 협업, 실험, 정량 개선입니다.'
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
status: '자소서 초안',
|
|
83
|
+
file: 'Product Designer · A사',
|
|
84
|
+
fileState: '공고',
|
|
85
|
+
command: '이 공고용 자기소개서 초안 써줘. 너무 딱딱하지 않게.',
|
|
86
|
+
result: '공고에 맞춘 초안을 만들고 v1로 저장했어요. 첫 문단은 지원 동기가 바로 보이게 다듬었습니다.'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
status: '면접 준비',
|
|
90
|
+
file: 'A사 · 서류 합격',
|
|
91
|
+
fileState: '상태 변경',
|
|
92
|
+
command: '서류 합격했어. 이 공고 기준으로 면접 준비해줘.',
|
|
93
|
+
result: '예상 질문 12개, STAR 답변 뼈대, 1분 자기소개 초안을 준비해 저장했습니다.'
|
|
94
|
+
}
|
|
95
|
+
];
|
|
96
|
+
var statusEl = demo.querySelector('[data-demo-status]');
|
|
97
|
+
var fileEl = demo.querySelector('[data-demo-file]');
|
|
98
|
+
var fileStateEl = demo.querySelector('[data-demo-file-state]');
|
|
99
|
+
var commandEl = demo.querySelector('[data-demo-command]');
|
|
100
|
+
var resultEl = demo.querySelector('[data-demo-result]');
|
|
101
|
+
var stepEls = Array.prototype.slice.call(demo.querySelectorAll('[data-demo-step]'));
|
|
102
|
+
var progressEl = demo.querySelector('.command-card__progress span');
|
|
103
|
+
var sceneIndex = 0;
|
|
104
|
+
var rotateTimer = null;
|
|
105
|
+
var transitionTimer = null;
|
|
106
|
+
var settleTimer = null;
|
|
107
|
+
|
|
108
|
+
function paintScene(index) {
|
|
109
|
+
var scene = scenes[index];
|
|
110
|
+
if (!scene) return;
|
|
111
|
+
if (statusEl) statusEl.textContent = scene.status;
|
|
112
|
+
if (fileEl) fileEl.textContent = scene.file;
|
|
113
|
+
if (fileStateEl) fileStateEl.textContent = scene.fileState;
|
|
114
|
+
if (commandEl) commandEl.textContent = scene.command;
|
|
115
|
+
if (resultEl) resultEl.textContent = scene.result;
|
|
116
|
+
sceneIndex = index;
|
|
117
|
+
stepEls.forEach(function (step, n) {
|
|
118
|
+
var active = n === index;
|
|
119
|
+
step.classList.toggle('is-active', active);
|
|
120
|
+
if (active) step.setAttribute('aria-current', 'true');
|
|
121
|
+
else step.removeAttribute('aria-current');
|
|
122
|
+
});
|
|
123
|
+
if (progressEl && !reduceMotion) {
|
|
124
|
+
progressEl.style.animation = 'none';
|
|
125
|
+
progressEl.offsetHeight;
|
|
126
|
+
progressEl.style.animation = '';
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
function scheduleNextScene() {
|
|
131
|
+
if (reduceMotion) return;
|
|
132
|
+
window.clearTimeout(rotateTimer);
|
|
133
|
+
rotateTimer = window.setTimeout(function () {
|
|
134
|
+
showScene((sceneIndex + 1) % scenes.length, true);
|
|
135
|
+
}, 4500);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function showScene(index, animate) {
|
|
139
|
+
if (index < 0 || index >= scenes.length) return;
|
|
140
|
+
window.clearTimeout(rotateTimer);
|
|
141
|
+
window.clearTimeout(transitionTimer);
|
|
142
|
+
window.clearTimeout(settleTimer);
|
|
143
|
+
if (!animate || index === sceneIndex) {
|
|
144
|
+
demo.classList.remove('is-changing');
|
|
145
|
+
paintScene(index);
|
|
146
|
+
scheduleNextScene();
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
demo.classList.add('is-changing');
|
|
150
|
+
transitionTimer = window.setTimeout(function () {
|
|
151
|
+
paintScene(index);
|
|
152
|
+
settleTimer = window.setTimeout(function () { demo.classList.remove('is-changing'); }, 40);
|
|
153
|
+
scheduleNextScene();
|
|
154
|
+
}, 180);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
stepEls.forEach(function (step, n) {
|
|
158
|
+
step.addEventListener('click', function () { showScene(n, true); });
|
|
159
|
+
});
|
|
160
|
+
paintScene(0);
|
|
161
|
+
scheduleNextScene();
|
|
162
|
+
}
|
|
54
163
|
})();
|