| 2026-05-26T01:55:39 |
 Aha00a |
1
|
0
|
= [Dev] Width Toggle |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
1
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
2
|
== Result Summary |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
3
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
4
|
본문 가로폭을 사용자가 직접 전환할 수 있는 내비게이션 버튼을 추가했다. |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
5
|
설정은 `localStorage`에 저장되어 페이지 이동 뒤에도 유지된다. |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
6
|
|
| 2026-09-10T04:20:44 |
Aha00a |
2
|
7
|
* 버튼 위치: 상단 내비게이션의 `themePickerInline` 그룹(테마 토글 옆). 767px 이하에서는 숨긴다 |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
8
|
* 저장 키: `ahawiki-limit-width` |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
9
|
* 기본 상태: `Wide` |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
10
|
* 전환 순서: `Wide` -> `1600` -> `1280` -> `960` |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
11
|
* 적용 클래스: `body.AhaWiki.width-1600`, `body.AhaWiki.width-1280`, `body.AhaWiki.width-960` |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
12
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
13
|
== Behavior |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
14
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
15
|
버튼을 누르면 현재 viewport보다 작은 폭 옵션만 순환한다. |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
16
|
예를 들어 1280px보다 좁은 화면에서는 `1280` 이상의 제한 단계는 건너뛴다. |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
17
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
18
|
제한 폭이 적용되면 `.limitWidth`에 `max-width`와 `margin: 0 auto`가 적용되고, |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
19
|
본문 배경, 상단 여백, 그림자, 첫 제목 여백이 함께 조정된다. |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
20
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
21
|
== Files |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
22
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
23
|
* `app/views/_base.scala.html` |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
24
|
* `widthToggle` 버튼 추가 |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
25
|
* `ahawiki-limit-width` 저장/복원 |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
26
|
* `Wide`, `1600`, `1280`, `960` 단계 순환 처리 |
| 2026-09-10T04:20:44 |
Aha00a |
2
|
27
|
* `app/assets/wiki.less` (2026-05-26 less 분할 때 `less.less` 에서 옮겨 감) |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
28
|
* `.limitWidth` 기본 padding 정리 |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
29
|
* `width-1600`, `width-1280`, `width-960` 레이아웃 스타일 추가 |
| 2026-09-10T04:20:44 |
Aha00a |
2
|
30
|
* `app/assets/less.less` — 모바일에서 버튼을 숨기는 규칙만 |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
31
|
|
| 2026-05-26T01:55:39 |
Aha00a |
1
|
32
|
== Notes |
| 2026-05-26T01:55:39 |
Aha00a |
1
|
33
|
|
| 2026-09-10T04:20:44 |
Aha00a |
2
|
34
|
테마 토글과 같은 `themePickerInline` 안에 있어 두 버튼이 같은 패턴으로 동작한다. 2026-05-29 에 Light·Dark 선택 버튼 둘이 토글 하나가 되면서 계정 메뉴와 모바일 flat 메뉴에서는 이 컨트롤이 빠졌다. |