feat: 자기소개서 상태 api

KUSITMS-29th-TEAM-B · May 20, 2024 · 8f5eba7 · 8f5eba7
1 parent d802713
commit 8f5eba7
Show file tree

Hide file tree

Showing 6 changed files with 359 additions and 51 deletions.
diff --git a/src/components/JD/JDDeleteModal.tsx b/src/components/JD/JDDeleteModal.tsx
@@ -0,0 +1,147 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import warning from "../../assets/icons/icon_delete_warning.svg";
+import { useNavigate } from "react-router-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const JDDeleteModal: FC<ModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Overlay>
+      <ModalWrapper>
+        <MainWrapper>
+          <img src={warning} alt="warning" />
+          <div className="maintext">이 공고를 삭제하시겠어요?</div>
+          <div className="subtext">
+            한번 삭제한 공고는 복구할 수 없으니
+            <br /> 신중히 결정해주세요.
+          </div>
+        </MainWrapper>
+        <ButtonWrapper>
+          <CloseButton onClick={onClose}>
+            <div>취소</div>
+          </CloseButton>
+          <ConfirmButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <div>네, 삭제할게요</div>
+          </ConfirmButton>
+        </ButtonWrapper>
+      </ModalWrapper>
+    </Overlay>
+  );
+};
+
+export default JDDeleteModal;
+
+const Overlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+`;
+
+const ModalWrapper = styled.div`
+    position: relative;
+    max-width: 30rem;
+    height: 21rem;
+    border-radius: 1.25rem;
+    background: #FFF;
+    width: 100%;
+`;
+
+const MainWrapper = styled.div`
+    width: 30rem;
+    height: 22rem;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 3rem;
+    align-items: center;
+    flex-direction: column;
+    .maintext {
+        color: var(--neutral-700, #343A5D);
+        text-align: center;
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.625rem;
+        letter-spacing: -0.055rem;
+        margin-top: 1rem;
+    }
+    .subtext {
+        color: var(--neutral-500, #A6AAC0);
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+        letter-spacing: -0.02rem;
+        margin-top: 1.25rem;
+        margin-bottom: 2.7rem;
+    }
+`;
+
+const ButtonWrapper = styled.div`
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+`;
+
+const ConfirmButton = styled.div`
+    width: 15rem;
+    height: 4.5rem;
+    flex-shrink: 0;
+    border-radius: 0rem 0rem 1.25rem 0rem;
+    background: var(--main-500, #7D82FF);
+    display: flex;
+    justify-content: center;
+    div {
+        display: flex;
+        align-items: center;
+        color: var(--neutral-0, #FFF);  
+        font-size: 1.25rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 140%; 
+        letter-spacing: -0.0375rem;
+    }
+`;
+
+const CloseButton = styled.div`
+    width: 15rem;
+    height: 4.5rem;
+    flex-shrink: 0;
+    border-radius: 0rem 0rem 0rem 1.25rem;
+    background: var(--neutral-400, #D9DBE6);
+    display: flex;
+    justify-content: center;
+    div {
+        display: flex;
+        align-items: center;
+        color: var(--neutral-600, #63698D);
+        text-align: center;
+        font-family: Pretendard;
+        font-size: 1.25rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 140%;
+        letter-spacing: -0.0375rem;
+    }
+`;
diff --git a/src/pages/ApplyEditPage.tsx b/src/pages/ApplyEditPage.tsx
@@ -16,7 +16,7 @@ import DiscardModal from "../components/JD/DiscardModal";
 import JDContainer from "../components/JD/JDContainer";
 import ExperienceBox from "../components/JD/ExpContainer";
 import { ApplyAPI } from "../types/type";
-import { applyget, applypost } from "../services/jd";
+import { applyget, applypatch, statuspatch } from "../services/jd";
 import { getCookie } from "../services/cookie";
 
 const ApplyEditPage: React.FC = () => {
@@ -27,7 +27,7 @@ const ApplyEditPage: React.FC = () => {
     { question: "", answer: "" },
   ]); //문항 데이터
   const [editing, setEditing] = useState(false); //수정중 여부
-  const [completed, setCompleted] = useState(false); //작성 완료
+  const [completed, setCompleted] = useState(""); //작성 완료
   const [isAllFilled, setIsAllFilled] = useState(false); // 문항이 빈칸이 없는지 검사
 
   const [detailId, setDetailId] = useRecoilState<number>(detailStore); //경험의 고유 id(0이 아니여야함)
@@ -127,13 +127,32 @@ const ApplyEditPage: React.FC = () => {
     }
   };
 
+  const handleCompeletedButton = () => {
+    if (completed === "작성완료") {
+      setCompleted("작성중");
+    } else if (completed === "작성중") {
+      setCompleted("작성완료");
+    } else if (completed === "") {
+      setCompleted("작성완료");
+    }
+  };
+
   const handleSaveButton = () => {
     if (isAllFilled) {
       setEditing(false);
       //api post 요청
     }
   };
 
+  useEffect(() => {
+    if (completed !== "") {
+      console.log("completed 값이 변했습니다:", completed);
+      if (jdId) {
+        handleStatusPatch(jdId, user.token);
+      }
+    }
+  }, [completed]);
+
   const getApplyData = async (jdId: string, token: string) => {
     try {
       const response = await applyget(jdId, token);
@@ -150,17 +169,17 @@ const ApplyEditPage: React.FC = () => {
   };
 
   //자기소개서 post api 요청
-  const handleApplyPost = async (
+  const handleApplyPatch = async (
     applyData: ApplyAPI[],
     token: string,
     jobId: string
   ) => {
     if (isAllFilled) {
       setEditing(false);
       try {
-        const response = await applypost(applyData, token, jobId);
+        const response = await applypatch(applyData, token, jobId);
         console.log(response);
-        nav(`jd/${jdId}`);
+        nav(`/jd/apply/edit/${jdId}`);
       } catch (error) {
         console.error(error);
         alert(JSON.stringify(error));
@@ -170,6 +189,19 @@ const ApplyEditPage: React.FC = () => {
     }
   };
 
+  const handleStatusPatch = async (jobId: string, token: string) => {
+    try {
+      const response = await statuspatch(jobId, token);
+      console.log(response);
+      if (jdId) {
+        getApplyData(jdId, user.token);
+      }
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
   //activecontainer 변경사항 있을 시 detailId 초기화
   useEffect(() => {
     if (!active) {
@@ -231,7 +263,9 @@ const ApplyEditPage: React.FC = () => {
               <img
                 src={arrowLeft}
                 alt="arrowicon"
-                onClick={() => (editing ? openDiscardModal() : nav(-1))}
+                onClick={() =>
+                  editing ? openDiscardModal() : nav(`/jd/${jdId}`)
+                }
               />
               자기소개서 작성
             </Title>
@@ -241,23 +275,26 @@ const ApplyEditPage: React.FC = () => {
               <ToggleWrapper>
                 작성완료
                 <Toggle
-                  isActive={completed}
-                  onClick={() => (!editing ? setCompleted(!completed) : null)}
+                  isActive={completed === "작성완료"}
+                  onClick={() => (!editing ? handleCompeletedButton() : null)}
                 />
               </ToggleWrapper>
               {editing ? (
                 <SaveButton
                   isNotNull={isAllFilled}
                   onClick={() => {
                     if (isAllFilled) {
-                      handleApplyPost(applyData, user.token, jdId);
+                      handleApplyPatch(applyData, user.token, jdId);
                     }
                   }}
                 >
                   저장
                 </SaveButton>
               ) : (
-                <EditButton iscanEdit={completed} onClick={handleEditButton}>
+                <EditButton
+                  iscanEdit={completed === "작성중"}
+                  onClick={handleEditButton}
+                >
                   수정
                 </EditButton>
               )}

diff --git a/src/pages/ApplyPage.tsx b/src/pages/ApplyPage.tsx
@@ -141,7 +141,7 @@ const ApplyPage: React.FC = () => {
       try {
         const response = await applypost(applyData, token, jobId);
         console.log(response);
-        nav(`jd/${jdId}`);
+        nav(`/jd/apply/edit/${jdId}`);
       } catch (error) {
         console.error(error);
         alert(JSON.stringify(error));

diff --git a/src/pages/JDDetailPage.tsx b/src/pages/JDDetailPage.tsx
@@ -14,9 +14,10 @@ import calendarIcon from "../assets/icons/icon_calendar.svg";
 import linkIcon from "../assets/icons/icon_link.svg";
 import ExperienceBox from "../components/JD/ExpContainer";
 import { formatDateRange } from "./JDListPage";
-import { jobdescriptionget } from "../services/jd";
+import { jobdelete, jobdescriptionget } from "../services/jd";
 import { getCookie } from "../services/cookie";
 import PlaneLoading from "../components/common/Loading";
+import JDDeleteModal from "../components/JD/JDDeleteModal";
 
 const JDDetailPage: React.FC = () => {
   const [active, setActive] = useState(false);
@@ -38,6 +39,20 @@ const JDDetailPage: React.FC = () => {
   const firstTime = jdData.writeStatus === "NOT_APPLIED"; // 자기소개서 작성한 이력 여부
   const user = getCookie("user");
   const [isLoading, setIsLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+    document.body.style.overflow = "hidden";
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    if (jdId) {
+      handleJDDelete(jdId, user.token);
+    }
+    document.body.style.overflow = "auto";
+  };
 
   const ExptoggleContainer = () => {
     if (!active) {
@@ -106,8 +121,25 @@ const JDDetailPage: React.FC = () => {
     setIsLoading(false);
   };
 
+  const handleJDDelete = async (jobId: string, token: string) => {
+    try {
+      const response = await jobdelete(jobId, token);
+      console.log(response);
+      nav("/jd");
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
   return (
     <StyledDivContainer className="page">
+      {
+        <JDDeleteModal
+          isOpen={isModalOpen}
+          onClose={closeModal}
+        ></JDDeleteModal>
+      }
       {!isLoading ? (
         <MainContainer>
           <CenteredContainer
@@ -127,7 +159,11 @@ const JDDetailPage: React.FC = () => {
             </ToggleContainer>
             <TopTitleBar>
               <Title>
-                <img src={arrowLeft} alt="arrowicon" onClick={() => nav(-1)} />
+                <img
+                  src={arrowLeft}
+                  alt="arrowicon"
+                  onClick={() => nav(`/jd`)}
+                />
                 공고 상세
               </Title>
               <TopButton onClick={handleNavigate}>
@@ -156,7 +192,7 @@ const JDDetailPage: React.FC = () => {
                   >
                     수정
                   </div>
-                  <div>삭제</div>
+                  <div onClick={openModal}>삭제</div>
                 </div>
               </JobStatusBar>
               <JobTopBox>