diff --git a/components/Modal/ModalBox.tsx b/components/Modal/ModalBox.tsx index 94fb2f1..00d6d3f 100644 --- a/components/Modal/ModalBox.tsx +++ b/components/Modal/ModalBox.tsx @@ -11,6 +11,7 @@ import Header from '../Header/Header.tsx'; function Modal({ children, hasCloseButton, + disabledBtn = false, overlayClose, title = '', content = '', @@ -19,7 +20,8 @@ function Modal({ buttonType = 'none', handleClose, handleSecondButton, - handleReport, + handleCustomEvent, + customButtonName, buttonName = '', buttonName2 = '', buttonNames = [], @@ -75,7 +77,7 @@ function Modal({ ); case 'default': return ( - ); @@ -131,8 +133,8 @@ function Modal({ ) : ( <>
{renderButton()}
- )} diff --git a/components/Modal/ModalContainer.tsx b/components/Modal/ModalContainer.tsx index b23d6e2..51a31bf 100644 --- a/components/Modal/ModalContainer.tsx +++ b/components/Modal/ModalContainer.tsx @@ -13,10 +13,12 @@ export interface ModalProps { content?: string; custom?: boolean; customHeader?: boolean; + customButtonName?: string; + disabledBtn?: boolean; buttonType?: 'none' | 'both' | 'outline' | 'default' | 'wrapper' | 'disabled'; handleClose?: () => void; handleSecondButton?: () => void; - handleReport?: () => void; + handleCustomEvent?: () => void; buttonName?: string; buttonName2?: string; buttonNames?: Array; diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx index d58d108..9d229a0 100644 --- a/components/RoomCard/RoomCard.tsx +++ b/components/RoomCard/RoomCard.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-expressions */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable react/no-unused-prop-types */ import { ImageFile, ROOM_TYPE, RoomSearch } from '@/public/types/room'; @@ -9,8 +10,8 @@ import Like from '@/public/icons/like.svg'; import Camera from '@/public/icons/camera.svg'; import styles from '@/pages/room/room.module.scss'; import { useRouter } from 'next/router'; -import Card from '../Card/Card'; import { makeLikedRooms, makeDisLikedRooms } from '@/api/userInfo'; +import Card from '../Card/Card'; interface CardProps { room: RoomSearch; diff --git a/pages/index.tsx b/pages/index.tsx index f9f9756..7d5227b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,10 +11,8 @@ import useModal from '@/hooks/useModal.ts'; import Filter from '@/components/Filter/Filter.tsx'; import { getRooms } from '@/api/room'; import isEmpty from 'lodash-es/isEmpty'; -import useUserInfo from '@/hooks/useUserInfo.ts'; import { getProfile } from '@/api/userInfo'; import { UserInfoProps } from '@/context/UserInfoProvider.tsx'; -import { lte } from 'lodash-es'; type HomeProps = NextPage & { getLayout: (page: React.ReactElement, ctx: NextPageContext) => React.ReactNode; @@ -46,7 +44,6 @@ function Home() { const [page, setPage] = useState(0); const [totalElements, setTotalElements] = useState(0); const [searchParams, setSearchParams] = useState>({}); - const { setUserInfoData, userInfoState } = useUserInfo(); // TODO: 전체 페이지보다 크면 페이징 처리 안되도록 수정 // TODO : ModalLayer 로 로그인한 사용자의 Context 생성 필요 const selectRooms = async () => { diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx index 6318c7b..1088277 100644 --- a/pages/room/[id].tsx +++ b/pages/room/[id].tsx @@ -1,5 +1,6 @@ +/* eslint-disable react/no-danger */ import React, { useEffect, useMemo, useState } from 'react'; -import { Button, Header, Space, ModalBox } from '@/components/index.tsx'; +import { Button, Input, Header, Textarea, Space, ModalBox } from '@/components/index.tsx'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { useRouter } from 'next/router'; @@ -17,8 +18,9 @@ import MyImageSvg from '@/components/ImageSvg/ImageSvg'; import { deleteRoom, fetchFurnishings, getRoom } from '@/api/room'; import useModal from '@/hooks/useModal'; import { useSession } from 'next-auth/react'; +import { FieldError, useForm } from 'react-hook-form'; +import { isRequired, isValidEmail } from '@/utils/validCheck.ts'; import styles from './room.module.scss'; - // const RoomDetailLayout = ({ children }: any) => { // const router = useRouter(); // const { id } = router.query; @@ -79,10 +81,17 @@ export default function RoomDetail() { const age = room ? formatAge(room.user.birthDate) : 0; const [isShowDetail, setIsShowDetail] = React.useState(false); const [showReport, setShowReport] = React.useState(false); + const [showContact, setShowContact] = React.useState(false); + const [contactDisabled, setContactDisabled] = React.useState(false); const handleSlideChange = (activeIndex: number) => { setCurrentSlide(activeIndex); }; - + const { + register, + watch, + setValue, + formState: { errors }, + } = useForm({ mode: 'onChange' }); const roomType = room?.roomInfo.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : ''; const [furnishings, setFurnishings] = useState([]); @@ -144,7 +153,6 @@ export default function RoomDetail() { }; const handleReport = () => { - alert('Report Click'); setShowReport(false); }; @@ -193,6 +201,27 @@ export default function RoomDetail() { }); }; + /** Contact Button Click 시 팝업 오픈 */ + const handleContactPopup = () => { + setShowContact(true); + }; + + /** Contact Click Event */ + const handleContact = () => { + // Email 발송 기능 추가 필요 + setShowContact(false); + setValue('email', ''); + setValue('description', ''); + }; + + useEffect(() => { + if (!!errors?.email || !watch('description')) { + setContactDisabled(true); + } else { + setContactDisabled(false); + } + }, [watch, errors]); + return ( <>
₩ {formatPrice(room.deposit.amount)}  / month
- +
@@ -334,12 +365,51 @@ export default function RoomDetail() { title="Why are you reporting?" content="This wan't be shared with the reported user" buttonType="wrapper" - buttonName="" + buttonName="Report" buttonNames={['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer']} handleClose={() => setShowReport(false)} - handleReport={handleReport} + handleCustomEvent={handleReport} /> )} + {showContact && ( + setShowContact(false)} + handleCustomEvent={handleContact} + buttonName="Contact" + disabledBtn={contactDisabled} + > +
+

Do you like this room?

+

+

Contact info

+ { + const isValid = isRequired(value, '필수 항목') || isValidEmail(value, `isValidEmail`); + return isValid; + }, + })} + error={errors.email as FieldError} + /> +

Message

+