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

* chore(land): upgrade Next.js version from 14 to 15

* chore(land): set font and directory

* feat(land): set layout with navbar and footer

* refactor(land): change directory structure

* feat(land): create sidebar and add icon package

* style(land): add font and update font directory structure

* feat(land): create text slider component

* feat(land): create home page first section

* fix(land): change page export

* refactor(land): use function declaration and change tag

* refactor(land): remove 'use client' and replace button with next/link

* refactor(land): update nav and sidebar to client-side rendering

* refactor(land): replace <a> tag with Next.js <Link> components

* chore(land): add font file

* refactor(land): use Section component for layout separation

* feat(land): create home page second Section

* feat(land): create home page third section without animation

* chore(land): delete misplaced font file

* feat(land): create home page fourth section

* refactor(land): add dynamic class selection

* feat(land): create home fifth section

* feat(land): create last section, add support detail

* style(land): hidden horizontal scroll

* style(land): apply word break keep, adjust layout

* feat(land): change value section responsive view

* style(land): add scroll and flip animations to value section

* refactor(land): change sidebar position from right to top, add dark background

* style(land): set background image on last section

* chore(land): add eslint dependencies

* fix(land): change code formate

* refactor(land): apply tailwind css @layers

* refactor(land): home page code splitting

* feat(land): create review section

* feat(land): create part section

* refactor(land, member): minor code improvements

* style(land): enhance layout and styling

* refactor(land): replace URL with const, add code to remove warning

* feat(member): add home data

* chore(land): add `dayjs`, set custom color

* feat(land): create apply process

* feat(land): create recruitment notice table view

* feat(land): recruitment API integration

* feat(land): create FAQ view

* feat(land): create now apply view

* refactor(land): change apply path name

* feat(land): create apply form

* feat(land): create error, not-found page

* refactor(land): change recruitment type

* refactor(land): change text on error page

* feat(land): create application detail page

* feat(land): create application result check page

* chore(land): add `react-toastify`

* feat(land): apply toast to the layout

* feat(land): create application form

* feat(land): put FAQSection data

* chore(land): set up access to the image on the server

* feat(land): create ask page

* refactor(land): change review card design with image

* feat(land): add ChannelTalk

* refactor(land): add string utils and change interface with using extends

* style(land): adjust layout and change component color

* refactor(land): check recruitment status and display appropriate message based on date

* feat(land): create apply check section

* refactor(land): use type and constant to improve application form

* feat(land): add picture, replaced `ActivityCard` components with `ActivityData` array

* refactor(land): change responsive layout, delete `scroll={false}` in `Link`

* chore: update

* fix: 버튼 색상

---------

Co-authored-by: gwansikk <[email protected]>

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>
+  );
+}