[feat] 신고하기 컴포넌트 일단 연동함

bsideproject · Nov 29, 2023 · ac035a7 · ac035a7
1 parent 73d108f
commit ac035a7
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 104 deletions.
diff --git a/components/Button/Button.module.scss b/components/Button/Button.module.scss
@@ -1,5 +1,5 @@
 .button {
-  @apply rounded-[2px] font-pretendard text-[18px] font-semibold;
+  @apply rounded-[2px] font-pretendard text-[18px];
 
   &.lg {
     @apply w-full px-[13px];
@@ -11,10 +11,10 @@
     @apply w-small px-[11px];
   }
   &.reset {
-    @apply h-[54px] w-[110px] rounded-[2px] font-pretendard bg-transparent border border-solid border-r1 text-r1 font-semibold text-[18px];
+    @apply h-[54px] w-[110px] rounded-[2px] font-pretendard bg-transparent border border-solid border-r1 text-r1 text-[18px];
   }
   &.apply {
-    @apply bg-r1 w-[217px] text-g0 font-semibold h-[54px] rounded-[2px] border-r1 font-pretendard border-solid;
+    @apply bg-r1 w-[217px] text-g0 h-[54px] rounded-[2px] border-r1 font-pretendard border-solid;
   }
   &.r1 {
     @apply bg-r1 text-g0;
@@ -33,23 +33,23 @@
   }
 
   &.noBg {
-    @apply bg-g0 border border-solid border-r1 rounded-[2px] text-r1 font-semibold;
+    @apply bg-g0 border border-solid border-r1 rounded-[2px] text-r1;
   }
 
   &.none {
     @apply bg-transparent font-black border-none text-black;
   }
 
   &.outlined {
-    @apply bg-g0 border border-solid border-g4 rounded-[2px] font-semibold text-g5;
+    @apply bg-g0 border border-solid border-g4 rounded-[2px] text-g5;
   }
 }
 .reset {
-  @apply h-[54px] w-[110px] rounded-[2px] font-pretendard bg-transparent border border-solid border-r1 text-r1 font-semibold text-[18px];
+  @apply h-[54px] w-[110px] rounded-[2px] font-pretendard bg-transparent border border-solid border-r1 text-r1 text-[18px];
 }
 
 .submit {
-  @apply bg-r1 w-[233px] text-g0 font-semibold h-[54px] rounded-[2px] border-r1 font-pretendard border-solid;
+  @apply bg-r1 w-[233px] text-g0 h-[54px] rounded-[2px] border-r1 font-pretendard border-solid;
 }
 
 .button-wrapper {

diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -10,20 +10,34 @@ interface ButtonProps {
   color?: 'r1' | 'r4' | 'g2' | 'none' | 'noBg' | 'outlined';
   height?: string;
   _className?: string;
+  fontWeight?: 'normal' | 'light';
 }
 
 /**
  * @param
  * @returns Button Component!
  */
-function Button({ type = 'button', size, children, onClick, disabled, color, height, _className }: ButtonProps) {
+function Button({
+  type = 'button',
+  size,
+  children,
+  onClick,
+  disabled,
+  color,
+  height,
+  _className,
+  fontWeight = 'normal',
+}: ButtonProps) {
   const disabledCss = disabled ? styles.disabled : '';
   const styleSize = (size || '').indexOf('px') > -1 ? `w-[${size}]` : styles[`${size}`];
   const heightStyle = height ? `h-[${height}]` : 'h-[54px]';
+  const fontWeightStyle = fontWeight === 'light' ? 'font-normal' : 'font-semibold';
 
   return (
     <button
-      className={`${styles.button} ${styleSize} ${styles[`${color}`]} ${disabledCss} ${heightStyle} ${_className}`}
+      className={`${styles.button} ${styleSize} ${
+        styles[`${color}`]
+      } ${disabledCss} ${heightStyle} ${_className} ${fontWeightStyle}`}
       onClick={onClick}
       disabled={disabled}
       type={type}

diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx
@@ -19,59 +19,62 @@ import { contactRoom, deleteRoom, fetchFurnishings, getRoom } from '@/api/room';
 import useModal from '@/hooks/useModal';
 import { useSession } from 'next-auth/react';
 import { FieldError, FieldValues, SubmitHandler, useForm } from 'react-hook-form';
-import { isRequired, isValidEmail } from '@/utils/validCheck.ts';
+import Check2 from '@/public/icons/Check2.svg';
 import styles from './room.module.scss';
-// const RoomDetailLayout = ({ children }: any) => {
-//   const router = useRouter();
-//   const { id } = router.query;
-
-//   const { openModal, closeModal } = useModal();
-
-//   const handleButtonClick = () => {
-//     window.history.back();
-//   };
-
-//   const removeRoom = async () => {
-//     if (typeof id === 'string') {
-//       await deleteRoom(id);
-//     }
-//   };
-
-//   const showDeleteModal = () => {
-//     openModal({
-//       props: {
-//         title: 'Delete this post?',
-//         content: 'You will not be able to restore this post.',
-//         buttonType: 'both',
-//         buttonName: 'Cancel',
-//         buttonName2: 'Delete',
-//         hasCloseButton: true,
-//         handleClose: () => {
-//           closeModal();
-//         },
-//         handleSecondButton: async () => {
-//           await removeRoom();
-//           router.push('/');
-//           closeModal();
-//         },
-//       },
-//     });
-//   };
-
-//   return (
-//     <>
-//       <Header
-//         type="back"
-//         bgColor="white"
-//         handleButtonClick={handleButtonClick}
-//         right="delete"
-//         handleSecondButtonClick={showDeleteModal}
-//       />
-//       <div className="mx-auto mt-[54px]">{children}</div>
-//     </>
-//   );
-// };
-
+
+const REPORT_REASON = ['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer'];
+
+const ReportModal = ({ closeModal }: { closeModal: () => void }) => {
+  const { handleSubmit } = useForm();
+
+  const router = useRouter();
+  const { id } = router.query;
+  const [selectedButtonIndex, setSelectedButtonIndex] = React.useState(-1);
+
+  const onSubmit: SubmitHandler<FieldValues> = async (data) => {
+    // TODO: 신고하기 API 연결
+    closeModal();
+  };
+
+  const handleButtonClick = (index: number) => {
+    setSelectedButtonIndex(index);
+  };
+  return (
+    <>
+      <h2>Why are you reporting?</h2>
+      <p
+        className="text-r1 text-[16px]"
+        dangerouslySetInnerHTML={{
+          __html: 'This won’t be shared with the reported user',
+        }}
+      />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-col gap-[10px] mt-[10px]">
+          {REPORT_REASON.map((item, index) => (
+            <Button
+              onClick={() => handleButtonClick(index)}
+              color={selectedButtonIndex === index ? 'noBg' : 'outlined'}
+              size="lg"
+              fontWeight="light"
+              key={index}
+            >
+              <div className={`flex items-center justify-between `}>
+                <span>{item}</span>
+                {selectedButtonIndex === index && <Check2 className="ml-auto" />}
+              </div>
+            </Button>
+          ))}
+        </div>
+        <div className="pt-[12px]">
+          <Button size="lg" type="submit" disabled={selectedButtonIndex === -1}>
+            Report
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
 const ContactModal = ({ closeModal }: { closeModal: () => void }) => {
   const {
     register,
@@ -195,24 +198,6 @@ export default function RoomDetail() {
 
   const { openModal, closeModal } = useModal();
 
-  const showReporting = () => {
-    openModal({
-      props: {
-        title: 'Why are you reporting?',
-        content: "This wan't be shared with the reported user",
-        buttonName: 'Report',
-        buttonNames: ['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer'],
-        handleClose: () => {
-          closeModal();
-        },
-      },
-    });
-  };
-
-  const handleReport = () => {
-    setShowReport(false);
-  };
-
   const includeServices = useMemo(() => {
     return (
       room?.maintenance &&
@@ -277,7 +262,6 @@ export default function RoomDetail() {
   const handleContactPopup = () => {
     openModal({
       props: {
-        title: 'Add room',
         custom: true,
         customHeader: true,
         hasCloseButton: true,
@@ -287,12 +271,16 @@ export default function RoomDetail() {
     });
   };
 
-  /** Contact Click Event */
-  const handleContact = () => {
-    // Email 발송 기능 추가 필요
-    setShowContact(false);
-    setValue('email', '');
-    setValue('description', '');
+  const showReporting = () => {
+    openModal({
+      props: {
+        custom: true,
+        customHeader: true,
+        hasCloseButton: true,
+        hasButton: false,
+      },
+      children: <ReportModal closeModal={closeModal} />,
+    });
   };
 
   useEffect(() => {
@@ -441,25 +429,7 @@ export default function RoomDetail() {
             </div>
           </>
         )}
-        {showReport && (
-          <ModalBox
-            title="Why are you reporting?"
-            content="This wan't be shared with the reported user"
-            buttonType="wrapper"
-            buttonName="Report"
-            buttonNames={['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer']}
-            handleCustomEvent={handleReport}
-          />
-        )}
       </div>
     </>
   );
 }
-
-// export default function RoomDetail() {
-//   return (
-//     <RoomDetailLayout>
-//       <Page />
-//     </RoomDetailLayout>
-//   );
-// }