develop -> main

Team-return · Nov 19, 2024 · b8f1385 · b8f1385
2 parents 1a15b64 + 8b6b03e
commit b8f1385
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 30 deletions.
diff --git a/public/WinterInternBanner.webp b/public/WinterInternBanner.webp
diff --git a/src/apis/applications/index.ts b/src/apis/applications/index.ts
@@ -1,6 +1,10 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+} from "@tanstack/react-query";
 import { useToastStore } from "@team-return/design-system";
-import { AxiosError } from "axios";
+import { Axios, AxiosError } from "axios";
 import { useRouter } from "next/navigation";
 import { instance } from "../axios";
 import {
@@ -109,3 +113,19 @@ export function useGetRejectionReason(applicationid: string) {
     return data;
   });
 }
+
+export function useDeleteApplication(applicationId: number) {
+  const { append } = useToastStore();
+  return useMutation(
+    async () => instance.delete(`${router}/${applicationId}`),
+    {
+      onSuccess: () => {
+        append({
+          title: "",
+          message: "지원이 취소되었습니다",
+          type: "GREEN",
+        });
+      },
+    }
+  );
+}
diff --git a/src/app/recruitments/apply/page.tsx b/src/app/recruitments/apply/page.tsx
@@ -3,7 +3,7 @@
 import { useApplyToCompany, useReapply } from "@/apis/applications";
 import {
   ApplyRequestItmeType,
-  AttachmentsType
+  AttachmentsType,
 } from "@/apis/applications/type";
 import { useCreatePresignedURL } from "@/apis/file";
 import { useGetRecruitmentsDetail } from "@/apis/recruitments";
@@ -17,15 +17,15 @@ import ShadowBox from "@/components/recruitments/apply/ShadowBox";
 import TitleBox from "@/components/recruitments/apply/TitleBox";
 import URLItem from "@/components/recruitments/apply/URLItem";
 import UrlListComponent from "@/components/recruitments/apply/UrlListComponent";
