About

전역 모달이 아닌 특정 컴포넌트에 종속된 모달(dropdown)관련된 로직과 컴포넌트 생성

Description

드롭다운 모달에 사용될 공통 컴포넌트 생성

드롭다운 모달에 사용될 공통 hooks로직 생성

유저 프로필 클릭시 보여질 드롭다운에 적용

⇒ 부모요소로 등록해 놓은 컴포넌트를 제외하고 그 외 컴포넌트를 클릭시 dropdown모달이 닫히게 구현

구현 내용

공통 컴포넌트

src/components/Common/Dropdown

custom스타일 받아서 적용 가능

다음과 같은 객체를 사용하는 곳에서 받아서 사용하기

export const S.ExampleDropdown = {
  overlayStyle: css`
    position: absolute;
    top: 64px;
    right: -10px;
  `,
  contentStyle: css``,
};

function ExampleDropdown() {
  return <Dropdown
      {/* 생략 */}
      customStyle={S.ExampleDropdown}
    >)
}


export default function Dropdown({ children, isDropdownOpen, customStyle }) {
  if (!isDropdownOpen) return null;
  return (
    <S.Overlay customStyle={customStyle?.overlayStyle}>
      <S.Content
        onClick={(event) => event.stopPropagation()}
        customStyle={customStyle?.contentStyle}
      >
        {children}
      </S.Content>
    </S.Overlay>
  );
}

hooks

주요기능