# 모바일 사용자를 위한 Discourse 플로팅 백 버튼 추가 방법

**URL:** https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623
**Category:** Development
**Tags:** mobile
**Created:** [11월 27, 2024, 12:24오전 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623 "2024-11-27T00:24:00Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![BrianC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brianc/32/487568_2.png) [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [11월 27, 2024, 12:24오전 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/1 "2024-11-27T00:24:00Z")

</div>

모바일 브라우저용 모바일 백버튼 내비게이션에 대한 주제들이 몇 가지 있는 것 같고, 해결책을 찾지 못했지만 아마도 제가 놓친 것일 수도 있겠네요 🤔

저는 코더가 아니고, 위험할 정도로 Discourse에 능숙하지도 않지만 😉, 제 강아지와 함께 ChatGPT를 이용해 이 이미지에서 보이는 작동하는 **파란색** 백버튼을 만들어 보았습니다.

 ![이미지에는 가정 환경의 나무 바닥에 목줄을 한 작은 흰 개가 보입니다. (AI가 캡션을 달음)](https://global.discourse-cdn.com/meta/original/4X/0/2/3/0238bc699727ac3b452c1f9e98b758a0080afc13.jpeg)

특정 페이지에서 이를 숨기고 싶지만, 아직 요소를 숨기는 방법을 찾지 못했습니다. 누군가 방법을 알면 지시사항을 조정하고 추가하겠습니다.

## Discourse에 플로팅 백버튼 추가하기 (모바일 사용자용)

이 가이드는 Discourse 포럼에 모바일 기기를 위한 플로팅 “뒤로” 버튼을 추가하는 방법을 안내합니다. 버튼이 모바일 사용자에게만 나타나도록 하며, 내장된 백버튼이 없는 앱이나 브라우저의 내비게이션을 개선합니다.

* * *

### **1단계: 새 테마 컴포넌트 생성**

1. **관리자로 로그인** :

- Discourse 포럼에 접속하여 관리자 계정으로 로그인합니다.

1. **테마 사용자 지정 접근** :

- `Admin > Customize > Themes`(관리자 \> 사용자 지정 \> 테마)로 이동합니다.

1. **테마 컴포넌트 생성** :

- **Components** (컴포넌트)를 클릭합니다.
- **Install \> Create New** (설치 \> 새로 만들기)를 클릭합니다.
- 컴포넌트 이름을 "Mobile Back Button"으로 지정하고 **Create** (생성)를 클릭합니다.

* * *

### **2단계: 백버튼 코드 추가**

1. **테마 컴포넌트 편집** :

- 방금 생성한 테마 컴포넌트를 클릭합니다.
- **CSS/HTML** 섹션으로 이동합니다.

1. **백버튼용 JavaScript 추가** :

- **Mobile** (모바일) 탭으로 전환합니다.
- `</head>` 섹션을 클릭합니다.
- 다음 코드를 붙여넣습니다:

html

코드 복사

```plaintext
<script type="text/discourse-plugin" version="0.8">
  function addMobileBackButton() {
    const isMobileView = api.container.lookup('site:main').mobileView;
    if (isMobileView) {
      const existingButton = document.querySelector('.floating-back-button');
      if (!existingButton) {
        const backButton = document.createElement('button');
        backButton.className = 'floating-back-button';
        backButton.innerHTML = '&#8592;'; // 왼쪽 화살표 유니코드
        backButton.onclick = (event) => {
          event.preventDefault();
          window.history.back();
        };
        document.body.appendChild(backButton);
      }
    }
  }

  // 초기 페이지 로드 시 버튼 추가
  document.addEventListener('DOMContentLoaded', addMobileBackButton);

  // 이후 페이지 전환 시 재확인
  api.onPageChange(addMobileBackButton);
</script>

```

* * *

### **3단계: 스타일링을 위한 CSS 추가**

1. **백버튼 스타일 추가** :

- **Mobile** (모바일) 탭에서 **CSS** 섹션을 클릭합니다.
- 다음 CSS를 붙여넣습니다:

css

코드 복사

```plaintext
.floating-back-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0088cc; /* 색상 사용자 지정 */
  color: #fff;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  cursor: pointer;
}

```

* * *

### **4단계: 테마 컴포넌트 적용**

1. **테마로 돌아가기** :

- `Admin > Customize > Themes`(관리자 \> 사용자 지정 \> 테마)로 다시 이동합니다.

1. **활성 테마 편집** :

- 활성 테마를 클릭합니다.
- **Theme Components** (테마 컴포넌트)에서 드롭다운 메뉴를 통해 “Mobile Back Button” 컴포넌트를 추가합니다.
- **Add** (추가)를 클릭한 다음 **Save** (저장)를 클릭합니다.

* * *

### **5단계: 변경 사항 테스트**

1. **모바일에서 포럼 열기** :

- 모바일 브라우저를 사용하거나 개발자 도구를 사용하여 모바일 뷰를 시뮬레이션합니다.

1. **백버튼 확인** :

- 버튼이 화면 왼쪽 하단 모서리에 표시되어야 합니다.
- 버튼을 클릭하면 브라우저 히스토리에서 이전 페이지로 이동해야 합니다.

* * *

### 참고 사항:

- **모바일 전용** : 코드와 CSS가 **Mobile** (모바일) 탭에 있으므로 버튼은 모바일 기기에서만 표시됩니다.
- **사용자 지정** :
  - 포럼 디자인에 맞게 CSS에서 버튼의 위치, 크기 또는 색상을 조정할 수 있습니다.

- **기능** :
  - 백버튼은 `window.history.back()`을 사용합니다. 이전 페이지가 없으면 어디로도 이동하지 않습니다.

---

_[View the full topic](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623)._