두 컴포넌트 모두 헤더의 .contents div를 재배열하는 것 같습니다.
전체 폭 레이아웃의 구조:
헤더 검색을 포함한 구조:
따라서 이 둘을 함께 사용할 수 없습니다. 하지만 어디에서 이 문제를 가장 잘 수정해야 할지 확신이 서지 않습니다.
지난주에 이 두 컴포넌트로 정확히 같은 문제를 겪었습니다… 전체 너비 컴포넌트는 임시 실험용이었는데, 로드맵에 기본 통합 계획이 없어서 예상보다 오래 남게 되었습니다.
전체 너비 컴포넌트는 헤더 템플릿을 수정해야 하기 때문에(일부 레이아웃 문제를 극복할 수 있는 유일한 방법이었기 때문에) 이상적이지 않습니다.
한눈에 봐도… 헤더 검색 컴포넌트의 템플릿 오버라이드는 필요하지 않을 것 같아서, 위젯 데코레이터로 옮기면 이 문제를 피할 수 있을지 확인해 볼 수 있습니다.
임시 해결책으로 시도한 것은 전체 폭(full-width) 컴포넌트에서 헤더 콘텐츠 위젯을 변경하지 않는 것입니다. 즉, 사이드바 토글과 제목을 __toggle-and-logo 아래에 그룹화하지 않고, 두 요소를 토글 그리드 영역에 배치하는 방식입니다. 지금까지 레이아웃 문제를 발견하지 못했습니다. 하지만 제가 놓치고 있는 부분이 있을까요?
매우 인기 있는 것 같습니다. 현재 진행 중인 커스터마이징 프로젝트 3건 모두 전체 폭 방식을 선택했습니다. 이것이 일반적인 선택지인 것 같아서, 공식 컴포넌트를 수정하지 않고도 이 기능을 구현할 수 있기를 바라며 이 글을 올렸습니다.
기억이 맞다면, 추가 래퍼를 사용하면 .header-contents__toggle-and-logo의 너비를 var(--d-sidebar-width)로 설정할 수 있어 제목을 주제 내용과 정렬하기가 더 쉬워집니다. 이는 콘텐츠와 관계없이 사이드바와 동일한 너비를 유지하기 때문입니다.
추가 래퍼가 없으면 레이아웃은 작동합니다… 하지만 두 개의 그리드 컬럼을 사용할 경우 둘 다에 대해 단일 너비에 의존할 수 없습니다.
사이드바 토글이 항상 정적(static)인 너비를 가질 것이라고 가정해야 하며, 그에 따라 로고의 최대 너비를 계산해야 합니다. 이 방법은 작동하지만, 더 취약(fragile)하다는 인상을 받았습니다… 이 부분에 대해 한동안 살펴보지 않았지만, 다시 시도해 볼 가치가 있을지도 모릅니다 
다시 이 주제로 돌아가서… 왜 오버라이드로 처리되었는지 이해할 수 있습니다. 오버라이드가 없으면 제목이나 header-icons 위젯을 데코레이트(decorate)해야 하므로, 결국 .title 또는 .panel 내부에 콘텐츠를 추가하게 됩니다. 이는 검색 막대의 중앙 정렬을 더 어렵게 만들며… 레이아웃을 더 취약하게 만들고 다른 헤더 컴포넌트와의 호환성을 더 어렵게 만드는 CSS가 필요합니다. 이상적으로는 검색 막대 콘텐츠가 이러한 div 외부에 있어야 하지만, 이를 위해 연결할 수 있는 훅(hook)이 없습니다.
이제 위젯에 플러그인 아울렛(plugin outlet)을 추가할 수 있으므로, 이것이 도움이 될 수 있습니다…
이를 통해 decorateWidget을 사용하여 .panel div 내부에 추가하는 대신 .panel div 앞에 콘텐츠를 추가할 수 있습니다. 이 경우 헤더 검색 컴포넌트에서 템플릿 오버라이드를 제거하고, 새로운 커넥터를 다음 위치에 추가할 수 있습니다:
javascripts/discourse/connectors/before-header-panel
여기에는 다음을 포함할 수 있습니다.
<MountWidget @widget="search-banner" />
위젯에 플러그인 아울렛을 추가하여 플러그인 아울렛에 위젯을 추가하는 것은 다소 복잡해 보이지만… @david/@cvx 이 방식이 성능에 악영향을 주거나 다른 문제를 일으키는지 아시나요?
참고로, 전체 폭(full-width) 컴포넌트에 대한 수정으로 다음을 시도해 보았습니다: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents
구체적으로는:
- 토글과 타이틀 로고 주위의 추가적인 감싸는 div 없이 기본 템플릿 레이아웃을 사용
- 항목을 그리드 영역에 매칭
하지만, 헤더에 주제 제목이 표시될 때 타이틀 로고가 다시 작은 로고로 전환되는 것을 확인했습니다. 이 현상은 메타(meta)의 전체 폭 레이아웃에서도 발생합니다. 항상 전체 로고를 표시하려면 어떤 템플릿 인수를 사용해야 하는지 정확히 이해하지 못하겠습니다.
아, 알겠어요. 둘 다 같은 그리드 영역에 배치하고 로고에 마진을 적용하는 거군요… 꽤 합리적인 절충안인 것 같습니다!
그래서 home-logo가 여기서 다시 열립니다:
사이드바가 표시되지 않으면 크기가 큰/작은 로고로 전환하는 기본 로직을 사용합니다… 사이드바가 표시되면 항상 큰 로고를 반환합니다.
조금 더 느려질 수는 있지만, 이 경우에는 페이지에 플러그인 아웃렛 인스턴스가 하나만 존재하기 때문에(예를 들어 25회 이상 렌더링되는 토픽 목록 항목 플러그인 아웃렛과 달리) 크게 걱정하지 않습니다.
거기에 아웃렛을 추가하는 것은 좋은 생각입니다 
좋아요, 템플릿 오버라이드를 피하기 위해 두 컴포넌트를 모두 업데이트했습니다 —
이제 함께 잘 작동할 것입니다 
조언해 주셔서 감사합니다 @manuel!