모집 공고 생성 페이지 일부 수정( feat/#355 )

src/api/admin/customerService/inquiry.api.ts

@@ -21,6 +21,11 @@ export const getAllInquiries = async (
   }
 };
 
+export const getInquiriesPreview = async () => {
+  const response = await httpClient.get<ApiAdminInquiry>(`/inquiry/preview`);
+  return response.data.data;
+};
+
 export const getInquiryDetail = async (id: string) => {
   try {
     const response = await httpClient.get<ApiAdminInquiryDetail>(

src/api/admin/tag.api.ts

@@ -1,5 +1,5 @@
 import type { ApiCommonBasicType } from '../../models/apiCommon';
-import type { TagFormType } from '../../models/tags';
+
 import { httpClient } from '../http.api';
 
 export const postSkillTag = async (formData: FormData) => {

src/api/http.api.ts

@@ -1,12 +1,11 @@
 import axios, { AxiosRequestConfig } from 'axios';
 import useAuthStore from '../store/authStore';
-import { postRefresh } from './auth.api';
 
 export const BASE_URL = `${import.meta.env.VITE_APP_API_BASE_URL}`;
 const DEFAULT_TIMEOUT = 15000;
 
 export const createClient = (config?: AxiosRequestConfig) => {
-  const { login, logout } = useAuthStore.getState();
+  const { logout } = useAuthStore.getState();
 
   const axiosInstance = axios.create({
     baseURL: BASE_URL,

src/components/admin/adminInquiry/AdminInquiryList.tsx

@@ -8,7 +8,7 @@ import type { AdminInquiryChangeSearchParams } from '../../../models/inquiry';
 
 export type SearchParamsInquiryKeyType = keyof AdminInquiryChangeSearchParams;
 export default function AdminInquiryList() {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const userId = searchParams.get('userId') || '';
   const startDate = searchParams.get('startDate') || '';
   const endDate = searchParams.get('endDate') || '';

src/components/admin/adminTags/AdminTagsBasic.tsx

@@ -4,7 +4,7 @@ import { useAdminSkillTag } from '../../../hooks/admin/useAdminTag';
 import { useLocation } from 'react-router-dom';
 import AdminTagCRUD from './AdminTagCRUD';
 import AdminSkillTagItems from './skills/AdminSkillTagItems';
-import type { TagFormType } from '../../../models/tags';
+
 import AdminPositionItems from './positions/AdminPositionItems';
 
 export type TWitchTag = 'skill' | 'position';

src/components/admin/adminUserReport/AdminReportDetail.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './AdminReportDetail.styled';
 import AdminTitle from '../../common/admin/title/AdminTitle';
 import Avatar from '../../common/avatar/Avatar';

src/components/admin/mainCard/graphCard/GraphCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './GraphCard.styled';
 import { Line } from 'react-chartjs-2';
 import 'chart.js/auto';
@@ -58,7 +57,6 @@ const options: ChartOptions<'line'> = {
     x: {
       grid: {
         display: true,
-        borderDash: [5, 5],
         color: 'rgba(0,0,0,0.1)',
       },
       ticks: {
@@ -71,9 +69,6 @@ const options: ChartOptions<'line'> = {
     y: {
       grid: {
         display: true,
-        drawBorder: false,
-
-        borderDash: [5, 5],
         color: 'rgba(0,0,0,0.1)',
       },
       ticks: {

src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './AllUserPreview.styled';
 import Avatar from '../../../common/avatar/Avatar';
 import { ADMIN_ROUTE } from '../../../../constants/routes';

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx

@@ -1,19 +1,13 @@
 import * as S from './InquiresPreview.styled';
-import { useGetAllInquiries } from '../../../../hooks/admin/useGetAllInquiries';
 import Avatar from '../../../common/avatar/Avatar';
 import { ADMIN_ROUTE } from '../../../../constants/routes';
 import arrow_right from '../../../../assets/ArrowRight.svg';
 import Spinner from '../../../user/mypage/Spinner';
-import { AdminInquiryChangeSearchParams } from '../../../../models/inquiry';
+import { useGetInquiriesPreview } from '../../../../hooks/admin/useGetInquiriesPreview';
 
 const InquiresPreview = () => {
-  const childSearchParams: AdminInquiryChangeSearchParams = {
-    userId: '',
-    startDate: '',
-    endDate: '',
-  };
-  const { allInquiriesData, isLoading, isFetching } =
-    useGetAllInquiries(childSearchParams);
+  const { allInquiriesPreviewData, isLoading, isFetching } =
+    useGetInquiriesPreview();
 
   if (isLoading || isFetching) {
     return (
@@ -23,13 +17,13 @@ const InquiresPreview = () => {
     );
   }
 
-  if (!allInquiriesData || allInquiriesData.length === 0) {
+  if (!allInquiriesPreviewData || allInquiriesPreviewData.length === 0) {
     return <S.Container>등록된 문의가 없습니다.</S.Container>;
   }
 
   return (
     <S.Container>
-      {allInquiriesData?.map((inquiry) => (
+      {allInquiriesPreviewData.map((inquiry) => (
         <S.Wrapper key={inquiry.id}>
           <S.Content>
             {/* <Link to={`${ADMIN_ROUTE.}`} */}

src/components/admin/previewComponent/noticePreview/NoticePreview.tsx

@@ -15,7 +15,7 @@ const NoticePreview = () => {
   }
 
   if (!noticeData) {
-    return <S.Container>공지사힝이 없습니다.</S.Container>;
+    return <S.Container>공지사항이 없습니다.</S.Container>;
   }
 
   return (

src/components/admin/userCard/UserCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './UserCard.styled';
 import Avatar from '../../common/avatar/Avatar';
 import type { AllUser } from '../../../models/auth';

src/components/user/comment/DropDownItem.tsx

@@ -61,7 +61,6 @@ const DropDownItem = ({
           targetId={recommentId ? recommentId : commentId}
           type={recommentId ? 'recomment' : 'comment'}
           onClose={handleCloseReportModal}
-          route={projectId}
         />
       )}
     </>

src/components/user/mypage/ContentTab.tsx

@@ -57,7 +57,6 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
             to={filter.url}
             onClick={() => handleChangeId(filter.id as number)}
           >
-            {' '}
             <S.WrapperTitle $selected={filter?.id === filterId}>
               <S.FilterTitle>{filter.title}</S.FilterTitle>
             </S.WrapperTitle>

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import type { MyInquiries } from '../../../../../../models/activityLog';
 import * as S from './Inquiry.styled';
 import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';
@@ -22,14 +22,14 @@ export default function Inquiry({ list, no }: InquiryProps) {
     url: '',
   });
   const answer = list.answer || '';
-  const answerRef = useRef<HTMLTextAreaElement>(null);
+  // const answerRef = useRef<HTMLTextAreaElement>(null);
 
-  const handleChangeAnswerRef = () => {
-    if (answerRef && answerRef.current) {
-      answerRef.current.style.height = 'auto';
-      answerRef.current.style.height = `${answerRef.current.scrollHeight}px`;
-    }
-  };
+  // const handleChangeAnswerRef = () => {
+  //   if (answerRef && answerRef.current) {
+  //     answerRef.current.style.height = 'auto';
+  //     answerRef.current.style.height = `${answerRef.current.scrollHeight}px`;
+  //   }
+  // };
 
   return (
     <S.Container>

src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx

@@ -1,9 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { ROUTES } from '../../../../../constants/routes';
 import { useModal } from '../../../../../hooks/useModal';
 import Modal from '../../../../common/modal/Modal';
-import { MODAL_MESSAGE } from '../../../../../constants/user/modalMessage';
 import { useGithubLink } from '../../../../../hooks/user/useMyInfo';
 
 export default function ProfileGithubSuccess() {

src/components/user/projectFormComponents/inputComponent/InputComponent.styled.ts

@@ -6,15 +6,34 @@ export const InputContainer = styled.div`
   flex-direction: column;
 `;
 
-export const InputStyle = styled.input<{ type?: string }>`
+export const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`;
+
+export const UnitText = styled.span`
+  font-size: ${({ theme }) => theme.heading.xsSmall.fontSize};
+  color: ${({ theme }) => theme.color.deepGrey};
+  white-space: nowrap;
+`;
+
+export const InputStyle = styled.input<{ type?: string; name?: string }>`
   padding: 10px;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   font-size: ${({ theme }) => theme.heading.small.fontSize};
 
-  ${({ type }) => {
+  ${({ type, name }) => {
     switch (type) {
       case 'text':
+        if (name === 'maxVolunteers' || name === 'duration') {
+          return css`
+            width: 60px;
+            text-align: right;
+            border-radius: 13px;
+          `;
+        }
         return css`
           width: 100%;
           border-radius: 13px;
@@ -40,19 +59,20 @@ export const InputStyle = styled.input<{ type?: string }>`
   }}
 `;
 
-export const InputInfoStyle = styled.input<{ type?: string }>`
+export const InputInfoStyle = styled.input<{ type?: string; name?: string }>`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   border: none;
 
-  ${({ type }) => {
+  ${({ type, name }) => {
     switch (type) {
       case 'text':
-        return css`
-          width: 220px;
-          text-align: left;
-          padding-left: 1px;
-        `;
-      case 'number':
+        if (name === 'maxVolunteers' || name === 'duration') {
+          return css`
+            width: 30px;
+            text-align: right;
+            padding-left: 1px;
+          `;
+        }
         return css`
           width: 220px;
           text-align: left;

src/components/user/projectFormComponents/inputComponent/InputComponent.tsx

@@ -3,12 +3,15 @@ import * as S from './InputComponent.styled';
 import MdEditorInput from '../editor/MarkdownEditor';
 
 type InputProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   control: Control<any>;
   name: string;
   placeholder?: string;
   errors?: FieldErrors;
   type?: 'text' | 'date' | 'textarea' | 'number' | string;
   indexInfo?: string;
+  unit?: string;
+  min?: number;
 };
 
 const Input = ({
@@ -18,25 +21,70 @@ const Input = ({
   placeholder,
   type,
   indexInfo,
+  unit,
+  min = 0,
 }: InputProps) => {
   const { field } = useController({
     control,
     name,
   });
   const hasError = Boolean(errors?.[name]);
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // 숫자 입력 필드인 경우 숫자만 허용
+    if (name === 'maxVolunteers' || name === 'duration') {
+      // 숫자가 아닌 문자 제거
+      const numericValue = value.replace(/[^0-9]/g, '');
+      if (numericValue !== value) {
+        e.target.value = numericValue;
+      }
+
+      // 음수 방지 (0보다 작은 값은 허용하지 않음)
+      const numValue = Number(numericValue);
+      if (numValue < min) {
+        return;
+      }
+    }
+
+    field.onChange(e);
+  };
+
   const renderInput = () => {
     if (indexInfo) {
       return (
-        <S.InputInfoStyle {...field} type={type} placeholder={placeholder} />
+        <S.InputWrapper>
+          <S.InputInfoStyle
+            {...field}
+            type={type}
+            placeholder={placeholder}
+            onChange={handleInputChange}
+            min={min}
+            name={name}
+          />
+          {unit && <S.UnitText>{unit}</S.UnitText>}
+        </S.InputWrapper>
       );
     }
 
     if (name === 'markdownEditor') {
       return <MdEditorInput field={{ ...field }} />;
     }
 
-    return <S.InputStyle {...field} type={type} placeholder={placeholder} />;
+    return (
+      <S.InputWrapper>
+        <S.InputStyle
+          {...field}
+          type={type}
+          placeholder={placeholder}
+          onChange={handleInputChange}
+          min={min}
+          name={name}
+        />
+        {unit && <S.UnitText>{unit}</S.UnitText>}
+      </S.InputWrapper>
+    );
   };
 
   return (

src/components/user/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts

@@ -17,6 +17,13 @@ export const InfoLabel = styled.label`
   color: #333;
 `;
 
+export const LabelDescription = styled.span`
+  font-size: ${({ theme }) => theme.heading.xsSmall.fontSize};
+  color: ${({ theme }) => theme.color.grey};
+  font-weight: normal;
+  margin-left: 8px;
+`;
+
 export const welcomeSprout = styled.p`
   font-size: 1rem;
   font-weight: bold;