문의하기 ui api 연결 (#issue 256)

src/api/inquiry.api.ts

@@ -0,0 +1,14 @@
+import { httpClient } from './http.api';
+
+export const postInquiry = async (formData: FormData) => {
+  try {
+    const response = await httpClient.post('/inquiry', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    console.log(response);
+  } catch (e) {
+    console.log('문의하기 에러', e);
+  }
+};

src/components/common/header/Header.tsx

@@ -74,7 +74,7 @@ function Header() {
                 <Link to={ROUTES.manageProjectsRoot}>
                   <S.Item>공고관리</S.Item>
                 </Link>
-                <Link to={ROUTES.support}>
+                <Link to={ROUTES.inquiry}>
                   <S.Item>문의하기</S.Item>
                 </Link>
                 <Link to='#' onClick={(e) => e.preventDefault()}>

src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
@@ -35,14 +35,24 @@ export const SkillTagButtonWrapper = styled.div`
   z-index: 1000;
 `;
 
-export const SkillTagButton = styled.button`
+export const SkillTagButton = styled.button<{ $isOpen: boolean }>`
   border-radius: 1.5rem;
   width: 100%;
   height: 100%;
   padding: 0 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  svg {
+    transition: transform 300ms ease-in-out;
+    transform: rotate(0deg);
+    ${({ $isOpen }) =>
+      $isOpen &&
+      css`
+        transform: rotate(180deg);
+      `}
+  }
 `;
 
 export const SkillTagBoxWrapper = styled.div`

src/components/home/searchFiltering/filteringContents/FilteringContents.tsx

@@ -40,7 +40,10 @@ export default function FilteringContents() {
   return (
     <S.Container>
       <S.SkillTagButtonWrapper ref={filteringRef}>
-        <S.SkillTagButton onClick={handleSkillTagBoxToggle}>
+        <S.SkillTagButton
+          onClick={handleSkillTagBoxToggle}
+          $isOpen={skillTagButtonToggle}
+        >
           언어선택
           <ChevronDownIcon />
         </S.SkillTagButton>

src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div``;
 
@@ -16,14 +16,24 @@ export const RefWrapper = styled.div`
   border-radius: 1.5rem;
 `;
 
-export const DefaultValueButton = styled.button`
+export const DefaultValueButton = styled.button<{ $isOpen: boolean }>`
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 1rem;
   border-radius: 1.5rem;
+
+  svg {
+    transition: transform 300ms ease-in-out;
+    transform: rotate(0deg);
+    ${({ $isOpen }) =>
+      $isOpen &&
+      css`
+        transform: rotate(180deg);
+      `}
+  }
 `;
 
 export const SelectWrapper = styled.div`

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

@@ -73,7 +73,10 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
     <S.Container>
       <S.Wrapper ref={filteringRef}>
         <S.RefWrapper>
-          <S.DefaultValueButton onClick={handleDropDownToggle}>
+          <S.DefaultValueButton
+            onClick={handleDropDownToggle}
+            $isOpen={dropDownToggle}
+          >
             {changeValue}
             <ChevronDownIcon />
           </S.DefaultValueButton>

src/components/mypage/ContentTab.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import { ROUTES } from '../../constants/routes';
-import MovedInquiredLink from '../common/customerService/MoveInquiredLink';
+import MovedInquiredLink from '../../pages/customerService/MoveInquiredLink';
 
 interface Filter {
   title: string;

src/components/mypage/activityLog/ActivityLog.tsx

@@ -1,10 +1,10 @@
-import { activityFilter } from '../../../constants/myPageFilter';
+import { ACTIVITY_FILTER } from '../../../constants/myPageFilter';
 import ContentTab from '../ContentTab';
 
 export default function ActivityLog() {
   return (
     <>
-      <ContentTab $justifyContent='space-around' filter={activityFilter} />
+      <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />
     </>
   );
 }

src/components/mypage/notifications/Notifications.tsx

@@ -1,8 +1,8 @@
-import { notificationFilter } from '../../../constants/myPageFilter';
+import { NOTIFICATION_FILTER } from '../../../constants/myPageFilter';
 import ContentTab from '../ContentTab';
 
 export default function Notifications() {
   return (
-    <ContentTab $justifyContent='space-between' filter={notificationFilter} />
+    <ContentTab $justifyContent='space-between' filter={NOTIFICATION_FILTER} />
   );
 }

src/components/userPage/joinedProject/UserJoinProject.tsx

@@ -22,9 +22,9 @@ const UserJoinProject = () => {
   return (
     <S.Section>
       <S.Wrapper>
-        <S.TitleWrapper>
-          <Title size='semiLarge'>참여한 프로젝트 리스트</Title>
-        </S.TitleWrapper>
+        <S.FilterWrapper>
+          <S.FilterTitle>참여한 프로젝트 리스트</S.FilterTitle>
+        </S.FilterWrapper>
         {userJoinedProjectListData?.acceptedProjects &&
         userJoinedProjectListData?.acceptedProjects?.length > 0 ? (
           <S.Container>
@@ -44,9 +44,9 @@ const UserJoinProject = () => {
         )}
       </S.Wrapper>
       <S.Wrapper>
-        <S.TitleWrapper>
-          <Title size='semiLarge'>기획한 프로젝트 리스트</Title>
-        </S.TitleWrapper>
+        <S.FilterWrapper>
+          <S.FilterTitle>기획한 프로젝트 리스트</S.FilterTitle>
+        </S.FilterWrapper>
         {userJoinedProjectListData?.ownProjects &&
         userJoinedProjectListData?.ownProjects?.length > 0 ? (
           <S.Container>

src/constants/customerService.ts

@@ -0,0 +1,14 @@
+export const INQUIRY_CATEGORY = [
+  { title: '사이트 오류' },
+  { title: '공고모집' },
+  { title: '제안하기' },
+  { title: '기타' },
+] as const;
+
+export const EMPTY_IMAGE =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' as const;
+
+export const INQUIRY_MESSAGE = {
+  categoryDefault: '카테고리',
+  fileDefault: '선택된 파일이 없습니다.',
+};

src/constants/myPageFilter.ts

@@ -1,6 +1,6 @@
 import { ROUTES } from './routes';
 
-export const notificationFilter = [
+export const NOTIFICATION_FILTER = [
   { title: '전체', url: ``, id: 0 },
   {
     title: '지원한 프로젝트',
@@ -22,7 +22,7 @@ export const notificationFilter = [
   },
 ] as const;
 
-export const activityFilter = [
+export const ACTIVITY_FILTER = [
   { title: '내 댓글', url: ROUTES.comments, id: 0 },
   { title: '내 문의글', url: ROUTES.activityInquiries, id: 1 },
 ] as const;

src/hooks/usePostInquiry.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { postInquiry } from '../api/inquiry.api';
+import { AxiosError } from 'axios';
+
+export const usePostInquiry = () => {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation<void, AxiosError, FormData>({
+    mutationFn: (formData) => postInquiry(formData),
+    onSuccess: () => {
+      queryClient.invalidateQueries();
+    },
+  });
+
+  return mutate;
+};

src/models/inquiry.ts

@@ -0,0 +1,5 @@
+export interface InquiryFormData {
+  category: string;
+  title: string;
+  content: string;
+}

src/models/userProject.ts

@@ -27,7 +27,7 @@ export interface ApiAppliedProject extends ApiCommonType {
 
 export interface SelectUserProject {
   acceptedProjects: JoinedProject[];
-  ownProjects: AppliedProject[];
+  ownProjects: JoinedProject[];
 }
 
 export interface ApiSelectUserProject extends ApiCommonType {

src/components/common/customerService/MoveInquiredLink.tsx → src/pages/customerService/MoveInquiredLink.tsx

@@ -1,4 +1,4 @@
-import { ROUTES } from '../../../constants/routes';
+import { ROUTES } from '../../constants/routes';
 import * as S from './MoveInquiredLink.styled';
 
 export default function MovedInquiredLink() {