Skip to content

Commit

Permalink
[Style] Member reservation mobile style main home style modification
Browse files Browse the repository at this point in the history
  • Loading branch information
mac authored and mac committed Jun 15, 2024
1 parent 678be2d commit b86ffbb
Show file tree
Hide file tree
Showing 26 changed files with 193 additions and 226 deletions.
11 changes: 7 additions & 4 deletions src/app/(home)/components/login/LoginHome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,16 @@ export default async function HomePage({ user }: { user: IUser }) {
// 예약 내역 호출 하기

return (
<main className="md:pt-[7rem] py-[5rem] px-[1.25rem] relative">
<main className=" md:pt-[7rem] py-[5rem] px-[1.25rem] relative">
<section>
<ContentWrap>
<div className="md:flex gap-[1.5rem]">
<section className="bg-blue-50 rounded-2xl p-[2.5rem] relative max-xl:p-[1.5rem] max-md:w-full max-md:p-[1rem]">
<div className="md:flex gap-[1.5rem] relative">
<AllMembership user={user} />
<section className=" w-[62.8125rem] bg-blue-50 rounded-2xl p-[2.5rem] relative max-xl:p-[1.5rem] max-md:w-full max-md:p-[1rem]">
<div className=" md:flex gap-[1.5rem] relative">
<div className="w-[38.3125rem] max-md:w-full ">
<AllMembership user={user} />
</div>

{!data && (
<div className="pt-[2.5rem] text-[1.25rem] text-blue-400 max-md:text-[0.875rem]">
이용 중인 공유 오피스가 없습니다.
Expand Down
47 changes: 6 additions & 41 deletions src/app/(search)/map/components/BuildingItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,39 +61,18 @@ export default function BuildingItem() {
alt={`${office.location}`}
/>
</div>
<div className="flex flex-col gap-2 max-md:w-full md:w-[16.6875rem] mb:h-[3.875rem] md:h-[5.125rem] justify-between">
<div className="flex justify-between">
<p className="font-semibold mb:text-[1rem] md:text-lg">
{office.location}
</p>

{/* {office.rating.avg_rating && office.rating.count && (
<div className="flex items-center">
<Image
src="/svg/map/star.svg"
width={18}
height={18}
alt="별"
/>
{office.rating.avg_rating}.0 ({office.rating.count})
</div>
)} */}
</div>
<div className=" flex flex-col max-md:w-full md:w-[16.6875rem] mb:h-[3.875rem] md:h-[5.125rem] justify-between">
<span className="md:text-lg mb:text-sm font-bold">
{office.location}
</span>

<div className="flex gap-4 justify-between mb:text-[0.625rem] md:text-xs">
<div className="flex flex-col gap-1">
<div className="h-3/3 flex md:text-sm mb:text-xs font-semibold">
<div className="flex flex-col">
<span>{office.traffic_info}</span>
<span>
{office.city}구 {office.street} {office.address}
</span>
</div>
<div>
<button
className={`${currentBuilding && currentBuilding.location === office.location ? 'bg-white text-black' : 'bg-blue-400 text-white'} rounded-2xl mb:w-[3.375rem] mb:h-[1.4375rem] md:w-[3.8125rem] md:h-[1.6875rem] p-1`}
>
바로 예약
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -125,20 +104,6 @@ export default function BuildingItem() {
<p className="font-bold mb:text-[1rem] md:text-lg">
{office.location}
</p>
{/* {office.reviews &&
office.reviews.avg_rating &&
office.reviews.review_count && (
<div className="flex items-center">
<Image
src="/svg/map/star.svg"
width={18}
height={18}
alt="별"
/>
{office.reviews.avg_rating}.0 (
{office.reviews.review_count})
</div>
)} */}
</div>
<p className="text-gray-300 mb:text-[0.625rem] md:text-sm">
{office.traffic_info}
Expand Down
2 changes: 1 addition & 1 deletion src/app/(search)/map/components/Loader/UpdateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function UpdateModal() {
</div>
<div onClick={closeModal} className="flex flex-col space-y-4 ">
<Link
className="bg-[#688AF2] text-center text-white px-6 py-3 rounded-md transition-colors duration-300 hover:bg-red-500"
className="bg-[#688AF2] text-center text-white px-6 py-3 rounded-md transition-colors duration-300"
href="main"
>
<button>홈으로</button>
Expand Down
18 changes: 9 additions & 9 deletions src/app/(search)/reservation/[id]/components/EnterPriseMembership.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@ export default function EnterPriseMembership({
<>
<div className="">
{RTab === '좌석' && (
<div className="flex flex-col gap-6 mt-6">
<div className="flex flex-col gap-4 mt-6">
<div className="mb:text-sm md:text-lg font-bold mb-2">
예약 기간을 선택하세요.
</div>
<div className="flex mb:gap-[2px] md:gap-2 mb:w-[18rem] md:w-[26.6875rem] h-[6rem] flex-wrap">
<div className="flex md:gap-2 mb:gap-1 mb:w-full md:w-full h-[6rem] flex-wrap mx-auto">
{Array.from({ length: 12 }, (_, i) => i + 1).map(
(month, index) => (
<div
Expand All @@ -108,9 +108,9 @@ export default function EnterPriseMembership({
onClick={() => handleMonthClick(month)}
className={`w-full h-full ${
selectedMonth === month
? 'bg-blue-400 text-white border-2 border-blue-500'
: 'bg-white border-2 text-[#171717] border-gray-300'
} rounded-lg md:text-sm mb:text-[0.75rem] font-normal md:p-[0.63rem] border-1 border-gray-300 border-solid`}
? 'bg-blue-400 text-white border-blue-500'
: 'bg-white text-[#171717] border-gray-300'
} rounded-lg md:text-sm mb:text-[0.75rem] font-normal md:p-[0.63rem]`}
>
{month}개월
</button>
Expand Down Expand Up @@ -152,12 +152,12 @@ export default function EnterPriseMembership({
hasError={hasError}
onBlur={handleBlur}
/>
<div className=" mb:text-sm md:text-lg font-bold">
<div className="mb:text-sm md:text-lg font-bold">
예상 견적을 확인하세요.
</div>
<div className="md:w-[26.6875rem] md:h-[3.875rem] mb:w-[18rem] mb:h-[2.625rem] rounded-2xl bg-white border">
<div className="md:h-[3.275rem] mb:h-[2.625rem] rounded-xl bg-white">
{isNaN(peopleCount) ? null : (
<p className="md:leading-none font-bold md:text-xl md:p-6 mb:p-2">
<p className="md:leading-none font-bold md:text-xl md:p-4 mb:p-2">
{peopleCount && peopleCount * 2700000}
</p>
)}
Expand All @@ -184,7 +184,7 @@ export default function EnterPriseMembership({
<div className="w-full text-center my-4">
<button
// onClick={() => setShowMobileTable(true)}
className="w-[7.375rem] h-[3rem] bg-[#688AF2] text-white rounded-lg leading-none font-bold text-xl"
className="w-[7.75rem] h-[2.5rem] bg-[#6377E9] text-white rounded-lg leading-[1.375rem]"
>
문의하기
</button>
Expand Down
122 changes: 51 additions & 71 deletions src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export default function MonthPassMembership({
<div className="mb:text-sm md:text-lg font-bold mb-2">
예약 기간을 선택하세요.
</div>
<div className="flex gap-1 mb:w-full md:w-full h-[6rem] flex-wrap mx-auto">
<div className="flex md:gap-2 mb:gap-1 mb:w-full md:w-full h-[6rem] flex-wrap mx-auto">
{Array.from({ length: 12 }, (_, i) => i + 1).map(
(month, index) => (
<div
Expand Down Expand Up @@ -308,21 +308,20 @@ export default function MonthPassMembership({
{seatList.map((seat, index) => (
<div
key={index}
className="mb:w-[18rem] md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
className="mb:w-full md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
>
<div className="flex mb:gap-1 md:gap-2 mb:p-2 md:p-4 justify-between">
<div className="pr-4 border-gray-300 flex">
<div className="pr-4 border-r-2">
<p className="mb:text-[0.75rem] md:text-[1rem] md:leading-7 mb:leading-5">
{seat.type}
</p>
<p className="mb:text-[0.875rem] md:text-[1.25rem] font-bold ">
{seat.code}
</p>
<div className="flex justify-start">
<div className="flex flex-col pr-4 border-r-2">
<div className="text-sm text-black font-normal">
{seat?.type}
</div>
<div className="font-bold text-lg text-black">
{seat?.code}
</div>
</div>
<div className="pl-4 md:font-normal md:text-lg mb:text-[0.25rem] mb:leading-5 md:leading-7">
<p>{seat.start_date} ~ </p>
<p> {seat.end_date}</p>
<div className="text-black font-normal pl-4">
{seat?.start_date}
</div>
</div>
<div className="flex items-center">
Expand All @@ -347,41 +346,24 @@ export default function MonthPassMembership({
</div>
</div>
))}
{mobileConfirm && (
<div className="hidden-desk w-full flex h-[2.25rem] text-[0.625rem] gap-2 mt-2 mb-4 leading-4 border-4">
<p className="h-[1.4375rem] w-[11.1875rem] border-4">
미팅룸, 컨퍼런스 룸, 스튜디오 등 필요하신가요?
</p>
<div>
<button
onClick={() =>
selectedSeatAll?.start_date && setRTab('공간')
}
className="w-[6.5625rem] h-[2rem] p-2 bg-[#688AF2] text-[0.625rem] text-white rounded-lg "
>
공간 예약 하러 가기
</button>
</div>
</div>
)}
{confirm && (
<div className="hidden-360 flex h-[2.25rem] gap-2 leading-6 my-4 ">
<p>
미팅룸, 컨퍼런스 룸, 스튜디오 등 다양한 공간이
필요하신가요?
</p>
<div>
<button
onClick={() =>
selectedSeatAll?.start_date && setRTab('공간')
}
className="w-[9.875rem] h-[2.5rem] leading-6 p-2 bg-[#688AF2] text-[0.875rem] text-white rounded-lg"
>
공간 예약 하러 가기
</button>
</div>

<div className="flex text-xs h-[2.25rem] items-center gap-2 my-4 justify-between">
<p>
미팅룸, 컨퍼런스 룸, 스튜디오 등 다양한 공간이
필요하신가요?
</p>
<div>
<button
onClick={() =>
selectedSeatAll?.start_date && setRTab('공간')
}
className="w-[9.875rem] h-[2.5rem] leading-6 p-2 bg-[#688AF2] text-[0.875rem] text-white rounded-lg"
>
공간 예약 하러 가기
</button>
</div>
)}
</div>

{selectedSeatAll && (
<div className="py-4">
<div className="mb:text-sm md:text-lg font-bold mb-4">
Expand Down Expand Up @@ -504,21 +486,20 @@ export default function MonthPassMembership({
{seatList.map((seat, index) => (
<div
key={index}
className="mb:w-[18rem] md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
className="mb:w-full md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
>
<div className="flex mb:gap-1 md:gap-2 mb:p-2 md:p-4 justify-between">
<div className="pr-4 border-gray-300 flex">
<div className="pr-4 border-r-2">
<p className="mb:text-[0.75rem] md:text-[1rem] md:leading-7 mb:leading-5">
{seat.type}
</p>
<p className="mb:text-[0.875rem] md:text-[1.25rem] font-bold ">
{seat.code}
</p>
<div className="flex justify-start">
<div className="flex flex-col pr-4 border-r-2">
<div className="text-sm text-black font-normal">
{seat?.type}
</div>
<div className="font-bold text-lg text-black">
{seat?.code}
</div>
</div>
<div className="pl-4 md:font-normal md:text-lg mb:text-[0.25rem] mb:leading-5 md:leading-7">
<p>{seat.start_date} ~ </p>
<p> {seat.end_date}</p>
<div className="text-black font-normal pl-4">
{seat?.start_date}
</div>
</div>
<div className="flex items-center">
Expand Down Expand Up @@ -546,21 +527,20 @@ export default function MonthPassMembership({
{spaceList.map((space, index) => (
<div
key={index}
className="mb:w-[18rem] md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
className="mb:w-full md:w-[26.6875rem] mb:h-[4.1875rem] md:h-[5.625rem] bg-white text-lg rounded-xl p-1 pl-2 mb-2"
>
<div className="flex mb:gap-1 md:gap-2 mb:p-2 md:p-4 justify-between">
<div className="pr-4 border-gray-300 flex">
<div className="pr-4 border-r-2">
<p className="mb:text-[0.75rem] md:text-[1rem] md:leading-7 mb:leading-5">
{space.type}
</p>
<p className="mb:text-[0.875rem] md:text-[1.25rem] font-bold ">
{space.code}
</p>
<div className="flex justify-start">
<div className="flex flex-col pr-4 border-r-2">
<div className="text-sm text-black font-normal">
{space?.type}
</div>
<div className="font-bold text-lg text-black">
{space?.code}
</div>
</div>
<div className="pl-4 md:font-normal md:text-lg mb:text-[0.25rem] mb:leading-5 md:leading-7">
<p>{space.start_date} ~ </p>
<p> {space.end_date}</p>
<div className="text-black font-normal pl-4">
{space?.start_date}
</div>
</div>
<div className="flex items-center">
Expand Down
Loading

0 comments on commit b86ffbb

Please sign in to comment.