Skip to content

Commit

Permalink
Merge pull request #199 from softeerbootcamp4th/dev
Browse files Browse the repository at this point in the history
[Feat] admin, service 배포
  • Loading branch information
moana16 authored Aug 24, 2024
2 parents 3263d75 + 5615897 commit 8f145c1
Show file tree
Hide file tree
Showing 32 changed files with 790 additions and 109 deletions.
50 changes: 41 additions & 9 deletions admin/src/components/EventManagement/FCFSModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,25 @@ interface FCFSModalProps {
isOpen: boolean;
handleClose: () => void;
handleSave: (body: FcFsRequest) => void;
startDate: string;
endDate: string;
}

const FCFSModal = ({ isOpen, handleClose, handleSave }: FCFSModalProps) => {
const FCFSModal = ({
isOpen,
handleClose,
handleSave,
startDate,
endDate,
}: FCFSModalProps) => {
const {
fcfsRequest,
endFCFSTime,
handleStartDateChange,
handleEndDateChange,
handleStartTimeChange,
} = useFcFsRequest();

} = useFcFsRequest({ startDate, endDate });
const warning = '/svg/경고.svg';
if (!isOpen) return null;

return (
Expand All @@ -38,9 +46,21 @@ const FCFSModal = ({ isOpen, handleClose, handleSave }: FCFSModalProps) => {
handleButtonClick={() => handleSave(fcfsRequest)}
>
<div className='flex flex-row mx-3'>
<div className='space-y-3 space-x-2 flex flex-col h-[180px] mt-1'>
<div className='ml-2 mt-2'>
<div className='mb-2'>시작 날짜</div>
<div className='space-x-2 flex flex-col h-[180px]'>
<div className='ml-2 my-[9px] '>
<div className='mb-2 flex flex-row'>
시작 날짜
<div className='relative flex items-center space-x-2 group'>
<img
src={warning}
alt='Warning'
className='h-6 w-6 cursor-pointer ml-2'
/>
<div className='absolute bottom-full mb-2 hidden group-hover:block w-max bg-gray-700 text-white text-xs rounded-md p-2'>
시작 날짜와 종료 날짜는 같은 주여야 합니다.
</div>
</div>
</div>
<Popover>
<PopoverTrigger asChild>
<Button
Expand Down Expand Up @@ -74,7 +94,7 @@ const FCFSModal = ({ isOpen, handleClose, handleSave }: FCFSModalProps) => {
</PopoverContent>
</Popover>
</div>
<span>종료 날짜</span>
<span className='mt-[11px] mb-[7px]'>종료 날짜</span>
<Popover>
<PopoverTrigger asChild>
<Button
Expand Down Expand Up @@ -106,7 +126,19 @@ const FCFSModal = ({ isOpen, handleClose, handleSave }: FCFSModalProps) => {
</div>
<div className='flex flex-col'>
<div className='space-y-2 ml-4 my-auto'>
<p>오픈 시간</p>
<div className='flex flex-row space-x-2'>
<p>오픈 시간</p>
<div className='relative flex items-center group'>
<img
src={`/svg/경고.svg`}
alt='Warning'
className='h-6 w-6 cursor-pointer'
/>
<div className='absolute bottom-full mb-2 hidden group-hover:block w-max bg-gray-700 text-white text-xs rounded-md p-2'>
오픈 시간은 오전 9시부터 6시 사이여야 합니다.
</div>
</div>
</div>
<TimePicker
date={
new Date(`${fcfsRequest.startDate}T${fcfsRequest.startTime}`)
Expand All @@ -116,7 +148,7 @@ const FCFSModal = ({ isOpen, handleClose, handleSave }: FCFSModalProps) => {
</div>
<div className='space-y-2 ml-4 my-auto'>
<p>종료 시간</p>
<TimePicker date={endFCFSTime} disabled />
<TimePicker date={endFCFSTime} />
</div>
</div>
</div>
Expand Down
35 changes: 32 additions & 3 deletions admin/src/components/EventManagement/RaffleModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,32 @@ interface RaffleModalProps {
isOpen: boolean;
handleClose: () => void;
handleSave: (body: DrawRequest) => void;
startDate: string;
startTime: string;
endDate: string;
endTime: string;
}

const RaffleModal = ({ isOpen, handleClose, handleSave }: RaffleModalProps) => {
const RaffleModal = ({
isOpen,
handleClose,
handleSave,
startDate,
startTime,
endDate,
endTime,
}: RaffleModalProps) => {
const {
raffleTimes,
drawRequest,
handleStartTimeChange,
handleEndTimeChange,
} = useRaffleRequest();
} = useRaffleRequest({
startDate,
startTime,
endDate,
endTime,
});

if (!isOpen) return null;

Expand All @@ -29,7 +46,19 @@ const RaffleModal = ({ isOpen, handleClose, handleSave }: RaffleModalProps) => {
<div className='flex flex-row mx-4 '>
<div className='flex flex-row'>
<div className='space-y-2 mr-16 my-auto'>
<p>오픈 시간</p>
<div className='flex flex-row space-x-2'>
<p>오픈 시간</p>
<div className='relative flex items-center group'>
<img
src={`/svg/경고.svg`}
alt='Warning'
className='h-6 w-6 cursor-pointer'
/>
<div className='absolute bottom-full mb-2 hidden group-hover:block w-max bg-gray-700 text-white text-xs rounded-md p-2'>
오픈 시간은 오전 9시부터 가능합니다.
</div>
</div>
</div>
<TimePicker
date={raffleTimes.startRaffleTime}
onChange={handleStartTimeChange}
Expand Down
63 changes: 56 additions & 7 deletions admin/src/hooks/useFcFsRequest.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,47 @@
import { useEffect, useState } from 'react';
import { format, setHours, setMinutes } from 'date-fns';
import {
format,
setHours,
setMinutes,
startOfWeek,
endOfWeek,
addDays,
} from 'date-fns';
import { FcFsRequest } from '@/type/eventManagement/type';

const useFcFsRequest = () => {
interface FcFsRequestProps {
startDate: string;
endDate: string;
}
const useFcFsRequest = ({ startDate, endDate }: FcFsRequestProps) => {
const initRequest: FcFsRequest = {
startDate: format(new Date(), 'yyyy-MM-dd'),
endDate: format(new Date(), 'yyyy-MM-dd'),
startTime: format(new Date(), 'HH:mm:ss'),
startDate: format(new Date(startDate), 'yyyy-MM-dd'),
endDate: format(new Date(endDate), 'yyyy-MM-dd'),
startTime: format(new Date(startDate), 'HH:mm:00'),
};

const [fcfsRequest, setFcfsRequest] = useState<FcFsRequest>(initRequest);
const [endFCFSTime, setEndFCFSTime] = useState<Date | undefined>(undefined);

const ensureSameWeek = (start: Date, end: Date): Date => {
const startWeekStart = startOfWeek(start, { weekStartsOn: 1 }); // 월요일 시작
const startWeekEnd = endOfWeek(start, { weekStartsOn: 1 });

if (end < startWeekStart || end > startWeekEnd) {
return startWeekEnd;
}
return end;
};

const ensureStartBeforeEnd = (start: Date, end: Date): Date => {
if (start >= end) {
const newEndDate = new Date(start);
newEndDate.setDate(start.getDate() + 1);
return newEndDate;
}
return end;
};

useEffect(() => {
if (fcfsRequest.startTime) {
const startFCFSTime = new Date(
Expand All @@ -29,27 +59,46 @@ const useFcFsRequest = () => {

const handleStartDateChange = (date: Date | undefined) => {
if (date) {
// 일요일인지 확인
if (date.getDay() === 0) {
alert('시작 날짜는 월요일에서 토요일 사이여야 합니다.');
// 그 주의 토요일로 날짜 변경
date = addDays(endOfWeek(date, { weekStartsOn: 1 }), -1);
}

const endDate = new Date(fcfsRequest.endDate); // 기존 endDate 불러오기
const newEndDate = ensureSameWeek(date, endDate); // 주간 범위 확인

setFcfsRequest((prevRequest) => ({
...prevRequest,
startDate: format(date, 'yyyy-MM-dd'),
endDate: format(ensureStartBeforeEnd(date, newEndDate), 'yyyy-MM-dd'),
}));
}
};

const handleEndDateChange = (date: Date | undefined) => {
if (date) {
const newEndDate = ensureSameWeek(new Date(fcfsRequest.startDate), date);
setFcfsRequest((prevRequest) => ({
...prevRequest,
endDate: format(date, 'yyyy-MM-dd'),
endDate: format(
ensureStartBeforeEnd(new Date(fcfsRequest.startDate), newEndDate),
'yyyy-MM-dd'
),
}));
}
};

const handleStartTimeChange = (date: Date | undefined) => {
if (date) {
const hours = date.getHours();
const adjustedDate = new Date(date);
adjustedDate.setHours(hours, date.getMinutes(), 0);

setFcfsRequest((prevRequest) => ({
...prevRequest,
startTime: format(date, 'HH:mm:ss'),
startTime: format(adjustedDate, 'HH:mm:00'),
}));
}
};
Expand Down
96 changes: 66 additions & 30 deletions admin/src/hooks/useRaffleRequest.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,96 @@
import { useEffect, useState } from 'react';
import { format, setHours, setMinutes } from 'date-fns';
import { format } from 'date-fns';
import { DrawRequest } from '@/type/eventManagement/type';

const initialRaffleTimes = {
startRaffleTime: undefined as Date | undefined,
endRaffleTime: undefined as Date | undefined,
};
interface InitialRaffleTimes {
startDate: string | undefined;
endDate: string | undefined;
startTime: string | undefined;
endTime: string | undefined;
}

export const useRaffleRequest = () => {
const [raffleTimes, setRaffleTimes] = useState(initialRaffleTimes);
const [drawRequest, setDrawRequest] = useState<DrawRequest>({
startTime: format(new Date(), 'HH:mm:ss'),
endTime: format(new Date(), 'HH:mm:ss'),
});
const createDateFromString = (
dateString: string | undefined,
timeString: string | undefined
): Date => {
try {
if (!dateString || !timeString) {
throw new Error('dateString or timeString is undefined');
}

useEffect(() => {
if (raffleTimes.startRaffleTime) {
const twoHoursLater = new Date(raffleTimes.startRaffleTime);
twoHoursLater.setHours(raffleTimes.startRaffleTime.getHours() + 2);
const dateObject = new Date(`${dateString}T${timeString}`);
// 유효한 날짜인지 확인
if (isNaN(dateObject.getTime())) {
return new Date();
}

const endOfDay = setMinutes(
setHours(raffleTimes.startRaffleTime, 23),
59
);
const finalEndTime = twoHoursLater > endOfDay ? endOfDay : twoHoursLater;
return dateObject;
} catch (error) {
console.error('Error creating date:', error);
return new Date(); // 기본값으로 현재 날짜와 시간을 반환
}
};

setRaffleTimes((prevTimes) => ({
...prevTimes,
endRaffleTime: finalEndTime,
}));
}
}, [raffleTimes.startRaffleTime]);
export const useRaffleRequest = ({
startDate,
startTime,
endDate,
endTime,
}: InitialRaffleTimes) => {
const startRaffleTime = createDateFromString(startDate, startTime);
const endRaffleTime = createDateFromString(endDate, endTime);

const [raffleTimes, setRaffleTimes] = useState({
startRaffleTime,
endRaffleTime,
});

const [drawRequest, setDrawRequest] = useState<DrawRequest>({
startTime: format(raffleTimes.startRaffleTime, 'HH:mm:00'),
endTime: format(raffleTimes.endRaffleTime, 'HH:mm:00'),
});

useEffect(() => {
if (raffleTimes.startRaffleTime && raffleTimes.endRaffleTime) {
setDrawRequest({
startTime: format(raffleTimes.startRaffleTime, 'HH:mm:ss'),
endTime: format(raffleTimes.endRaffleTime, 'HH:mm:ss'),
startTime: format(raffleTimes.startRaffleTime, 'HH:mm:00'),
endTime: format(raffleTimes.endRaffleTime, 'HH:mm:00'),
});
}
}, [raffleTimes]);

const handleStartTimeChange = (date: Date | undefined) => {
if (date) {
const adjustedDate = new Date(date);
adjustedDate.setSeconds(0);
adjustedDate.setMilliseconds(0);

setRaffleTimes((prevTimes) => ({
...prevTimes,
startRaffleTime: date,
startRaffleTime: adjustedDate,
}));
}
};

const handleEndTimeChange = (date: Date | undefined) => {
if (date) {
const adjustedDate = new Date(date);

// 끝나는 시간이 00:00:00인 경우 23:59:59로 조정
if (
adjustedDate.getHours() === 0 &&
adjustedDate.getMinutes() === 0 &&
adjustedDate.getSeconds() === 0
) {
adjustedDate.setHours(23, 59, 0);
} else {
// 초 단위를 00으로 조정
adjustedDate.setSeconds(0);
}

setRaffleTimes((prevTimes) => ({
...prevTimes,
endRaffleTime: date,
endRaffleTime: adjustedDate,
}));
}
};
Expand Down
Loading

0 comments on commit 8f145c1

Please sign in to comment.