Merge branch 'develop' into feat/#315/priorityDropdownCancleBtn

src/Router.tsx

@@ -1,4 +1,5 @@
 import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
+import CompleteCreateMeeting from 'pages/completeCreateMeeting/CompleteCreateMeeting';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
 import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
@@ -15,7 +16,7 @@ const Router = () => {
       <Routes>
         <Route path="/" element={<OnBoarding />} />
         <Route path="/meet/create" element={<CreateMeeting />} />
-        <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
+        <Route path="/meet/complete/:meetingId" element={<CompleteCreateMeeting />} />
         <Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
         <Route
           path="/host/schedule-complete/:meetingId"

src/components/Icon/icon.ts

@@ -15,6 +15,7 @@ import { ReactComponent as HambergerIc } from 'assets/svgs/hambergerIcon.svg';
 import { ReactComponent as InputCancelIc } from 'assets/svgs/inputCancelBtn.svg';
 import { ReactComponent as InputErrorIc } from 'assets/svgs/inputErrorBtn.svg';
 import { ReactComponent as LinkIc } from 'assets/svgs/linkIcon.svg';
+import { ReactComponent as LinkTooltipIc } from 'assets/svgs/linkTooltip.svg';
 import { ReactComponent as MainLogoIc } from 'assets/svgs/mainLogo.svg';
 import { ReactComponent as OfflinePlaceIc } from 'assets/svgs/offlinePlace.svg';
 import { ReactComponent as OnlinePlaceIc } from 'assets/svgs/onlinePlace.svg';
@@ -26,6 +27,7 @@ import { ReactComponent as RadioCheckIc } from 'assets/svgs/radioCheck.svg';
 import { ReactComponent as RadioCheckedIc } from 'assets/svgs/radioChecked.svg';
 import { ReactComponent as SpeechBubbleIc } from 'assets/svgs/speechBubble.svg';
 import { ReactComponent as TimeIc } from 'assets/svgs/time.svg';
+import { ReactComponent as TooltipArrowIc } from 'assets/svgs/tooltipArrow.svg';
 import { ReactComponent as Wave } from 'assets/svgs/wave.svg';
 
 export {
@@ -46,6 +48,7 @@ export {
   InputCancelIc,
   InputErrorIc,
   LinkIc,
+  LinkTooltipIc,
   MainLogoIc,
   OfflinePlaceIc,
   OnlinePlaceIc,
@@ -57,5 +60,6 @@ export {
   RadioCheckIc,
   SpeechBubbleIc,
   TimeIc,
+  TooltipArrowIc,
   Wave,
 };

src/components/common/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
+import styled from 'styled-components';
+
+interface BottomSheetProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  children?: ReactNode;
+  isOpen: boolean;
+  onClose?: () => void;
+}
+
+function BottomSheet({ children, isOpen }: BottomSheetProps) {
+  return (
+    <>
+      <BottomSheetModal $isModalOpen={isOpen}>{children}</BottomSheetModal>
+      <ModalOverlay $isModalOpen={isOpen} />
+    </>
+  );
+}
+
+export default BottomSheet;
+
+const BottomSheetModal = styled.div<{ $isModalOpen: boolean }>`
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  transform: translateY(${({ $isModalOpen }) => ($isModalOpen ? 0 : '100%')});
+  flex-direction: column;
+  gap: 0.8rem;
+  transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
+  z-index: 1;
+  border-top-left-radius: 1.2rem;
+  border-top-right-radius: 1.2rem;
+  background-color: ${({ theme }) => theme.colors.grey8};
+
+  padding: 4.4rem 2rem 4rem;
+  width: 37.5rem;
+
+  & button {
+    width: 100%;
+  }
+`;
+
+const ModalOverlay = styled.div<{ $isModalOpen: boolean }>`
+  display: ${({ $isModalOpen }) => ($isModalOpen ? 'block' : 'none')};
+  position: fixed;
+  top: 0;
+
+  background-color: ${({ theme }) => theme.colors.black60};
+  width: 100%;
+  height: 100%;
+`;

src/components/common/moleculesComponents/CheckPoint.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+import Text from '../atomComponents/Text';
+/**
+ * 이미지, 메인텍스트, 서브텍스트로 이루어진 재사용 컴포넌트
+ * @returns asap 페이지에 기본이 되는 컴포넌트
+ * @param {imgURL} : image
+ * @param {mainText}
+ * @param {subText}
+ */
+interface CheckPointProps {
+  imgURL: string;
+  mainText: string;
+  subText: string;
+}
+
+const CheckPoint = ({ imgURL, mainText, subText }: CheckPointProps) => {
+  return (
+    <>
+      <ImageSection src={imgURL} />
+      <TextWrapper>
+        <Text font={'head1'} color={`${theme.colors.white}`}>
+          {mainText}
+        </Text>
+        <Text font={'body1'} color={`${theme.colors.grey4}`}>
+          {subText}
+        </Text>
+      </TextWrapper>
+    </>
+  );
+};
+
+export default CheckPoint;
+
+const ImageSection = styled.img`
+  margin-top: 10.7rem;
+
+  width: 21.3rem;
+  height: 19.9rem;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2.5rem;
+`;

src/components/common/moleculesComponents/Header.tsx

@@ -9,13 +9,14 @@ import { useParams } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
-import { notify } from 'utils/toast/copyLink';
+import { notify } from 'utils/toast/copyLinkToast';
 
 import Navigation from './Navigation';
 
+import Tooltip from '../../../pages/completeCreateMeeting/components/Tooltip';
 
 interface HeaderProps {
-  position: string;
+  position?: string;
   setFunnelStep?: Dispatch<SetStateAction<number>>;
   setSelectScheduleStep?: Dispatch<SetStateAction<ScheduleStepType>>;
 }
@@ -79,11 +80,6 @@ function Header({ position, setFunnelStep }: HeaderProps) {
               <IconSection onClick={() => window.history.back()}>
                 <BackIc />
               </IconSection>
-              <CopyToClipboard text={`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}`}>
-                <IconSection onClick={notify}>
-                  <LinkIc />
-                </IconSection>
-              </CopyToClipboard>
             </ConfirmIconSection>
           ) : position === 'schedule' ? (
             <ConfirmIconSection onClick={backToSelectSchedule}>
@@ -107,9 +103,22 @@ function Header({ position, setFunnelStep }: HeaderProps) {
           ) : (
             <EmptyBox />
           )}
+          <IconWrapper>
+          {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") &&
+            <LinkIcWrapper>
+             <IconSection onClick={notify}>
+            <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}` }>
+          <LinkIc/>
+          </CopyToClipboard>
+          </IconSection>
+          {position==="completeCreateMeeting" && <Tooltip tooltipText={"링크 공유하기"}></Tooltip>}
+
+          </LinkIcWrapper>}
           <IconSection onClick={() => setIsNaviOpen((prev) => !prev)}>
             <HambergerIc />
           </IconSection>
+
+          </IconWrapper>
         </HeaderSection>
         {isNaviOpen ? (
           <NavigationSection>
@@ -128,6 +137,14 @@ function Header({ position, setFunnelStep }: HeaderProps) {
 
 export default Header;
 
+const LinkIcWrapper=styled.div`
+  position:relative;
+`
+
+const IconWrapper= styled.div`
+  display:flex;
+  align-items: center;
+`
 const HeaderWrapper = styled.div`
   width: 100%;
 `;
@@ -153,6 +170,7 @@ const IconSection = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  width:4.2rem;
   height: 4.2rem;
 `;
 

src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx

@@ -0,0 +1,50 @@
+import stepingCheck from 'assets/images/steppingCheck.png';
+import Button from 'components/common/atomComponents/Button';
+import Text from 'components/common/atomComponents/Text';
+import CheckPoint from 'components/common/moleculesComponents/CheckPoint';
+import Header from 'components/common/moleculesComponents/Header';
+import { useNavigate, useParams } from 'react-router-dom';
+import styled from 'styled-components';
+
+import CreateMeetingBottomSheet from './components/CreateMeetingBottomSheet';
+
+const CompleteCreateMeeting = () => {
+  const { meetingId } = useParams();
+
+  const navigate = useNavigate();
+  const navigateSelectSchedule = () => {
+    navigate(`/host/select/${meetingId}`);
+  };
+
+  return (
+    <CompleteCreateMeetingWrapper>
+      <Header position="completeCreateMeeting" />
+      <CheckPoint
+        imgURL={stepingCheck}
+        mainText={'회의 생성 완료!'}
+        subText={'이제 나의 가능 시간을 입력하러 가볼까요?'}
+      />
+      <BtnWrapper>
+        <Button typeState={'primaryActive'} onClick={navigateSelectSchedule}>
+          <Text font={'button2'}>나의 가능 시간 입력</Text>
+        </Button>
+      </BtnWrapper>
+      <CreateMeetingBottomSheet />
+    </CompleteCreateMeetingWrapper>
+  );
+};
+
+export default CompleteCreateMeeting;
+
+const BtnWrapper = styled.div`
+  position: absolute;
+  bottom: 1.2rem;
+`;
+const CompleteCreateMeetingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;

src/pages/completeCreateMeeting/components/CreateMeetingBottomSheet.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+import Button from 'components/common/atomComponents/Button';
+import Text from 'components/common/atomComponents/Text';
+import BottomSheet from 'components/common/BottomSheet/BottomSheet';
+import useModalState from 'components/common/Modal/hooks/useModalState';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+function CreateMeetingBottomSheet() {
+    const { meetingId } = useParams();
+
+    const {isOpen, onOpen, onClose}= useModalState(false);
+
+    useEffect(()=>{
+      onOpen();
+    },[])
+
+  return (
+    <>
+        <BottomSheet isOpen={isOpen}>
+            <BottomSheetDescription>
+                <Text font={'head2'} color={'white'}>회의방 링크가 생성되었어요!</Text>
+                <Text font={'title2'} color={`${theme.colors.grey4}`}>링크를 복사하여 팀원에게 공유해주세요</Text>
+            </BottomSheetDescription>
+            <CopyToClipboard text={`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}`}>
+                <Button typeState={'primaryActive'} onClick={onClose}>
+                <Text font={'button2'}>링크 복사하기</Text>
+                </Button>
+            </CopyToClipboard>
+            <Button typeState={'quaternaryDisabled'} onClick={onClose}>
+                <Text font={'button2'}>나중에 공유하기</Text>
+            </Button>
+        </BottomSheet>
+    </>
+  )
+}
+
+export default CreateMeetingBottomSheet;
+
+const BottomSheetDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  margin-bottom: 2.4rem;
+  padding-left: 0.9rem;
+`;

src/pages/completeCreateMeeting/components/Tooltip.tsx

@@ -0,0 +1,50 @@
+import { TooltipArrowIc } from 'components/Icon/icon';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+
+import Text from '../../../components/common/atomComponents/Text';
+
+interface TooltipPropTypes {
+  tooltipText: string;
+}
+const Tooltip = ({ tooltipText }: TooltipPropTypes) => {
+  return (
+    <TooltipWrapper>
+      <TooltioArrowIcon />
+      <ToolTipTextWrapper>
+        <Text color={theme.colors.grey5} font={'body4'}>
+          {tooltipText}
+        </Text>
+      </ToolTipTextWrapper>
+    </TooltipWrapper>
+  );
+};
+
+const TooltipWrapper = styled.div`
+  cursor: default;
+  position: absolute;
+
+  top: 6rem;
+  width: 8.1rem;
+  height: 2.8rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const TooltioArrowIcon = styled(TooltipArrowIc)`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const ToolTipTextWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 8.1rem;
+  height: 2.8rem;
+
+  border-radius: 6px;
+  background-color: ${({ theme }) => theme.colors.grey9};
+`;
+export default Tooltip;