Merge pull request #119 from KUSITMS-29th-TEAM-B/feat/#101

Feat/#101 JD 공고 수정,삭제 / 자기소개서 작성완료 상태 변경 / JD list 필터링

src/App.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
 import Navbar from "./components/common/Navbar";
-import JDEditPage from "./pages/JDEditPage";
 import JDDetailPage from "./pages/JDDetailPage";
 import JDPlusPage from "./pages/JDPlusPage";
 import JDListPage from "./pages/JDListPage";
@@ -15,7 +14,9 @@ import ProfilePage from "./pages/ProfilePage";
 import ProfileEditPage from "./pages/ProfileEditPage";
 import PrivateRoute from "./services/router/PrivateRoute";
 import InfoPage from "./pages/InfoPage";
-import JDWritePage from "./pages/JDWritePage";
+import ApplyEditPage from "./pages/ApplyEditPage";
+import ApplyPage from "./pages/ApplyPage";
+import JDEditPage from "./pages/JDEditPage";
 import ExperienceEditPage from "./pages/ExperienceEditPage";
 
 const App: React.FC = () => {
@@ -27,17 +28,25 @@ const App: React.FC = () => {
         <Route element={<PrivateRoute />} path="/">
           <Route path="/jd" element={<JDListPage />} />
         </Route>
+        {/* 공고 등록 JDPlusPage */}
+        <Route element={<PrivateRoute />} path="/">
+          <Route path="/jd/post" element={<JDPlusPage />} />
+        </Route>
+        {/* 공고 상세  / JDDetailPage */}
         <Route element={<PrivateRoute />} path="/">
-          <Route path="/jd/detail/:id" element={<JDDetailPage />} />
+          <Route path="/jd/:id" element={<JDDetailPage />} />
         </Route>
+        {/* 공고 수정  / JDEditPage*/}
         <Route element={<PrivateRoute />} path="/">
           <Route path="/jd/edit/:jdId" element={<JDEditPage />} />
         </Route>
+        {/* 자기소개서 - 수정 / ApplyEditPage*/}
         <Route element={<PrivateRoute />} path="/">
-          <Route path="/jd/:jdId" element={<JDWritePage />} />
+          <Route path="/jd/apply/edit/:jdId" element={<ApplyEditPage />} />
         </Route>
+        {/* 자기소개서 - 등록 / ApplyPage*/}
         <Route element={<PrivateRoute />} path="/">
-          <Route path="/jd/post" element={<JDPlusPage />} />
+          <Route path="/jd/apply/:jdId" element={<ApplyPage />} />
         </Route>
         <Route element={<PrivateRoute />} path="/">
           <Route path="/experience" element={<ExperiencePage />} />

src/components/JD/Announcement.tsx

@@ -16,7 +16,7 @@ const JobAnnouncementCard: React.FC<JobAnnouncementProps> = ({
   const nav = useNavigate();
 
   return (
-    <Container onClick={() => nav(`/jd/detail/${id}`)}>
+    <Container onClick={() => nav(`/jd/${id}`)}>
       <TopContainer>
         <StatusContainer>
           {status !== "CLOSED" && <DdayContainer>{"D-" + dday}</DdayContainer>}

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

src/components/JD/JDEditModal.tsx

@@ -0,0 +1,156 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import warning from "../../assets/icons/icon_warning.svg";
+import { useNavigate } from "react-router-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  jdId: string;
+}
+
+const JDEditModal: FC<ModalProps> = ({ isOpen, onClose, jdId }) => {
+  const nav = useNavigate();
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Overlay>
+      <ModalWrapper>
+        <MainWrapper>
+          <img src={warning} alt="warning" />
+          <div className="maintext">이전 페이지로 돌아가시겠어요?</div>
+          <div className="subtext">
+            저장하지 않으면
+            <div>
+              입력한 내용은 <span>복원할 수 없어요!</span>
+            </div>
+          </div>
+        </MainWrapper>
+        <ButtonWrapper>
+          <CloseButton onClick={onClose}>
+            <div>취소</div>
+          </CloseButton>
+          <ConfirmButton
+            onClick={() => {
+              onClose();
+              nav(`/jd/${jdId}`);
+            }}
+          >
+            <div>네, 돌아갈게요</div>
+          </ConfirmButton>
+        </ButtonWrapper>
+      </ModalWrapper>
+    </Overlay>
+  );
+};
+
+export default JDEditModal;
+
+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: 21rem;
+    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: 1.25rem;
+    }
+    .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;
+        span{
+            color: var(--main-500, #7D82FF);
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+    }
+`;
+
+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;
+    }
+`;