Merge pull request #16 from DeveloperBlog-Devflow/feature/landing-page

refactor: 컴포넌트명 변경

Author: moo1677

app/page.tsx

@@ -1,14 +1,14 @@
-import { Header } from '@/components/landing/LandingHeader';
-import { Hero } from '@/components/landing/LandingHeroSection';
-import { Feature } from '@/components/landing/LandingFeature';
-import { Demo } from '@/components/landing/LandingPreview';
+import { LandingHeader } from '@/components/landing/LandingHeader';
+import { HeroSection } from '@/components/landing/HeroSection';
+import { FeatureList } from '@/components/landing/FeatureList';
+import { LandingPreview } from '@/components/landing/LandingPreview';
 export default function Home() {
   return (
     <div className="bg-background h-full space-y-60">
-      <Header />
-      <Hero />
-      <Feature />
-      <Demo />
+      <LandingHeader />
+      <HeroSection />
+      <FeatureList />
+      <LandingPreview />
     </div>
   );
 }

components/landing/FeatureCard.tsx

@@ -6,7 +6,7 @@ type FeatureCardProps = {
 };
 export function FeatureCard({ title, description, icon }: FeatureCardProps) {
   return (
-    <div className="rounded-xl bg-white p-6 pb-2  shadow-sm">
+    <div className="rounded-xl bg-white p-6 pb-2 shadow-sm">
       <div className="mb-2">
         <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-lg">
           {icon}

components/landing/LandingContent.tsx components/landing/FeatureContent.tsxcomponents/landing/LandingContent.tsx renamed to components/landing/FeatureContent.tsx

@@ -19,16 +19,18 @@ const ITEMS = [
   },
 ];
 
-export function Contents() {
+export function FeatureContent() {
   return (
     <ul className="space-y-6">
       {ITEMS.map((item) => (
         <li key={item.title}>
           <div className="flex gap-3">
-            <FiCheckCircle className="text-primary text-2xl "  />
-            <p className="font-medium text-xl">{item.title}</p>
+            <FiCheckCircle className="text-primary text-2xl" />
+            <p className="text-xl font-medium">{item.title}</p>
           </div>
-          <p className="text-text-sub mt-1 text-l text-left pl-10">{item.description}</p>
+          <p className="text-text-sub text-l mt-1 pl-10 text-left">
+            {item.description}
+          </p>
         </li>
       ))}
     </ul>

components/landing/LandingFeature.tsx components/landing/FeatureList.tsxcomponents/landing/LandingFeature.tsx renamed to components/landing/FeatureList.tsx

@@ -31,9 +31,9 @@ const FEATURES = [
       'GitHub 스타일 잔디 그래프로 학습 활동을 한눈에 확인하고 동기부여를 받아보세요.',
   },
 ];
-export function Feature() {
+export function FeatureList() {
   return (
-    <div className="h-full flex flex-col items-center justify-center space-y-3 text-center">
+    <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
       <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
         ⚙️ 핵심 기능
       </p>
@@ -42,7 +42,7 @@ export function Feature() {
       <div className="text-xl font-light">
         <h2>체계적인 학습과 지속적인 성장을 돕는 강력한 기능들</h2>
       </div>
-      <div className="mt-15 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 px-20">
+      <div className="mt-15 grid grid-cols-1 gap-6 px-20 sm:grid-cols-2 lg:grid-cols-4">
         {FEATURES.map((feature) => (
           <FeatureCard key={feature.title} {...feature} />
         ))}

components/landing/LandingHeroSection.tsx components/landing/HeroSection.tsxcomponents/landing/LandingHeroSection.tsx renamed to components/landing/HeroSection.tsx

@@ -1,6 +1,6 @@
-export function Hero() {
+export function HeroSection() {
   return (
-    <div className="pt-30 flex flex-col items-center justify-center space-y-3 text-center">
+    <div className="flex flex-col items-center justify-center space-y-3 pt-30 text-center">
       <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
         🚀 개발자를 위한 성장 플랫폼
       </p>

components/landing/LandingHeader.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-export function Header() {
+export function LandingHeader() {
   return (
     <div className="fixed flex w-full items-center justify-between bg-white">
       <h1 className="flex items-center gap-2 px-10 py-2 text-3xl font-bold">

components/landing/LandingPreview.tsx

@@ -1,15 +1,15 @@
 import Image from 'next/image';
-import { Contents } from '@/components/landing/LandingContent';
-export function Demo() {
+import { FeatureContent } from '@/components/landing/FeatureContent';
+export function LandingPreview() {
   return (
-    <div className="mt-30 pb-50 flex h-full flex-col items-center justify-center space-y-3 text-center">
+    <div className="mt-30 flex h-full flex-col items-center justify-center space-y-3 pb-50 text-center">
       <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
         🤔 왜 DevFlow를 사용할까요?
       </p>
       <h1 className="text-4xl font-bold">체계적인 학습으로</h1>
       <h1 className="text-primary text-4xl font-bold">더 빠른 성장</h1>
       <div className="mt-10 flex gap-50">
-        <Contents />
+        <FeatureContent />
         <Image
           src="/PreviewImage.png"
           alt="DevFlow 미리보기"