Skip to content

Commit c2d875e

Browse files
sungjun-lee2sungjun-lee2
committed
web-preview 상단에 간단한 가이드 추가
1 parent 2d6c396 commit c2d875e

File tree

5 files changed

+250
-1
lines changed

5 files changed

+250
-1
lines changed

‎web-preview/src/App.css‎

Lines changed: 155 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,18 @@
2929
margin: 0 auto;
3030
display: grid;
3131
grid-template-columns: 1fr 1fr;
32-
grid-template-rows: auto auto;
32+
grid-template-rows: auto auto auto;
3333
gap: 2rem;
3434
grid-template-areas:
35+
"info info"
3536
"config preview"
3637
"examples examples";
3738
}
3839

40+
.info-section {
41+
grid-area: info;
42+
}
43+
3944
.config-section {
4045
grid-area: config;
4146
}
@@ -52,6 +57,7 @@
5257
.app-main {
5358
grid-template-columns: 1fr;
5459
grid-template-areas:
60+
"info"
5561
"config"
5662
"preview"
5763
"examples";
@@ -349,3 +355,151 @@
349355
.example-apply-btn:active {
350356
transform: translateY(1px);
351357
}
358+
359+
/* Info Box Styles */
360+
.info-box {
361+
background: white;
362+
border-radius: 12px;
363+
padding: 2rem;
364+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
365+
border-left: 6px solid #667eea;
366+
}
367+
368+
.info-box-header {
369+
display: flex;
370+
justify-content: space-between;
371+
align-items: center;
372+
margin-bottom: 1rem;
373+
flex-wrap: wrap;
374+
gap: 1rem;
375+
}
376+
377+
.info-box-header h2 {
378+
margin: 0;
379+
color: #333;
380+
font-size: 1.8rem;
381+
}
382+
383+
.info-box-badges {
384+
display: flex;
385+
gap: 0.5rem;
386+
}
387+
388+
.badge {
389+
background: #667eea;
390+
color: white;
391+
padding: 0.25rem 0.75rem;
392+
border-radius: 12px;
393+
font-size: 0.8rem;
394+
font-weight: 500;
395+
}
396+
397+
.info-box-description {
398+
color: #555;
399+
line-height: 1.6;
400+
margin: 0 0 1.5rem 0;
401+
}
402+
403+
.info-box-section {
404+
margin-bottom: 1.5rem;
405+
}
406+
407+
.info-box-section h3 {
408+
margin: 0 0 1rem 0;
409+
color: #374151;
410+
font-size: 1.2rem;
411+
font-weight: 600;
412+
}
413+
414+
.code-block {
415+
position: relative;
416+
background: #1e293b;
417+
border-radius: 6px;
418+
padding: 0.75rem 1rem;
419+
margin-bottom: 0.75rem;
420+
display: flex;
421+
align-items: center;
422+
justify-content: space-between;
423+
gap: 1rem;
424+
}
425+
426+
.code-block code {
427+
color: #e2e8f0;
428+
font-family: 'Monaco', 'Courier New', monospace;
429+
font-size: 0.85rem;
430+
word-break: break-all;
431+
}
432+
433+
.copy-button {
434+
background: rgba(255, 255, 255, 0.1);
435+
border: 1px solid rgba(255, 255, 255, 0.2);
436+
color: white;
437+
padding: 0.25rem 0.5rem;
438+
border-radius: 4px;
439+
cursor: pointer;
440+
font-size: 1rem;
441+
transition: all 0.2s;
442+
flex-shrink: 0;
443+
}
444+
445+
.copy-button:hover {
446+
background: rgba(255, 255, 255, 0.2);
447+
transform: scale(1.05);
448+
}
449+
450+
.copy-button:active {
451+
transform: scale(0.95);
452+
}
453+
454+
.info-box-links {
455+
display: flex;
456+
gap: 1rem;
457+
flex-wrap: wrap;
458+
}
459+
460+
.info-link {
461+
display: inline-flex;
462+
align-items: center;
463+
gap: 0.5rem;
464+
padding: 0.75rem 1.25rem;
465+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
466+
color: white;
467+
text-decoration: none;
468+
border-radius: 8px;
469+
font-weight: 500;
470+
transition: all 0.2s;
471+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
472+
}
473+
474+
.info-link:hover {
475+
transform: translateY(-2px);
476+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
477+
}
478+
479+
.info-link:active {
480+
transform: translateY(0);
481+
}
482+
483+
.link-icon {
484+
font-size: 1.2rem;
485+
}
486+
487+
@media (max-width: 768px) {
488+
.info-box {
489+
padding: 1.5rem;
490+
}
491+
492+
.info-box-header {
493+
flex-direction: column;
494+
align-items: flex-start;
495+
}
496+
497+
.info-box-links {
498+
flex-direction: column;
499+
}
500+
501+
.info-link {
502+
width: 100%;
503+
justify-content: center;
504+
}
505+
}

‎web-preview/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useMemo } from 'react';
22
import { generatePreview, type CommitFromBranchConfig } from './core';
3+
import InfoBox from './components/InfoBox';
34
import ConfigForm from './components/ConfigForm';
45
import PreviewPanel from './components/PreviewPanel';
56
import ExampleScenarios from './components/ExampleScenarios';
@@ -29,6 +30,10 @@ function App() {
2930
</header>
3031

3132
<main className="app-main">
33+
<div className="info-section">
34+
<InfoBox />
35+
</div>
36+
3237
<div className="config-section">
3338
<ConfigForm
3439
config={config}

‎web-preview/src/components/InfoBox.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
3+
const InfoBox: React.FC = () => {
4+
const version = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.4.0';
5+
6+
return (
7+
<div className="info-box">
8+
<div className="info-box-header">
9+
<h2>📦 Commit From Branch</h2>
10+
<div className="info-box-badges">
11+
<span className="badge">v{version}</span>
12+
<span className="badge">MIT License</span>
13+
</div>
14+
</div>
15+
16+
<p className="info-box-description">
17+
Flexible commit message templating from branch name for Husky's prepare-commit-msg hook.
18+
Automatically extracts Jira-style tickets and supports customizable templates.
19+
</p>
20+
21+
<div className="info-box-section">
22+
<h3>📥 Installation</h3>
23+
<div className="code-block">
24+
<code>npm install --save-dev commit-from-branch husky@^9.0.0</code>
25+
<button
26+
className="copy-button"
27+
onClick={() => navigator.clipboard.writeText('npm install --save-dev commit-from-branch husky@^9.0.0')}
28+
title="Copy to clipboard"
29+
>
30+
📋
31+
</button>
32+
</div>
33+
<div className="code-block">
34+
<code>npx husky init && npx cfb init</code>
35+
<button
36+
className="copy-button"
37+
onClick={() => navigator.clipboard.writeText('npx husky init && npx cfb init')}
38+
title="Copy to clipboard"
39+
>
40+
📋
41+
</button>
42+
</div>
43+
</div>
44+
45+
<div className="info-box-links">
46+
<a
47+
href="https://github.com/253eosam/commit-from-branch"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="info-link"
51+
>
52+
<span className="link-icon">🔗</span>
53+
<span>GitHub Repository</span>
54+
</a>
55+
<a
56+
href="https://www.npmjs.com/package/commit-from-branch"
57+
target="_blank"
58+
rel="noopener noreferrer"
59+
className="info-link"
60+
>
61+
<span className="link-icon">📦</span>
62+
<span>NPM Registry</span>
63+
</a>
64+
<a
65+
href="https://253eosam.github.io/commit-from-branch/"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
className="info-link"
69+
>
70+
<span className="link-icon">📖</span>
71+
<span>Documentation</span>
72+
</a>
73+
</div>
74+
</div>
75+
);
76+
};
77+
78+
export default InfoBox;

‎web-preview/src/vite-env.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
/// <reference types="vite/client" />
2+
3+
declare const __APP_VERSION__: string

‎web-preview/vite.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { defineConfig } from 'vite'
22
import react from '@vitejs/plugin-react'
3+
import { readFileSync } from 'fs'
4+
import { resolve } from 'path'
5+
6+
// Read version from parent package.json
7+
const parentPackageJson = JSON.parse(
8+
readFileSync(resolve(__dirname, '../package.json'), 'utf-8')
9+
)
310

411
// https://vite.dev/config/
512
export default defineConfig({
@@ -9,4 +16,7 @@ export default defineConfig({
916
outDir: 'dist',
1017
sourcemap: true,
1118
},
19+
define: {
20+
__APP_VERSION__: JSON.stringify(parentPackageJson.version),
21+
},
1222
})

0 commit comments

Comments
 (0)