feat: linkTooltip 생성

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';
@@ -26,30 +27,31 @@ import { ReactComponent as TimeIc } from 'assets/svgs/time.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,
   Wave,
-  Circle1Ic,
-  Circle2Ic,
-  Circle3Ic,
 };

src/components/moleculesComponents/Header.tsx

@@ -107,9 +107,15 @@ function Header({ position, setFunnelStep }: HeaderProps) {
           ) : (
             <EmptyBox />
           )}
+          <IconWrapper>
+            {position==="stepping"&& <IconSection onClick={notify}>
+          <LinkIc/>
+          </IconSection>}
+
           <IconSection onClick={() => setIsNaviOpen((prev) => !prev)}>
             <HambergerIc />
           </IconSection>
+          </IconWrapper>
         </HeaderSection>
         {isNaviOpen ? (
           <NavigationSection>
@@ -128,6 +134,10 @@ function Header({ position, setFunnelStep }: HeaderProps) {
 
 export default Header;
 
+const IconWrapper= styled.div`
+  display:flex;
+  align-items: center;
+`
 const HeaderWrapper = styled.div`
   width: 100%;
 `;
@@ -153,6 +163,7 @@ const IconSection = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  width:4.2rem;
   height: 4.2rem;
 `;
 

src/pages/steppingStone/SteppingLayout.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 
+import { LinkTooltipIc } from 'components/Icon/icon';
 import Header from 'components/moleculesComponents/Header';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { client } from 'utils/apis/axios';
+import { notify } from 'utils/toast/copyLink';
 
 import SteppingBody from './components/SteppingBody';
 import SteppingBtnSection from './components/SteppingBtnSection';
@@ -51,16 +53,20 @@ function SteppingLayout({ steppingType }: SteppingProps) {
     <>
       <SteppingWrapper>
         <Header position={'stepping'} />
+        <LinkToolTipIcon onClick={notify} />
         <SteppingBody steppingType={steppingType} meetingTitle={meetingTitle} />
         <SteppingBtnSection steppingType={steppingType} />
-        <div />
       </SteppingWrapper>
     </>
   );
 }
 
 export default SteppingLayout;
-
+const LinkToolTipIcon = styled(LinkTooltipIc)`
+  position: relative;
+  left: 10.3rem;
+  cursor: pointer;
+`;
 const SteppingWrapper = styled.div`
   display: flex;
   flex-direction: column;