Merge pull request #28 from DeveloperBlog-Devflow/feature/home-page

refactor: 홈 페이지 컴포넌트 간격 수정 및 변수명 변경

Author: GamjaIsMine02

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

@@ -6,18 +6,18 @@ import ButtonSection from '@/components/home/ButtonSection';
 
 const Page = () => {
   return (
-    <div className="bg-background flex min-h-screen flex-col gap-6 font-sans md:p-[137px]">
+    <div className="bg-background flex min-h-screen flex-col gap-4 font-sans md:p-[137px]">
       {/* 1. Header */}
       <HeaderSection />
 
       {/* 2-1. ProfileSection */}
-      <ProfileSection className="grid grid-cols-1 gap-6 md:grid-cols-3" />
+      <ProfileSection className="grid grid-cols-1 gap-4 md:grid-cols-3" />
 
       {/* 2-2. GraphSection */}
       <GraphSection></GraphSection>
 
       {/* 2-3. BottomSection */}
-      <BottomSection className="grid grid-cols-1 gap-6 md:grid-cols-2" />
+      <BottomSection className="grid grid-cols-1 gap-4 md:grid-cols-2" />
 
       {/* 3. ButtonSection */}
       <ButtonSection />

components/home/BottomSection.tsx

@@ -9,14 +9,14 @@ interface BottomSectionProps {
 }
 
 const TODAY_DUMMY = [
-  { id: 't1', text: 'React Hooks 정리', checked: false },
-  { id: 't2', text: 'GSAP ScrollTrigger 복습', checked: true },
-  { id: 't3', text: '알고리즘 1문제 풀기', checked: false },
+  { id: 't1', text: 'React Hooks 정리', isChecked: false },
+  { id: 't2', text: 'GSAP ScrollTrigger 복습', isChecked: true },
+  { id: 't3', text: '알고리즘 1문제 풀기', isChecked: false },
 ];
 
 const UPCOMING_DUMMY = [
-  { id: 'u1', text: 'Next.js App Router 정리', checked: false },
-  { id: 'u2', text: '포트폴리오 리팩토링', checked: false },
+  { id: 'u1', text: 'Next.js App Router 정리', isChecked: false },
+  { id: 'u2', text: '포트폴리오 리팩토링', isChecked: false },
 ];
 
 export default function BottomSection({ className }: BottomSectionProps) {
@@ -25,13 +25,17 @@ export default function BottomSection({ className }: BottomSectionProps) {
 
   const toggleToday = (id: string) => {
     setToday((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, checked: !it.checked } : it))
+      prev.map((it) =>
+        it.id === id ? { ...it, isChecked: !it.isChecked } : it
+      )
     );
   };
 
   const toggleUpcoming = (id: string) => {
     setUpcoming((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, checked: !it.checked } : it))
+      prev.map((it) =>
+        it.id === id ? { ...it, isChecked: !it.isChecked } : it
+      )
     );
   };
 

components/home/CheckItem.tsx

@@ -14,7 +14,7 @@ export function CheckItem({ checked, text, onToggle }: CheckItemProps) {
       type="button"
       onClick={onToggle}
       className={[
-        'flex w-full items-center gap-4 rounded-2xl border px-5 py-2 text-left transition',
+        'flex w-full items-center gap-2.5 rounded-2xl border px-4 py-2 text-left transition',
         'bg-gray-50 hover:bg-gray-100',
         'border-gray-300',
       ].join(' ')}

components/home/CheckList.tsx

@@ -5,7 +5,7 @@ import { CheckItem } from './CheckItem';
 export type ChecklistItem = {
   id: string;
   text: string;
-  checked: boolean;
+  isChecked: boolean;
 };
 
 interface CheckListProps {
@@ -24,11 +24,11 @@ export default function CheckList({
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-2.5">
       {items.map((item) => (
         <CheckItem
           key={item.id}
-          checked={item.checked}
+          checked={item.isChecked}
           text={item.text}
           onToggle={() => onToggle(item.id)}
         />