refactor: 기존에 section 컴포넌트가 상위의 page 컴포넌트로부터 필요한 데이터를 받아오는 부분을 sectio…

…n 내부에서 처리도록 수정

기존에 UserAttendModalSection에서 필요한 programId 값을 page에서 받아오던 부분을 내부에서 받아오도록 수정

#159

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

@@ -1,6 +1,6 @@
 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 BluredAttedee from "@/components/feature/detail/attendee/BluredAttedee";
@@ -28,7 +28,7 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
       {ATTEND_STATUS.STATUSES.map((status) => (
         <BluredAttedee key={status} status={status} />
       ))}
-      <UserAttendModalContainer programId={+programId} isLoggedIn={false} />
+      <UserAttendModalSection isLoggedIn={false} />
     </div>
   );
 };

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

@@ -1,19 +1,11 @@
 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;
-
+const ProgramDetailPage = () => {
   return (
     <div className="mb-16 space-y-16">
       <section className="space-y-8">
@@ -25,7 +17,7 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
         </div>
       </section>
       <AttendeeInfoSection />
-      <UserAttendModalContainer programId={+programId} isLoggedIn />
+      <UserAttendModalSection isLoggedIn />
     </div>
   );
 };

FE/src/components/feature/detail/userAttendModal/UserAttendModal.tsx

@@ -32,6 +32,8 @@ const UserAttendModal = ({ programId }: UserAttendModalProps) => {
     programId,
   ]);
 
+  // if (!attendMode || !programStatus) return null;
+
   const editableStatus = getEditableStatus({
     myAttendStatus: attendStatus,
     programStatus: programStatus,

FE/src/components/feature/detail/userAttendModal/UserAttendModalSection.tsx

@@ -0,0 +1,57 @@
+//TODO: 리팩토링 필요 : isLoggedIn을 props로 받아서 조건부 렌더링을 하고 있음
+
+"use client";
+
+import classNames from "classnames";
+import { ErrorBoundary } from "react-error-boundary";
+import LoginModal from "./LoginModal";
+import UserAttendModal from "./UserAttendModal";
+import ErrorFallbackNoIcon from "@/components/common/error/ErrorFallbackNoIcon";
+import useModal from "@/hooks/useModal";
+import useOutsideRef from "@/hooks/useOutsideRef";
+import { useGetProgramId } from "@/hooks/usePrograms";
+import { Line } from "@/components/icons";
+
+interface UserAttendModalProps {
+  isLoggedIn: boolean;
+}
+
+const UserAttendModalSection = ({ isLoggedIn }: UserAttendModalProps) => {
+  const programId = useGetProgramId();
+  const { isOpen, openModal, closeModal } = useModal();
+  const modalRef = useOutsideRef(closeModal);
+
+  const modalStyle = classNames(
+    "fixed left-0 z-10 flex h-60 w-full flex-col items-center gap-5 rounded-t-3xl border-t-2 bg-background shadow-2xl transition-all duration-500",
+    {
+      "bottom-0": isOpen,
+      "-bottom-[8rem]": !isOpen,
+    },
+  );
+
+  const handleOpenModal = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    isOpen ? closeModal() : openModal();
+  };
+
+  return (
+    <button
+      ref={modalRef}
+      className={modalStyle}
+      onClick={openModal}
+      type="button"
+    >
+      <div onClick={handleOpenModal} className="pb-1 pt-3">
+        <Line />
+      </div>
+      {isLoggedIn ? (
+        <ErrorBoundary FallbackComponent={ErrorFallbackNoIcon}>
+          <UserAttendModal programId={programId} />
+        </ErrorBoundary>
+      ) : (
+        <LoginModal />
+      )}
+    </button>
+  );
+};
+export default UserAttendModalSection;