From 032d24fe896939c5cb45d0f79100b9a189b89cf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=98=81=EC=9A=B0?= <zestlee1106@gmail.com>
Date: Sun, 12 Nov 2023 20:47:46 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20contact=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/room.ts                              | 12 +++-
 components/Modal/ModalBox.tsx            | 22 +++---
 components/Modal/ModalContainer.tsx      |  1 +
 components/Textarea/Textarea.module.scss |  7 +-
 components/Textarea/Textarea.tsx         |  4 +-
 pages/room/[id].tsx                      | 85 ++++++++++++++++++++++--
 public/icons/close.svg                   |  7 +-
 public/types/room.ts                     |  6 ++
 8 files changed, 118 insertions(+), 26 deletions(-)

diff --git a/api/room.ts b/api/room.ts
index 18450e2..01c872b 100644
--- a/api/room.ts
+++ b/api/room.ts
@@ -1,4 +1,4 @@
-import { Furnishing, Room, RoomFile, RoomSearch, RoomSearchParams } from '@/public/types/room';
+import { ContactParams, Furnishing, Room, RoomFile, RoomSearch, RoomSearchParams } from '@/public/types/room';
 import { fetchData } from './index';
 
 export const fetchFurnishings = async () => {
@@ -51,3 +51,13 @@ export const deleteRoom = async (id: string) => {
     },
   });
 };
