[feat] contact 기능 연동 추가

bsideproject · Nov 12, 2023 · 032d24f · 032d24f
1 parent d086892
commit 032d24f
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
-
-}
+}
diff --git 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
@@ -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
diff --git 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;
+}