Skip to content

Commit

Permalink
Merge pull request #45 from 4bujak-4bujak/feature/meetingroomQA
Browse files Browse the repository at this point in the history 
Feature/meetingroom qa
  • Loading branch information
@jiohjung98
jiohjung98 authored Jun 10, 2024
2 parents e0dd264 + 1b92f3d commit 5cf83c3
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 18 deletions.
32 changes: 20 additions & 12 deletions src/components/reservation/meetingRoom/DatePickerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,16 @@ interface DatePickerModalProps {
) => void;
initialStartTime: Date;
initialEndTime: Date;
activeTab: string;
}

const DatePickerModal: React.FC<DatePickerModalProps> = ({
showModal,
setShowModal,
onConfirm,
initialStartTime,
initialEndTime
initialEndTime,
activeTab
}) => {
const [startDate, setStartDate] = useState<Date>(initialStartTime);
const [startTime, setStartTime] = useState<string>(
Expand All @@ -43,7 +45,13 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
const [projectorExists, setProjectorExists] = useState<boolean>(false);
const [canVideoConference, setCanVideoConference] = useState<boolean>(false);
const [isPrivate, setIsPrivate] = useState<boolean>(false);
const [activeTab, setActiveTab] = useState<string>('schedule');
const [activeTabState, setActiveTabState] = useState<string>(activeTab);

console.log(activeTab);

useEffect(() => {
setActiveTabState(activeTab);
}, [activeTab]);

useEffect(() => {
if (startDate.toDateString() === new Date().toDateString()) {
Expand Down Expand Up @@ -97,7 +105,7 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
isPrivate
});
setShowModal(false);
setActiveTab('schedule');
setActiveTabState('schedule');
};

const handleTypeChange = (type: 'MINI' | 'STANDARD' | 'MEDIUM' | 'STATE') => {
Expand Down Expand Up @@ -152,34 +160,34 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
<div className="flex">
<button
className={`py-2 px-4 ${
activeTab === 'schedule'
activeTabState === 'schedule'
? "text-black/opacity-20 text-lg font-bold font-['Pretendard']"
: "text-neutral-600 text-lg font-normal font-['Pretendard']"
}`}
onClick={() => setActiveTab('schedule')}>
onClick={() => setActiveTabState('schedule')}>
일정
</button>
<button
className={`py-2 px-4 rounded ${
activeTab === 'people'
activeTabState === 'people'
? "text-black/opacity-20 text-lg font-bold font-['Pretendard']"
: "text-neutral-600 text-lg font-normal font-['Pretendard']"
}`}
onClick={() => setActiveTab('people')}>
onClick={() => setActiveTabState('people')}>
인원
</button>
<button
className={`py-2 px-4 rounded ${
activeTab === 'equipment'
activeTabState === 'equipment'
? "text-black/opacity-20 text-lg font-bold font-['Pretendard']"
: "text-neutral-600 text-lg font-normal font-['Pretendard']"
}`}
onClick={() => setActiveTab('equipment')}>
onClick={() => setActiveTabState('equipment')}>
비품
</button>
</div>

{activeTab === 'schedule' && (
{activeTabState === 'schedule' && (
<>
<div className="">
<div className="w-full">
Expand Down Expand Up @@ -248,7 +256,7 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
</>
)}

{activeTab === 'people' && (
{activeTabState === 'people' && (
<div className="mt-4 w-[100%]">
<div className="flex flex-col">
{(['MINI', 'STANDARD', 'MEDIUM', 'STATE'] as const).map((type) => (
Expand Down Expand Up @@ -281,7 +289,7 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
</div>
)}

{activeTab === 'equipment' && (
{activeTabState === 'equipment' && (
<div className="">
<div className="mt-4 flex flex-col">
<label className="flex items-center my-[12px]">
Expand Down
37 changes: 31 additions & 6 deletions src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const MeetingRoomIndex: React.FC = () => {
const updatedTimeReserved = useBranchStore2((state) => state.updatedTimeReserved);

const [toastType, setToastType] = useState<string | null>(null);
const [activeTabState, setActiveTabState] = useState<string>('');

const currentBranch =
updatedTimeSelected && updatedTimeReserved && updatedTimeSelected > updatedTimeReserved
Expand Down Expand Up @@ -250,33 +251,56 @@ const MeetingRoomIndex: React.FC = () => {
});
setMeetingRooms(sortedRooms);
};

const handleModalOpen = (tab: string) => {
setActiveTabState(tab);
setShowModal(true);
};

const getCapacityText = (capacity: number) => {
if (capacity === 1 || capacity === 5 || capacity === 9 || capacity === 13) {
return `${capacity}명`;
}
if (capacity > 1 && capacity < 5) {
return `1~${capacity}명`;
}
if (capacity > 5 && capacity < 9) {
return `5~${capacity}명`;
}
if (capacity > 9 && capacity < 13) {
return `9~${capacity}명`;
}
if (capacity === 14 || capacity === 15) {
return `13~${capacity}명`;
}
return `${capacity}명`;
};

return (
<div className="p-4 h-screen">
<div className='relative'>
<Image src={'/resetwithbg.svg'} width={45} height={45} alt="reset" className="absolute right-0" onClick={handleReset} />
</div>
<div className="flex mb-4 overflow-x-auto whitespace-nowrap">
<div className="flex mb-4 w-full overflow-x-auto whitespace-nowrap mr-[50px]">
<div
className="flex-none w-[190px] h-[33px] px-3 py-2 bg-violet-100 rounded inline-flex cursor-pointer"
onClick={() => setShowModal(true)}
onClick={() => handleModalOpen('schedule')}
>
<Image src={'/calendar.svg'} width={14} height={14} alt="calendar" className="mr-[6px]" />
<div className="text-neutral-700 text-sm font-semibold font-['Pretendard']">{currentTime}</div>
<Image src={'/bottomArrow.svg'} width={11} height={11} alt="bottomArrow" className="ml-auto mr-[2px]" />
</div>
<div
className={`flex-none h-[33px] px-3 py-2 rounded inline-flex cursor-pointer ml-2 ${selectedMeetingRoomTypes === '인원 수' ? 'w-[110px] bg-white border border-neutral-300' : 'w-[170px] bg-violet-100'}`}
onClick={() => setShowModal(true)}
onClick={() => handleModalOpen('people')}
>
<Image src={'/people.svg'} width={14} height={14} alt="people" className="mr-[6px]" />
<div className="text-neutral-700 text-sm font-semibold font-['Pretendard']">{selectedMeetingRoomTypes}</div>
<Image src={'/bottomArrow.svg'} width={11} height={11} alt="bottomArrow" className="ml-auto mr-[2px]" />
</div>
<div
className={`flex-none h-[33px] px-3 py-2 rounded inline-flex cursor-pointer ml-2 mr-[50px] ${selectedEquipment === '비품' ? 'w-[100px] bg-white border border-neutral-300' : 'w-[150px] bg-violet-100'}`}
onClick={() => setShowModal(true)}
onClick={() => handleModalOpen('equipment')}
>
<Image src={'/check.svg'} width={14} height={14} alt="check" className="mr-[6px]" />
<div className="text-neutral-700 text-sm font-semibold font-['Pretendard']">{selectedEquipment}</div>
Expand Down Expand Up @@ -366,7 +390,7 @@ const MeetingRoomIndex: React.FC = () => {
조건에 맞는 미팅룸이 없습니다.
</div>
) : (
<div className={`grid grid-cols-2 gap-x-[11px] gap-y-[24px] ${showToast ? 'pointer-events-none opacity-50' : ''}`}>
<div className={`grid grid-cols-2 gap-x-[11px] gap-y-[24px] ${toastType === 'OVERLAPPING_MEETING_ROOM_EXISTS' ? 'pointer-events-none opacity-50' : ''}`}>
{meetingRooms.map((room) => (
<div key={room.meetingRoomId} className={`overflow-hidden bg-white text-center ${toastType === 'OVERLAPPING_MEETING_ROOM_EXISTS' ? 'pointer-events-none' : 'cursor-pointer'}`} onClick={() => handleRoomClick(room.meetingRoomId)}>
<div className="rounded">
Expand All @@ -388,7 +412,7 @@ const MeetingRoomIndex: React.FC = () => {
{room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
</div>
<Image src={'/capacity.svg'} width={14} height={14} alt="capacity" className="mr-[6px]" />
<div className="text-stone-500 text-xs font-normal font-['Pretendard']">1~{room.meetingRoomCapacity}명</div>
<div className="text-stone-500 text-xs font-normal font-['Pretendard']">{getCapacityText(room.meetingRoomCapacity)}</div>
</div>
</div>
</div>
Expand All @@ -403,6 +427,7 @@ const MeetingRoomIndex: React.FC = () => {
onConfirm={handleConfirm}
initialStartTime={startTime}
initialEndTime={endTime}
activeTab={activeTabState}
/>
)}
{showToast && (
Expand Down

0 comments on commit 5cf83c3

Please sign in to comment.