feat: 투표 관리 페이지 추가

src/apis/contests.ts

@@ -1,4 +1,4 @@
-import { ContestRequestDto, ContestResponseDto, CurrentContestResponseDto, VoteTermDto } from 'types/DTO';
+import { ContestRequestDto, ContestResponseDto, CurrentContestResponseDto } from 'types/DTO';
 import apiClient from './apiClient';
 import { TeamListItemResponseDto } from 'types/DTO/teams/teamListDto';
 
@@ -51,13 +51,3 @@ export const postBulkAddTeams = async (contestId: number, formData: FormData) =>
   });
   return res.data;
 };
-
-export const getVoteTerm = async (contestId: number): Promise<VoteTermDto> => {
-  const res = await apiClient.get(`/contests/${contestId}/vote`);
-  return res.data;
-};
-
-export const updateVoteTerm = async (contestId: number, payload: VoteTermDto) => {
-  const res = await apiClient.put(`/contests/${contestId}/vote`, payload);
-  return res.data;
-};

src/apis/votes.ts

@@ -0,0 +1,22 @@
+import { VoteMaxVotesLimitDto, VoteTermDto } from 'types/DTO';
+import apiClient from './apiClient';
+
+export const getVoteTerm = async (contestId: number): Promise<VoteTermDto> => {
+  const res = await apiClient.get(`/contests/${contestId}/vote`);
+  return res.data;
+};
+
+export const putVoteTerm = async (contestId: number, payload: VoteTermDto) => {
+  const res = await apiClient.put(`/contests/${contestId}/vote`, payload);
+  return res.data;
+};
+
+export const getMaxVoteLimit = async (contestId: number): Promise<VoteMaxVotesLimitDto> => {
+  const res = await apiClient.get(`/contests/${contestId}/votes`);
+  return res.data;
+};
+
+export const patchMaxVoteLimit = async (contestId: number, payload: VoteMaxVotesLimitDto) => {
+  const res = await apiClient.patch(`/contests/${contestId}/votes`, payload);
+  return res.data;
+};

src/components/DateTimePicker.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
-import { ChevronDownIcon } from 'lucide-react';
+import { CiCalendar } from 'react-icons/ci';
+import dayjs, { Dayjs } from 'dayjs';
 
 import { Button } from '@components/ui/button';
 import { Calendar } from '@components/ui/calendar';
