프로필 탭은 모달 이외의 다른 모든 요소보다는 위에 떠야 하기 때문에 z-index 값을 조정했습니다.

zIndex는 같은 부모 요소안에서 비교되는 거라, 프로필 탭 부모 요소가 ProfileTab < Topbar 순이라, Topbar 자체의 zIndex를 높여야 할 것 같아요.

• Main zIndex를 999로 하고, 리뷰 url 생성폼 부분 배경색을 준 경우 프로필 탭이 열렸지만 Main에 가려짐
  

ProfileTab이 아닌 Topbar에 z-index를 설정했습니다!

주석 👍

content 부분의 레이아웃이 반복되고, 태그나 속성을 사용할 때 VS code 편의 기능이나, eslint, prettier 도움을 받지 못할 것 같아 불편할 것 같아요.

제안 1. content 를 리터럴 객체로 변경

content :{
icon : { src:GithubIcon, alt: '소셜 아이콘'},
text : 'Github 계정'}

제안2. 프로필 탭 요소 컴포넌트 재사용

프로필 탭 안의 요소들의 레이아웃이 동일하고 ,아이콘, 글자만 달라지니 컴포넌트를 만들어서 사용하는 방법
(클릭 이벤트는 이미 있어서 제외했지만, 클릭 이벤트를 props로 넣어줘도 괜찮겠네요)

const ContentLayout: = ({ icon, text }:ContnetLayoutProps) => (
  <div style={{ display: 'flex', gap: '1rem' }}>
    <img src={icon.src} alt={icon.alt} />
    <span>{text}</span>
  </div>
);

// 객체 배열
const profileTabElements= [
  {
    elementType: 'readonly',
    isDisplayedOnlyMobile: true,
    content: <ContentLayout icon={icon1} text={profileId} />,
  },
  {
    elementType: 'editable',
    isDisplayedOnlyMobile: false,
    content: <ContentLayout iconSrc={icon2} text="다른 텍스트" />,
  },
];

저는 합성 컴포넌트 스타일을 사용해서 TabItem에서 어떤 요소가 렌더링되는지 직관적으로 확인할 수 있는 방식을 제안해봅니다~
(사실 OptionSwitch를 리팩토링으로 생각해뒀던 방식입니다)

렌더링 요소가 실시간으로 변하거나 관리할 아이템들이 많아지면 배열이 좋겠지만 지금은 정적인 편이고 프로필 탭인 만큼 훗날 많은 요소가 추가될 것 같지는 않다는 생각입니다.

ProfileTab은 children을 렌더하는 컴포넌트로 사용하고, 각 아이템 요소들을 별도의 컴포넌트로 분리해서 최종적으로 아래와 같이 사용해보면 좋을 것 같아요.

<ProfileTab>
      <ReadonlyItem>
        <img src={src} alt="GitHub 로고" />
        <span>GitHub 계정</span>
      </ReadonlyItem>
       ....

컴포넌트를 분리한다면 바다가 제안해준대로 Content까지 분리해서 재활용하면 좋을 것 같네요!

element에 id가 추가되면 좋을 것 같아요.
ProfileTab에서 key로 사용하면 좋고, profileTabElements 속 요소가 프로필 탭에서 어떤 부분인지 더 쉽게 눈에 띄었으면 좋겠어요

zIndex는 같은 부모 요소안에서 비교되는 거라, 프로필 탭 부모 요소가 ProfileTab < Topbar 순이라, Topbar 자체의 zIndex를 높여야 할 것 같아요.

• Main zIndex를 999로 하고, 리뷰 url 생성폼 부분 배경색을 준 경우 프로필 탭이 열렸지만 Main에 가려짐
  

로그인 버튼에서도 소셜 정보가 필요해서 아예 공통 타입으로 빼면 좋을 것 같아요! 로그인 도입 이후 다시 얘기해봐용

탭 영역도 하나의 독립적 영역인 것 같아서 최상위 컨테이너는 section으로 하면 좋을 것 같아요!

이 map 함수를 별도의 함수로 분리(예: renderTabItem)해서 ProfileTab 컴포넌트의 리턴문을 간단하게 하는 건 어떤가요?

const ProfileTab = ({ items }: ProfileTabProps) => (
  // switch 조건을 처리하는 render 함수는 별도로 선언
  <S.ProfileTabContainer>
    <UndraggableWrapper>
      {items.map((item, index) => renderProfileTabItem(item, index))} // 함수를 사용해서 main 리턴문은 한 줄로 처리
    </UndraggableWrapper>
  </S.ProfileTabContainer>
);

