[FEAT] 질문게시판 로더 적용

FE/src/app/(admin)/admin/create/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = "force-dynamic";
+
 import CreateForm from "@/components/common/form/program/CreateForm";
 import Title from "@/components/common/Title/Title";
 

FE/src/app/(admin)/admin/detail/[programId]/page.tsx

@@ -1,32 +1,25 @@
-import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
+import AttendeeInfoSection from "@/components/feature/detail/attendee/AttendeeInfoSection";
 import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
 import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
-import ProgramattendModeManageSection from "@/components/feature/detail/program/ProgramAttendStatusManageSection";
+import ProgramAttendModeManageSection from "@/components/feature/detail/program/ProgramAttendStatusManageSection";
 import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
 import ProgramDashboardSection from "@/components/feature/detail/Dashboard/ProgramDashboardSection";
 
-interface ProgramDetailPageProps {
-  params: {
-    programId: string;
-  };
-}
-
-const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
-  const { programId } = params;
-
+const ProgramDetailPage = () => {
   return (
     <div className="mb-16 space-y-16">
       <section className="space-y-8">
         <ProgramHeaderSection />
         <ProgramDetailSection />
-        <ProgramattendModeManageSection />
+        <ProgramAttendModeManageSection />
         <ProgramPresentationsSection />
         <div className="mt-12">
           <ProgramDashboardSection />
         </div>
       </section>
-      <AttendeeInfoContainer programId={+programId} isLoggedIn />
+      <AttendeeInfoSection />
     </div>
   );
 };
+
 export default ProgramDetailPage;

FE/src/app/(admin)/admin/manage/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = "force-dynamic";
+
 import CancleBtn from "@/components/manage/CancleBtn";
 import MemberManageSection from "@/components/manage/member/MemberManageSection";
 import TeamManageSection from "@/components/manage/team/TeamManageSection";

FE/src/app/(guest)/guest/detail/[programId]/page.tsx

@@ -1,19 +1,12 @@
-import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
 import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
 import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
-import UserAttendModalContainer from "@/components/feature/detail/userAttendModal/UserAttendModal.container";
+import UserAttendModalSection from "@/components/feature/detail/userAttendModal/UserAttendModalSection";
 import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
 import BlurDashboard from "@/components/feature/detail/Dashboard/BlurDashboard";
+import ATTEND_STATUS from "@/constants/ATTEND_STATUS";
+import BlurredAttendee from "@/components/feature/detail/attendee/BlurredAttendee";
 
-interface ProgramDetailPageProps {
-  params: {
-    programId: string;
-  };
-}
-
-const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
-  const { programId } = params;
-
+const ProgramDetailPage = () => {
   return (
     <div className="mb-16 space-y-16">
       <section className="space-y-8">
@@ -24,8 +17,10 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
           <BlurDashboard />
         </div>
       </section>
-      <AttendeeInfoContainer programId={+programId} isLoggedIn={false} />
-      <UserAttendModalContainer programId={+programId} isLoggedIn={false} />
+      {ATTEND_STATUS.STATUSES.map((status) => (
+        <BlurredAttendee key={status} status={status} />
+      ))}
+      <UserAttendModalSection isLoggedIn={false} />
     </div>
   );
 };

FE/src/app/(private)/(program)/detail/[programId]/page.tsx

@@ -1,19 +1,17 @@
-import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
+import dynamic from "next/dynamic";
+import AttendeeInfoSection from "@/components/feature/detail/attendee/AttendeeInfoSection";
 import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
 import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
-import UserAttendModalContainer from "@/components/feature/detail/userAttendModal/UserAttendModal.container";
+import UserAttendModalSection from "@/components/feature/detail/userAttendModal/UserAttendModalSection";
 import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
-import ProgramDashboardSection from "@/components/feature/detail/Dashboard/ProgramDashboardSection";
 
-interface ProgramDetailPageProps {
-  params: {
-    programId: string;
-  };
-}
-
-const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
-  const { programId } = params;
+// import ProgramDashboardSection from "@/components/feature/detail/Dashboard/ProgramDashboardSection";
+const ProgramDashboardSection = dynamic(
+  () => import("@/components/feature/detail/Dashboard/ProgramDashboardSection"),
+  { ssr: false },
+);
 
+const ProgramDetailPage = () => {
   return (
     <div className="mb-16 space-y-16">
       <section className="space-y-8">
@@ -24,8 +22,8 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
           <ProgramDashboardSection />
         </div>
       </section>
-      <AttendeeInfoContainer programId={+programId} isLoggedIn />
-      <UserAttendModalContainer programId={+programId} isLoggedIn />
+      <AttendeeInfoSection />
+      <UserAttendModalSection isLoggedIn />
     </div>
   );
 };

