Merge pull request #47 from Strong-Potato/42-feat-create-invite-frien…

…d-page

Feat: create friend list, invite friend bottom sheet #42

src/components/Modal/CopyClipboard/CopyClipboad.module.scss

@@ -0,0 +1,20 @@
+@use "@/sass" as *;
+
+.modalContainer {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%);
+  z-index: 999;
+  width: 33.5rem;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background-color: $neutral900;
+
+  &__text {
+    color: $neutral0;
+    @include typography(button);
+  }
+}

src/components/Modal/CopyClipboard/CopyClipboard.tsx

@@ -0,0 +1,16 @@
+import { Portal } from "@chakra-ui/react";
+
+import styles from "./CopyClipboad.module.scss";
+function CopyClipboard() {
+  return (
+    <Portal>
+      <div className={styles.modalContainer}>
+        <p className={styles.modalContainer__text}>
+          초대 링크가 복사되었습니다.
+        </p>
+      </div>
+    </Portal>
+  );
+}
+
+export default CopyClipboard;

src/components/TripSpace/FriendList/FriendList.module.scss

@@ -0,0 +1,28 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+
+  &__title {
+    @include typography(subTitle);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &__user {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+
+      &__name {
+        @include typography(tabLabel);
+      }
+    }
+  }
+}

src/components/TripSpace/FriendList/FriendList.tsx

@@ -0,0 +1,24 @@
+import { Avatar } from "@chakra-ui/react";
+
+import styles from "./FriendList.module.scss";
+
+import { FriendListProps } from "@/types/FriendList";
+function FriendList({ users }: FriendListProps) {
+  return (
+    <div className={styles.container}>
+      <p className={styles.container__title}>
+        여행을 함께하는 친구 {users.length}명
+      </p>
+      <div className={styles.container__wrapper}>
+        {users.map((user, index) => (
+          <div key={index} className={styles.container__wrapper__user}>
+            <Avatar w="4rem" h="4rem" name={user.name} src={user.src} />
+            <p className={styles.container__wrapper__user__name}>{user.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FriendList;

src/components/TripSpace/InviteFriends/InviteFriends.module.scss

@@ -0,0 +1,40 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  &__invitelogo {
+    width: 20.3rem;
+    height: 12.4rem;
+  }
+
+  &__wrapperText {
+    text-align: center;
+
+    &__invitetext {
+      margin-top: 8px;
+      letter-spacing: -0.2px;
+      color: $neutral900;
+      @include typography(titleLarge);
+    }
+
+    &__invitedescription {
+      margin-top: 8px;
+      letter-spacing: -0.12px;
+      color: $neutral400;
+      @include typography(captionSmall);
+    }
+  }
+
+  &__wrapperButton {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__a11y {
+    @include a11y-hidden;
+  }
+}

src/components/TripSpace/InviteFriends/InviteFriends.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+import styles from "./InviteFriends.module.scss";
+
+import CopyClipboard from "@/components/Modal/CopyClipboard/CopyClipboard";
+
+import InviteKakao from "@/assets/inviteKakao.svg?react";
+import InviteLink from "@/assets/inviteLink.svg?react";
+import InviteLogo from "@/assets/InviteLogo.svg?react";
+
+function InviteFriends() {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const handleCopyClick = () => {
+    //초대 링크 어떻게 넣을지 고민해보기
+    navigator.clipboard.writeText("하하 반갑수다. 우리 같이 여행 갈마씸.");
+    setIsModalVisible(true);
+    setTimeout(() => {
+      setIsModalVisible(false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <div className={styles.container}>
+        <InviteLogo className={styles.container__invitelogo} />
+        <div className={styles.container__wrapperText}>
+          <p className={styles.container__wrapperText__invitetext}>
+            친구를 초대해보세요
+          </p>
+          <p className={styles.container__wrapperText__invitedescription}>
+            함께 여행 갈 친구나 가족을 초대해보세요 <br />
+            일행은 최대 10명까지 초대할 수 있어요
+          </p>
+        </div>
+        <div className={styles.container__wrapperButton}>
+          <button>
+            <InviteKakao />
+            <p className={styles.container__a11y}>카카오톡 초대</p>
+          </button>
+          <button onClick={handleCopyClick}>
+            <InviteLink />
+            <p className={styles.container__a11y}>초대링크 복사</p>
+          </button>
+        </div>
+      </div>
+      {isModalVisible && <CopyClipboard />}
+    </>
+  );
+}
+
+export default InviteFriends;