fix-fe: 지원자 상세 정보 모달에서 미사용 탭 제거 (#388)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Seongjin Hong <[email protected]>

frontend/src/components/appModal/index.tsx

@@ -3,7 +3,6 @@ import { useSpecificApplicantId } from '@contexts/SpecificApplicnatIdContext';
 import ApplicantBaseInfo from './ApplicantBaseInfo';
 
 import ModalHeader from '../common/ModalHeader';
-import AppDetailHeader from './ApplicantDetailInfo/AppDetailHeader';
 import QuestionSection from './ApplicantDetailInfo/QuestionSection';
 import S from './style';
 import ApplicantEvalInfo from './ApplicantEvalInfo';
@@ -13,19 +12,6 @@ export default function ApplicantModal() {
   const { applicantId } = useSpecificApplicantId();
   if (!applicantId) return null;
 
-  const headerTabs = [
-    {
-      id: 0,
-      name: '지원서',
-      onClick: () => console.log('지원서가 클릭되었습니다.'),
-    },
-    {
-      id: 1,
-      name: '이력서',
-      onClick: () => console.log('이력서가 클릭되었습니다.'),
-    },
-  ];
-
   return (
     <BaseModal>
       <S.Container>
@@ -38,11 +24,10 @@ export default function ApplicantModal() {
         </S.ModalSidebar>
 
         <S.ModalNav>
-          <AppDetailHeader
-            headerTabs={headerTabs}
-            activeTabId={0}
-            content="지원 시 접수된 지원서 내용입니다."
-          />
+          <S.ModalNavHeaderContainer>
+            <S.ModalNavHeader>지원서</S.ModalNavHeader>
+            <S.ModalNavContent>지원 시 접수된 지원서 내용입니다.</S.ModalNavContent>
+          </S.ModalNavHeaderContainer>
         </S.ModalNav>
 
         <S.ModalMain>

frontend/src/components/appModal/style.ts

@@ -33,6 +33,29 @@ const ModalNav = styled.div`
   border-bottom: 0.1rem solid ${({ theme }) => theme.baseColors.grayscale[600]};
 `;
 
+const ModalNavHeaderContainer = styled.div`
+  height: 100%;
+  padding: 1.8rem 1.6rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ModalNavHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+
+  ${({ theme }) => theme.typography.heading[600]};
+  color: ${({ theme }) => theme.colors.text.default};
+`;
+
+const ModalNavContent = styled.div`
+  ${({ theme }) => theme.typography.common.paragraph};
+`;
+
 const ModalMain = styled.div`
   grid-area: main;
   border-right: 0.1rem solid ${({ theme }) => theme.baseColors.grayscale[600]};
@@ -56,6 +79,9 @@ const S = {
   ModalHeader,
   ModalSidebar,
   ModalNav,
+  ModalNavHeaderContainer,
+  ModalNavHeader,
+  ModalNavContent,
   ModalMain,
   ModalAside,
   ModalEvalHeader,