From eacc9883e01cac9ca2f9e325f5823872d659b732 Mon Sep 17 00:00:00 2001 From: HOOOO98 Date: Mon, 8 Jan 2024 18:24:57 +0900 Subject: [PATCH 1/2] Feat: create friend list, invite friend bottom sheet #42 --- package-lock.json | 11 ---- src/assets/InviteLogo.svg | 9 +++ src/assets/inviteKakao.svg | 23 +++++++ src/assets/inviteLink.svg | 24 ++++++++ .../CopyClipboard/CopyClipboad.module.scss | 20 +++++++ .../Modal/CopyClipboard/CopyClipboard.tsx | 16 +++++ .../FriendList/FriendList.module.scss | 28 +++++++++ .../TripSpace/FriendList/FriendList.tsx | 24 ++++++++ .../InviteFriends/InviteFriends.module.scss | 40 +++++++++++++ .../TripSpace/InviteFriends/InviteFriends.tsx | 51 ++++++++++++++++ src/pages/Trip/Trip.tsx | 60 +++++++++++++------ src/sass/abstracts/_variables.scss | 2 +- src/types/FriendList.ts | 8 +++ 13 files changed, 287 insertions(+), 29 deletions(-) create mode 100644 src/assets/InviteLogo.svg create mode 100644 src/assets/inviteKakao.svg create mode 100644 src/assets/inviteLink.svg create mode 100644 src/components/Modal/CopyClipboard/CopyClipboad.module.scss create mode 100644 src/components/Modal/CopyClipboard/CopyClipboard.tsx create mode 100644 src/components/TripSpace/FriendList/FriendList.module.scss create mode 100644 src/components/TripSpace/FriendList/FriendList.tsx create mode 100644 src/components/TripSpace/InviteFriends/InviteFriends.module.scss create mode 100644 src/components/TripSpace/InviteFriends/InviteFriends.tsx create mode 100644 src/types/FriendList.ts diff --git a/package-lock.json b/package-lock.json index b28f3615..4429198a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5904,17 +5904,6 @@ "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, - "node_modules/dotenv": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", - "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/motdotla/dotenv?sponsor=1" - } - }, "node_modules/electron-to-chromium": { "version": "1.4.622", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.622.tgz", diff --git a/src/assets/InviteLogo.svg b/src/assets/InviteLogo.svg new file mode 100644 index 00000000..9f33cce8 --- /dev/null +++ b/src/assets/InviteLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/inviteKakao.svg b/src/assets/inviteKakao.svg new file mode 100644 index 00000000..69e2e4b3 --- /dev/null +++ b/src/assets/inviteKakao.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/inviteLink.svg b/src/assets/inviteLink.svg new file mode 100644 index 00000000..a3deb2ed --- /dev/null +++ b/src/assets/inviteLink.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Modal/CopyClipboard/CopyClipboad.module.scss b/src/components/Modal/CopyClipboard/CopyClipboad.module.scss new file mode 100644 index 00000000..bc5e6c31 --- /dev/null +++ b/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); + } +} diff --git a/src/components/Modal/CopyClipboard/CopyClipboard.tsx b/src/components/Modal/CopyClipboard/CopyClipboard.tsx new file mode 100644 index 00000000..0d72346e --- /dev/null +++ b/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 ( + +
+

+ 초대 링크가 복사되었습니다. +

