feat: current generation 업데이트

frontend/app/(WithNavbar)/layout.tsx

@@ -1,22 +1,12 @@
 import CommonNavbar from "@/components/common/navbar/Navbar";
-import { PropsWithChildren } from "react";
-import { headers } from "next/headers";
+import { type PropsWithChildren } from "react";
 
 interface WithNavbarLayout extends PropsWithChildren {}
 
 const ApplicantPage = ({ children }: WithNavbarLayout) => {
-  const headersList = headers();
-  const header_url = headersList.get("x-url") || "";
-  const [_, __, currentPath, generation, ___] = header_url.split(/[/?]+/);
-  const isShort = currentPath === "kanban";
-
   return (
     <div className="px-24 min-w-[1280px] flex p-12">
-      <CommonNavbar
-        generation={generation}
-        currentPath={currentPath}
-        isShort={isShort}
-      />
+      <CommonNavbar />
       {children}
     </div>
   );

frontend/app/kanban/[generation]/detail/page.tsx

@@ -47,12 +47,11 @@ const DetailContentJunction = ({
 
 const KanbanBoardDetailPage = ({
   params: { generation },
-  searchParams: { columnIndex, applicantId, type, cardId },
+  searchParams: { applicantId, type, cardId },
 }: KanbanBoardDetailPageProps) => {
   return (
     <main className="flex mt-8 overflow-auto pt-12 pl-12">
       <KanbanColumnDetailCard
-        columnIndex={+columnIndex ?? 0}
         generation={generation}
         cardId={cardId}
         applicantId={applicantId}

frontend/components/common/navbar/Navbar.tsx

@@ -1,20 +1,16 @@
+"use client";
 import { MainNavbar } from "@/src/constants";
 import CommonNavbarCell from "./NavbarCell";
 import NavbarUserInfo from "./UserInfo";
 import { NavbarOperation } from "./NavbarOperation";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { NavbarGenerationToggle } from "./NavbarGenerationToggle";
 
-interface CommonNavbarProps {
-  generation: string;
-  isShort?: boolean;
-  currentPath: string;
-}
+const CommonNavbar = () => {
+  const [_, currentType, generation] = usePathname().split("/");
+  const isShort = currentType === "kanban";
 
-const CommonNavbar = ({
-  generation,
-  isShort = false,
-  currentPath,
-}: CommonNavbarProps) => {
   return (
     <nav className="flex flex-col transition-all">
       <Link
@@ -26,19 +22,16 @@ const CommonNavbar = ({
         <div>{generation}th</div>
       </Link>
       <div className="flex flex-col gap-8 mt-8 text-xl">
-        {MainNavbar.map((item) => (
+        {MainNavbar(+generation).map((item) => (
           <CommonNavbarCell
             key={item.type}
-            currentPath={currentPath}
+            currentType={currentType}
             isShort={isShort}
-            item={item}
+            {...item}
           />
         ))}
-        <NavbarOperation
-          currentPath={currentPath}
-          generation={generation}
-          isShort={isShort}
-        />
+        <NavbarGenerationToggle generation={generation} isShort={isShort} />
+        <NavbarOperation currentType={currentType} />
       </div>
       <NavbarUserInfo />
     </nav>

frontend/components/common/navbar/NavbarCell.tsx

@@ -1,43 +1,44 @@
+"use client";
+
 import Image from "next/image";
 import LtIcon from "@/public/icons/lt.icon.svg";
 import LtIconWhite from "@/public/icons/lt.icon.white.svg";
+import Link from "next/link";
+import { cn } from "@/src/utils/cn";
+import { NavbarItem } from "@/src/constants";
 
-type CommonNavbarCellProps = {
-  currentPath: string;
-  item: {
-    type: string;
-    href: string;
-    target: string;
-    short_title: string;
-    title: string;
-  };
+export type CommonNavbarCellProps = NavbarItem & {
+  currentType: string;
   isShort: boolean;
 };
 
 const CommonNavbarCell = ({
-  currentPath,
-  item,
+  href,
+  short_title,
+  target,
+  title,
+  type,
+  currentType,
   isShort,
 }: CommonNavbarCellProps) => {
   const linkButtonClassName =
     "flex justify-between p-4 hover:bg-secondary-100 hover:text-white rounded-lg";
+
   return (
-    <a
-      className={
-        currentPath === item.type
-          ? `${linkButtonClassName} !bg-black !text-white`
-          : linkButtonClassName
-      }
-      href={item.href}
-      target={item.target === "_blank" ? "_blank" : ""}
-      key={item.type}
+    <Link
+      className={cn(linkButtonClassName, {
+        "!bg-black !text-white": currentType === type,
+      })}
+      href={href}
+      target={target}
+      key={type}
     >
-      {isShort ? item.short_title : item.title}
+      {isShort ? short_title : title}
       <Image
-        src={currentPath !== item.type ? LtIcon : LtIconWhite}
+        src={currentType !== type ? LtIcon : LtIconWhite}
         alt="right arrow"
       />
-    </a>
+    </Link>
   );
 };
 

frontend/components/common/navbar/NavbarGenerationToggle.tsx

@@ -0,0 +1,32 @@
+import CommonNavbarCell from "./NavbarCell";
+import { CURRENT_GENERATION } from "@/src/constants";
+
+type NavbarGenerationToggleProps = {
+  generation: string;
+  isShort: boolean;
+};
+export const NavbarGenerationToggle = ({
+  generation,
+  isShort,
+}: NavbarGenerationToggleProps) => {
+  const isCurrentGeneration = +generation === CURRENT_GENERATION;
+  const targetGeneration = isCurrentGeneration
+    ? CURRENT_GENERATION - 1
+    : CURRENT_GENERATION;
+
+  const short_title = isCurrentGeneration ? "지난 모집" : "현재 모집";
+  const title = isCurrentGeneration
+    ? "지난 신입모집 보기"
+    : "현재 신입모집 보기";
+
+  return (
+    <CommonNavbarCell
+      currentType="kanban"
+      isShort={isShort}
+      href={`/kanban/${targetGeneration}`}
+      short_title={short_title}
+      title={title}
+      type="toggle"
+    />
+  );
+};

frontend/components/common/navbar/NavbarOperation.tsx

@@ -3,18 +3,14 @@
 import { useQuery } from "@tanstack/react-query";
 import CommonNavbarCell from "./NavbarCell";
 import { getMyInfo } from "@/src/apis/interview";
+import { usePathname } from "next/navigation";
 
-interface NavbarOperationProps {
-  generation: string;
-  isShort?: boolean;
-  currentPath: string;
-}
-
-export const NavbarOperation = ({
-  generation,
-  isShort = false,
-  currentPath,
-}: NavbarOperationProps) => {
+type NavbarOperationProps = {
+  currentType: string;
+};
+export const NavbarOperation = ({ currentType }: NavbarOperationProps) => {
+  const currentPath = usePathname();
+  const generation = currentPath.split("/")[2];
   const { data: userData } = useQuery(["user"], getMyInfo);
   if (!userData) {
     return <div></div>;
@@ -26,15 +22,13 @@ export const NavbarOperation = ({
 
   return (
     <CommonNavbarCell
-      currentPath={currentPath}
-      isShort={isShort}
-      item={{
-        href: `/admin/${generation}`,
-        short_title: "관리자",
-        title: "관리자 페이지",
-        target: "_self",
-        type: "admin",
-      }}
+      currentType={currentType}
+      isShort={false}
+      href={`/admin/${generation}`}
+      short_title="관리자"
+      title="관리자 페이지"
+      target="_self"
+      type="admin"
     />
   );
 };

frontend/components/kanban/column/ColumnWithBackButton.component.tsx

@@ -1,28 +1,30 @@
 "use client";
 
 import { KanbanColumnData } from "@/src/stores/kanban/Kanban.atoms";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { useQuery } from "@tanstack/react-query";
 import { getAllKanbanData } from "@/src/apis/kanban";
 import { KanbanSelectedButtonNumberState } from "@/src/stores/kanban/Navbar.atoms";
 import KanbanDetailBackButton from "../BackButton.component";
 import KanbanCardComponent from "../card/Card.component";
 import Icon from "@/components/common/Icon";
+import { useSearchParams } from "next/navigation";
 
 interface KanbanDetailCardProps {
-  columnIndex: number;
   generation: string;
   cardId: string;
   applicantId: string;
 }
 
 const KanbanColumnDetailCard = ({
-  columnIndex,
   generation,
   cardId,
   applicantId,
 }: KanbanDetailCardProps) => {
-  const [navbarId] = useAtom(KanbanSelectedButtonNumberState);
+  const searchParams = useSearchParams();
+  const columnIndex = +(searchParams.get("columnIndex") ?? "0");
+
+  const navbarId = useAtomValue(KanbanSelectedButtonNumberState);
 
   const {
     data: kanbanDataArray,

frontend/src/constants/applicant/28.ts

@@ -0,0 +1,84 @@
+const APPLICANT: ApplicantNode[] = [
+  {
+    id: 1,
+    title: "프로젝트 희망 분야를 선택해주세요.*",
+    type: "customField",
+    value: {
+      name: "field",
+    },
+    subValue: [
+      { title: "1순위", name: "field1" },
+      { title: "2순위", name: "field2" },
+    ],
+  },
+  {
+    id: 2,
+    title: "기본 인적 사항을 입력해주세요.",
+    type: "customHuman",
+    value: {
+      hunamName: { name: "name" },
+      humanEmail: { name: "email" },
+      humanPhone: { name: "contacted" },
+      humanEtc: [
+        { name: "classOf" },
+        { name: "major" },
+        { name: "doubleMajor" },
+        { name: "minor" },
+        { name: "grade" },
+        { name: "semester" },
+        { name: "registered" },
+      ],
+    },
+  },
+  {
+    id: 3,
+    title: "기타 질문 사항에 답변해주세요.",
+    type: "shortSplit",
+    value: [
+      { title: "향후 계획 활동", name: "activity" },
+      { title: "지원 경로* (중복 선택 가능)", name: "channel" },
+    ],
+  },
+];
+
+export type ScoreKeyword =
+  | "실천력"
+  | "동아리 활동의지"
+  | "협업"
+  | "베풀려는 마음";
+
+// type ScoreKeywordName =
+//   | "passion"
+//   | "clubInvolvement"
+//   | "collaboration"
+//   | "devotion";
+
+export const ScoreSequence: {
+  [key: number]: ScoreKeyword;
+} = {
+  0: "실천력",
+  1: "동아리 활동의지",
+  2: "협업",
+  3: "베풀려는 마음",
+};
+
+export type Score = {
+  fieldName: ScoreKeyword;
+  score: number | "";
+};
+
+// type ScoreKeywordType = {
+//   title: ScoreKeyword;
+//   name: ScoreKeywordName;
+// };
+
+// const INTERVIEW_SCORE_KEYWORD: ScoreKeywordType[] = [
+//   { title: "실천력", name: "passion" },
+//   { title: "동아리 활동의지", name: "clubInvolvement" },
+//   { title: "협업", name: "collaboration" },
+//   { title: "베풀려는 마음", name: "devotion" },
+// ];
+
+const FIELD_NAME: ScoreKeyword[] = Object.values(ScoreSequence);
+
+export { APPLICANT, FIELD_NAME };