feat: 초대 모달 구현

[pinkishincoloragain]

기능

프로젝트에 다른 사람을 초대할 수 있게 한다.

완료 조건

• 모달 띄우는 환경 구현
• 모달을 띄우는 버튼을 템플릿에 제작
• Workspace Template 좌측 상단 로고 아이콘 구현
• Workspace Template 우측 상단 공유 아이콘 구현
• Workspace Template 우측 상단 New Project 구현

초대 모달 구현

• zIndex가 상위가 되고 배경이 블러되는 모달 구현
• 모달 컨텐츠 구성
• 상단 캐치프레이즈
• 초대 보내기 양식
• 현재 초대된 유저 리스트 구현
• 유저 세부정보 내릴 수 있는 드롭다운 구현
• 모달 하단 구현
• Send Invite 버튼 두 개
• 모달 연동

추가 상황 설명

[pinkishincoloragain]

현재 진행 상황(상단바 변경)

[pinkishincoloragain]

@KingDonggyu
ProjectControlPanel에서 디자인 변경 사항을 맞추기 위해 magic number을 사용한 경우가 있어 혹시 나은 방향이 있을지 물어보고자 합니다..

코드는 아래와 같습니다. Workspace 우측 상단 ProjectControlPanel을 구현하는 중 디자인 변경 사항에 맞춰 padding값을 넣어 줘야 하는 경우가 있어 아래와 같이 구현했습니다.

const ProjectControlPanel = () => {
  const handleNewProjectClick = () => {};
  const handleShareClick = () => {};

  return (
    <s.PanelWrapper>
      <s.ShareIconWrapper>
        <IconButton
          padding="11px 12px"
          icon="share_green"
          onClick={handleShareClick}
        />
      </s.ShareIconWrapper>
      <s.NewProjectIconWrapper>
        <IconButton
          padding="11px 16px 11px 12px"
          icon="add_white"
          onClick={handleNewProjectClick}
        >
          <s.NewProjectPhraseWrapper>
            {CREATE_NEW_PROJECT}
          </s.NewProjectPhraseWrapper>
        </IconButton>
      </s.NewProjectIconWrapper>
    </s.PanelWrapper>
  );
};

문제가 되는 부분은 아래의 두 부분인데,

 <IconButton
          padding="11px 12px"
          icon="share_green"
          onClick={handleShareClick}
        />

<IconButton
          padding="11px 16px 11px 12px"
          icon="add_white"
          onClick={handleNewProjectClick}
        >

padding="11px 16px 11px 12px" 이와 같이 숫자를 명시적으로 적는 게 비효율적이고 리팩토링이 어려워 보여서 고민을 하는 중입니다.

IconButton

const IconButton = ({
  icon,
  onClick,
  children = undefined,
  padding = undefined,
}: IconButtonProps) => (
  <s.IconButton onClick={onClick} padding={padding}>
    <Icon iconImg={icon} />
    {children}
  </s.IconButton>
);

s.IconButton

export const IconButton = styled.button<{ padding: string | undefined }>`
  padding: ${({ padding }) => padding ?? '1px 6px'};
  display: flex;
  justify-content: center;
  ...
`;

이에 대한 대책으로 먼저 방안을 생각해 봤습니다.

• 자주 쓰일 padding 값들을 constant화 해서 import 해 사용
• padding값을 sm(small), md(medium), lg(large) 등으로 구분해 적용

등이 있었으나..

현재 구현된 IconButton 컴포넌트가

Icon + children Component 배치 -> 이걸 1px 6px padding으로 감싸

방식으로 작동해 이러한 상황에는 어떻게 하면 멋지게 추상화할 수 있을 지 고민입니다.
지금처럼 그냥 padding값을 필요한 경우에 string으로 넘기는 게 괜찮은지
혹은 다른 좋은 패턴이 있을까요?