feat: 홈 페이지에서 사용하는 컴포넌트 구현 및 섹션 분리하여 홈 페이지 구현

Author: GamjaIsMine02

app/(with-sidebar)/(home)/page.tsx

@@ -1,9 +1,28 @@
-// export default function Home() {
-//   return <div>home</div>;
-// }
+import BottomSection from '@/components/home/BottomSection';
+import Card from '@/components/home/Card';
+import GraphSection from '@/components/home/GraphSection';
+import HeaderSection from '@/components/home/HeaderSection';
+import ProfileSection from '@/components/home/ProfileSection';
 
 const Page = () => {
-  return <div>home</div>;
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-6 font-sans md:p-[137px]">
+      {/* 1. Header */}
+      <HeaderSection />
+
+      {/* 2-1. ProfileSection */}
+      <ProfileSection className="grid grid-cols-1 gap-6 md:grid-cols-3" />
+
+      {/* 2-2. GraphSection */}
+      <GraphSection></GraphSection>
+
+      {/* 2-3. BottomSection */}
+      <BottomSection className="grid grid-cols-1 gap-6 md:grid-cols-2" />
+
+      {/* 3. ButtonSection */}
+      {/* 버튼 두개 만드쇼 */}
+    </div>
+  );
 };
 
 export default Page;

components/home/BottomSection.tsx

@@ -0,0 +1,16 @@
+import Card from './Card';
+
+interface BottomSectionProps {
+  className?: string;
+}
+
+const BottomSection = ({ className }: BottomSectionProps) => {
+  return (
+    <div className={className}>
+      <Card title="오늘 할 일">대충 할 일</Card>
+      <Card title="다가오는 일정">대충 일정</Card>
+    </div>
+  );
+};
+
+export default BottomSection;

components/home/Card.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+// 흰 바탕의 카드
+
+interface CardProps {
+  children: ReactNode; // 카드 내부 내용들
+  className?: string; // 추가 스타일링
+  title?: string; // 좌측 상단 제목이 있는 경우
+}
+
+const Card = ({ children, className = '', title }: CardProps) => {
+  return (
+    <div
+      className={`border-border bg-surface rounded-[10px] p-6 shadow-sm ${className}`}
+    >
+      {title && (
+        <h2 className="mb-4 text-lg font-bold text-gray-900">{title}</h2>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Card;

components/home/GraphSection.tsx

@@ -0,0 +1,15 @@
+import Card from './Card';
+
+interface GraphSectionProps {
+  className?: string;
+}
+
+const GraphSection = ({ className }: GraphSectionProps) => {
+  return (
+    <div className={className}>
+      <Card title="학습 기록">대충 잔디그래프</Card>
+    </div>
+  );
+};
+
+export default GraphSection;

components/home/HeaderSection.tsx

@@ -0,0 +1,16 @@
+interface HeaderSectionProps {
+  className?: string;
+}
+
+const HeaderSection = ({ className }: HeaderSectionProps) => {
+  return (
+    <div className={className}>
+      <h1 className="flex items-center gap-2 text-3xl font-bold text-gray-900">
+        안녕하세요 <span className="text-3xl">🖐️</span>
+      </h1>
+      <p className="mt-1 text-gray-500">오늘도 성장하는 하루를 만들어보세요!</p>
+    </div>
+  );
+};
+
+export default HeaderSection;

components/home/ProfileSection.tsx

@@ -0,0 +1,40 @@
+import Card from './Card';
+
+interface ProfileSectionProps {
+  className?: string;
+}
+
+const ProfileSection = ({ className }: ProfileSectionProps) => {
+  return (
+    <div className={className}>
+      <div className="md:col-span-2">
+        <Card className="flex items-center gap-4">
+          <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100">
+            <span className="text-3xl">😈</span>
+          </div>
+
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">이건무</h3>
+            <p className="text-sm text-gray-500">@mnmnnmm324</p>
+            <div className="mt-1 flex gap-2 text-xs font-medium">
+              <span className="text-purple-600">38193일 연속</span>
+              <span className="text-gray-400">|</span>
+              <span className="text-gray-600">12개 TIL</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <div className="md:col-span-1">
+        <Card className="flex h-full flex-col items-center justify-center text-center">
+          <div className="mb-1 text-4xl font-bold text-purple-600">3/5</div>
+          <div className="text-sm font-medium text-gray-500">
+            오늘의 목표 달성률
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSection;