HOST, GUEST 역할 분리2 (#36)

* feat : HOST, GUEST 역할 분리 * feat : HOST, GUEST 역할 분리 * feat : HOST, GUEST 기능 분리 * fix : 숙소 등록, 수정 안되는 문제 해결 * feat : 숙소 매출 현황 페이지에 숙소 상세 정보 표시 * design : 숙소 매출 현황 페이지에 숙소 상세 정보 디자인 변경1 * design : 숙소 매출 현황 페이지에 숙소 상세 정보 디자인 변경1 --------- Co-authored-by: kyumho kim <[email protected]>
BES-HOTSIX · Mar 7, 2024 · f8bea27 · f8bea27
1 parent ec5bb9a
commit f8bea27
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 213 deletions.
diff --git a/src/components/hotel/HotelDetail.js b/src/components/hotel/HotelDetail.js
@@ -78,7 +78,7 @@ export default function HotelDetail({ id }) {
  className='rounded-md'
  />
  <div className='absolute top-2 left-2'>
- {user && <LikeButton hotelId={id} />}
+ {user?.objData.role == 'GUEST' && <LikeButton hotelId={id} />}
  </div>
  <button
  onClick={handleAllPhotosButton}
@@ -176,34 +176,36 @@ export default function HotelDetail({ id }) {
  </div>
  </div>
  </div>
- <div className='bg-gray-100 w-full rounded-lg shadow-md p-4 mt-4'>
- <div>
+ {user?.objData.role === 'GUEST' && (
+ <div className='bg-gray-100 w-full rounded-lg shadow-md p-4 mt-4'>
  <div>
- <h3 className='text-lg font-semibold mb-2'>
- 특별한 숙소 예약하기
- </h3>
- <p className='text-gray-600 mb-4'>
- 이 숙소는 독특한 경험을 제공합니다. 멋진 경치와 편안한 환경을
- 즐겨보세요.
- </p>
- </div>
+ <div>
+ <h3 className='text-lg font-semibold mb-2'>
+ 특별한 숙소 예약하기
+ </h3>
+ <p className='text-gray-600 mb-4'>
+ 이 숙소는 독특한 경험을 제공합니다. 멋진 경치와 편안한 환경을
+ 즐겨보세요.
+ </p>
+ </div>
 
- <div className='space-y-52 text-lg mb-4'>
- <div className='mt-32'>
- <span className='font-semibold'>가격: </span>
- <span className='text-gray-800'>
- {formatPrice(hotel.price)}원/박
- </span>
+ <div className='space-y-52 text-lg mb-4'>
+ <div className='mt-32'>
+ <span className='font-semibold'>가격: </span>
+ <span className='text-gray-800'>
+ {formatPrice(hotel.price)}원/박
+ </span>
+ </div>
+ <button
+ onClick={handleReservationButton}
+ className=' w-full px-6 py-3 bg-red-500 text-white font-semibold rounded-full shadow-lg hover:bg-red-600 transition duration-200 ease-in-out flex items-center justify-center'>
+ <FaCalendarCheck className='mr-2' />
+ 예약하기
+ </button>
  </div>
- <button
- onClick={handleReservationButton}
- className=' w-full px-6 py-3 bg-red-500 text-white font-semibold rounded-full shadow-lg hover:bg-red-600 transition duration-200 ease-in-out flex items-center justify-center'>
- <FaCalendarCheck className='mr-2' />
- 예약하기
- </button>
  </div>
  </div>
- </div>
+ )}
  </div>
 
  <div className='mt-10'>

diff --git a/src/components/hotel/HotelSales.js b/src/components/hotel/HotelSales.js
@@ -1,11 +1,57 @@
 'use client'
 
+import { useHotelDetail } from '@/hooks/useHotel'
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ Image,
+ CardFooter,
+ Divider,
+} from '@nextui-org/react'
 import React from 'react'
 
 export default function HotelSales({ id }) {
+ const { hotel, isHotelLoading, isFetching, isError, error } =
+ useHotelDetail(id)
+
+ if (isHotelLoading) return <div></div>
+
+ console.log(hotel)
+
  return (
  <div className='mt-32 min-h-[60vh] text-center'>
- <div>{id}번 호텔 매출 현황 페이지</div>
+ <div className='grid grid-cols-4'>
+ <Card className='col-span-1 py-4 bg-gray-100'>
+ <CardHeader className='pb-0 pt-2 px-4 flex-col items-start'>
+ <p className='text-tiny uppercase font-bold'>{hotel?.address}</p>
+ <small className='text-default-500'>{hotel?.addressDetail}</small>
+ <h4 className='font-bold text-large'>{hotel?.nickname}</h4>
+ </CardHeader>
+ <CardBody className='overflow-visible py-2'>
+ <Image
+ alt='Card background'
+ className='object-cover rounded-xl'
+ src={hotel?.imagesResponse.imageUrl[0]}
+ width={270}
+ />
+ </CardBody>
+ <Divider />
+ <CardFooter>
+ <div className='flex flex-col text-start space-y-2'>
+ <p>호스트 : {hotel?.host}</p>
+ <p>하루 숙박비 : {hotel?.price}원</p>
+ <p>숙소 유형 : {hotel?.hotelType}</p>
+ <p>방 개수 : {hotel?.roomCnt}</p>
+ <p>침대 개수 : {hotel?.bedCnt}</p>
+ <p>화장실 개수 : {hotel?.bathroomCnt}</p>
+ <p>최대 수용 인원: {hotel?.maxPeople}</p>
+ <p>편의 시설 : {hotel.facility.join(', ')}</p>
+ <p>소개 : {hotel.description}</p>
+ </div>
+ </CardFooter>
+ </Card>
+ </div>
  </div>
  )
 }
diff --git a/src/components/mypage/LeftBar.js b/src/components/mypage/LeftBar.js
@@ -1,65 +1,65 @@
-"use client";
+'use client'
 
-import { Avatar, Spacer } from "@nextui-org/react";
-import { FaArrowRight, FaUserCircle } from "react-icons/fa";
-import React from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useUser } from "@/hooks/useUser";
-import { useRouter } from "next/navigation";
-import { toast } from "react-toastify";
+import { Avatar, Spacer } from '@nextui-org/react'
+import { FaArrowRight, FaUserCircle } from 'react-icons/fa'
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useUser } from '@/hooks/useUser'
+import { useRouter } from 'next/navigation'
+import { toast } from 'react-toastify'
 
 export default function LeftBar(props) {
- const { user } = useUser();
- const router = useRouter();
+ const { user } = useUser()
+ const router = useRouter()
 
  if (user && user.objData.role === null) {
- toast.info("호스트 혹은 게스트 선택 후 이용해주세요🏡🧳");
- router.push("/auth/signup/role");
+ toast.info('호스트 혹은 게스트 선택 후 이용해주세요🏡🧳')
+ router.push('/auth/signup/role')
  } // 역할 설정 안했을 시, 역할 설정 페이지로 이동
 
- const pathName = usePathname();
+ const pathName = usePathname()
 
  const items = [
- { text: "예약 내역", link: "/mypage/reservations" },
- { text: "내 정보", link: "/mypage/info" },
- { text: "결제 내역", link: "/mypage/cashLog" },
- { text: "내가 등록한 숙소", link: "/mypage/hotels" },
- { text: "내가 찜한 숙소", link: "/mypage/like" },
- { text: "나의 리뷰", link: "/mypage/reviews" },
- ];
+ { text: '예약 내역', link: '/mypage/reservations' },
+ { text: '내 정보', link: '/mypage/info' },
+ { text: '결제 내역', link: '/mypage/cashLog' },
+ { text: '내가 등록한 숙소', link: '/mypage/hotels' },
+ { text: '내가 찜한 숙소', link: '/mypage/like' },
+ { text: '나의 리뷰', link: '/mypage/reviews' },
+ ]
 
  return (
- <div className="flex flex-col items-center w-1/4 bg-[#CECECE]">
+ <div className='flex flex-col items-center w-1/4 bg-[#CECECE]'>
  <Spacer y={5} />
- <div className={"text-2xl"}>마이페이지</div>
+ <div className={'text-2xl'}>마이페이지</div>
  <Spacer y={5} />
  {props.user?.objData.imageUrl ? (
- <Avatar src={props.user.objData.imageUrl} className={"w-44 h-44"} />
+ <Avatar src={props.user.objData.imageUrl} className={'w-44 h-44'} />
  ) : (
  <FaUserCircle size={100} />
  )}
  <Spacer y={5} />
- <div className={"text-2xl"}>{props.user?.objData.nickname}</div>
+ <div className={'text-2xl'}>{props.user?.objData.nickname}</div>
  <Spacer y={10} />
- <ul className={"flex flex-col w-full"}>
+ <ul className={'flex flex-col w-full'}>
  {items
- .filter(
- (item) =>
- item.text !== "내가 등록한 숙소" || user?.objData.role === "HOST"
+ .filter((item) =>
+ user?.objData.role === 'HOST'
+ ? item.text === '내 정보' || item.text === '내가 등록한 숙소'
+ : item.text !== '내가 등록한 숙소'
  )
  .map((item, index) => (
  <Link href={item.link} key={`l-${index}`}>
  <li
  className={`w-full h-15 p-5 flex items-center ${
  pathName === item.link
- ? "bg-white"
- : "hover:cursor-pointer bg-[#898989]"
- }`}
- >
+ ? 'bg-white'
+ : 'hover:cursor-pointer bg-[#898989]'
+ }`}>
  {item.text}
- {item.text === "캐시 사용 내역" && (
- <div className={"ml-auto"}>
+ {item.text === '캐시 사용 내역' && (
+ <div className={'ml-auto'}>
  <FaArrowRight />
  </div>
  )}
@@ -68,5 +68,5 @@ export default function LeftBar(props) {
  ))}
  </ul>
  </div>
- );
+ )
 }