Day7 이나경 43 fix postheader 좌우 padding

[nakyoung98]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [ ] 기능
• [x] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

좌우 padding 반응형

padding: 13px calc(max((100% - 1200px) / 2, 24px));

header의 width가 1248px까지는 브라우저의 width에 1200px를 뺀 값의 절반만큼을 계속 그 이하부터는 24px가 더 큰 값이기 때문에 24px로 고정되어 padding이 줄어들지 않습니다.

PostHeaderItems 배치 관련 버그 해결

• 받는 인자가 inline 일 경우 ::before 로 처리한 구분선을 먹어버리는 문제가 있었습니다.
• React.child.map을 이용해서 children을 그냥 받지 않고, 무조건 post-header-item가 달린 div 태그로 children내의 요소를 각각 감싸기로 했습니다.
• 그리고 post-header-item에 before를 걸어 받는 인자가 어떠한 display더라도 상관없이 동작하도록 했습니다.
• 다만 우려되는 점은, display:none인 대상이 들어왔을 경우입니다. 이 경우에도 div가 감싸기 때문에 display:none이어도 구분선은 생깁니다. => 제가 생각하기에는, 프로젝트 내에서 display:none으로 visible 여부를 다루는 행동은 기본적으로 주의하여야 할 것 같아서 우선 display:none을 모두 사용하지 않는다는 전제 하에 코드를 작성했습니다. 의견 부탁드립니다. (물론 이 컴포넌트를 쓰는 사람은 저밖에 없어요)

function PostHeaderItems({ children }) {
  return (
    <PostHeaderItemsBlock>
      {React.Children.map(children, (child) => {
        return (<div className="post-header-item">{child}</div>);
      })}
    </PostHeaderItemsBlock>
  );
}

관련 티켓 및 문서

• Related Issue #43 #46
• Closes #43 #46

스크린샷

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [ ] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [ ] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?

[seongseonko]

굿..