모집 공고 생성 페이지 일부 수정( 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/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/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/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;

src/components/user/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx

@@ -27,24 +27,23 @@ const ProjectInformationInput = ({
   return (
     <>
       {PROJECT_DATA.map((input, index) => (
-        <>
-          <S.InfoRow key={index}>
-            <S.InfoLabel htmlFor={input.name}>{input.label}</S.InfoLabel>
-            <Input
-              indexInfo={input.id}
-              control={control}
-              errors={errors}
-              name={input.name}
-              type={input.type}
-              placeholder={input.placeholder}
-            />
-            {input.type === 'checkbox' && (
-              <S.welcomeSprout>
-                새싹 멤버를 환영한다면 체크를 눌러주세요!!
-              </S.welcomeSprout>
-            )}
-          </S.InfoRow>
-        </>
+        <S.InfoRow key={index}>
+          <S.InfoLabel htmlFor={input.name}>{input.label}</S.InfoLabel>
+          <Input
+            indexInfo={input.id}
+            control={control}
+            errors={errors}
+            name={input.name}
+            type={input.type}
+            unit={input.unit}
+            min={1}
+          />
+          {input.type === 'checkbox' && (
+            <S.welcomeSprout>
+              새싹 멤버를 환영한다면 체크를 눌러주세요!!
+            </S.welcomeSprout>
+          )}
+        </S.InfoRow>
       ))}
 
       <S.InfoRow>
@@ -59,7 +58,12 @@ const ProjectInformationInput = ({
       />
 
       <S.InfoRow>
-        <S.InfoLabel htmlFor='position'>모집 분야</S.InfoLabel>
+        <S.InfoLabel htmlFor='position'>
+          모집 분야
+          <S.welcomeSprout>
+            전체를 클릭하면 다른 카테고리가 해제됩니다 !
+          </S.welcomeSprout>
+        </S.InfoLabel>
       </S.InfoRow>
       <MozipCategoryComponent
         name='position'

src/constants/user/projectConstants.ts

@@ -7,23 +7,24 @@ export const PROJECT_DATA = [
     id: '1',
     name: 'maxVolunteers',
     label: '모집 인원',
-    type: 'number',
-    placeholder: '모집 인원을 입력하세요. (ex. 5)',
+    type: 'text',
+    unit: '명',
   },
   {
     id: '2',
     name: 'startDatePre',
     label: '시작 예정',
     type: 'text',
     placeholder: 'YYYY-MM-DD',
+    unit: '',
   },
 
   {
     id: '3',
     name: 'duration',
     label: '예상 기간',
-    type: 'number',
-    placeholder: '예상 기간을 입력하세요. (ex. 5)',
+    type: 'text',
+    unit: '개월',
   },
 
   {
@@ -32,6 +33,7 @@ export const PROJECT_DATA = [
     label: '새싹 여부',
     type: 'checkbox',
     placeholder: '',
+    unit: '',
   },
 ] as const;
 
@@ -74,20 +76,32 @@ export const createProjectScheme = z.object({
     .string({ message: '프로젝트 제목을 입력해주세요.' })
     .min(1, { message: '프로젝트 제목을 입력해주세요.' }),
 
-  maxVolunteers: z.coerce
+  maxVolunteers: z
     .number({ message: '모집 인원을 입력해주세요.' })
-    .min(1, { message: '모집 인원은 1명 이상이어야 합니다.' })
-    .max(1000, { message: '모집 인원은 1000명 이하이어야 합니다.' }),
+    .min(1, { message: '모집 인원을 입력해주세요.' })
+    .refine(
+      (val) => {
+        const num = Number(val);
+        return !isNaN(num) && num >= 1 && num <= 1000;
+      },
+      { message: '모집 인원은 1명 이상 1000명 이하여야 합니다.' }
+    ),
   startDatePre: z
     .string({ required_error: '종료 날짜를 입력해주세요.' })
     .refine((date) => !isNaN(Date.parse(date)), {
       message: '유효한 날짜를 입력해주세요.',
     }),
   field: z.number({ message: '진행 방식을 선택 해주세요.' }),
-  duration: z.coerce
-    .number({ message: '예상 기간을 입력해주세요.' })
-    .positive({ message: '예상 기간은 1 이상이어야 합니다.' })
-    .max(365, { message: '예상 기간은 365일을 초과할 수 없습니다.' }),
+  duration: z
+    .string({ message: '예상 기간을 입력해주세요.' })
+    .min(1, { message: '예상 기간을 입력해주세요.' })
+    .refine(
+      (val) => {
+        const num = Number(val);
+        return !isNaN(num) && num >= 1 && num <= 365;
+      },
+      { message: '예상 기간은 1일 이상 365일 이하여야 합니다.' }
+    ),
   position: z
     .array(z.number({ message: '숫자로 입력 되어야 합니다.' }))
     .min(1, { message: '1개의 분야를 선택해주세요.' }),

src/hooks/admin/useGetInquiriesPreview.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { Inquiries } from '../queries/keys';
+import { getInquiriesPreview } from '../../api/admin/customerService/inquiry.api';
+
+export const useGetInquiriesPreview = () => {
+  const {
+    data: allInquiriesPreviewData,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: [Inquiries.inquiriesPreview],
+    queryFn: () => getInquiriesPreview(),
+    select: (data) => data.slice(0, 5),
+  });
+
+  return { allInquiriesPreviewData, isLoading, isFetching };
+};