[Feat/#300] 링크 복사하기 버튼, link tooltip 구현

.stylelintrc

@@ -3,7 +3,6 @@
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components",
-    "stylelint-config-prettier",
     "stylelint-config-concentric-order"
   ],
   "overrides": [

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

@@ -12,6 +12,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';
@@ -23,33 +24,36 @@ 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 {
-  MainLogoIc,
-  HambergerIc,
-  ExitIc,
-  InputCancelIc,
-  RadioCheckIc,
-  RadioCheckedIc,
   BackIc,
-  PlusIc,
-  InputErrorIc,
+  Circle1Ic,
+  Circle2Ic,
+  Circle3Ic,
+  ClockIc,
   DropDownIc,
+  DropdownWhite,
   DropUpIc,
-  PasswordOpenEyeIc,
-  PasswordEyeIc,
+  DropupWhite,
+  ExitIc,
+  HambergerIc,
+  InputCancelIc,
+  InputErrorIc,
   LinkIc,
-  PlaceIc,
-  ClockIc,
-  OnlinePlaceIc,
+  LinkTooltipIc,
+  MainLogoIc,
   OfflinePlaceIc,
-  TimeIc,
-  DropdownWhite,
-  DropupWhite,
+  OnlinePlaceIc,
+  PasswordEyeIc,
+  PasswordOpenEyeIc,
+  PlaceIc,
+  PlusIc,
+  RadioCheckedIc,
+  RadioCheckIc,
   SpeechBubbleIc,
+  TimeIc,
+  TooltipArrowIc,
   Wave,
-  Circle1Ic,
-  Circle2Ic,
-  Circle3Ic,
 };

src/components/atomComponents/Button.tsx

@@ -1,7 +1,7 @@
-import { css, styled } from 'styled-components';
-
 import React from 'react';
 
+import { css, styled } from 'styled-components';
+
 interface ButtonProps {
   children: React.ReactNode;
   typeState: string;

src/components/atomComponents/Tooltip.tsx

@@ -0,0 +1,47 @@
+import { TooltipArrowIc } from 'components/Icon/icon';
+import styled from 'styled-components';
+
+interface TooltipPropTypes {
+  tooltipText: string;
+}
+const Tooltip = ({ tooltipText }: TooltipPropTypes) => {
+  return (
+    <TooltipWrapper>
+      <TooltioArrowIcon />
+      <ToolTipTextWrapper>{tooltipText}</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};
+
+  color: ${({ theme }) => theme.colors.grey5};
+
+  ${({ theme }) => theme.fonts.body4};
+`;
+export default Tooltip;

src/components/moleculesComponents/ASAPBasicComponent.tsx

@@ -0,0 +1,49 @@
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components';
+import { theme } from 'styles/theme';
+/**
+ * 이미지, 메인텍스트, 서브텍스트로 이루어진 재사용 컴포넌트
+ * @returns asap 페이지에 기본이 되는 컴포넌트
+ * @param {imgURL} : ㅑㅡㅁㅎㄷ
+ * @param {mainText}
+ * @param {subText}
+ */
+interface ASAPBasicComponent {
+  imgURL: string;
+  mainText: string;
+  subText: string;
+}
+
+const ASAPBasicComponent = ({ imgURL, mainText, subText }: ASAPBasicComponent) => {
+  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 ASAPBasicComponent;
+
+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/moleculesComponents/Header.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 
 import Text from 'components/atomComponents/Text';
+import Tooltip from 'components/atomComponents/Tooltip';
 import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
 import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext';
 import { ScheduleStepType } from 'pages/selectSchedule/types';
@@ -9,11 +10,10 @@ import { useParams } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { notify } from 'utils/toast/copyLink';
+import { notify } from 'utils/toast/copyLinkToast';
 
 import Navigation from './Navigation';
 
-
 interface HeaderProps {
   position: string;
   setFunnelStep?: Dispatch<SetStateAction<number>>;
@@ -22,6 +22,7 @@ interface HeaderProps {
 
 function Header({ position, setFunnelStep }: HeaderProps) {
   const { scheduleStep, setScheduleStep } = useScheduleStepContext();
+
   const navigationOptions = [
     {
       title: '약속 생성하기',
@@ -79,11 +80,7 @@ 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 +104,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 +138,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 +171,7 @@ const IconSection = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  width:4.2rem;
   height: 4.2rem;
 `;