💄 Add Application Info

#271 지원분야, 지원이유 UI 완료

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;

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

gongjakso/src/pages/ProfileRecruit/ProfileRecruit.jsx

@@ -310,7 +310,7 @@ const ProfileRecruit = () => {
                                                     onClick={() => {
                                                         setItem(i);
                                                         handleClick(i, item.id);
-                                                        setShowApply(true);
+                                                        // setShowApply(true);
                                                         setidNum(item.id);
                                                         setidName(
                                                             item.memberName,
@@ -319,6 +319,10 @@ const ProfileRecruit = () => {
                                                             item.id,
                                                             item.state,
                                                         );
+                                                        window.open(
+                                                            `http://localhost:3000/application/${item.id}`,
+                                                            '_blank',
+                                                        );
                                                     }}
                                                 >
                                                     지원서 보기

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>