refactor: RecruitDetail 수정

- useGetRequiredFieldCheck(필수값 체크) recruitmentId 제거
- RecruitDetailProps 타입 수정
- RecruitDetail 스토리북 수정
- RecruitDetail map 메서드 삭제

src/apis/recruitmentsDetail/useRequiredFieldCheck.ts

@@ -8,8 +8,8 @@ const getRequiredFieldCheck = async () => {
   return res.data;
 };
 
-export const useGetRequiredFieldCheck = (recruitmentId: number) =>
+export const useGetRequiredFieldCheck = () =>
   useQuery<RequiredFieldCheckProps, Error>({
-    queryKey: ['RequiredFieldCheckProps', recruitmentId],
+    queryKey: ['RequiredFieldCheckProps'],
     queryFn: () => getRequiredFieldCheck(),
   });

src/pages/recruit/RecruitDetail.tsx

@@ -2,6 +2,7 @@ import { type SectionProps, type RecruitDetailProps } from './RecruitType';
 import styled from '@emotion/styled';
 import { Flex } from '@/components/common';
 import { useTranslation } from 'react-i18next';
+import { userLocalStorage } from '@/utils/storage';
 
 const SectionWithTitle = ({ title, children }: SectionProps) => (
   <Section>
@@ -24,7 +25,6 @@ const SectionConditions = ({ title, children }: SectionProps) => (
 );
 
 export default function RecruitDetail({
-  detailedDescription,
   majorBusiness,
   eligibilityCriteria,
   preferredConditions,
@@ -35,8 +35,11 @@ export default function RecruitDetail({
   workType,
   workHours,
   salary,
+  koreanDetailedDescription,
+  vietnameseDetailedDescription,
 }: RecruitDetailProps) {
   const { t } = useTranslation();
+  const language = userLocalStorage.getLanguage();
   return (
     <RecruitDetailContainer>
       <SectionWithTitle title={t('recruit.conditions')}>
@@ -68,23 +71,12 @@ export default function RecruitDetail({
           </Flex>
         </Flex>
       </SectionWithTitle>
-      <SectionWithTitle title={t('recruit.eligibilityRequirements')}>
-        {eligibilityCriteria?.map((data) => {
-          return <li key={data.id}>{data.text}</li>;
-        })}
-      </SectionWithTitle>
-      <SectionWithTitle title={t('recruit.detailedDescription')}>{detailedDescription}</SectionWithTitle>
-      <SectionWithTitle title={t('recruit.mainResponsibilities')}>
-        {majorBusiness?.map((data) => {
-          return <li key={data.id}>{data.text}</li>;
-        })}
-      </SectionWithTitle>
-
-      <SectionWithTitle title={t('recruit.PreferredRequirements')}>
-        {preferredConditions?.map((data) => {
-          return <li key={data.id}>{data.text}</li>;
-        })}
+      <SectionWithTitle title={t('recruit.eligibilityRequirements')}>{eligibilityCriteria}</SectionWithTitle>
+      <SectionWithTitle title={t('recruit.detailedDescription')}>
+        {language && language === 'ko' ? koreanDetailedDescription : vietnameseDetailedDescription}
       </SectionWithTitle>
+      <SectionWithTitle title={t('recruit.mainResponsibilities')}>{majorBusiness}</SectionWithTitle>
+      <SectionWithTitle title={t('recruit.PreferredRequirements')}>{preferredConditions}</SectionWithTitle>
     </RecruitDetailContainer>
   );
 }

src/pages/recruit/RecruitType.ts

@@ -11,21 +11,15 @@ export interface RecruitCardProps {
   requiredFieldCheck?: RequiredFieldCheckProps;
 }
 
-interface Item {
-  id: number;
-  text: string;
-}
-
 export interface RecruitDetailProps {
   salary: string;
   workDuration: string;
   workDays: string;
   workType: string;
   workHours: string;
-  detailedDescription: string;
-  majorBusiness: Item[];
-  eligibilityCriteria: Item[];
-  preferredConditions: Item[];
+  majorBusiness: string;
+  eligibilityCriteria: string;
+  preferredConditions: string;
   employerName: string;
   companyName: string;
   koreanDetailedDescription: string;

src/pages/recruit/index.tsx

@@ -11,12 +11,10 @@ export default function Recruit() {
   const { recruitmentId = '1' } = useParams();
 
   const { data, isLoading } = useGetRecruitmentsDetail(Number(recruitmentId));
-  const { data: requiredFieldCheck } = useGetRequiredFieldCheck(Number(recruitmentId));
-
+  const { data: requiredFieldCheck } = useGetRequiredFieldCheck();
   if (isLoading || !data) {
     return <Spinner />;
   }
-
   return (
     <Layout>
       <Container>

src/pages/recruit/stories/RecruitDetail.stories.tsx

@@ -7,7 +7,6 @@ const meta: Meta<RecruitDetailProps> = {
   component: RecruitDetail,
   tags: ['autodocs'],
   argTypes: {
-    detailedDescription: { control: 'text' },
     majorBusiness: { control: 'object', description: 'id와 text 객체를 추가 및 수정해보십쇼!' },
     eligibilityCriteria: { control: 'object' },
     preferredConditions: { control: 'object' },
@@ -22,21 +21,9 @@ const meta: Meta<RecruitDetailProps> = {
     salary: { control: 'text' },
   },
   args: {
-    detailedDescription: '김밥 만들기 알바',
-    majorBusiness: [
-      { id: 1, text: '김밥 만들기' },
-      { id: 2, text: '재료 전처리' },
-      { id: 3, text: '마감 청소' },
-    ],
-    eligibilityCriteria: [
-      { id: 1, text: '비자를 가진 사람' },
-      { id: 2, text: '주 2회 이상 근무 가능한 사람' },
-    ],
-    preferredConditions: [
-      { id: 1, text: '한국어 의사 소통이 잘 되는 사람' },
-      { id: 2, text: '지각하지 않는 사람' },
-      { id: 3, text: '김밥에 있는 오이를 빼지 않는 사람' },
-    ],
+    majorBusiness: '김밥 만들기',
+    eligibilityCriteria: '비자를 가진 사람',
+    preferredConditions: '한국어 의사 소통이 잘 되는 사람',
     employerName: '이재용',
     companyName: '삼성전자',
     koreanDetailedDescription: '김밥 만들기 아르바이트',