[#27]💄모임 동아리 가입페이지

src/components/Footer.tsx

@@ -50,7 +50,7 @@ const Footer: React.FC = () => {
           </li>
         </ul>
       </div>
-      <p className="mt-10">&copy; 2024 ModongPage. All rights reserved.</p>
+      <p className="text-center mt-10">&copy; 2024 ModongPage. All rights reserved.</p>
     </footer>
   );
 };

src/components/HeroSection.tsx

@@ -5,32 +5,44 @@ interface HeroSectionProps {
   backgroundColor: string;
   title: string;
   subtitle: string;
-  animationData: object;
+  animationData?: object;
+  imageData?: { src: string; alt: string };
 }
 
 const HeroSection: React.FC<HeroSectionProps> = ({
   backgroundColor,
   title,
   subtitle,
   animationData,
+  imageData,
 }) => {
   return (
     <section
-      className={`w-full h-72 py-8 px-4 ${backgroundColor} flex justify-center  text-left`}
+      className={`w-full h-72 py-8 px-4 ${backgroundColor} flex justify-center text-left`}
     >
-      <div className=" flex items-center w-full  px-20 justify-around">
-        <div className="flex flex-col ">
+      <div className="flex items-center w-full px-20 justify-around">
+        <div className="flex flex-col">
           <h1 className="text-4xl font-neoExtraBold text-white mb-10">
             {title}
           </h1>
           <p className="text-white font-neoLight">{subtitle}</p>
         </div>
-        <Lottie
-          animationData={animationData}
-          loop
-          autoplay
-          style={{ height: 200, width: 200 }}
-        />
+        {animationData ? (
+          <Lottie
+            animationData={animationData}
+            loop
+            autoplay
+            style={{ height: 200, width: 200 }}
+          />
+        ) : (
+          imageData && (
+            <img
+              src={imageData.src}
+              alt={imageData.alt}
+              style={{ height: 200, width: 200 }}
+            />
+          )
+        )}
       </div>
     </section>
   );

src/pages/GroupJoinPage/ClubRegistration.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Button } from '@/components/ui/button';
+
+const ClubRegistration: React.FC = () => {
+    return (
+        <div className="flex bg-stone-100 flex-col min-h-screen">
+            <div className="w-[920px] mx-auto mt-8 flex flex-col flex-grow">
+                <h2 className="text-xl text-green-600 font-neoBold mb-10">개인정보 이용약관</h2>
+                <h2 className="text-xl text-green-600 font-neoBold mb-4">가입 규칙</h2>
+                <div className="border-2 border-[#B4E3BF] rounded-lg bg-white p-8 mb-4">
+                    <ol className="space-y-1.5 list-decimal list-inside">
+                        <li>가입 후 3개월 동안 참여 횟수 3회 미만일 경우 강퇴!!</li>
+                        <li>상호 존중</li>
+                        <li>이성적 만남, 영업 등 동아리와 관련되지 않은 목적 적발시 강퇴!!</li>
+                        <li>가입 후 일주일 내 인사 등록 및 한달 내 모임 참여</li>
+                    </ol>
+                </div>
+                <label className="flex justify-end items-center mb-5">
+                    <input type="checkbox" className="form-checkbox" />
+                    <span className="ml-2 text-sm">위 가입 규칙에 동의합니다.</span>
+                </label>
+
+                <h2 className="text-xl text-green-600 font-neoBold mb-4">가입 질문</h2>
+                <div className="space-y-4 bg-white p-8 border-2 border-[#B4E3BF] rounded-lg">
+                    <div>
+                        <label className="block mb-2 font-neoBold text-sm">1. MBTI (잘 모르면 외향형, 내향형 정도로 작성해주세요.)</label>
+                        <input type="text" className="w-full h-8 p-2 border border-gray-300 rounded" />
+                    </div>
+                    <div>
+                        <label className="block mb-2 font-neoBold text-sm">2. 나이 (만 나이)</label>
+                        <input type="text" className="w-full h-8 p-2 border border-gray-300 rounded" />
+                    </div>
+                    <div>
+                        <label className="block mb-2 font-neoBold text-sm">3. 가입 시 잘 참여하겠습니까?</label>
+                        <input type="text" className="w-full h-8 p-2 border border-gray-300 rounded" />
+                    </div>
+                </div>
+
+                <div className="mt-auto mb-10">
+                    <label className="flex justify-end items-center mt-4 mb-3">
+                        <input type="checkbox" className="form-checkbox" />
+                        <span className="text-sm ml-2">위 가입 내용의 정보 이용에 동의합니다.</span>
+                    </label>
+                    <div className="flex justify-end">
+                        <Button>가입하기</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ClubRegistration;

src/pages/GroupJoinPage/GroupJoinPage.tsx

@@ -0,0 +1,89 @@
+import React, { useRef, useState } from 'react';
+import Footer from '@/components/Footer';
+import Header from '@/components/Header';
+import HeroSection from '@/components/HeroSection';
+import NotificationModal from '@/components/ui/notificationModal';
+import ProfileModal from '@/components/ui/profileModal';
+import ClubRegistration from './ClubRegistration';
+import runImg from '@/assets/icons/run.png';
+
+
+const LandingPage: React.FC = () => {
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [hasNotifications, setHasNotifications] = useState(false);
+  const [profileCoords, setProfileCoords] = useState<{
+    top: number;
+    left: number;
+  }>({
+    top: 0,
+    left: 0,
+  });
+  const [notificationCoords, setNotificationCoords] = useState<{
+    top: number;
+    left: number;
+  }>({
+    top: 0,
+    left: 0,
+  });
+  const profileRef = useRef<HTMLImageElement>(null);
+
+  const toggleProfileModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setProfileCoords({ top: rect.bottom, left: rect.left });
+    }
+    setIsProfileModalOpen(!isProfileModalOpen);
+  };
+
+  const toggleNotificationModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setNotificationCoords({ top: rect.bottom, left: rect.left });
+    }
+    setIsNotificationModalOpen(!isNotificationModalOpen);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setIsProfileModalOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <Header
+        toggleProfileModal={toggleProfileModal}
+        toggleNotificationModal={toggleNotificationModal}
+        isLoggedIn={isLoggedIn}
+        handleLoginLogout={() => setIsLoggedIn(!isLoggedIn)}
+        profileRef={profileRef}
+        hasNotifications={hasNotifications}
+      />
+      <HeroSection
+          backgroundColor="bg-primary"
+          title="모임 / 동아리 가입하기"
+          subtitle="우리의 다양한 모임과 동아리에서 새로운 취미를 발견하고, 기존의 취미를 더욱 즐겁게 누려보세요."
+          imageData={{ src: runImg, alt: "Run Icon" }}
+      />
+      <ClubRegistration/>
+      <Footer />
+      {isProfileModalOpen && (
+        <ProfileModal
+          toggleProfileModal={toggleProfileModal}
+          handleLogout={handleLogout}
+          coords={profileCoords}
+        />
+      )}
+      {isNotificationModalOpen && (
+        <NotificationModal
+          toggleNotificationModal={toggleNotificationModal}
+          setHasNotifications={setHasNotifications}
+          coords={notificationCoords}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LandingPage;

src/routes/routes.tsx

@@ -2,7 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from '../App';
 import Landing from '../pages/LandingPage/LandingPage';
 import SetLocation from '../pages/SetLocation/SetLocation';
-
+import GroupJoin from '../pages/GroupJoinPage/GroupJoinPage';
 const router = createBrowserRouter([
   {
     path: '/',
@@ -17,6 +17,10 @@ const router = createBrowserRouter([
     path: '/setlocation',
     element: <SetLocation />,
   },
+  {
+    path: '/groupjoin',
+    element: <GroupJoin />,
+  },
 ]);
 
 const Routes = () => {