🔀 Add Postpage Myapplication modal

#262 공고 상세페이지 나의 지원서보기 임시 모달 추가
Gongjakso · Sep 27, 2024 · dcd5e43 · dcd5e43
2 parents bca67af + e0d77c7
commit dcd5e43
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 56 deletions.
diff --git a/gongjakso/src/features/modal/ApplyModal.styled.jsx b/gongjakso/src/features/modal/ApplyModal.styled.jsx
@@ -48,13 +48,12 @@ export const MainTitle = styled.div`
     font-size: 1.5rem;
     font-family: 'PreBold';
     letter-spacing: 0.5px;
-    margin-bottom: 30px;
+    margin-bottom: 1rem;
 `;
 
 // 텍스트 전체 틀
 export const DetailBox = styled.div`
     padding: 15px;
-    margin-top: 0.8rem;
     position: relative;
 `;
 
@@ -63,7 +62,7 @@ export const DetailBox2 = styled.div`
 `;
 
 export const SubTitle = styled.p`
-    font-size: ${({ theme }) => theme.fontSize.l};
+    font-size: ${({ theme }) => theme.fontSize.lg};
     font-family: 'PreBold';
 `;
 
@@ -191,7 +190,7 @@ export const ApplyBtn = styled.button`
     border-radius: 10px;
     margin: 15px;
     padding: 13px;
-    font-size: ${({ theme }) => theme.fontSize.m};
+    font-size: ${({ theme }) => theme.fontSize.md};
     background: ${({ theme }) => theme.box1};
     font-family: 'PreBold';
     color: white;

diff --git a/gongjakso/src/features/modal/ClickmyApply.jsx b/gongjakso/src/features/modal/ClickmyApply.jsx
@@ -2,11 +2,11 @@ import * as S from './ApplyModal.styled';
 import Close from '../../assets/images/Close.svg';
 import { useEffect, useState } from 'react';
 import { getMyApplication } from '../../service/apply_service';
+import { getMyPortfolio } from '../../service/post_service';
 
 const ClickmyApply = props => {
     const [myApp, setmyApp] = useState([]);
-    const [category, setCategory] = useState([]);
-    const [stackCategory, setstackCategory] = useState([]);
+    const [portfolioData, setportfolioData] = useState([]);
 
     // 스크롤 방지
     useEffect(() => {
@@ -23,13 +23,17 @@ const ClickmyApply = props => {
     }, []);
 
     useEffect(() => {
-        getMyApplication(props.id).then(res => {
+        getMyApplication(props.applyId).then(res => {
             setmyApp(res?.data);
-            setCategory(res?.data.category);
-            setstackCategory(res?.data.postStack);
-            // console.log(res?.data);
         });
-    }, [props.id]);
+
+        // [GET] 내 포트폴리오 리스트 조회 API
+        getMyPortfolio().then(res => {
+            setportfolioData(res?.data);
+        });
+    }, [props.applyId]);
+
+    // console.log(portfolioData);
 
     return (
         <div>
@@ -44,65 +48,68 @@ const ClickmyApply = props => {
                     </S.Backbtn>
 
                     <S.MainTitle>
-                        <p>{myApp?.memberName}</p>
-                        <S.Major>{myApp?.major}</S.Major>
+                        <p>{myApp?.applicant_name}</p>
+                        <S.Major>{myApp?.applicant_phone}</S.Major>
+                        <S.Major>{myApp?.applicant_major}</S.Major>
                     </S.MainTitle>
                     <S.DetailBox>
                         <S.SubTitle>지원 분야</S.SubTitle>
                         <S.FormBox>
-                            {category.map((item, i) => (
+                            {myApp?.recruit_part?.map((item, i) => (
                                 <S.RoundForm
                                     key={i}
-                                    $isselected={item === myApp?.recruitPart}
+                                    $isselected={
+                                        item.position === myApp?.apply_part
+                                    }
                                     style={{ cursor: 'default' }}
                                 >
-                                    {item === 'PLAN' && '기획'}
-                                    {item === 'DESIGN' && '디자인'}
-                                    {item === 'FE' && '프론트엔드'}
-                                    {item === 'BE' && '백엔드'}
-                                    {item === 'ETC' && '기타'}
-                                    {item === 'LATER' && '추후조정'}
+                                    {item.position}
                                 </S.RoundForm>
                             ))}
                         </S.FormBox>
                     </S.DetailBox>
 
-                    {/* 프로젝트의 경우 */}
-                    {props.type === true && (
-                        <S.DetailBox>
-                            <S.SubTitle>기술 스택</S.SubTitle>
-                            <S.FormBox>
-                                {stackCategory.map((item, i) => (
-                                    <S.RoundForm
+                    <S.DetailBox>
+                        <S.SubTitle>나의 포트폴리오</S.SubTitle>
+                        {/* <S.FormBox>
+                            <S.RoundForm
+                                $isselected={true}
+                                style={{ cursor: 'default' }}
+                            >
+                                {myApp?.is_private
+                                    ? '비공개'
+                                    : myApp?.portfolio_name}
+                            </S.RoundForm>
+                        </S.FormBox> */}
+                        <S.FormBox>
+                            {myApp?.is_private ? (
+                                <S.RoundForm
+                                    $isselected={true}
+                                    style={{ cursor: 'default' }}
+                                >
+                                    비공개
+                                </S.RoundForm>
+                            ) : (
+                                portfolioData?.map((item, i) => (
+                                    <S.PortForm
                                         key={i}
-                                        $isselected={myApp?.applyStack.includes(
-                                            item,
-                                        )}
+                                        $isselected={
+                                            item.PortfolioName ===
+                                            myApp?.portfolio_name
+                                        }
                                         style={{ cursor: 'default' }}
                                     >
-                                        {item === 'REACT' && 'React'}
-                                        {item === 'TYPESCRIPT' && 'TypeScript'}
-                                        {item === 'JAVASCRIPT' && 'JavaScript'}
-                                        {item === 'NEXTJS' && 'Next.js'}
-                                        {item === 'NODEJS' && 'Node.js'}
-                                        {item === 'JAVA' && 'Java'}
-                                        {item === 'SPRING' && 'Spring'}
-                                        {item === 'KOTLIN' && 'Kotlin'}
-                                        {item === 'SWIFT' && 'Swift'}
-                                        {item === 'FLUTTER' && 'Flutter'}
-                                        {item === 'ETC' && 'etc'}
-                                    </S.RoundForm>
-                                ))}
-                            </S.FormBox>
-                        </S.DetailBox>
-                    )}
+                                        {item.PortfolioName}
+                                    </S.PortForm>
+                                ))
+                            )}
+                        </S.FormBox>
+                    </S.DetailBox>
 
                     <S.DetailBox2>
                         <S.SubTitle>지원 이유</S.SubTitle>
                         <S.TextBox>
-                            <S.Content $h="220px">
-                                {myApp?.application}
-                            </S.Content>
+                            <S.Content $h="200px">{myApp?.body}</S.Content>
                         </S.TextBox>
                     </S.DetailBox2>
                 </S.Modal>

diff --git a/gongjakso/src/features/modal/Completed.jsx b/gongjakso/src/features/modal/Completed.jsx
@@ -39,7 +39,7 @@ const Completed = props => {
                 <S.Background2>
                     <S.Modal
                         $w="700px"
-                        $h="460px"
+                        $h="400px"
                         $bc={({ theme }) => theme.box1}
                     >
                         <S.MainTitle>'{props.title}' 팀 지원하기</S.MainTitle>

diff --git a/gongjakso/src/pages/DetailPage/DetailPageContest.jsx b/gongjakso/src/pages/DetailPage/DetailPageContest.jsx
@@ -223,7 +223,11 @@ const DetailPageContest = () => {
     return (
         <>
             {myAppOpen ? (
-                <ClickmyApply id={postId} setOpen={setmyAppOpen} type={false} />
+                <ClickmyApply
+                    applyId={userId}
+                    setOpen={setmyAppOpen}
+                    type={false}
+                />
             ) : null}
 
             {/* 지원하기 모달 */}
@@ -306,7 +310,7 @@ const DetailPageContest = () => {
 
                                 <S.ApplyBtn
                                     onClick={() => {
-                                        // setmyAppOpen(true);
+                                        setmyAppOpen(true);
                                     }}
                                 >
                                     지원서 보기

diff --git a/gongjakso/src/service/apply_service.js b/gongjakso/src/service/apply_service.js
@@ -104,17 +104,20 @@ export const patchOpen = async apply_id => {
     }
 };
 
-export const getMyApplication = async postid => {
-    const reqURL = `apply/my/${postid}`;
+// [GET] 나의 지원서 보기 API
+export const getMyApplication = async apply_id => {
+    const reqURL = `apply/${apply_id}`;
 
     try {
-        const response = await axiosInstance.get(reqURL);
+        const response = await axiosInstanceV2.get(reqURL);
+        console.log(response);
         return response.data;
     } catch (error) {
         console.log(error);
     }
 };
 
+// [DELETE] 공고 상세페이지 지원 취소 API
 export const applyCancel = async apply_id => {
     const reqURL = `apply/${apply_id}`;
 

diff --git a/gongjakso/src/service/post_service.js b/gongjakso/src/service/post_service.js
@@ -53,6 +53,7 @@ export const getPostDetail = async (contest_id, team_id) => {
 
     try {
         const response = await axiosInstanceV2.get(reqURL);
+        console.log(response);
         return response.data;
     } catch (error) {
         console.log(error);