💄 Add Application Info

Gongjakso · Sep 30, 2024 · bc36fe6 · bc36fe6
1 parent cf273f0
commit bc36fe6
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 2 deletions.
diff --git a/gongjakso/src/assets/images/applicationLogo.svg b/gongjakso/src/assets/images/applicationLogo.svg
diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import * as S from './PdfUserApplicationStyled';
+import * as T from '../../features/modal/ApplyModal.styled';
+import { useParams } from 'react-router-dom';
+import Logo from '../../assets/images/applicationLogo.svg';
+import { getMyApplication } from '../../service/apply_service';
+import { getMyPortfolio } from '../../service/post_service';
+
+const PdfUserApplication = () => {
+    const { id } = useParams();
+
+    const [myApp, setmyApp] = useState([]);
+    const [portfolioData, setportfolioData] = useState([]);
+
+    useEffect(() => {
+        // [GET] 특정 지원자 지원서 조회 API
+        getMyApplication(id).then(res => {
+            setmyApp(res?.data);
+        });
+
+        // [GET] 내 포트폴리오 리스트 조회 API
+        getMyPortfolio().then(res => {
+            setportfolioData(res?.data);
+        });
+    }, [id]);
+
+    return (
+        <>
+            <S.TopBox>
+                <img src={Logo} alt="title-logo" />
+                <S.Title>{myApp?.applicant_name} 님의 포트폴리오</S.Title>
+                <S.Major>{myApp?.applicant_major}</S.Major>
+                <S.Major>{myApp?.applicant_phone}</S.Major>
+            </S.TopBox>
+
+            <S.GlobalBox>
+                <S.DetailBox>
+                    <S.SubTitle>지원분야</S.SubTitle>
+                    <div>
+                        {myApp?.recruit_part?.map((item, i) => (
+                            <T.RoundForm
+                                key={i}
+                                $isselected={
+                                    item.position === myApp?.apply_part
+                                }
+                                style={{ cursor: 'default' }}
+                            >
+                                {item.position}
+                            </T.RoundForm>
+                        ))}
+                    </div>
+                </S.DetailBox>
+                <S.DetailBox>
+                    <S.SubTitle>지원이유</S.SubTitle>
+                    <S.ContentBox>{myApp?.body}</S.ContentBox>
+                </S.DetailBox>
+            </S.GlobalBox>
+        </>
+    );
+};
+
+export default PdfUserApplication;
diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx
@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+export const TopBox = styled.div`
+    height: 21rem;
+    width: 100%;
+    background-color: rgba(195, 233, 255, 0.5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    img {
+        width: 72px;
+        margin-bottom: 2rem;
+    }
+`;
+
+export const Title = styled.p`
+    font-size: ${({ theme }) => theme.fontSize.xl};
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 1rem;
+`;
+
+export const Major = styled.p`
+    margin: 0.2rem;
+    font-size: ${({ theme }) => theme.fontSize.md};
+    font-family: 'PreMedium';
+`;
+
+export const GlobalBox = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 3rem 20rem;
+`;
+
+export const SubTitle = styled.p`
+    font-size: 1.6rem;
+    font-family: 'PreBold';
+`;
+
+export const DetailBox = styled.div`
+    padding: 1.5rem;
+`;
+
+export const ContentBox = styled.div`
+    margin-top: 1.5rem;
+    padding: 1.5rem;
+    width: 100%;
+    height: 22rem;
+    border: 1.5px solid ${({ theme }) => theme.Grey};
+    border-radius: 9px;
+    font-size: ${({ theme }) => theme.fontSize.m};
+`;
diff --git a/gongjakso/src/pages/ProfileRecruit/ProfileRecruit.jsx b/gongjakso/src/pages/ProfileRecruit/ProfileRecruit.jsx
@@ -302,8 +302,21 @@ const ProfileRecruit = () => {
                                             <S.BtnContainer>
                                                 <S.ShowBtn
                                                     onClick={() => {
-                                                        // 지원서 보기 버튼 클릭 시 항상 모달이 뜨도록 설정
-                                                        handleClick(i, item);
+                                                        setItem(i);
+                                                        handleClick(i, item.id);
+                                                        // setShowApply(true);
+                                                        setidNum(item.id);
+                                                        setidName(
+                                                            item.memberName,
+                                                        );
+                                                        ClickOpen(
+                                                            item.id,
+                                                            item.state,
+                                                        );
+                                                        window.open(
+                                                            `http://localhost:3000/application/${item.id}`,
+                                                            '_blank',
+                                                        );
                                                     }}
                                                 >
                                                     지원서 보기

diff --git a/gongjakso/src/router/Router.jsx b/gongjakso/src/router/Router.jsx
@@ -2,6 +2,7 @@ import { React, Suspense, lazy } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import RouteChangeTracker from '../utils/RouteChangeTracker';
 import ContestDetailPage from '../pages/ContestDetailPage/ContestDetailPage';
+import PdfUserApplication from '../pages/ProfileRecruit/PdfUserApplication';
 const ContestListPage = lazy(
     () => import('../pages/ContestListPage/ContestListPage'),
 );
@@ -121,6 +122,12 @@ const Router = () => {
                                 element={<UsePortfolio />}
                             />
                         </Route>
+
+                        {/* 지원서 보기 부분은 헤더 제거 */}
+                        <Route
+                            path="/application/:id"
+                            element={<PdfUserApplication />}
+                        />
                     </Routes>
                 </ScrollToTop>
             </BrowserRouter>