+
+ + ); +} + +export default CopyClipboard; diff --git a/src/components/TripSpace/FriendList/FriendList.module.scss b/src/components/TripSpace/FriendList/FriendList.module.scss new file mode 100644 index 00000000..e7319011 --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/components/TripSpace/FriendList/FriendList.tsx b/src/components/TripSpace/FriendList/FriendList.tsx new file mode 100644 index 00000000..e2050d8a --- /dev/null +++ b/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 ( +
+

+ 여행을 함께하는 친구 {users.length}명 +

+
+ {users.map((user, index) => ( +
+ +

{user.name}

+
+ ))} +
+
+ ); +} + +export default FriendList; diff --git a/src/components/TripSpace/InviteFriends/InviteFriends.module.scss b/src/components/TripSpace/InviteFriends/InviteFriends.module.scss new file mode 100644 index 00000000..668be8e8 --- /dev/null +++ b/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: 203px; + height: 124px; + } + + &__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; + } +} diff --git a/src/components/TripSpace/InviteFriends/InviteFriends.tsx b/src/components/TripSpace/InviteFriends/InviteFriends.tsx new file mode 100644 index 00000000..63b71135 --- /dev/null +++ b/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 ( + <> +
+ +
+

+ 친구를 초대해보세요 +

+

+ 함께 여행 갈 친구나 가족을 초대해보세요
+ 일행은 최대 10명까지 초대할 수 있어요 +

+
+
+ + +
+
+ {isModalVisible && } + + ); +} + +export default InviteFriends; diff --git a/src/pages/Trip/Trip.tsx b/src/pages/Trip/Trip.tsx index 84b309c9..5d17f70a 100644 --- a/src/pages/Trip/Trip.tsx +++ b/src/pages/Trip/Trip.tsx @@ -1,23 +1,27 @@ -import styles from "./Trip.module.scss"; -import { AiOutlineBell as AlarmIcon } from "react-icons/ai"; -import { AiOutlineMenu as MenuIcon } from "react-icons/ai"; -import { FiPlus as PlusIcon } from "react-icons/fi"; import { Avatar, AvatarGroup, - useDisclosure, - Tabs, - TabList, - TabPanels, Tab, - TabPanel, TabIndicator, + TabList, + TabPanel, + TabPanels, + Tabs, + useDisclosure, } from "@chakra-ui/react"; -import EditBottomSlideContent from "@/components/TripSpace/EditBottomSlideContent/EditBottomSlideContent"; -import SlideBar from "@/components/SideBar/SideBar"; -import BottomSlide from "@/components/BottomSlide/BottomSlide"; +import { AiOutlineBell as AlarmIcon } from "react-icons/ai"; +import { AiOutlineMenu as MenuIcon } from "react-icons/ai"; +import { FiPlus as PlusIcon } from "react-icons/fi"; import { useNavigate } from "react-router-dom"; +import styles from "./Trip.module.scss"; + +import BottomSlide from "@/components/BottomSlide/BottomSlide"; +import SlideBar from "@/components/SideBar/SideBar"; +import EditBottomSlideContent from "@/components/TripSpace/EditBottomSlideContent/EditBottomSlideContent"; +import FriendList from "@/components/TripSpace/FriendList/FriendList"; +import InviteFriends from "@/components/TripSpace/InviteFriends/InviteFriends"; + function Trip() { const navigate = useNavigate(); @@ -35,18 +39,30 @@ function Trip() { onOpen: onBottomSlideOpen, onClose: onBottomSlideClose, } = useDisclosure(); - + const { isOpen: isSlideBarOpen, onOpen: onSlideBarOpen, onClose: onSlideBarClose, } = useDisclosure(); + const { + isOpen: isInviteOpen, + onOpen: onInviteOpen, + onClose: onInviteClose, + } = useDisclosure(); + + const { + isOpen: isFriendListOpen, + onOpen: onFriendListOpen, + onClose: onFriendListClose, + } = useDisclosure(); + return (
-
-
+
- + @@ -125,6 +141,16 @@ function Trip() { onClose={onBottomSlideClose} children={} /> + } + /> + } + />
); } diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss index 93404580..23f0d2a8 100644 --- a/src/sass/abstracts/_variables.scss +++ b/src/sass/abstracts/_variables.scss @@ -93,7 +93,7 @@ $typography-line-height-map: ( // 26px "titleSmall": 2.4rem, // 24px - "subTitle": 2.4rem, + "subTitle": 2.8rem, // 24px "bodyLarge": 2.4rem, // 24px diff --git a/src/types/FriendList.ts b/src/types/FriendList.ts new file mode 100644 index 00000000..c0b40f54 --- /dev/null +++ b/src/types/FriendList.ts @@ -0,0 +1,8 @@ +interface User { + name: string; + src?: string; +} + +export interface FriendListProps { + users: User[]; +} From d4f854f4c18498e505c08e86031493f3a0c9de1c Mon Sep 17 00:00:00 2001 From: HOOOO98 Date: Mon, 8 Jan 2024 18:40:59 +0900 Subject: [PATCH 2/2] Design: replace px with rem #42 --- .../TripSpace/InviteFriends/InviteFriends.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TripSpace/InviteFriends/InviteFriends.module.scss b/src/components/TripSpace/InviteFriends/InviteFriends.module.scss index 668be8e8..ed853559 100644 --- a/src/components/TripSpace/InviteFriends/InviteFriends.module.scss +++ b/src/components/TripSpace/InviteFriends/InviteFriends.module.scss @@ -7,8 +7,8 @@ gap: 24px; &__invitelogo { - width: 203px; - height: 124px; + width: 20.3rem; + height: 12.4rem; } &__wrapperText {