[feat] 룸 상세 우선 커밋...

bsideproject · Oct 30, 2023 · da6853a · da6853a
1 parent a84d845
commit da6853a
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 16 deletions.
diff --git 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 (
-          <Button onClick={() => handleClose?.()} color="r1" size="lg">
+          <Button onClick={() => handleClose?.()} color="r1" size="lg" disabled={disabledBtn}>
             {buttonName}
           </Button>
         );
@@ -131,8 +133,8 @@ function Modal({
         ) : (
           <>
             <div className="mt-[10] flex flex-col items-center justify-center space-y-[10px]">{renderButton()}</div>
-            <Button onClick={handleReport} color="r1" size="lg" _className="mt-[20px]">
-              Report
+            <Button onClick={handleCustomEvent} color="r1" size="lg" _className="mt-[20px]">
+              {customButtonName}
             </Button>
           </>
         )}

diff --git 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<string>;

diff --git 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
@@ -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<Record<string, string>>({});
-  const { setUserInfoData, userInfoState } = useUserInfo();
   // TODO: 전체 페이지보다 크면 페이징 처리 안되도록 수정
   // TODO : ModalLayer 로 로그인한 사용자의 Context 생성 필요
   const selectRooms = async () => {

diff --git 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<Furnishing[]>([]);
@@ -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 (
     <>
       <Header
@@ -323,7 +352,9 @@ export default function RoomDetail() {
                 <span className="text-[20px] font-semibold">&#8361; {formatPrice(room.deposit.amount)}&nbsp;</span>
                 <span>/ month</span>
                 <div className="h-[40px] font-medium text-[14px] ml-[12px]">
-                  <Button height="40px">Start a chat</Button>
+                  <Button height="40px" onClick={handleContactPopup}>
+                    Contact
+                  </Button>
                 </div>
               </div>
             </div>
@@ -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 && (
+          <ModalBox
+            size="md"
+            buttonType="default"
+            custom
+            handleClose={() => setShowContact(false)}
+            handleCustomEvent={handleContact}
+            buttonName="Contact"
+            disabledBtn={contactDisabled}
+          >
+            <div>
+              <h2>Do you like this room?</h2>
+              <p
+                className="mt-[4px] text-g5 text-[16px]"
+                dangerouslySetInnerHTML={{
+                  __html: 'Leave your contact info and a message so that the user can reach you back!',
+                }}
+              />
+              <h3 className="text-g7 font-pretendard text-[16px] mb-[17px]">Contact info</h3>
+              <Input
+                type="email"
+                placeholder="Email"
+                register={register('email', {
+                  validate: (value) => {
+                    const isValid = isRequired(value, '필수 항목') || isValidEmail(value, `isValidEmail`);
+                    return isValid;
+                  },
+                })}
+                error={errors.email as FieldError}
+              />
+              <h3 className="mt-[12px] mb-[17px]">Message</h3>
+              <Textarea
+                placeholder="What do you want to tell the user?"
+                register={register('description')}
+                maxByte={500}
+              />
+            </div>
+          </ModalBox>
+        )}
       </div>
     </>
   );