Skip to content

Commit

Permalink
Merge pull request #35 from 4bujak-4bujak/feature/meetingroomQA
Browse files Browse the repository at this point in the history 
[feat] 미팅룸 QA
  • Loading branch information
@jiohjung98
jiohjung98 authored Jun 9, 2024
2 parents 447618f + 9a654fc commit b7ecdfc
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 32 deletions.
12 changes: 6 additions & 6 deletions src/components/home/SelectOfficeMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const SelectOfficeMap: React.FC<SelectOfficeMapProps> = ({ branch, onClose }) =>
<div ref={mapRef} className="w-[393px] mx-auto h-full">
</div>
<div className="absolute top-4 right-4">
<aside className="w-[373px] mx-auto fixed bottom-[100px] left-0 right-0 z-50">
<aside className="w-[350px] mx-auto fixed bottom-[110px] left-0 right-0 z-50">
<div className="bg-white px-4 py-6 rounded-lg shadow-lg">
<div className='flex'>
<div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
Expand All @@ -83,16 +83,16 @@ const SelectOfficeMap: React.FC<SelectOfficeMapProps> = ({ branch, onClose }) =>
/>
</div>
<div className='ml-4 flex-1'>
<h2 className="text-xl font-semibold">{branch.branchName}</h2>
<h2 className="text-black/opacity-20 text-lg font-bold font-['Pretendard'] leading-[27px]">{branch.branchName}</h2>
{branch.branchAddress && branch.branchLatitude && branch.branchLongitude && (
<div className="flex items-start">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[4px] mr-2" />
<p className="text-sm break-words">{branch.branchAddress}</p>
<div className="flex items-start mt-[12px]">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[2px] mr-2" />
<p className="text-xs break-words">{branch.branchAddress}</p>
</div>
)}
<div className="flex">
<Image src="/map/OfficeInfo.svg" alt="Location" width={12} height={12} className="mr-2" />
<p className="text-sm break-words">회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중</p>
<p className="text-xs break-words">회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중</p>
</div>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions src/components/map/BranchInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,15 @@ const BranchInfo: React.FC = () => {
</header>
<div className="">
{urgentNotice && (
<div className="absolute top-[90px] left-1/2 px-4 py-2 transform -translate-x-1/2 w-[361px] bg-white bg-opacity-80 rounded shadow border border-neutral-200 z-[9999]">
<div className="absolute top-[90px] left-1/2 px-4 py-2 transform -translate-x-1/2 w-[340px] bg-white bg-opacity-80 rounded shadow border border-neutral-200 z-[9999]">
<div className="flex items-center mb-2">
<div className='p-1 bg-yellow-400 rounded-sm justify-center items-center gap-2.5 inline-flex'>
<span className="text-neutral-700 text-xs font-medium font-['Pretendard']">긴급</span>
</div>
<p className="text-black/opacity-20 text-base font-semibold font-['Pretendard'] ml-[7px] mt-[3px]">{urgentNotice.title}</p>
<button className='ml-auto my-auto' onClick={() => setUrgentNotice(null)}>X</button>
</div>
<p className="text-neutral-700 text-sm font-normal font-['Pretendard']">{truncateText(urgentNotice.content, 30)}</p>
<p className="text-neutral-700 text-sm font-normal font-['Pretendard']">{truncateText(urgentNotice.content, 28)}</p>
</div>
)}
<Swiper
Expand Down Expand Up @@ -266,7 +266,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">라운지</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">라운지</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -276,7 +276,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">리차징룸</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">리차징룸</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -286,7 +286,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">무인택배</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">무인택배</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -296,7 +296,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">폰부스</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">폰부스</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -306,7 +306,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">복합기</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">복합기</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -316,7 +316,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">스낵바</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">스낵바</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -326,7 +326,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">사무용품</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">사무용품</p>
</div>
<div className="flex flex-col items-center">
<Image
Expand All @@ -336,7 +336,7 @@ const BranchInfo: React.FC = () => {
height={16}
className="w-[40px] h-[40px] my-auto"
/>
<p className="mt-2">무제한 커피</p>
<p className="mt-2 text-center text-black/opacity-20 text-sm font-medium font-['Pretendard'] leading-[21px]">무제한 커피</p>
</div>
</div>
</div>
Expand All @@ -347,7 +347,7 @@ const BranchInfo: React.FC = () => {
<BranchOffice branchName={branchName} setUrgentNotice={setUrgentNotice} />
<footer className="w-full text-center py-[30px]">
<button
className="w-[361px] h-12 bg-indigo-700 rounded-lg border border-indigo-700 text-center text-stone-50 text-[15px] font-semibold"
className="w-[90%] h-12 bg-indigo-700 rounded-lg border border-indigo-700 text-center text-stone-50 text-[15px] font-semibold"
onClick={handleGoToReservation}>
예약하기
</button>
Expand Down
16 changes: 8 additions & 8 deletions src/components/map/BranchModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const BranchModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
};

return (
<aside className="w-[373px] mx-auto fixed bottom-[100px] left-0 right-0 z-50">
<aside className="w-[350px] mx-auto fixed bottom-[110px] left-0 right-0 z-50">
<div ref={modalRef} className="bg-white px-4 py-6 rounded-lg shadow-lg">
<div className='flex'>
<div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
Expand All @@ -90,26 +90,26 @@ const BranchModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
/>
</div>
<div className='ml-4 flex-1'>
<h2 className="text-xl font-semibold">{branchName}</h2>
<div className="flex items-start">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[4px] mr-2" />
<p className="text-sm break-words">{branchAddress}</p>
<h2 className="text-black/opacity-20 text-lg font-bold font-['Pretendard'] leading-[27px]">{branchName}</h2>
<div className="flex items-start mt-[12px]">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[2px] mr-2" />
<p className="text-xs break-words">{branchAddress}</p>
</div>
<div className="flex">
<Image src="/map/OfficeInfo.svg" alt="Location" width={12} height={12} className="mr-2" />
<p className="text-sm break-words">회의실 {branchTotalMeetingRoomCount}개 중 현재 {branchActiveMeetingRoomCount}개 사용중</p>
<p className="text-xs break-words">회의실 {branchTotalMeetingRoomCount}개 중 현재 {branchActiveMeetingRoomCount}개 사용중</p>
</div>
</div>
</div>
<div className="flex justify-between pt-[25px]">
<button
className="flex w-[163px] h-[36px] bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center gap-2"
className="flex w-[48%] h-[36px] bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center gap-2"
onClick={handleOfficeInfo}
>
상세보기
</button>
<button
className="flex w-[163px] h-[36px] text-[#3B268C] px-[6px] py-[6px] rounded-md justify-center items-center gap-2 border border-[#3E2896]"
className="flex w-[48%] h-[36px] text-[#3B268C] px-[6px] py-[6px] rounded-md justify-center items-center gap-2 border border-[#3E2896]"
onClick={handleGoToReservation}
>
예약 바로가기
Expand Down
10 changes: 9 additions & 1 deletion src/components/map/UseMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ const UseMap: React.FC = () => {
const [selectedMarker, setSelectedMarker] = useState<string | null>(null);
const [branchCount, SetBranchCount] = useState(0);
const [canBranchCount, SetCanBranchCount] = useState(0);
const [isIOS, setIsIOS] = useState(false);

useEffect(() => {
const userAgent = window.navigator.userAgent;
if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
setIsIOS(true);
}
}, []);

useEffect(() => {
const initMap = () => {
Expand Down Expand Up @@ -277,7 +285,7 @@ const UseMap: React.FC = () => {
/>
<button
id="current-location-button"
className={`absolute ${isModalOpen ? 'bottom-[300px]' : 'bottom-[105px]'} left-4 p-2 flex items-center justify-center`}
className={`absolute ${isModalOpen ? 'bottom-[300px]' : 'bottom-[105px]'} left-4 p-2 flex items-center justify-center ${isIOS ? 'mb-16' : ''}`}
onMouseEnter={() => setImageSrc('/map/MapLocationActive.png')}
onMouseLeave={() => setImageSrc('/map/MapLocation.png')}
onClick={handleCurrentLocationClick}
Expand Down
12 changes: 6 additions & 6 deletions src/components/reservation/shared/SharedSelectOffice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const SharedSelectOffice: React.FC<SharedSelectOfficeProps> = ({ branch, onClose
<div ref={mapRef} className="w-[393px] mx-auto h-full">
</div>
<div className="absolute top-4 right-4">
<aside className="w-[373px] mx-auto fixed bottom-[100px] left-0 right-0 z-50">
<aside className="w-[350px] mx-auto fixed bottom-[110px] left-0 right-0 z-50">
<div className="bg-white px-4 py-6 rounded-lg shadow-lg">
<div className='flex'>
<div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
Expand All @@ -84,16 +84,16 @@ const SharedSelectOffice: React.FC<SharedSelectOfficeProps> = ({ branch, onClose
/>
</div>
<div className='ml-4 flex-1'>
<h2 className="text-xl font-semibold">{branch.branchName}</h2>
<h2 className="text-black/opacity-20 text-lg font-bold font-['Pretendard'] leading-[27px]">{branch.branchName}</h2>
{branch.branchAddress && branch.branchLatitude && branch.branchLongitude && (
<div className="flex items-start">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[4px] mr-2" />
<p className="text-sm break-words">{branch.branchAddress}</p>
<div className="flex items-start mt-[12px]">
<Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[2px] mr-2" />
<p className="text-xs break-words">{branch.branchAddress}</p>
</div>
)}
<div className="flex">
<Image src="/map/OfficeInfo.svg" alt="Location" width={12} height={12} className="mr-2" />
<p className="text-sm break-words">회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중</p>
<p className="text-xs break-words">회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중</p>
</div>
</div>
</div>
Expand Down

0 comments on commit b7ecdfc

Please sign in to comment.