feat: 계획 관리 페이지 페이지네이션 구현 및 새 플렌 추가 버튼 위로 이동

Author: GamjaIsMine02

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

@@ -28,7 +28,7 @@ const Page = () => {
   const [isLoading, setIsLoading] = useState(true);
 
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 5;
+  const itemsPerPage = 4;
 
   // 사용자 인증 상태 리스너 및 초기 플랜 목록 로드
   useEffect(() => {
@@ -208,6 +208,20 @@ const Page = () => {
       {/* 검색 바 */}
       <SearchBar />
 
+      {/* 하단 추가 버튼 or 인라인 폼 */}
+      <div className="mt-6 mb-4">
+        {isAdding ? (
+          <InlineAddPlanForm
+            onSave={handleSavePlan}
+            onCancel={handleCancelAdd}
+          />
+        ) : (
+          <div onClick={() => setIsAdding(true)}>
+            <AddPlanButton />
+          </div>
+        )}
+      </div>
+
       <section className="space-y-6">
         {isLoading ? (
           <p>플랜을 불러오는 중...</p>
@@ -240,20 +254,6 @@ const Page = () => {
           onPageChange={setCurrentPage}
         />
       )}
-
-      {/* 하단 추가 버튼 or 인라인 폼 */}
-      <div className="mt-6">
-        {isAdding ? (
-          <InlineAddPlanForm
-            onSave={handleSavePlan}
-            onCancel={handleCancelAdd}
-          />
-        ) : (
-          <div onClick={() => setIsAdding(true)}>
-            <AddPlanButton />
-          </div>
-        )}
-      </div>
     </div>
   );
 };

components/plans/PlanSection.tsx

@@ -43,7 +43,7 @@ export default function PlanSection({
   onDeletePlan,
   onUpdatePlan,
 }: PlanSectionProps) {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
   const [tasks, setTasks] = useState<PlanItem[]>([]);
   const [isTasksLoading, setIsTasksLoading] = useState(true);
   const [isAddingTask, setIsAddingTask] = useState(false);