메인페이지 api 통신 가능하게 수정 (#issue 233)

src/api/projectLists.api.ts

@@ -1,4 +1,6 @@
 import type {
+  ApiProjectLists,
+  ApiProjectStatistic,
   ProjectLists,
   ProjectStatistic,
 } from '../models/mainProjectLists';
@@ -7,20 +9,23 @@ import { httpClient } from './http.api';
 
 export const getProjectLists = async (params: SearchFilters) => {
   try {
-    const response = await httpClient.get<ProjectLists>('/project', {
+    const response = await httpClient.get<ApiProjectLists>('/project', {
       params,
     });
 
-    return response.data;
+    return response.data.data;
   } catch (e) {
     console.log('getProjectLists', e);
   }
 };
 
 export const getProjectStatistic = async () => {
   try {
-    const response = await httpClient.get<ProjectStatistic>('/project/count');
-    return response.data;
+    const response = await httpClient.get<ApiProjectStatistic>(
+      '/project/count'
+    );
+
+    return response.data.data;
   } catch (e) {
     console.log('getProjectStatistic', e);
   }

src/api/projectSearchFiltering.api.ts

@@ -1,32 +1,29 @@
-import type {
-  MethodTagHeader,
-  PositionTagHeader,
-  SillTagHeader,
-} from '../models/tags';
+import type { ApiMethodTag, ApiPositionTag, ApiSkillTag } from '../models/tags';
 import { httpClient } from './http.api';
 
 export const getSkillTag = async () => {
   try {
-    const response = await httpClient.get<SillTagHeader>('/skill-tag');
-    return response.data;
+    const response = await httpClient.get<ApiSkillTag>('/skill-tag');
+
+    return response.data.data;
   } catch (e) {
     console.log('getSkillTag', e);
   }
 };
 
 export const getPositionTag = async () => {
   try {
-    const response = await httpClient.get<PositionTagHeader>('/position-tag');
-    return response.data;
+    const response = await httpClient.get<ApiPositionTag>('/position-tag');
+    return response.data.data;
   } catch (e) {
     console.log('getPositionTag', e);
   }
 };
 
 export const getMethodTag = async () => {
   try {
-    const response = await httpClient.get<MethodTagHeader>('/method-type');
-    return response.data;
+    const response = await httpClient.get<ApiMethodTag>('/method-type');
+    return response.data.data;
   } catch (e) {
     console.log('getMethodTag', e);
   }

src/components/home/projectCardLists/cardList/CardList.tsx

@@ -11,44 +11,46 @@ interface CardListProps {
 }
 
 export default function CardList({ list }: CardListProps) {
-  const listPositionTag = list.positionTags.slice(0, 2);
-  const listSkillTag = list.skillTags.slice(0, 4);
-  const othersPosition = list.positionTags.length - 2;
-  const othersSkill = list.skillTags.length - 4;
+  console.log('리스트*-*-*-*-*-*-*', list);
+
+  const listPositionTag = list.positions.slice(0, 2);
+  const listSkillTag = list.skills.slice(0, 4);
+  const othersPosition = list.positions.length - 2;
+  const othersSkill = list.skills.length - 4;
   return (
     <S.Container>
       <S.Deadline>마감일: {formatDate(list.recruitmentEndDate)}</S.Deadline>
       <S.Title>{list.title}</S.Title>
       <S.PositionWrapper>
         <S.PositionTitle>모집 분야</S.PositionTitle>
         <S.TagsWrapper>
-          {Boolean(list.positionTags.length) &&
+          {Boolean(list.positions.length) &&
             listPositionTag.map((tag) => (
               <PositionButton
                 position={tag.name}
                 key={`cardListPosition-${tag.id}`}
               />
             ))}
-          {list.positionTags.length > listPositionTag.length && (
+          {list.positions.length > listPositionTag.length && (
             <S.EllipsisIconButton>+{othersPosition}</S.EllipsisIconButton>
           )}
         </S.TagsWrapper>
       </S.PositionWrapper>
       <S.TagsWrapper>
-        {Boolean(list.skillTags.length) &&
+        {Boolean(list.skills.length) &&
           listSkillTag.map((tag) => (
             <S.SkillTagImgWrapper key={`cardListSkill-${tag.id}`}>
               <S.SkillTagImg src={tag.img} alt={tag.name} />
             </S.SkillTagImgWrapper>
           ))}
-        {list.skillTags.length > listSkillTag.length && (
+        {list.skills.length > listSkillTag.length && (
           <S.EllipsisIconButton>+{othersSkill}</S.EllipsisIconButton>
         )}
       </S.TagsWrapper>
       <S.InfoWrapper>
         <S.ProfileWrapper>
-          <Avatar size={'2.8rem'} image={list.User.profileImg} />
-          <S.NickName>{list.User.nickname}</S.NickName>
+          <Avatar size={'2.8rem'} image={list.user.img} />
+          <S.NickName>{list.user.nickname}</S.NickName>
         </S.ProfileWrapper>
         <S.StatusWrapper>
           {list.isBeginner && <S.BeginnerImg src={beginner} alt='plant' />}

src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx

@@ -24,7 +24,7 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
   useEffect(() => {
     if (!selects.length) return;
     setChangeValue((prev) => {
-      if (searchFilters.positionTag !== 0 || searchFilters.methodId !== 0) {
+      if (searchFilters.positionTag !== 0 || searchFilters.methodType !== 0) {
         if (defaultValue === SEARCH_FILTERING_DEFAULT_VALUE.POSITION) {
           const positionTag = selects.find(
             (data) => data.id === searchFilters.positionTag
@@ -33,7 +33,7 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
           return positionTag ?? SEARCH_FILTERING_DEFAULT_VALUE.METHOD;
         } else if (defaultValue === SEARCH_FILTERING_DEFAULT_VALUE.METHOD) {
           const methodTag = selects.find(
-            (data) => data.id === searchFilters.methodId
+            (data) => data.id === searchFilters.methodType
           )?.name;
 
           return methodTag ?? SEARCH_FILTERING_DEFAULT_VALUE.METHOD;
@@ -42,7 +42,7 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
       return prev;
     });
   }, [
-    searchFilters.methodId,
+    searchFilters.methodType,
     searchFilters.positionTag,
     selects,
     defaultValue,
@@ -55,7 +55,7 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
     if (defaultValue === SEARCH_FILTERING_DEFAULT_VALUE.POSITION) {
       handleUpdateFilters('positionTag', tagId);
     } else if (defaultValue === SEARCH_FILTERING_DEFAULT_VALUE.METHOD) {
-      handleUpdateFilters('methodId', tagId);
+      handleUpdateFilters('methodType', tagId);
     }
   };
 

src/context/SearchFilteringContext.tsx

@@ -4,7 +4,7 @@ import type { SearchFilters } from '../models/SearchFilters';
 type SearchFilteringKey =
   | 'skillTag'
   | 'positionTag'
-  | 'methodId'
+  | 'methodType'
   | 'isBeginner'
   | 'keyword'
   | 'page';
@@ -25,7 +25,7 @@ export function SearchFilteringProvider({ children }: PropsWithChildren) {
   const [searchFilters, setSearchFilters] = useState<SearchFilters>({
     skillTag: [],
     positionTag: 0,
-    methodId: 0,
+    methodType: 0,
     isBeginner: false,
     keyword: '',
     page: 1,

src/hooks/useSearchFilteringSkillTag.ts

@@ -10,7 +10,7 @@ import type { MethodTag, PositionTag, SkillTag } from '../models/tags';
 export const useSearchFilteringSkillTag = () => {
   const [skillTagsData, setSkillTagsData] = useState<SkillTag[]>([]);
   const [positionTagsData, setPositionTagsData] = useState<PositionTag[]>([]);
-  const [methodTagsData, setMethodTagsData] = useState<MethodTag[]>();
+  const [methodTagsData, setMethodTagsData] = useState<MethodTag[]>([]);
 
   const queries = useQueries({
     queries: [
@@ -38,10 +38,11 @@ export const useSearchFilteringSkillTag = () => {
   const [skillQuery, positionQuery, methodQuery] = queries;
 
   useEffect(() => {
-    if (!skillQuery.data || !positionQuery.data) return;
-    setSkillTagsData(skillQuery.data.data);
-    setPositionTagsData(positionQuery.data.data);
-    setMethodTagsData(methodQuery.data?.data);
+    if (!skillQuery.data || !positionQuery.data || !methodQuery.data) return;
+
+    setSkillTagsData(skillQuery.data);
+    setPositionTagsData(positionQuery.data);
+    setMethodTagsData(methodQuery.data);
   }, [skillQuery.data, positionQuery.data, methodQuery.data]);
 
   return { skillTagsData, positionTagsData, methodTagsData };