Merge branch 'main' into test/160-application-chapter

JNU-econovation · Aug 27, 2024 · f41c310 · f41c310
2 parents 66ee0cb + 15816bb
commit f41c310
Show file tree

Hide file tree

Showing 20 changed files with 1,581 additions and 102 deletions.
diff --git a/frontend/app/(WithNavbar)/layout.tsx b/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>
   );

diff --git a/frontend/app/kanban/[generation]/detail/page.tsx b/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}

diff --git a/frontend/components/common/navbar/Navbar.tsx b/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>

diff --git a/frontend/components/common/navbar/NavbarCell.tsx b/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>
   );
 };
 

diff --git a/frontend/components/common/navbar/NavbarGenerationToggle.tsx b/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"
+    />
+  );
+};
diff --git a/frontend/components/common/navbar/NavbarOperation.tsx b/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"
     />
   );
 };
diff --git a/frontend/components/kanban/column/ColumnWithBackButton.component.tsx b/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,

diff --git a/frontend/cypress/e2e/application.second-personal-information.cy.ts b/frontend/cypress/e2e/application.second-personal-information.cy.ts
@@ -0,0 +1,69 @@
+describe("2번째 인적사항 e2e 테스트", () => {
+  beforeEach(() => {
+    cy.viewport(1200, 900);
+
+    cy.goSecondPersonalInformation();
+
+    cy.get("span")
+      .filter((index, element) => Cypress.$(element).text().trim() === "전공*")
+      .parent()
+      .next("input")
+      .as("major");
+
+    cy.get("span")
+      .filter(
+        (index, element) => Cypress.$(element).text().trim() === "복수전공"
+      )
+      .parent()
+      .next("input")
+      .as("revengeMajor");
+
+    cy.get("span")
+      .filter((index, element) => Cypress.$(element).text().trim() === "부전공")
+      .parent()
+      .next("input")
+      .as("minor");
+
+    cy.get("button").contains("다음").as("nextButton");
+  });
+
+  it("전공 입력 후 다음 버튼 클릭하면 기타 질문 사항으로 이동", () => {
+    cy.get("@major").type("컴퓨터정보통신공학과");
+    cy.get("@nextButton").click();
+  });
+
+  it("전공, 복수전공 입력 후 다음 버튼 클릭하면 기타 질문 사항으로 이동", () => {
+    cy.get("@major").type("컴퓨터정보통신공학과");
+    cy.get("@revengeMajor").type("건축학과");
+    cy.get("@nextButton").click();
+  });
+
+  it("전공, 부전공 입력 후 다음 버튼 클릭하면 기타 질문 사항으로 이동", () => {
+    cy.get("@major").type("컴퓨터정보통신공학과");
+    cy.get("@minor").type("물리학과");
+    cy.get("@nextButton").click();
+  });
+
+  it("전공, 복수전공, 부전공 입력 후 다음 버튼 클릭하면 기타 질문 사항으로 이동", () => {
+    cy.get("@major").type("컴퓨터정보통신공학과");
+    cy.get("@revengeMajor").type("건축학과");
+    cy.get("@minor").type("물리학과");
+    cy.get("@nextButton").click();
+  });
+
+  it("아무것도 입력하지 않고 다음 버튼 클릭하면 '필수 질문을 작성해주세요.'라는 alert창이 보인다.", () => {
+    cy.get("@nextButton").click();
+    cy.on("window:alert", (text) => {
+      console.log("Alert message:", text);
+    });
+  });
+
+  it("전공을 입력하지 않고 복수전공, 부전공을 입력 후 다음 버튼 클릭하면 '필수 질문을 작성해주세요.'라는 alert창이 보인다.", () => {
+    cy.get("@revengeMajor").type("건축학과");
+    cy.get("@minor").type("물리학과");
+    cy.get("@nextButton").click();
+    cy.on("window:alert", (text) => {
+      console.log("Alert message:", text);
+    });
+  });
+});