feat(land): 새로운 렌딩페이지 레이아웃 적용

apps/land/next.config.ts

@@ -0,0 +1,7 @@
+import { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

apps/land/package.json

@@ -13,9 +13,12 @@
     "@clab-platforms/icon": "workspace:*",
     "@clab-platforms/utils": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
+    "balloons-js": "^0.0.2",
+    "dayjs": "^1.11.10",
     "next": "15.1.6",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "react-toastify": "^11.0.3"
   },
   "devDependencies": {
     "@clab-platforms/config": "workspace:*",
@@ -27,6 +30,8 @@
     "autoprefixer": "^10.0.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "postcss": "^8",

apps/land/src/app/PageLayout.tsx

@@ -18,7 +18,7 @@ export default function Page({
   return (
     <>
       {nav && <Nav />}
-      <div className={cn('m-auto pt-12', className)}>{children}</div>
+      <div className={cn('m-auto pt-6', className)}>{children}</div>
       {footer && <Footer />}
     </>
   );

apps/land/src/app/applicationForm/api/application.ts

@@ -0,0 +1,60 @@
+import { API_BASE_URL, END_POINT } from '@/constants';
+import type { ApplicationForm } from '@/types';
+
+interface GetApplyPassedProps {
+  recruitmentId: number;
+  studentId: string;
+}
+
+/**
+ * 동아리 지원
+ */
+export async function postApplication(body: ApplicationForm) {
+  const apiURL = `${API_BASE_URL}${END_POINT.APPLICATIONS}`;
+
+  const res = await fetch(apiURL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    throw new Error('동아리 지원에 실패했습니다.');
+  }
+
+  return res.json();
+}
+
+/**
+ * 합격 여부 조회
+ */
+export async function getApplyPassed({
+  recruitmentId,
+  studentId,
+}: GetApplyPassedProps) {
+  const apiURL = `${API_BASE_URL}${END_POINT.APPLY_PASSED(recruitmentId, studentId)}`;
+
+  const res = await fetch(apiURL);
+
+  if (!res.ok) {
+    throw new Error('합격 여부 조회에 실패했습니다.');
+  }
+
+  return res.json();
+}
+/**
+ * 현재 모집 중인 공고 조회
+ */
+export async function getApplicationNow() {
+  const apiURL = `${API_BASE_URL}${END_POINT.OPEN}`;
+
+  const res = await fetch(apiURL);
+
+  if (!res.ok) {
+    throw new Error('현재 모집 중인 공고 조회에 실패했습니다.');
+  }
+
+  return res.json();
+}

apps/land/src/app/applicationForm/api/index.ts

@@ -0,0 +1 @@
+export * from './application';

apps/land/src/app/applicationForm/components/ApplyCheck.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Button } from '@clab-platforms/design-system';
+
+import Image from 'next/image';
+
+interface Props {
+  handleModalConfirm: () => void;
+  handleModalClose: () => void;
+}
+
+export default function ApplyCheck({
+  handleModalConfirm,
+  handleModalClose,
+}: Props) {
+  return (
+    <div className="flex flex-col place-items-center space-y-4">
+      <Image src="/favicon.ico" alt="C-Lab" width={64} height={64} />
+      <h3 className="text-xl font-bold">지원하기</h3>
+      <p className="text-gray-500">작성하신 정보로 지원하시겠습니까?</p>
+      <div className="flex justify-center space-x-2">
+        <Button
+          onClick={handleModalConfirm}
+          size="sm"
+          className="bg-clab-light-blue hover:bg-clab-light-blue px-4 hover:bg-opacity-70"
+        >
+          확인
+        </Button>
+        <Button
+          onClick={handleModalClose}
+          size="sm"
+          className="bg-clab-light-blue hover:bg-clab-light-blue px-4 hover:bg-opacity-70"
+        >
+          취소
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/land/src/app/applicationForm/components/ApplyFailed.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button } from '@clab-platforms/design-system';
+
+import Image from 'next/image';
+
+interface Props {
+  handleModalClose: () => void;
+}
+
+export default function ApplyFailed({ handleModalClose }: Props) {
+  return (
+    <div className="flex flex-col place-items-center space-y-4">
+      <Image src="/favicon.ico" alt="C-Lab" width={64} height={64} />
+      <h3 className="text-xl font-bold">지원하기</h3>
+      <p className="text-gray-500">
+        지원에 실패했어요. <br />
+        지원서를 검토하고 다시 시도해주세요.
+      </p>
+      <div className="flex justify-center space-x-2">
+        <Button
+          size="sm"
+          onClick={handleModalClose}
+          className="bg-clab-light-blue hover:bg-clab-light-blue px-4 hover:bg-opacity-70"
+        >
+          확인
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/land/src/app/applicationForm/components/ApplySuccess.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Button } from '@clab-platforms/design-system';
+
+import Image from 'next/image';
+
+interface Props {
+  handleModalClose: () => void;
+}
+
+export default function ApplySuccess({ handleModalClose }: Props) {
+  return (
+    <div className="flex flex-col place-items-center space-y-4">
+      <Image src="/favicon.ico" alt="C-Lab" width={64} height={64} />
+      <h3 className="text-2xl font-bold">지원하기</h3>
+      <p className="text-lg text-gray-500">
+        지원이 완료됐어요!
+        <br />
+        서류 검토 후 연락 드릴 예정이에요.
+      </p>
+      <div className="flex justify-center space-x-2">
+        <Button
+          size="sm"
+          onClick={handleModalClose}
+          className="bg-clab-light-blue hover:bg-clab-light-blue px-4 hover:bg-opacity-70"
+        >
+          확인
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/land/src/app/applicationForm/components/index.ts

@@ -0,0 +1,3 @@
+export { default as ApplyFailed } from './ApplyFailed';
+export { default as ApplySuccess } from './ApplySuccess';
+export { default as ApplyCheck } from './ApplyCheck';

apps/land/src/app/applicationForm/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useApplicationNow';
+export * from './useApplicationMutation';

apps/land/src/app/applicationForm/hooks/useApplicationMutation.ts

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postApplication } from '../api';
+
+interface Props {
+  setIsApplySuccess: (applySuccess: boolean) => void;
+}
+
+export const useApplicationMutation = ({ setIsApplySuccess }: Props) => {
+  const ApplicationPost = useMutation({
+    mutationFn: postApplication,
+    onSuccess: (data) => {
+      if (data.success) {
+        setIsApplySuccess(true);
+      } else {
+        setIsApplySuccess(false);
+      }
+    },
+    onError: () => {
+      setIsApplySuccess(false);
+    },
+  });
+
+  return { applicationMutate: ApplicationPost.mutate };
+};

apps/land/src/app/applicationForm/hooks/useApplicationNow.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getApplicationNow } from '@/app/applicationForm/api';
+import { RECRUITMENT_QUERY_KEY } from '@/constants';
+
+/**
+ * 지원 합격 여부를 조회합니다.
+ */
+export function useApplicationNow() {
+  const { data, isError } = useQuery({
+    queryKey: RECRUITMENT_QUERY_KEY.NOW(),
+    queryFn: getApplicationNow,
+  });
+
+  return { data, isError };
+}

apps/land/src/app/applicationForm/not-found.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import PageLayout from '@/app/PageLayout';
+import { PATH } from '@/constants';
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <PageLayout
+      nav
+      footer
+      className="flex min-h-screen flex-col items-center justify-center space-y-6 overflow-hidden text-center"
+    >
+      <p className="text-2xl">
+        지금은 모집기간이 아니에요.
+        <br />
+        추후에 다시 방문해주세요!
+      </p>
+      <Link
+        href={PATH.HOME}
+        className="bg-clab-yellow border-clab-yellow hover:text-clab-yellow mx-auto rounded-full border px-8 py-1 text-xl font-bold text-black hover:bg-opacity-0"
+      >
+        HOME
+      </Link>
+    </PageLayout>
+  );
+}

apps/land/src/app/applicationForm/page.tsx

@@ -0,0 +1,19 @@
+import PageLayout from '@/app/PageLayout';
+
+import { Form } from './sections';
+
+export default function ApplicationForm() {
+  return (
+    <PageLayout
+      nav
+      footer
+      className="flex min-h-screen flex-col items-center overflow-hidden break-keep px-12 py-16 text-center"
+    >
+      <h1 className="mb-4 text-4xl font-bold md:text-5xl">지원서</h1>
+      <p className="text-clab-dark-yellow mb-8 text-lg font-bold md:text-xl">
+        모든 항목은 평가에 반영되므로 정성껏 작성 부탁드려요.
+      </p>
+      <Form />
+    </PageLayout>
+  );
+}