@@ -9,71 +10,68 @@ import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
 
 interface DateTimePickerProps {
   label: string;
-  prevDate: Date;
-  onChange?: (date: Date) => void;
+  prevDate: string | Dayjs;
+  onChange: (date: Dayjs) => void;
 }
 
 export const DateTimePicker = ({ label, prevDate, onChange }: DateTimePickerProps) => {
   const [open, setOpen] = useState(false);
-  const [dateTime, setDateTime] = useState<Date>(new Date(prevDate));
-  const [timeInputValue, setTimeInputValue] = useState<string>(new Date(prevDate).toTimeString().slice(0, 8));
+  const [dateTime, setDateTime] = useState<Dayjs>(dayjs(prevDate));
+  const [timeInputValue, setTimeInputValue] = useState<string>(dayjs(prevDate).format('HH:mm'));
 
   useEffect(() => {
-    const newDate = new Date(prevDate);
-    setDateTime(newDate);
-    setTimeInputValue(newDate.toTimeString().slice(0, 8));
+    const newDateTime = dayjs(prevDate);
+    setDateTime(newDateTime);
+    setTimeInputValue(newDateTime.format('HH:mm'));
   }, [prevDate]);
 
   const handleDateChange = (date: Date | undefined) => {
     if (!date) return;
 
-    const newDateTime = new Date(dateTime);
-    newDateTime.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+    const newDateTime = dayjs(date).hour(dateTime.hour()).minute(dateTime.minute());
 
     setDateTime(newDateTime);
-    setTimeInputValue(newDateTime.toTimeString().slice(0, 8));
     setOpen(false);
 
-    onChange?.(newDateTime);
+    onChange(newDateTime);
   };
 
   const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTimeInputValue(e.target.value);
+    const { value } = e.target;
+    setTimeInputValue(value);
   };
 
   const handleTimeBlur = () => {
-    const timeValue = timeInputValue;
-    const timeParts = timeValue.split(':').map(Number);
-    const [hours, minutes, seconds = 0] = timeParts;
+    const timeParts = timeInputValue.split(':').map(Number);
+    const [hours, minutes] = timeParts;
 
     if (isNaN(hours) || isNaN(minutes)) {
-      setTimeInputValue(dateTime.toTimeString().slice(0, 8));
+      setTimeInputValue(dateTime.format('HH:mm'));
       return;
     }
 
-    const newDateTime = new Date(dateTime);
-    newDateTime.setHours(hours, minutes, seconds);
+    const newDateTime = dateTime.hour(hours).minute(minutes);
     setDateTime(newDateTime);
-    onChange?.(newDateTime);
+    onChange(newDateTime);
   };
 
   return (
-    <div className="flex items-center gap-3">
-      <Label htmlFor="time-picker" className="px-1 whitespace-nowrap">
+    <div className="flex flex-wrap items-center gap-3">
+      <Label htmlFor="time-picker" className="font-normal whitespace-nowrap">
         {label}
       </Label>
       <div className="flex items-center gap-2">
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button variant="outline" id="date-picker" className="w-[150px] justify-between font-normal">
-              {dateTime ? dateTime.toLocaleDateString() : '날짜 선택'}
-              <ChevronDownIcon className="ml-2 h-4 w-4" />
+              {dateTime ? dateTime.format('YYYY-MM-DD') : '날짜 선택'}
+              <CiCalendar size={18} />
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-auto p-0" align="start">
             <Calendar
               mode="single"
-              selected={dateTime}
+              selected={dateTime.toDate()}
               captionLayout="dropdown"
               fromYear={2020}
               toYear={2030}
@@ -83,7 +81,6 @@ export const DateTimePicker = ({ label, prevDate, onChange }: DateTimePickerProp
         </Popover>
         <Input
           type="time"
-          step="1"
           id="time-picker"
           value={timeInputValue}
           onChange={handleTimeChange}

src/constants/votes.ts

@@ -0,0 +1,3 @@
+export const VOTETERM_TIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
+
+export const MAX_VOTE_PER_PERSON = 9;

src/hooks/useVoteTerm.ts

@@ -1,20 +1,9 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { useToast } from 'hooks/useToast';
-import { getVoteTerm, updateVoteTerm } from 'apis/contests';
-import { formatDateTime } from 'utils/time';
-import { VoteTermDto } from 'types/DTO';
-
-export const useGetVoteTerm = (contestId: number | undefined) => {
-  return useQuery({
-    queryKey: ['voteTerm', contestId],
-    queryFn: () => getVoteTerm(contestId as number),
-    enabled: !!contestId,
-  });
-};
+import { voteTermOption } from 'queries/votes';
 
 export const useIsVoteTerm = (contestId: number | undefined) => {
-  const { data: voteTermData, isLoading } = useGetVoteTerm(contestId);
+  const { data: voteTermData } = useQuery(voteTermOption(contestId ?? 0));
 
   const isVoteTerm = useMemo(() => {
     if (!voteTermData) return false;
@@ -28,23 +17,3 @@ export const useIsVoteTerm = (contestId: number | undefined) => {
 
   return { isVoteTerm };
 };
-
-export const useUpdateVoteTerm = (contestId: number) => {
-  const queryClient = useQueryClient();
-  const toast = useToast();
-
-  return useMutation({
-    mutationFn: (payload: { voteStartAt: string; voteEndAt: string }) =>
-      updateVoteTerm(contestId, {
-        voteStartAt: formatDateTime(new Date(payload.voteStartAt)),
-        voteEndAt: formatDateTime(new Date(payload.voteEndAt)),
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['voteTerm', contestId] });
-      toast('투표 기간이 업데이트 되었어요', 'success');
-    },
-    onError: (err) => {
-      toast('투표 기간 업데이트에 실패했어요', 'error');
-    },
-  });
-};

src/pages/admin/OngoingContestsTab.tsx

@@ -1,7 +1,6 @@
 import ProjectSubmissionTable from '@pages/admin/ProjectSubmissionTable';
 import VoteRate from '@pages/admin/VoteRate';
 import ProjectSortToggle from './ProjectSortToggle';
-import VoteTermSelector from './VoteTermSelector';
 import { useQuery } from '@tanstack/react-query';
 import { getDashboard } from 'apis/dashboard';
 import { getRanking } from 'apis/ranking';
@@ -36,7 +35,6 @@ const OngoingContestsTab = () => {
     <>
       <div className="flex flex-col gap-12">
         <div className="border-lightGray rounded-xl border p-8">
-          <VoteTermSelector />
           <div className="my-6 border-t border-gray-200"></div>
           <ProjectSortToggle />
         </div>

src/pages/admin/votes/MaxVoteLimitSetting.tsx

@@ -0,0 +1,103 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import { FiPlus, FiMinus } from 'react-icons/fi';
+import Input from '@components/Input';
+import { Label } from '@components/ui/label';
+import { MAX_VOTE_PER_PERSON } from 'constants/votes';
+import Button from '@components/Button';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getMaxVoteLimit, patchMaxVoteLimit } from 'apis/votes';
+import { VoteMaxVotesLimitDto } from 'types/DTO';
+import { useToast } from 'hooks/useToast';
+
+const MaxVoteLimitSetting = () => {
+  const { contestId: contestIdParam } = useParams();
+  const [maxVotesLimit, setMaxVotesLimit] = useState<number>(0);
+  const queryClient = useQueryClient();
+  const toast = useToast();
+
+  const { data: maxVotesLimitData } = useQuery({
+    queryKey: ['maxVotesLimit', contestIdParam],
+    queryFn: () => getMaxVoteLimit(Number(contestIdParam ?? 0)),
+    enabled: !!contestIdParam,
+  });
+  const updateMaxVoteLimit = useMutation({
+    mutationKey: ['updateMaxVotesLimit'],
+    mutationFn: (payload: VoteMaxVotesLimitDto) => patchMaxVoteLimit(Number(contestIdParam ?? 0), payload),
+  });
+
+  useEffect(() => {
+    if (maxVotesLimitData) {
+      setMaxVotesLimit(maxVotesLimitData.maxVotesLimit);
+    }
+  }, [maxVotesLimitData]);
+
+  const onButtonClick = (type: 'plus' | 'minus') => {
+    if (type === 'plus') {
+      if (maxVotesLimit < MAX_VOTE_PER_PERSON) setMaxVotesLimit((prev) => prev + 1);
+      else toast('10개 이상으로 설정할 수 없습니다.', 'error');
+    } else if (type === 'minus' && maxVotesLimit > 0) setMaxVotesLimit((prev) => prev - 1);
+  };
+
+  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const val = Number(e.target.value);
+    if (!isNaN(val) && val >= 0 && val <= MAX_VOTE_PER_PERSON) {
+      setMaxVotesLimit(Number(e.target.value));
+    }
+  };
+
+  const handleDataSave = () => {
+    if (maxVotesLimit === 0) {
+      return toast('투표권 수를 0으로 설정할 수 없습니다.', 'error');
+    }
+
+    updateMaxVoteLimit.mutate(
+      { maxVotesLimit },
+      {
+        onSuccess: async () => {
+          await queryClient.invalidateQueries({ queryKey: ['maxVotesLimit'] });
+          toast('투표권 수를 수정했습니다.', 'success');
+        },
+        onError: (error: any) => {
+          toast(error.response?.data?.message || '투표권 수 수정에 실패했습니다.', 'error');
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-wrap items-end gap-2">
+        <h2 className="text-2xl font-bold">투표권 수</h2>
+        <p className="text-midGray text-xs">{`최대 ${MAX_VOTE_PER_PERSON}개까지 설정 가능합니다.`}</p>
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-3 pl-2">
+        <div className="flex flex-wrap items-center gap-10">
+          <Label className="font-normal">{'1인당 투표권 수'}</Label>
+          <div className="flex items-center gap-5">
+            <FiMinus
+              size={18}
+              onClick={() => onButtonClick('minus')}
+              className="stroke-mainGreen hover:cursor-pointer"
+            />
+            <Input
+              value={maxVotesLimit}
+              onChange={onInputChange}
+              className="h-10 max-w-10 p-0 text-center text-[16px]"
+            />
+            <FiPlus size={18} onClick={() => onButtonClick('plus')} className="stroke-mainGreen hover:cursor-pointer" />
+          </div>
+        </div>
+        <Button
+          onClick={handleDataSave}
+          disabled={updateMaxVoteLimit.isPending}
+          className="bg-mainBlue hover:bg-mainBlue/90 flex h-9 items-center justify-center rounded-md px-6 py-2 text-sm text-white transition-colors disabled:cursor-not-allowed disabled:bg-gray-400"
+        >
+          {'저장하기'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MaxVoteLimitSetting;