FE/src/components/common/form/program/CreateForm.tsx

@@ -3,9 +3,6 @@
 import { useRouter } from "next/navigation";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
-import Participant from "../../../programCreate/Participant";
-import CreateCategory from "./CreateCategory";
-import ProgramTitle from "./ProgramTitle";
 import FormBtn from "@/components/common/form/FormBtn";
 import ProgramDate from "@/components/common/form/program/ProgramDate";
 import MarkdownEditor from "@/components/common/markdown/MarkdownEditor";
@@ -21,6 +18,10 @@ import {
 import { useMemberSet } from "@/hooks/useMemberForm";
 import { ProgramCategory } from "@/types/program";
 import { TeamInputInfo } from "@/types/team";
+import ProgramTitle from "@/components/common/form/program/ProgramTitle";
+import CreateCategory from "@/components/common/form/program/CreateCategory";
+import Participant from "@/components/programCreate/Participant";
+
 // import { checkIsValidateGithubUrl } from "@/utils/github";
 
 export interface ProgramFormDataState {
@@ -75,7 +76,6 @@ const CreateForm = () => {
       return;
     }
 
-
     //TODO: 백엔드에서 유효성 검사하도록 수정. 백엔드와 논의 필요
     // const isValidGithubUrl = checkIsValidateGithubUrl(programGithubUrl);
     const isValidGithubUrl = true;

FE/src/components/common/header/Modal/UserActiveModal.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import { useRouter } from "next/navigation";
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import Button from "../../Button/Button";
-import ErrorFallback from "../../error/ErrorFallback";
+import Button from "@/components/common/Button/Button";
+import ErrorFallback from "@/components/common/error/ErrorFallback";
 import UserActiveModalSkeleton from "./UserActiveModal.loader";
 import UserInfoSection from "./UserInfoSection";
 import ROUTES from "@/constants/ROUTES";

FE/src/components/feature/detail/Dashboard/ProgramDashboard.skeleton.tsx

@@ -0,0 +1,25 @@
+import DashboardContentSekelton from "./components/DashboardContent.skeleton";
+
+const ProgramDashboardSkeleton = () => {
+  return (
+    <div className="animate-pulse">
+      {/* title */}
+      <div className="h-8 w-36 rounded-lg bg-slate-200" />
+
+      <div className="mt-4" />
+
+      {/* tab */}
+      <div className="flex h-fit w-fit items-center justify-center gap-4 font-semibold">
+        <div className="h-8 w-28 rounded-lg bg-slate-200" />
+        <div className="h-8 w-28 rounded-lg bg-slate-200" />
+        <div className="h-8 w-28 rounded-lg bg-slate-200" />
+        <div className="h-8 w-28 rounded-lg bg-slate-200" />
+        <div className="h-8 w-28 rounded-lg bg-slate-200" />
+      </div>
+
+      <DashboardContentSekelton />
+    </div>
+  );
+};
+
+export default ProgramDashboardSkeleton;

FE/src/components/feature/detail/Dashboard/ProgramDashboardSection.tsx

@@ -5,26 +5,43 @@ import DashboardContent from "./components/DashboardContent";
 import DashboardInput from "./components/DashboardInput";
 import { useGetProgramId } from "@/hooks/usePrograms";
 import TeamsTab from "@/components/feature/detail/Dashboard/TeamsTab";
+import { ErrorBoundary } from "react-error-boundary";
+import { Suspense } from "react";
+import ProgramDashboardSkeleton from "./ProgramDashboard.skeleton";
+import DashboardContentSkeleton from "./components/DashboardContent.skeleton";
 
 const ProgramDashboardSection = () => {
   const programId = useGetProgramId();
 
   return (
     <section>
-      <Title text="질문 게시판" />
-      <div className="mt-4" />
-      <TeamsTab programId={programId}>
-        {({ teamId, teamName }) => (
-          <div className="mt-8 flex flex-col gap-8">
-            <DashboardContent programId={programId} selectedTeamId={teamId} />
-            <DashboardInput
-              programId={programId}
-              selectedTeamId={teamId}
-              selectedTeamName={teamName}
-            />
-          </div>
-        )}
-      </TeamsTab>
+      {/* TODO: 현재는 로더가 에러 fallback으로 적용되어있음. 적절하게 변경할 필요 */}
+      <ErrorBoundary fallback={<ProgramDashboardSkeleton />}>
+        <Suspense fallback={<ProgramDashboardSkeleton />}>
+          <Title text="질문 게시판" />
+          <div className="mt-4" />
+          <TeamsTab programId={programId}>
+            {({ teamId, teamName }) => (
+              <div className="mt-8 flex flex-col gap-8">
+                {/* TODO: 현재는 로더가 에러 fallback으로 적용되어있음. 적절하게 변경할 필요 */}
+                <ErrorBoundary fallback={<DashboardContentSkeleton />}>
+                  <Suspense fallback={<DashboardContentSkeleton />}>
+                    <DashboardContent
+                      programId={programId}
+                      selectedTeamId={teamId}
+                    />
+                  </Suspense>
+                </ErrorBoundary>
+                <DashboardInput
+                  programId={programId}
+                  selectedTeamId={teamId}
+                  selectedTeamName={teamName}
+                />
+              </div>
+            )}
+          </TeamsTab>
+        </Suspense>
+      </ErrorBoundary>
     </section>
   );
 };

FE/src/components/feature/detail/Dashboard/TeamsTab.tsx

@@ -2,6 +2,9 @@
 
 import Tab from "@/components/common/tabs/tab/TabCompound/TabCompound";
 import { useTeamQuery } from "@/hooks/query/useTeamQuery";
+import ProgramDashboardSkeleton from "./ProgramDashboard.skeleton";
+import { ErrorBoundary } from "react-error-boundary";
+import { Suspense } from "react";
 
 interface SelectedItemProps {
   teamName: string;
@@ -13,10 +16,7 @@ interface TeamsTabProps {
   children: (selectedItem: SelectedItemProps) => JSX.Element;
 }
 const TeamsTab = ({ programId, children }: TeamsTabProps) => {
-  const { data: teamsQueryData, isLoading, isError } = useTeamQuery(programId);
-
-  if (isLoading) return null;
-  if (isError) return null;
+  const { data: teamsQueryData } = useTeamQuery(programId);
 
   const { teams } = teamsQueryData;
   if (teams.length === 0) return null;

FE/src/components/feature/detail/Dashboard/components/DashboardContent.skeleton.tsx

@@ -0,0 +1,38 @@
+const DashboardContentSekelton = () => {
+  return (
+    <div className="animate-pulse">
+      <div className="mt-8" />
+
+      <div className="flex flex-col gap-3 rounded-lg bg-slate-50 p-8 opacity-70">
+        <div className="h-4 w-40 rounded-lg bg-slate-200" />
+        <div className="mt-1" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="mt-1" />
+        <div className="flex gap-4">
+          <div className="h-4 w-60 rounded-lg bg-slate-200" />
+          <div className="h-4 w-16 rounded-lg bg-slate-200" />
+          <div className="h-4 w-16 rounded-lg bg-slate-200" />
+        </div>
+        {/*  */}
+
+        <div className="mt-4" />
+
+        <div className="h-4 w-40 rounded-lg bg-slate-200" />
+        <div className="mt-1" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="h-4 rounded-lg bg-slate-200" />
+        <div className="mt-1" />
+        <div className="flex gap-4">
+          <div className="h-4 w-60 rounded-lg bg-slate-200" />
+          <div className="h-4 w-16 rounded-lg bg-slate-200" />
+          <div className="h-4 w-16 rounded-lg bg-slate-200" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardContentSekelton;

FE/src/components/feature/detail/Dashboard/components/DashboardContent.tsx

@@ -11,11 +11,7 @@ const DashboardContent = ({
   programId,
   selectedTeamId,
 }: DashboardContentProps) => {
-  const { data, isLoading, error } = useGetQuestions(programId, selectedTeamId);
-
-  // TODO: Loader 적용, 에러 처리
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error...</div>;
+  const { data } = useGetQuestions(programId, selectedTeamId);
 
   const { comments } = data;
 

FE/src/components/feature/detail/attendee/AttendeeInfo.tsx → FE/src/components/feature/detail/attendee/AttendeeInfoByStatus.tsx

@@ -11,7 +11,7 @@ interface AttendeeInfoProps {
   status: AttendStatus;
 }
 
-const AttendeeInfo = ({ programId, status }: AttendeeInfoProps) => {
+const AttendeeInfoByStatus = ({ programId, status }: AttendeeInfoProps) => {
   const queryClient = useQueryClient();
 
   const {
@@ -45,4 +45,4 @@ const AttendeeInfo = ({ programId, status }: AttendeeInfoProps) => {
     </>
   );
 };
-export default AttendeeInfo;
+export default AttendeeInfoByStatus;