# 두 컴포넌트 간 충돌하는 선언: 전체 폭 레이아웃과 헤더 검색 **URL:** \ **Category:** Development\ **Created:** [6월 26, 2023, 4:05오후 UTC](https://meta.discourse.org/t/conflicting-declarations-on-two-components-full-width-layout-and-header-search/269654 "2023-06-26T16:05:19Z")\ **Posts on this page:** 1\ **Showing post:** 4
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [6월 26, 2023, 9:21오후 UTC](https://meta.discourse.org/t/conflicting-declarations-on-two-components-full-width-layout-and-header-search/269654/4 "2023-06-26T21:21:36Z")
기억이 맞다면, 추가 래퍼를 사용하면 `.header-contents__toggle-and-logo`의 너비를 `var(--d-sidebar-width)`로 설정할 수 있어 제목을 주제 내용과 정렬하기가 더 쉬워집니다. 이는 콘텐츠와 관계없이 사이드바와 동일한 너비를 유지하기 때문입니다. ![Screenshot 2023-06-26 at 4.52.20 PM](https://global.discourse-cdn.com/meta/original/4X/d/d/6/dd6c8837291a18844a3bf73db263825401644f3f.png) 추가 래퍼가 없으면 레이아웃은 작동합니다… 하지만 두 개의 그리드 컬럼을 사용할 경우 둘 다에 대해 단일 너비에 의존할 수 없습니다. ![Screenshot 2023-06-26 at 4.54.13 PM](https://global.discourse-cdn.com/meta/original/4X/a/7/6/a76d169d7e586d06fbb10b12b9657a78006bae5c.png) 사이드바 토글이 항상 정적(static)인 너비를 가질 것이라고 가정해야 하며, 그에 따라 로고의 최대 너비를 계산해야 합니다. 이 방법은 작동하지만, 더 취약(fragile)하다는 인상을 받았습니다… 이 부분에 대해 한동안 살펴보지 않았지만, 다시 시도해 볼 가치가 있을지도 모릅니다 🤔 > [@awesomerobot](#): > > 대충 살펴본 결과… 헤더 검색 컴포넌트 내의 템플릿 오버라이드가 필요하지 않을 것 같아, 이를 위젯 데코레이터(widget decorator)로 옮기는 것을 살펴볼 수 있습니다. 이렇게 하면 해당 문제를 피할 수 있을 것입니다. 다시 이 주제로 돌아가서… 왜 오버라이드로 처리되었는지 이해할 수 있습니다. 오버라이드가 없으면 제목이나 header-icons 위젯을 데코레이트(decorate)해야 하므로, 결국 `.title` 또는 `.panel` 내부에 콘텐츠를 추가하게 됩니다. 이는 검색 막대의 중앙 정렬을 더 어렵게 만들며… 레이아웃을 더 취약하게 만들고 다른 헤더 컴포넌트와의 호환성을 더 어렵게 만드는 CSS가 필요합니다. 이상적으로는 검색 막대 콘텐츠가 이러한 div 외부에 있어야 하지만, 이를 위해 연결할 수 있는 훅(hook)이 없습니다. 이제 위젯에 플러그인 아울렛(plugin outlet)을 추가할 수 있으므로, 이것이 도움이 될 수 있습니다… > > > This adds a plugin outlet so content can be added to the header without relying …on \`decorateWidget\`. > > While we can add components to widgets now, \`decorateWidget\` isn't ideal because you always end up contained within another div... decorating the site-logo widget puts you inside the \`.title\` div, and decorating the \`.header-icons\` puts you inside of \`.panel\`... this can make alignment of theme-added content trickier than it needs to be. 이를 통해 `decorateWidget`을 사용하여 `.panel` div 내부에 추가하는 대신 `.panel` div 앞에 콘텐츠를 추가할 수 있습니다. 이 경우 헤더 검색 컴포넌트에서 템플릿 오버라이드를 제거하고, 새로운 커넥터를 다음 위치에 추가할 수 있습니다: `javascripts/discourse/connectors/before-header-panel` 여기에는 다음을 포함할 수 있습니다. `` 위젯에 플러그인 아울렛을 추가하여 플러그인 아울렛에 위젯을 추가하는 것은 다소 복잡해 보이지만… @david/@cvx 이 방식이 성능에 악영향을 주거나 다른 문제를 일으키는지 아시나요? --- _[View the full topic](https://meta.discourse.org/t/conflicting-declarations-on-two-components-full-width-layout-and-header-search/269654)._