Skip to content

Commit 6f8fb0b

Browse files
Alal11Alal11
authored
Merge pull request #9 from PathFinder-bridge/refactor/8-ui-update
[REFACTOR] 홈 화면과 직무 체험 캐릭터 선택 UI 수정
2 parents 250c3e1 + c790df3 commit 6f8fb0b

13 files changed

Lines changed: 1748 additions & 625 deletions

File tree

‎src/components/HomePage/ChatSection.tsx‎

Lines changed: 259 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/HomePage/FeatureSection.tsx‎

Lines changed: 89 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,120 @@ interface Feature {
44
icon: React.ReactNode;
55
title: string;
66
description: string;
7+
color: string;
78
}
89

910
const FEATURES: Feature[] = [
1011
{
1112
icon: (
12-
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
13-
<svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
14-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
15-
</svg>
16-
</div>
13+
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
14+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
15+
</svg>
1716
),
1817
title: '직무 체험 게임',
19-
description: '간단한 퀘스트와 함께'
18+
description: '재미있는 퀘스트를 통해 다양한 IT 직무를 실제로 체험해보세요. 게임을 플레이하며 자연스럽게 자신의 적성을 발견할 수 있습니다.',
19+
color: 'slate'
2020
},
2121
{
2222
icon: (
23-
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
24-
<svg className="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
25-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
26-
</svg>
27-
</div>
23+
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
24+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
25+
</svg>
2826
),
29-
title: 'AI기반 직무 추천',
30-
description: '사용자 선호도 반영'
27+
title: 'AI 기반 직무 추천',
28+
description: '고도화된 AI 알고리즘이 당신의 선호도, 성향, 경험을 종합적으로 분석하여 최적의 IT 직무를 추천해드립니다.',
29+
color: 'blue'
3130
},
3231
{
3332
icon: (
34-
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
35-
<svg className="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
36-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7" />
37-
</svg>
38-
</div>
33+
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
34+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7" />
35+
</svg>
3936
),
40-
title: '직무 로드맵',
41-
description: '체계적인 성장 경로'
37+
title: '맞춤형 로드맵',
38+
description: '목표 직무까지의 체계적인 학습 경로를 제시합니다. 단계별 스킬 습득 가이드와 실무 프로젝트로 확실한 성장을 보장합니다.',
39+
color: 'indigo'
4240
}
4341
];
4442

43+
const getColorClasses = (color: string) => {
44+
const colorMap = {
45+
slate: {
46+
bg: 'bg-slate-100',
47+
text: 'text-slate-700',
48+
border: 'border-slate-200',
49+
gradient: 'from-slate-500/10 to-slate-600/20'
50+
},
51+
blue: {
52+
bg: 'bg-blue-100',
53+
text: 'text-blue-700',
54+
border: 'border-blue-200',
55+
gradient: 'from-blue-500/10 to-blue-600/20'
56+
},
57+
indigo: {
58+
bg: 'bg-indigo-100',
59+
text: 'text-indigo-700',
60+
border: 'border-indigo-200',
61+
gradient: 'from-indigo-500/10 to-indigo-600/20'
62+
}
63+
};
64+
return colorMap[color as keyof typeof colorMap] || colorMap.slate;
65+
};
66+
4567
export const FeatureSection: React.FC = () => {
4668
return (
47-
<section className="py-20 px-4 sm:px-6 lg:px-8">
48-
<div className="max-w-7xl mx-auto">
49-
<div className="text-center mb-16">
50-
<h2 className="text-3xl font-bold text-gray-900 mb-4">
51-
PathFinder의 특별한 기능
69+
<section className="min-h-screen flex items-center py-24 px-4 sm:px-6 lg:px-8 relative bg-gradient-to-br from-slate-50 to-blue-50">
70+
{/* Background decoration */}
71+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-gray-50/50 to-transparent"></div>
72+
73+
<div className="relative max-w-7xl mx-auto">
74+
{/* Section header */}
75+
<div className="text-center mb-20">
76+
<span className="inline-block px-4 py-2 bg-slate-100 text-slate-800 text-sm font-medium rounded-full mb-6 border border-slate-200">
77+
✨ 특별한 기능들
78+
</span>
79+
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-10 mt-4 space-y-4">
80+
<div>PathFinder만의</div>
81+
<div className="text-slate-700">특별한 경험</div>
5282
</h2>
53-
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
54-
AI 기술과 게임화된 경험을 통해 여러분에게 최적화된 직무를 찾아드립니다
83+
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed break-keep">
84+
단순한 설문조사를 넘어, AI와 게임화를 결합한 혁신적인 방식으로
85+
당신에게 딱 맞는 IT 커리어를 찾아드립니다.
5586
</p>
5687
</div>
5788

58-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
59-
{FEATURES.map((feature, index) => (
60-
<div
61-
key={index}
62-
className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100"
63-
>
64-
<div className="flex flex-col items-center text-center">
65-
{feature.icon}
66-
<h3 className="text-xl font-semibold text-gray-900 mt-6 mb-3">
67-
{feature.title}
68-
</h3>
69-
<p className="text-gray-600 leading-relaxed">
70-
{feature.description}
71-
</p>
89+
{/* Features grid */}
90+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
91+
{FEATURES.map((feature, index) => {
92+
const colors = getColorClasses(feature.color);
93+
return (
94+
<div
95+
key={index}
96+
className="group relative bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-gray-200 transform hover:-translate-y-2"
97+
>
98+
{/* Background gradient */}
99+
<div className={`absolute inset-0 bg-gradient-to-br ${colors.gradient} rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500`}></div>
100+
101+
<div className="relative z-10">
102+
{/* Icon */}
103+
<div className={`w-16 h-16 ${colors.bg} ${colors.text} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
104+
{feature.icon}
105+
</div>
106+
107+
{/* Content */}
108+
<h3 className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-gray-800 transition-colors duration-300">
109+
{feature.title}
110+
</h3>
111+
<p className="text-gray-600 leading-relaxed text-lg group-hover:text-gray-700 transition-colors duration-300 break-keep">
112+
{feature.description}
113+
</p>
114+
115+
{/* Decorative element */}
116+
<div className={`absolute top-6 right-6 w-12 h-12 ${colors.bg} rounded-full opacity-20 group-hover:opacity-40 transition-opacity duration-300`}></div>
117+
</div>
72118
</div>
73-
</div>
74-
))}
119+
);
120+
})}
75121
</div>
76122
</div>
77123
</section>

0 commit comments

Comments
 (0)