+
+export const contactRoom = async (params: ContactParams) => {
+  return fetchData<Room>(`/api/v1/rooms/${params.roomId}/contact`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
diff --git a/components/Modal/ModalBox.tsx b/components/Modal/ModalBox.tsx
index e053cac..69faf53 100644
--- a/components/Modal/ModalBox.tsx
+++ b/components/Modal/ModalBox.tsx
@@ -25,6 +25,7 @@ function Modal({
   buttonName = '',
   buttonName2 = '',
   buttonNames = [],
+  hasButton = true,
   size = 'md',
 }: ModalProps) {
   const { closeModal } = useModal();
@@ -116,7 +117,7 @@ function Modal({
         {hasCloseButton && (
           <div className={styles.close}>
             <button type="button" onClick={onClose}>
-              <Close width={24} height={24} />
+              <Close width={24} height={24} fill="#FF8E00" />
             </button>
           </div>
         )}
@@ -131,14 +132,19 @@ function Modal({
             />
           </div>
         )}
-        {buttonType && buttonType !== 'none' && buttonType !== 'wrapper' ? (
-          <div className="mt-[20px] flex gap-x-2 items-center justify-center">{renderButton()}</div>
-        ) : (
+        {hasButton && (
+          // eslint-disable-next-line react/jsx-no-useless-fragment
           <>
-            <div className="mt-[10] flex flex-col items-center justify-center space-y-[10px]">{renderButton()}</div>
-            <Button onClick={handleCustomEvent} color="r1" size="lg" _className="mt-[20px] font-semibold">
-              {customButtonName}
-            </Button>
+            {buttonType && buttonType !== 'none' && buttonType !== 'wrapper' ? (
+              <div className="mt-[20px] flex gap-x-2 items-center justify-center">{renderButton()}</div>
+            ) : (
+              <div className="mt-[10] flex flex-col items-center justify-center space-y-[10px]">
+                {renderButton()}
+                <Button onClick={handleCustomEvent} color="r1" size="lg" _className="mt-[20px] font-semibold">
+                  {customButtonName}
+                </Button>
+              </div>
+            )}
           </>
         )}
       </div>
diff --git a/components/Modal/ModalContainer.tsx b/components/Modal/ModalContainer.tsx
index 51a31bf..b68215e 100644
--- a/components/Modal/ModalContainer.tsx
+++ b/components/Modal/ModalContainer.tsx
@@ -23,6 +23,7 @@ export interface ModalProps {
   buttonName2?: string;
   buttonNames?: Array<string>;
   buttonNumber?: number;
+  hasButton?: boolean;
   size?: 'md' | 'full';
 }
 
diff --git a/components/Textarea/Textarea.module.scss b/components/Textarea/Textarea.module.scss
index 68cf47c..05ca27d 100644
--- a/components/Textarea/Textarea.module.scss
+++ b/components/Textarea/Textarea.module.scss
@@ -1,8 +1,7 @@
 .textArea {
-  @apply w-full px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring focus:border-[#FF8E00];
+  @apply w-full px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring focus:border-[#FF8E00] font-normal;
 
   &.placeholder {
-    @apply text-g4;
+    @apply text-g4 font-normal;
   }
-
-}
\ No newline at end of file
+}
diff --git a/components/Textarea/Textarea.tsx b/components/Textarea/Textarea.tsx
index a052793..63cfbde 100644
--- a/components/Textarea/Textarea.tsx
+++ b/components/Textarea/Textarea.tsx
@@ -51,7 +51,7 @@ function Textarea({ placeholder, register, maxByte, maxLength, initValue, classN
   return (
     <div className="flex flex-col space-y-2">
       <textarea
-        className={`w-full rounded-[2px] resize-none pl-[14px] pt-[14px] focus:border-g6 focus:outline-none ${
+        className={`w-full rounded-[2px] resize-none pl-[14px] font-normal pt-[14px] focus:border-g6 focus:outline-none ${
           className || 'border-g4 border-[1px] h-[120px]'
         }`}
         placeholder={placeholder}
@@ -63,7 +63,7 @@ function Textarea({ placeholder, register, maxByte, maxLength, initValue, classN
         // readOnly={!!((maxByte && byteCount >= maxByte) || (maxLength && textValue.length >= maxLength)) }
       />
       {(maxByte || 0) > 0 && (
-        <div className="text-right text-g5 text-[14px] bold">
+        <div className="text-right text-g5 text-[14px] font-normal">
           {byteCount} / {maxByte} byte
         </div>
       )}
diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx
index dd95748..75aff7c 100644
--- a/pages/room/[id].tsx
+++ b/pages/room/[id].tsx
@@ -4,7 +4,7 @@ import { Button, Input, Header, Textarea, Space, ModalBox } from '@/components/i
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import { useRouter } from 'next/router';
-import { Furnishing, ROOM_TYPE, RoomSearch } from '@/public/types/room';
+import { ContactParams, Furnishing, ROOM_TYPE, RoomSearch } from '@/public/types/room';
 import { formatAge, formatDate, formatPrice } from '@/utils/transform';
 import ArrowDown from '@/public/icons/arrow-down.svg';
 import Pin from '@/public/icons/pin.svg';
@@ -15,10 +15,10 @@ import ReceiptBadge from '@/public/icons/receipt-badge.svg';
 import Badge from '@/components/Badge/Badge';
 import Like from '@/public/icons/like.svg';
 import MyImageSvg from '@/components/ImageSvg/ImageSvg';
-import { deleteRoom, fetchFurnishings, getRoom } from '@/api/room';
+import { contactRoom, 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 { FieldError, FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 import { isRequired, isValidEmail } from '@/utils/validCheck.ts';
 import styles from './room.module.scss';
 // const RoomDetailLayout = ({ children }: any) => {
@@ -72,6 +72,51 @@ import styles from './room.module.scss';
 //   );
 // };
 
+const ContactModal = ({ closeModal }: { closeModal: () => void }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  const onSubmit: SubmitHandler<FieldValues> = async (data) => {
+    const params: ContactParams = {
+      roomId: id as string,
+      contactInfo: data.email,
+      message: data.description,
+    };
+
+    await contactRoom(params);
+    closeModal();
+  };
+  return (
+    <>
+      <h2>Do you like this room?</h2>
+      <p
+        className="text-g5 text-[16px]"
+        dangerouslySetInnerHTML={{
+          __html: 'Leave your contact info and a message so that the user can reach you back!',
+        }}
+      />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h3 className="text-g7 font-pretendard text-[16px] text-start my-[12px]">Contact info</h3>
+        <Input type="email" placeholder="Email" register={register('email')} error={errors.email as FieldError} />
+        <div className="text-[14px] text-a1 text-start font-normal pt-[6px]">* Phone number not recommended</div>
+        <h3 className="my-[12px] text-start">Message</h3>
+        <Textarea placeholder="What do you want to tell the user?" register={register('description')} maxByte={500} />
+        <div className="pt-[12px]">
+          <Button size="lg" type="submit">
+            Send
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
 export default function RoomDetail() {
   const router = useRouter();
   const { id } = router.query;
@@ -201,9 +246,35 @@ export default function RoomDetail() {
     });
   };
 
+  const completeContact = () => {
+    closeModal();
+
+    openModal({
+      props: {
+        title: 'Congratulation!',
+        content: 'Your message has been sent successfully',
+        buttonType: 'default',
+        buttonName: 'Keep Exploring',
+        handleClose: () => {
+          router.push('/');
+          closeModal();
+        },
+        hasCloseButton: true,
+      },
+    });
+  };
   /** Contact  Button Click 시 팝업 오픈 */
   const handleContactPopup = () => {
-    setShowContact(true);
+    openModal({
+      props: {
+        title: 'Add room',
+        custom: true,
+        customHeader: true,
+        hasCloseButton: true,
+        hasButton: false,
+      },
+      children: <ContactModal closeModal={completeContact} />,
+    });
   };
 
   /** Contact Click Event */
@@ -229,7 +300,7 @@ export default function RoomDetail() {
         bgColor="white"
         handleButtonClick={handleButtonClick}
         right={email === room?.user.email ? 'delete' : undefined}
-        handleSecondButtonClick={showDeleteModal}
+        // handleSecondButtonClick={showDeleteModal}
       />
       <div className="mx-auto mt-[54px]">
         {room && (
@@ -371,7 +442,7 @@ export default function RoomDetail() {
             handleCustomEvent={handleReport}
           />
         )}
-        {showContact && (
+        {/* {showContact && (
           <ModalBox
             size="md"
             buttonType="default"
@@ -409,7 +480,7 @@ export default function RoomDetail() {
               />
             </div>
           </ModalBox>
-        )}
+        )} */}
       </div>
     </>
   );
diff --git a/public/icons/close.svg b/public/icons/close.svg
index 66f58b7..778bb62 100644
--- a/public/icons/close.svg
+++ b/public/icons/close.svg
@@ -1,4 +1,3 @@
-<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5.25L19 19.25" stroke-width="2"/>
-<path d="M5 19.25L19 5.25" stroke-width="2"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M20 2.01429L17.9857 0L10 7.98571L2.01429 0L0 2.01429L7.98571 10L0 17.9857L2.01429 20L10 12.0143L17.9857 20L20 17.9857L12.0143 10L20 2.01429Z" fill="#757575"/>
+</svg>
\ No newline at end of file
diff --git a/public/types/room.ts b/public/types/room.ts
index 5a2a8ce..fc3db32 100644
--- a/public/types/room.ts
+++ b/public/types/room.ts
@@ -161,3 +161,9 @@ export interface RoomSearchParams {
   types?: string;
   furnishingTypes?: string;
 }
+
+export interface ContactParams {
+  roomId: string;
+  contactInfo: string;
+  message: string;
+}