switch문 내부가 복잡하지 않아서 지금 방식도 괜찮다고 생각하지만 에프이의 의견이 궁금해서요!

올리가 제안한 것처럼 return 문 내부는 짧게 만들고, render 함수를 따로 두는 편이 나을 것 같아요.

프로필 사진 UI는 관련 label 없이 사진만 있어서 alt 속성이 필수라고 생각했지만, 메뉴 아이콘들은 조금 고민이 되네요...
스크린 리더 사용자에게 시각 사용자와 같은 경험을 주기 위해서는 alt를 적극 활용해야 하지만 더 자세한 정보를 label로 읽을 수 있는데 아이콘의 의미를 설명하느라 중복 정보를 안내하는 게 아닌가 싶기도 해서요.
다른 팀원들의 생각도 궁금합니다~~

저는 장식용 아이콘의 경우, 스크린 리더기로 읽어주는 게 불필요하다고 생각해서 빈문자열을 선호합니다.(웹 접근성 미션 시, 스크린 리더기 사용 시, 불필요한 데이터까지 읽어주면 피로도가 올라가더라구요.)
올리 말대로 label로 읽을 수 있기애 빈문자열로 하는 편이 더 좋을 것 같아요.

옆에 텍스트가 함께 있기 때문에 아이콘 자체에는 큰 의미가 없을 것 같네요. 빈 문자열로 지정하는 것이 나을 듯해요 👍

메뉴 아이콘이 없어도 리뷰 링크 관리라는 텍스트가 이미 제공되고 있어서 탭 정보를 전달하는 데는 전혀 문제가 없다고 생각해요~ 오히려 너무 많은 정보를 전달하면 스크린 리더기 사용자 입장에서 더 불편할 수도 있을 것 같아요.. alt 속성을 빈 문자열로 처리하는 것에 한 표 하겠습니다~

장식 이미지 alt 속성 처리

저는 합성 컴포넌트 스타일을 사용해서 TabItem에서 어떤 요소가 렌더링되는지 직관적으로 확인할 수 있는 방식을 제안해봅니다~
(사실 OptionSwitch를 리팩토링으로 생각해뒀던 방식입니다)

렌더링 요소가 실시간으로 변하거나 관리할 아이템들이 많아지면 배열이 좋겠지만 지금은 정적인 편이고 프로필 탭인 만큼 훗날 많은 요소가 추가될 것 같지는 않다는 생각입니다.

ProfileTab은 children을 렌더하는 컴포넌트로 사용하고, 각 아이템 요소들을 별도의 컴포넌트로 분리해서 최종적으로 아래와 같이 사용해보면 좋을 것 같아요.

<ProfileTab>
      <ReadonlyItem>
        <img src={src} alt="GitHub 로고" />
        <span>GitHub 계정</span>
      </ReadonlyItem>
       ....

컴포넌트를 분리한다면 바다가 제안해준대로 Content까지 분리해서 재활용하면 좋을 것 같네요!

제가 리뷰 링크 관리 페이지 작업하면서 겸사겸사 헤더에 있는 리뷰미 로고 글자 크기를 2.8rem으로 줄였어요! 지금 이미지 사이즈가 로고 사이즈보다 커서 이미지 사이즈도 그에 맞게 줄여야 할 것 같아요!

데스크탑 - width: 2.8rem
모바일 - width: 2.6rem

export const ProfileImageWrapper = styled.div`
 // ...
  width: 2.8rem;
  height: 2.8rem;

  ${media.xSmall} {
    width: 2.6rem;
    height: 2.6rem;
  }
`;

+추가로 border-radius: 50%로 줘도 둥글게 깎여요!

바뀐 크기 공유해주어서 고마워요 !! 작업할 때 함께 바꾸겠습니다

센스 굳👍👍👍

메뉴 아이콘이 없어도 리뷰 링크 관리라는 텍스트가 이미 제공되고 있어서 탭 정보를 전달하는 데는 전혀 문제가 없다고 생각해요~ 오히려 너무 많은 정보를 전달하면 스크린 리더기 사용자 입장에서 더 불편할 수도 있을 것 같아요.. alt 속성을 빈 문자열로 처리하는 것에 한 표 하겠습니다~

장식 이미지 alt 속성 처리

오오! 고정된 width가 아닌 max-width를 주는 게 훨씬 좋은 것 같아요👍👍