# 2.5.0.beta6에서 구성 요소 위치 지정의 영향

**URL:** https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542
**Category:** Support
**Created:** [11월 8, 2020, 11:31오전 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542 "2020-11-08T11:31:45Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Alec](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alec/32/137283_2.png) [@Alec](https://meta.discourse.org/u/Alec)
#### Post date: [11월 8, 2020, 11:31오전 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542/1 "2020-11-08T11:31:45Z")

</div>

크게 심각한 문제는 아니지만, 테마에서 사용자 지정 위치 설정을 사용 중인 경우 최신 업데이트로 인해 부정적인 영향을 받을 수 있을 것 같아 알려드립니다.

최신 업데이트가 와이드스크린으로 discourse를 표시하는 @smrtey 또는 @pacharanero의 코드를 깨뜨린 것으로 보입니다:

> **[GitHub - oerog/widescreen2: makes topic posts page wider](https://github.com/oerog/widescreen2)**
>
> makes topic posts page wider

> **[GitHub - pacharanero/discourse-topic-width-desktop: A very simple theme component which makes the...](https://github.com/pacharanero/discourse-topic-width-desktop)**
>
> A very simple theme component which makes the topic-width slightly wider

게시물 내 탐색 바가 대부분은 올바른(와이드스크린) 위치에 있지만, 위로 스크롤하면 원래의 일반 위치로 돌아간 뒤 다시 원래 위치로 돌아오는 현상이 발생합니다.

또한 @Taylor\_Troxtel의 Big Header - Little header 테마에도 의도치 않은 부정적인 영향을 미쳤습니다.

> [@Big Header - Little Header](https://meta.discourse.org/t/big-header-little-header/86811):
>
> This theme component will provide a stationary header with a large logo when scrolled at the top of the page. As you scroll down the page, the normal Discourse header bar will appear. This allows a large site logo to be cleanly displayed at the top of the page. On mobile, the header bar will only display when the phone is in portrait orientation. Vertical space is usually fairly limited when you are in landscape orientation, so this will keep things open. To see the header again, you can either…

제 사이트에서는 이로 인해 배너가 상단 버튼(카테고리, 최신, 새 글)을 가리는 문제가 발생했습니다.

현재 제 사이트에서는 해당 설정을 제거해 두었지만, 업데이트 전에 다른 분들께도 미리 알려드리고자 합니다.

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [11월 8, 2020, 5:56오후 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542/2 "2020-11-08T17:56:28Z")

</div>

현재 헤더는 CSS에서 `position: sticky`를 사용하므로, 해당 변경 사항으로 인해 이 테마들이 영향을 받았을 수 있습니다. 시작할 곳을 찾고 계신다면 [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133)와 [Discourse Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241/)가 모두 문제를 수정하기 위해 업데이트되었습니다.

---

<div class="post-metadata">

### Author: ![pacharanero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pacharanero/32/500583_2.png) [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [11월 9, 2020, 10:51오전 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542/3 "2020-11-09T10:51:07Z")

</div>

@Alec 님, 이 문제를 알려주셔서 감사합니다. 최근 2.5.0.beta6 이후로 제가 운영하는 일부 Discourse 인스턴스에서 헤더 아래 간격이 이상하다는 것을 알아차렸습니다. 해당 인스턴스들은 사이트 디자인에 더 잘 맞도록 헤더 바를 더 높게 설정하고, `#main-outlet`을 약간 아래로 밀어내려고 패딩을 추가해 두었거든요. 그런데 2.5.0.beta6 이후로 이 추가 패딩이 더 이상 필요 없게 되었습니다.

시간이 나면 이 문제를 수정하기 위해 어떤 부분을 업데이트해야 하는지 확인해 보겠습니다. 이 TC를 사용하는 인스턴스가 2개 있는데, 하나는 약간 이상해 보이지만 다른 하나는 문제없습니다. 물론, 시간이 되시는 분이라면 수정에 대한 PR도 환영합니다.

@justin 님, 수정 방법에 대한 조언을 주셔서 감사합니다.

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [11월 9, 2020, 6:34오후 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542/4 "2020-11-09T18:34:11Z")

</div>

제 사이트에는 링크하신 컴포넌트에 포함되지 않은 다른 요소들이 많아서 와이드스크린에는 영향을 미치지 않았습니다. 하지만 데스크톱 뷰를 모바일 화면에 맞게 조정하여 사용자가 모바일 기기에 내장된 답글/답변을 사용할 수 있도록 한 제 커스텀 설정이 깨졌습니다. 어째서인지 폭이 768px 미만일 때 position: sticky가 작동하지 않았습니다. sticky가 작동하지 않는 이유는 모르겠어서 결국 다음과 같이 변경했습니다.

```plaintext
@media (max-width: 767px) {
   .d-header-wrap {
      position: fixed;
      top: 0;
      width: 100%;
   }
   #main-outlet {
       margin-top: 48px;
   }
}

```

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [11월 9, 2020, 7:04오후 UTC](https://meta.discourse.org/t/impact-of-component-positioning-with-2-5-0-beta6/169542/5 "2020-11-09T19:04:10Z")

</div>

> [@Alec](#):
>
> 이로 인해 ‘Big Header - Little header’ 테마에도 의도치 않은 부정적인 영향을 미쳤습니다.

안녕하세요 👋. 이 컴포넌트에 대한 수정 사항을 오늘 중으로 적용할 예정이라고 안내드립니다!

수정: 방금 컴포넌트 업데이트를 배포했습니다. 관리자 대시보드에서 업데이트를 진행해 주세요.
