30. 화면 고정 버튼 만들기 (position : fixed, absolute)

• 화면에 항상 고정해있는 버튼을 만든다.
• 메인 버튼 : 클릭시 help 기능
• 서브 버튼 : 클릭시 Home / End 스크롤

-> 설계 단계에서는 없었던 거라 이미지를 새로 그리기 애매해서 기존에 있던 이미지를 활용
-> 메인 버튼을 기준으로 서브 버튼의 위치를 고정시킬 예정

//Layouts.tsx
type BackType = {
  top?: string;
  left?: string;
  background?: string;
  width?: string;
  height?: string;
};


const TitleIcon = styled.div<BackType>`
  background: url(${iconPath});
  position: absolute;
  top: -17px;
  left: 5px;
  width: ${(props) => props.width};
  height: ${(props) => props.height};
`;

//메인 버튼
export const StickyIcon = styled(TitleIcon)`
  position: fixed;     (1)
  top: 85%;
  left: 85%;
  z-index: 1000;
  width: 58px;
  height: 59px;
  cursor: pointer;
  background-position: 195px 59px;
  margin: 0 0 70px 0;
  @media screen and (max-height: 584px) {
    top: 83%;
  }
`;

//서브 버튼 
export const UpIcon = styled(StickyIcon)`
  position: absolute;     (2)
  top: 9px;
  left: 65px;
  width: 15px;
  height: 15px;
  background-position: 80px 36px;
  transform: rotate(0.5turn);
  @media screen and (max-width: 584px) {
    top: 13px;
    left: -20px;
  }
`;

export const DownIcon = styled(UpIcon)`
  top: 35px;
  transform: rotate(0turn);
`;

• (1) position :fixed로 고정시킨다.
• (2) 부모 StickyIcon를 기준으로(position : absolute) px 단위로 고정 위치를 줬다.

//Layouts.tsx

//변경 전
export const BasicLayout = ({ windowSize }: any) => {
  return (
    <>
      ...
      <Outlet />
      <StickyIcon />
      <Footer />
    </>
  );
};

//변경 후
export const BasicLayout = ({ windowSize }: any) => {
  return (
    <>
      ...
      <Outlet />
      <StickyIcon>    (3)
        <UpIcon />
        <DownIcon />
      </StickyIcon>
      <Footer />
    </>
  );
};

• (1) StickyIcon을 부모로 하는 자식 UpIcon, DownIcon 컴포넌트는 position:absolute를 이용해 부모 기준으로 위치를 고정했다.