Merge pull request #69 from Strong-Potato/65-feat-create-invite-expir…

…ation-modal

Feat: create invitation modal #65

src/components/Modal/Invitation/Invitation.module.scss

@@ -0,0 +1,52 @@
+@use "@/sass" as *;
+
+.background {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(20, 20, 20, 0.8);
+  z-index: 10;
+
+  .container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    width: 31.2rem;
+    padding: 32px 44px;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    border-radius: 16px;
+    background: $neutral0;
+
+    .wrapperText {
+      text-align: center;
+
+      &__title {
+        color: $neutral900;
+        @include typography(subTitle);
+        margin-bottom: 12px;
+      }
+      &__body {
+        color: $neutral400;
+        @include typography(tabLabel);
+      }
+    }
+    .wrapperButton {
+      display: flex;
+      flex-direction: row;
+      gap: 80px;
+      .accept {
+        color: $primary400;
+        @include typography(button);
+      }
+      .cancel {
+        color: $neutral400;
+        @include typography(button);
+      }
+    }
+  }
+}

src/components/Modal/Invitation/Invitation.tsx

@@ -0,0 +1,80 @@
+import { useNavigate } from "react-router-dom";
+
+import styles from "./Invitation.module.scss";
+
+import { InvitationProps } from "@/types/Invitation";
+
+function Invitation({ invitation, modalClose }: InvitationProps) {
+  const handleModalClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleBackgroundClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    modalClose(true);
+  };
+
+  const navigate = useNavigate();
+
+  return (
+    <>
+      {invitation.valid ? (
+        <div className={styles.background} onClick={handleBackgroundClick}>
+          <div className={styles.container} onClick={handleModalClick}>
+            <div className={styles.wrapperText}>
+              <p className={styles.wrapperText__title}>
+                {invitation.host} 님이 여행에 초대했어요.
+              </p>
+              <p className={styles.wrapperText__body}>
+                초대를 수락하고
+                <br />
+                함께 즐거운 여행을 계획해보세요.
+              </p>
+            </div>
+            <div className={styles.wrapperButton}>
+              <button
+                className={styles.cancel}
+                onClick={() => modalClose(true)}
+              >
+                취소
+              </button>
+              <button
+                className={styles.accept}
+                onClick={() => navigate(`/carryout/${invitation.id}`)}
+              >
+                초대 수락
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className={styles.background} onClick={handleBackgroundClick}>
+            <div className={styles.container} onClick={handleModalClick}>
+              <div className={styles.wrapperText}>
+                <p className={styles.wrapperText__title}>
+                  초대 코드가 만료되었어요.
+                </p>
+                <p className={styles.wrapperText__body}>
+                  초대 코드는 7일 간 유효합니다.
+                  <br />
+                  다른 초대 코드를 받아보세요.
+                </p>
+              </div>
+              <div className={styles.wrapperButton}>
+                <button
+                  className={styles.accept}
+                  onClick={() => modalClose(true)}
+                >
+                  확인
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export default Invitation;

src/hooks/useLockBodyScroll.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+const useLockBodyScroll = (modalOpen: boolean) => {
+  useEffect(() => {
+    if (modalOpen) {
+      const originalStyle = window.getComputedStyle(document.body).overflow;
+      document.body.style.overflow = "hidden";
+
+      return () => {
+        document.body.style.overflow = originalStyle;
+      };
+    }
+  }, [modalOpen]);
+};
+
+export default useLockBodyScroll;

src/types/Invitation.ts

@@ -0,0 +1,10 @@
+type Invitation = {
+  valid: boolean;
+  host: string;
+  id: string;
+};
+
+export type InvitationProps = {
+  invitation: Invitation;
+  modalClose: React.Dispatch<React.SetStateAction<boolean>>;
+};