-import useMoadl from "@/hook/useModal";
+import useModal from "@/hook/useModal";
 import { Icon, useToastStore } from "@team-return/design-system";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
 export default function Apply() {
   const param = useSearchParams();
   const applicationId = param.get("application");
-  const { Modal, openModal, closeModal } = useMoadl();
+  const { Modal, openModal, closeModal } = useModal();
   const { mutate: onApplyToCompany, isLoading: applyIsLoading } =
     useApplyToCompany(param.get("id")!);
   const { mutate: onReapply, isLoading: reapplyIsLoading } =
@@ -133,7 +133,7 @@ export default function Apply() {
             <p className="mb-[60px] text-caption leading-caption font-r text-[#7f7f7f]">
               제출서류 : {recruitmentsDetial?.submit_document}
             </p>
-            
+
             <TitleBox title="제출서류">
               <Header_Contents title="포트폴리오">
                 <FileUploader
@@ -171,12 +171,12 @@ export default function Apply() {
             </TitleBox>
             <div className="flex justify-between items-end w-full mt-14">
               <div>
-              <p className="text-caption leading-caption font-r text-[#E74C3C]">
-                ※ 파일 첨부 시 파일 확장자를 확인해 주시기 바랍니다.
-              </p>
-              <p className="text-caption leading-caption font-r text-[#7f7f7f]">
-                pdf, ppt, pptx, hwp, zip, txt, mp4, png, jpg, svg
-              </p>
+                <p className="text-caption leading-caption font-r text-[#E74C3C]">
+                  ※ 파일 첨부 시 파일 확장자를 확인해 주시기 바랍니다.
+                </p>
+                <p className="text-caption leading-caption font-r text-[#7f7f7f]">
+                  pdf, ppt, pptx, hwp, zip, txt, mp4, png, jpg, svg
+                </p>
               </div>
               <GhostBtn
                 onClick={() => {
@@ -213,10 +213,10 @@ export default function Apply() {
             </div>
           </div>
           <div className="self-end mt-4">
-
             <GhostBtn
               onClick={() => {
                 onUploadFile(fileList);
+                closeModal();
               }}
             >
               지원하기

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -6,8 +6,13 @@ import CircleBtn from "./CircleBtn";
 
 //=======================================================================================================
 import PopularCompanyBanner from "@public/PopularCompanyBanner.webp";
+import WinterInternBanner from "@public/WinterInternBanner.webp";
 import { useRouter } from "next/navigation";
 const BannerList = [
+  {
+    img: WinterInternBanner,
+    url: "",
+  },
   {
     img: PopularCompanyBanner,
     url: "/companies/detail/?id=9",

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -52,7 +52,10 @@ function Header() {
           //알림모달
         }}
       >
-        <div className="h-[32px] bg-white flex gap-[10px] items-center">
+        <Link
+          href={"/mypage"}
+          className="h-[32px] bg-white flex gap-[10px] items-center"
+        >
           <Image
             className="rounded-full bg-[#D9D9D9] w-7 h-7"
             width={28}
@@ -68,7 +71,7 @@ function Header() {
           <p className="text-[#333333] text-b2 font-r">
             {profile?.student_name}
           </p>
-        </div>
+        </Link>
         <div>{/* <Icon icon={"Chevron"} size={16} color="gray90" /> */}</div>
       </div>
     </div>

diff --git a/src/components/mypage/AppliedICompanyItem.tsx b/src/components/mypage/AppliedICompanyItem.tsx
@@ -1,10 +1,18 @@
-import { useGetRejectionReason } from "@/apis/applications";
+import {
+  useDeleteApplication,
+  useGetRejectionReason,
+} from "@/apis/applications";
 import { ApplicationItemType } from "@/apis/applications/type";
+import useModal from "@/hook/useModal";
+import { getApplyKebabItems } from "@/util/object/kebabMenuItems";
+import { KebabItemType } from "@/util/type/kebabMenu";
 import { Icon } from "@team-return/design-system";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import FileDownload from "../common/Button/FIleDownload";
+import FillBtn from "../common/Button/FillBtn";
+import KebabMenu from "../common/Dropdown/KebabMenu";
 import ApplicationStatus from "./ApplicationStatus";
 
 export default function APpliedCompanyItem({
@@ -18,6 +26,18 @@ export default function APpliedCompanyItem({
   const parentRef = useRef<HTMLDivElement>(null);
   const childRef = useRef<HTMLDivElement>(null);
   const [isCollapse, setIsCollapse] = useState(false);
+  const { Modal, openModal, closeModal } = useModal();
+  const { mutate: deleteApplication } = useDeleteApplication(application_id);
+  const KebabItems: KebabItemType[] = getApplyKebabItems(
+    () => {
+      navigator.push(
+        `/recruitments/apply/?id=${recruitment_id}&application=${application_id}`
+      );
+    },
+    () => {
+      openModal();
+    }
+  );
 
   const handleButtonClick = useCallback(
     (event: React.MouseEvent) => {
@@ -66,22 +86,36 @@ export default function APpliedCompanyItem({
           />
         </div>
         <div className="flex flex-row items-center gap-4">
+          <ApplicationStatus status={application_status} />
           {(application_status === "REQUESTED" ||
             application_status === "REJECTED") && (
-            <p
-              onClick={(event) => {
-                event.stopPropagation();
-                navigator.push(
-                  `/recruitments/apply/?id=${recruitment_id}&application=${application_id}`
-                );
-              }}
-              className="underline text-caption leading-caption font-r text-[#7f7f7f] cursor-pointer"
-            >
-              재지원하기
-            </p>
+            <>
+              <KebabMenu items={KebabItems} />
+              <Modal>
+                <div className=" text-h5 font-b leading-h5">지원 취소</div>
+                <p className=" mt-2 text-b1 font-r leading-b1 text-[#7F7F7F]">
+                  {company}에 지원을 취소하겠습니까?
+                </p>
+                <div className=" flex justify-end gap-2 mt-8">
+                  <div
+                    onClick={closeModal}
+                    className="text-b2 leading-b2 font-b min-w-[122px] h-[48px] text-[#135C9D] flex gap-2 items-center py-[10px] px-6 border border-[#135C9D] rounded-[8px] hover:bg-[#135C9D] hover:text-white justify-center cursor-pointer"
+                  >
+                    취소
+                  </div>
+                  <FillBtn
+                    onClick={() => {
+                      deleteApplication();
+                      closeModal();
+                      location.reload();
+                    }}
+                  >
+                    확인
+                  </FillBtn>
+                </div>
+              </Modal>
+            </>
           )}
-
-          <ApplicationStatus status={application_status} />
         </div>
       </div>
       <div

diff --git a/src/hook/useModal.tsx b/src/hook/useModal.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect } from "react";
 import { ModalContext } from "@/context/ModalContext";
 
-export default function useMoadl() {
+export default function useModal() {
   const { isOpen, setIsOpen } = useContext(ModalContext);
 
   const preventScroll = (e: Event) => {

diff --git a/src/util/object/kebabMenuItems.ts b/src/util/object/kebabMenuItems.ts
@@ -68,3 +68,23 @@ export const getCompanyKebabItems = (
     },
   ];
 };
+
+export const getApplyKebabItems = (
+  onClickReSupport?: () => void,
+  onClickCancelApplication?: () => void
+): KebabItemType[] => {
+  return [
+    {
+      label: "재지원",
+      onClick: () => {
+        onClickReSupport && onClickReSupport();
+      },
+    },
+    {
+      label: "지원 취소",
+      onClick: () => {
+        onClickCancelApplication && onClickCancelApplication();
+      },
+    },
+  ];
+};